/*
 * Copyright (c) 2026 Palm Beach Software Design, Inc. All rights reserved.
 * GroupMiles — Proprietary and confidential. Unauthorized copying,
 * distribution, or use is prohibited.
 */

/* ─── Variables ─────────────────────────────────────────── */
:root {
    --gm-orange:    #DC2626;
    --gm-bg:        #fff;
    --gm-row1-h:    108px;
    --gm-row2-h:    50px;
    --gm-header-h:  158px; /* row1 + row2 */

    /* Type scale — change these two lines to restyle the entire app */
    --gm-font-base: 17px;   /* body / cards / tables */
    --gm-font-sm:   16px;   /* secondary text, labels, meta (min 15px per D8) */
    --gm-font-xs:   13px;   /* badges, timestamps, fine print */
    --gm-font-lg:   20px;   /* card titles, section headings */
    /* ===== Sprint 39 palette: every font-size + color lives here ===== */
    /* --- Type scale (px) --- */
    --gm-font-9px: 9px;
    --gm-font-10px: 10px;
    --gm-font-11px: 11px;
    --gm-font-12px: 12px;
    --gm-font-14px: 14px;
    --gm-font-15px: 15px;
    --gm-font-18px: 18px;
    --gm-font-22px: 22px;
    --gm-font-24px: 24px;
    --gm-font-26px: 26px;
    --gm-font-28px: 28px;
    --gm-font-30px: 30px;
    --gm-font-32px: 32px;
    --gm-font-36px: 36px;
    --gm-font-40px: 40px;
    --gm-font-42px: 42px;
    --gm-font-48px: 48px;
    --gm-font-52px: 52px;
    --gm-font-56px: 56px;
    --gm-font-64px: 64px;
    --gm-font-80px: 80px;
    /* --- Type scale (rem/em) --- */
    --gm-font-1rem: 1rem;
    --gm-font-0_9rem: 0.9rem;
    --gm-font-0_85rem: 0.85rem;
    --gm-font-1_25rem: 1.25rem;
    --gm-font-0_95rem: 0.95rem;
    --gm-font-0_55em: 0.55em;
    --gm-font-3rem: 3rem;
    --gm-font-1_3rem: 1.3rem;
    --gm-font-2_2rem: 2.2rem;
    --gm-font-1_1rem: 1.1rem;
    --gm-font-0_78rem: 0.78rem;
    --gm-font-0_8rem: 0.8rem;
    --gm-font-1_6rem: 1.6rem;
    --gm-font-0_82rem: 0.82rem;
    --gm-font-1_7rem: 1.7rem;
    /* --- Type scale (responsive clamps) --- */
    --gm-font-clamp-28px: clamp(18px, 5.5vw, 28px);
    --gm-font-clamp-44px: clamp(20px, 6.5vw, 44px);
    --gm-font-clamp-22px: clamp(14px, 3.5vw, 22px);
    --gm-font-clamp-32px: clamp(22px, 7vw, 32px);
    /* --- dark --- */
    --gm-black-a00: rgba(0,0,0,0);
    --gm-black-a02: rgba(0,0,0,0.02);
    --gm-black-a04: rgba(0,0,0,0.04);
    --gm-black-a05: rgba(0,0,0,0.05);
    --gm-black-a06: rgba(0,0,0,0.06);
    --gm-black-a07: rgba(0,0,0,0.07);
    --gm-black-a08: rgba(0,0,0,0.08);
    --gm-black-a09: rgba(0,0,0,0.09);
    --gm-black-a10: rgba(0,0,0,0.1);
    --gm-black-a12: rgba(0,0,0,0.12);
    --gm-black-a16: rgba(0,0,0,0.16);
    --gm-black-a18: rgba(0,0,0,0.18);
    --gm-black-a25: rgba(0,0,0,0.25);
    --gm-black-a30: rgba(0,0,0,0.3);
    --gm-black-a35: rgba(0,0,0,0.35);
    --gm-black-a40: rgba(0,0,0,0.4);
    --gm-black-a45: rgba(0,0,0,0.45);
    --gm-black-a50: rgba(0,0,0,0.5);
    --gm-black-a55: rgba(0,0,0,0.55);
    --gm-black-a60: rgba(0,0,0,0.6);
    --gm-black-a65: rgba(0,0,0,0.65);
    --gm-black-a75: rgba(0,0,0,0.75);
    --gm-black-a85: rgba(0,0,0,0.85);
    --gm-black-a88: rgba(0,0,0,0.88);
    --gm-black: #000;
    --gm-dark-05: #0a0c11;
    --gm-dark-row1: #0d0f12;
    --gm-dark-06: #0d0f14;
    --gm-dark-07: #111;
    --gm-dark-bg: #111318;
    --gm-dark-10-231e10: #231e10;
    --gm-dark-10: #1a1a1a;
    --gm-dark-10-151820: #151820;
    --gm-dark-panel-head: #181a20;
    --gm-dark-11: #111827;
    --gm-dark-11-181a22: #181a22;
    --gm-dark-11-1a1c20: #1a1c20;
    --gm-dark-12-1a1c22: #1a1c22;
    --gm-dark-12-1e1e1e: #1e1e1e;
    --gm-dark-12: #1a1d24;
    --gm-dark-12-1a1d25: #1a1d25;
    --gm-dark-13: #1a1e26;
    --gm-dark-13-1a2a1a: #1a2a1a;
    --gm-dark-panel: #1d2028;
    --gm-dark-14: #1e2128;
    --gm-dark-14-1a2e1a: #1a2e1a;
    --gm-dark-14-2e1a1a: #2e1a1a;
    --gm-dark-14-2e261a: #2e261a;
    --gm-dark-14-1a242e: #1a242e;
    --gm-dark-15-212529: #212529;
    --gm-dark-15: #22252b;
    --gm-dark-16: #2a2a2a;
    --gm-dark-elevated: #252830;
    --gm-dark-17: #1f2937;
    --gm-dark-18: #252a35;
    --gm-dark-19: #2a2d35;
    --gm-dark-20: #333;
    --gm-dark-22: #2e3240;
    /* --- grey --- */
    --gm-grey-27: #444;
    --gm-grey-33: #555;
    --gm-grey-40: #666;
    --gm-grey-46: #6b7280;
    --gm-grey-47: #777;
    --gm-grey-50-a15: rgba(128,128,128,0.15);
    --gm-grey-50-a20: rgba(128,128,128,0.2);
    --gm-grey-52: #7a7f8e;
    --gm-grey-53: #888;
    --gm-grey-54: #8a8a8a;
    --gm-grey-60: #999;
    --gm-grey-65: #9ca3af;
    --gm-grey-67: #aaa;
    --gm-grey-73: #bbb;
    --gm-grey-75: #c0c0c0;
    --gm-grey-80: #ccc;
    --gm-grey-82: #d0d0d0;
    --gm-grey-87: #ddd;
    --gm-text-light: #e0e0e0;
    --gm-grey-89: #e4e4e4;
    --gm-grey-91: #e8e8e8;
    --gm-grey-92: #e8e9ec;
    --gm-grey-93: #eee;
    --gm-grey-94: #f0f0f0;
    --gm-grey-95: #f2f2f2;
    --gm-grey-96: #f5f5f5;
    --gm-grey-96-f4f4f6: #f4f4f6;
    --gm-grey-97-f7f7f7: #f7f7f7;
    --gm-grey-97: #f8f8f8;
    --gm-grey-98: #f9f9f9;
    --gm-grey-98-fafafa: #fafafa;
    --gm-white-a02: rgba(255,255,255,0.02);
    --gm-white-a028: rgba(255,255,255,0.028);
    --gm-white-a03: rgba(255,255,255,0.03);
    --gm-white-a035: rgba(255,255,255,0.035);
    --gm-white-a04: rgba(255,255,255,0.04);
    --gm-white-a045: rgba(255,255,255,0.045);
    --gm-white-a05: rgba(255,255,255,0.05);
    --gm-white-a06: rgba(255,255,255,0.06);
    --gm-white-a07: rgba(255,255,255,0.07);
    --gm-border-faint: rgba(255,255,255,0.08);
    --gm-white-a09: rgba(255,255,255,0.09);
    --gm-white-a10: rgba(255,255,255,0.1);
    --gm-white-a12: rgba(255,255,255,0.12);
    --gm-white-a14: rgba(255,255,255,0.14);
    --gm-white-a15: rgba(255,255,255,0.15);
    --gm-white-a18: rgba(255,255,255,0.18);
    --gm-white-a20: rgba(255,255,255,0.2);
    --gm-white-a22: rgba(255,255,255,0.22);
    --gm-white-a25: rgba(255,255,255,0.25);
    --gm-white-a28: rgba(255,255,255,0.28);
    --gm-white-a30: rgba(255,255,255,0.3);
    --gm-white-a35: rgba(255,255,255,0.35);
    --gm-white-a40: rgba(255,255,255,0.4);
    --gm-white-a45: rgba(255,255,255,0.45);
    --gm-white-a50: rgba(255,255,255,0.5);
    --gm-white-a55: rgba(255,255,255,0.55);
    --gm-white-a60: rgba(255,255,255,0.6);
    --gm-white-a65: rgba(255,255,255,0.65);
    --gm-white-a70: rgba(255,255,255,0.7);
    --gm-white-a75: rgba(255,255,255,0.75);
    --gm-white-a80: rgba(255,255,255,0.8);
    --gm-white-a85: rgba(255,255,255,0.85);
    --gm-white-a90: rgba(255,255,255,0.9);
    --gm-white-a92: rgba(255,255,255,0.92);
    --gm-white: #fff;
    /* --- red --- */
    --gm-red-26: #6d1a1a;
    --gm-red-26-5a2d2d: #5a2d2d;
    --gm-red-34: #991616;
    --gm-red-35-a40: rgba(180,0,0,0.4);
    --gm-red-40: #c00;
    --gm-red-41: #a03030;
    --gm-red-42-a07: rgba(185,28,28,0.07);
    --gm-orange-dark: #b91c1c;
    --gm-red-46-a12: rgba(192,57,43,0.12);
    --gm-red-46-a20: rgba(192,57,43,0.2);
    --gm-red-46: #c0392b;
    --gm-red-50-a85: rgba(255,0,0,0.85);
    --gm-red-51-a08: rgba(220,38,38,0.08);
    --gm-red-51-a10: rgba(220,38,38,0.1);
    --gm-red-51-a15: rgba(220,38,38,0.15);
    --gm-red-51-a18: rgba(220,38,38,0.18);
    --gm-red-51-a25: rgba(220,38,38,0.25);
    --gm-red-51-a30: rgba(220,38,38,0.3);
    --gm-red-51-a40: rgba(220,38,38,0.4);
    --gm-red-51-a85: rgba(220,38,38,0.85);
    --gm-orange: #DC2626;
    --gm-red-51: #dc2743;
    --gm-red-54-a10: rgba(220,53,69,0.1);
    --gm-red-54-a20: rgba(220,53,69,0.2);
    --gm-red-54-a40: rgba(220,53,69,0.4);
    --gm-red-54-a50: rgba(220,53,69,0.5);
    --gm-red-54-a55: rgba(220,53,69,0.55);
    --gm-red-54: #dc3545;
    --gm-red-57: #e74c3c;
    --gm-red-58: #d9534f;
    --gm-red-65: #cf7f7f;
    --gm-red-71: #f87171;
    --gm-red-82: #fca5a5;
    --gm-red-83: #ffaaaa;
    --gm-red-85: #f0c0c0;
    /* --- orange --- */
    --gm-orange-05: #1a0e00;
    --gm-orange-18: #5a4100;
    --gm-orange-26: #5a4a2d;
    --gm-orange-27: #856404;
    --gm-orange-29: #854d0e;
    --gm-orange-31: #92400e;
    --gm-orange-31-a04000: #a04000;
    --gm-orange-41: #c8960a;
    --gm-orange-41-a10: rgba(211,84,0,0.1);
    --gm-orange-44: #d97706;
    --gm-orange-47: #f0a500;
    --gm-orange-50: #e6a817;
    --gm-orange-50-a40: rgba(224,123,31,0.4);
    --gm-orange-50-ff4500: #FF4500;
    --gm-orange-50-e07b1f: #E07B1F;
    --gm-orange-50-a18: rgba(245,158,11,0.18);
    --gm-orange-50-f59e0b: #f59e0b;
    --gm-orange-51: #f39c12;
    --gm-orange-52-a18: rgba(230,126,34,0.18);
    --gm-orange-56-a15: rgba(251,191,36,0.15);
    --gm-orange-56-a30: rgba(251,191,36,0.3);
    --gm-orange-56: #fbbf24;
    --gm-orange-57: #f09433;
    --gm-orange-60: #f0c040;
    --gm-orange-62: #f0ad4e;
    --gm-orange-62-f4a44a: #f4a44a;
    --gm-orange-65: #cfaf7f;
    --gm-orange-97: #fffbf0;
    /* --- amber --- */
    --gm-amber-08: #2a2600;
    --gm-amber-08-2a2400: #2a2400;
    --gm-amber-08-2a2000: #2a2000;
    --gm-amber-20: #665000;
    --gm-amber-24: #7a6200;
    --gm-amber-47-a12: rgba(234,179,8,0.12);
    --gm-amber-47-a15: rgba(234,179,8,0.15);
    --gm-amber-47-a40: rgba(234,179,8,0.4);
    --gm-amber-47-a50: rgba(234,179,8,0.5);
    --gm-amber-51-f6c90e: #f6c90e;
    --gm-amber-51: #ffc107;
    --gm-amber-77: #fde68a;
    --gm-amber-90: #fff3cd;
    --gm-amber-94: #fff8e1;
    --gm-amber-96: #fffbeb;
    /* --- green --- */
    --gm-green-21: #1e4d1e;
    --gm-green-24: #166534;
    --gm-green-26: #2d5a2d;
    --gm-green-29: #2a6929;
    --gm-green-29-15803d: #15803d;
    --gm-green-32: #1e8449;
    --gm-green-32-3a6b3a: #3a6b3a;
    --gm-green-41: #28a745;
    --gm-green-42-a12: rgba(39,174,96,0.12);
    --gm-green-42: #27ae60;
    --gm-green-44: #449d44;
    --gm-green-45: #22c55e;
    --gm-green-49-a15: rgba(46,204,113,0.15);
    --gm-green-49: #2ecc71;
    --gm-green-54: #5cb85c;
    --gm-green-58-a04: rgba(74,222,128,0.04);
    --gm-green-58-a08: rgba(74,222,128,0.08);
    --gm-green-58-a10: rgba(74,222,128,0.1);
    --gm-green-58-a12: rgba(74,222,128,0.12);
    --gm-green-58-a15: rgba(74,222,128,0.15);
    --gm-green-58-a20: rgba(74,222,128,0.2);
    --gm-green-58-a25: rgba(74,222,128,0.25);
    --gm-green-58-a35: rgba(74,222,128,0.35);
    --gm-green-58: #4ade80;
    --gm-green-65-7dcc7d: #7dcc7d;
    --gm-green-65: #7fcf7f;
    --gm-green-73: #86efac;
    --gm-green-85: #bbf7d0;
    --gm-green-86: #d0e8d0;
    /* --- teal --- */
    --gm-teal-38: #31708f;
    --gm-teal-61: #5bc0de;
    /* --- blue --- */
    --gm-blue-11: #0f172a;
    --gm-blue-18: #1a2540;
    --gm-blue-20: #15304f;
    --gm-blue-24: #2c3e50;
    --gm-blue-25: #1e3a5f;
    --gm-blue-26: #3a3f4c;
    --gm-blue-26-2d4a5a: #2d4a5a;
    --gm-blue-27: #374151;
    --gm-blue-27-252c63: #252c63;
    --gm-blue-35: #0077B5;
    --gm-blue-46: #337ab7;
    --gm-blue-47: #4a6fa5;
    --gm-blue-48: #1d4ed8;
    --gm-blue-52: #1877F2;
    --gm-blue-53: #2563eb;
    --gm-blue-55: #3b5bdb;
    --gm-blue-56: #5C6BC0;
    --gm-blue-58: #4a9de0;
    --gm-blue-58-6a8fc0: #6a8fc0;
    --gm-blue-60: #3b82f6;
    /* Ride-classification colors (events list cards). Deep enough that white text
       reads cleanly on the strip AND the same color reads as text on a white card. */
    --gm-ride-fullday:   #1f7a44; /* Full Day Ride — the default/unclassified ride */
    --gm-ride-short:     #21618c; /* Short Ride — a few hours */
    --gm-ride-bikenight: #5b3a8c; /* Bike Night — evening, distinct indigo */
    --gm-ride-multiday:  #9a5b1e; /* Multi-Day Ride — amber */
    /* Brightened ride colors for use as TEXT on a dark panel (the saturated colors
       above are background-grade and read poorly as text on black — esp. Bike Night). */
    --gm-ride-fullday-lt:   #4cc987;
    --gm-ride-short-lt:     #5fb3e6;
    --gm-ride-bikenight-lt: #b69be8;
    --gm-ride-multiday-lt:  #e0a45c;
    /* Standard button colors — the events ride-bar palette is the site standard. Buttons
       sit at the toned base color and "light up" (brighter) on hover. */
    --gm-btn-red:         var(--gm-ride-next);    /* #b32424 — toned standard red */
    --gm-btn-red-hover:   #d63a3a;                /* lights up on hover */
    --gm-btn-green:       var(--gm-ride-fullday); /* #1f7a44 — events green */
    --gm-btn-green-hover: #2a9d5a;                /* lights up on hover */
    --gm-ride-next:      #b32424; /* Next ride — deep red */
    --gm-ride-past:      #555555; /* Past ride — muted gray */
    --gm-ride-upcoming:  #226b3c; /* "Upcoming Event" badge — darker green */
    --gm-blue-63: #5dade2;
    --gm-blue-65: #7fafcf;
    --gm-blue-68-a10: rgba(96,165,250,0.1);
    --gm-blue-68: #60a5fa;
    --gm-blue-68-7aa8e0: #7aa8e0;
    --gm-blue-72: #7ca8f4;
    --gm-blue-78: #a0c0f0;
    --gm-blue-82: #c8cdd8;
    --gm-blue-84: #d1d5db;
    --gm-blue-86: #d0d8e8;
    --gm-blue-91: #e2e5ec;
    --gm-blue-91-e5e7eb: #e5e7eb;
    --gm-blue-91-e2e8f0: #e2e8f0;
    --gm-blue-95: #e8f0fe;
    --gm-blue-96: #f3f4f6;
    --gm-blue-98: #f8f9fa;
    --gm-blue-98-f9fafb: #f9fafb;
    /* --- magenta --- */
    --gm-magenta-42: #bc1888;
    /* --- Sprint 39 close: semantic card tokens (were undefined, relied on var() fallback) --- */
    --gm-card-bg: var(--gm-white);
    --gm-border: var(--gm-blue-91-e5e7eb);
    /* --- Sprint 39 close: values from staging-merged sections (Sprint 40/41/43) --- */
    --gm-font-50px: 50px;
    --gm-dark-13-222222: #222;
    --gm-orange-39-8a6d3b: #8a6d3b;
    --gm-orange-67-d4b483: #d4b483;
    --gm-grey-90-e6e6e6: #e6e6e6;
    --gm-grey-89-e2e2e2: #e2e2e2;
    --gm-green-36-16a34a: #16a34a;
    --gm-blue-16-16263a: #16263a;
    --gm-blue-30-244a73: #244a73;
    --gm-blue-31-1a4d80: #1a4d80;
    --gm-blue-52-1f6feb: #1f6feb;
    --gm-blue-78-9ec5f0: #9ec5f0;
    --gm-blue-90-cfe2ff: #cfe2ff;
    --gm-blue-94-e9eef5: #e9eef5;
    --gm-blue-97-f0f7ff: #f0f7ff;
    --gm-black-a15: rgba(0,0,0,0.15);
    --gm-black-a28: rgba(0,0,0,0.28);
    --gm-black-a62: rgba(0,0,0,0.62);
    --gm-black-a78: rgba(0,0,0,0.78);
    --gm-white-a94: rgba(255,255,255,0.94);
}

/* ─── Global font — one variable rules them all ──────────── */
body { font-size: var(--gm-font-base); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.gm-content { font-size: var(--gm-font-base); }
.gm-content td, .gm-content th { font-size: var(--gm-font-base); }
.gm-content .table { font-size: var(--gm-font-base); }
.text-muted, .help-block { font-size: var(--gm-font-sm); }
small, .small { font-size: var(--gm-font-sm); }

/* ─── Row 1 — carbon fiber brand bar ────────────────────── */
.gm-row1 {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--gm-row1-h);
    z-index: 1040;
    background-color: var(--gm-dark-row1);
    background-image:
        repeating-linear-gradient(0deg,
            var(--gm-white-a045) 0px, var(--gm-white-a045) 1px,
            transparent 1px, transparent 8px),
        repeating-linear-gradient(90deg,
            var(--gm-white-a028) 0px, var(--gm-white-a028) 1px,
            transparent 1px, transparent 8px);
}

.gm-row1-inner {
    padding: 0 32px;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

/* ─── Brand icon (left) ──────────────────────────────────── */
.gm-brand-icon {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
    text-decoration: none;
    z-index: 2;
}
.gm-brand-icon img {
    max-height: 96px;
    width: auto;
    opacity: 0.8;
}

/* ─── Invite a Rider — header button (Row 1 left) ─────────────── */
.gm-invite-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--gm-green-42);
    color: var(--gm-white);
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: var(--gm-font-xs);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    margin-left: 14px;
    transition: background 0.15s;
    flex-shrink: 0;
}
.gm-invite-header-btn:hover { background: var(--gm-green-32); color: var(--gm-white); }

/* ─── Guest login button ─────────────────────────────────── */
.gm-login-btn {
    background: var(--gm-white-a10);
    border: 1px solid var(--gm-white-a25);
    color: var(--gm-white-a85);
    padding: 5px 14px;
    border-radius: 6px;
    font-size: var(--gm-font-xs);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.gm-login-btn:hover {
    background: var(--gm-white-a18);
    color: var(--gm-white);
    text-decoration: none;
}

/* ─── Club identity — centered absolutely in row1 ────────── */
.gm-club-ident {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

/* Pulled Over page — suppress club logo from header */
.gm-hide-club-ident .gm-club-ident { display: none; }

.gm-club-logo {
    height: 72px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.gm-club-text { text-align: center; }
.gm-club-name {
    color: var(--gm-white);
    font-size: var(--gm-font-sm);
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.2;
    display: block;
}
.gm-club-sub {
    color: var(--gm-white-a45);
    font-size: var(--gm-font-10px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ─── Right side of Row 1 ────────────────────────────────── */
.gm-row1-right {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-left: auto;
    z-index: 2;
}

/* ─── Theme toggle buttons (in nav bar) ─────────────────── */
.gm-mode-wrap {
    display: flex;
    gap: 2px;
    background: var(--gm-white-a06);
    border-radius: 6px;
    padding: 3px;
    align-self: center;
    flex-shrink: 0;
}
.gm-mode-wrap button {
    background: transparent;
    border: none;
    color: var(--gm-white-a45);
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: var(--gm-font-xs);
    line-height: 1;
    transition: background 0.15s;
}
.gm-mode-wrap button.gm-mode-active {
    background: var(--gm-white-a14);
    color: var(--gm-white);
}

/* ─── User pill ──────────────────────────────────────────── */
.gm-user-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--gm-white-a07);
    border: 1px solid var(--gm-white-a12);
    border-radius: 6px;
    color: var(--gm-white-a75);
    padding: 4px 10px;
    font-size: var(--gm-font-12px);
    cursor: pointer;
}
.gm-user-av {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gm-orange);
    color: var(--gm-white);
    font-size: var(--gm-font-10px);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gm-user-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Row 2 — nav bar ────────────────────────────────────── */
.gm-row2 {
    position: fixed;
    top: var(--gm-row1-h);
    left: 0; right: 0;
    height: var(--gm-row2-h);
    z-index: 1039;
    background: var(--gm-dark-panel-head);
    border-top: 1px solid var(--gm-white-a06);
    display: flex;
    align-items: center;
}

.gm-row2-inner {
    width: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    height: 100%;
}

/* ─── Nav 3-section layout: left | center | right ─────────────── */
.gm-nav-left   { flex: 1; display: flex; align-items: center; gap: 4px; }
.gm-nav-center { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 100%; }
.gm-nav-right  { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

/* ─── Nav buttons ────────────────────────────────────────── */
.gm-nav-btn {
    color: var(--gm-white-a75);
    background: transparent;
    border: none;
    padding: 6px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--gm-font-base);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s, color 0.15s;
    line-height: var(--gm-row2-h);
    white-space: nowrap;
}
.gm-nav-btn:hover { background: var(--gm-white-a10); color: var(--gm-white); text-decoration: none; }
.gm-nav-btn.active { background: var(--gm-btn-red); color: var(--gm-white); }
.gm-nav-btn.admin {
    background: var(--gm-white-a07);
    border: 1px solid var(--gm-white-a18);
    color: var(--gm-white-a85);
    line-height: 1;
    height: 34px;
    padding: 0 14px;
    font-size: var(--gm-font-sm);
}
.gm-nav-btn.dev-tools {
    background: var(--gm-red-54-a20);
    border: 1px solid var(--gm-red-54-a55);
    color: var(--gm-red-83);
    line-height: 1;
    height: 34px;
    padding: 0 14px;
    font-size: var(--gm-font-sm);
}
.gm-nav-btn.dev-tools:hover { background: var(--gm-red-54-a40); color: var(--gm-white); }
.gm-devtools-wrap { max-width: 960px; margin: 30px auto; padding: 0 20px; }
.gm-devtools-header {
    background: var(--gm-amber-90);
    border: 1px solid var(--gm-amber-51);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.gm-devtools-header h2 { margin: 0 0 8px; font-size: var(--gm-font-22px); }
.gm-devtools-note { margin: 0; font-size: var(--gm-font-sm); color: var(--gm-orange-18); }
.gm-devtools-section-label {
    font-size: var(--gm-font-sm);
    font-weight: 600;
    color: var(--gm-grey-27);
    margin: 24px 0 10px;
    border-bottom: 1px solid var(--gm-grey-87);
    padding-bottom: 4px;
}
.gm-devtools-table { font-size: var(--gm-font-sm); }
.gm-devtools-table th { background: var(--gm-grey-96); white-space: nowrap; }
.gm-devtools-table-test { border-color: var(--gm-amber-51); }
.gm-devtools-table-test th { background: var(--gm-amber-90); }
.gm-devtools-action-cell { white-space: nowrap; width: 1%; }

/* ─── Hamburger button (mobile nav toggle) ──────────────── */
.gm-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
    flex-shrink: 0;
    border-radius: 6px;
    transition: background 0.15s;
    margin-left: 8px;
}
.gm-hamburger:hover { background: var(--gm-white-a10); }
.gm-ham-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gm-white-a85);
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.15s;
}
body.gm-nav-open .gm-hamburger .gm-ham-bar:nth-child(1) { transform: translateY(7px)  rotate(45deg); }
body.gm-nav-open .gm-hamburger .gm-ham-bar:nth-child(2) { opacity: 0; }
body.gm-nav-open .gm-hamburger .gm-ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Admin dropdown */
.gm-admin-dropdown { margin-left: auto; }
.gm-admin-dropdown .dropdown-menu {
    right: 0; left: auto;
    min-width: 180px;
}

/* ─── Page wrapper — flex sticky footer (no min-height hacks) */
.gm-page-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--gm-header-h); /* push below fixed header */
    box-sizing: border-box;
}

/* ─── Content area ───────────────────────────────────────── */
.gm-content {
    background: var(--gm-bg);
    padding-top: 24px;
    flex: 1; /* grows to fill — footer always stays at bottom */
}

/* ── Member's Miles (UX-1) ──────────────────────────────────────────── */
/* Title row: title left, action buttons right */
.gm-mm-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.gm-mm-heading-row .kv-panel-toolbar {
    margin: 0;
}
/* Toolbar below the title: Assign Miles + page size on one row */
.gm-mm-toolbar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 4px 0;
}
/* Dark filter row background (carbon-fibre) */
.filter-bg-dark {
    background-image: repeating-linear-gradient(
        45deg,
        var(--gm-white-a03) 0px,
        var(--gm-white-a03) 1px,
        transparent 1px,
        transparent 6px
    ),
    repeating-linear-gradient(
        -45deg,
        var(--gm-white-a03) 0px,
        var(--gm-white-a03) 1px,
        transparent 1px,
        transparent 6px
    );
    background-color: var(--gm-dark-13);
}
.filter-bg-dark label,
.filter-bg-dark .control-label {
    color: var(--gm-blue-82);
    font-size: var(--gm-font-xs);
}
.filter-bg-dark input.form-control,
.filter-bg-dark select.form-control {
    background-color: var(--gm-dark-18);
    border-color: var(--gm-blue-26);
    color: var(--gm-blue-91);
    font-size: var(--gm-font-xs);
}
.filter-bg-dark input.form-control::placeholder {
    color: var(--gm-grey-52);
}

/* Panel footer + grid container for Member's Miles */
.gm-mm-panel-footer {
    background: transparent;
    border-top: 1px solid var(--gm-black-a08);
    padding: 8px 14px;
}
.gm-mm-grid-container {
    min-height: 400px;
}

/* Legacy grid panel heading flex helper */
.gm-miles-heading {
    padding: 12px 16px;
    display: flex;
    align-items: center;
}

/* Member's Miles grid (Rider Miles page) heading: title on the left, toolbar (Assign Miles +
   refresh + export) floated right on one auto-height bar via kartik's float template. The base
   .gm-miles-heading is display:flex, which disabled kartik's float and let the toolbar overlap
   the grid header — override to a normal block that contains the float. (Fixed Sprint 50.) */
#rides-grid-wrapper .gm-miles-heading {
    display: block;       /* override base flex so the pull-right toolbar + clearfix flow */
    min-height: 0;
    padding: 10px 16px;
    overflow: hidden;     /* establish a block formatting context that contains the float */
}
#rides-grid-wrapper .gm-miles-heading .panel-title { display: inline; }
/* One scrollbar, totals always visible: base.css pins div#members-miles-list-container to
   height:300px which created a SECOND (inner) scrollbar on top of the page scrollbar. Let the
   grid render every row at natural height (page scrolls — the single scrollbar) and pin the
   totals bar to the bottom of the viewport so it's always visible, right under the last row. */
#rides-grid-wrapper #members-miles-list-container {
    height: auto;
    max-height: none;
    overflow-y: visible;
}
#rides-grid-wrapper .gm-miles-totals-footer {
    position: sticky;
    bottom: 0;
    z-index: 6;
}

/* ─── Event cards (Task 10.4) ────────────────────────────── */
.gm-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
    padding: 8px 0;
}
/* li is the direct grid item — must pass height down to the card */
.gm-events-list-ul { list-style: none; margin: 0; padding: 0; }
.gm-events-list-ul > li { display: flex; flex-direction: column; }
.gm-event-card {
    border-radius: 10px;
    overflow: hidden;
    background: var(--gm-white);
    box-shadow: 0 2px 8px var(--gm-black-a08);
    border: 1px solid var(--gm-black-a06);
    display: flex;
    flex-direction: column;
    flex: 1; /* fill the li, which fills the grid cell */
    transition: transform 0.15s, box-shadow 0.15s;
}
.gm-event-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--gm-black-a12); }
.gm-card-img-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    background: var(--gm-dark-19);
}
.gm-card-img-wrap img,
.gm-card-img-wrap svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gm-card-badge-next {
    position: absolute;
    top: 8px; left: 8px;
    background: var(--gm-orange);
    color: var(--gm-white);
    font-size: var(--gm-font-9px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
}
.gm-card-badge-unofficial {
    position: absolute;
    top: 8px; right: 8px;
    background: var(--gm-black-a50);
    color: var(--gm-white);
    font-size: var(--gm-font-9px);
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
}
.gm-card-strip {
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
}
.gm-card-ride-label {
    font-size: var(--gm-font-xs);
    font-weight: 700;
    color: var(--gm-white);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.gm-card-body { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.gm-card-date { font-size: var(--gm-font-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.gm-card-title { font-size: var(--gm-font-lg); font-weight: 700; color: var(--gm-dark-10); margin: 0; line-height: 1.3; }
.gm-card-loc { font-size: var(--gm-font-sm); color: var(--gm-grey-40); }
.gm-card-captain { font-size: var(--gm-font-sm); color: var(--gm-grey-33); margin-bottom: 4px; }
.gm-captain-icon { color: var(--gm-orange-50); margin-right: 3px; font-size: var(--gm-font-11px); }
.gm-card-desc { font-size: var(--gm-font-sm); color: var(--gm-grey-47); line-height: 1.5; flex: 1; }
.gm-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid var(--gm-black-a05);
}
.gm-avatar-stack { display: flex; align-items: center; gap: -4px; }
.gm-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--gm-orange);
              color: var(--gm-white); font-size: var(--gm-font-9px); font-weight: 700; display: inline-flex;
              align-items: center; justify-content: center;
              border: 2px solid var(--gm-white); margin-right: -6px; }
.gm-attend-count { font-size: var(--gm-font-sm); color: var(--gm-grey-53); margin-left: 16px; }
.gm-rsvp-btn { font-size: var(--gm-font-base); font-weight: 600; padding: 8px 20px; border-radius: 5px; }

/* Past event muting (Sprint 47): grayscale the cover image + color strip so past
   rides read as visually "done" at a glance, distinct from full-color upcoming. */
.gm-event-card.gm-past .gm-card-date { color: var(--gm-grey-60); }
.gm-event-card.gm-past .gm-card-img-wrap img,
.gm-event-card.gm-past .gm-card-img-wrap svg { filter: grayscale(100%); opacity: 0.9; }
.gm-event-card.gm-past .gm-card-strip { filter: grayscale(100%); }

/* Per-card status badge (Sprint 47) — "Past Event" / "Upcoming Event" overlay.
   Shares geometry with .gm-card-badge-next; lives above the grayscale image so it
   stays legible. The badge itself is a <span>, not an <img>/<svg>, so it is never
   desaturated by the past-card grayscale rule above. */
.gm-card-badge-status {
    position: absolute;
    top: 8px; left: 8px;
    color: var(--gm-white);
    font-size: var(--gm-font-9px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
}
.gm-card-badge-past     { background: var(--gm-ride-past); }
.gm-card-badge-upcoming { background: var(--gm-ride-upcoming); }

/* ─── Dashboard cards (Task 10.5) ────────────────────────── */
.gm-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.gm-stat-card {
    background: var(--gm-white);
    border: 1px solid var(--gm-black-a06);
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 1px 4px var(--gm-black-a05);
}
.gm-stat-label { font-size: var(--gm-font-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--gm-grey-53); margin-bottom: 4px; }
.gm-stat-value { font-size: var(--gm-font-22px); font-weight: 700; color: var(--gm-dark-10); line-height: 1.1; }
.gm-stat-sub { font-size: var(--gm-font-sm); color: var(--gm-grey-67); margin-top: 2px; }

.gm-dash-body {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 48px;
    align-items: start;
}
.gm-activity-feed {
    height: 360px;
    overflow-y: auto;
    border: 1px solid var(--gm-black-a07);
    border-radius: 8px;
    padding: 12px 14px;
}
.gm-book-promo { width: 200px; justify-self: center; }
.gm-activity-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gm-black-a05);
    align-items: flex-start;
}
.gm-activity-av {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--gm-orange); color: var(--gm-white);
    font-size: var(--gm-font-11px); font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.gm-activity-text { font-size: var(--gm-font-sm); color: var(--gm-grey-27); line-height: 1.4; }
.gm-activity-time { font-size: var(--gm-font-xs); color: var(--gm-grey-67); white-space: nowrap; }

/* Book promo card */
.gm-book-card {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--gm-black-a08);
    box-shadow: 0 2px 8px var(--gm-black-a07);
}
.gm-book-header {
    background: var(--gm-dark-row1);
    padding: 10px 12px;
    text-align: center;
}
.gm-book-byline { font-size: var(--gm-font-9px); color: var(--gm-white-a45); letter-spacing: 0.1em; text-transform: uppercase; }
.gm-book-title-block {
    background: var(--gm-orange);
    padding: 6px 8px;
    margin-top: 6px;
    border-radius: 3px;
}
.gm-book-title { font-size: var(--gm-font-11px); font-weight: 700; color: var(--gm-white); line-height: 1.3; }
.gm-book-body { padding: 10px 12px; background: var(--gm-white); }
.gm-book-desc { font-size: var(--gm-font-10px); color: var(--gm-grey-33); line-height: 1.4; margin-bottom: 6px; }
.gm-book-price { font-size: var(--gm-font-11px); font-weight: 600; color: var(--gm-dark-10); margin-bottom: 8px; }
.gm-book-btn {
    display: block; text-align: center;
    background: var(--gm-orange); color: var(--gm-white);
    border-radius: 5px; padding: 6px;
    font-size: var(--gm-font-11px); font-weight: 600;
    text-decoration: none;
}
.gm-book-btn:hover { background: var(--gm-orange-dark); color: var(--gm-white); text-decoration: none; }

/* ─── Members v2 ─────────────────────────────────────────── */
.gm-member-av {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--gm-orange); color: var(--gm-white);
    font-size: var(--gm-font-12px); font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
}
.gm-member-av img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.gm-ytd-miles { font-size: var(--gm-font-sm); color: var(--gm-grey-67); margin-left: 6px; }

/* ─── Pulsing heart icon ─────────────────────────────────── */
@keyframes gm-heartbeat {
    0%,100% { transform: scale(1); }
    14%     { transform: scale(1.4); }
    28%     { transform: scale(1); }
    42%     { transform: scale(1.4); }
    70%     { transform: scale(1); }
}
.gm-heart-beat {
    display: inline-block;
    color: var(--gm-red-57);
    animation: gm-heartbeat 2s ease-in-out infinite;
    font-size: var(--gm-font-sm);
    cursor: pointer;
}

/* ─── Full-width: override Bootstrap container in new mode ── */
.gm-content .container,
.gm-content .container-fluid {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* ─── Sticky bar button alignment ─────────────────────────── */
.gm-sticky-btn { height:30px; line-height:18px; vertical-align:middle; }
.sticky-bottom .btn { height:30px; line-height:18px; vertical-align:middle; }
.sticky-bottom .btn-group { vertical-align:middle; }

/* ─── Breadcrumb (10.11.b) ───────────────────────────────── */
/* Ensure breadcrumbs clear the fixed two-row header in new mode */
.gm-content .breadcrumb { margin-bottom: 16px; padding: 6px 12px; }

/* ─── Bike cards ────────────────────────────────────────── */
.gm-bike-card {
    background: var(--gm-white);
    border: 1px solid var(--gm-grey-87);
    border-radius: 4px;
    overflow: hidden;
}
.gm-bike-doc-panel {
    background: var(--gm-grey-98);
    border-top: 1px solid var(--gm-grey-93);
}

/* ─── Avatar dropdown ────────────────────────────────────── */
.gm-avatar-wrap { position: relative; display: inline-block; }
.gm-avatar-btn {
    background: var(--gm-white-a06);
    border: 1px solid var(--gm-white-a15);
    border-radius: 8px;
    padding: 5px 10px 5px 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    transition: background 0.15s, border-color 0.15s;
}
.gm-avatar-btn:hover {
    background: var(--gm-white-a12);
    border-color: var(--gm-white-a28);
}
.gm-avatar-circle { position: relative; display: inline-block; flex-shrink: 0; }
.gm-avatar-photo { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; display: block; }
.gm-avatar-badge {
    position: absolute;
    top: -2px; right: -2px;
    width: 10px; height: 10px;
    background: var(--gm-orange);
    border-radius: 50%;
    border: 2px solid var(--gm-dark-row1);
}
.gm-avatar-name {
    font-size: var(--gm-font-sm);
    font-weight: 600;
    color: var(--gm-white-a90);
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}
.gm-avatar-caret {
    font-size: var(--gm-font-9px);
    color: var(--gm-white-a40);
    margin-left: 2px;
    flex-shrink: 0;
}
.gm-avatar-dropdown { min-width: 190px; }

/* ─── Household rider picker (Sprint 43) ───────────────────── */
.gm-rider-picker { position: relative; display: inline-block; margin-right: 8px; }
.gm-rider-btn {
    background: var(--gm-white-a06);
    border: 1px solid var(--gm-white-a15);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}
.gm-rider-btn:hover {
    background: var(--gm-white-a12);
    border-color: var(--gm-white-a28);
}
.gm-rider-label { font-size: var(--gm-font-12px); color: var(--gm-white-a50); white-space: nowrap; }
html:not(.gm-dark) .gm-rider-label { color: var(--gm-grey-47); }
.gm-rider-name {
    font-size: var(--gm-font-sm);
    font-weight: 600;
    color: var(--gm-white-a90);
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html:not(.gm-dark) .gm-rider-name { color: var(--gm-dark-13-222222); }
.gm-rider-dropdown { min-width: 200px; padding: 4px 0; }
.gm-rider-form { margin: 0; }
.gm-rider-option {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 6px 18px;
    font-size: var(--gm-font-sm);
    color: inherit;
    cursor: pointer;
}
.gm-rider-option:hover { background: var(--gm-black-a06); }
html.gm-dark .gm-rider-option:hover { background: var(--gm-border-faint); }
.gm-rider-active .gm-rider-option { font-weight: 700; }
.gm-rider-primary {
    font-size: var(--gm-font-11px);
    color: var(--gm-orange);
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.gm-rider-check { color: var(--gm-green-36-16a34a); margin-left: 6px; }

/* ─── Add-a-rider to household (Sprint 43) ─────────────────── */
.gm-household-add { max-width: 560px; margin: 28px auto; }
.gm-household-card {
    background: var(--gm-white-a05);
    border: 1px solid var(--gm-white-a12);
    border-radius: 12px;
    padding: 28px 30px;
}
html:not(.gm-dark) .gm-household-card { background: var(--gm-white); border-color: var(--gm-grey-89-e2e2e2); }
.gm-household-title { font-weight: 700; margin: 0 0 8px; }
.gm-household-intro { color: var(--gm-white-a60); font-size: var(--gm-font-sm); margin-bottom: 20px; }
html:not(.gm-dark) .gm-household-intro { color: var(--gm-grey-33); }
.gm-household-form .form-group { margin-bottom: 16px; }
.gm-household-form label { display: block; margin-bottom: 4px; font-weight: 600; font-size: var(--gm-font-sm); }
.gm-household-help { display: block; margin-top: 4px; color: var(--gm-white-a45); font-size: var(--gm-font-12px); }
html:not(.gm-dark) .gm-household-help { color: var(--gm-grey-53); }
.gm-household-actions { margin-top: 22px; display: flex; gap: 10px; }

/* ─── Avatar: initials fallback circle ──────────────────── */
.gm-avatar-initials {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gm-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gm-white);
    font-size: var(--gm-font-sm);
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/* ─── Theme toggle position in row1 right ───────────────── */
/* Day/night toggle now pinned to top-right of the header bar */
.gm-mode-wrap-corner { display: none; } /* legacy — no longer used */
.gm-mode-wrap-inline { /* no extra positioning — flows in the flex row */ }

/* ─── Red CTA button (Login to Join Free, guest CTAs) ───── */
.gm-join-btn {
    display: inline-block;
    background: var(--gm-orange);
    color: var(--gm-white);
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: var(--gm-font-xs);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.gm-join-btn:hover,
.gm-join-btn:focus { background: var(--gm-orange-dark); color: var(--gm-white); text-decoration: none; }
html.gm-dark a.gm-join-btn,
html.gm-dark a.gm-join-btn:hover { color: var(--gm-white); }

/* ─── Find Club page ─────────────────────────────────────── */
.fc-hero { text-align: center; padding: 32px 24px 24px; }
.fc-hero h2 { font-weight: 700; margin-bottom: 8px; }
.fc-hero-sub { color: var(--gm-white-a60); max-width: 460px; margin: 0 auto 24px; font-size: var(--gm-font-sm); }
html:not(.gm-dark) .fc-hero-sub { color: var(--gm-grey-33); }
.fc-search-box {
    max-width: 540px; margin: 0 auto 32px;
    background: var(--gm-white-a06);
    border: 1px solid var(--gm-white-a12);
    border-radius: 12px; padding: 24px 28px;
}
html:not(.gm-dark) .fc-search-box { background: var(--gm-grey-96); border-color: var(--gm-grey-87); }
.fc-search-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.fc-search-row .form-group { flex: 1; min-width: 120px; margin-bottom: 0; }
.fc-search-row label { color: var(--gm-white-a70); font-size: var(--gm-font-xs); margin-bottom: 4px; display: block; }
html:not(.gm-dark) .fc-search-row label { color: var(--gm-grey-33); }
.fc-search-row .form-control {
    background: var(--gm-border-faint);
    border: 1px solid var(--gm-white-a18);
    color: var(--gm-white); border-radius: 6px;
}
html:not(.gm-dark) .fc-search-row .form-control { background: var(--gm-white); border: 1px solid var(--gm-grey-80); color: var(--gm-dark-20); }
.fc-search-row .form-control::placeholder { color: var(--gm-white-a35); }
.fc-search-row .form-control:focus { background: var(--gm-white-a12); outline: none; box-shadow: none; border-color: var(--gm-white-a35); }
.fc-search-row select.form-control option { background: var(--gm-dark-14); color: var(--gm-white); }
html:not(.gm-dark) .fc-search-row select.form-control option { background: var(--gm-white); color: var(--gm-dark-20); }
.fc-btn { background: var(--gm-orange); border: none; color: var(--gm-white); padding: 0 22px; height: 34px; border-radius: 6px; font-weight: 600; font-size: var(--gm-font-sm); cursor: pointer; white-space: nowrap; }
.fc-btn:hover { background: var(--gm-orange-dark); color: var(--gm-white); }
.fc-error-text { color: var(--gm-red-71); font-size: var(--gm-font-sm); }
.fc-no-results-icon { font-size: var(--gm-font-40px); margin-bottom: 16px; }
.fc-card-logo-placeholder--hidden { display: none; }
.fc-results-header { font-size: var(--gm-font-sm); color: var(--gm-white-a50); margin-bottom: 16px; }
html:not(.gm-dark) .fc-results-header { color: var(--gm-grey-53); }
.fc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; }
.fc-card {
    background: var(--gm-white); border-radius: 10px; padding: 18px 20px;
    box-shadow: 0 2px 8px var(--gm-black-a08); border: 1px solid var(--gm-black-a06);
    display: flex; flex-direction: column; gap: 10px; cursor: pointer;
}
html.gm-dark .fc-card { background: var(--gm-dark-14); border-color: var(--gm-white-a07); }
.fc-card-header { display: flex; align-items: center; gap: 12px; }
.fc-card-logo { width: 48px; height: 48px; border-radius: 6px; object-fit: contain; flex-shrink: 0; }
.fc-card-logo-placeholder { width: 48px; height: 48px; border-radius: 6px; background: var(--gm-orange); display: flex; align-items: center; justify-content: center; color: var(--gm-white); font-size: var(--gm-font-18px); font-weight: 700; flex-shrink: 0; }
.fc-card-name { font-size: var(--gm-font-sm); font-weight: 700; color: var(--gm-dark-10); margin: 0; line-height: 1.3; }
html.gm-dark .fc-card-name { color: var(--gm-white); }
.fc-card-loc { font-size: var(--gm-font-xs); color: var(--gm-grey-40); margin: 0; }
html.gm-dark .fc-card-loc { color: var(--gm-white-a55); }
.fc-card-dist { font-size: var(--gm-font-xs); font-weight: 600; color: var(--gm-orange); margin: 0; }
.fc-card-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--gm-font-12px); color: var(--gm-grey-53); }
html.gm-dark .fc-card-meta { color: var(--gm-white-a55); }
.fc-card-badge { background: var(--gm-blue-95); color: var(--gm-blue-55); padding: 2px 8px; border-radius: 10px; font-size: var(--gm-font-11px); font-weight: 600; }
.fc-card-desc { font-size: var(--gm-font-xs); color: var(--gm-grey-33); line-height: 1.5; flex: 1; }
html.gm-dark .fc-card-desc { color: var(--gm-white-a60); }
.fc-card-footer { margin-top: auto; position: relative; z-index: 2; }
.fc-view-btn { display: inline-block; background: var(--gm-orange); color: var(--gm-white); padding: 6px 16px; border-radius: 6px; font-size: var(--gm-font-xs); font-weight: 600; text-decoration: none; }
.fc-view-btn:hover { background: var(--gm-orange-dark); color: var(--gm-white); text-decoration: none; }
html.gm-dark a.fc-view-btn,
html.gm-dark a.fc-view-btn:hover { color: var(--gm-white); }
.fc-no-results { text-align: center; padding: 40px 24px; color: var(--gm-white-a50); }
html:not(.gm-dark) .fc-no-results { color: var(--gm-grey-53); }
.fc-error { text-align: center; padding: 40px 24px; }
.fc-guest-banner {
    background: var(--gm-white-a06);
    border-bottom: 1px solid var(--gm-white-a12);
    padding: 10px 24px;
    margin: -20px -32px 20px -32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.fc-guest-banner-text { font-size: var(--gm-font-sm); color: var(--gm-white-a60); }
html:not(.gm-dark) .fc-guest-banner-text { color: var(--gm-grey-33); }

/* ─── Registration flow ──────────────────────────────────── */
.reg-wrap { max-width: 480px; margin: 40px auto; padding: 0 20px 60px; }
.reg-heading { font-size: var(--gm-font-24px); font-weight: 700; margin-bottom: 6px; }
.reg-sub { color: var(--gm-white-a55); font-size: var(--gm-font-sm); margin-bottom: 24px; }
html:not(.gm-dark) .reg-sub { color: var(--gm-grey-40); }
.reg-name-row { display: flex; gap: 10px; }
.reg-name-row .form-group { flex: 1; }
.reg-submit { background: var(--gm-orange); border: none; border-radius: 6px; color: var(--gm-white); font-size: var(--gm-font-sm); font-weight: 700; padding: 13px 28px; cursor: pointer; width: 100%; transition: background 0.15s; }
.reg-submit:hover { background: var(--gm-orange-dark); }
.reg-signin { text-align: center; margin-top: 14px; font-size: var(--gm-font-xs); color: var(--gm-grey-53); }
html:not(.gm-dark) .reg-signin { color: var(--gm-grey-40); }
.reg-signin a { color: var(--gm-orange); }
.reg-code-label { text-align: center; display: block; font-size: var(--gm-font-sm); }
.reg-code-input { font-size: var(--gm-font-28px); letter-spacing: 0.25em; text-align: center; font-weight: 700; }
.reg-error-center { text-align: center; }
.reg-resend-wrap { text-align: center; margin-top: 16px; }
.reg-resend-btn { background: transparent; border: none; color: var(--gm-grey-53); font-size: var(--gm-font-xs); cursor: pointer; text-decoration: underline; }
html:not(.gm-dark) .reg-resend-btn { color: var(--gm-grey-40); }
.reg-start-over { text-align: center; margin-top: 8px; }
.reg-start-over a { color: var(--gm-grey-53); font-size: var(--gm-font-xs); }
html:not(.gm-dark) .reg-start-over a { color: var(--gm-grey-33); }
.reg-clubs-label { margin-bottom: 12px; font-size: var(--gm-font-xs); color: var(--gm-grey-53); }
.reg-club-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.reg-club-btn { width: 100%; background: var(--gm-white-a05); border: 1px solid var(--gm-white-a10); border-radius: 8px; padding: 12px 14px; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 12px; color: inherit; }
html:not(.gm-dark) .reg-club-btn { background: var(--gm-blue-98); border-color: var(--gm-grey-87); color: var(--gm-dark-20); }
.reg-club-btn:hover { background: var(--gm-white-a09); }
html:not(.gm-dark) .reg-club-btn:hover { background: var(--gm-grey-94); }
.reg-club-logo { width: 40px; height: 40px; border-radius: 6px; background: var(--gm-orange); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--gm-font-sm); color: var(--gm-white); flex-shrink: 0; }
.reg-club-logo img { width: 40px; height: 40px; border-radius: 6px; object-fit: contain; }
.reg-club-info { flex: 1; min-width: 0; }
.reg-club-name { font-weight: 600; font-size: var(--gm-font-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reg-club-meta { font-size: var(--gm-font-12px); color: var(--gm-grey-53); margin-top: 1px; }
.reg-club-cta { font-size: var(--gm-font-12px); color: var(--gm-orange); flex-shrink: 0; font-weight: 600; }
.reg-skip-wrap { text-align: center; margin-top: 8px; }
.reg-skip-btn { background: transparent; border: none; color: var(--gm-grey-53); font-size: var(--gm-font-xs); cursor: pointer; text-decoration: underline; }
html:not(.gm-dark) .reg-skip-btn { color: var(--gm-grey-40); }
.reg-skip-note { text-align: center; margin-top: 8px; font-size: var(--gm-font-xs); color: var(--gm-grey-53); }
html:not(.gm-dark) .reg-skip-note { color: var(--gm-grey-40); }
.reg-no-clubs { color: var(--gm-grey-53); font-size: var(--gm-font-sm); margin-bottom: 20px; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .gm-stat-grid { grid-template-columns: 1fr; }
    .gm-dash-wrap { grid-template-columns: 1fr; gap: 24px; }
    .gm-dash-sidebar { width: 100%; }
    .gm-dash-body { grid-template-columns: 1fr; gap: 24px; }
    .gm-book-promo { width: 100%; justify-self: stretch; }
    .gm-club-name { font-size: var(--gm-font-xs); }
    .gm-events-grid { grid-template-columns: 1fr; }
    /* Miles table: allow horizontal scroll when responsiveWrap is disabled */
    #members-miles-list-container { overflow-x: auto; }
}

/* ════════════════════════════════════════════════════════════
   Responsive header — hamburger + compact row 1  (≤ 768 px)
   Club name drops to its own sub-row so it never overlaps the GM logo.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* 80 px: first sub-row (logo/avatar/hamburger) ~44px + second sub-row (club name) ~22px */
    :root {
        --gm-row1-h:   80px;
        --gm-header-h: 80px;
    }

    /* Row 1 inner: flex-wrap so items overflow onto a second line */
    .gm-row1-inner {
        flex-wrap: wrap;
        align-items: center;
        align-content: flex-start;
        padding: 8px 12px 4px;
    }

    /* ── Sub-row 1: GM logo · [auto spacer] · avatar · hamburger ── */
    .gm-brand-icon     { order: 1; flex-shrink: 0; align-self: center; }
    .gm-brand-icon img { max-height: 62px; }
    .gm-row1-right     { order: 2; margin-left: auto; flex-shrink: 0; align-self: center; }
    .gm-hamburger      { order: 3; flex-shrink: 0; align-self: center; }

    /* ── Sub-row 2: club name centred across full width ── */
    .gm-club-ident {
        order: 10;
        position: static !important;
        transform: none !important;
        left: auto; top: auto; bottom: auto;
        flex: 0 0 100%;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 4px;
        pointer-events: none;
        line-height: 1;
        padding: 0;
    }
    .gm-club-logo { display: none; }
    .gm-club-sub  { display: none; }
    .gm-club-name {
        font-size: var(--gm-font-11px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 280px;
    }

    /* Theme toggle: hidden on mobile */
    .gm-mode-wrap-inline { display: none; }
    .gm-invite-header-btn { display: none; }

    /* Avatar: circle only */
    .gm-avatar-name, .gm-avatar-caret { display: none; }
    .gm-avatar-btn {
        padding: 4px;
        border-radius: 50%;
        background: transparent;
        border: 1px solid var(--gm-white-a18);
    }

    /* Hamburger: visible */
    .gm-hamburger { display: flex; }

    /* ── Row 2: collapsed by default, expands on hamburger tap ── */
    .gm-row2 {
        max-height: 0;
        height: auto;
        overflow: hidden;
        display: block;
        transition: max-height 0.28s ease;
        border-top: none;
    }
    .gm-row2-inner {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        max-width: 100%;
        padding: 6px 0 14px;
    }
    .gm-nav-left, .gm-nav-center, .gm-nav-right {
        flex: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        height: auto;
        justify-content: flex-start;
    }

    /* Nav items: full-width, touch-friendly tap targets */
    .gm-nav-btn {
        line-height: 1.4;
        padding: 13px 20px;
        border-radius: 0;
        font-size: var(--gm-font-sm);
        height: auto;
        width: 100%;
        text-align: left;
        display: block;
    }

    /* Dropdowns: expand inline (not floating absolute) */
    .gm-row2 .gm-admin-dropdown { margin-left: 0; display: flex; flex-direction: column; }
    .gm-row2 .dropdown-menu {
        position: static !important;
        float: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: var(--gm-white-a04);
        padding: 0; margin: 0; min-width: 0;
    }
    .gm-row2 .dropdown-menu > li > a {
        padding: 11px 36px;
        color: var(--gm-white-a60);
        font-size: var(--gm-font-sm);
        display: block;
        white-space: normal;
    }
    .gm-row2 .dropdown-menu > li > a:hover { background: var(--gm-border-faint); color: var(--gm-white); }

    /* Open state */
    body.gm-nav-open .gm-row2 { max-height: 640px; }

    /* ── Garage index: title full-width, buttons wrap below ── */
    .gm-garage-header-row { flex-wrap: wrap; gap: 8px; }
    .gm-garage-h3         { flex: 0 0 100%; font-size: var(--gm-font-22px); margin-bottom: 0; }

    /* ── Bike card footer: wrap so Maintenance link is never clipped ── */
    .gmb-footer      { flex-wrap: wrap; gap: 4px; }
    .gmb-odo-form    { flex: 1 1 auto; min-width: 0; }
    .gmb-footer-btns { flex: 0 0 auto; }

    /* ── Bike form: photos move below the fields on mobile ── */
    /* Bootstrap .row uses floats; make it a flex container so CSS order takes effect */
    .bf-form-wrap .row          { display: flex; flex-wrap: wrap; }
    .bf-form-wrap .bf-col-photo,
    .bf-form-wrap .bf-col-right { flex: 0 0 100%; max-width: 100%; float: none; }
    .bf-col-photo { order: 2; padding-right: 0; margin-top: 20px; }
    .bf-col-right { order: 1; padding-left: 0; }

    /* Larger, easier-to-tap form controls */
    .bf-fields label.control-label { font-size: var(--gm-font-sm); }
    .bf-fields .form-control        { height: 38px; font-size: var(--gm-font-sm); padding: 6px 10px; }
    .bf-fields select.form-control  { height: 38px; }

    /* Section dividers — slightly more prominent */
    .bf-divider { font-size: var(--gm-font-12px); margin: 16px 0 10px; }

    /* Renewal date: remove narrow cap so it goes full-width inline */
    .bf-narrow-group { max-width: none; }

    /* Inline label : field for single-field rows */
    .bf-col-right > .form-group {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 10px;
    }
    .bf-col-right > .form-group > label.control-label {
        flex-shrink: 0;
        width: 106px;
        text-align: right;
        padding-top: 6px;    /* align baseline with input */
        font-size: var(--gm-font-sm);
        margin-bottom: 0;
    }
    .bf-col-right > .form-group > .form-group {
        flex: 1;
        margin-bottom: 0;
    }

    /* Document photo grid: 2-column */
    .bf-doc-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── Utility: display ───────────────────────────────────── */
.gm-d-none         { display: none; }
.gm-d-block        { display: block; }
.gm-d-inline       { display: inline; }
.gm-d-inline-block { display: inline-block; }
.gm-d-flex         { display: flex; }

/* Visually hidden but accessible — use for file inputs behind custom buttons */
.gm-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ─── Utility: flex ──────────────────────────────────────── */
.gm-flex-1         { flex: 1; }
.gm-flex-center    { display: flex; align-items: center; }
.gm-flex-end-row   { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.gm-float-right    { float: right; }

/* ─── Utility: margin-top ────────────────────────────────── */
.gm-mt-0  { margin-top: 0; }
.gm-nowrap { white-space: nowrap; }
.gm-mt-4  { margin-top: 4px; }
.gm-mt-5  { margin-top: 5px; }
.gm-mt-6  { margin-top: 6px; }
.gm-mt-8  { margin-top: 8px; }
.gm-mt-10 { margin-top: 10px; }
.gm-mt-12 { margin-top: 12px; }
.gm-mt-30 { margin-top: 30px; }
.gm-mt-16 { margin-top: 16px; }
.gm-mt-20 { margin-top: 20px; }
.gm-mt-24 { margin-top: 24px; }
.gm-mt-96 { margin-top: 96px; }

/* ─── Utility: margin-bottom ─────────────────────────────── */
.gm-mb-0  { margin-bottom: 0; }
.gm-mb-4  { margin-bottom: 4px; }
.gm-mb-6  { margin-bottom: 6px; }
.gm-mb-8  { margin-bottom: 8px; }
.gm-mb-10 { margin-bottom: 10px; }
.gm-mb-12 { margin-bottom: 12px; }
.gm-mb-15 { margin-bottom: 15px; }
.gm-mb-16 { margin-bottom: 16px; }
.gm-mb-18 { margin-bottom: 18px; }
.gm-mb-20 { margin-bottom: 20px; }
.gm-mb-24 { margin-bottom: 24px; }

/* ─── Utility: margin sides ──────────────────────────────── */
.gm-ml-6  { margin-left: 6px; }
.gm-ml-8  { margin-left: 8px; }
.gm-ml-10 { margin-left: 10px; }
.gm-ml-14 { margin-left: 14px; }
.gm-ml-40 { margin-left: 40px; }
.gm-mr-6  { margin-right: 6px; }
.gm-mr-10 { margin-right: 10px; }

/* ─── Utility: padding ───────────────────────────────────── */
.gm-p-0   { padding: 0; }
.gm-p-8   { padding: 8px; }
.gm-p-10  { padding: 10px; }
.gm-pt-10 { padding-top: 10px; }
.gm-pt-12 { padding-top: 12px; }
.gm-pt-16 { padding-top: 16px; }
.gm-pt-90 { padding-top: 90px; }
.gm-pt-15 { padding-top: 15px; }
.gm-pb-16 { padding-bottom: 16px; }

/* ─── Utility: font-size ─────────────────────────────────── */
.gm-fs-10 { font-size: var(--gm-font-10px); }
.gm-fs-11 { font-size: var(--gm-font-11px); }
.gm-fs-12 { font-size: var(--gm-font-12px); }
.gm-fs-13 { font-size: var(--gm-font-xs); }
.gm-fs-14 { font-size: var(--gm-font-sm); }
.gm-fs-16 { font-size: var(--gm-font-sm); }
.gm-fs-22 { font-size: var(--gm-font-22px); }
.gm-fs-28 { font-size: var(--gm-font-28px); }
.gm-fs-40 { font-size: var(--gm-font-40px); }

/* ─── Utility: color ─────────────────────────────────────── */
.gm-color-888      { color: var(--gm-grey-53); }
.gm-color-555      { color: var(--gm-grey-33); }
.gm-color-c00      { color: var(--gm-red-40); }
.gm-color-fff      { color: var(--gm-white); }
.gm-color-required { color: var(--gm-orange); }

/* ─── Utility: misc ──────────────────────────────────────── */
.gm-cursor-pointer   { cursor: pointer; }
.gm-w-full           { width: 100%; }
.gm-max-w-500        { max-width: 500px; }
.gm-font-normal      { font-weight: normal; }
.gm-va-middle        { vertical-align: middle; }
.gm-section-divider  { margin-top: 20px; border-top: 1px solid var(--gm-grey-93); padding-top: 15px; }
.gm-cert-grid        { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.gm-invite-container { max-width: 720px; margin-top: 30px; }
.gm-text-center      { text-align: center; }
.gm-overflow-hidden  { overflow: hidden; }

/* ─── Event view: title & tabs ───────────────────────────── */
.gm-event-title        { margin-top: 0; }
.gm-ride-type-badge    { font-size: var(--gm-font-0_55em); vertical-align: middle; }
.gm-ride-byline        { margin: 2px 0 6px; }

/* Ride-type chip — the SAME defined ride colors as the events-list cards, as a pill
   with white text (reads cleanly on both light and dark). Used on the event detail view. */
.gm-ridetype-badge {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: var(--gm-font-0_55em);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gm-white);
    vertical-align: middle;
}
.gm-ridetype-fullday   { background: var(--gm-ride-fullday); }
.gm-ridetype-short     { background: var(--gm-ride-short); }
.gm-ridetype-bikenight { background: var(--gm-ride-bikenight); }
.gm-ridetype-multiday  { background: var(--gm-ride-multiday); }
.gm-tab-content-panel  { border: 1px solid var(--gm-grey-87); border-top: none; padding: 10px; }
.gm-hr-section         { margin: 10px 0; }
.gm-attendee-label     { margin: 0 0 8px; font-weight: bold; font-size: var(--gm-font-xs); }

/* ─── Event view: attendee & guest sections ──────────────── */
.gm-guest-section-wrap  { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--gm-grey-50-a15); }
.gm-guest-section-label { font-size: var(--gm-font-12px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gm-grey-53); margin-bottom: 8px; }
.gm-guest-item          { margin-bottom: 6px; font-size: var(--gm-font-xs); }
.gm-guest-sub           { color: var(--gm-grey-53); font-size: var(--gm-font-11px); }
.gm-admin-section       { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gm-grey-93); }
.gm-add-attendee-panel  { display: none; margin-top: 10px; padding: 10px; background: var(--gm-grey-98); border-radius: 4px; }
.gm-finalized-section   { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--gm-black-a08); }
.gm-alert-compact       { padding: 8px 12px; }
.gm-undo-hint           { margin-top: 6px; font-size: var(--gm-font-12px); }
/* Dark-theme overrides: light-only surfaces/borders on this page (QA-061726-1) */
html.gm-dark .gm-add-attendee-panel       { background: var(--gm-white-a04); border: 1px solid var(--gm-border-faint); }
html.gm-dark .gm-add-attendee-panel label { color: var(--gm-grey-73); }
html.gm-dark .gm-admin-section            { border-top-color: var(--gm-border-faint); }
html.gm-dark .gm-finalized-section        { border-top-color: var(--gm-border-faint); }

/* ─── Event view: map ────────────────────────────────────── */
.gm-map-wrap   { display: none; }
.gm-map-height { height: 280px; }
.gm-map-dual-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.gm-map-dual-col { flex: 1 1 45%; min-width: 200px; }
.gm-map-canvas   { height: 260px; border-radius: 4px; border: 1px solid var(--gm-grey-87); }
.gm-map-label    { font-size: var(--gm-font-sm); font-weight: 600; color: var(--gm-grey-91); margin-bottom: 6px; }
.gm-map-loc-text { display: block; color: var(--gm-grey-73); font-size: var(--gm-font-xs); font-weight: normal; margin-top: 2px; }
.gm-map-placeholder {
    height: 260px;
    border: 1px dashed var(--gm-grey-80);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--gm-grey-67);
    font-size: var(--gm-font-sm);
}

/* ─── Event view: media grid ─────────────────────────────── */
.gm-media-section-top { margin-top: 96px; }
.gm-upload-form       { display: inline-block; margin-right: 10px; }
.gm-video-form        { display: none; margin-top: 10px; }
.gm-media-thumb-photo {
    height: 120px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    cursor: pointer;
}
.gm-media-thumb-video {
    position: relative;
    height: 120px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: var(--gm-black);
}
.gm-video-cover-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.gm-video-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    background: var(--gm-red-50-a85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gm-play-arrow      { color: var(--gm-white); font-size: var(--gm-font-sm); margin-left: 3px; }
.gm-caption-text    { display: block; margin-top: 4px; }
.gm-media-uploader  { color: var(--gm-grey-33); font-size: var(--gm-font-xs); }
.gm-delete-media-form  { display: inline; }
.gm-delete-link-btn    { padding: 0; color: var(--gm-red-40); font-size: var(--gm-font-xs); }

/* ─── Event view: RSVP controls ─────────────────────────── */
.gm-alert-sm        { padding: 8px 10px; margin-bottom: 8px; }
.gm-notif-alert     { padding: 8px 10px; margin-bottom: 8px; font-size: var(--gm-font-xs); }
.gm-notif-status    { margin-bottom: 6px; font-size: var(--gm-font-12px); color: var(--gm-grey-53); text-align: center; }
.gm-rsvp-btn-row    { display: flex; gap: 4px; margin-bottom: 8px; }
.gm-btn-flex        { flex: 1; display: flex; }
.gm-btn-full-sm     { width: 100%; padding: 5px 4px; font-size: var(--gm-font-12px); }
.gm-cancel-rsvp-btn { flex: 1; padding: 5px 4px; font-size: var(--gm-font-12px); }
.gm-attendee-count  { font-size: var(--gm-font-12px); margin-bottom: 0; }
.gm-rsvp-hint       { margin-top: 4px; font-size: var(--gm-font-12px); }
.gm-guest-cta       { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gm-grey-50-a20); text-align: center; }
.gm-guest-cta-hint  { font-size: var(--gm-font-12px); color: var(--gm-grey-53); margin-bottom: 6px; }
.gm-admin-btn-group { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--gm-grey-50-a20); }
/* Edit / Delete on the event detail — larger, clearly separated (was tight btn-group-xs). */
.gm-event-action-btns { display: flex; gap: 12px; margin-top: 4px; }
.gm-ride-img        { width: 100%; height: auto; border-radius: 6px; margin-bottom: 10px; }
/* Real cover photos render as a large banner in the wide RSVP column (the small
   natural-size look read as a "tiny white box"); the logo/placeholder fallback keeps
   its natural size. */
/* Resize to fit the column, preserve aspect ratio, never crop (cap very tall images). */
.gm-ride-img-cover  { max-height: 500px; object-fit: contain; }
/* "You're In!" pill on the title row, generously spaced right of the ride-type tag. */
.gm-youre-in-inline {
    display: inline-block;
    margin-left: 28px;
    padding: 3px 14px;
    border-radius: 14px;
    background: var(--gm-ride-fullday);
    color: var(--gm-white);
    font-size: var(--gm-font-sm);
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
}
.gm-youre-in-inline small { font-weight: 400; opacity: 0.9; }

/* Ride History popup — per-rider totals bar above the list. */
.gm-ride-history-totals {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    padding: 8px 4px 12px;
    font-size: var(--gm-font-base);
}
.gm-ride-history-stat strong { font-size: var(--gm-font-lg); }

/* Event create/edit form (AJAX CRUD modal): the Bootstrap .row negative margins
   overflow the modal body by a few px and spawn a useless horizontal scrollbar.
   Clip it on the form itself — Select2/date-picker dropdowns render on <body>, so
   nothing real is hidden. */
.events-form { overflow-x: hidden; }

/* ─── Event view: lightbox ───────────────────────────────── */
.gm-lightbox-content { background: var(--gm-black); border: none; }
.gm-lightbox-header  { border: none; padding: 10px 15px; }
.gm-lightbox-close   { color: var(--gm-white); opacity: 1; }
.gm-lightbox-body    { padding: 0; text-align: center; }
.gm-lightbox-img     { max-width: 100%; max-height: 80vh; }

/* ─── Event view: sticky footer ─────────────────────────── */
.gm-footer-row    { display: flex; align-items: center; }
.gm-footer-p      { margin: 0; }
.gm-footer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.gm-share-menu    { min-width: 180px; }
.gm-share-btn     { height: 30px; line-height: 18px; }
.gm-footer-logo   { max-height: 60px; width: auto; }

/* ─── Comments / discussion ──────────────────────────────── */
.gm-discussion-row      { margin-top: 20px; }
.gm-comment-item        { margin-bottom: 18px; }
.gm-comment-avatar      { width: 36px; height: 36px; }
.gm-comment-time        { margin-left: 8px; }
.gm-delete-comment-form { display: inline; float: right; }
.gm-delete-btn-link     { padding: 0; }
.gm-comment-body        { margin-top: 4px; }
.gm-reply-form-wrap     { display: none; margin-top: 8px; }
.gm-reply-item          { margin-top: 10px; margin-left: 40px; }
.gm-reply-avatar        { width: 28px; height: 28px; }
.gm-comment-form-section { margin-top: 20px; border-top: 1px solid var(--gm-grey-93); padding-top: 16px; }

/* ─── Forms ──────────────────────────────────────────────── */
.gm-required-star  { color: var(--gm-orange); }
.gm-optional-label { font-weight: normal; }

/* ─── Pulled-over page ───────────────────────────────────── */
.pulled-over-page  { background: var(--gm-white) !important; }
.gm-pulled-over-dl-section { margin-top: 20px; }
.gm-dl-card {
    background: var(--gm-white);
    border: 2px solid var(--gm-orange);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.gm-dl-field-label { font-size: var(--gm-font-11px); text-transform: uppercase; letter-spacing: 0.05em; color: var(--gm-grey-53); margin-bottom: 2px; }
.gm-dl-field-value { font-size: var(--gm-font-18px); font-weight: 700; }
.gm-dl-expiry-alert { margin-top: 8px; }

/* ─── Event view: tab scroll & ride info ────────────────── */
.event-tab-pane { min-height: 280px; max-height: 520px; overflow-y: auto; overflow-x: hidden; padding-right: 6px; }
.ride-info-block a { display: block; line-height: 1.8; color: inherit; text-decoration: none; }
.ride-info-block a:hover { text-decoration: none; }
.ride-info-block label { margin-bottom: 0; font-weight: normal; }
.ride-description { margin-top: 4px; line-height: 1.6; }

/* ─── Event view: finalize button ────────────────────────── */
#finalizeSubmitBtn { background-color: var(--gm-green-29); border-color: var(--gm-green-21); }
#finalizeSubmitBtn:hover, #finalizeSubmitBtn:focus { background-color: var(--gm-green-54); border-color: var(--gm-green-44); }

/* ─── Event view: attendee entry ─────────────────────────── */
.gm-attendee-entry { margin-bottom: 12px; }
.gm-pillion-line   { margin-top: 2px; margin-left: 14px; font-size: var(--gm-font-12px); color: var(--gm-grey-53); }

/* ─── Event view: social share icon badges ───────────────── */
.gm-share-icon {
    display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center;
    border-radius: 4px; font-weight: bold; margin-right: 6px; vertical-align: middle;
}
.gm-si-fb    { background: var(--gm-blue-52); color: var(--gm-white); font-size: var(--gm-font-10px); }
.gm-si-ig    { background: linear-gradient(135deg,var(--gm-orange-57),var(--gm-red-51),var(--gm-magenta-42)); color: var(--gm-white); font-size: var(--gm-font-9px); }
.gm-si-x     { background: var(--gm-black); color: var(--gm-white); font-family: serif; letter-spacing: -1px; font-size: var(--gm-font-9px); }
.gm-si-truth { background: var(--gm-blue-56); color: var(--gm-white); font-size: var(--gm-font-11px); }
.gm-si-rd    { background: var(--gm-orange-50-ff4500); color: var(--gm-white); font-size: var(--gm-font-9px); }
.gm-si-li    { background: var(--gm-blue-35); color: var(--gm-white); font-size: var(--gm-font-10px); }

/* ─── Copyright footer ───────────────────────────────────── */
.gm-footer-copyright {
    font-size: var(--gm-font-11px);
    color: var(--gm-white-a35);
    text-align: center;
    padding: 8px 0;
    border-top: 1px solid var(--gm-white-a06);
    margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════
   views/bikes/view.php
   ══════════════════════════════════════════════════════════ */
.gm-bike-view-wrap        { padding-bottom: 60px; }
.gm-bike-sidebar          { padding-right: 20px; }
.gm-bike-sidebar-name     { font-size: var(--gm-font-sm); font-weight: 600; }
.gm-bike-hero             { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.gm-bike-photo-wrap       { width: 100%; background: var(--gm-dark-06); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.gm-bike-photo-wrap img   { width: 100%; height: auto; display: block; object-fit: cover; }
.gm-bike-info             { flex: 1; min-width: 200px; }
.gm-bike-title            { margin: 0 0 4px; }
.gm-bike-nickname         { font-style: italic; color: var(--gm-grey-53); margin-bottom: 6px; }
.gm-bike-stats-row        { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.gm-bike-stat-label       { font-size: var(--gm-font-12px); color: var(--gm-grey-67); text-transform: uppercase; letter-spacing: 0.06em; }
html:not(.gm-dark) .gm-bike-stat-label { color: var(--gm-grey-40); }
.gm-bike-stat-value       { font-size: var(--gm-font-sm); font-weight: 600; }
.gm-bike-actions-row      { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
/* Odometer update form in bike view hero */
.gm-view-odo-form  { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.gm-view-odo-input { width: 110px; font-size: var(--gm-font-sm); font-weight: 600; padding: 4px 8px; height: 30px; border-radius: 4px; border: 1px solid var(--gm-grey-80); }
.gm-section-wrap          { margin-bottom: 36px; }
.gm-section-header        { margin-bottom: 12px; border-bottom: 1px solid var(--gm-border-faint); padding-bottom: 8px; }
.gm-table-fs14            { font-size: var(--gm-font-sm); }
.gm-color-888-italic      { color: var(--gm-grey-53); font-style: italic; }
.gm-custom-task-label     { font-size: var(--gm-font-11px); color: var(--gm-grey-53); margin-left: 4px; }
.gm-td-muted              { color: var(--gm-grey-53); }
.gm-action-flex           { display: flex; gap: 6px; flex-wrap: wrap; }
.gm-log-service-panel     { display: none; background: var(--gm-white-a04); border: 1px solid var(--gm-border-faint); border-radius: 8px; padding: 16px; margin-top: 12px; }
.gm-form-inline-row       { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.gm-label-sm              { font-size: var(--gm-font-xs); color: var(--gm-grey-53); }
.gm-input-w160            { width: 160px; }
.gm-form-flex-row         { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.gm-flex-2-min200         { flex: 2; min-width: 200px; }
.gm-flex-1-min130         { flex: 1; min-width: 130px; }
.gm-doc-table-wrap        { margin-bottom: 20px; }
.gm-select-w150           { width: 150px; }
.gm-flex-1-min160         { flex: 1; min-width: 160px; }
.gm-input-w160-date       { width: 160px; }
.gm-file-input-pad        { padding: 6px; }
.gm-flex-2-min200-upload  { flex: 2; min-width: 200px; }
.gm-color-not-set         { color: var(--gm-grey-33); }
.gm-color-expired         { color: var(--gm-red-71); }

/* ══════════════════════════════════════════════════════════
   views/events/index-v2.php
   ══════════════════════════════════════════════════════════ */
.gm-public-nav {
    background: var(--gm-white-a06);
    border-bottom: 1px solid var(--gm-white-a12);
    padding: 10px 24px;
    margin: -20px -32px 20px -32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.gm-public-nav-text { font-size: var(--gm-font-sm); color: var(--gm-white-a60); }
.gm-toolbar-row     { margin-bottom: 16px; }
.gm-toolbar-h2      { margin: 0; font-size: var(--gm-font-lg); font-weight: 700; }
.gm-toolbar-right   { padding-top: 4px; }
.gm-btn-group-mr    { margin-right: 8px; }
.gm-new-ride-ml     { margin-left: 6px; }
.gm-card-cursor     { cursor: pointer; }
.gm-card-img-link   { display: contents; }
.gm-card-strip-bg   { /* background set via inline PHP — kept as-is for dynamic color */ }
.gm-card-date-color { /* color set via inline PHP — dynamic, kept as-is */ }
.gm-card-title-link { color: inherit; text-decoration: none; }
.gm-map-marker-sm   { font-size: var(--gm-font-9px); }
.gm-footer-av-row   { display: flex; align-items: center; }
.gm-avatar-ml-0     { margin-left: 0; }
.gm-avatar-ml-neg6  { margin-left: -6px; }
.gm-load-more-li    { grid-column: 1 / -1; text-align: center; padding: 8px 0; }
.gm-rsvp-modal-p    { font-size: var(--gm-font-xs); color: var(--gm-grey-33); }
.gm-cal-trigger-wrap { display: none; }
.gm-events-list-ul  { list-style: none; padding: 0; margin: 0; }

/* Join modal — guest popup */
.gm-join-modal-dialog  { width: min(600px, 94vw); }
.gm-join-modal-content { border-radius: 10px; overflow: hidden; }
.gm-join-modal-header  {
    background: var(--gm-dark-row1);
    padding: 18px 24px 14px;
    text-align: center;
    position: relative;
}
.gm-join-modal-close   { position: absolute; top: 12px; right: 16px; color: var(--gm-white-a60); opacity: 1; }
.gm-join-modal-logo    { max-height: 36px; opacity: 0.9; }
.gm-join-modal-sub     { color: var(--gm-white-a55); font-size: var(--gm-font-xs); margin-top: 6px; }
.gm-join-modal-body    { display: flex; min-height: 200px; }
.gm-join-col-club      { flex: 1; padding: 20px 22px; background: var(--gm-blue-18); }
.gm-join-col-club-hd   { font-weight: 700; font-size: var(--gm-font-sm); color: var(--gm-blue-68); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.gm-join-col-club ul   { padding-left: 18px; margin: 0; color: var(--gm-blue-86); font-size: var(--gm-font-xs); line-height: 1.7; }
.gm-join-col-rider     { flex: 1; padding: 20px 22px; background: var(--gm-dark-13-1a2a1a); }
.gm-join-col-rider-hd  { font-weight: 700; font-size: var(--gm-font-sm); color: var(--gm-green-58); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.gm-join-col-rider ul  { padding-left: 18px; margin: 0; color: var(--gm-green-86); font-size: var(--gm-font-xs); line-height: 1.7; }
.gm-join-modal-footer  { padding: 16px 20px; background: var(--gm-dark-bg); display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.gm-join-modal-reg-btn { flex: 1; min-width: 180px; }
.gm-join-modal-join-btn { flex: 1; min-width: 140px; }
.gm-join-modal-later   { color: var(--gm-white-a40); align-self: center; }

/* print-view table styles (JS-built — kept inline in JS) */

/* ══════════════════════════════════════════════════════════
   views/bikes/_garage_card.php
   ══════════════════════════════════════════════════════════ */
.gm-garage-card-flex      { display: flex; flex-direction: column; }
.gm-garage-photo-wrap     { background: var(--gm-dark-06); flex-shrink: 0; }
.gm-garage-photo          { width: 100%; height: 240px; object-fit: contain; display: block; }
.gm-garage-info           { padding: 14px 16px; flex: 1; }
.gm-garage-name           { font-size: var(--gm-font-sm); font-weight: 700; line-height: 1.3; }
.gm-garage-nick           { font-size: var(--gm-font-sm); font-style: italic; margin-top: 2px; color: var(--gm-grey-47); }
.gm-garage-color          { font-size: var(--gm-font-xs); color: var(--gm-grey-60); margin-top: 2px; }
.gm-garage-primary-badge  { background: var(--gm-red-26); color: var(--gm-white); padding: 2px 7px; border-radius: 3px; font-size: var(--gm-font-11px); margin-top: 4px; display: inline-block; }
.gm-garage-actions        { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.gm-doc-panel-pad         { padding: 12px 16px; }
.gm-doc-section-mb        { margin-bottom: 10px; }
.gm-doc-section-mb-0      { margin-bottom: 0; }
.gm-doc-section-label     { font-size: var(--gm-font-10px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gm-grey-53); margin-bottom: 6px; }
.gm-doc-field-wrap        { font-size: var(--gm-font-xs); }
.gm-doc-field-wrap-mt     { font-size: var(--gm-font-xs); margin-top: 3px; }
.gm-doc-field-sub         { color: var(--gm-grey-60); font-size: var(--gm-font-11px); }
.gm-doc-img-row           { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.gm-doc-thumb             { max-height: 60px; border: 1px solid var(--gm-grey-87); border-radius: 3px; }
.gm-doc-img-wrap-mt       { margin-top: 6px; }

/* ══════════════════════════════════════════════════════════
   views/site/dashboard.php
   ══════════════════════════════════════════════════════════ */
.gm-dash-wrap             { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 220px; gap: 32px; align-items: start; }
.gm-dash-main             { min-width: 0; width: 100%; max-width: 100%; }
/* Next Ride stat card is the most prominent — taller with bolder title */
.gm-stat-grid .gm-stat-card:first-child { min-height: 100px; }
.gm-stat-grid .gm-stat-card:first-child .gm-stat-label { font-weight: 700; font-size: var(--gm-font-base); }
.gm-stat-grid .gm-stat-card:first-child .gm-stat-value { font-size: var(--gm-font-lg); font-weight: 800; }
.gm-dash-sidebar          { width: 220px; }
.gm-dash-greeting         { margin-bottom: 24px; }
.gm-dash-greeting-h1      { font-size: var(--gm-font-22px); font-weight: 700; margin: 0 0 4px; }
.gm-dash-greeting-p       { color: var(--gm-grey-53); font-size: var(--gm-font-xs); margin: 0; }
.gm-stat-value-sm         { font-size: var(--gm-font-sm); }
.gm-stat-value-na         { font-size: var(--gm-font-sm); color: var(--gm-grey-67); }
.gm-trial-mb              { margin-bottom: 18px; }
.gm-activity-heading      { font-size: var(--gm-font-xs); font-weight: 700; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gm-grey-53); }
.gm-activity-empty-p      { color: var(--gm-grey-67); font-size: var(--gm-font-xs); }
.gm-activity-av-ride      { background: var(--gm-green-49); }
.gm-activity-av-rsvp      { background: var(--gm-blue-60); }
.gm-activity-av-cert      { background: var(--gm-orange-50-f59e0b); }
.gm-activity-av-comment   { background: var(--gm-orange); }
.gm-activity-av-other     { background: var(--gm-orange); }
.gm-activity-content      { flex: 1; min-width: 0; }
.gm-activity-detail       { font-size: var(--gm-font-11px); color: var(--gm-grey-53); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.gm-activity-time-cell    { flex-shrink: 0; margin-left: 8px; }

/* Book promo (dashboard ad) */
.gm-ad-link               { text-decoration: none; display: block; }
.gm-ad-card               { border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px var(--gm-black-a25); border: 1px solid var(--gm-white-a10); }
.gm-ad-img-wrap           { position: relative; background: var(--gm-dark-row1); }
.gm-ad-img                { width: 100%; display: block; max-height: 220px; object-fit: cover; object-position: top; }
.gm-ad-ribbon             { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, var(--gm-black-a85)); padding: 24px 12px 10px; text-align: center; }
.gm-ad-price-badge        { background: var(--gm-orange); color: var(--gm-white); font-size: var(--gm-font-12px); font-weight: 700; padding: 5px 14px; border-radius: 20px; white-space: nowrap; }
.gm-ad-body               { background: var(--gm-dark-row1); padding: 16px 16px 18px; text-align: center; }
.gm-ad-byline             { font-size: var(--gm-font-11px); color: var(--gm-white-a50); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 6px; }
.gm-ad-title              { font-size: var(--gm-font-18px); font-weight: 800; color: var(--gm-white); line-height: 1.25; margin: 0 0 8px; }
.gm-ad-desc               { font-size: var(--gm-font-xs); color: var(--gm-white-a60); margin: 0 0 14px; line-height: 1.45; }
.gm-ad-cta                { background: var(--gm-orange); color: var(--gm-white); text-align: center; padding: 11px; border-radius: 7px; font-size: var(--gm-font-sm); font-weight: 700; letter-spacing: 0.02em; }

/* ══════════════════════════════════════════════════════════
   views/user/profile.php
   ══════════════════════════════════════════════════════════ */
.gm-profile-wrap           { padding-bottom: 60px; }
.gm-profile-hdr-row        { margin-bottom: 8px; }
.gm-profile-name           { margin-bottom: 4px; }
.gm-profile-sub            { color: var(--gm-grey-47); font-size: var(--gm-font-sm); margin-top: 0; }
.gm-profile-avatar-center  { text-align: center; margin-bottom: 16px; }
.gm-profile-avatar-wrap    { position: relative; display: inline-block; }
.gm-profile-avatar-ptr     { cursor: pointer; }
.gm-profile-avatar-default { cursor: default; }
.gm-profile-avatar-img     { max-width: 200px; width: 100%; height: 200px; object-fit: cover; display: block; }
.gm-profile-photo-overlay  { position: absolute; bottom: 0; left: 0; right: 0; background: var(--gm-black-a55); color: var(--gm-white); font-size: var(--gm-font-12px); padding: 6px 0; border-radius: 0 0 4px 4px; }
.gm-profile-file-input     { display: none; }
.gm-profile-email-input    { background: var(--gm-white-a04); color: var(--gm-grey-53); cursor: default; }
.gm-profile-save-row       { margin-bottom: 24px; margin-top: 16px; }
.gm-profile-photo-pending  { display: none; margin-left: 12px; color: var(--gm-teal-61); font-size: var(--gm-font-xs); }
.gm-profile-photo-saved    { display: none; margin-left: 12px; color: var(--gm-green-54); font-size: var(--gm-font-xs); font-weight: 600; }
.gm-profile-section-hdr    { border-bottom: 2px solid var(--gm-grey-87); padding-bottom: 6px; margin-top: 0; }
.gm-profile-section-hdr-mt { border-bottom: 2px solid var(--gm-grey-87); padding-bottom: 6px; margin-top: 24px; }
.gm-profile-section-hdr-hr { border-bottom: 2px solid var(--gm-grey-87); padding-bottom: 6px; }
.gm-tab-nav-mb             { margin-bottom: 20px; }
.gm-badge-maroon           { background: var(--gm-red-26); }
/* Subscription status badges */
.gm-status-badge           { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: var(--gm-font-xs, 12px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.gm-badge-trial            { background: var(--gm-blue-48); color: var(--gm-white); }
.gm-badge-active           { background: var(--gm-green-29-15803d); color: var(--gm-white); }
.gm-badge-grace            { background: var(--gm-orange-44); color: var(--gm-white); }
.gm-badge-disabled         { background: var(--gm-orange); color: var(--gm-white); }
.gm-badge-cancelled        { background: var(--gm-grey-46); color: var(--gm-white); }
.gm-badge-exempt           { background: var(--gm-blue-27); color: var(--gm-blue-84); }
/* Admin billing table */
.gm-billing-table th       { white-space: nowrap; }
.gm-billing-actions        { white-space: nowrap; }
.gm-stripe-id              { font-family: monospace; font-size: var(--gm-font-xs, 12px); }
.gm-filter-form            { display: flex; align-items: center; gap: 8px; }

/* Billing status filter — radio pill strip */
.gm-billing-filter-radios  { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gm-filter-radio           {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: 20px; cursor: pointer;
    font-size: var(--gm-font-sm); font-weight: 500;
    border: 1px solid var(--gm-blue-25); background: var(--gm-blue-98-f9fafb); color: var(--gm-blue-25);
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}
.gm-filter-radio input[type="radio"] { display: none; }
.gm-filter-radio:hover     { background: var(--gm-blue-96); border-color: var(--gm-grey-65); }
.gm-filter-radio-active    { background: var(--gm-blue-25); border-color: var(--gm-blue-25); color: var(--gm-white); }
.gm-filter-radio-active:hover { background: var(--gm-blue-20); border-color: var(--gm-blue-20); }
.gm-admin-billing          { }
.gm-text-warning           { color: var(--gm-orange-44); font-weight: 600; }
.gm-garage-grid            { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.gm-media-filter-form      { margin-bottom: 20px; }
.gm-media-col-mb           { margin-bottom: 20px; }
.gm-media-photo-thumb      { height: 110px; background-size: cover; background-position: center; border-radius: 4px; cursor: pointer; }
.gm-media-video-wrap       { position: relative; height: 110px; border-radius: 4px; overflow: hidden; background: var(--gm-black); cursor: pointer; }
.gm-media-video-img        { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.gm-media-video-btn        { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: var(--gm-red-50-a85); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.gm-media-play-arrow       { color: var(--gm-white); font-size: var(--gm-font-sm); margin-left: 3px; }
.gm-media-meta             { display: block; margin-top: 5px; }
.gm-cert-table             { max-width: 500px; }

/* ══════════════════════════════════════════════════════════
   views/groups/view.php
   ══════════════════════════════════════════════════════════ */
.gm-grp-logo               { max-height: 80px; margin-bottom: 12px; }
.gm-grp-help-sm            { margin-top: 4px; font-size: var(--gm-font-12px); }
.gm-grp-walkup-group       { margin-top: 8px; }
.gm-grp-walkup-label       { font-weight: 600; }
.gm-grp-walkup-inner       { margin-top: 6px; }
.gm-grp-walkup-check-label { font-weight: normal; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.gm-grp-hr                 { margin: 12px 0; }
.gm-grp-cust-help          { font-size: var(--gm-font-12px); }
.gm-grp-addq-btn           { margin-bottom: 16px; }
.gm-grp-form-mt            { margin-top: 20px; }
.gm-grp-cert-hdr           { margin-bottom: 16px; }
.gm-grp-cert-help          { font-size: var(--gm-font-xs); margin-bottom: 16px; }
.gm-grp-cert-table         { max-width: 520px; }
.gm-grp-cert-th-lvl        { width: 80px; }
.gm-grp-cert-td-lvl        { vertical-align: middle; font-weight: 600; }
.gm-grp-cert-save-mt       { margin-top: 8px; }
.gm-grp-officer-top        { margin-bottom: 16px; }
.gm-grp-invite-note        { margin-left: 8px; font-size: var(--gm-font-12px); }
.gm-grp-req-summary-lnk   { cursor: pointer; font-size: var(--gm-font-12px); }
.gm-grp-req-ans-p          { margin: 4px 0; font-size: var(--gm-font-12px); }
.gm-grp-req-noans          { font-size: var(--gm-font-12px); }
.gm-grp-approve-form       { display: inline; }
.gm-grp-deny-wrap          { display: none; margin-top: 8px; }
.gm-grp-deny-ta            { font-size: var(--gm-font-12px); }
.gm-grp-deny-confirm-btn   { margin-top: 4px; }
.gm-grp-decisions-hdr      { margin-top: 24px; }
.gm-grp-billing-table      { max-width: 480px; }
.gm-grp-jq-row-mb          { margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════
   views/rides/public-detail.php
   ══════════════════════════════════════════════════════════ */
/* .gm-public-nav already defined above */
.gm-public-nav-back        { color: var(--gm-text, var(--gm-grey-91)); }
.gm-pub-nav-btn-mr         { margin-right: 8px; }
.gm-pub-panel              { border-radius: 8px; }
.gm-pub-panel-heading      { background: var(--gm-border-faint); border: none; padding: 20px 24px; }
.gm-pub-panel-title        { margin: 0 0 8px; }
.gm-pub-panel-group        { margin: 0; color: var(--gm-white-a55); font-size: var(--gm-font-sm); }
.gm-pub-panel-body         { padding: 24px; }
.gm-pub-table              { margin-bottom: 24px; }
.gm-pub-td-label           { width: 140px; color: var(--gm-white-a50); border: none; padding: 6px 0; }
.gm-pub-td-value           { border: none; padding: 6px 0; font-weight: 500; }
.gm-pub-td-plain           { border: none; padding: 6px 0; }
.gm-pub-td-muted           { color: var(--gm-white-a50); border: none; padding: 6px 0; }
.gm-pub-desc-wrap          { margin-bottom: 24px; }
.gm-pub-desc-heading       { color: var(--gm-white-a50); text-transform: uppercase; font-size: var(--gm-font-11px); letter-spacing: 0.08em; }
.gm-pub-desc-body          { line-height: 1.6; }
.gm-pub-cta-wrap           { border-top: 1px solid var(--gm-white-a10); padding-top: 20px; text-align: center; }
.gm-pub-cta-text           { color: var(--gm-white-a60); margin-bottom: 16px; }

/* ══════════════════════════════════════════════════════════
   views/rides/public.php
   ══════════════════════════════════════════════════════════ */
.gm-public-nav-title       { font-size: var(--gm-font-sm); font-weight: 600; color: var(--gm-text, var(--gm-grey-91)); }
.gm-pub-no-rides           { color: var(--gm-white-a50); text-align: center; padding: 40px 0; }
.gm-pub-card-col           { margin-bottom: 20px; }
.gm-pub-ride-panel         { border-radius: 8px; overflow: hidden; }
.gm-pub-ride-heading       { background: var(--gm-border-faint); border: none; }
.gm-pub-ride-title         { margin: 0; }
.gm-pub-ride-link          { color: var(--gm-text, var(--gm-grey-91)); text-decoration: none; }
.gm-pub-ride-body          { padding: 14px; }
.gm-pub-ride-meta          { margin: 0 0 6px; color: var(--gm-white-a65); font-size: var(--gm-font-xs); }
.gm-pub-ride-meta-last     { margin: 0 0 10px; color: var(--gm-white-a65); font-size: var(--gm-font-xs); }
.gm-pub-modal-content      { background: var(--gm-dark-12); border: 1px solid var(--gm-white-a12); color: var(--gm-text-light); }
.gm-pub-modal-header       { border-bottom: 1px solid var(--gm-white-a10); padding: 16px 20px; }
.gm-pub-modal-close        { color: var(--gm-grey-67); opacity: 1; font-size: var(--gm-font-22px); }
.gm-pub-modal-title        { color: var(--gm-white); }
.gm-pub-modal-body         { padding: 24px; }
.gm-pub-modal-footer       { border-top: 1px solid var(--gm-white-a10); text-align: left; }
.gm-pub-modal-loading      { text-align: center; padding: 32px; color: var(--gm-white-a40); }

/* ══════════════════════════════════════════════════════════
   views/rides/_public-modal-content.php
   ══════════════════════════════════════════════════════════ */
.gm-pmc-group-name         { margin: 0 0 16px; color: var(--gm-white-a45); font-size: var(--gm-font-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.gm-pmc-table              { margin-bottom: 20px; }
.gm-pmc-td-label           { width: 130px; color: var(--gm-white-a45); border: none; padding: 7px 0; font-size: var(--gm-font-xs); }
.gm-pmc-td-value           { border: none; padding: 7px 0; font-weight: 500; }
.gm-pmc-td-plain           { border: none; padding: 7px 0; }
.gm-pmc-td-muted           { color: var(--gm-white-a45); border: none; padding: 7px 0; font-size: var(--gm-font-xs); }
.gm-pmc-desc-wrap          { margin-bottom: 24px; padding: 16px; background: var(--gm-white-a04); border-radius: 6px; border: 1px solid var(--gm-white-a07); }
.gm-pmc-desc-heading       { color: var(--gm-white-a40); text-transform: uppercase; font-size: var(--gm-font-11px); letter-spacing: 0.08em; margin: 0 0 10px; }
.gm-pmc-desc-body          { margin: 0; line-height: 1.6; }
.gm-pmc-cta-wrap           { text-align: center; padding-top: 8px; }
.gm-pmc-cta-text           { color: var(--gm-white-a50); margin-bottom: 14px; font-size: var(--gm-font-sm); }

/* ══════════════════════════════════════════════════════════
   views/layouts/main-v2.php
   ══════════════════════════════════════════════════════════ */
.gm-main-body-padding    { padding-top: 20px; padding-left: 32px; padding-right: 32px; }
.gm-billing-alert        { background: var(--gm-amber-47-a15); border: 2px solid var(--gm-amber-47-a50); border-radius: 8px; padding: 12px 20px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; font-size: var(--gm-font-base, 16px); font-weight: 600; color: var(--gm-orange-29); }
.gm-dark .gm-billing-alert { background: var(--gm-amber-47-a12); border-color: var(--gm-amber-47-a40); color: var(--gm-amber-77); }
.gm-billing-alert a      { color: var(--gm-orange-31); font-weight: 700; text-decoration: underline; margin-left: 8px; }
.gm-dark .gm-billing-alert a { color: var(--gm-orange-56); }
.gm-profile-banner       { background: var(--gm-red-51-a10); border: 1px solid var(--gm-red-51-a25); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gm-banner-text          { color: var(--gm-red-82); font-size: var(--gm-font-sm); }
.gm-banner-link          { color: var(--gm-orange); font-weight: 700; }
.gm-banner-dismiss       { background: transparent; border: none; color: var(--gm-grey-53); font-size: var(--gm-font-18px); cursor: pointer; padding: 0 4px; }
.gm-reg-prompt           { background: var(--gm-green-58-a10); border: 1px solid var(--gm-green-58-a25); border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.gm-reg-welcome          { color: var(--gm-green-58); }
.gm-reg-desc             { color: var(--gm-white-a70); margin-left: 10px; }
.gm-reg-btn-row          { display: flex; gap: 10px; flex-wrap: wrap; }
.gm-btn-complete-profile { background: var(--gm-green-24); border: 1px solid var(--gm-green-45); color: var(--gm-green-73); padding: 5px 14px; }
.gm-btn-later            { background: transparent; border: 1px solid var(--gm-white-a20); color: var(--gm-grey-53); padding: 5px 14px; }
/* Scoped to `footer.gm-main-footer` (specificity 0,1,1) so it beats the legacy
   `.footer` rule in site-v3.css (#5F5F53 olive-gray, opacity .7, height 60px) which
   shares the element. We also explicitly neutralize those legacy props. */
footer.gm-main-footer    {
    margin-top: 40px;
    color: var(--gm-text-light);
    padding: 28px 0;
    height: auto;
    opacity: 1;
    border-top: none;
    /* Solid black footer (no texture) — always dark, both themes. */
    background-color: var(--gm-black);
}
.gm-footer-inner         { display: flex; align-items: center; gap: 24px; }
.gm-main-footer-logo     { max-height: 64px; opacity: 0.9; flex-shrink: 0; display: block; }
.gm-footer-copy          { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.gm-footer-copy-line     { font-size: var(--gm-font-base); color: var(--gm-text-light); }
.gm-footer-tagline       { font-size: var(--gm-font-sm);   color: var(--gm-text-light); }
@media (max-width: 600px) {
    .gm-footer-inner  { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
}

/* ══════════════════════════════════════════════════════════
   views/site/setup-checklist.php
   ══════════════════════════════════════════════════════════ */
.gm-setup-page-wrap      { max-width: 700px; padding-bottom: 60px; }
.gm-setup-page-title     { margin-bottom: 6px; }
.gm-setup-page-sub       { color: var(--gm-grey-53); margin-bottom: 24px; }
.gm-trial-active-banner  { background: var(--gm-green-58-a08); border: 1px solid var(--gm-green-58-a20); border-radius: 8px; padding: 12px 16px; margin-bottom: 24px; font-size: var(--gm-font-sm); color: var(--gm-green-73); }
.gm-all-done-box         { text-align: center; padding: 40px 20px; background: var(--gm-green-58-a08); border: 1px solid var(--gm-green-58-a20); border-radius: 12px; }
.gm-all-done-emoji       { font-size: var(--gm-font-48px); margin-bottom: 12px; }
.gm-all-done-title       { font-size: var(--gm-font-lg); font-weight: 700; color: var(--gm-green-58); }
.gm-all-done-sub         { color: var(--gm-grey-53); margin-top: 8px; }
.gm-all-done-cta         { margin-top: 16px; }
.gm-checklist-box        { border: 1px solid var(--gm-border-faint); border-radius: 12px; overflow: hidden; }
.gm-checklist-item       { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--gm-white-a06); }
.gm-checklist-icon       { font-size: var(--gm-font-22px); flex-shrink: 0; }
.gm-checklist-content    { flex: 1; }
.gm-checklist-label-done { font-size: var(--gm-font-sm); font-weight: 600; color: var(--gm-green-58); }
.gm-checklist-label-todo { font-size: var(--gm-font-sm); font-weight: 600; color: var(--gm-text-light); }
.gm-checklist-cta        { flex-shrink: 0; font-size: var(--gm-font-xs); color: var(--gm-orange); text-decoration: none; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════
   Reusable Readiness widget — speedometer dial + graphical tiles
   views/site/_readiness.php  (Sprint 46; powers club + rider onboarding)
   Base = dark theme; light overrides live in the html:not(.gm-dark) block.
   ════════════════════════════════════════════════════════════════ */
.gm-readiness               { width: 100%; position: relative; }
.gm-readiness-hidden        { display: none; }
/* "Hide this" control — only rendered once the widget is complete. */
.gm-readiness-dismiss       { position: absolute; top: 0; right: 0; width: 30px; height: 30px; padding: 0;
                              border: none; background: transparent; color: var(--gm-grey-60);
                              font-size: var(--gm-font-22px); line-height: 1; cursor: pointer; border-radius: 6px; }
.gm-readiness-dismiss:hover { background: var(--gm-white-a08); color: var(--gm-text-light); }
/* Rider-dashboard card wrapper (mirrors .gm-cdash-welcome on the club dashboard). */
.gm-dash-readiness          { background: var(--gm-card-bg, var(--gm-white)); border: 1px solid var(--gm-border, var(--gm-blue-91-e5e7eb));
                              border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; }
.gm-readiness-head          { font-size: var(--gm-font-lg); font-weight: 700; margin-bottom: 2px; color: var(--gm-grey-91); }
.gm-readiness-sub           { font-size: var(--gm-font-sm); color: var(--gm-grey-60); margin-bottom: 10px; }

/* --- dial --- */
.gm-readiness-dial          { position: relative; width: 240px; max-width: 100%; margin: 6px auto 0; }
.gm-readiness-dial-svg      { display: block; width: 240px; max-width: 100%; height: auto; }
.gm-readiness-arc-track     { stroke: var(--gm-grey-50-a20); }
.gm-readiness-arc-fill      { stroke: var(--gm-orange-50-f59e0b); transition: stroke-dashoffset .6s ease, stroke .3s ease; }
.gm-readiness-complete .gm-readiness-arc-fill { stroke: var(--gm-btn-green); }
.gm-readiness-needle        { position: absolute; left: 50%; bottom: 18px; width: 5px; height: 84px;
                              background: var(--gm-text-light); transform-origin: bottom center;
                              transform: translateX(-50%) rotate(-90deg); border-radius: 5px;
                              transition: transform .6s ease, background .3s ease; }
.gm-readiness-hub           { position: absolute; left: 50%; bottom: 11px; width: 18px; height: 18px;
                              border-radius: 50%; background: var(--gm-text-light); transform: translateX(-50%);
                              transition: background .3s ease; }
.gm-readiness-complete .gm-readiness-needle,
.gm-readiness-complete .gm-readiness-hub { background: var(--gm-btn-green); }
.gm-readiness-read          { text-align: center; margin-top: 4px; }
.gm-readiness-pct           { display: block; font-size: var(--gm-font-32px); font-weight: 800; line-height: 1; color: var(--gm-grey-91); }
.gm-readiness-complete .gm-readiness-pct { color: var(--gm-btn-green); }
.gm-readiness-meta          { display: block; font-size: var(--gm-font-xs); color: var(--gm-grey-60); margin-top: 4px; }

/* --- icon tiles --- */
.gm-readiness-tiles         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.gm-readiness-tile          { display: flex; flex-direction: column; align-items: center; gap: 7px;
                              padding: 14px 6px; border-radius: 10px; border: 1px solid var(--gm-border-faint);
                              text-align: center; text-decoration: none; }
a.gm-readiness-tile         { cursor: pointer; transition: border-color .2s ease, background .2s ease; }
a.gm-readiness-tile:hover   { border-color: var(--gm-orange-50-f59e0b); background: var(--gm-white-a05); }
.gm-readiness-tile-ic       { position: relative; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center;
                              justify-content: center; font-size: var(--gm-font-22px);
                              border: 2px solid var(--gm-grey-60); color: var(--gm-grey-60); background: transparent; }
.gm-readiness-tile-on .gm-readiness-tile-ic { border-color: var(--gm-btn-green); background: var(--gm-btn-green); }
/* Sprint 47 — explicit ✓ done-indicator so "done" is unmistakable beyond color:
   a check badge on the icon corner plus a "✓ Done" label under the tile. */
.gm-readiness-tile-check    { position: absolute; bottom: -3px; right: -3px; width: 18px; height: 18px;
                              border-radius: 50%; background: var(--gm-btn-green); color: var(--gm-white);
                              border: 2px solid var(--gm-white); display: flex; align-items: center;
                              justify-content: center; font-size: var(--gm-font-9px); font-weight: 700; line-height: 1; }
.gm-readiness-tile-done     { font-size: var(--gm-font-xs); color: var(--gm-btn-green); font-weight: 700; }
.gm-readiness-tile-lbl      { font-size: var(--gm-font-xs); line-height: 1.25; color: var(--gm-grey-60); }
.gm-readiness-tile-on .gm-readiness-tile-lbl { color: var(--gm-text-light); font-weight: 600; }
.gm-readiness-tile-cta      { font-size: var(--gm-font-xs); color: var(--gm-orange-50-f59e0b); font-weight: 600; }

/* --- completion congrats (inside the widget at 100%) --- */
.gm-readiness-congrats        { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px;
                                padding: 14px 18px; border-radius: 12px; background: var(--gm-green-58-a08);
                                border: 1px solid var(--gm-green-58-a20); }
.gm-readiness-congrats-emoji  { font-size: var(--gm-font-28px); flex-shrink: 0; }
.gm-readiness-congrats-body   { flex: 1; min-width: 180px; }
.gm-readiness-congrats-title  { display: block; font-size: var(--gm-font-sm); font-weight: 700; color: var(--gm-text-light); }
.gm-readiness-congrats-sub    { display: block; font-size: var(--gm-font-xs); color: var(--gm-grey-60); margin-top: 3px; }
.gm-readiness-congrats-actions{ display: flex; gap: 8px; flex-wrap: wrap; }
.gm-readiness-congrats-btn    { font-size: var(--gm-font-xs); font-weight: 600; text-decoration: none; padding: 8px 14px;
                                border-radius: 8px; background: var(--gm-btn-green); color: var(--gm-white); white-space: nowrap; }
.gm-readiness-congrats-btn:hover { background: var(--gm-btn-green-hover); color: var(--gm-white); }
.gm-readiness-congrats-btn-ghost { background: transparent; color: var(--gm-text-light); border: 1px solid var(--gm-btn-green); }
.gm-readiness-congrats-btn-ghost:hover { background: var(--gm-btn-green); color: var(--gm-white); }
/* Dark mode sets `html.gm-dark a { color: orange }` globally (specificity beats a plain
   class); these buttons are <a> tags, so scope-match it to keep their text readable. */
html.gm-dark .gm-readiness-congrats-btn,
html.gm-dark .gm-readiness-congrats-btn:hover,
html.gm-dark .gm-readiness-congrats-btn:focus       { color: var(--gm-white); }
html.gm-dark .gm-readiness-congrats-btn-ghost,
html.gm-dark .gm-readiness-congrats-btn-ghost:focus { color: var(--gm-text-light); }
html.gm-dark .gm-readiness-congrats-btn-ghost:hover { color: var(--gm-white); }

@media (max-width: 420px) {
    .gm-readiness-tiles     { gap: 8px; }
    .gm-readiness-tile      { padding: 12px 4px; }
    .gm-readiness-tile-ic   { width: 38px; height: 38px; }
}

/* ══════════════════════════════════════════════════════════
   views/site/register-club.php  (style block moved here)
   ══════════════════════════════════════════════════════════ */
.gm-register-hero        { text-align: center; padding: 48px 24px 40px; }
.gm-register-hero h1     { font-size: var(--gm-font-32px); font-weight: 700; margin-bottom: 12px; }
.gm-register-hero p.sub  { font-size: var(--gm-font-18px); color: var(--gm-white-a65); margin-bottom: 28px; }
.gm-features-grid        { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.gm-feature-item         { flex: 1 1 220px; background: var(--gm-white-a05); border-radius: 8px; padding: 16px 20px; }
.gm-feature-item .glyphicon { color: var(--gm-teal-61); margin-right: 8px; }
.gm-pricing-box          { background: var(--gm-white-a07); border: 1px solid var(--gm-white-a15); border-radius: 12px; max-width: 480px; margin: 0 auto 40px; padding: 32px; text-align: center; }
.gm-pricing-box .price   { font-size: var(--gm-font-48px); font-weight: 700; }
.gm-pricing-box .price span { font-size: var(--gm-font-lg); font-weight: 400; color: var(--gm-white-a60); }
.gm-who-list             { list-style: none; padding: 0; margin: 0; }
.gm-who-list li          { padding: 10px 0; border-bottom: 1px solid var(--gm-border-faint); }
.gm-who-list li:last-child { border-bottom: none; }
.gm-cta-section          { text-align: center; padding: 40px 24px; }
.gm-section-h3-center    { margin-bottom: 20px; text-align: center; }
.gm-plan-label           { font-size: var(--gm-font-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gm-white-a50); margin-bottom: 12px; }
.gm-plan-tagline         { color: var(--gm-white-a60); margin: 8px 0 4px; }
.gm-yearly-box           { margin: 12px 0 20px; padding: 10px 16px; background: var(--gm-white-a06); border-radius: 8px; }
.gm-yearly-price         { font-size: var(--gm-font-22px); font-weight: 700; }
.gm-yearly-period        { color: var(--gm-white-a60); font-size: var(--gm-font-sm); }
.gm-save-badge           { margin-left: 10px; background: var(--gm-green-42); color: var(--gm-white); font-size: var(--gm-font-11px); font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.04em; }
.gm-trial-note           { color: var(--gm-teal-61); font-weight: 600; margin-bottom: 24px; }
.gm-plan-fine-print      { color: var(--gm-white-a55); font-size: var(--gm-font-xs); }
.gm-cta-bottom-sub       { color: var(--gm-white-a60); margin-bottom: 20px; }
.gm-already-member       { text-align: center; padding: 16px 0 32px; color: var(--gm-white-a40); font-size: var(--gm-font-xs); }
.gm-subtle-link          { color: var(--gm-white-a60); }

/* ══════════════════════════════════════════════════════════
   views/onboarding/setup.php  (style block moved here)
   ══════════════════════════════════════════════════════════ */
.gm-wizard-steps         { display: flex; gap: 0; margin: 0 0 28px; border-radius: 4px; overflow: hidden; border: 1px solid var(--gm-white-a10); }
.gm-wizard-step          { flex: 1; padding: 10px 16px; font-size: var(--gm-font-xs); color: var(--gm-grey-53); background: var(--gm-dark-bg); text-align: center; }
.gm-wizard-step.active   { background: var(--gm-orange); color: var(--gm-white); font-weight: 600; }
.gm-wizard-step.done     { background: var(--gm-dark-14-1a2e1a); color: var(--gm-green-65); }
.gm-wizard-h             { color: var(--gm-white); text-align: center; margin: 0 0 4px; font-size: var(--gm-font-1_25rem); font-weight: 600; }
.gm-wizard-sub           { color: var(--gm-grey-67); text-align: center; font-size: var(--gm-font-0_9rem); margin: 0 0 20px; }
.gm-form-label-sm        { color: var(--gm-grey-80); font-size: var(--gm-font-xs); }
.gm-optional-gray        { color: var(--gm-grey-40); }
.gm-file-input-dark      { background: var(--gm-dark-12-1a1d25); color: var(--gm-grey-80); border-color: var(--gm-white-a12); }
.gm-logo-preview         { max-height: 60px; border-radius: 4px; border: 1px solid var(--gm-white-a10); }
.gm-logo-current         { color: var(--gm-grey-53); font-size: var(--gm-font-12px); margin-left: 8px; }
.gm-form-hint            { color: var(--gm-grey-40); font-size: var(--gm-font-12px); margin-top: 4px; }
.gm-wizard-btn-row       { margin-top: 20px; display: flex; gap: 12px; }
.gm-btn-skip             { flex: 1; padding: 10px; }
.gm-btn-primary-flex2    { flex: 2; }

/* ══════════════════════════════════════════════════════════
   views/bikes/index.php
   ══════════════════════════════════════════════════════════ */
.gm-garage-index-wrap    { max-width: 1100px; padding-bottom: 60px; }
.gm-garage-header-row    { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.gm-garage-h3            { margin: 0; }
.gm-alerts-box           { background: var(--gm-red-51-a10); border: 1px solid var(--gm-red-51-a25); border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; }
.gm-alerts-heading       { font-weight: 700; color: var(--gm-red-71); margin-bottom: 8px; }
.gm-alert-row            { color: var(--gm-red-82); font-size: var(--gm-font-sm); margin-bottom: 4px; }
.gm-bikes-grid           { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.gm-bike-card-outer      { position: relative; }
.gm-garage-footer-bar    { padding: 10px 16px; border-top: 1px solid var(--gm-white-a07); display: flex; align-items: center; justify-content: space-between; background: var(--gm-dark-06); }
.gm-odo-label            { font-size: var(--gm-font-xs); color: var(--gm-grey-53); }
.gm-odo-none             { color: var(--gm-grey-33); }
.gm-footer-actions-row   { display: flex; align-items: center; gap: 8px; }
.gm-task-count-badge     { background: var(--gm-orange); color: var(--gm-white); font-size: var(--gm-font-11px); padding: 2px 8px; border-radius: 10px; }
.gm-maint-link           { font-size: var(--gm-font-xs); color: var(--gm-blue-68); text-decoration: none; }

/* ══════════════════════════════════════════════════════════
   views/user/my-clubs.php
   ══════════════════════════════════════════════════════════ */
.gm-myclubs-wrap         { max-width: 900px; padding-bottom: 60px; }
.gm-empty-club-box       { background: var(--gm-white-a04); border: 1px solid var(--gm-border-faint); border-radius: 10px; padding: 32px; text-align: center; color: var(--gm-grey-53); }
.gm-empty-club-text      { font-size: var(--gm-font-sm); margin: 0 0 12px; }
.gm-table-fs15           { font-size: var(--gm-font-sm); }
.gm-club-name-link       { font-weight: 600; color: var(--gm-blue-68); }
.gm-club-location-text   { font-size: var(--gm-font-12px); color: var(--gm-grey-40); margin-top: 2px; }
.gm-pending-section      { margin-top: 36px; }
.gm-pending-h4           { margin-bottom: 12px; }

/* ══════════════════════════════════════════════════════════
   views/club-wizard/index.php
   ══════════════════════════════════════════════════════════ */
.gm-radio-group          { display: flex; gap: 16px; margin-top: 4px; }
.gm-radio-label          { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: normal; color: var(--gm-grey-80); }
.gm-state-zip-row        { display: flex; gap: 12px; }
.gm-flex-zip             { flex: 0 0 130px; }
.gm-wizard-optional      { color: var(--gm-grey-40); font-weight: normal; }
.gm-file-input-text      { color: var(--gm-grey-80); font-size: var(--gm-font-sm); padding: 6px 0; }
.gm-upload-hint          { color: var(--gm-grey-40); font-size: var(--gm-font-12px); margin-top: 2px; }
.gm-wizard-signin-hint   { text-align: center; margin-top: 16px; color: var(--gm-grey-33); font-size: var(--gm-font-xs); }
.gm-wizard-signin-link   { color: var(--gm-orange); }
.gm-club-lookup-ok      { margin: 8px 0 12px; color: var(--gm-green-65); font-size: var(--gm-font-xs); }
.gm-club-lookup-match   { margin: 8px 0 12px; padding: 14px 16px; background: var(--gm-dark-14-1a2e1a); border: 1px solid var(--gm-green-32-3a6b3a); border-radius: 6px; color: var(--gm-grey-87); font-size: var(--gm-font-sm); }
.gm-club-lookup-list    { margin: 8px 0 8px 16px; padding: 0; }
.gm-club-lookup-list li { margin-bottom: 6px; }
.gm-club-lookup-link    { color: var(--gm-orange); font-size: var(--gm-font-xs); }
.gm-club-lookup-hint      { color: var(--gm-grey-67); font-size: var(--gm-font-12px); margin: 8px 0 0; }
.gm-club-duplicate-alert  { margin: 8px 0 12px; padding: 12px 16px; background: var(--gm-dark-14-2e1a1a); border: 1px solid var(--gm-red-41); border-radius: 6px; color: var(--gm-red-85); font-size: var(--gm-font-sm); }

/* ══════════════════════════════════════════════════════════
   views/club-wizard/step3.php
   ══════════════════════════════════════════════════════════ */
.gm-billing-summary      { background: var(--gm-white-a05); border: 1px solid var(--gm-white-a10); border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; font-size: var(--gm-font-sm); color: var(--gm-grey-80); }
.gm-billing-club-name    { font-weight: 700; color: var(--gm-white); margin-bottom: 6px; }
.gm-billing-note         { margin-top: 4px; color: var(--gm-white-a50); }
.gm-card-element-wrap    { background: var(--gm-dark-row1); border: 1px solid var(--gm-dark-19); border-radius: 6px; padding: 14px; }
.gm-card-errors-wrap     { display: none; }
.gm-billing-btn-row      { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.gm-back-btn             { background: transparent; border: 1px solid var(--gm-dark-20); color: var(--gm-grey-53); padding: 12px 20px; border-radius: 6px; text-decoration: none; }
.gm-billing-submit-flex  { flex: 1; }
.gm-billing-disabled     { flex: 1; opacity: 0.5; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════
   views/billing/upgrade.php
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   /billing/upgrade — subscription closing page (Sprint 40)
   Conversion surface: hero → white pricing card → energy band.
   Reuses --gm-orange and --gm-font-* vars; backgrounds are relative
   to /web/css/ so ../images/ resolves to /web/images/.
   ══════════════════════════════════════════════════════════ */
.gm-up2                  { width: 100%; }

/* Hero band */
.gm-up2-hero             { position: relative; width: 100%; min-height: 360px;
                           background: url('../images/Groupride3.webp') center 30% / cover no-repeat;
                           display: flex; align-items: center; justify-content: center; }
.gm-up2-hero-overlay     { position: absolute; inset: 0;
                           background: linear-gradient(180deg, var(--gm-black-a40) 0%, var(--gm-black-a78) 100%); }
.gm-up2-hero-inner       { position: relative; z-index: 1; text-align: center;
                           max-width: 760px; padding: 56px 20px; }
.gm-up2-hero-h1          { color: var(--gm-white); font-size: var(--gm-font-42px); font-weight: 800; line-height: 1.1;
                           margin: 0 0 14px; text-shadow: 0 2px 10px var(--gm-black-a55); }
.gm-up2-hero-sub         { color: var(--gm-white-a94); font-size: var(--gm-font-lg);
                           line-height: 1.5; margin: 0; text-shadow: 0 1px 6px var(--gm-black-a55); }

/* Pricing card — intentionally white in both themes (black logo lives here) */
.gm-up2-cardwrap         { display: flex; justify-content: center; padding: 0 20px;
                           margin-top: -64px; position: relative; z-index: 2; }
.gm-up2-card             { background: var(--gm-white); border-radius: 16px; width: 100%; max-width: 460px;
                           padding: 32px 28px 28px; text-align: center;
                           box-shadow: 0 14px 44px var(--gm-black-a40); }
.gm-up2-logo             { display: block; width: 70%; max-width: 250px; height: auto; margin: 0 auto 22px; }

/* Monthly / Annual toggle */
.gm-up2-toggle           { display: inline-flex; gap: 4px; background: var(--gm-grey-94);
                           border-radius: 999px; padding: 4px; margin-bottom: 22px; }
.gm-up2-toggle-btn       { border: none; background: transparent; color: var(--gm-grey-33); cursor: pointer;
                           font-size: var(--gm-font-sm); font-weight: 600; padding: 9px 20px;
                           border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; }
.gm-up2-toggle-btn.is-active { background: var(--gm-white); color: var(--gm-dark-10); box-shadow: 0 1px 5px var(--gm-black-a18); }
.gm-up2-save             { background: var(--gm-orange); color: var(--gm-white); font-weight: 700;
                           font-size: var(--gm-font-11px); text-transform: uppercase; letter-spacing: 0.04em;
                           padding: 2px 8px; border-radius: 999px; }

/* Price */
.gm-up2-price            { margin-bottom: 6px; }
.gm-up2-price-amt        { font-size: var(--gm-font-50px); font-weight: 800; color: var(--gm-dark-10); }
.gm-up2-price-per        { font-size: var(--gm-font-lg); font-weight: 600; color: var(--gm-grey-47); }
.gm-up2-savings          { font-size: var(--gm-font-sm); font-weight: 600;
                           color: var(--gm-orange); margin: 2px 0 4px; }

/* Big, scannable value props */
.gm-up2-values           { list-style: none; padding: 0; margin: 20px 0 26px; }
.gm-up2-values li        { font-size: var(--gm-font-lg); font-weight: 600; color: var(--gm-dark-13-222222);
                           padding: 11px 0; border-top: 1px solid var(--gm-grey-93); }
.gm-up2-values li:first-child { border-top: none; }
.gm-up2-values li::before { content: "\2713\00a0"; color: var(--gm-orange); font-weight: 800; }

/* CTA */
.gm-up2-cta,
.gm-up2-cta:link,
.gm-up2-cta:visited      { display: block; width: 100%; background: var(--gm-orange);
                           /* !important: dark-theme link rule paints the text brand-red at
                              rest (red-on-red until hover). Pin white decisively. */
                           color: var(--gm-white) !important;
                           font-size: var(--gm-font-lg); font-weight: 700; padding: 16px 24px;
                           border-radius: 10px; text-decoration: none; margin-bottom: 14px; }
.gm-up2-cta:hover, .gm-up2-cta:focus { background: var(--gm-orange-dark); color: var(--gm-white) !important; text-decoration: none; }
.gm-up2-fineprint        { font-size: var(--gm-font-xs); color: var(--gm-grey-53); margin: 0; line-height: 1.5; }

/* Energy band */
.gm-up2-energy           { position: relative; width: 100%; min-height: 280px; margin-top: 52px;
                           background: url('../images/Mark-Dragon.webp') center 35% / cover no-repeat;
                           display: flex; align-items: center; justify-content: center; }
.gm-up2-energy-overlay   { position: absolute; inset: 0;
                           background: linear-gradient(90deg, var(--gm-black-a62) 0%, var(--gm-black-a28) 100%); }
.gm-up2-energy-text      { position: relative; z-index: 1; color: var(--gm-white); font-weight: 800;
                           font-size: var(--gm-font-30px); text-align: center; padding: 30px 20px;
                           text-shadow: 0 2px 10px var(--gm-black-a55); }

/* Support */
.gm-up2-support          { text-align: center; font-size: var(--gm-font-sm);
                           color: var(--gm-grey-67); margin: 34px 0 60px; }
.gm-up2-support-link     { color: var(--gm-orange); }
.gm-up2-support-link:hover, .gm-up2-support-link:focus { color: var(--gm-orange-dark); }

/* Small screens */
@media (max-width: 600px) {
    .gm-up2-hero-h1      { font-size: var(--gm-font-32px); }
    .gm-up2-price-amt    { font-size: var(--gm-font-42px); }
    .gm-up2-energy-text  { font-size: var(--gm-font-24px); }
}
.gm-support-link         { color: var(--gm-orange); }

/* ══════════════════════════════════════════════════════════
   views/events/index-v2.php  (dynamic card colors)
   ══════════════════════════════════════════════════════════ */
/* Strip background — by ride classification (white label sits on top). */
.gm-strip-past           { background: var(--gm-ride-past); }
.gm-strip-next           { background: var(--gm-ride-next); }
.gm-strip-fullday        { background: var(--gm-ride-fullday); }
.gm-strip-short          { background: var(--gm-ride-short); }
.gm-strip-bikenight      { background: var(--gm-ride-bikenight); }
.gm-strip-multiday       { background: var(--gm-ride-multiday); }
/* Date text — same classification color, readable on the white card body. */
.gm-date-next            { color: var(--gm-ride-next); }
.gm-date-past            { color: var(--gm-ride-past); }
.gm-date-fullday         { color: var(--gm-ride-fullday); }
.gm-date-short           { color: var(--gm-ride-short); }
.gm-date-bikenight       { color: var(--gm-ride-bikenight); }
.gm-date-multiday        { color: var(--gm-ride-multiday); }

/* ══════════════════════════════════════════════════════════
   views/events/index.php (legacy list, calendar print view)
   ══════════════════════════════════════════════════════════ */
#fc-print-view           { display: none; }
@media print            { #fc-print-view { display: block; } }
.gm-ride-type-short      { background: var(--gm-blue-46); color: var(--gm-white); padding: 2px 7px; border-radius: 3px; font-size: var(--gm-font-11px); margin-right: 4px; }
.gm-ride-type-full       { background: var(--gm-orange-62); color: var(--gm-white); padding: 2px 7px; border-radius: 3px; font-size: var(--gm-font-11px); margin-right: 4px; }
.gm-ride-type-multi      { background: var(--gm-red-58); color: var(--gm-white); padding: 2px 7px; border-radius: 3px; font-size: var(--gm-font-11px); margin-right: 4px; }
.gm-dest-text            { font-size: var(--gm-font-12px); color: var(--gm-grey-53); }
.gm-dest-icon            { font-size: var(--gm-font-10px); }
.gm-print-hd             { text-align: center; margin: 0 0 8px; }
.gm-print-table          { width: 100%; border-collapse: collapse; table-layout: fixed; }
.gm-print-th             { border: 1px solid var(--gm-grey-80); padding: 4px; background: var(--gm-grey-96); text-align: center; font-size: var(--gm-font-12px); }
.gm-print-td             { border: 1px solid var(--gm-grey-80); padding: 4px; vertical-align: top; font-size: var(--gm-font-10px); }
.gm-print-event-wrap     { border: 1px solid var(--gm-grey-53); padding: 3px 4px; margin-bottom: 3px; }
.gm-print-event-time     { font-weight: 600; }

/* ══════════════════════════════════════════════════════════
   Auth pages shared styles
   ══════════════════════════════════════════════════════════ */
.gm-auth-center-wrap     { text-align: center; padding: 12px 0; }
.gm-auth-icon-lg         { font-size: var(--gm-font-3rem); color: var(--gm-grey-40); display: block; margin-bottom: 16px; }
.gm-auth-h2              { color: var(--gm-text-light); font-size: var(--gm-font-1_3rem); margin: 0 0 12px; }
.gm-auth-p               { color: var(--gm-grey-67); font-size: var(--gm-font-0_95rem); margin: 0 0 24px; }
.gm-auth-page-h2         { color: var(--gm-white); text-align: center; margin: 0 0 4px; font-size: var(--gm-font-1_25rem); font-weight: 600; }
.gm-auth-page-sub        { color: var(--gm-grey-67); text-align: center; font-size: var(--gm-font-0_9rem); margin: 0 0 24px; }
.gm-auth-strong          { color: var(--gm-text-light); }
.gm-auth-label           { color: var(--gm-grey-80); font-size: var(--gm-font-xs); }
.gm-auth-input-ro        { background: var(--gm-dark-12-1a1d25); color: var(--gm-grey-53); cursor: not-allowed; }
.gm-auth-help            { color: var(--gm-grey-40); font-size: var(--gm-font-12px); }
.gm-auth-signin-hint     { text-align: center; margin-top: 20px; font-size: var(--gm-font-0_85rem); color: var(--gm-grey-40); }
.gm-auth-signin-link     { color: var(--gm-orange); }
.gm-auth-alert           { border-left: 4px solid var(--gm-teal-38); font-size: var(--gm-font-sm); }
.gm-auth-hidden-input    { display: none; }
.gm-auth-mt-20           { margin-top: 20px; }
.gm-auth-mt-15           { margin-top: 15px; }
.gm-auth-mb-18           { margin-bottom: 18px; }
.gm-auth-mb-12           { margin-bottom: 12px; }
.gm-auth-mb-24           { margin-bottom: 24px; }

/* ══════════════════════════════════════════════════════════
   views/layouts/main.php  (legacy layout UI-toggle button)
   ══════════════════════════════════════════════════════════ */
.gm-ui-toggle-wrap { position: fixed; bottom: 12px; right: 12px; z-index: 9999; }
.gm-ui-toggle-btn  {
    background: var(--gm-dark-10);
    color: var(--gm-orange-50-e07b1f);
    font-size: var(--gm-font-11px);
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid var(--gm-orange-50-a40);
    display: inline-block;
}
.gm-ui-toggle-btn:hover { color: var(--gm-orange-50-e07b1f); text-decoration: none; }

/* ══════════════════════════════════════════════════════════
   views/layouts/login.php  (login gate layout)
   ══════════════════════════════════════════════════════════ */
.gm-login-layout *, .gm-login-layout *::before, .gm-login-layout *::after { box-sizing: border-box; }
.gm-login-html, .gm-login-body {
    margin: 0; padding: 0;
    min-height: 100vh;
    background: var(--gm-dark-row1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--gm-text-light);
    font-size: var(--gm-font-sm);
}
.gm-gate-wrap {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}
.gm-gate-left {
    flex: 1;
    background: linear-gradient(160deg, var(--gm-blue-11) 0%, var(--gm-blue-18) 60%, var(--gm-dark-11) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 48px;
    border-right: 1px solid var(--gm-white-a07);
}
.gm-gate-logo    { max-width: 220px; height: auto; margin-bottom: 32px; opacity: 0.92; }
.gm-gate-headline { font-size: var(--gm-font-2_2rem); font-weight: 800; color: var(--gm-white); margin: 0 0 10px; line-height: 1.2; }
.gm-gate-sub      { font-size: var(--gm-font-1_1rem); color: var(--gm-white-a55); margin: 0 0 32px; line-height: 1.5; }
.gm-gate-features { list-style: none; padding: 0; margin: 0 0 40px; }
.gm-gate-features li {
    padding: 11px 0;
    border-bottom: 1px solid var(--gm-white-a07);
    font-size: var(--gm-font-1rem);
    color: var(--gm-white-a80);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.4;
}
.gm-gate-features li:last-child { border-bottom: none; }
.gm-gate-features li::before {
    content: '✓';
    color: var(--gm-green-58);
    font-weight: 800;
    font-size: var(--gm-font-1rem);
    flex-shrink: 0;
    margin-top: 1px;
}
.gm-gate-cta-group { display: flex; gap: 14px; flex-wrap: wrap; }
.gm-gate-cta-club,
.gm-gate-cta-rider {
    flex: 1;
    min-width: 160px;
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: var(--gm-font-1rem);
    padding: 16px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: filter 0.15s, transform 0.1s;
    line-height: 1.3;
}
.gm-gate-cta-club:hover, .gm-gate-cta-rider:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    text-decoration: none;
}
.gm-gate-cta-club       { background: var(--gm-orange); color: var(--gm-white); }
.gm-gate-cta-club:hover { color: var(--gm-white); }
.gm-gate-cta-rider       { background: var(--gm-green-24); border: 2px solid var(--gm-green-45); color: var(--gm-green-73); }
.gm-gate-cta-rider:hover { color: var(--gm-green-85); }
.gm-gate-cta-label { display: block; font-weight: 700; font-size: var(--gm-font-1rem); }
.gm-gate-cta-note  { display: block; font-weight: 400; font-size: var(--gm-font-0_78rem); opacity: 0.75; margin-top: 3px; }
.gm-gate-pricing   { font-size: var(--gm-font-0_8rem); color: var(--gm-white-a30); margin-top: 14px; }
.gm-gate-right {
    width: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 44px;
    background: var(--gm-dark-bg);
}
.gm-gate-right-heading { font-size: var(--gm-font-1_6rem); font-weight: 700; color: var(--gm-white); margin: 0 0 4px; }
.gm-gate-right-club    { font-size: var(--gm-font-1rem); font-weight: 600; color: var(--gm-blue-68); margin: 0 0 6px; }
.gm-gate-right-sub     { font-size: var(--gm-font-0_95rem); color: var(--gm-white-a45); margin: 0 0 28px; line-height: 1.5; }
/* Login layout form overrides */
.gm-gate-right .form-group  { margin-bottom: 20px; }
.gm-gate-right label        { color: var(--gm-grey-73); font-size: var(--gm-font-0_9rem); margin-bottom: 6px; display: block; font-weight: 500; }
.gm-gate-right .form-control {
    background: var(--gm-dark-row1);
    border: 1px solid var(--gm-dark-19);
    color: var(--gm-white);
    border-radius: 6px;
    height: 48px;
    font-size: var(--gm-font-1rem);
    padding: 10px 14px;
    width: 100%;
    transition: border-color 0.15s;
}
.gm-gate-right .form-control:focus  { border-color: var(--gm-orange); outline: none; box-shadow: none; }
.gm-gate-right .form-control::placeholder { color: var(--gm-grey-33); }
.gm-login-submit { background: var(--gm-orange); border: none; border-radius: 6px; color: var(--gm-white); font-size: var(--gm-font-1rem); font-weight: 700; padding: 13px 28px; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
.gm-login-submit:hover { background: var(--gm-orange-dark); }
.gm-login-bottom-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.gm-login-card .checkbox label { color: var(--gm-grey-67); font-size: var(--gm-font-0_85rem); font-weight: normal; }
.gm-login-forgot { display: block; text-align: right; margin-top: 16px; color: var(--gm-grey-40); font-size: var(--gm-font-0_85rem); text-decoration: none; }
.gm-login-forgot:hover { color: var(--gm-orange); text-decoration: underline; }
/* Login layout error/alert overrides */
.gm-gate-right .help-block  { color: var(--gm-red-71); font-size: var(--gm-font-0_82rem); margin-top: 4px; }
.gm-gate-right .has-error .form-control { border-color: var(--gm-orange); }
.gm-gate-right .alert       { border-radius: 6px; font-size: var(--gm-font-0_9rem); padding: 12px 16px; margin-bottom: 18px; }
.gm-gate-right .alert-danger  { background: var(--gm-red-51-a15); border: 1px solid var(--gm-red-51-a30);  color: var(--gm-red-82); }
.gm-gate-right .alert-success { background: var(--gm-green-58-a12); border: 1px solid var(--gm-green-58-a25); color: var(--gm-green-73); }
@media (max-width: 760px) {
    .gm-gate-wrap     { flex-direction: column; }
    .gm-gate-left     { padding: 40px 24px; }
    .gm-gate-right    { width: 100%; padding: 40px 24px; }
    .gm-gate-headline { font-size: var(--gm-font-1_7rem); }
}

/* ── Standalone centered login page (loginLayout.php) ─────── */
.gm-login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--gm-dark-row1);
    padding: 40px 16px;
}
.gm-login-logo-area { text-align: center; margin-bottom: 28px; }
.gm-login-logo      { max-width: 400px; width: 100%; height: auto; opacity: 0.92; }
.gm-login-club-sub  { color: var(--gm-blue-68); font-size: var(--gm-font-sm); font-weight: 600;
                       margin: 10px 0 0; letter-spacing: 0.02em; }
.gm-login-solo-card {
    width: 100%; max-width: 420px;
    background: var(--gm-dark-bg);
    border: 1px solid var(--gm-white-a07);
    border-radius: 12px;
    padding: 36px 36px 28px;
}
.gm-login-solo-card .gm-gate-right-heading { font-size: var(--gm-font-lg); font-weight: 700; color: var(--gm-white); margin: 0 0 4px; }
.gm-login-solo-card .gm-gate-right-sub     { font-size: var(--gm-font-sm); color: var(--gm-white-a45); margin: 0 0 24px; }
.gm-login-solo-card .form-group            { margin-bottom: 18px; }
.gm-login-solo-card label                  { color: var(--gm-grey-80); font-size: var(--gm-font-sm); font-weight: 500; margin-bottom: 6px; display: block; }
.gm-login-solo-card .form-control {
    background: var(--gm-dark-row1);
    border: 1px solid var(--gm-dark-19);
    color: var(--gm-white);
    border-radius: 6px;
    height: 48px;
    font-size: var(--gm-font-base);
    padding: 10px 14px;
    width: 100%;
    font-family: inherit;
    transition: border-color 0.15s;
}
.gm-login-solo-card .form-control:focus     { border-color: var(--gm-orange); outline: none; box-shadow: none; }
.gm-login-solo-card select.form-control     { background: var(--gm-dark-row1); color: var(--gm-white); }
.gm-login-solo-card select.form-control option { background: var(--gm-dark-row1); color: var(--gm-white); }
.gm-login-solo-card .form-control::placeholder { color: var(--gm-grey-33); }
.gm-login-solo-card .has-error .form-control   { border-color: var(--gm-orange); }
.gm-login-solo-card .help-block  { color: var(--gm-red-71); font-size: var(--gm-font-xs); margin-top: 4px; }
.gm-login-solo-card .alert       { border-radius: 6px; font-size: var(--gm-font-sm); padding: 12px 16px; margin-bottom: 18px; }
.gm-login-solo-card .alert-danger  { background: var(--gm-red-51-a15); border: 1px solid var(--gm-red-51-a30);  color: var(--gm-red-82); }
.gm-login-solo-card .alert-success { background: var(--gm-green-58-a12); border: 1px solid var(--gm-green-58-a25); color: var(--gm-green-73); }
.gm-login-solo-card .gm-login-bottom-row { margin-top: 8px; }
.gm-login-solo-card .gm-login-submit {
    background: var(--gm-orange); border: none; border-radius: 6px;
    color: var(--gm-white); font-size: var(--gm-font-base); font-weight: 700;
    padding: 14px 32px; cursor: pointer; white-space: nowrap;
    font-family: inherit; transition: background 0.15s;
}
.gm-login-solo-card .gm-login-submit:hover { background: var(--gm-orange-dark); }
.gm-login-solo-card .checkbox label { color: var(--gm-grey-67); font-size: var(--gm-font-sm); font-weight: normal; }
.gm-login-solo-card .gm-login-forgot { color: var(--gm-grey-40); font-size: var(--gm-font-sm); text-decoration: none; display: block; text-align: right; margin-top: 16px; }
.gm-login-solo-card .gm-login-forgot:hover { color: var(--gm-orange); text-decoration: underline; }
.gm-login-solo-card a.gm-login-submit { display: table; margin: 10px auto 0; text-align: center; text-decoration: none; }
.gm-pw-toggle { cursor: pointer; background: var(--gm-dark-10); border-color: var(--gm-grey-27); color: var(--gm-grey-67); }
.gm-pw-toggle:hover { color: var(--gm-white); }
.gm-login-page-links {
    margin-top: 28px; text-align: center;
    font-size: var(--gm-font-sm); color: var(--gm-white-a30);
}
.gm-login-page-links a { color: var(--gm-white-a50); text-decoration: none; }
.gm-login-page-links a:hover { color: var(--gm-white); text-decoration: underline; }

.gm-login-divider {
    border: none; border-top: 1px solid var(--gm-white-a10);
    margin: 22px 0 18px;
}
.gm-login-no-account {
    text-align: center; color: var(--gm-white-a40);
    font-size: var(--gm-font-sm); margin: 0 0 12px;
}
.gm-login-register-btn {
    display: block; width: 100%; text-align: center;
    background: transparent; border: 1px solid var(--gm-white-a20);
    color: var(--gm-white-a80); border-radius: 6px;
    padding: 12px 24px; font-size: var(--gm-font-base); font-weight: 600;
    text-decoration: none; transition: border-color 0.15s, color 0.15s;
}
.gm-login-register-btn:hover { border-color: var(--gm-white-a50); color: var(--gm-white); text-decoration: none; }

.gm-login-register-wrap {
    margin-top: 28px; text-align: center; width: 100%; max-width: 420px;
}
.gm-login-register-label {
    color: var(--gm-white-a35); font-size: var(--gm-font-sm);
    margin: 0 0 12px;
}
.gm-login-club-btn {
    display: block; width: 100%; text-align: center;
    background: var(--gm-white-a05); border: 1px solid var(--gm-white-a12);
    color: var(--gm-white-a60); border-radius: 6px;
    padding: 12px 24px; font-size: var(--gm-font-base); font-weight: 500;
    text-decoration: none; transition: background 0.15s, color 0.15s;
}
.gm-login-club-btn:hover { background: var(--gm-white-a10); color: var(--gm-white); text-decoration: none; }

/* ─── Rebrand welcome splash (/welcome) — inside .gm-login-solo-card on the dark login layout ─── */
/* Hero logo is bigger here than on the standard login page. */
.gm-welcome-page .gm-login-logo { max-width: 600px; }
.gm-welcome            { text-align: center; }
.gm-welcome-h1         { font-size: var(--gm-font-28px); font-weight: 800; color: var(--gm-white); margin: 0 0 14px; line-height: 1.2; }
.gm-welcome-brand      { color: var(--gm-orange); white-space: nowrap; }
.gm-welcome-lead       { font-size: var(--gm-font-lg); color: var(--gm-text-light); margin: 0 0 12px; }
.gm-welcome-sub        { font-size: var(--gm-font-sm); color: var(--gm-white-a55); margin: 0 0 26px; line-height: 1.5; }
.gm-welcome-cta        { display: inline-block; background: var(--gm-orange); color: var(--gm-white); font-size: var(--gm-font-lg); font-weight: 700; text-decoration: none; padding: 15px 40px; border-radius: 8px; }
.gm-welcome-cta:hover  { background: var(--gm-orange-dark); color: var(--gm-white); text-decoration: none; }
.gm-welcome-countdown  { font-size: var(--gm-font-xs); color: var(--gm-white-a40); margin: 18px 0 0; }
.gm-welcome-note       { font-size: var(--gm-font-sm); color: var(--gm-white-a45); margin: 14px 0 0; }
.gm-welcome-link       { color: var(--gm-orange); text-decoration: none; }
.gm-welcome-link:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .gm-login-solo-card { padding: 28px 20px 22px; border-radius: 8px; }
    .gm-login-register-wrap { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   views/layouts/_popup-overlay.php
   ══════════════════════════════════════════════════════════ */
.promo-popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--gm-black-a75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}
.promo-popup-container {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}
.promo-popup-image {
    max-width: 100%;
    max-height: 90vh;
    display: block;
    cursor: pointer;
}
.promo-btn-close {
    position: absolute;
    top: -12px; right: -12px;
    width: 32px; height: 32px;
    background: var(--gm-white);
    border: none;
    border-radius: 50%;
    font-size: var(--gm-font-24px);
    line-height: 28px;
    text-align: center;
    color: var(--gm-dark-20);
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 8px var(--gm-black-a30);
}
.promo-btn-close:hover { background: var(--gm-grey-94); color: var(--gm-black); }
.promo-image-link { display: block; cursor: pointer; }

/* ══════════════════════════════════════════════════════════
   views/user/pulled-over.php  (I Got Pulled Over)
   ══════════════════════════════════════════════════════════ */
.gm-po-wrap          { max-width: 480px; margin: 16px auto; }
.gm-po-card          { max-width: 540px; margin: 12px auto; }
.gm-po-card-label    { font-size: var(--gm-font-xs); color: var(--gm-grey-53); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; text-align: center; }
.gm-po-name          { font-size: var(--gm-font-clamp-28px); font-weight: 700; margin-bottom: 2px; text-align: center; }
.gm-po-biker-name    { font-size: var(--gm-font-sm); color: var(--gm-grey-40); margin-bottom: 10px; text-align: center; }
/* DL# and state share one row — never wraps */
.gm-po-dl-row        { display: flex; align-items: baseline; justify-content: center; gap: 14px; flex-wrap: nowrap; margin: 12px 0 8px; }
.gm-po-dl-number     { font-size: var(--gm-font-clamp-44px); font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; word-break: normal; overflow-wrap: normal; flex-shrink: 1; min-width: 0; text-align: center; }
.gm-po-dl-state      { font-size: var(--gm-font-clamp-22px); font-weight: 600; white-space: nowrap; flex-shrink: 0; text-align: center; }
.gm-po-expiry        { font-size: var(--gm-font-sm); margin-top: 10px; text-align: center; }
.gm-po-phone         { font-size: var(--gm-font-base); margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--gm-grey-87); text-align: center; }
.gm-po-ice-box       { margin-top: 16px; padding: 12px 14px; background: var(--gm-amber-90); border-radius: 6px; border: 1px solid var(--gm-amber-51); text-align: left; }
.gm-po-ice-label     { font-size: var(--gm-font-12px); font-weight: 700; text-transform: uppercase; color: var(--gm-orange-27); margin-bottom: 4px; }
.gm-po-ice-name      { font-size: var(--gm-font-base); font-weight: 600; }
.gm-po-ice-number    { font-size: var(--gm-font-lg); font-weight: 700; }
.gm-po-edit-wrap     { text-align: center; margin: 12px 0 32px; }
.gm-po-empty-wrap    { text-align: center; padding: 32px 20px; max-width: 480px; margin: 0 auto; }
.gm-po-empty-icon    { font-size: var(--gm-font-48px); margin-bottom: 16px; }
.gm-po-empty-h3      { margin-bottom: 8px; }
.gm-po-empty-sub     { font-size: var(--gm-font-sm); margin-bottom: 24px; }
.gm-po-photos        { display: flex; gap: 12px; justify-content: center; margin: 12px 0; flex-wrap: nowrap; }
.gm-po-photo-wrap    { text-align: center; flex: 1; min-width: 0; }
.gm-po-photo             { max-width: 100%; width: 100%; border-radius: 6px; border: 1px solid var(--gm-grey-87); transition: opacity 0.15s; }
.gm-po-photo-label       { font-size: var(--gm-font-12px); color: var(--gm-grey-53); margin-top: 4px; }
.gm-po-photo-zoomable    { cursor: zoom-in; }
.gm-po-photo-zoomable:hover .gm-po-photo { opacity: 0.8; }
.gm-po-photo-zoom-hint   { font-size: var(--gm-font-11px); color: var(--gm-grey-67); display: block; margin-top: 2px; }
/* DL photo lightbox modal */
.po-lightbox-dialog      { width: auto; max-width: 92vw; margin: 4vh auto; }
.po-lightbox-content     { background: transparent; border: none; box-shadow: none; }
.po-lightbox-body        { padding: 0; position: relative; text-align: center; }
.po-lightbox-close       { position: absolute; right: -10px; top: -10px; z-index: 10;
                           background: var(--gm-black-a65); border: none; color: var(--gm-white);
                           border-radius: 50%; width: 32px; height: 32px;
                           font-size: var(--gm-font-22px); line-height: 30px; cursor: pointer; }
.po-lightbox-img         { max-width: 100%; max-height: 86vh; width: auto;
                           border-radius: 6px; touch-action: pinch-zoom; }
.gm-dl-photo-preview { margin-bottom: 8px; }
.gm-dl-thumb         { max-width: 120px; border-radius: 4px; border: 1px solid var(--gm-grey-87); }
@media (max-width: 480px) {
    /* Card fills the viewport (minus minimal gutter) */
    .pulled-over-page .container { padding-left: 8px; padding-right: 8px; }
    .gm-po-card                  { max-width: none; }
}

/* ══════════════════════════════════════════════════════════
   views/site/club-signup.php
   ══════════════════════════════════════════════════════════ */
.cs-wrap { max-width: 500px; margin: 0 auto; padding: 40px 24px; }
.cs-wrap h2 { font-size: var(--gm-font-26px); font-weight: 700; margin-bottom: 6px; }
.cs-wrap p.cs-sub { color: var(--gm-white-a55); margin-bottom: 28px; font-size: var(--gm-font-sm); }
.cs-form .form-group { margin-bottom: 18px; }
.cs-form label { color: var(--gm-white-a75); font-size: var(--gm-font-sm); margin-bottom: 4px; display: block; font-weight: 500; }
.cs-form .form-control {
    background: var(--gm-border-faint); border: 1px solid var(--gm-white-a18);
    color: var(--gm-white); border-radius: 6px; height: 44px; font-size: var(--gm-font-sm);
}
.cs-form .form-control::placeholder { color: var(--gm-white-a35); }
.cs-form .form-control:focus { background: var(--gm-white-a12); border-color: var(--gm-white-a40); outline: none; box-shadow: none; }
.cs-pw-wrap                  { position: relative; }
.cs-pw-input                 { padding-right: 44px !important; }
.cs-pw-toggle                { position: absolute; right: 0; top: 0; height: 100%; width: 44px; background: none; border: none; cursor: pointer; color: var(--gm-white-a45); display: flex; align-items: center; justify-content: center; }
.cs-pw-toggle:hover          { color: var(--gm-white-a90); }
html:not(.gm-dark) .cs-pw-toggle { color: var(--gm-black-a35); }
html:not(.gm-dark) .cs-pw-toggle:hover { color: var(--gm-black-a75); }
.cs-form select.form-control { background: var(--gm-dark-12-1a1c22); color: var(--gm-white); }
.cs-form select.form-control option { background: var(--gm-dark-12-1a1c22); color: var(--gm-white); }
html:not(.gm-dark) .cs-form select.form-control { background: var(--gm-white); color: var(--gm-dark-07); }
html:not(.gm-dark) .cs-form select.form-control option { background: var(--gm-white); color: var(--gm-dark-07); }
.cs-submit { background: var(--gm-orange); border: none; color: var(--gm-white); padding: 12px 32px; border-radius: 6px; font-size: var(--gm-font-sm); font-weight: 700; cursor: pointer; width: 100%; }
.cs-submit:hover { background: var(--gm-orange-dark); }
.cs-trial-note { text-align: center; margin-top: 12px; color: var(--gm-white-a45); font-size: var(--gm-font-xs); }
.cs-error { background: var(--gm-red-51-a15); border: 1px solid var(--gm-red-51-a30); color: var(--gm-red-82); border-radius: 6px; padding: 12px 16px; margin-bottom: 20px; font-size: var(--gm-font-sm); }
html:not(.gm-dark) .cs-form .form-control { background: var(--gm-white); border-color: var(--gm-grey-80); color: var(--gm-dark-07); }
html:not(.gm-dark) .cs-wrap p.cs-sub { color: var(--gm-grey-40); }
html:not(.gm-dark) .cs-trial-note { color: var(--gm-grey-53); }
.cs-footer-note { text-align: center; margin-top: 24px; font-size: var(--gm-font-xs); color: var(--gm-white-a40); }
.cs-footer-link { color: var(--gm-white-a65); }

/* ══════════════════════════════════════════════════════════
   views/site/no-club-home.php
   ══════════════════════════════════════════════════════════ */
.nc-hero { text-align: center; padding: 40px 24px 32px; }
.nc-hero h1 { font-size: var(--gm-font-28px); font-weight: 700; margin-bottom: 8px; }
.nc-hero p { font-size: var(--gm-font-base); color: var(--gm-white-a60); margin-bottom: 0; }
html:not(.gm-dark) .nc-hero p { color: var(--gm-grey-33); }
.nc-cards { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; max-width: 900px; margin: 0 auto 40px; padding: 0 16px; }
.nc-card { flex: 1 1 260px; max-width: 300px; background: var(--gm-white-a05); border: 1px solid var(--gm-white-a10); border-radius: 12px; padding: 28px 24px; text-align: center; }
.nc-card .nc-icon { font-size: var(--gm-font-36px); margin-bottom: 16px; }
.nc-card h3 { font-size: var(--gm-font-base); font-weight: 700; margin-bottom: 8px; color: var(--gm-white); }
.nc-card p { font-size: var(--gm-font-sm); color: var(--gm-white-a55); margin-bottom: 20px; line-height: 1.5; }
html.gm-dark .nc-card { background: var(--gm-white-a04); border-color: var(--gm-border-faint); }
.nc-btn-ghost { background: var(--gm-border-faint); border-color: var(--gm-white-a20); color: var(--gm-white); }
html:not(.gm-dark) .nc-btn-ghost { background: var(--gm-black-a06); border-color: var(--gm-grey-80); color: var(--gm-dark-20); }
.nc-footer-note { text-align: center; padding: 0 0 32px; color: var(--gm-white-a35); font-size: var(--gm-font-xs); }
.nc-footer-link { color: var(--gm-white-a55); }
html:not(.gm-dark) .nc-footer-link { color: var(--gm-grey-33); }
/* QA-061426-3 Bug 2 — no-club-home light-theme readability (dark-first base needs light overrides) */
html:not(.gm-dark) .nc-hero h1 { color: var(--gm-dark-20); }
html:not(.gm-dark) .nc-card h3 { color: var(--gm-dark-20); }
html:not(.gm-dark) .nc-card p { color: var(--gm-grey-33); }
html:not(.gm-dark) .nc-footer-note { color: var(--gm-grey-33); }

/* ══════════════════════════════════════════════════════════
   views/site/club-landing.php
   ══════════════════════════════════════════════════════════ */
.cl-hero { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 20px; flex-wrap: wrap; }
.cl-hero-logo { width: 100px; height: 100px; border-radius: 10px; object-fit: contain; flex-shrink: 0; }
.cl-hero-logo-ph { width: 100px; height: 100px; border-radius: 10px; background: var(--gm-orange); display: flex; align-items: center; justify-content: center; color: var(--gm-white); font-size: var(--gm-font-36px); font-weight: 700; flex-shrink: 0; }
.cl-hero-logo-default { background: var(--gm-white-a06); border: 1px solid var(--gm-white-a12); padding: 8px; }
.cl-logo-light { display: none; }
.cl-logo-dark  { display: block; }
html:not(.gm-dark) .cl-logo-light { display: block; }
html:not(.gm-dark) .cl-logo-dark  { display: none; }
.cl-hero-info { flex: 1; }
.cl-hero-info h1 { font-size: var(--gm-font-28px); font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
.cl-hero-location { font-size: var(--gm-font-sm); color: var(--gm-white-a60); margin: 0 0 14px; }
.cl-hero-cta { margin-top: 4px; }
.cl-member-chip { display: inline-flex; align-items: center; background: var(--gm-green-58-a15); color: var(--gm-green-58); border: 1px solid var(--gm-green-58-a35); padding: 3px 12px; border-radius: 20px; font-size: var(--gm-font-sm); font-weight: 600; margin-left: 10px; vertical-align: middle; }
.cl-pending-chip { display: inline-flex; align-items: center; background: var(--gm-orange-56-a15); color: var(--gm-orange-56); border: 1px solid var(--gm-orange-56-a30); padding: 4px 14px; border-radius: 20px; font-size: var(--gm-font-sm); font-weight: 600; }
.cl-leave-trigger { border-color: var(--gm-red-51-a40); color: var(--gm-red-71); }
.cl-leave-trigger:hover { border-color: var(--gm-orange); color: var(--gm-orange); background: var(--gm-red-51-a08); }
.cl-hero-info p { font-size: var(--gm-font-sm); color: var(--gm-white-a60); margin: 0; }
.cl-badge { display: inline-block; background: var(--gm-orange); color: var(--gm-white); border: none; padding: 4px 14px; border-radius: 6px; font-size: var(--gm-font-sm); font-weight: 700; margin-left: 10px; vertical-align: middle; letter-spacing: 0.04em; }
.cl-section { margin-bottom: 28px; }
.cl-section h3 { font-size: var(--gm-font-sm); font-weight: 700; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--gm-border-faint); }
.cl-meta { display: flex; gap: 28px; flex-wrap: wrap; font-size: var(--gm-font-sm); margin-bottom: 28px; padding: 14px 0; border-top: 1px solid var(--gm-white-a07); border-bottom: 1px solid var(--gm-white-a07); }
.cl-meta-item { display: flex; gap: 8px; align-items: center; color: var(--gm-white-a70); }
.cl-meta-big { font-size: var(--gm-font-base); font-weight: 600; color: var(--gm-white-a90); }
.cl-meta-big a { font-size: var(--gm-font-base); font-weight: 600; color: var(--gm-blue-68); }
.cl-meta-big strong { font-size: var(--gm-font-lg); color: var(--gm-white); }
.cl-ride-list { list-style: none; padding: 0; margin: 0; }
.cl-ride-list li { padding: 8px 0; border-bottom: 1px solid var(--gm-white-a06); font-size: var(--gm-font-sm); display: flex; justify-content: space-between; }
.cl-ride-date { color: var(--gm-white-a50); font-size: var(--gm-font-xs); }
.cl-join-box { background: var(--gm-white-a05); border: 1px solid var(--gm-white-a12); border-radius: 12px; padding: 24px 28px; }
.cl-join-box h3 { margin-bottom: 16px; }
.cl-join-state { font-size: var(--gm-font-sm); color: var(--gm-white-a75); padding: 12px 0; }
.cl-join-form .form-group label { color: var(--gm-white-a75); font-size: var(--gm-font-sm); margin-bottom: 4px; }
.cl-join-form .form-control { background: var(--gm-border-faint); border: 1px solid var(--gm-white-a18); color: var(--gm-white); border-radius: 6px; }
.cl-join-form .form-control::placeholder { color: var(--gm-white-a35); }
.cl-submit-btn { background: var(--gm-orange); border: none; color: var(--gm-white); padding: 8px 24px; border-radius: 6px; font-size: var(--gm-font-sm); font-weight: 600; cursor: pointer; }
.cl-submit-btn:hover { background: var(--gm-orange-dark); }
.cl-desc-body { font-size: var(--gm-font-sm); line-height: 1.6; }
.cl-join-btn-ghost { background: var(--gm-border-faint); border-color: var(--gm-white-a20); color: var(--gm-white); margin-left: 0; }
html:not(.gm-dark) .cl-hero-info h1 { color: var(--gm-dark-10); }
html:not(.gm-dark) .cl-hero-info p { color: var(--gm-grey-40); }
html:not(.gm-dark) .cl-hero-logo-default { background: transparent; border-color: transparent; padding: 0; }
html:not(.gm-dark) .cl-meta-item { color: var(--gm-grey-33); }
html:not(.gm-dark) .cl-join-box { background: var(--gm-blue-98-f9fafb); border-color: var(--gm-blue-91-e5e7eb); }
html:not(.gm-dark) .cl-join-state { color: var(--gm-grey-27); }
html:not(.gm-dark) .cl-join-form .form-control { background: var(--gm-white); border-color: var(--gm-blue-84); color: var(--gm-dark-07); }
html:not(.gm-dark) .cl-section h3 { border-bottom-color: var(--gm-black-a08); }
html:not(.gm-dark) .cl-ride-list li { border-bottom-color: var(--gm-black-a06); }
.cl-join-state-success { color: var(--gm-green-58); }
.cl-join-state-pending { color: var(--gm-orange-56); }
.cl-link-inherit { color: var(--gm-blue-68); text-decoration: none; }
.cl-link-inherit:hover { text-decoration: underline; }
.cl-mr-8 { margin-right: 8px; }
html:not(.gm-dark) .cl-hero-location { color: var(--gm-grey-40); }
html:not(.gm-dark) .cl-meta-big { color: var(--gm-dark-10); }
html:not(.gm-dark) .cl-meta-big strong { color: var(--gm-dark-10); }
html:not(.gm-dark) .cl-meta-big a { color: var(--gm-blue-53); }
html:not(.gm-dark) .cl-leave-trigger { color: var(--gm-orange); border-color: var(--gm-red-51-a40); }

/* ══════════════════════════════════════════════════════════
   views/rides/index-v2.php
   ══════════════════════════════════════════════════════════ */
.gm-ride-modal-dialog  { width: 90%; max-width: 1100px; min-width: 0; }
.gm-ride-modal-body    { padding: 20px; min-height: 100px; overflow: auto; max-height: calc(85vh - 140px); }
/* Club name must stay on one line ("Ft. Lauderdale Rolling Thunder") */
.gm-ride-modal-body .gm-club-col { white-space: nowrap; }
.gm-ride-loading-wrap  { padding: 30px 0; }
.gm-ride-loading-icon  { font-size: var(--gm-font-24px); animation: gm-spin 1s linear infinite; }
@keyframes gm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.gm-max-w-760          { max-width: 760px; }
.gm-pending-cta-row    { gap: 10px; align-items: center; }
.gm-members-assignment { height: 250px; overflow-y: auto; }
.gm-color-info         { color: var(--gm-teal-61); }
.rides-index #ajaxCrudDatatable { min-height: calc(100vh - 340px); }
.cl-invite-row         { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-invite-section     { margin-top: 12px; }
.cl-invite-copied      { font-size: var(--gm-font-xs); margin-left: 8px; }

/* ══════════════════════════════════════════════════════════
   views/members/index-v2.php
   ══════════════════════════════════════════════════════════ */
.gm-member-row      { display: flex; align-items: center; gap: 8px; }
.gm-member-row-info { flex: 1; min-width: 0; }
.gm-member-name-row { font-weight: 600; }
.gm-ice-badge {
    background: var(--gm-red-46-a12);
    color: var(--gm-red-46);
    font-size: var(--gm-font-10px);
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    text-decoration: none;
    border: 1px solid var(--gm-red-46-a20);
    margin-top: 3px;
    display: inline-block;
}
.gm-ice-badge:hover { background: var(--gm-red-46-a20); color: var(--gm-red-46); text-decoration: none; }

/* Miscellaneous admin pages */
.gm-admin-page-wrap    { max-width: 640px; margin: 30px auto; }
.gm-admin-img-wrap     { margin-bottom: 24px; }
.gm-admin-img-preview  { max-width: 100%; max-height: 300px; border: 1px solid var(--gm-grey-87); border-radius: 6px; }

/* ══════════════════════════════════════════════════════════
   views/bikes/_form.php  (style block moved here)
   ══════════════════════════════════════════════════════════ */
.bf-form-wrap         { max-width: 1000px; padding-bottom: 60px; }
.bf-col-photo         { padding-right: 12px; }
.bf-col-right         { padding-left: 10px; }
.bf-hero-img-hidden   { display: none; max-height: 520px; object-fit: contain; }
.bf-narrow-group      { max-width: 160px; }
.bf-doc-note          { font-size: var(--gm-font-9px); text-transform: none; font-weight: normal; letter-spacing: 0; color: var(--gm-grey-67); }

.bf-hero {
    position: relative; width: 100%; border-radius: 8px; overflow: hidden;
    background: var(--gm-dark-06); min-height: 420px; display: flex;
    align-items: center; justify-content: center;
    box-shadow: 0 6px 28px var(--gm-black-a35);
}
.bf-hero img { max-width: 100%; max-height: 520px; width: 100%; height: auto; object-fit: contain; display: block; }
.bf-hero-placeholder { color: var(--gm-white-a18); text-align: center; font-size: var(--gm-font-xs); padding: 40px; }
.bf-hero-placeholder .glyphicon { font-size: var(--gm-font-52px); display: block; margin-bottom: 10px; opacity: 0.25; }
.bf-photo-btn { position: absolute; bottom: 12px; right: 12px; }
.bf-photo-btn label { background: var(--gm-black-a65); color: var(--gm-white); border: 1px solid var(--gm-white-a25); border-radius: 6px; padding: 5px 12px; font-size: var(--gm-font-12px); font-weight: normal; cursor: pointer; margin: 0; }
.bf-photo-btn label:hover { background: var(--gm-black-a88); }
/* Styled trigger for the hidden hero-photo file input */
.bf-photo-btn-trigger {
    position: absolute; bottom: 12px; right: 12px;
    background: var(--gm-black-a65); color: var(--gm-white);
    border: 1px solid var(--gm-white-a25); border-radius: 6px;
    padding: 6px 14px; font-size: var(--gm-font-xs); cursor: pointer;
}
.bf-photo-btn-trigger:hover { background: var(--gm-black-a88); }
/* Styled trigger for document photo cells */
.bf-doc-upload-btn {
    display: block; width: 100%; margin-top: 6px;
    background: var(--gm-white-a07); border: 1px solid var(--gm-white-a20);
    border-radius: 4px; color: var(--gm-white-a80);
    font-size: var(--gm-font-12px); padding: 5px 8px; text-align: center; cursor: pointer;
}
.bf-doc-upload-btn:hover { background: var(--gm-white-a14); color: var(--gm-white); }
html:not(.gm-dark) .bf-doc-upload-btn { background: var(--gm-grey-95); border-color: var(--gm-grey-80); color: var(--gm-grey-27); }
html:not(.gm-dark) .bf-doc-upload-btn:hover { background: var(--gm-grey-89); }
.bf-fields .form-group { margin-bottom: 7px; }
.bf-fields label.control-label { font-size: var(--gm-font-xs); font-weight: 600; color: var(--gm-grey-80); margin-bottom: 4px; display: block; letter-spacing: 0; text-transform: none; }
.bf-fields .form-control { height: 30px; padding: 3px 8px; font-size: var(--gm-font-xs); border-radius: 4px; }
.bf-fields select.form-control { height: 30px; padding: 2px 8px; }
.bf-fields .help-block { display: none; }
html.gm-dark .bf-fields label.control-label { color: var(--gm-grey-73); }
html:not(.gm-dark) .bf-fields label.control-label { color: var(--gm-grey-33); }

/* Utility classes used to replace inline styles */
.gm-max-w-none      { max-width: none; }
.gm-flex-align-gap  { display: flex; align-items: center; gap: 8px; }

/* Saving overlay */
.bf-saving-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--gm-black-a55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.bf-saving-overlay.active { display: flex; }
.bf-saving-card {
    background: var(--gm-dark-panel);
    border-radius: 10px;
    padding: 24px 36px;
    text-align: center;
    color: var(--gm-white);
    font-size: var(--gm-font-sm);
    font-weight: 600;
    box-shadow: 0 8px 32px var(--gm-black-a40);
}
.bf-saving-icon { font-size: var(--gm-font-32px); margin-bottom: 10px; }
.bf-divider { font-size: var(--gm-font-9px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gm-grey-73); margin: 10px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--gm-black-a08); }
html.gm-dark .bf-divider { border-bottom-color: var(--gm-white-a07); }
.bf-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bf-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
@media(max-width:640px) { .bf-2col,.bf-3col { grid-template-columns: 1fr; } }
/* Inline label:field for grid fields once grids collapse to 1-column at ≤640px */
@media (max-width: 640px) {
    .bf-2col > .form-group,
    .bf-3col > .form-group {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 10px;
    }
    .bf-2col > .form-group > label.control-label,
    .bf-3col > .form-group > label.control-label {
        flex-shrink: 0;
        width: 106px;
        text-align: right;
        padding-top: 6px;
        font-size: var(--gm-font-sm);
        margin-bottom: 0;
    }
    .bf-2col > .form-group > .form-group,
    .bf-3col > .form-group > .form-group {
        flex: 1;
        margin-bottom: 0;
    }
}
/* ─── Bike Edit Form: Snapshot Tab Strip (mobile/tablet ≤ 991px) ──── */
.gm-bf-tabs-wrap { display: none; }   /* hidden on desktop */

@media (max-width: 991px) {
    .gm-bf-tabs-wrap {
        display: block;
        margin-bottom: 16px;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--gm-black-a12);
        background: var(--gm-white);
    }
    html.gm-dark .gm-bf-tabs-wrap {
        border-color: var(--gm-white-a10);
        background: var(--gm-white-a03);
    }

    /* Tab strip */
    .gm-bf-tab-strip {
        display: flex;
        border-bottom: 1px solid var(--gm-black-a10);
    }
    html.gm-dark .gm-bf-tab-strip { border-bottom-color: var(--gm-white-a10); }

    .gm-bf-tab {
        flex: 1;
        padding: 11px 8px;
        font-size: var(--gm-font-sm);
        font-weight: 600;
        background: var(--gm-black-a02);
        border: none;
        border-right: 1px solid var(--gm-black-a08);
        cursor: pointer;
        color: var(--gm-grey-53);
        transition: background 0.15s, color 0.15s;
    }
    .gm-bf-tab:last-child     { border-right: none; }
    .gm-bf-tab.active         { background: var(--gm-white); color: var(--gm-dark-10); box-shadow: inset 0 -3px 0 var(--gm-blue-46); }
    html.gm-dark .gm-bf-tab        { background: var(--gm-white-a03); color: var(--gm-white-a40); border-right-color: var(--gm-white-a07); }
    html.gm-dark .gm-bf-tab.active { background: var(--gm-border-faint); color: var(--gm-white); }

    /* Photo panel */
    .gm-bf-snap-photo-wrap {
        width: 100%;
        background: var(--gm-dark-07);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 160px;
        max-height: 260px;
        overflow: hidden;
    }
    .gm-bf-snap-img             { display: block; width: 100%; max-height: 260px; object-fit: cover; }
    .gm-bf-snap-img-hidden      { display: none; }
    .gm-bf-snap-placeholder     {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 160px;
        color: var(--gm-white-a30);
        font-size: var(--gm-font-sm);
    }
    .gm-bf-change-photo-btn {
        display: block;
        width: 100%;
        padding: 10px 12px;
        font-size: var(--gm-font-sm);
        font-weight: 600;
        background: transparent;
        border: none;
        border-top: 1px solid var(--gm-black-a08);
        cursor: pointer;
        color: var(--gm-blue-46);
        text-align: center;
    }
    html.gm-dark .gm-bf-change-photo-btn { border-top-color: var(--gm-border-faint); color: var(--gm-blue-63); }

    /* Details panel — thumbnail + title row */
    .gm-bf-snap-head {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--gm-black-a06);
    }
    html.gm-dark .gm-bf-snap-head { border-bottom-color: var(--gm-white-a06); }
    .gm-bf-snap-thumb-wrap {
        flex-shrink: 0;
        width: 70px; height: 54px;
        border-radius: 6px;
        overflow: hidden;
        background: var(--gm-dark-07);
    }
    .gm-bf-snap-thumb  { width: 100%; height: 100%; object-fit: cover; display: block; }
    .gm-bf-snap-title  { flex: 1; min-width: 0; padding-top: 2px; }
    .gm-bf-snap-bike   { font-size: var(--gm-font-sm); font-weight: 700; color: var(--gm-dark-10); line-height: 1.3; }
    .gm-bf-snap-nick   { font-size: var(--gm-font-xs); color: var(--gm-grey-33); font-style: italic; margin-top: 2px; }
    .gm-bf-snap-color  { font-size: var(--gm-font-12px); color: var(--gm-grey-53); margin-top: 3px; }
    html.gm-dark .gm-bf-snap-bike  { color: var(--gm-grey-93); }
    html.gm-dark .gm-bf-snap-nick  { color: var(--gm-grey-67); }
    html.gm-dark .gm-bf-snap-color { color: var(--gm-grey-60); }

    /* Info rows (insurance, registration) */
    .gm-bf-snap-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 14px;
        border-bottom: 1px solid var(--gm-black-a05);
    }
    html.gm-dark .gm-bf-snap-row    { border-bottom-color: var(--gm-white-a05); }
    .gm-bf-snap-row-icon  { font-size: var(--gm-font-sm); flex-shrink: 0; line-height: 1; }
    .gm-bf-snap-row-body  { flex: 1; min-width: 0; }
    .gm-bf-snap-row-label { display: block; font-size: var(--gm-font-10px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gm-grey-60); margin-bottom: 1px; }
    .gm-bf-snap-row-val   { color: var(--gm-dark-20); font-size: var(--gm-font-xs); line-height: 1.4; }
    html.gm-dark .gm-bf-snap-row-val { color: var(--gm-grey-80); }
    .gm-bf-snap-expired              { color: var(--gm-red-46); font-weight: 700; }
    .gm-bf-snap-row-expired .gm-bf-snap-row-val { color: var(--gm-red-46); }
    html.gm-dark .gm-bf-snap-expired { color: var(--gm-red-57); }

    /* Document photo status chips */
    .gm-bf-snap-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 9px 14px;
        border-bottom: 1px solid var(--gm-black-a05);
    }
    html.gm-dark .gm-bf-snap-chips { border-bottom-color: var(--gm-white-a05); }
    .gm-bf-snap-chip {
        font-size: var(--gm-font-12px);
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 20px;
        white-space: nowrap;
    }
    .gm-bf-snap-chip.ok   { background: var(--gm-green-42-a12);  color: var(--gm-green-32); }
    .gm-bf-snap-chip.warn { background: var(--gm-orange-41-a10);    color: var(--gm-orange-31-a04000); }
    html.gm-dark .gm-bf-snap-chip.ok   { background: var(--gm-green-49-a15); color: var(--gm-green-49); }
    html.gm-dark .gm-bf-snap-chip.warn { background: var(--gm-orange-52-a18); color: var(--gm-orange-51); }

    /* Pulled Over hint */
    .gm-bf-snap-hint { padding: 9px 14px 11px; font-size: var(--gm-font-xs); color: var(--gm-grey-40); }
    html.gm-dark .gm-bf-snap-hint { color: var(--gm-grey-60); }
    .gm-bf-snap-hint a { color: var(--gm-blue-46); font-weight: 600; text-decoration: none; }
    .gm-bf-snap-hint a:hover { text-decoration: underline; }

    /* Hide the hero photo block in bf-col-photo on mobile — it lives in the Photo tab now */
    .bf-col-photo .bf-hero { display: none; }
    .bf-col-photo .bf-section-head:first-of-type { margin-top: 4px; }
}

.bf-section-head { font-size: var(--gm-font-10px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--gm-grey-53); margin: 16px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--gm-black-a08); }
html.gm-dark .bf-section-head { border-bottom-color: var(--gm-white-a07); }
.bf-4col { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.bf-doc-thumb { max-height: 60px; border: 1px solid var(--gm-grey-87); border-radius: 3px; margin-bottom: 4px; display: block; }
html.gm-dark .bf-doc-thumb { border-color: var(--gm-white-a10); }
@media(max-width:767px) { .bf-4col { grid-template-columns: 1fr 1fr; } }

/* Bike form action row — flex so buttons wrap gracefully */
.gm-bf-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}
@media (max-width: 767px) {
    .gm-bf-form-actions .btn {
        flex: 1 1 auto;
        font-size: var(--gm-font-sm);
        padding: 8px 12px;
        height: auto;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════
   My Garage — redesigned bike cards (gmb-*)
   ══════════════════════════════════════════════════════════ */

/* 2-column grid, full content width */
.gmb-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding-bottom: 48px;
}

/* Card shell */
.gmb-card {
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: var(--gm-dark-06);
    box-shadow: 0 6px 24px var(--gm-black-a35);
    display: flex;
    flex-direction: column;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    border: 1px solid var(--gm-white-a06);
}
.gmb-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 50px var(--gm-black-a55);
}

/* Photo area — 3:2 aspect, cover (no black bars) */
.gmb-photo-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 62%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--gm-dark-11-181a22);
}
.gmb-photo {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.gmb-card:hover .gmb-photo { transform: scale(1.05); }

/* Gradient overlay */
.gmb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        var(--gm-black-a88) 0%,
        var(--gm-black-a45) 40%,
        var(--gm-black-a00)    68%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px 20px 16px;
}

/* Top-corner badges */
.gmb-primary-badge {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--gm-orange-50-f59e0b);
    color: var(--gm-orange-05);
    font-size: var(--gm-font-11px);
    font-weight: 800;
    padding: 4px 11px;
    border-radius: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.gmb-task-badge {
    position: absolute;
    top: 12px; right: 12px;
    background: var(--gm-red-51-a85);
    color: var(--gm-white);
    font-size: var(--gm-font-12px);
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.15s;
}
.gmb-task-badge:hover { background: var(--gm-orange); }

/* Bike info on photo */
.gmb-info    { pointer-events: none; }
.gmb-name    { font-size: var(--gm-font-24px); font-weight: 800; color: var(--gm-white); line-height: 1.2; text-shadow: 0 2px 10px var(--gm-black-a60); }
.gmb-nick    { font-size: var(--gm-font-sm); font-style: italic; color: var(--gm-white-a70); margin-top: 3px; }
.gmb-color-tag { display: inline-block; font-size: var(--gm-font-xs); color: var(--gm-white-a55); margin-top: 4px; background: var(--gm-white-a10); padding: 2px 8px; border-radius: 10px; }
.gmb-tag-badge { display: inline-block; font-size: var(--gm-font-12px); color: var(--gm-white-a70); margin-top: 4px; background: var(--gm-black-a40); padding: 2px 8px; border-radius: 10px; }

/* Footer bar */
.gmb-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: var(--gm-dark-06);
    border-top: 1px solid var(--gm-white-a07);
    gap: 8px;
}
.gmb-odo { font-size: var(--gm-font-xs); color: var(--gm-white-a50); display: flex; align-items: center; gap: 5px; }
.gmb-odo-none { font-style: italic; }
.gmb-footer-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gmb-inline-form { display: contents; }
.gmb-maint-link { font-size: var(--gm-font-xs); color: var(--gm-blue-68); text-decoration: none; font-weight: 600; white-space: nowrap; }
.gmb-maint-link:hover { text-decoration: underline; }
.gmb-action-btn { opacity: 0.85; }
.gmb-action-btn:hover { opacity: 1; }

/* Inline odometer update form in the footer bar (owner only) */
.gmb-odo-form { display: flex; align-items: center; gap: 6px; }
.gmb-odo-icon { color: var(--gm-white-a45); font-size: var(--gm-font-xs); flex-shrink: 0; }
.gmb-odo-input {
    width: 84px;
    height: 28px;
    padding: 3px 7px;
    font-size: var(--gm-font-xs);
    background: var(--gm-white-a07);
    border: 1px solid var(--gm-white-a18);
    color: var(--gm-blue-91-e2e8f0);
    border-radius: 5px;
    -moz-appearance: textfield;
}
.gmb-odo-input::-webkit-outer-spin-button,
.gmb-odo-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gmb-odo-input:focus { outline: none; border-color: var(--gm-blue-68); background: var(--gm-blue-68-a10); }
.gmb-odo-save { height: 28px; line-height: 1; padding: 4px 11px; font-size: var(--gm-font-12px); font-weight: 600; white-space: nowrap; }
html:not(.gm-dark) .gmb-odo-icon { color: var(--gm-grey-60); }
html:not(.gm-dark) .gmb-odo-input { background: var(--gm-white); border-color: var(--gm-blue-84); color: var(--gm-dark-17); }

/* Delete row — bottom-right corner of card, owner only */
.gmb-delete-row {
    text-align: right;
    padding: 5px 14px 10px;
    border-top: 1px solid var(--gm-white-a04);
}
.gmb-delete-btn {
    display: inline-block;
    font-size: var(--gm-font-11px);
    color: var(--gm-red-54-a50);
    text-decoration: none;
    padding: 2px 7px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.gmb-delete-btn:hover { color: var(--gm-red-54); background: var(--gm-red-54-a10); text-decoration: none; }
html:not(.gm-dark) .gmb-delete-row { border-top-color: var(--gm-black-a05); }
html:not(.gm-dark) .gmb-delete-btn { color: var(--gm-red-35-a40); }
html:not(.gm-dark) .gmb-delete-btn:hover { color: var(--gm-orange-dark); background: var(--gm-red-42-a07); }

/* Light mode overrides consolidated (was split — now unified) */
html:not(.gm-dark) .gmb-footer { background: var(--gm-blue-98-f9fafb); border-top-color: var(--gm-black-a07); }
html:not(.gm-dark) .gmb-odo { color: var(--gm-grey-53); }

/* Docs strip */
.gmb-docs {
    border-top: 1px solid var(--gm-white-a06);
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--gm-dark-05);
}
.gmb-doc-row { display: flex; gap: 10px; align-items: flex-start; }
.gmb-doc-icon { font-size: var(--gm-font-sm); flex-shrink: 0; margin-top: 1px; }
.gmb-doc-label { font-size: var(--gm-font-12px); text-transform: uppercase; letter-spacing: 0.05em; color: var(--gm-grey-53); margin-bottom: 2px; }
.gmb-doc-val { font-size: var(--gm-font-xs); color: var(--gm-white-a75); line-height: 1.4; }
.gmb-renewal-expired { color: var(--gm-red-57); font-weight: 700; letter-spacing: 0.04em; }

/* Light mode */
html:not(.gm-dark) .gmb-card { background: var(--gm-white); border-color: var(--gm-black-a08); box-shadow: 0 4px 16px var(--gm-black-a10); }
html:not(.gm-dark) .gmb-card:hover { box-shadow: 0 14px 40px var(--gm-black-a18); }
html:not(.gm-dark) .gmb-docs { background: var(--gm-grey-96-f4f4f6); border-top-color: var(--gm-black-a06); }
html:not(.gm-dark) .gmb-doc-val { color: var(--gm-grey-27); }
html:not(.gm-dark) .gmb-photo-wrap { background: var(--gm-grey-92); }

@media (max-width: 640px) {
    .gmb-grid { grid-template-columns: 1fr; }
    .gmb-name { font-size: var(--gm-font-lg); }
}

/* ── Bike form document photos: 2x2 grid ──────────────────── */
.bf-doc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}
.bf-doc-cell {
    background: var(--gm-white-a03);
    border: 1px solid var(--gm-border-faint);
    border-radius: 8px;
    padding: 12px;
}
.bf-doc-thumb-lg {
    display: block;
    width: 100%;
    max-height: 140px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid var(--gm-white-a10);
    margin-bottom: 8px;
    background: var(--gm-white-a04);
    cursor: pointer;
}
.bf-doc-empty {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gm-white-a25);
    font-size: var(--gm-font-xs);
    font-style: italic;
    border: 2px dashed var(--gm-white-a10);
    border-radius: 4px;
    margin-bottom: 8px;
}
.bf-doc-file-input { font-size: var(--gm-font-12px); }
html:not(.gm-dark) .bf-doc-cell { background: var(--gm-blue-98); border-color: var(--gm-text-light); }
html:not(.gm-dark) .bf-doc-thumb-lg { border-color: var(--gm-grey-87); background: var(--gm-white); }
html:not(.gm-dark) .bf-doc-empty { color: var(--gm-grey-73); border-color: var(--gm-grey-87); }

/* ── Ride recording / bulk member selector (rf-*) ─────────── */
.rf-wrap          { padding: 4px 8px; }
.rf-row-mb        { margin-bottom: 6px; }
.rf-section-label { font-size: var(--gm-font-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gm-grey-53); margin-bottom: 6px; }
.rf-scroll-box    { max-height: 220px; overflow-y: auto; border: 1px solid var(--gm-white-a10); border-radius: 4px; }
.rf-scroll-box-rsvp { background: var(--gm-green-58-a04); }
.rf-member-table  { margin: 0; font-size: var(--gm-font-sm); }
.rf-td-check      { width: 32px; padding: 5px 8px; }
.rf-td-name       { padding: 5px 8px; }
.rf-td-meta       { padding: 5px 8px; color: var(--gm-grey-53); font-size: var(--gm-font-xs); }
.rf-search-mb     { margin-bottom: 4px; }
.rf-rsvp-mb       { margin-bottom: 10px; }

/* ── Members grid — ICE badge link ─────────────────────────── */
.gm-col-ice-link {
    background: var(--gm-red-46-a12);
    color: var(--gm-red-46);
    font-size: var(--gm-font-xs);
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid var(--gm-red-46-a20);
}
.gm-col-ice-link:hover { color: var(--gm-red-46); text-decoration: none; }

/* ── Members grid — Role assignment dropdown (DF1) ─────────────── */
.gm-role-select {
    font-size: var(--gm-font-xs);
    padding: 2px 4px;
    border: 1px solid var(--gm-grey-80);
    border-radius: 3px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    max-width: 120px;
}
.gm-role-select:disabled { opacity: 0.5; cursor: wait; }

/* ── Sprint 24.5 — Bike Traffic Light ──────────────────────── */
.bike-traffic-light {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid var(--gm-white-a15);
    flex-shrink: 0;
}
.bike-traffic-light[data-status="green"]  { background: var(--gm-green-41); }
.bike-traffic-light[data-status="yellow"] { background: var(--gm-amber-51); }
.bike-traffic-light[data-status="red"]    { background: var(--gm-red-54); }
html:not(.gm-dark) .bike-traffic-light   { border-color: var(--gm-black-a12); }

/* Traffic light row on garage cards */
.gmb-traffic-light-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px 2px;
}
.gmb-traffic-light-label {
    font-size: var(--gm-font-xs);
    color: var(--gm-grey-67);
    letter-spacing: 0.02em;
}
html:not(.gm-dark) .gmb-traffic-light-label { color: var(--gm-grey-47); }

/* Inline mileage update on garage cards */
.bike-card-mileage {
    padding: 6px 14px 8px;
    border-top: 1px solid var(--gm-white-a05);
}
html:not(.gm-dark) .bike-card-mileage { border-top-color: var(--gm-black-a06); }
.bike-mileage-label {
    font-size: var(--gm-font-11px);
    color: var(--gm-grey-67);
    display: block;
    margin-bottom: 4px;
    letter-spacing: 0.03em;
}
html:not(.gm-dark) .bike-mileage-label { color: var(--gm-grey-47); }
.bike-mileage-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bike-mileage-input {
    width: 100px;
    min-width: 70px;
    font-size: var(--gm-font-xs);
}
.bike-mileage-status {
    font-size: var(--gm-font-12px);
    min-height: 1em;
}
.bike-mileage-status-ok    { color: var(--gm-green-41); }
.bike-mileage-status-error { color: var(--gm-red-54); }

/* ── Sprint 24.5 — Bike Log Tab ─────────────────────────────── */
.gm-log-filter-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.gm-log-filter-pill {
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid var(--gm-white-a12);
    background: transparent;
    color: var(--gm-grey-73);
    cursor: pointer;
    font-size: var(--gm-font-xs);
    text-decoration: none;
    display: inline-block;
    transition: background 0.15s, color 0.15s;
}
.gm-log-filter-pill:hover,
.gm-log-filter-pill.active {
    background: var(--gm-orange);
    border-color: var(--gm-orange);
    color: var(--gm-white);
    text-decoration: none;
}
html:not(.gm-dark) .gm-log-filter-pill {
    border-color: var(--gm-black-a12);
    color: var(--gm-grey-33);
}
html:not(.gm-dark) .gm-log-filter-pill:hover,
html:not(.gm-dark) .gm-log-filter-pill.active {
    background: var(--gm-orange);
    color: var(--gm-white);
}

/* Log entry type icons */
.gm-log-type-mileage { color: var(--gm-blue-60); }
.gm-log-type-service { color: var(--gm-orange-50-f59e0b); }

/* Log actions column */
.gm-log-actions-cell { white-space: nowrap; width: 1%; }
.gm-inline-form      { display: inline; }

/* ── Sprint 24.5 — Service Tasks Tab ───────────────────────── */
.gm-task-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}
.gm-task-status-dot.green  { background: var(--gm-green-41); }
.gm-task-status-dot.yellow { background: var(--gm-amber-51); }
.gm-task-status-dot.red    { background: var(--gm-red-54); }

/* ── Sprint 24.5 — Bike view header traffic light ───────────── */
.gm-bike-traffic-light-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.gm-bike-traffic-light-text {
    font-size: var(--gm-font-xs);
    color: var(--gm-grey-67);
}
html:not(.gm-dark) .gm-bike-traffic-light-text { color: var(--gm-grey-40); }

/* ── Sprint 24.5 — Bike view tab navigation ─────────────────── */
.gm-bike-tabs {
    margin-top: 16px;
    margin-bottom: 0;
}
.gm-bike-tab-content {
    border: 1px solid var(--gm-white-a07);
    border-top: none;
    padding: 20px 16px;
    border-radius: 0 0 8px 8px;
}
html:not(.gm-dark) .gm-bike-tab-content {
    border-color: var(--gm-black-a10);
}
.gm-section-actions-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    gap: 8px;
}

/* ══════════════════════════════════════════════════════════
   Sprint 24.5 — Bike view page: mobile UX (≤767px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Hero: stack photo above info ──────────────────────── */
    .gm-bike-hero {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }
    .gm-bike-photo-wrap {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        max-height: 220px;
        border-radius: 10px;
    }
    .gm-bike-title {
        font-size: var(--gm-font-clamp-32px);
        line-height: 1.2;
    }
    .gm-bike-traffic-light-text { font-size: var(--gm-font-sm); }
    .gm-bike-stat-label          { font-size: var(--gm-font-xs); }
    .gm-bike-stat-value          { font-size: var(--gm-font-18px); }
    .gm-view-odo-input           { height: 38px; font-size: var(--gm-font-sm); width: 130px; }
    .gm-bike-actions-row .btn    { font-size: var(--gm-font-sm); padding: 8px 18px; }

    /* ── Tab strip: full-width equal columns ────────────────── */
    .gm-bike-tabs         { display: flex; }
    .gm-bike-tabs > li    { float: none; flex: 1; }
    .gm-bike-tabs > li > a {
        text-align: center;
        padding: 10px 6px;
        font-size: var(--gm-font-xs);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Tab content: tighter padding ──────────────────────── */
    .gm-bike-tab-content { padding: 14px 10px; }

    /* ── Section actions: full-width buttons ────────────────── */
    .gm-section-actions-row {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .gm-section-actions-row .btn {
        flex: 1;
        min-width: 120px;
        font-size: var(--gm-font-sm);
        padding: 8px 12px;
        height: auto;
        white-space: normal;
    }

    /* ── Service Tasks: table → card list ──────────────────── */
    .gm-task-table         { display: block; }
    .gm-task-table thead   { display: none; }
    .gm-task-table tbody   { display: block; }
    .gm-task-table tr {
        display: block;
        background: var(--gm-white-a03);
        border: 1px solid var(--gm-white-a09);
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 12px 14px;
    }
    html:not(.gm-dark) .gm-task-table tr {
        background: var(--gm-white);
        border-color: var(--gm-black-a10);
        box-shadow: 0 1px 4px var(--gm-black-a07);
    }
    .gm-task-table td {
        display: block;
        padding: 2px 0;
        border: none;
        font-size: var(--gm-font-sm);
        line-height: 1.4;
    }
    /* Task name — prominent, full line */
    .gm-task-table td:nth-child(1) {
        font-size: var(--gm-font-sm);
        font-weight: 600;
        padding-bottom: 6px;
    }
    /* Interval / Last Serviced / Next Due — small metadata */
    .gm-task-table td:nth-child(2),
    .gm-task-table td:nth-child(3),
    .gm-task-table td:nth-child(4) {
        font-size: var(--gm-font-xs);
        color: var(--gm-grey-53);
        padding: 1px 0;
    }
    html:not(.gm-dark) .gm-task-table td:nth-child(2),
    html:not(.gm-dark) .gm-task-table td:nth-child(3),
    html:not(.gm-dark) .gm-task-table td:nth-child(4) { color: var(--gm-grey-40); }
    .gm-task-table td:nth-child(2)::before { content: 'Interval: '; font-weight: 600; }
    .gm-task-table td:nth-child(3)::before { content: 'Last: '; font-weight: 600; }
    .gm-task-table td:nth-child(4)::before { content: 'Next: '; font-weight: 600; }
    /* Actions — touch-friendly bottom row */
    .gm-task-table td:nth-child(5) {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--gm-white-a07);
    }
    html:not(.gm-dark) .gm-task-table td:nth-child(5) {
        border-top-color: var(--gm-black-a08);
    }
    .gm-task-table .gm-action-flex { gap: 8px; }
    .gm-task-table .btn-xs {
        font-size: var(--gm-font-xs);
        padding: 7px 14px;
        height: auto;
        line-height: 1.3;
    }

    /* ── Log: table → flex cards ────────────────────────────── */
    .gm-log-table        { display: block; }
    .gm-log-table thead  { display: none; }
    .gm-log-table tbody  { display: block; }
    .gm-log-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        background: var(--gm-white-a02);
        border: 1px solid var(--gm-white-a07);
        border-radius: 10px;
        margin-bottom: 8px;
        padding: 10px 14px;
        gap: 0;
    }
    html:not(.gm-dark) .gm-log-table tr {
        background: var(--gm-white);
        border-color: var(--gm-black-a09);
        box-shadow: 0 1px 3px var(--gm-black-a06);
    }
    .gm-log-table td {
        display: block;
        border: none;
        padding: 0;
        font-size: var(--gm-font-sm);
    }
    /* Type icon — left edge of header row */
    .gm-log-table td:nth-child(2) {
        order: 0;
        flex: 0 0 auto;
        font-size: var(--gm-font-sm);
        margin-right: 6px;
        line-height: 1.5;
    }
    /* Date — fills rest of header row */
    .gm-log-table td:nth-child(1) {
        order: 1;
        flex: 1 1 auto;
        font-size: var(--gm-font-xs);
        color: var(--gm-grey-53);
        line-height: 1.5;
    }
    /* Description — full-width second line */
    .gm-log-table td:nth-child(3) {
        order: 2;
        flex: 0 0 100%;
        font-size: var(--gm-font-sm);
        padding: 3px 0 2px;
    }
    /* Mileage — start of third line */
    .gm-log-table td:nth-child(4) {
        order: 3;
        flex: 0 0 auto;
        font-size: var(--gm-font-xs);
        color: var(--gm-grey-53);
        margin-right: 12px;
    }
    /* Notes — rest of third line */
    .gm-log-table td:nth-child(5) {
        order: 4;
        flex: 1 1 auto;
        font-size: var(--gm-font-xs);
        color: var(--gm-grey-53);
    }
    /* Actions — full-width bottom row */
    .gm-log-table td:nth-child(6) {
        order: 5;
        flex: 0 0 100%;
        padding-top: 4px;
        padding-bottom: 10px;
    }

    /* ── Documents: table → flex cards ─────────────────────── */
    .gm-doc-table        { display: block; }
    .gm-doc-table thead  { display: none; }
    .gm-doc-table tbody  { display: block; }
    .gm-doc-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: var(--gm-white-a02);
        border: 1px solid var(--gm-white-a07);
        border-radius: 10px;
        margin-bottom: 8px;
        padding: 10px 14px;
        gap: 4px 8px;
    }
    html:not(.gm-dark) .gm-doc-table tr {
        background: var(--gm-white);
        border-color: var(--gm-black-a09);
        box-shadow: 0 1px 3px var(--gm-black-a06);
    }
    .gm-doc-table td {
        display: block;
        border: none;
        padding: 0;
        font-size: var(--gm-font-sm);
    }
    /* Label — main text, row 1 left */
    .gm-doc-table td:nth-child(1) {
        order: 0;
        flex: 1 1 auto;
        font-weight: 600;
        font-size: var(--gm-font-sm);
    }
    /* Download button — row 1 right */
    .gm-doc-table td:nth-child(4) {
        order: 1;
        flex: 0 0 auto;
    }
    .gm-doc-table td:nth-child(4) .btn {
        font-size: var(--gm-font-xs);
        padding: 6px 12px;
        height: auto;
    }
    /* Type — row 2 left */
    .gm-doc-table td:nth-child(2) {
        order: 2;
        flex: 0 0 auto;
        font-size: var(--gm-font-xs);
        color: var(--gm-grey-53);
    }
    /* Expiry — row 2 right */
    .gm-doc-table td:nth-child(3) {
        order: 3;
        flex: 1 1 auto;
        font-size: var(--gm-font-xs);
    }

    /* ── Log filter pills — touch-sized ─────────────────────── */
    .gm-log-filter-pill { padding: 7px 14px; font-size: var(--gm-font-sm); }

    /* ── Service completion form — stacked fields ───────────── */
    .gm-form-flex-row { gap: 8px; }
    .gm-form-flex-row > * {
        flex: 0 0 100% !important;
        min-width: 0 !important;
        width: 100%;
    }
    .gm-form-flex-row .form-control,
    .gm-form-flex-row select { font-size: var(--gm-font-sm); height: 40px; }

}

/* ── Help page stub ──────────────────────────────────────── */
.gm-help-page     { max-width: 680px; margin: 0 auto; padding: 40px 20px; }
.gm-help-hero     { text-align: center; margin-bottom: 32px; }
.gm-help-title    { font-size: var(--gm-font-32px); font-weight: 700; margin-bottom: 8px; }
.gm-help-subtitle { font-size: var(--gm-font-sm); color: var(--gm-grey-53); }
.gm-help-card     { background: var(--gm-white-a04); border: 1px solid var(--gm-white-a09);
                    border-radius: 12px; padding: 36px 32px; text-align: center; }
html:not(.gm-dark) .gm-help-card { background: var(--gm-white); border-color: var(--gm-black-a10);
                                    box-shadow: 0 2px 12px var(--gm-black-a07); }
.gm-help-card-icon  { font-size: var(--gm-font-48px); margin-bottom: 16px; }
.gm-help-card-title { font-size: var(--gm-font-22px); font-weight: 700; margin-bottom: 12px; }
.gm-help-card-body  { font-size: var(--gm-font-sm); color: var(--gm-grey-67); margin-bottom: 10px; line-height: 1.6; }
html:not(.gm-dark) .gm-help-card-body { color: var(--gm-grey-33); }
.gm-help-btn-row    { margin-top: 24px; }

/* ── Pillion member badge ─────────────────────────────────── */
.gm-pillion-member-badge {
    display: inline-block;
    font-size: var(--gm-font-10px);
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--gm-blue-46);
    color: var(--gm-white);
    vertical-align: middle;
    margin-left: 3px;
    letter-spacing: 0.02em;
}
html.gm-dark .gm-pillion-member-badge {
    background: var(--gm-blue-58);
    color: var(--gm-white);
}

/* ── Pillion type toggle (RSVP + walk-up forms) ──────────── */
.gm-pillion-type-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: var(--gm-font-sm);
}
.gm-pillion-type-row label {
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}
.gm-pillion-miles-note {
    font-size: var(--gm-font-xs);
    color: var(--gm-green-54);
    margin-top: 4px;
}
html.gm-dark .gm-pillion-miles-note {
    color: var(--gm-green-65-7dcc7d);
}

/* ══════════════════════════════════════════════════════════
   Sprint 24.5 — Feature A: Pending Join Requests (dashboard)
   views/site/dashboard.php
   ══════════════════════════════════════════════════════════ */
.gm-dash-pjr-wrap          { margin: 0 0 24px; }
.gm-dash-section-heading   { font-size: var(--gm-font-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gm-grey-53); margin: 16px 0 8px; }
.gm-dash-club-btns         { display: flex; gap: 6px; flex-wrap: wrap; }
.gm-dash-admin-cta-row     { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.gm-dash-ice-prompt        { margin-bottom: 12px; font-size: var(--gm-font-sm); }
.gm-dash-pjr-heading       { font-size: var(--gm-font-sm); font-weight: 700; margin-bottom: 12px; color: var(--gm-dark-10); }
.gm-dash-pjr-row           { display: flex; align-items: center; background: var(--gm-white); border: 1px solid var(--gm-black-a08); border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; gap: 12px; }
.gm-dash-pjr-info          { flex: 1; min-width: 0; }
.gm-dash-pjr-clubname      { font-weight: 600; font-size: var(--gm-font-sm); color: var(--gm-dark-10); }
.gm-dash-pjr-date          { font-size: var(--gm-font-12px); color: var(--gm-grey-53); margin-top: 2px; }
.gm-dash-pjr-actions       { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
html.gm-dark .gm-dash-pjr-heading  { color: var(--gm-grey-91); }
html.gm-dark .gm-dash-pjr-row      { background: var(--gm-dark-11-1a1c20); border-color: var(--gm-border-faint); }
html.gm-dark .gm-dash-pjr-clubname { color: var(--gm-grey-91); }
html.gm-dark .gm-dash-pjr-date     { color: var(--gm-grey-67); }

/* ══════════════════════════════════════════════════════════
   Sprint 24.5 — Feature B: Club Admin Dashboard
   views/site/club-dashboard.php
   ══════════════════════════════════════════════════════════ */

/* Page frame */
.gm-cdash-wrap             { max-width: 960px; margin: 0 auto; }
.gm-cdash-page-hdr         { display: flex; align-items: baseline; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.gm-cdash-heading          { font-size: var(--gm-font-24px); font-weight: 800; margin: 0; color: var(--gm-dark-10); }
.gm-cdash-club-pill        { background: var(--gm-red-51-a10); color: var(--gm-orange); border-radius: 20px; padding: 3px 12px; font-size: var(--gm-font-xs); font-weight: 700; white-space: nowrap; }

/* ─── Action metric tiles ─────────────────────────────── */
.gm-cdash-metric-grid      { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-bottom: 32px; }
.gm-cdash-metric-card      { display: flex; flex-direction: column; align-items: center; text-align: center;
                              background: var(--gm-white); border: 2px solid var(--gm-black-a07); border-radius: 12px;
                              padding: 24px 20px 20px; text-decoration: none; color: inherit;
                              transition: border-color 0.15s, box-shadow 0.15s; }
.gm-cdash-metric-card:hover { border-color: var(--gm-black-a18); box-shadow: 0 4px 16px var(--gm-black-a07); text-decoration: none; color: inherit; }
.gm-cdash-metric-card.gm-cdash-metric-alert { border-color: var(--gm-orange-50-f59e0b); background: var(--gm-orange-97); }
.gm-cdash-metric-card.gm-cdash-metric-alert:hover { border-color: var(--gm-orange-44); box-shadow: 0 4px 20px var(--gm-orange-50-a18); }
.gm-cdash-metric-icon      { font-size: var(--gm-font-28px); margin-bottom: 10px; }
.gm-cdash-metric-num       { font-size: var(--gm-font-56px); font-weight: 900; line-height: 1; margin-bottom: 6px; color: var(--gm-grey-80); }
.gm-cdash-metric-num.gm-cdash-metric-num-alert { color: var(--gm-orange-44); }
.gm-cdash-metric-num.gm-cdash-metric-num-zero  { color: var(--gm-grey-82); }
.gm-cdash-metric-label     { font-size: var(--gm-font-xs); font-weight: 600; color: var(--gm-grey-33); margin-bottom: 12px; }
.gm-cdash-metric-cta       { font-size: var(--gm-font-12px); font-weight: 700; color: var(--gm-grey-67); text-transform: uppercase; letter-spacing: 0.06em; }
.gm-cdash-metric-card.gm-cdash-metric-alert .gm-cdash-metric-cta { color: var(--gm-orange-44); }

/* ─── Quick action tiles ──────────────────────────────── */
.gm-cdash-upcoming-wrap    { background: var(--gm-card-bg, var(--gm-white)); border: 1px solid var(--gm-border, var(--gm-blue-91-e5e7eb)); border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; }
.gm-cdash-upcoming-heading { font-size: var(--gm-font-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gm-grey-53); margin-bottom: 8px; }
.gm-cdash-upcoming-count   { font-size: var(--gm-font-base); margin-bottom: 12px; }
.gm-cdash-upcoming-empty   { font-size: var(--gm-font-sm); color: var(--gm-grey-53); margin-bottom: 12px; }
.gm-cdash-qa-heading       { font-size: var(--gm-font-11px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gm-grey-67); margin-bottom: 10px; }
.gm-cdash-qa-grid          { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-bottom: 36px; }
.gm-cdash-qa-tile          { display: flex; flex-direction: column; align-items: center; justify-content: center;
                              background: var(--gm-white); border: 1px solid var(--gm-black-a08); border-radius: 10px;
                              padding: 18px 10px 16px; text-decoration: none; color: var(--gm-dark-20);
                              text-align: center; transition: background 0.12s, border-color 0.12s, transform 0.1s; }
.gm-cdash-qa-tile:hover    { background: var(--gm-grey-97-f7f7f7); border-color: var(--gm-black-a16); color: var(--gm-dark-07); text-decoration: none; transform: translateY(-1px); }
.gm-cdash-qa-icon          { font-size: var(--gm-font-24px); margin-bottom: 8px; display: block; }
.gm-cdash-qa-label         { font-size: var(--gm-font-12px); font-weight: 600; line-height: 1.3; }

/* ─── Section divider ─────────────────────────────────── */
.gm-cdash-section-divider  { border: none; border-top: 1px solid var(--gm-black-a08); margin: 4px 0 36px; }

/* ─── Modal header ────────────────────────────────────── */
.gm-cdash-modal-hdr        { border-bottom: 1px solid var(--gm-black-a08); }
.gm-cdash-modal-empty      { color: var(--gm-grey-60); font-size: var(--gm-font-sm); padding: 8px 0; font-style: italic; }

/* ─── Detail sections (used inside modals) ────────────── */
.gm-cdash-section          { margin-bottom: 0; }
.gm-cdash-section-title    { font-size: var(--gm-font-sm); font-weight: 700; margin-bottom: 16px; padding-bottom: 8px;
                              border-bottom: 2px solid var(--gm-black-a08); color: var(--gm-dark-20); }
.gm-cdash-event-row        { display: flex; align-items: center; justify-content: space-between;
                              padding: 12px 0; border-bottom: 1px solid var(--gm-black-a06); gap: 12px; }
.gm-cdash-event-info       { flex: 1; min-width: 0; }
.gm-cdash-event-name       { font-weight: 600; font-size: var(--gm-font-sm); color: var(--gm-dark-10); }
.gm-cdash-event-date       { font-size: var(--gm-font-12px); color: var(--gm-grey-53); margin-top: 2px; }
.gm-cdash-empty            { color: var(--gm-grey-60); font-size: var(--gm-font-sm); padding: 12px 0; font-style: italic; }
.gm-cdash-req-table        { margin-top: 4px; }

/* ─── Dark mode ───────────────────────────────────────── */
html.gm-dark .gm-cdash-heading              { color: var(--gm-grey-91); }
html.gm-dark .gm-cdash-club-pill            { background: var(--gm-red-51-a18); color: var(--gm-red-71); }
html.gm-dark .gm-cdash-metric-card          { background: var(--gm-dark-11-1a1c20); border-color: var(--gm-border-faint); }
html.gm-dark .gm-cdash-metric-card:hover    { border-color: var(--gm-white-a18); }
html.gm-dark .gm-cdash-metric-card.gm-cdash-metric-alert { background: var(--gm-dark-10-231e10); border-color: var(--gm-orange-44); }
html.gm-dark .gm-cdash-metric-label         { color: var(--gm-grey-67); }
html.gm-dark .gm-cdash-upcoming-wrap        { background: var(--gm-dark-11-1a1c20); border-color: var(--gm-border-faint); }
html.gm-dark .gm-cdash-upcoming-count       { color: var(--gm-grey-91); }
html.gm-dark .gm-cdash-qa-tile              { background: var(--gm-dark-11-1a1c20); border-color: var(--gm-border-faint); color: var(--gm-grey-82); }
html.gm-dark .gm-cdash-qa-tile:hover        { background: var(--gm-dark-15); color: var(--gm-grey-94); }
html.gm-dark .gm-cdash-section-divider      { border-top-color: var(--gm-border-faint); }
html.gm-dark .gm-cdash-section-title        { color: var(--gm-grey-80); border-bottom-color: var(--gm-white-a10); }
html.gm-dark .gm-cdash-event-row            { border-bottom-color: var(--gm-white-a07); }
html.gm-dark .gm-cdash-event-name           { color: var(--gm-grey-91); }
html.gm-dark .gm-cdash-event-date           { color: var(--gm-grey-67); }
html.gm-dark .gm-cdash-empty                { color: var(--gm-grey-47); }
html.gm-dark .gm-cdash-qa-heading           { color: var(--gm-grey-40); }

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
    .gm-cdash-metric-grid { grid-template-columns: 1fr; }
    .gm-cdash-qa-grid     { grid-template-columns: repeat(3,1fr); }
    .gm-cdash-metric-num  { font-size: var(--gm-font-42px); }
}
@media (max-width: 480px) {
    .gm-cdash-qa-grid     { grid-template-columns: repeat(2,1fr); }
}

/* ==========================================================================
   Sprint 24.6 — Ad Slot Formats (banner / square / tall)
   Page-agnostic. Reusable. Day/night aware.
   ========================================================================== */

/* ─── Base container ─────────────────────────────────────── */
.gmb-ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
    transition: opacity 0.15s ease;
}

/* ─── Image ──────────────────────────────────────────────── */
.gmb-ad-slot__img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ─── Link wrapper ───────────────────────────────────────── */
.gmb-ad-slot__link {
    display: block;
    text-decoration: none;
    outline-offset: 2px;
}
.gmb-ad-slot__link:focus {
    outline: 2px solid var(--gm-orange);
}

/* ─── Placeholder (no image configured) ─────────────────── */
.gmb-ad-slot__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--gm-grey-60);
    font-style: italic;
    font-size: var(--gm-font-xs);
    background: var(--gm-grey-98-fafafa);
    border: 1px dashed var(--gm-grey-87);
    border-radius: 4px;
    padding: 12px 20px;
    box-sizing: border-box;
}

/* ─── Banner: full content-column width ─────────────────── */
.gmb-ad-slot--banner {
    width: 100%;
    min-height: 100px;
}
.gmb-ad-slot--banner .gmb-ad-slot__img {
    width: 100%;
}
.gmb-ad-slot--banner .gmb-ad-slot__placeholder {
    min-height: 100px;
}

/* ─── Square: 300×250, centered ─────────────────────────── */
.gmb-ad-slot--square {
    width: 300px;
    min-height: 250px;
    margin: 16px auto;
}
.gmb-ad-slot--square .gmb-ad-slot__placeholder {
    width: 300px;
    min-height: 250px;
}

/* ─── Tall: 300×600, hidden on mobile ───────────────────── */
.gmb-ad-slot--tall {
    width: 300px;
    min-height: 600px;
}
.gmb-ad-slot--tall .gmb-ad-slot__placeholder {
    width: 300px;
    min-height: 600px;
}

/* ─── Night mode ─────────────────────────────────────────── */
html.gm-dark .gmb-ad-slot__placeholder {
    background: var(--gm-dark-10);
    border-color: var(--gm-dark-20);
    color: var(--gm-grey-40);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .gmb-ad-slot--tall { display: none; }
    /* QA-E4: keep the run-of-site banner an inline strip on phones/small tablets.
       Never sticky/fixed, never taller than a banner. The legacy RCTG fallback is a
       portrait book cover; width:100% blew it up to full-screen and shoved content
       left. Drive the image by height instead so it can never overflow the viewport. */
    .gmb-ad-slot,
    .gmb-ad-slot--banner {
        position: static;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    .gmb-ad-slot__link { max-width: 100%; }
    .gmb-ad-slot--banner { min-height: 0; max-height: 120px; }
    .gmb-ad-slot--banner .gmb-ad-slot__img {
        width: auto;
        max-width: 100%;
        max-height: 120px;
        height: auto;
        margin: 0 auto;
    }
}
@media (max-width: 480px) {
    .gmb-ad-slot--banner { min-height: 0; max-height: 90px; }
    .gmb-ad-slot--banner .gmb-ad-slot__img { max-height: 90px; }
    .gmb-ad-slot--banner .gmb-ad-slot__placeholder { min-height: 60px; }
}

/* ==========================================================================
   Sprint 24.8 — Premier Sponsor Slot Treatment
   Checkered ribbon top/bottom, clean logo space center.
   Day/night aware. House-ad variant omits the ribbon.
   ========================================================================== */

.gmb-premier-slot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-bottom: 12px;
    border-radius: 4px;
    overflow: hidden;
}

.gmb-premier-slot__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.gmb-premier-slot__link:hover,
.gmb-premier-slot__link:focus {
    text-decoration: none;
    opacity: 0.92;
}

/* Checkered ribbon — 8px tall, CSS-only, no image asset */
.gmb-premier-slot__ribbon {
    height: 8px;
    background-image: repeating-linear-gradient(
        90deg,
        var(--gm-dark-10) 0px,
        var(--gm-dark-10) 8px,
        var(--gm-white) 8px,
        var(--gm-white) 16px
    );
    flex-shrink: 0;
}

.gmb-premier-slot__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: var(--gm-white);
    gap: 6px;
}

.gmb-premier-slot__logo {
    max-height: 60px;
    width: auto;
    display: block;
}

.gmb-premier-slot__tagline {
    font-style: italic;
    font-size: var(--gm-font-12px);
    color: var(--gm-grey-40);
    margin: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.gmb-premier-slot__placeholder {
    display: block;
    padding: 8px 12px;
    font-size: var(--gm-font-11px);
    color: var(--gm-grey-60);
    text-align: center;
    border: 1px dashed var(--gm-grey-80);
    border-radius: 4px;
    margin-bottom: 12px;
}

/* House-ad variant — clean container, no ribbon */
.gmb-premier-slot--house .gmb-premier-slot__ribbon {
    display: none;
}
.gmb-premier-slot--house .gmb-premier-slot__brand {
    background: transparent;
    padding: 8px;
}

/* Miles — full modal width */
.gmb-premier-slot--miles {
    width: 100%;
}

/* Garage — full content-column width */
.gmb-premier-slot--garage {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Certificate — see _miles_certificate.php (mpdf inline styles only, not this class) */

/* ── Night mode ─────────────────────────────────────────────── */
.night-mode .gmb-premier-slot__brand {
    background: var(--gm-dark-16);
}
.night-mode .gmb-premier-slot__tagline {
    color: var(--gm-grey-67);
}
.night-mode .gmb-premier-slot__placeholder {
    color: var(--gm-grey-40);
    border-color: var(--gm-grey-27);
}
.night-mode .gmb-premier-slot--house .gmb-premier-slot__brand {
    background: transparent;
}
.night-mode .gmb-premier-slot__ribbon {
    background-image: repeating-linear-gradient(
        90deg,
        var(--gm-grey-96) 0px,
        var(--gm-grey-96) 8px,
        var(--gm-dark-20) 8px,
        var(--gm-dark-20) 16px
    );
}

/* ── Ad management utility classes ─────────────────────────── */
.gm-ad-preview-thumb {
    max-height: 40px;
    max-width: 120px;
    vertical-align: middle;
    border: 1px solid var(--gm-grey-87);
    border-radius: 3px;
}
.gm-row-muted td {
    opacity: 0.5;
}

/* Sprint 24.8 — Dashboard quick club access + officer pending requests */
.gm-dash-club-row        { margin: 0 0 20px; }
.gm-dash-club-card       { display: flex; align-items: center; background: var(--gm-white); border: 1px solid var(--gm-black-a08); border-radius: 8px; padding: 12px 16px; gap: 14px; }
.gm-dash-club-logo       { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.gm-dash-club-avatar     { width: 48px; height: 48px; border-radius: 6px; background: var(--gm-blue-27-252c63); color: var(--gm-white); font-size: var(--gm-font-22px); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gm-dash-club-info       { flex: 1; min-width: 0; }
.gm-dash-club-name       { font-size: var(--gm-font-sm); font-weight: 600; color: var(--gm-dark-10); text-decoration: none; display: block; }
.gm-dash-club-name:hover { text-decoration: underline; color: var(--gm-blue-27-252c63); }
.gm-dash-club-loc        { font-size: var(--gm-font-12px); color: var(--gm-grey-53); margin-top: 2px; }
.gm-dash-officer-pjr     { display: flex; align-items: center; gap: 10px; background: var(--gm-amber-96); border: 1px solid var(--gm-amber-51-f6c90e); border-radius: 8px; padding: 10px 16px; margin: 0 0 20px; font-size: var(--gm-font-sm); }
.gm-dash-officer-pjr-icon { font-size: var(--gm-font-18px); flex-shrink: 0; }
.gm-dash-officer-pjr-btn { margin-left: auto; flex-shrink: 0; }

html.gm-dark .gm-dash-club-card      { background: var(--gm-dark-11-1a1c20); border-color: var(--gm-border-faint); }
html.gm-dark .gm-dash-club-name      { color: var(--gm-grey-91); }
html.gm-dark .gm-dash-club-name:hover{ color: var(--gm-blue-72); }
html.gm-dark .gm-dash-club-loc       { color: var(--gm-grey-67); }
html.gm-dark .gm-dash-officer-pjr    { background: var(--gm-amber-08); border-color: var(--gm-amber-24); color: var(--gm-grey-91); }

/* =============================================
   Legal Pages
   ============================================= */
.gm-legal-wrap          { max-width: 860px; margin: 0 auto; padding: 24px 20px 48px; font-size: var(--gm-font-sm); line-height: 1.7; color: var(--gm-dark-20); }
.gm-legal-wrap h1       { font-size: var(--gm-font-26px); font-weight: 700; margin-bottom: 8px; }
.gm-legal-wrap h2       { font-size: var(--gm-font-18px); font-weight: 600; margin-top: 28px; margin-bottom: 8px; }
.gm-legal-wrap p,
.gm-legal-wrap li       { margin-bottom: 10px; }
.gm-legal-wrap hr       { border: none; border-top: 1px solid var(--gm-grey-87); margin: 24px 0; }
.gm-legal-wrap blockquote { background: var(--gm-amber-94); border-left: 4px solid var(--gm-orange-47); padding: 12px 16px; margin: 16px 0; font-size: var(--gm-font-sm); }
html.gm-dark .gm-legal-wrap { color: var(--gm-text-light); }
html.gm-dark .gm-legal-wrap blockquote { background: var(--gm-amber-08-2a2400); border-left-color: var(--gm-orange-41); }

/* ── ToS Accept Page ──────────────────────────────────────────────────────── */
.gm-tos-accept-wrap         { max-width: 860px; margin: 0 auto; padding: 24px 20px 48px; }
.gm-tos-accept-heading      { font-size: var(--gm-font-22px); font-weight: 700; margin-bottom: 6px; }
.gm-tos-accept-sub          { color: var(--gm-grey-40); margin-bottom: 20px; }
.gm-tos-accept-content      { background: var(--gm-grey-98); border: 1px solid var(--gm-grey-87); border-radius: 6px; padding: 20px 24px; max-height: 480px; overflow-y: auto; font-size: var(--gm-font-sm); line-height: 1.7; color: var(--gm-dark-20); margin-bottom: 20px; }
.gm-tos-accept-content h1   { font-size: var(--gm-font-lg); font-weight: 700; margin-bottom: 8px; }
.gm-tos-accept-content h2   { font-size: var(--gm-font-sm); font-weight: 600; margin-top: 20px; margin-bottom: 6px; }
.gm-tos-accept-content p,
.gm-tos-accept-content li   { margin-bottom: 8px; }
.gm-tos-accept-form         { max-width: 540px; }
.gm-tos-accept-form .gm-login-submit { width: 100%; margin-top: 8px; }
html.gm-dark .gm-tos-accept-sub     { color: var(--gm-grey-67); }
html.gm-dark .gm-tos-accept-content { background: var(--gm-dark-12-1e1e1e); border-color: var(--gm-dark-20); color: var(--gm-text-light); }


/* ── Sprint 27: Soft-Delete Inactive Rider Styling ───────────────────────── */
.gm-rider-inactive td          { color: var(--gm-grey-60); }
.gm-rider-inactive             { opacity: 0.55; }

/* Status filter tabs on member roster */
.gm-status-tabs                { margin-bottom: 10px; }
.gm-status-tabs .btn           { margin-right: 4px; }

/* Inline form (reactivate button) */
.gm-inline-form                { display: inline; }

/* Friendly error page (Rule 87) */
.gm-error-page      { text-align: center; padding: 80px 20px 60px; max-width: 560px; margin: 0 auto; }
.gm-error-icon      { font-size: var(--gm-font-64px); color: var(--gm-grey-75); margin-bottom: 20px; }
.gm-error-code      { font-size: var(--gm-font-80px); font-weight: 700; color: var(--gm-blue-24); margin: 0 0 8px; line-height: 1; }
.gm-error-headline  { font-size: var(--gm-font-24px); color: var(--gm-blue-24); margin: 0 0 16px; }
.gm-error-detail    { font-size: var(--gm-font-sm); color: var(--gm-grey-40); margin-bottom: 32px; }
.gm-error-btn       { font-size: var(--gm-font-sm); padding: 12px 32px; }

/* ══════════════════════════════════════════════════════════
   views/site/club-landing.php — A3 Club Profile (UX-16)
   ══════════════════════════════════════════════════════════ */
/* Club hero — full-width centered header */
.cl-club-hero             { text-align: center; padding: 14px 0 12px; margin-bottom: 8px; }
.cl-club-hero-logo        { width: 90px; height: 90px; object-fit: contain; border-radius: 10px; display: block; margin: 0 auto 10px; background: var(--gm-white-a05); }
.cl-club-hero-name        { font-size: var(--gm-font-30px); font-weight: 700; margin: 0 0 6px; }
.cl-club-hero-meta        { color: var(--gm-grey-67); font-size: var(--gm-font-xs); margin: 0; }
html:not(.gm-dark) .cl-club-hero-meta { color: var(--gm-grey-40); }
html:not(.gm-dark) .cl-club-hero-logo { background: var(--gm-black-a04); }
/* Ride list with optional event thumbnail */
.cl-ride-row              { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--gm-white-a06); }
.cl-ride-row:last-child   { border-bottom: none; }
.cl-ride-thumb-wrap       { flex-shrink: 0; }
.cl-ride-thumb            { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; display: block; }
.cl-ride-body             { flex: 1; min-width: 0; }
.cl-ride-title            { font-size: var(--gm-font-sm); font-weight: 600; margin-bottom: 2px; }
.cl-ride-date             { font-size: var(--gm-font-12px); margin-bottom: 4px; }
.cl-rsvp-btn              { margin-top: 4px; }
/* Keep old classes for compatibility */
.cl-profile-section       { margin-bottom: 14px; }
.cl-profile-badges        { margin-bottom: 14px; }
.cl-profile-cta           { margin-top: 20px; }
.cl-badge-vis             { background: var(--gm-white-a10); }
.cl-social-row            { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-social-btn            { font-size: var(--gm-font-11px); }
/* ── DF1 RO-3: Officer display ───────────────────────────────── */
.cl-officer-section       { margin-bottom: 14px; }
.cl-officer-heading       { font-size: var(--gm-font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 6px; opacity: 0.7; }
.cl-officer-list          { list-style: none; padding: 0; margin: 0; }
.cl-officer-item          { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: var(--gm-font-xs); }
.cl-officer-role-badge    { font-size: var(--gm-font-10px); padding: 1px 5px; border-radius: 3px; background: var(--gm-white-a10); opacity: 0.7; }
.cl-rides-panel           { background: var(--gm-white-a04); border: 1px solid var(--gm-white-a10); border-radius: 8px; padding: 16px; }
.cl-rides-heading         { margin-top: 0; font-size: var(--gm-font-sm); font-weight: 600; border-bottom: 1px solid var(--gm-border-faint); padding-bottom: 8px; margin-bottom: 12px; }
.cl-rides-list            { list-style: none; padding: 0; margin: 0; }
.gm-group-link-row        { border: 1px solid var(--gm-border-faint); border-radius: 6px; padding: 8px; background: var(--gm-white-a02); }

/* ── Club landing — two-column layout ───────────────────────────────── */
/* Left column: identity block */
.cl-id-logo               { display: block; max-width: 220px; max-height: 220px; width: 100%; object-fit: contain; border-radius: 14px; margin: 0 auto 14px; background: var(--gm-white-a05); padding: 6px; }
.cl-id-logo-default       { background: var(--gm-white-a06); border: 1px solid var(--gm-white-a12); }
.cl-logo-light            { display: none; }
.cl-logo-dark             { display: block; }
html:not(.gm-dark) .cl-logo-light { display: block; }
html:not(.gm-dark) .cl-logo-dark  { display: none; }
.cl-id-name               { font-size: var(--gm-font-24px); font-weight: 700; text-align: center; margin: 0 0 6px; line-height: 1.3; }
.cl-id-meta               { text-align: center; color: var(--gm-grey-67); font-size: var(--gm-font-xs); margin: 0 0 16px; }
html:not(.gm-dark) .cl-id-meta { color: var(--gm-grey-40); }
.cl-btn-row               { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }

/* Right column: ride cards list */
.cl-rides-col             { display: flex; flex-direction: column; gap: 14px; }
.cl-rides-col .gm-event-card { margin: 0; }
.cl-past-pill             { position: absolute; top: 8px; left: 8px; background: var(--gm-black-a55); color: var(--gm-grey-80); font-size: var(--gm-font-9px); font-weight: 700; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
/* Global nav invite button */
.gm-nav-invite-btn        { background: var(--gm-btn-green) !important; color: var(--gm-white) !important; border-radius: 4px; font-weight: 600; }
.gm-nav-invite-btn:hover,
.gm-nav-invite-btn:focus  { background: var(--gm-btn-green-hover) !important; color: var(--gm-white) !important; }

/* ══════════════════════════════════════════════════════════
   Trial countdown banner (UX-12 / G2)
   ══════════════════════════════════════════════════════════ */
.gm-trial-banner {
    background: var(--gm-amber-51);
    color: var(--gm-dark-15-212529);
    padding: 10px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--gm-font-sm);
    font-weight: 500;
}

/* Sprint 40 — calm (non-urgent) variant shown for the whole trial and for
   the cancelled-but-still-active state. Amber base is reserved for the final week. */
.gm-trial-banner-info {
    background: var(--gm-blue-52-1f6feb);
    color: var(--gm-white);
}
/* High-specificity selector (a.class scoped under the banner) so the dark text
   wins over the dark-theme link-color rule — otherwise the label renders
   white-on-white and the button looks like an empty box. */
.gm-trial-banner a.gm-trial-banner-btn,
.gm-trial-banner a.gm-trial-banner-btn:link,
.gm-trial-banner a.gm-trial-banner-btn:hover,
.gm-trial-banner a.gm-trial-banner-btn:focus,
.gm-trial-banner a.gm-trial-banner-btn:visited {
    background: var(--gm-white);
    /* !important: a dark-theme link rule overrides only the at-rest color
       (background applies, text goes white-on-white). Pin it decisively. */
    color: var(--gm-dark-15-212529) !important;
    border: 1px solid var(--gm-black-a15);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.gm-trial-banner a.gm-trial-banner-btn:hover,
.gm-trial-banner a.gm-trial-banner-btn:focus {
    background: var(--gm-blue-94-e9eef5);
}
.gm-trial-banner-info a.gm-trial-banner-btn {
    border-color: var(--gm-white-a45);
}

/* Small inline "Manage subscription" link — color:inherit so it matches the
   banner's own text colour (dark on amber, white on blue) and beats the
   dark-theme link rule. */
.gm-trial-banner-manage,
.gm-trial-banner-manage:link,
.gm-trial-banner-manage:visited,
.gm-trial-banner-manage:hover,
.gm-trial-banner-manage:focus {
    color: inherit !important;
    text-decoration: underline;
    margin-left: 10px;
    font-size: var(--gm-font-xs);
    font-weight: 600;
    opacity: 0.9;
}

/* ─── Sprint 41 — Member Invite / Import screen ──────────────────────── */
.gm-import-wrap { max-width: 720px; margin: 20px auto; }
.gm-import-banner {
    background: var(--gm-blue-97-f0f7ff);
    border: 1px solid var(--gm-blue-90-cfe2ff);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 12px 0 20px;
    color: var(--gm-blue-31-1a4d80);
}
.gm-import-banner .glyphicon { margin-right: 6px; }
.gm-import-tabs { margin-bottom: 0; }
.gm-import-tabcontent {
    border: 1px solid var(--gm-grey-87);
    border-top: 0;
    padding: 18px;
    border-radius: 0 0 6px 6px;
    margin-bottom: 18px;
}
.gm-import-textarea { resize: vertical; font-family: monospace; }
.gm-import-file { display: block; margin: 8px 0; }
.gm-import-help { font-weight: 600; }
.gm-import-actions { display: flex; gap: 10px; }
.gm-import-preview-count { font-size: var(--gm-font-lg); margin-bottom: 12px; }
.gm-import-skip { color: var(--gm-orange-39-8a6d3b); font-size: var(--gm-font-sm); margin-left: 8px; }
.gm-import-skip-detail { color: var(--gm-orange-39-8a6d3b); font-size: var(--gm-font-sm); margin-top: 12px; }
.gm-import-list {
    list-style: none;
    padding: 12px 16px;
    margin: 0 0 18px;
    border: 1px solid var(--gm-grey-87);
    border-radius: 6px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--gm-grey-98-fafafa);
}
.gm-import-list li { padding: 2px 0; font-family: monospace; }
.gm-import-diagnostic-reason { margin: 8px 0; }
.gm-import-diagnostic-cols { font-size: var(--gm-font-sm); margin: 6px 0 0; word-break: break-word; }
.gm-import-diagnostic-label { font-weight: 600; }

/* Dark-mode parity */
html.gm-dark .gm-import-banner {
    background: var(--gm-blue-16-16263a);
    border-color: var(--gm-blue-30-244a73);
    color: var(--gm-blue-78-9ec5f0);
}
html.gm-dark .gm-import-tabcontent { border-color: var(--gm-white-a12); }
html.gm-dark .gm-import-list {
    background: var(--gm-dark-14);
    border-color: var(--gm-white-a12);
    color: var(--gm-grey-90-e6e6e6);
}
html.gm-dark .gm-import-skip,
html.gm-dark .gm-import-skip-detail { color: var(--gm-orange-67-d4b483); }

/* ─── Sprint 41 — Getting-started checklist embedded on the Club Dashboard ── */
.gm-cdash-welcome {
    background: var(--gm-card-bg, var(--gm-white));
    border: 1px solid var(--gm-border, var(--gm-blue-91-e5e7eb));
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.gm-cdash-welcome-hd { margin-bottom: 12px; }
.gm-cdash-welcome-title { display: block; font-size: var(--gm-font-lg); font-weight: 700; }
.gm-cdash-welcome-sub { display: block; font-size: var(--gm-font-sm); color: var(--gm-grey-46); }
html.gm-dark .gm-cdash-welcome { background: var(--gm-dark-11-1a1c20); border-color: var(--gm-border-faint); }
html.gm-dark .gm-cdash-welcome-sub { color: var(--gm-white-a55); }

/* QA-061426-2 — onboarding complete: congratulate and retire the checklist */
.gm-cdash-setupdone {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--gm-green-58-a08);
    border: 1px solid var(--gm-green-58-a25);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.gm-cdash-setupdone-emoji { font-size: 28px; line-height: 1; }
.gm-cdash-setupdone-body { flex: 1 1 240px; }
.gm-cdash-setupdone-title { display: block; font-size: var(--gm-font-lg); font-weight: 700; color: var(--gm-green-24); }
.gm-cdash-setupdone-sub { display: block; font-size: var(--gm-font-sm); color: var(--gm-grey-46); margin-top: 2px; }
.gm-cdash-setupdone-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gm-cdash-setupdone-btn,
.gm-cdash-setupdone-btn:link,
.gm-cdash-setupdone-btn:visited {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: var(--gm-font-sm);
    font-weight: 600;
    text-decoration: none;
    background: var(--gm-green-29-15803d);
    color: var(--gm-white);
    border: 1px solid var(--gm-green-29-15803d);
}
.gm-cdash-setupdone-btn:hover { background: var(--gm-green-24); border-color: var(--gm-green-24); }
.gm-cdash-setupdone-btn-ghost,
.gm-cdash-setupdone-btn-ghost:link,
.gm-cdash-setupdone-btn-ghost:visited {
    background: transparent;
    color: var(--gm-green-24);
}
.gm-cdash-setupdone-btn-ghost:hover { background: var(--gm-green-58-a12); color: var(--gm-green-24); }
html.gm-dark .gm-cdash-setupdone { background: var(--gm-green-58-a08); border-color: var(--gm-green-58-a25); }
html.gm-dark .gm-cdash-setupdone-title { color: var(--gm-green-58); }
html.gm-dark .gm-cdash-setupdone-sub { color: var(--gm-white-a55); }
html.gm-dark .gm-cdash-setupdone-btn,
html.gm-dark .gm-cdash-setupdone-btn:link,
html.gm-dark .gm-cdash-setupdone-btn:visited { background: var(--gm-green-45); border-color: var(--gm-green-45); color: var(--gm-dark-11-1a1c20); }
html.gm-dark .gm-cdash-setupdone-btn:hover { background: var(--gm-green-58); border-color: var(--gm-green-58); }
html.gm-dark .gm-cdash-setupdone-btn-ghost,
html.gm-dark .gm-cdash-setupdone-btn-ghost:link,
html.gm-dark .gm-cdash-setupdone-btn-ghost:visited { background: transparent; color: var(--gm-green-58); }
html.gm-dark .gm-cdash-setupdone-btn-ghost:hover { background: var(--gm-green-58-a12); color: var(--gm-green-58); }

/* The checklist was authored for a dark surface; make it legible on light surfaces too. */
html:not(.gm-dark) .gm-checklist-box  { border-color: var(--gm-blue-91-e5e7eb); }
html:not(.gm-dark) .gm-checklist-item { border-bottom-color: var(--gm-grey-93); }
html:not(.gm-dark) .gm-checklist-label-todo { color: var(--gm-dark-17); }

/* Readiness widget — light-theme overrides (base is authored for dark). */
/* Dark-mode card surface for the rider-dashboard wrapper — mirrors the club card's
   html.gm-dark override (the --gm-card-bg fallback is white, so this is required
   or the card renders white-on-dark with near-invisible light text). */
html.gm-dark .gm-dash-readiness              { background: var(--gm-dark-11-1a1c20); border-color: var(--gm-border-faint); }
html:not(.gm-dark) .gm-readiness-head        { color: var(--gm-dark-10); }
html:not(.gm-dark) .gm-readiness-pct         { color: var(--gm-dark-17); }
html:not(.gm-dark) .gm-readiness-sub,
html:not(.gm-dark) .gm-readiness-meta        { color: var(--gm-grey-46); }
html:not(.gm-dark) .gm-readiness-arc-track   { stroke: var(--gm-grey-89); }
html:not(.gm-dark) .gm-readiness-needle,
html:not(.gm-dark) .gm-readiness-hub         { background: var(--gm-dark-17); }
html:not(.gm-dark) .gm-readiness-complete .gm-readiness-arc-fill { stroke: var(--gm-green-41); }
html:not(.gm-dark) .gm-readiness-complete .gm-readiness-needle,
html:not(.gm-dark) .gm-readiness-complete .gm-readiness-hub      { background: var(--gm-green-41); }
html:not(.gm-dark) .gm-readiness-complete .gm-readiness-pct      { color: var(--gm-green-24); }
html:not(.gm-dark) .gm-readiness-tile        { border-color: var(--gm-blue-91-e5e7eb); }
html:not(.gm-dark) a.gm-readiness-tile:hover { background: var(--gm-grey-96); }
html:not(.gm-dark) .gm-readiness-tile-on .gm-readiness-tile-ic   { border-color: var(--gm-green-41); background: var(--gm-green-41); }
html:not(.gm-dark) .gm-readiness-tile-on .gm-readiness-tile-lbl  { color: var(--gm-dark-17); }
html:not(.gm-dark) .gm-readiness-tile-check  { background: var(--gm-green-41); border-color: var(--gm-white); }
html:not(.gm-dark) .gm-readiness-tile-done   { color: var(--gm-green-24); }
html:not(.gm-dark) .gm-readiness-congrats        { background: var(--gm-green-42-a12); border-color: var(--gm-green-58-a35); }
html:not(.gm-dark) .gm-readiness-congrats-title  { color: var(--gm-green-24); }
html:not(.gm-dark) .gm-readiness-congrats-sub    { color: var(--gm-grey-46); }
html:not(.gm-dark) .gm-readiness-congrats-btn    { background: var(--gm-btn-green); color: var(--gm-white); }
html:not(.gm-dark) .gm-readiness-congrats-btn-ghost { background: transparent; color: var(--gm-btn-green); border-color: var(--gm-btn-green); }

/* ─── Sprint 39 close: inline-style removals (replace style="" in app views) ─── */
.gm-tabs-flush  { margin-bottom: 0; border-bottom: 0; }
.gm-invite-hint { margin-bottom: 14px; }

/* ─── Sprint 39 close: branded buttons (red primary + steel-blue secondary) ─── */
.btn.btn-primary,
a.btn-primary           { background-color: var(--gm-orange); border-color: var(--gm-orange-dark); color: var(--gm-white); }
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
a.btn-primary:hover,
a.btn-primary:focus     { background-color: var(--gm-orange-dark); border-color: var(--gm-red-34); color: var(--gm-white); }
.btn.btn-default,
a.btn-default           { background-color: var(--gm-white); border-color: var(--gm-blue-46); color: var(--gm-blue-46); }
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
a.btn-default:hover,
a.btn-default:focus     { background-color: var(--gm-blue-46); border-color: var(--gm-blue-46); color: var(--gm-white); }