/* Legacy pastel palette retained for reference.
:root {
    --color-primary: #8EC6F7;
    --color-primary-strong: #6BB3E6;
    --color-primary-soft: #B5D0FF;
    --color-secondary: #F7B7A3;
    --color-secondary-strong: #F39E86;
    --color-secondary-soft: #FFCAB3;
    --color-success: #B9FBC0;
    --color-success-strong: #96E0A0;
    --color-success-soft: #DAFFDF;
    --color-warning: #FFF3B0;
    /* Playlist player components */
    .playlist-slider,
    .amplitude-song-slider {
        --slider-progress: 0%;
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 8px;
        border-radius: 9999px;
        background: linear-gradient(to right,
                rgba(127, 90, 240, 0.85) 0%,
                rgba(127, 90, 240, 0.85) var(--slider-progress),
                rgba(127, 90, 240, 0.18) var(--slider-progress),
                rgba(127, 90, 240, 0.18) 100%);
        box-shadow: inset 0 1px 2px rgba(15, 40, 64, 0.15);
        cursor: pointer;
        transition: box-shadow 0.2s ease;
    }

    .playlist-slider:focus-visible,
    .amplitude-song-slider:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(127, 90, 240, 0.35);
    }

    .playlist-slider::-webkit-slider-thumb,
    .amplitude-song-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        background: #ffffff;
        cursor: pointer;
        border-radius: 50%;
        border: 1px solid rgba(15, 40, 64, 0.12);
        box-shadow: 0 2px 6px rgba(15, 40, 64, 0.25);
        transition: transform 0.15s ease;
    }

    .playlist-slider::-moz-range-thumb,
    .amplitude-song-slider::-moz-range-thumb {
        width: 16px;
        height: 16px;
        background: #ffffff;
        cursor: pointer;
        border-radius: 50%;
        border: 1px solid rgba(15, 40, 64, 0.12);
        box-shadow: 0 2px 6px rgba(15, 40, 64, 0.25);
        transition: transform 0.15s ease;
    }

    .playlist-slider::-webkit-slider-thumb:hover,
    .amplitude-song-slider::-webkit-slider-thumb:hover,
    .playlist-slider::-moz-range-thumb:hover,
    .amplitude-song-slider::-moz-range-thumb:hover {
        transform: scale(1.1);
    }

    .playlist-time-bar {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        font-variant-numeric: tabular-nums;
        color: rgba(15, 40, 64, 0.7);
        opacity: 1;
        margin-bottom: 1.5rem;
    }

    .playlist-control-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.25rem;
    }

    .playlist-control-circle {
        width: 48px;
        height: 48px;
        border-radius: 9999px;
        background: #ffffff;
        border: 1px solid rgba(15, 40, 64, 0.08);
        box-shadow: 0 6px 14px rgba(15, 40, 64, 0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .playlist-control-circle--primary {
        width: 64px;
        height: 64px;
        box-shadow: 0 10px 18px rgba(15, 40, 64, 0.2);
    }

    .playlist-control-circle:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 20px rgba(15, 40, 64, 0.22);
    }

    .playlist-control-circle:active {
        transform: translateY(1px);
        box-shadow: inset 0 4px 10px rgba(15, 40, 64, 0.16);
    }

    .playlist-control-circle:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(127, 90, 240, 0.35);
    }

    .playlist-control-icon {
        font-size: 1.8rem;
        color: var(--color-primary-strong, #5F3FEB);
        transition: color 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    }

    .playlist-control-icon--primary {
        font-size: 2.8rem;
    }

    .playlist-control-circle:hover .playlist-control-icon {
        color: var(--color-primary-bright, #8E7BFF);
        transform: scale(1.08);
        filter: drop-shadow(0 4px 12px rgba(95, 63, 235, 0.35));
    }

    .amplitude-pause[hidden] {
        display: none !important;
    }

    .playlist-buffering-message {
        margin-top: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.9rem;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .playlist-buffering-spinner {
        font-size: 1.2rem;
        animation: playlist-spin 0.9s linear infinite;
    }

    [data-player-buffering]:not([hidden]) {
        opacity: 1 !important;
    }

    .playlist-song-item {
        transition: background-color 0.2s ease, border-color 0.2s ease;
        border: 1px solid transparent;
    }

    .playlist-song-item:hover {
        background: rgba(127, 90, 240, 0.08);
    }

    .playlist-song-item.amplitude-active-song-container {
        background: rgba(127, 90, 240, 0.15);
        border-left: 4px solid var(--color-primary, #7F5AF0);
    }

    .playlist-song-item.amplitude-active-song-container .amplitude-playing-icon {
        opacity: 1 !important;
        animation: playlist-eq-pulse 1.4s ease-in-out infinite;
    }

    .amplitude-playing-icon {
        font-size: 1.25rem;
        color: var(--color-primary-strong, #5F3FEB);
    }

    .playlist-player-panel {
        padding: 1.75rem 2.25rem;
        background: #ffffff;
        border-top: 1px solid rgba(15, 40, 64, 0.06);
    }

    .playlist-nowplaying {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        margin-bottom: 1.5rem;
    }

    .playlist-nowplaying-title {
        color: var(--color-primary-strong, #5F3FEB);
        font-weight: 700;
        font-size: 1.15rem;
        letter-spacing: 0.01em;
    }

    .playlist-nowplaying-artist {
        color: rgba(15, 40, 64, 0.68);
        font-size: 0.9rem;
    }

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

    @keyframes playlist-eq-pulse {
        0%, 100% {
            transform: translateY(0);
            opacity: 0.9;
        }
        50% {
            transform: translateY(-3px);
            opacity: 0.6;
        }
    }

    .playlist-song-item.amplitude-active-song-container .playlist-song-indicator {
        display: inline-flex;
        animation: playlist-eq-pulse 1s ease-in-out infinite;
    }

    @keyframes playlist-eq-pulse {
        0%, 100% {
            transform: translateY(0);
            opacity: 0.85;
        }
        50% {
            transform: translateY(-2px);
            opacity: 0.55;
        }
    }

/*
Accent colors for easy reference:
    --pastel-coral: var(--color-accent-coral);
    --pastel-sage: var(--color-accent-sage);
    --pastel-rose: var(--color-accent-rose);
    --pastel-cream: var(--color-accent-cream);
    --pastel-aqua: var(--color-accent-aqua);
*/

/* Modern purple palette retained for reference.
:root {
    --color-primary: #7F5AF0;
    --color-primary-strong: #5F3FEB;
    --color-primary-soft: #B9A6FF;
    --color-secondary: #00E5FF;
    --color-secondary-strong: #00B8E6;
    --color-secondary-soft: #7EF0FF;
    --color-success: #2CB67D;
    --color-success-strong: #219B69;
    --color-success-soft: #6DF4B3;
    --color-warning: #F7C948;
    --color-warning-strong: #F2A61D;
    --color-warning-soft: #FFE69C;
    --color-error: #EF4565;
    --color-error-strong: #D72F4D;
    --color-error-soft: #FF8AA2;
    --color-info: #4FB5FF;
    --color-info-strong: #1F8AF5;
    --color-info-soft: #9AD6FF;
    --color-dark: #0B1228;
    --color-dark-elevated: #111B33;
    --color-dark-soft: #1F2A4A;
    --color-light: #FFFFFF;
    --color-background: #FBFCFF;
    --color-surface: #FFFFFF;
    --color-surface-elevated: #EEF2FF;
    --color-border: #D7DEF5;
    --color-border-strong: #AEB8E3;
    --color-shadow-tint: rgba(127, 90, 240, 0.18);
    --color-shadow-glow: rgba(95, 72, 210, 0.28);
    --color-hover: #9C82FF;
    --color-disabled: #E1E5F5;
    --color-disabled-border: #C5CBE3;
    --color-disabled-text: #9CA3C0;
    --color-muted: #5C6384;
    --color-text: #1E2745;
    --color-text-strong: #0B1020;
    --color-text-inverse: #FFFFFF;
    --color-text-subtle: #4F587A;
    --panel-glow-opacity: 0.26;

    --color-accent-coral: #FF6F91;
    --color-accent-purple: #C084FC;
    --color-accent-teal: #2DD4BF;
    --color-accent-rose: #FF80AB;
    --color-accent-cream: #FFE8A3;
    --color-accent-aqua: #38BDF8;
    --color-accent-sage: #4ADE80;
    --color-accent-red: #FF4D6D;

    --hover-primary: var(--color-hover);
    --hover-secondary: #05C8E0;
    --hover-success: #31D897;
    --hover-warning: #F4B732;
    --hover-error: #FF5C7D;
    --hover-info: #3AA8F7;
    --hover-dark: #27345C;
    --hover-light: #E4E9FF;
    --hover-red: #FF4664;
    --hover-purple: #A855F7;
    --hover-teal: #22B8A6;
    --hover-coral: #FF517F;
    --hover-sage: #3BBB64;
    --hover-rose: #FF5FAA;
    --hover-cream: #FFD866;
    --hover-aqua: #1FB6FF;

    --text-on-primary: var(--color-text-inverse);
    --text-on-secondary: var(--color-dark);
    --text-on-success: #063421;
    --text-on-warning: #4F3503;
    --text-on-error: var(--color-text-inverse);
    --text-on-spectrum: var(--color-text-inverse);
    --text-on-prism: var(--color-dark);

    --shadow-btn-default: 0 10px 24px rgba(15, 30, 70, 0.12);
    --shadow-btn-active: 0 4px 14px rgba(15, 30, 70, 0.18);
    --shadow-elevation-glow: 0 18px 36px rgba(127, 90, 240, 0.16), 0 10px 26px rgba(0, 229, 255, 0.12);

    --btn-surface-primary: var(--color-primary);
    --btn-surface-secondary: var(--color-secondary);
    --btn-surface-success: var(--color-success);
    --btn-surface-spectrum: var(--color-surface-elevated);
    --btn-surface-prism: var(--color-light);
    --btn-disabled-surface: var(--color-disabled);

    --panel-glow-gradient-rainbow: linear-gradient(45deg,
        var(--color-primary),
        var(--color-info),
        var(--color-success),
        var(--color-warning),
        var(--color-secondary),
        var(--color-error),
        var(--color-primary)
    );
    --panel-glow-gradient-primary: linear-gradient(45deg,
        rgba(127, 90, 240, 0.55),
        rgba(98, 60, 226, 0.4),
        rgba(127, 90, 240, 0.6),
        rgba(155, 140, 255, 0.45)
    );
    --panel-glow-gradient-secondary: linear-gradient(45deg,
        rgba(0, 229, 255, 0.55),
        rgba(0, 205, 255, 0.4),
        rgba(126, 240, 255, 0.6),
        rgba(0, 229, 255, 0.55)
    );
    --panel-glow-gradient-success: linear-gradient(45deg,
        rgba(44, 182, 125, 0.6),
        rgba(31, 154, 100, 0.38),
        rgba(109, 244, 179, 0.55),
        rgba(44, 182, 125, 0.6)
    );
    --panel-glow-gradient-warning: linear-gradient(45deg,
        rgba(247, 201, 72, 0.6),
        rgba(242, 166, 29, 0.4),
        rgba(255, 230, 156, 0.55),
        rgba(247, 201, 72, 0.6)
    );
    --panel-glow-gradient-info: linear-gradient(45deg,
        rgba(79, 181, 255, 0.6),
        rgba(31, 138, 245, 0.38),
        rgba(154, 214, 255, 0.55),
        rgba(79, 181, 255, 0.6)
    );
    --panel-glow-gradient-error: linear-gradient(45deg,
        rgba(239, 69, 101, 0.6),
        rgba(215, 47, 77, 0.4),
        rgba(255, 138, 162, 0.55),
        rgba(239, 69, 101, 0.6)
    );
    --btn-glow-primary-gradient: linear-gradient(45deg,
        var(--color-primary-strong),
        var(--color-primary),
        var(--color-secondary),
        var(--color-primary-soft),
        var(--color-secondary-soft),
        var(--color-primary)
    );
    --btn-glow-secondary-gradient: linear-gradient(45deg,
        var(--color-secondary),
        var(--color-secondary-strong),
        var(--color-info),
        var(--color-secondary-soft),
        var(--color-info-soft),
        var(--color-secondary)
    );
    --btn-glow-success-gradient: linear-gradient(45deg,
        var(--color-success),
        var(--color-success-strong),
        var(--color-success-soft),
        var(--color-secondary),
        var(--color-success),
        var(--color-success-soft)
    );
    --btn-glow-spectrum-gradient: linear-gradient(45deg,
        #ff007a,
        #ff8c00,
        #ffee00,
        #48ff00,
        #00ffd5,
        #00a0ff,
        #7a00ff,
        #ff00c8,
        #ff007a
    );
    --btn-glow-prism-gradient: linear-gradient(45deg,
        var(--color-primary),
        var(--color-info),
        var(--color-success),
        var(--color-warning),
        var(--color-secondary),
        var(--color-error),
        var(--color-primary)
    );
    --btn-outlined-base-gradient: linear-gradient(45deg,
        var(--color-primary),
        var(--color-info),
        var(--color-success),
        var(--color-warning),
        var(--color-secondary),
        var(--color-error),
        var(--color-primary)
    );

    --gradient-info-transparent: rgba(79, 181, 255, 0);

    --pastel-primary: var(--color-primary);
    --pastel-secondary: var(--color-secondary);
    --pastel-success: var(--color-success);
    --pastel-warning: var(--color-warning);
    --pastel-error: var(--color-error);
    --pastel-info: var(--color-info);
    --pastel-dark: var(--color-dark);
    --pastel-light: var(--color-light);
    --pastel-text: var(--color-text);
    --pastel-border: var(--color-border);
    --pastel-shadow: var(--color-shadow-tint);
    --pastel-hover: var(--color-hover);
    --pastel-background: var(--color-background);
    --pastel-disabled: var(--color-disabled);
    --pastel-muted: var(--color-muted);
    --pastel-red: var(--color-accent-red);
    --pastel-purple: var(--color-accent-purple);
    --pastel-teal: var(--color-accent-teal);
    --pastel-coral: var(--color-accent-coral);
    --pastel-sage: var(--color-accent-sage);
    --pastel-rose: var(--color-accent-rose);
    --pastel-cream: var(--color-accent-cream);
    --pastel-aqua: var(--color-accent-aqua);
}
*/

:root {
    /* 2026 palette: the light lilac/pink look - brand purple with pink as its partner, lilac
       surfaces and borders - plus mint, sky, sunshine and coral as accents. Coral is the
       "hot" accent (btn-glow-hot, one per screen). The older palettes above are kept for
       reference. */
    --color-primary: #8B3DFF;
    --color-primary-strong: #6D28D9;
    --color-primary-soft: #C4B5FD;
    --color-secondary: #FF7CCB;
    --color-secondary-strong: #F152B1;
    --color-secondary-soft: #FFB0E2;
    --color-success: #2BD4A4;
    --color-success-strong: #12A27A;
    --color-success-soft: #A7F0D9;
    --color-warning: #FF9F5A;
    --color-warning-strong: #E07B2E;
    --color-warning-soft: #FFD9B8;
    --color-error: #EF4565;
    --color-error-strong: #D02E4F;
    --color-error-soft: #FFB3C1;
    --color-info: #4CC9F0;
    --color-info-strong: #1E9BC4;
    --color-info-soft: #B5E9F9;
    --color-dark: #17112B;
    --color-dark-elevated: #251C47;
    --color-dark-soft: #33295C;
    --color-light: #FFFFFF;
    --color-background: #FCFAFF;
    --color-surface: #FFFFFF;
    --color-surface-elevated: #F7EFFA;
    --color-border: #ECDDF9;
    --color-border-strong: #D6BDEE;
    --color-shadow-tint: rgba(139, 61, 255, 0.12);
    --color-shadow-glow: rgba(139, 61, 255, 0.22);
    --color-hover: #A26BFF;
    --color-disabled: #EEE6F7;
    --color-disabled-border: #DCCDEB;
    --color-disabled-text: #A196B8;
    --color-muted: #6E5C7D;
    --color-text: #2A1B33;
    --color-text-strong: #160C1D;
    --color-text-inverse: #FFFFFF;
    --color-text-subtle: #5B4A68;
    --panel-glow-opacity: 0.28;
    --shadow-card: 0 1px 2px rgba(91, 33, 182, 0.05), 0 12px 30px -18px rgba(91, 33, 182, 0.22);
    --shadow-card-hover: 0 2px 4px rgba(91, 33, 182, 0.06), 0 18px 36px -18px rgba(91, 33, 182, 0.3);
    --glow-brand: linear-gradient(45deg, #8B3DFF, #FF6B57, #FFD23F, #2BD4A4, #4CC9F0, #8B3DFF);
    --glow-warm: linear-gradient(45deg, #FF6B57, #FF9F5A, #FFD23F, #FF6B57);
    /* Coral for "hot" buttons and small coral surfaces. Bright, so it carries dark text
       (--color-hot-text, about 6.5:1); white on a coral this light would be unreadable. */
    --color-hot: #FF8A5C;
    --color-hot-strong: #F2683E;
    --color-hot-gradient: linear-gradient(135deg, #FF7A59 0%, #FFA668 100%);
    --color-hot-text: #2A1B33;

    --color-accent-coral: #FF8C69;
    --color-accent-purple: #D4A5FF;
    --color-accent-teal: #58E3D8;
    --color-accent-rose: #FF94C2;
    --color-accent-cream: #FFF2D7;
    --color-accent-aqua: #7FE7FF;
    --color-accent-sage: #9BE6C6;
    --color-accent-red: #FF5D7D;

    --hover-primary: var(--color-hover);
    --hover-secondary: #FF65BD;
    --hover-success: #3FD3A2;
    --hover-warning: #FF9A86;
    --hover-error: #FF537D;
    --hover-info: #4FA4FC;
    --hover-dark: #3B2A42;
    --hover-light: #F5EDF9;
    --hover-red: #FF4A74;
    --hover-purple: #B779F9;
    --hover-teal: #47D8D0;
    --hover-coral: #FF755D;
    --hover-sage: #88DBB8;
    --hover-rose: #FF7AB6;
    --hover-cream: #FFE7BD;
    --hover-aqua: #63D8F7;

    --text-on-primary: var(--color-text-inverse);
    --text-on-secondary: var(--color-text-inverse);
    --text-on-success: #0C281F;
    --text-on-warning: #4C231D;
    --text-on-error: var(--color-text-inverse);
    --text-on-spectrum: var(--color-text-inverse);
    --text-on-prism: var(--color-dark);

    --shadow-btn-default: 0 14px 28px rgba(42, 27, 51, 0.12);
    --shadow-btn-active: 0 6px 16px rgba(42, 27, 51, 0.2);
    --shadow-elevation-glow: 0 16px 32px rgba(164, 80, 255, 0.18), 0 10px 24px rgba(255, 108, 177, 0.12);

    --btn-surface-primary: var(--color-primary);
    --btn-surface-secondary: var(--color-secondary);
    --btn-surface-success: var(--color-success);
    --btn-surface-spectrum: var(--color-surface-elevated);
    --btn-surface-prism: var(--color-light);
    --btn-disabled-surface: var(--color-disabled);

    --panel-glow-gradient-rainbow: linear-gradient(45deg,
        var(--color-primary),
        var(--color-info),
        var(--color-success),
        var(--color-warning),
        var(--color-secondary),
        var(--color-error),
        var(--color-primary)
    );
    --panel-glow-gradient-primary: linear-gradient(45deg,
        rgba(164, 80, 255, 0.65),
        rgba(134, 54, 216, 0.4),
        rgba(164, 80, 255, 0.65),
        rgba(201, 156, 255, 0.45)
    );
    --panel-glow-gradient-secondary: linear-gradient(45deg,
        rgba(255, 124, 203, 0.65),
        rgba(241, 82, 177, 0.45),
        rgba(255, 176, 226, 0.5),
        rgba(255, 124, 203, 0.65)
    );
    --panel-glow-gradient-success: linear-gradient(45deg,
        rgba(88, 227, 180, 0.62),
        rgba(49, 196, 150, 0.4),
        rgba(160, 245, 214, 0.55),
        rgba(88, 227, 180, 0.62)
    );
    --panel-glow-gradient-warning: linear-gradient(45deg,
        rgba(255, 181, 162, 0.65),
        rgba(255, 150, 125, 0.42),
        rgba(255, 213, 200, 0.5),
        rgba(255, 181, 162, 0.65)
    );
    --panel-glow-gradient-info: linear-gradient(45deg,
        rgba(111, 182, 255, 0.65),
        rgba(61, 146, 229, 0.42),
        rgba(167, 211, 255, 0.55),
        rgba(111, 182, 255, 0.65)
    );
    --panel-glow-gradient-error: linear-gradient(45deg,
        rgba(255, 111, 145, 0.65),
        rgba(228, 79, 114, 0.42),
        rgba(255, 164, 187, 0.5),
        rgba(255, 111, 145, 0.65)
    );
    --btn-glow-primary-gradient: linear-gradient(45deg,
        var(--color-primary-strong),
        var(--color-primary),
        var(--color-secondary),
        var(--color-primary-soft),
        var(--color-secondary-soft),
        var(--color-primary)
    );
    --btn-glow-secondary-gradient: linear-gradient(45deg,
        var(--color-secondary),
        var(--color-secondary-strong),
        var(--color-info),
        var(--color-secondary-soft),
        var(--color-info-soft),
        var(--color-secondary)
    );
    --btn-glow-success-gradient: linear-gradient(45deg,
        var(--color-success),
        var(--color-success-strong),
        var(--color-success-soft),
        var(--color-secondary),
        var(--color-success),
        var(--color-success-soft)
    );
    --btn-glow-spectrum-gradient: linear-gradient(45deg,
        #ff007a,
        #ff8c00,
        #ffee00,
        #48ff00,
        #00ffd5,
        #00a0ff,
        #7a00ff,
        #ff00c8,
        #ff007a
    );
    --btn-glow-prism-gradient: linear-gradient(45deg,
        var(--color-primary),
        var(--color-info),
        var(--color-success),
        var(--color-warning),
        var(--color-secondary),
        var(--color-error),
        var(--color-primary)
    );
    --btn-outlined-base-gradient: linear-gradient(45deg,
        var(--color-primary),
        var(--color-info),
        var(--color-success),
        var(--color-warning),
        var(--color-secondary),
        var(--color-error),
        var(--color-primary)
    );

    --gradient-info-transparent: rgba(111, 182, 255, 0);

    --pastel-primary: var(--color-primary);
    --pastel-secondary: var(--color-secondary);
    --pastel-success: var(--color-success);
    --pastel-warning: var(--color-warning);
    --pastel-error: var(--color-error);
    --pastel-info: var(--color-info);
    --pastel-dark: var(--color-dark);
    --pastel-light: var(--color-light);
    --pastel-text: var(--color-text);
    --pastel-border: var(--color-border);
    --pastel-shadow: var(--color-shadow-tint);
    --pastel-hover: var(--color-hover);
    --pastel-background: var(--color-background);
    --pastel-disabled: var(--color-disabled);
    --pastel-muted: var(--color-muted);
    --pastel-red: var(--color-accent-red);
    --pastel-purple: var(--color-accent-purple);
    --pastel-teal: var(--color-accent-teal);
    --pastel-coral: var(--color-accent-coral);
    --pastel-sage: var(--color-accent-sage);
    --pastel-rose: var(--color-accent-rose);
    --pastel-cream: var(--color-accent-cream);
    --pastel-aqua: var(--color-accent-aqua);
}

body {
    font-family: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
}

/* ── Page Layout Utilities ───────────────────────────────────────── */

.page-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.page-heading {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-strong);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}

.section-heading {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.content-panel {
    background: #fff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Page header bar: back button + title + optional actions slot */
.page-header {
    display: flex;
    align-items: center;
    /* Row gap is smaller than column gap: once this wraps, 1rem between the
       stacked rows reads as a gap in the page rather than as one header. */
    gap: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    min-height: 46px;
    /* Back button + title + action buttons in one non-wrapping row is fine at
       1280px and impossible at 375px - the actions were being squashed to
       unreadable slivers or pushed past the right edge. Wrapping lets the
       actions drop to their own line instead. */
    flex-wrap: wrap;
}

.page-header-title {
    /* Needs a basis wide enough that a long event name claims the row and forces
       the actions to wrap, rather than the title being the thing that shrinks.
       min-width:0 still lets it go narrower than its content when it must. */
    flex: 1 1 12rem;
    min-width: 0;
}

.page-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Was flex-shrink:0, which is what pushed this group off the right edge on a
       phone. It may now wrap internally instead. */
    flex-wrap: wrap;
}

/* Navigation link styling */
/* The current page: ink text on a soft purple tint, with a purple marker - the clearest thing in
   the sidebar without shouting. */
.active-nav-link {
    color: var(--color-text-strong) !important;
    background-color: #F3EBFF !important;
    border-left: 3px solid var(--color-primary) !important;
    font-weight: 700;
}

    .active-nav-link span, .active-nav-link ::deep .mud-icon {
        color: var(--color-text-strong) !important;
    }

    .active-nav-link .mud-icon-root {
        color: var(--color-primary) !important;
    }

    /*Fix date picker border radius for mud*/
    .mud-picker.mud-paper{
        border-radius:5px;
    }

/* -- Outlined input corners (login/register/password reset) -------------------
   MudBlazor draws the visible border of an outlined field as an absolutely
   positioned <fieldset class="mud-input-outlined-border">, which carries the
   theme radius (1rem). The <input> itself gets no radius, because .mud-input
   has none either.

   That only bites on autofill: MudBlazor rounds the autofilled input with
   `border-radius: inherit`, which inherits from .mud-input -> resolves to 0.
   So Chrome painted its autofill background as a square-cornered rectangle
   inside the rounded border. Giving the wrapper the radius makes `inherit`
   resolve correctly. .mud-input-outlined has border-width:0, so this adds no
   visible border of its own. */
.mud-input.mud-input-outlined {
    border-radius: var(--mud-default-borderradius);
}

/* Chrome/Safari force their own autofill background, which fights the pastel
   card. Repaint it with an inset shadow (it respects border-radius, unlike
   background-color) so autofilled fields match untouched ones. */
.mud-input.mud-input-outlined > input.mud-input-root:-webkit-autofill,
.mud-input.mud-input-outlined > input.mud-input-root:-webkit-autofill:hover,
.mud-input.mud-input-outlined > input.mud-input-root:-webkit-autofill:focus,
.mud-input.mud-input-outlined > input.mud-input-root:-webkit-autofill:active {
    border-radius: var(--mud-default-borderradius);
    -webkit-box-shadow: 0 0 0 1000px var(--mud-palette-surface, #fff) inset;
    box-shadow: 0 0 0 1000px var(--mud-palette-surface, #fff) inset;
    -webkit-text-fill-color: var(--mud-palette-text-primary);
    caret-color: var(--mud-palette-text-primary);
}

/* reCAPTCHA v3 badge. Hidden deliberately - the Account pages carry Google's
   required disclosure text instead (see Components/Account/Shared/RecaptchaV3.razor).
   Removing that text means this rule must go too, or it breaches Google's terms. */
.grecaptcha-badge {
    visibility: hidden;
}



/* Fixed Pagination Styling */
.fixed-pagination .mud-pagination-item {
    border-radius: 9999px !important;
}
.fixed-pagination .mud-pagination-item.mud-pagination-item-selected {
    color: var(--color-text-strong) !important;
}
.fixed-pagination .mud-pagination-item.mud-pagination-item-selected button {
    background-color: var(--color-primary) !important;
    border-radius: 9999px !important;
}
.fixed-pagination .mud-pagination-item:hover:not(.mud-pagination-item-selected) button {
    background-color: var(--color-light) !important;
}

/* -- Responsive Sidebar --------------------------------------------
   Moved to wwwroot/css/mobile.css (see "App shell").

   What used to live here was a `max-width: 1023px` block pinning the sidebar to
   `width: 5rem !important` and hiding every label. Because it used !important it
   beat the Blazor-toggled `w-64`, so below 1024px the mobile menu button toggled
   a state that could never become visible - the button did nothing, and the nav
   was a column of unlabelled icons eating 21% of a 375px screen.

   The replacement makes the sidebar an off-canvas drawer with full labels below
   lg, and keeps the collapsible rail for desktop only.                        */

.animate-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes thinking-animation-light {
    0%, 100% { color: var(--color-dark); }
    50% { color: var(--color-text); }
}
.thinking {
    font-style: italic;
    animation: var(--thinking-animation) 2s infinite;
}
.hover\:scale-105:hover {
    transform: scale(1.05);
}
.bg-pastel-primary { background-color: var(--color-primary); }
.bg-pastel-secondary { background-color: var(--color-secondary); }
.bg-pastel-info { background-color: var(--color-info); }
.bg-pastel-success { background-color: var(--color-success); }
.bg-pastel-warning { background-color: var(--color-warning); }
.bg-pastel-error { background-color: var(--color-error); }
.bg-pastel-light { background-color: var(--color-light); }
.bg-pastel-dark { background-color: var(--color-dark); }
.bg-pastel-background { background-color: var(--color-background); }
.text-pastel-primary { color: var(--color-primary); }
.text-pastel-secondary { color: var(--color-secondary); }
.text-pastel-info { color: var(--color-info); }
.text-pastel-success { color: var(--color-success); }
.text-pastel-warning { color: var(--color-warning); }
.text-pastel-error { color: var(--color-error); }
.text-pastel-text { color: var(--color-text); }
.text-pastel-dark { color: var(--color-dark); }
.text-pastel-muted { color: var(--color-muted); }
.border-pastel-primary { border-color: var(--color-primary); }
.border-pastel-border { border-color: var(--color-border); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--gradient-stops)); }
.from-pastel-info {
    --tw-gradient-from: var(--color-info);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, var(--gradient-info-transparent));
}
.to-pastel-primary { --tw-gradient-to: var(--color-primary); }
.focus\:ring-pastel-primary:focus { --tw-ring-color: var(--color-primary); }

/* Glow Button Stylings and Animations */
/* A slow drift of colour, not a shimmer: the gradient travels a quarter of the distance it
   used to, so every glow that uses this (buttons, panels, cards) moves gently. */
@keyframes glowing {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes slowGlowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

.pastel-shadow {
    box-shadow: var(--shadow-elevation-glow);
}

.pastel-border {
    border: 1px solid var(--color-border);
}

/* Basic button styling */

.btn-container {
    display: flex;
    gap: 12px;
    margin: 16px 0;
}

/* Container alignment variants */
.btn-container-center {
    justify-content: center;
}

.btn-container-end {
    justify-content: flex-end;
}

.btn-container-between {
    justify-content: space-between;
}

/* Container for single buttons with consistent spacing */
.btn-wrapper {
    margin: 16px 0;
}

/* Container in form contexts - typically at the bottom of forms */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
    padding-top: 16px;
    /* Clear of the round help/assistant button fixed in the bottom-right corner. */
    padding-right: 5rem;
    border-top: 1px solid var(--color-border);
}

.btn {
    position: relative;
    z-index: 0;
    overflow: visible;
    border-radius: 99px;
    padding: 12px 24px; /* Slightly increased padding for better touch targets */
    border: none;
    color: var(--text-on-primary);
    font-weight: 600;
    font-size: 0.95rem; /* Slightly more refined text size */
    letter-spacing: 0.04em; /* Subtle letter spacing for modern feel */
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Better centering */
    gap: 10px; /* Increased gap between icon and text */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth, slight bounce transition */
   /* box-shadow: var(--shadow-btn-default);*/
    min-height: 46px; /* Consistent height */
    text-decoration: none; /* Remove underlines if used as links */
    min-width: 120px; /* Minimum width for consistency */
}

    .btn:hover {
        transform: translateY(-2px) scale(1.01);
        box-shadow: 0 8px 20px rgba(15, 30, 70, 0.15);
    }

    .btn:active {
        transform: translateY(1px); /* Subtle press effect */
        box-shadow: var(--shadow-btn-active);
    }

    /* Style for material icons within buttons */
    .btn .material-icons {
        font-size: 1.15rem; /* Slightly larger icons */
        margin-top: -2px; /* Fine-tune vertical alignment */
    }

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

.btn:focus-visible {
    outline: 3px solid var(--color-primary-soft);
    outline-offset: 2px;
}

/* Small variant */
.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
    min-height: 36px;
    min-width: 80px;
}

/* Large variant */
.btn-lg {
    padding: 14px 28px;
    font-size: 1.05rem;
    min-height: 54px;
    min-width: 140px;
}

/* Style for material icons within buttons - UPDATED SIZE */
.btn .material-icons {
    font-size: 1.3rem; /* Increased from 1.15rem */
    margin-top: -1px; /* Adjusted for better vertical alignment */
}

/* Size variants for icons to maintain proportions */
.btn-sm .material-icons {
    font-size: 1.1rem; /* Smaller icon for small buttons */
}

.btn-lg .material-icons {
    font-size: 1.5rem; /* Larger icon for large buttons */
}

/* For MudIcon components within buttons */
.btn :deep(.mud-icon-root) {
    font-size: 1.3rem !important;
    margin-top: -1px;
}

.btn-sm :deep(.mud-icon-root) {
    font-size: 1.1rem !important;
}

.btn-lg :deep(.mud-icon-root) {
    font-size: 1.5rem !important;
}

/* PRIMARY BUTTON WITH GLOW */
.btn-glow-primary {
    background-color: var(--btn-surface-primary);
    position: relative;
    z-index: 0;
}

    .btn-glow-primary:before {
        content: '';
        background: var(--btn-glow-primary-gradient);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 12s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: inherit;
    }

    .btn-glow-primary:hover:before {
        opacity: 1;
    }

    .btn-glow-primary:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        background-color: var(--btn-surface-primary);
    }
    .btn-glow-primary:disabled,
    .btn-glow-primary[disabled] {
        background-color: var(--btn-disabled-surface);
        border-color: var(--color-disabled-border);
        color: var(--color-disabled-text);
        box-shadow: none;
    }
    
/* SECONDARY BUTTON WITH GLOW */
.btn-glow-secondary {
    background-color: var(--btn-surface-secondary);
    color: var(--text-on-secondary);
    position: relative;
    z-index: 0;
}

    .btn-glow-secondary:before {
        content: '';
        background: var(--btn-glow-secondary-gradient);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 12s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: inherit;
    }

    .btn-glow-secondary:hover:before {
        opacity: 1;
    }

    .btn-glow-secondary:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        background-color: var(--btn-surface-secondary);
    }

/* HOT BUTTON WITH GLOW: the one "commit" action on a screen - Enter this event, Pay securely,
   Save and list, the homepage's main call to action. Bright coral-to-peach with dark text, and a
   warm glow on hover. Use at most one per screen; purple btn-glow-primary stays the everyday
   main button. */
.btn-glow-hot {
    background: var(--color-hot-gradient);
    color: var(--color-hot-text);
    position: relative;
    z-index: 0;
}

    .btn-glow-hot:before {
        content: '';
        background: var(--glow-warm);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(6px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 12s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: inherit;
    }

    .btn-glow-hot:hover:before,
    .btn-glow-hot:focus-visible:before {
        opacity: 1;
    }

    .btn-glow-hot:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        background: var(--color-hot-gradient);
    }

    .btn-glow-hot:disabled,
    .btn-glow-hot[disabled] {
        background-color: var(--btn-disabled-surface);
        color: var(--color-disabled-text);
        box-shadow: none;
    }

    .btn-glow-hot:disabled:after,
    .btn-glow-hot[disabled]:after {
        background-color: var(--btn-disabled-surface);
    }

/* SUCCESS BUTTON WITH GLOW */
.btn-glow-success {
    background-color: var(--btn-surface-success);
    color: var(--text-on-success);
    position: relative;
    z-index: 0;
}

    .btn-glow-success:before {
        content: '';
        background: var(--btn-glow-success-gradient);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 12s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: inherit;
    }

    .btn-glow-success:hover:before {
        opacity: 1;
    }

    .btn-glow-success:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        background-color: var(--btn-surface-success);
    }

/* RAINBOW BUTTON WITH GLOW */
.btn-glow-rainbow {
    background-color: var(--btn-surface-spectrum);
    color: var(--text-on-spectrum);
    position: relative;
    z-index: 0;
}

    .btn-glow-rainbow:before {
        content: '';
        background: var(--btn-glow-spectrum-gradient);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 12s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: inherit;
    }

    .btn-glow-rainbow:hover:before {
        opacity: 1;
    }

    .btn-glow-rainbow:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        background-color: var(--btn-surface-spectrum);
    }

/* PASTEL RAINBOW BUTTON WITH GLOW */
.btn-glow-pastel-rainbow {
    background-color: var(--btn-surface-prism);
    color: var(--text-on-prism);
    position: relative;
    z-index: 0;
}

    .btn-glow-pastel-rainbow:before {
        content: '';
        background: var(--btn-glow-prism-gradient);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 12s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: inherit;
    }

    .btn-glow-pastel-rainbow:hover:before {
        opacity: 1;
    }

    .btn-glow-pastel-rainbow:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        background-color: var(--btn-surface-prism);
    }


/* OUTLINED BUTTON BASE */
.btn-outlined {
    background-color: transparent;
    border: 1px solid;
    color: inherit;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

    /* Base glow effect - spectrum glow */
    .btn-outlined:before {
        content: '';
        background: var(--btn-outlined-base-gradient);
        position: absolute;
        top: -4px;
        left: -4px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        animation: glowing 12s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: inherit;
    }

    .btn-outlined:hover:before {
        opacity: 1;
    }

    .btn-outlined:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        background-color: var(--btn-surface-prism);
    }

    /* Disabled state - no glow, greyed out */
    .btn-outlined:disabled,
    .btn-outlined.disable, .btn.disabled{
        border-color: var(--color-disabled-border) !important;
        color: var(--color-disabled-text) !important;
        cursor: not-allowed !important;
        opacity: 0.6;
    }

        .btn-outlined:disabled:before,
        .btn-outlined.disabled:before,
        .btn-outlined:disabled:hover:before,
        .btn-outlined.disabled:hover:before {
            opacity: 0 !important; /* No glow when disabled */
        }

/* OUTLINED PRIMARY */
.btn-outlined-primary {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

    .btn-outlined-primary:hover {
        color: var(--color-primary);
        border-color: var(--hover-primary);
    }

/* OUTLINED SECONDARY */
.btn-outlined-secondary {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

    .btn-outlined-secondary:hover {
        color: var(--color-secondary);
        border-color: var(--hover-secondary);
    }

/* OUTLINED SUCCESS */
.btn-outlined-success {
    border-color: var(--color-success);
    color: var(--color-success);
}

    .btn-outlined-success:hover {
        color: var(--text-on-success);
        border-color: var(--hover-success); 
    }


/* OUTLINED failure */
.btn-outlined-failure {
    border-color: var(--color-error);
    color: var(--color-error);
}

    .btn-outlined-failure:hover {
        background-color: var(--color-error);
        color: var(--text-on-error);
        border-color: var(--hover-error);
    }



/* OUTLINED warning */
.btn-outlined-warning {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

    .btn-outlined-warning:hover {
        color: var(--text-on-warning);
        border-color: var(--hover-warning);
    }



/* OUTLINED failure */
.btn-outlined-info {
    border-color: var(--color-info);
    color: var(--color-info);
}

    .btn-outlined-info:hover {
        color: var(--color-text);
        border-color: var(--hover-info);
    }


/* OUTLINED dark */
.btn-outlined-dark {
    border-color: var(--color-dark);
    color: var(--color-dark);
}

    .btn-outlined-dark:hover {
        color: var(--color-text);
        border-color: var(--hover-dark);
    }



/* OUTLINED light */
.btn-outlined-light {
    border-color: var(--color-light);
    color: var(--color-light);
}

    .btn-outlined-light:hover {
        color: var(--color-dark);
        border-color: var(--hover-light);
    }


/* ─────────────────────────────────────────────────────────────────────────
   BUTTON COLOUR CONVENTION
   Assign colours by the ACTION's PURPOSE so buttons are distinguishable AND carry
   similar visual weight (contrast on white) to the established purple/red:
     • green  (btn-outlined-enter)    → positive / go / enter        e.g. Enter Event
     • purple (btn-outlined-primary)  → manage / edit / main CTA     e.g. Edit Event
     • blue   (btn-outlined-utility)  → utility / download / export  e.g. Download Catalogue
     • red    (btn-outlined-red)      → destructive / delete         e.g. Delete Event
     • pink   (btn-outlined-secondary / -rose / -coral) → secondary emphasis
   NOTE: the theme's own -sage / -aqua accents are pale pastels (~1.4:1 contrast on
   white) — far lighter than purple (~4:1) and red (~3:1). The -enter / -utility
   variants below use deeper, contrast-matched shades so all four actions read with
   equal weight. Prefer these purpose-mapped classes on new buttons.
   ───────────────────────────────────────────────────────────────────────── */

/* OUTLINED ENTER (green) — positive/go action, tuned to ~3:1 to match red */
.btn-outlined-enter {
    border-color: #1FA971;
    color: #1FA971;
}

    .btn-outlined-enter:hover {
        color: var(--color-text);
        border-color: #17915F;
    }

/* OUTLINED UTILITY (blue) — download/export action, tuned to ~3.8:1 to match purple */
.btn-outlined-utility {
    border-color: #2F86D9;
    color: #2F86D9;
}

    .btn-outlined-utility:hover {
        color: var(--color-text);
        border-color: #2670BE;
    }

/* OUTLINED RED */
.btn-outlined-red {
    border-color: var(--color-accent-red);
    color: var(--color-accent-red);
}

    .btn-outlined-red:hover {
        color: var(--color-accent-red);
        border-color: var(--hover-red);
    }

/* OUTLINED PURPLE */
.btn-outlined-purple {
    border-color: var(--color-accent-purple);
    color: var(--color-accent-purple);
}

    .btn-outlined-purple:hover {
        color: var(--color-text);
        border-color: var(--hover-purple);
    }

/* OUTLINED TEAL */
.btn-outlined-teal {
    border-color: var(--color-accent-teal);
    color: var(--color-accent-teal);
}

    .btn-outlined-teal:hover {
        color: var(--color-text);
        border-color: var(--hover-teal);
    }

/* OUTLINED CORAL */
.btn-outlined-coral {
    border-color: var(--color-accent-coral);
    color: var(--color-accent-coral);
}

    .btn-outlined-coral:hover {
        color: var(--color-text);
        border-color: var(--hover-coral);
    }

/* OUTLINED SAGE */
.btn-outlined-sage {
    border-color: var(--color-accent-sage);
    color: var(--color-accent-sage);
}

    .btn-outlined-sage:hover {
        color: var(--color-text);
        border-color: var(--hover-sage);
    }

/* OUTLINED ROSE */
.btn-outlined-rose {
    border-color: var(--color-accent-rose);
    color: var(--color-accent-rose);
}

    .btn-outlined-rose:hover {
        color: var(--color-text);
        border-color: var(--hover-rose);
    }

/* OUTLINED CREAM */
.btn-outlined-cream {
    border-color: var(--color-accent-cream);
    color: var(--color-accent-cream);
}

    .btn-outlined-cream:hover {
        color: var(--color-dark);
        border-color: var(--hover-cream);
    }

/* OUTLINED AQUA */
.btn-outlined-aqua {
    border-color: var(--color-accent-aqua);
    color: var(--color-accent-aqua);
}

    .btn-outlined-aqua:hover {
        color: var(--color-text);
        border-color: var(--hover-aqua);
    }

/* SUBTLE BUTTON - no border, lightly tinted surface, colored text, rainbow glow on hover.
   :before = animated rainbow glow (same as other glow buttons, background-size must be
   in the same rule as background or the shorthand resets it).
   :after  = opaque tinted surface that masks the interior so the glow only halos the edges. */
.btn-subtle {
    border: none;
    background-color: transparent;
    position: relative;
    z-index: 0;
}

    .btn-subtle:before {
        content: '';
        background: var(--btn-outlined-base-gradient);
        background-size: 400%;
        position: absolute;
        top: -2px;
        left: -2px;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 12s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: inherit;
    }

    .btn-subtle:hover:before {
        opacity: 0.65;
    }

    .btn-subtle:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        transition: background-color 0.3s ease;
    }

    .btn-subtle:disabled,
    .btn-subtle[disabled] {
        color: var(--color-disabled-text) !important;
        cursor: not-allowed !important;
        opacity: 0.6;
    }

        .btn-subtle:disabled:before,
        .btn-subtle.disabled:before,
        .btn-subtle:disabled:hover:before,
        .btn-subtle.disabled:hover:before {
            opacity: 0 !important;
        }

/* SUBTLE PRIMARY */
.btn-subtle-primary {
    color: var(--color-primary);
}

    .btn-subtle-primary:after {
        background-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface, #fff));
    }

    .btn-subtle-primary:hover {
        color: var(--color-primary);
    }

    .btn-subtle-primary:hover:after {
        background-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface, #fff));
    }

/* SUBTLE SECONDARY */
.btn-subtle-secondary {
    color: var(--color-secondary);
}

    .btn-subtle-secondary:after {
        background-color: color-mix(in srgb, var(--color-secondary) 12%, var(--color-surface, #fff));
    }

    .btn-subtle-secondary:hover {
        color: var(--color-secondary);
    }

    .btn-subtle-secondary:hover:after {
        background-color: color-mix(in srgb, var(--color-secondary) 20%, var(--color-surface, #fff));
    }

/* SUBTLE FAILURE */
.btn-subtle-failure {
    color: var(--color-error);
}

    .btn-subtle-failure:after {
        background-color: color-mix(in srgb, var(--color-error) 12%, var(--color-surface, #fff));
    }

    .btn-subtle-failure:hover {
        color: var(--color-error);
    }

    .btn-subtle-failure:hover:after {
        background-color: color-mix(in srgb, var(--color-error) 20%, var(--color-surface, #fff));
    }

/* Panels. Every panel-glow is now a clean white card with a soft shadow and no glow: with a
   glow on all 70-odd panels nothing stood out. The glow is kept for the few moments that
   should feel special - add panel-glow--feature (the event's main panel, "You're entered",
   the scoreboard header) and it glows gently at rest. The colour modifiers (--primary,
   --secondary...) still choose that glow's colours. */
.panel-glow {
    position: relative;
    z-index: 0;
    background-color: #fff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    --panel-glow-gradient-current: var(--panel-glow-gradient, var(--glow-brand));
}

.panel-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    z-index: -1;
}

.panel-glow::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: var(--panel-glow-gradient-current);
    background-size: 300%;
    filter: blur(14px);
    opacity: 0;
    z-index: -2;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.panel-glow--feature {
    --panel-glow-gradient-current: var(--glow-brand);
}

.panel-glow--feature::before {
    opacity: 0.3;
    animation: glowing 30s ease-in-out infinite;
}

.panel-glow--feature:hover::before {
    opacity: 0.45;
}

.panel-glow--rainbow { --panel-glow-gradient: var(--panel-glow-gradient-rainbow); }
.panel-glow--primary { --panel-glow-gradient: var(--panel-glow-gradient-primary); }
.panel-glow--secondary { --panel-glow-gradient: var(--panel-glow-gradient-secondary); }
.panel-glow--success { --panel-glow-gradient: var(--panel-glow-gradient-success); }
.panel-glow--warning { --panel-glow-gradient: var(--panel-glow-gradient-warning); }
.panel-glow--info { --panel-glow-gradient: var(--panel-glow-gradient-info); }
.panel-glow--error { --panel-glow-gradient: var(--panel-glow-gradient-error); }

@media (prefers-reduced-motion: reduce) {
    .panel-glow::before,
    .btn:before {
        animation: none !important;
    }

    .btn:hover {
        transform: none;
    }
}

/* Amplitude.js Playlist Player Styles */
.playlist-player {
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
}

.amplitude-song-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    outline: none;
    border-radius: 2px;
}

    .amplitude-song-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        background: white;
        cursor: pointer;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .amplitude-song-slider::-moz-range-thumb {
        width: 14px;
        height: 14px;
        background: white;
        cursor: pointer;
        border-radius: 50%;
        border: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.amplitude-playing .amplitude-paused {
    display: inline-block;
}

.amplitude-playing .amplitude-playing {
    display: none;
}

.amplitude-paused .amplitude-paused {
    display: none;
}

.amplitude-paused .amplitude-playing {
    display: inline-block;
}

.amplitude-song-container.bg-pastel-light {
    background-color: var(--color-surface-elevated);
}

.playlist-controls .playlist-control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    transition: background-color 0.25s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.playlist-controls .playlist-control-btn:hover {
    transform: translateY(-1px);
}

.playlist-controls .amplitude-prev,
.playlist-controls .amplitude-next {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.playlist-controls .amplitude-prev:hover,
.playlist-controls .amplitude-next:hover {
    background: rgba(255, 255, 255, 0.25);
}

.playlist-controls .amplitude-play,
.playlist-controls .amplitude-pause,
.playlist-controls .playlist-control-btn:not(.amplitude-prev):not(.amplitude-next):not(.amplitude-play):not(.amplitude-pause) {
    background: #ffffff;
}

.playlist-player.is-playing .amplitude-pause {
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.25);
}

.playlist-player.is-buffering .playlist-controls .playlist-control-btn {
    opacity: 0.7;
}

.playlist-buffering-indicator {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.playlist-buffering-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    animation: playlist-spin 0.8s linear infinite;
}

.playlist-buffering-label {
    letter-spacing: 0.02em;
    font-weight: 500;
}

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

.playlist-song-item {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.playlist-song-item:hover {
    background: rgba(58, 107, 255, 0.08);
}

.playlist-song-item.amplitude-active-song-container {
    background: rgba(58, 107, 255, 0.12);
    border-color: var(--color-primary, #3a6bff);
}

.playlist-player.is-playing .playlist-song-item.amplitude-active-song-container .playlist-eq-indicator {
    display: inline-block !important;
    animation: playlist-eq-pulse 1s ease-in-out infinite;
}

@keyframes playlist-eq-pulse {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-2px);
        opacity: 0.6;
    }
}

/* -- AI Chat markdown prose -------------------------------------------------
   Tailwind's preflight resets all browser defaults (no bullets, no margins).
   These rules restore the expected look for HTML emitted by marked.js inside
   the chat bubbles (both streaming div and AiChatMessageBubble).
   -------------------------------------------------------------------------- */
.ai-prose p {
    margin-bottom: 0.5em;
}
.ai-prose p:last-child {
    margin-bottom: 0;
}
.ai-prose ul {
    list-style-type: disc;
    padding-left: 1.4em;
    margin-bottom: 0.5em;
}
.ai-prose ol {
    list-style-type: decimal;
    padding-left: 1.4em;
    margin-bottom: 0.5em;
}
.ai-prose li {
    margin-bottom: 0.2em;
}
.ai-prose strong, .ai-prose b {
    font-weight: 700;
}
.ai-prose em, .ai-prose i {
    font-style: italic;
}
.ai-prose h1, .ai-prose h2, .ai-prose h3,
.ai-prose h4, .ai-prose h5, .ai-prose h6 {
    font-weight: 700;
    margin-bottom: 0.35em;
    margin-top: 0.75em;
    line-height: 1.3;
}
.ai-prose h1 { font-size: 1.25em; }
.ai-prose h2 { font-size: 1.15em; }
.ai-prose h3 { font-size: 1.05em; }
.ai-prose code {
    background: #f3f0ff;
    color: #5b21b6;
    border-radius: 0.25em;
    padding: 0.1em 0.35em;
    font-size: 0.875em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ai-prose pre {
    background: #1e1b2e;
    color: #e2e8f0;
    border-radius: 0.5em;
    padding: 0.85em 1em;
    overflow-x: auto;
    margin-bottom: 0.6em;
    font-size: 0.82em;
}
.ai-prose pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
}
.ai-prose blockquote {
    border-left: 3px solid #c4b5fd;
    padding-left: 0.75em;
    color: #6b7280;
    font-style: italic;
    margin-bottom: 0.5em;
}
.ai-prose a {
    color: #7c3aed;
    text-decoration: underline;
}
.ai-prose hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 0.75em 0;
}
.ai-prose table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0.6em;
    font-size: 0.875em;
}
.ai-prose th, .ai-prose td {
    border: 1px solid #e5e7eb;
    padding: 0.35em 0.6em;
    text-align: left;
}
.ai-prose th {
    background: #f5f3ff;
    font-weight: 600;
}

/* ==========================================================================
   Guide pages - /guides/enter-a-competition and /guides/host-an-event
   Screenshot-led walkthroughs. These pages render under STATIC SSR for
   logged-out visitors, so everything here must work without JavaScript.
   ========================================================================== */

.guide-page {
    /* As wide as the homepage, so photos, cards and screenshots have room; running text is
       held to a readable line length below (.guide-step--plain p, .guide-body). */
    max-width: 74rem;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

/* --- Hero ------------------------------------------------------------- */

.guide-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid rgba(164, 80, 255, 0.14);
    background: linear-gradient(135deg, #fafbff 0%, #f0ecff 100%);
    padding: 2.5rem 2rem;
    margin: 1.25rem 0 2rem;
}

.guide-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pastel-primary);
    background: color-mix(in srgb, var(--pastel-primary) 10%, white);
    border: 1px solid color-mix(in srgb, var(--pastel-primary) 22%, white);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    margin-bottom: 1rem;
}

.guide-hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--pastel-text);
    margin: 0 0 0.85rem;
}

.guide-hero-lead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--pastel-dark);
    max-width: 44rem;
    margin: 0;
}

.guide-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* --- "At a glance" step map ------------------------------------------ */

.guide-map {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin-bottom: 2.5rem;
}

.guide-map-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: #fff;
    border: 1px solid var(--pastel-border);
    border-radius: 0.75rem;
    padding: 0.7rem 0.85rem;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.guide-map-item:hover {
    border-color: var(--pastel-primary);
    transform: translateY(-2px);
}

.guide-map-num {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--pastel-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-map--secondary .guide-map-num {
    background: var(--pastel-secondary);
}

.guide-map-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pastel-text);
    line-height: 1.3;
}

/* --- Steps ----------------------------------------------------------- */

.guide-step {
    scroll-margin-top: 1.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--pastel-border);
    margin-top: 2.5rem;
}

.guide-step:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.guide-step-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.guide-step-num {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    background: var(--pastel-primary);
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--pastel-primary) 65%, transparent);
}

.guide-step--secondary .guide-step-num {
    background: var(--pastel-secondary);
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--pastel-secondary) 65%, transparent);
}

.guide-step-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pastel-text);
    margin: 0.15rem 0 0.35rem;
    line-height: 1.25;
}

.guide-step-lead {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pastel-dark);
    margin: 0;
}

.guide-body p {
    font-size: 1rem;
    line-height: 1.65;
    color: #374151;
    margin: 0 0 1rem;
    max-width: 48rem;
}

.guide-body strong {
    color: var(--pastel-text);
    font-weight: 600;
}

/* --- Bullet list of facilities --------------------------------------- */

.guide-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.guide-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #374151;
}

.guide-list li::before {
    content: "check_circle";
    font-family: "Material Icons";
    font-size: 1.05rem;
    line-height: 1.4;
    flex-shrink: 0;
    color: var(--pastel-success);
}

.guide-list--info li::before {
    color: var(--pastel-info);
}

/* --- Callout note ---------------------------------------------------- */

.guide-note {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    border-radius: 0.75rem;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    padding: 0.85rem 1rem;
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #1e40af;
}

.guide-note--warn {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.guide-note .material-icons {
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* --- Screenshots ----------------------------------------------------- */

.guide-shots {
    display: grid;
    gap: 1.25rem;
    margin: 0 0 1.5rem;
}

.guide-shots--pair {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.guide-shot {
    margin: 0 0 1.5rem;
}

.guide-shots .guide-shot {
    margin-bottom: 0;
}

.guide-shot-frame {
    display: block;
    border-radius: 0.85rem;
    overflow: hidden;
    border: 1px solid var(--pastel-border);
    background: #fff;
    box-shadow: 0 18px 40px -24px rgba(76, 29, 149, 0.35);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

label.guide-shot-frame {
    cursor: zoom-in;
}

label.guide-shot-frame:hover {
    box-shadow: 0 22px 48px -20px rgba(76, 29, 149, 0.45);
    transform: translateY(-2px);
}

.guide-shot-frame img {
    display: block;
    width: 100%;
    height: auto;
}

.guide-shot-frame--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 11rem;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--pastel-primary) 35%, white);
    background: #fbfaff;
    box-shadow: none;
    padding: 1.5rem 1rem;
    text-align: center;
}

.guide-shot-frame--empty .material-icons {
    font-size: 2rem;
    color: color-mix(in srgb, var(--pastel-primary) 45%, white);
}

.guide-shot-pending {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pastel-dark);
    margin: 0;
}

.guide-shot-file {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    color: #9ca3af;
    word-break: break-all;
}

.guide-shot-caption {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #6b7280;
    margin-top: 0.5rem;
    padding-left: 0.15rem;
}

/* --- Screenshot lightbox --------------------------------------------- */

/* The checkbox that holds the open/closed state. Kept in the layout rather than
   display:none so it stays focusable for keyboard users, but pushed out of sight. */
.guide-shot-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.guide-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000; /* above MudBlazor's overlays, which top out around 1400 */
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}

.guide-shot-toggle:checked ~ .guide-lightbox {
    display: flex;
}

/* Focus ring lands on the picture, not on the invisible checkbox. */
.guide-shot-toggle:focus-visible + .guide-shot-frame {
    outline: 2px solid var(--pastel-primary);
    outline-offset: 3px;
}

.guide-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 20, 41, 0.82);
    cursor: zoom-out;
}

.guide-lightbox-inner {
    position: relative;
    max-width: min(72rem, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.guide-lightbox-img {
    display: block;
    max-width: 100%;
    /* Leave room for the caption underneath without the picture ever overflowing. */
    max-height: calc(100vh - 9rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.6rem;
    background: #fff;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
}

.guide-lightbox-caption {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
    margin: 0;
}

.guide-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.guide-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

@media (max-width: 640px) {
    .guide-lightbox {
        padding: 1rem 0.75rem;
    }

    .guide-lightbox-img {
        max-height: calc(100vh - 7rem);
    }
}

/* --- Feature grid ---------------------------------------------------- */

.guide-features {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin-bottom: 1.5rem;
}

.guide-feature {
    background: #fff;
    border: 1px solid var(--pastel-border);
    border-radius: 0.9rem;
    padding: 1.1rem 1.2rem;
}

.guide-feature-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--pastel-text);
    margin: 0 0 0.4rem;
}

.guide-feature-title .material-icons {
    font-size: 1.2rem;
    color: var(--pastel-primary);
}

.guide-feature p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: #4b5563;
    margin: 0;
}

/* --- FAQ ------------------------------------------------------------- */

.guide-faq {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Two columns of questions on a wide screen, so each answer keeps a readable line length. */
@media (min-width: 900px) {
    .guide-faq { grid-template-columns: 1fr 1fr; align-items: start; }
}

.guide-faq-q {
    background: #fff;
    border: 1px solid var(--pastel-border);
    border-radius: 0.75rem;
    padding: 1rem 1.15rem;
}

.guide-faq-q h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--pastel-text);
    margin: 0 0 0.35rem;
}

.guide-faq-q p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #4b5563;
    margin: 0;
}

/* --- Section heading inside a guide ---------------------------------- */

.guide-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--pastel-text);
    margin: 0 0 1rem;
}

/* --- Explainer sections ----------------------------------------------
   For a guide page that explains a subject rather than walking through
   numbered steps (/heelwork-to-music). .guide-step alone gives the section
   rhythm but expects the GuideStep component's numbered head and its
   .guide-body wrapper; this modifier supplies the paragraph styles that
   wrapper would have, and eases the 5rem gap that suits long steps but not
   short prose sections. */

.guide-step--plain {
    padding-top: 1.75rem;
    margin-top: 1.75rem;
}

.guide-step--plain p {
    font-size: 1rem;
    line-height: 1.65;
    color: #374151;
    margin: 0 0 1rem;
    max-width: 48rem;
}

.guide-step--plain p:last-child {
    margin-bottom: 0;
}

.guide-step--plain strong {
    color: var(--pastel-text);
    font-weight: 600;
}

/* A neutral marker for lists that enumerate rather than reassure. The default
   .guide-list tick reads as "you get this", which is wrong for a list of
   judging criteria or class levels. */

.guide-list--plain li::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--pastel-primary);
    margin-top: 0.6rem;
}

/* --- Closing CTA ----------------------------------------------------- */

.guide-cta {
    border-radius: 1.25rem;
    border: 1px solid rgba(164, 80, 255, 0.14);
    background: linear-gradient(135deg, #f0ecff 0%, #fafbff 100%);
    padding: 2.25rem 1.75rem;
    text-align: center;
    margin-top: 3rem;
}

.guide-cta h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--pastel-text);
    margin: 0 0 0.6rem;
}

.guide-cta p {
    font-size: 1.0625rem;
    color: var(--pastel-dark);
    max-width: 34rem;
    margin: 0 auto 1.5rem;
}

.guide-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

@media (max-width: 640px) {
    .guide-hero {
        padding: 1.75rem 1.25rem;
    }

    .guide-step-head {
        gap: 0.75rem;
    }

    .guide-step-num {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 0.9rem;
    }

    .guide-step-title {
        font-size: 1.25rem;
    }
}

/* Show/hide password toggle injected by /js/passwordReveal.js. */
.pw-reveal-anchor {
    position: relative;
}

/* Doubled class + .mud-input-slot to out-specify MudBlazor's own input padding. */
.pw-reveal-anchor.pw-reveal-anchor input.mud-input-root,
.pw-reveal-anchor.pw-reveal-anchor input.mud-input-slot,
.pw-reveal-anchor.pw-reveal-anchor input {
    padding-right: 2.75rem;
}

.pw-reveal-button {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    /* The outlined variant's border element is absolutely positioned, so lift
       the button above it. */
    z-index: 1;
    color: var(--pastel-muted, #6b7280);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.pw-reveal-button:hover,
.pw-reveal-button:focus-visible {
    color: var(--pastel-primary, #4b5563);
    background-color: rgba(0, 0, 0, 0.04);
}

.pw-reveal-button:focus-visible {
    outline: 2px solid var(--pastel-primary, #4b5563);
    outline-offset: 1px;
}

.pw-reveal-button .material-icons {
    font-size: 1.25rem;
}

/* Routes.razor's FocusOnNavigate moves focus to the page's h1 after each navigation, so
   screen readers announce the new page. A heading isn't something anyone tabbed to or can
   act on, so it gets no focus ring. */
h1:focus { outline: none; }

/* ── Event types, colour-coded everywhere they appear ──────────────────────
   Competition purple, training show sunshine, workshop mint - the same colours as the
   homepage's event-type cards, so a type is recognisable at a glance. Applied by
   EventKindStyle.ChipClass(). */
.kind-chip--competition { background: #F1E9FF !important; color: #5B21B6 !important; border-color: #DCC8FF !important; }
.kind-chip--training    { background: #FFF6D6 !important; color: #6B4E00 !important; border-color: #F2DC94 !important; }
.kind-chip--workshop    { background: #DDF8EE !important; color: #0D6B4E !important; border-color: #A7E8CF !important; }
.kind-chip--competition .material-icons,
.kind-chip--competition .category-icon { color: #7C3AED !important; }
.kind-chip--training .material-icons,
.kind-chip--training .category-icon { color: #B98A00 !important; }
.kind-chip--workshop .material-icons,
.kind-chip--workshop .category-icon { color: #12A27A !important; }

/* ── Info points (Components/Shared/InfoPoint.razor) ─────────────────────────
   The "?" by a field. Hover shows the explanation; the tooltip can be clicked, as can the
   "?", to open the help drawer on that topic. */
.info-point { display: inline-flex; position: relative; vertical-align: middle; }

.info-point__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.info-point__btn .material-icons { font-size: 1.1rem; }

/* The "?" looks small but takes a 44px tap - the minimum a finger can hit reliably. An invisible
   square centred on it, so the layout around it doesn't move. */
.info-point__btn { position: relative; }
.info-point__btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
.info-point__btn:hover { background: #F3EBFF; color: var(--color-primary-strong); }
.info-point__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.info-point__pop { background: transparent !important; box-shadow: none !important; }

.info-point__tip {
    max-width: 18rem;
    margin-bottom: 0.4rem;
    padding: 0.6rem 0.8rem 0.55rem;
    border-radius: 0.75rem;
    background: #2A1B33;
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.45;
    box-shadow: 0 12px 28px -12px rgba(42, 27, 51, 0.55);
    cursor: pointer;
}

.info-point__tip:hover { background: #3A2647; }

.info-point__more {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.4rem;
    font-weight: 700;
    color: #E2CCFF;
}

.info-point__more .material-icons { font-size: 0.95rem; }

/* ── Assistant banner on the event form (EditEvent, fill_event_form) ── */
.assist-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem;
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    background: linear-gradient(135deg, #F4EBFF 0%, #FFF0F8 100%);
    color: var(--color-text);
}

.assist-banner > .material-icons { color: var(--color-primary); margin-top: 0.1rem; }
.assist-banner__text { flex: 1 1 18rem; line-height: 1.5; }
.assist-banner__text small { display: block; margin-top: 0.3rem; color: var(--color-muted); }
.assist-banner__actions { display: flex; align-items: center; gap: 0.4rem; }

.assist-banner__close {
    display: inline-flex;
    border: 0;
    background: none;
    color: var(--color-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
}

.assist-banner__close:hover { background: rgba(139, 61, 255, 0.08); }

/* ── Page header band (Components/Shared/PageBand.razor) ──────────────────────
   The signed-in pages' header: soft lilac-to-pink, a kicker, the title, one line of
   explanation, and the main action on the right. Matches the dashboard's band. */
.page-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin: 1.5rem 0 1.25rem;
    padding: 1.5rem 1.75rem;
    border-radius: 1.25rem;
    background: linear-gradient(160deg, #F4EBFF 0%, #FFF0F8 60%, #EFF8FF 100%);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.page-band__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-band__glow span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.35; }
.page-band__glow span:nth-child(1) { width: 20rem; height: 20rem; background: #B98CFF; top: -11rem; left: -6rem; }
.page-band__glow span:nth-child(2) { width: 18rem; height: 18rem; background: #FF7CCB; bottom: -12rem; right: 10%; opacity: 0.3; }

.page-band__art { flex-shrink: 0; width: 5.5rem; }
.page-band__art svg { width: 100%; height: auto; display: block; }
.page-band__text { flex: 1 1 18rem; min-width: 0; }

.page-band__kicker {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #B4236F;
}

.page-band__title {
    margin: 0;
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-text-strong);
}

.page-band__title:focus { outline: none; }

.page-band__lead {
    margin: 0.4rem 0 0;
    max-width: 40rem;
    line-height: 1.55;
    color: var(--color-text-subtle);
}

.page-band__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

@media (max-width: 640px) {
    .page-band { padding: 1.25rem; }
    .page-band__art { width: 4rem; }
    .page-band__actions { width: 100%; }
}

/* ── Pill tabs (Components/Shared/PillTabs.razor) ── */
.pill-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem;
    margin-bottom: 1.25rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--color-border);
    max-width: 100%;
}

.pill-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.4rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-subtle);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.pill-tab:hover { background: #F6F0FF; color: var(--color-text-strong); }
.pill-tab .material-icons { font-size: 1.1rem; }
.pill-tab[aria-selected="true"] { background: var(--color-primary); color: #fff; }
.pill-tab:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }

.pill-tab__count {
    font-size: 0.72rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--color-surface-elevated);
    color: var(--color-text);
}

.pill-tab[aria-selected="true"] .pill-tab__count { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* Phones: one row that scrolls sideways, rather than tabs wrapping onto uneven rows. */
@media (max-width: 640px) {
    .pill-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .pill-tabs::-webkit-scrollbar { display: none; }
    .pill-tab { flex: 0 0 auto; padding: 0.4rem 0.85rem; }
}

/* ── Sign-in pages (Components/Account/Shared/AuthShell.razor) ────────────────
   A friendly panel with a collie on the left, the form in a clean card on the right. */
.auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    min-height: calc(100vh - 4rem);
    background: var(--color-background);
}

.auth-story {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
    background: linear-gradient(160deg, #EFE2FF 0%, #FFE9F5 55%, #E7F6FF 100%);
}

.auth-story__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.auth-story__glow span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.45; animation: auth-drift 30s ease-in-out infinite alternate; }
.auth-story__glow span:nth-child(1) { width: 26rem; height: 26rem; background: #B98CFF; top: -10rem; left: -8rem; }
.auth-story__glow span:nth-child(2) { width: 22rem; height: 22rem; background: #FF9BD6; bottom: -10rem; right: -6rem; animation-delay: -10s; }
.auth-story__glow span:nth-child(3) { width: 14rem; height: 14rem; background: #8FE6CB; top: 40%; right: 15%; opacity: 0.3; animation-delay: -20s; }

@keyframes auth-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(2rem, 1.5rem) scale(1.06); }
}

/* Stays in view beside a long form (registration). */
.auth-story__inner { max-width: 24rem; position: sticky; top: 6rem; }

.auth-story__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--color-primary-strong);
    text-decoration: none;
}

.auth-story__art { margin: 1.5rem 0 1rem; }
.auth-dog { display: block; width: 13rem; height: auto; }

.auth-story__title {
    margin: 0 0 1rem;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-text-strong);
}

.auth-story__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.auth-story__points li { display: flex; gap: 0.5rem; align-items: flex-start; line-height: 1.5; color: var(--color-text); }
.auth-story__points .material-icons { font-size: 1.2rem; color: #12A27A; margin-top: 0.1rem; }

.auth-story__paws { display: block; width: 100%; max-width: 18rem; margin-top: 2rem; }
.auth-paw { fill: var(--color-primary); opacity: 0.15; animation: auth-step 4.2s ease-in-out infinite; }

@keyframes auth-step {
    0%, 100% { opacity: 0.12; }
    20%, 45% { opacity: 0.6; }
}

.auth-form { display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.auth-form__inner { width: 100%; max-width: 27rem; }

.auth-form__title {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--color-text-strong);
}

.auth-form__title:focus { outline: none; }
.auth-form__subtitle { margin: 0.4rem 0 1.5rem; color: var(--color-text-subtle); }

.auth-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: 0 20px 45px -28px rgba(91, 33, 182, 0.35), var(--shadow-card);
}

.auth-form__footer { margin-top: 1.25rem; text-align: center; color: var(--color-muted); font-size: 0.92rem; }

/* Phones and small tablets: the panel becomes a short strip above the form. */
@media (max-width: 900px) {
    .auth { grid-template-columns: 1fr; min-height: 0; }
    .auth-story { padding: 1.5rem 1.25rem 1.25rem; justify-content: flex-start; }
    .auth-story__inner { position: static; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 1rem; max-width: none; width: 100%; }
    .auth-story__brand, .auth-story__points, .auth-story__paws { display: none; }
    .auth-story__art { margin: 0; grid-row: 1; }
    .auth-dog { width: 5.5rem; }
    .auth-story__title { margin: 0; font-size: 1.25rem; }
    .auth-form { padding: 1.5rem 1rem 2.5rem; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-story__glow span, .auth-paw { animation: none; }
    .auth-paw { opacity: 0.35; }
}

/* --- /heelwork-to-music photographs (images/photos) ------------------- */
.htm-photo {
    position: relative;
    margin: 0;
    border-radius: 1rem;
    overflow: hidden;
    background: #F3ECFF;
    box-shadow: 0 18px 40px -26px rgba(91, 33, 182, 0.45), 0 0 0 1px var(--pastel-border);
}

.htm-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.htm-photo:hover img { transform: scale(1.04); }

.htm-photo figcaption {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--pastel-text);
    font-size: 0.75rem;
    font-weight: 700;
}

/* Hero: words beside a photo; stacked on phones. */
.htm-hero {
    display: grid;
    gap: 1.75rem;
    align-items: center;
}

.htm-hero__photo { aspect-ratio: 4 / 5; max-height: 24rem; }

@media (min-width: 900px) {
    .htm-hero { grid-template-columns: 1fr 20rem; }
}

@media (max-width: 899px) {
    .htm-hero__photo { aspect-ratio: 3 / 2; max-height: none; }
    .htm-hero__photo img { object-position: center 30%; }
}

/* Discipline cards: a photo across the top. */
.htm-card { padding-top: 0; overflow: hidden; }

.htm-card__photo {
    margin: 0 -1.2rem 1rem;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

/* Framed low enough to keep the dog, which is at the handler's feet; --focus is set per card. */
.htm-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center var(--focus, 65%); display: block; }

/* Stories strip. */
.htm-strip__lead { margin: 0.5rem 0 0.75rem; font-weight: 600; color: var(--pastel-text); }

.htm-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(4, 1fr);
}

.htm-strip .htm-photo { aspect-ratio: 3 / 4; }

@media (max-width: 899px) {
    .htm-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Getting started: words beside two smaller-dog photos. */
.htm-start { display: grid; gap: 1.5rem; align-items: start; }

.htm-start__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.htm-start__photos .htm-photo { aspect-ratio: 3 / 4; }

@media (min-width: 900px) {
    .htm-start { grid-template-columns: 1fr 24rem; }
}

/* FAQ heading with the curious collie. */
.htm-faq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.htm-faq-head__dog { width: 5.5rem; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
    .htm-photo img, .htm-photo:hover img { transition: none; transform: none; }
}

/* Wider guides (74rem) would blow screenshots up past their natural size: keep them about as
   large as before, centred in the column. */
.guide-shots, .guide-shot { max-width: 60rem; }

@media (min-width: 900px) {
    .htm-card__photo { aspect-ratio: 4 / 3; }
}

/* --- Photographs as backgrounds (Shared/PhotoFade.razor) ------------------
   The photo takes one side of its band and melts into the band's own colour
   towards the text, and a little at the foot. Text never sits on the busy part.
   Set --pf-width (how much of the band) and --pf-focus (vertical framing). */
.photo-fade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--pf-width, 52%);
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(0deg, transparent 0%, #000 22%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(0deg, transparent 0%, #000 22%);
    mask-composite: intersect;
}

.photo-fade img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center var(--pf-focus, 35%);
}

.photo-fade-host { position: relative; overflow: hidden; isolation: isolate; }
.photo-fade-host > :not(.photo-fade):not(.photo-credit):not([aria-hidden="true"]) { position: relative; z-index: 1; }

/* Phones: no room beside the text, so either drop the photo or run it as a faded strip on top. */
@media (max-width: 899px) {
    .photo-fade { display: none; }
    .photo-fade--phones {
        display: block;
        top: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 11rem;
        -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
    }
}

/* Guide headers with a photo: keep the words to the left part. */
@media (min-width: 900px) {
    .guide-hero--photo .guide-hero-lead,
    .guide-hero--photo h1 { max-width: 34rem; }
    .guide-hero--photo .guide-hero-actions { max-width: 40rem; }
}

/* Sign-in and register: a full photo panel beside the form. */
.auth-story__photo { display: none; }

@media (min-width: 901px) {
    .auth-story--photo { background: #2A1745; align-items: flex-end; }
    .auth-story--photo .auth-story__glow,
    .auth-story--photo .auth-story__art { display: none; }
    .auth-story--photo .auth-story__photo {
        display: block;
        position: absolute;
        inset: 0;
        z-index: -1;
    }
    .auth-story--photo .auth-story__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%;
    }
    /* A purple fade up from the foot, for the words. */
    .auth-story--photo .auth-story__photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(42, 23, 69, 0) 52%, rgba(42, 23, 69, 0.8) 78%, rgba(42, 23, 69, 0.95) 100%);
    }
    .auth-story--photo .auth-story__inner { position: static; padding-bottom: 1rem; }
    .auth-story--photo .auth-story__title { color: #fff; }
    .auth-story--photo .auth-story__points li { color: #EDE4FF; }
    .auth-story--photo .auth-story__points .material-icons { color: #7BE8C6; }
    .auth-story--photo .auth-paw { fill: #fff; }
}

.guide-hero__photo { --pf-width: 42%; --pf-focus: 38%; }

/* /events header: a soft lilac band with the play-bow collie on the right. */
.pub-events-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    border-radius: 1.25rem;
    padding: 2rem 2rem 2.25rem;
    margin: 0 0 1.5rem;
    background: linear-gradient(135deg, #F6EFFF 0%, #FFF0F8 100%);
    border: 1px solid rgba(164, 80, 255, 0.14);
}
.pub-events-head .pub-lead { margin-bottom: 0; max-width: 34rem; }
.pub-events-head__dog { width: 10rem; flex-shrink: 0; margin-right: 1rem; }

@media (max-width: 899px) {
    .pub-events-head { padding: 1.5rem 1.25rem; }
    .pub-events-head__dog { display: none; }
}

/* Discipline cards on wide screens: the whole portrait beside the text, so the handler's face and
   the dog are both in view (a strip across the top could only show one or the other). */
@media (min-width: 900px) {
    .htm-card {
        display: grid;
        grid-template-columns: 14rem 1fr;
        grid-template-rows: auto 1fr;
        column-gap: 1.25rem;
        padding: 0 1.25rem 0 0;
    }
    .htm-card__photo {
        grid-row: 1 / span 2;
        margin: 0;
        aspect-ratio: auto;
        min-height: 19rem;
        height: 100%;
    }
    .htm-card__photo img { object-position: center 40%; }
    .htm-card .guide-feature-title { margin-top: 1.15rem; }
    .htm-card > p:last-child { margin-bottom: 1.15rem; }
}

/* --- Photographer credit (Shared/PhotoCredit.razor) ---------------------- */
.photo-credit {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(23, 17, 43, 0.55);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    opacity: 0.85;
    backdrop-filter: blur(4px);
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.photo-credit .material-icons { font-size: 0.85rem; }

.photo-credit:hover,
.photo-credit:focus-visible { opacity: 1; background: rgba(23, 17, 43, 0.75); color: #fff; }

.photo-credit--top { top: 0.75rem; bottom: auto; }

/* Bands whose photo is hidden on phones don't need its credit there either. */
@media (max-width: 899px) {
    .guide-hero .photo-credit { display: none; }
}

/* The sign-in panel shows its photo only on wide screens. */
.auth-photo-credit { display: none; }
@media (min-width: 901px) {
    .auth-story--photo .auth-photo-credit { display: inline-flex; }
}

/* ── Entering an event (entry form rows, music, My Entries) ───────────────
   Shared by the entry rows, MusicUploadBox and the My Entries music dialog. */
.music-box { display: grid; gap: 0.45rem; align-content: start; }
.music-box__head { display: flex; align-items: center; gap: 0.4rem; }
.music-box__need { font-size: 0.8rem; font-weight: 700; color: var(--color-muted); }
.music-box__need--required { color: #B42318; }
.music-box__rule { margin: 0; font-size: 0.92rem; color: var(--color-text); }

.music-box .upload-dropzone {
    position: relative;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--color-primary);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
}

.music-box__pick { display: flex; justify-content: center; width: 100%; cursor: pointer; }

.music-box__file {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: #11684A;
    overflow-wrap: anywhere;
}

.music-box__file .material-icons { font-size: 1.1rem; }

.music-box__help {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-primary-strong);
    text-decoration: underline;
    cursor: pointer;
}

.music-box__help .material-icons { font-size: 1.05rem; text-decoration: none; }

/* Class choices: the price and places left beside the name */
.entry-class-option__meta { margin-left: 0.5rem; color: var(--color-text); }
.entry-class-option__left { margin-left: 0.5rem; color: var(--color-muted); }
.entry-class-option__left--few { color: #B54708; font-weight: 600; }
.entry-class-option__full { margin-left: 0.5rem; color: #B42318; font-weight: 700; }

/* A row that still needs something once Pay has been pressed */
.entry-row--incomplete { outline: 2px solid #E5484D; outline-offset: 2px; scroll-margin-top: 90px; }

.entry-row__needed {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.6rem 0 0;
    font-size: 0.92rem;
    color: var(--color-muted);
}

.entry-row__needed .material-icons { font-size: 1.05rem; }
.entry-row__needed--alert { color: #B42318; font-weight: 700; }

/* "More about ..." small print, folded away */
.entry-more { margin-top: 0.75rem; }
.entry-more > summary { cursor: pointer; font-weight: 600; color: var(--color-primary-strong); }

/* ── Big choice cards (dashboard "What would you like to do?", the Help page) ──
   Two or three large doors, each a whole-card link with a picture or icon, a title and a
   sentence. Big on purpose: for someone new, this is the first decision the site asks of them. */
.choice-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.choice-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    height: 100%;
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: #fff;
    border: 2px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.choice-card:hover,
.choice-card:focus-visible {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -18px rgba(23, 17, 43, 0.45);
}

.choice-card__art { width: 7rem; }
.choice-card__art svg { width: 100%; height: auto; display: block; }

.choice-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: #F3EBFF;
    color: var(--color-primary-strong);
}

.choice-card__icon .material-icons { font-size: 1.6rem; }

.choice-card__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-text-strong);
}

.choice-card__text { margin: 0; line-height: 1.55; color: var(--color-text-subtle); }

.choice-card__go {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: auto;
    padding-top: 0.4rem;
    font-weight: 700;
    color: var(--color-primary-strong);
}

.choice-card__go .material-icons { font-size: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
    .choice-card { transition: none; }
    .choice-card:hover, .choice-card:focus-visible { transform: none; }
}

/* ── Keyboard focus ────────────────────────────────────────────────────────
   A clear ring on whatever has keyboard focus, in the brand purple (over 3:1 against white and
   the lilac backgrounds). The old .btn ring was the soft lilac, which all but vanished on white.
   :focus-visible, so mouse and touch users don't see rings after every tap. */
:where(a, button, summary, [role="button"], [tabindex]):focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* The glow buttons light up for keyboard focus exactly as they do on hover. */
.btn-glow-primary:focus-visible:before,
.btn-glow-secondary:focus-visible:before,
.btn-glow-success:focus-visible:before,
.btn-glow-rainbow:focus-visible:before,
.btn-glow-pastel-rainbow:focus-visible:before,
.btn-outlined:focus-visible:before,
.btn-subtle:focus-visible:before {
    opacity: 1;
}

/* ── Text contrast ─────────────────────────────────────────────────────────
   Two colours used for text were too faint to read comfortably: the pink secondary (#FF7CCB,
   about 2.3:1 on white) and Tailwind's gray-400 (about 2.5:1). Fixed here rather than at each
   use, so every page gets it. Both keep their hue; they are just deep enough now (4.5:1+). */
:root {
    --color-secondary-text: #C2187E;
}

.text-pastel-secondary { color: var(--color-secondary-text); }

/* Doubled class to win over the Tailwind utility, which loads after this file. */
.text-gray-400.text-gray-400 { color: #6B7280; }

/* Tailwind's text-xs is 12px - too small for the small print people still need to read.
   Lifted to 13px everywhere it is used. Doubled class for the same reason as above. */
.text-xs.text-xs {
    font-size: 0.8125rem;
    line-height: 1.15rem;
}

/* ── Reload button on the error bar (AuthenticatedLayout) ── */
.btn-reload {
    background: #fff;
    color: var(--color-error-strong);
    min-width: 0;
}

/* ── Confirmation boxes (DialogService.ShowMessageBox) ─────────────────────
   MudBlazor draws these with flat text buttons. Restyled to match the site: the confirm button
   as a filled purple pill like .btn-glow-primary, cancel as an outlined pill. One place, so every
   "Are you sure?" across the site looks the same. */
.mud-message-box .mud-dialog-actions {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem 1.25rem;
}

.mud-message-box .mud-dialog-content {
    font-size: 1rem;
    line-height: 1.55;
}

.mud-message-box .mud-message-box__yes-button,
.mud-message-box .mud-message-box__no-button,
.mud-message-box .mud-message-box__cancel-button {
    min-height: 46px;
    padding: 10px 22px;
    border-radius: 99px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    margin: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background-color 0.2s ease;
}

.mud-message-box .mud-message-box__yes-button {
    order: 3;
    background-color: var(--btn-surface-primary);
    color: var(--text-on-primary);
}

.mud-message-box .mud-message-box__yes-button:hover,
.mud-message-box .mud-message-box__yes-button:focus-visible {
    background-color: var(--color-primary-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 30, 70, 0.15);
}

.mud-message-box .mud-message-box__no-button,
.mud-message-box .mud-message-box__cancel-button {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary-strong);
}

.mud-message-box .mud-message-box__no-button:hover,
.mud-message-box .mud-message-box__cancel-button:hover {
    background: #F3EBFF;
}

/* ── Snackbars on phones ───────────────────────────────────────────────────
   Top-right is out of the way on a desktop; on a phone it sits under the notch and away from
   the thumb. Bottom centre instead, clear of the tab bar. */
@media (max-width: 639px) {
    #mud-snackbar-container.mud-snackbar-location-top-right {
        top: auto;
        right: 0.75rem;
        left: 0.75rem;
        bottom: calc(var(--app-bottomnav-total, 0px) + 0.75rem);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #mud-snackbar-container .mud-snackbar {
        width: 100%;
        min-width: 0;
    }
}

/* ── Printing ──────────────────────────────────────────────────────────────
   Paper gets the page content only, black on white: no menus, header bar, tab bar, help or
   assistant buttons, or messages. PrintButton (Components/Shared) puts a "Print" button on a
   page; .no-print hides anything else that shouldn't go on paper. */
@media print {
    #main-sidebar,
    .app-header,
    .app-bottomnav,
    .app-scrim,
    .brand-top-bar,
    #blazor-error-ui,
    #components-reconnect-modal,
    #mud-snackbar-container,
    .help-drawer-overlay,
    .help-drawer-panel,
    .ai-chat-toggle,
    .ai-chat-panel,
    .guest-menu,
    .no-print,
    .print-button {
        display: none !important;
    }

    html,
    body,
    .app-shell,
    .app-body,
    .app-content,
    .content-area {
        background: #fff !important;
        background-image: none !important;
        color: #000 !important;
    }

    .app-content {
        padding-bottom: 0 !important;
    }

    body * {
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a {
        text-decoration: underline;
    }

    .panel-glow,
    .dash-card,
    .page-band {
        background: #fff !important;
        border: 1px solid #999 !important;
    }

    .page-band__glow,
    .dash-band__glow {
        display: none !important;
    }
}

/* ── Assistant button (Shared/AiChat/AiChatWidget) ──
   Bottom-right corner, lifted clear of the phone tab bar so it never sits on top of "More";
   the open chat panel sits above the button. */
.ai-chat-toggle {
    right: 1.5rem;
    bottom: calc(var(--app-bottomnav-total, 0px) + 1.5rem);
}

.ai-chat-panel {
    right: 1.5rem;
    bottom: calc(var(--app-bottomnav-total, 0px) + 6rem);
}

@media (max-width: 1023px) {
    .ai-chat-toggle {
        right: 1rem;
        bottom: calc(var(--app-bottomnav-total, 0px) + 0.75rem);
    }

    .ai-chat-panel {
        right: 1rem;
        bottom: calc(var(--app-bottomnav-total, 0px) + 5.25rem);
    }
}

/* ── Loading and connection (App.razor) ────────────────────────────────────
   #app-loading fills the moment between a signed-in page arriving and the live connection
   drawing it. It fades in after a short delay so a fast load never flashes it, and goes as soon
   as the app shell is on the page. */
#app-loading {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    opacity: 0;
    animation: appLoadingIn 0.3s ease 0.4s forwards;
}

body:has(.app-shell) #app-loading,
body:has(.auth) #app-loading {
    display: none;
}

@keyframes appLoadingIn {
    to { opacity: 1; }
}

/* The "Lost connection" box. Hidden until blazor.web.js adds a state class. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(35, 22, 37, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.reconnect-card {
    width: 100%;
    max-width: 26rem;
    padding: 1.75rem 1.5rem;
    border-radius: 1.25rem;
    background: linear-gradient(160deg, #F4EBFF 0%, #FFF0F8 60%, #EFF8FF 100%);
    border: 1px solid var(--color-border);
    box-shadow: 0 24px 60px -24px rgba(23, 17, 43, 0.55);
    text-align: center;
}

.reconnect-state { display: none; flex-direction: column; align-items: center; gap: 0.75rem; }

.components-reconnect-show .reconnect-state--trying,
.components-reconnect-failed .reconnect-state--failed,
.components-reconnect-rejected .reconnect-state--rejected {
    display: flex;
}

.reconnect-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text-strong);
}

.reconnect-text { margin: 0; color: var(--color-text-subtle); line-height: 1.5; }

/* ── "New here or been before?" choice on the sign-in page (Login.razor) ──
   Shown when someone is sent to sign in by something that needs an account. */
.auth-choice {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.auth-choice__card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    border: 2px solid var(--color-border);
    background: #FCFAFF;
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.auth-choice__card:hover,
.auth-choice__card:focus-visible {
    border-color: var(--color-primary);
    background: #F3EBFF;
}

.auth-choice__card > .material-icons {
    flex-shrink: 0;
    font-size: 1.8rem;
    color: var(--color-primary-strong);
}

.auth-choice__card strong { display: block; font-size: 1.05rem; color: var(--color-text-strong); }
.auth-choice__card small { display: block; margin-top: 0.15rem; font-size: 0.9rem; color: var(--color-text-subtle); }

/* The "At least 8 characters" line under a password field. */
.field-hint {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    color: var(--color-text-subtle);
}

/* ── Plain form controls and notices for the static account pages ──
   (/Account/*: sign-in codes, recovery codes, setting a password). Those pages render without
   interactivity, so they use plain inputs rather than MudBlazor's, styled to match. */
.site-input {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.75rem;
    background: #fff;
    font-size: 1rem;
    color: var(--color-text-strong);
}

.site-input:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
}

.site-input--code {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.4em;
}

.site-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    cursor: pointer;
}

.site-check input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--color-primary);
}

.notice {
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    border: 1px solid;
    line-height: 1.5;
}

.notice:has(> .material-icons) {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.notice p { margin: 0 0 0.4rem; }
.notice p:last-child { margin-bottom: 0; }
.notice > .material-icons { font-size: 1.25rem; margin-top: 0.1rem; }

.notice--info { background: #EEF6FF; border-color: #BFDBFE; color: #1E3A8A; }
.notice--warning { background: #FFF7E6; border-color: #FCD9A0; color: #7A4300; }

/* ── "Try a practice event" (create step one, dashboard) ── */
.practice-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    border: 2px dashed #F5B94A;
    background: #FFFAEF;
}
.practice-callout > div { flex: 1 1 22rem; }
.practice-callout > div > strong { display: block; color: #7A4B00; font-size: 1.05rem; margin-bottom: 0.2rem; }
.practice-callout > div > span { color: var(--color-text); }

.dash-start__practice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 1.25rem 0 0;
    color: var(--color-muted);
}

/* Organiser previews (PublicEvent and EventEntryForm with ?preview=1): the assistant banner's
   lilac look, with a dashed edge so it reads as "not the real thing". */
.assist-banner--preview {
    border: 2px dashed var(--color-primary);
}

.assist-banner__list { margin: 0.2rem 0 0; padding-left: 1.2rem; list-style: disc; font-size: 0.9rem; color: var(--color-text); }

/* While the class music player is open it covers the bottom of the screen; room below the page
   lets the last entrants scroll up above it. */
body:has([data-player-root]) { padding-bottom: 450px; }