/*
 * Racer profile page (Views/Racers/Index.cshtml)
 * Class names use the semantic `profile-` namespace (renamed from the former
 * v3-/v4-/v5- redesign-iteration prefixes).
 */
        #kt_body {
            --kt-toolbar-height: 0px !important;
            --kt-toolbar-height-tablet-and-mobile: 0px !important;
        }
        #kt_toolbar { display: none !important; }

        #kt_content {
            --results-accent: #009ef7;
            --results-accent-surface: #eef8ff;
            --results-content-inline-pad: 1.75rem;
        }

        /* Header meta trail */
        .organization-header-meta-slot {
            margin-top: 0;
            display: flex;
            align-items: center;
            min-width: 0;
            justify-content: flex-start;
        }
        .results-header-meta {
            display: flex;
            align-items: center;
            min-width: 0;
            justify-content: flex-start;
        }
        .results-header-trail {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            gap: 0.2rem 0.5rem;
            min-width: 0;
        }
        .results-header-trail-item {
            margin: 0;
            font-size: inherit;
            font-weight: inherit;
            line-height: inherit;
            color: inherit;
            white-space: nowrap;
        }
        .results-header-trail-item--separated::before {
            content: "|";
            margin-right: 0.5rem;
            color: #a1a5b7;
        }
        @media (min-width: 992px) {
            .organization-header-primary--with-meta {
                flex: 1 1 auto !important;
                min-width: 0;
                justify-content: flex-start;
            }
            .organization-header-secondary--with-meta {
                flex: 0 0 auto !important;
            }
            .organization-header-meta-slot {
                width: auto;
                flex: 0 1 auto;
                margin-top: 0;
            }
            .results-header-trail {
                flex-wrap: nowrap;
            }
        }
        @media (max-width: 991.98px) {
            .organization-header-meta-slot {
                flex-basis: 100%;
            }
        }

        /* Page layout / surface chrome */
        .results-layout {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        .results-surface {
            border: 1px solid var(--border-subtle);
            border-radius: 1.5rem;
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
            box-shadow: var(--shadow-card);
        }
        .results-surface .card-header {
            padding-left: var(--results-content-inline-pad);
            padding-right: var(--results-content-inline-pad);
        }
        .results-surface .card-body {
            padding-left: var(--results-content-inline-pad);
            padding-right: var(--results-content-inline-pad);
        }

        /* V5 hero — V1 reference banner inside a results-surface card */
        .profile-hero-card {
            padding: 1rem;
        }
        .profile-hero {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
            border: 1px solid #dee2e6;
            border-radius: 0.475rem;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }
        .profile-hero::before {
            content: '';
            position: absolute;
            top: -40%;
            right: -5%;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(0,0,0,0.03) 0%, transparent 65%);
            pointer-events: none;
        }
        .profile-hero::after {
            content: attr(data-watermark);
            position: absolute;
            right: 30px;
            bottom: -15px;
            font-weight: 800;
            font-size: 8rem;
            text-transform: uppercase;
            color: rgba(0,0,0,0.03);
            pointer-events: none;
            line-height: 1;
            white-space: nowrap;
        }
        /* Banner image variant — dark gradient overlay over uploaded photo */
        .profile-hero--has-banner {
            background-color: var(--color-navy);
            /* Banner URL supplied inline as --profile-hero-banner (server data / JS upload). */
            background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), var(--profile-hero-banner);
            background-size: cover;
            /* Focal point chosen by the racer (--profile-hero-banner-pos, supplied inline as
               "X% Y%"); centre for anyone who never set one. The gradient layer is unaffected —
               a gradient has no intrinsic size, so it fills the box at any position. */
            background-position: var(--profile-hero-banner-pos, center);
            background-repeat: no-repeat;
        }
        .profile-hero--has-banner::before { display: none; }
        .profile-hero--has-banner::after { color: rgba(255,255,255,0.08); }
        .profile-hero--has-banner .profile-name-first,
        .profile-hero--has-banner .profile-name-last { color: #ffffff; }
        .profile-hero--has-banner .profile-rank-badge {
            background-color: rgba(255,255,255,0.95);
            border-color: #ffffff;
        }
        .profile-hero--has-banner .profile-info-card {
            background: rgba(0,0,0,0.45);
            border-color: rgba(255,255,255,0.18);
            backdrop-filter: blur(10px);
        }
        .profile-hero--has-banner .profile-info-label,
        .profile-hero--has-banner .profile-info-value { color: #ffffff; }
        .profile-hero--has-banner .profile-info-row { border-bottom-color: rgba(255,255,255,0.12); }
        .profile-hero-banner-actions {
            position: absolute;
            /* Desktop: align top with the top of the headshot (= hero top padding),
               and sit further to the left of the headshot. */
            top: 2rem;
            right: calc(180px + 4rem);
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }
        .profile-hero-edit-banner-btn,
        .profile-hero-position-banner-btn,
        .profile-hero-remove-banner-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.35rem 0.7rem;
            background: rgba(0,0,0,0.55);
            color: #fff;
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: 0.4rem;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            cursor: pointer;
            transition: background 0.15s;
        }
        .profile-hero-edit-banner-btn:hover,
        .profile-hero-position-banner-btn:hover { background: rgba(0,0,0,0.75); }
        .profile-hero-remove-banner-btn { padding: 0.35rem 0.5rem; }
        .profile-hero-remove-banner-btn:hover {
            background: rgba(220, 53, 69, 0.85);
            border-color: rgba(255,255,255,0.4);
        }
        /* Banner framing dialog (#bannerPositionModal). The stage holds the whole uploaded photo;
           the frame is the slice the hero shows, and everything outside it is dimmed by the frame's
           own huge spread box-shadow (one element instead of four shade panels). */
        .banner-position-help {
            font-size: 1rem;
            font-weight: 500;
            color: var(--color-navy);
            margin: 0 0 0.85rem 0;
        }
        .banner-position-note {
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--color-navy);
            margin: 0.85rem 0 0 0;
        }
        .banner-position-stage {
            position: relative;
            overflow: hidden;
            border-radius: 0.475rem;
            background: var(--surface-tint);
            line-height: 0;
            /* Touch drags must move the frame, not scroll the modal. */
            touch-action: none;
            -webkit-user-select: none;
            user-select: none;
            cursor: grab;
        }
        .banner-position-stage.is-dragging { cursor: grabbing; }
        .banner-position-stage img {
            display: block;
            width: 100%;
            height: auto;
            pointer-events: none;
        }
        .banner-position-frame {
            position: absolute;
            top: 0;
            left: 0;
            box-sizing: border-box;
            border: 2px solid #ffffff;
            /* The dim outside the frame — clipped by the stage's overflow: hidden. */
            box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
            cursor: grab;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 0.4rem;
        }
        .banner-position-frame:focus-visible {
            outline: 2px solid var(--color-blue);
            outline-offset: 2px;
        }
        .banner-position-stage.is-dragging .banner-position-frame { cursor: grabbing; }
        .banner-position-frame-label {
            font-size: 0.85rem;
            font-weight: 700;
            line-height: 1.2;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #ffffff;
            background: rgba(0, 0, 0, 0.55);
            border-radius: 0.3rem;
            padding: 0.2rem 0.5rem;
            white-space: nowrap;
            pointer-events: none;
        }
        /* A frame shorter than its own label would be all label — hide it and let the dim speak. */
        .banner-position-frame.is-tight .banner-position-frame-label { display: none; }

        .profile-headshot-remove-btn {
            position: absolute;
            top: 0.35rem;
            right: 0.35rem;
            z-index: 3;
            padding: 0.35rem 0.5rem;
            border-radius: 0.4rem;
            border: 1px solid rgba(255,255,255,0.25);
            background: rgba(0,0,0,0.55);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s, background 0.15s, border-color 0.15s;
        }
        .profile-headshot:hover .profile-headshot-remove-btn { opacity: 1; }
        .profile-headshot-remove-btn:hover {
            background: rgba(220, 53, 69, 0.85);
            border-color: rgba(255,255,255,0.4);
        }
        .profile-hero-outer {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 1rem;
            position: relative;
            z-index: 1;
        }
        .profile-hero-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-rows: auto auto;
            gap: 1rem;
            position: relative;
            z-index: 1;
        }
        .profile-name-block { grid-column: 1; grid-row: 1; }
        .profile-hero-grid > .profile-headshot { grid-column: 2; grid-row: 1 / 3; align-self: start; }
        .profile-hero-grid > .profile-info-card { grid-column: 1; grid-row: 2; }
        /* Racer-number badge — white fill, black border; digit uses Career Highlights typography (Poppins 800) */
        .profile-rank-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 3.4rem;
            height: 3.25rem;
            padding: 0 0.55rem;
            background-color: #ffffff;
            border: 2px solid #000;
            border-radius: 0.475rem;
            box-sizing: border-box;
            width: fit-content;
        }
        .profile-rank-badge .profile-rank-text {
            color: var(--color-navy);
            font-weight: 800;
            font-size: 2.2rem;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }
        .profile-name-first {
            font-size: 0.95rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--color-navy);
            line-height: 1.3;
        }
        .profile-name-last {
            font-size: 3rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: -0.005em;
            line-height: 1.05;
            color: var(--color-navy);
        }
        .profile-info-card {
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(12px);
            border: 1px solid var(--border-subtle);
            border-radius: 0.5rem;
            max-width: 340px;
            overflow: hidden;
        }
        .profile-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding: 0.55rem 1rem;
            border-bottom: 1px solid var(--border-subtle);
        }
        .profile-info-row:last-child { border-bottom: none; }
        .profile-info-value.profile-license-value {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            justify-content: flex-end;
            flex-wrap: wrap;
        }
        .profile-license-pending {
            font-size: 0.85rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 0.15rem 0.45rem;
            border-radius: 0.3rem;
            background: #fff8e1;
            color: #8a6d00;
            border: 1px solid #f1d57b;
        }
        .profile-hero--has-banner .profile-license-pending {
            background: rgba(255, 209, 102, 0.18);
            color: #fff3c4;
            border-color: rgba(255, 209, 102, 0.45);
        }
        .profile-license-request-link {
            font-size: 0.85rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--results-accent, #009ef7);
            text-decoration: none;
        }
        .profile-license-request-link:hover { text-decoration: underline; }
        .profile-hero--has-banner .profile-license-request-link { color: #c8e7ff; }
        .profile-info-label {
            font-size: 0.9rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-navy);
        }
        .profile-info-value {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--color-navy);
            text-align: right;
        }
        .profile-headshot {
            width: 180px;
            height: 230px;
            background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
            border: 1px solid #dee2e6;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        .profile-headshot img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .profile-headshot-initials {
            font-weight: 700;
            font-size: 3.5rem;
            color: #adb5bd;
            opacity: 0.5;
        }
        .profile-headshot-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.45);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s;
            cursor: pointer;
            border-radius: 6px;
        }
        .profile-headshot:hover .profile-headshot-overlay { opacity: 1; }
        .profile-headshot-overlay i { font-size: 1.8rem; color: #fff; }
        @media (max-width: 900px) {
            .profile-hero-card { padding: 0.75rem; }
            .profile-hero { padding: 1.5rem; }
            .profile-hero-outer { grid-template-columns: 1fr; }
            .profile-hero-grid {
                grid-template-columns: auto 1fr;
                grid-template-rows: auto auto;
            }
            .profile-hero-grid > .profile-headshot { grid-column: 1; grid-row: 1; align-self: center; width: 120px; height: 155px; }
            .profile-name-block { grid-column: 2; grid-row: 1; align-self: center; }
            .profile-hero-grid > .profile-info-card { grid-column: 1 / -1; grid-row: 2; max-width: 100%; }
            .profile-headshot-initials { font-size: 2.5rem; }
            .profile-name-last { font-size: 2.25rem; }
            .profile-rank-badge { min-width: 2.85rem; height: 2.75rem; }
            .profile-rank-badge .profile-rank-text { font-size: 1.85rem; }
            /* Mobile: headshot moves to the left, so pin the banner-actions group back to the top-right corner. */
            .profile-hero-banner-actions { top: 0.85rem; right: 0.85rem; }
            /* Mobile: hover isn't reliable on touch, so keep the headshot remove button always visible. */
            .profile-headshot-remove-btn { opacity: 1; }
        }
        @media (max-width: 575.98px) {
            /* Three pills would reach across the hero into the number plate on a narrow phone, so
               Position drops to its icon (the dialog's own title carries the word). */
            .profile-hero-position-banner-btn { padding: 0.35rem 0.5rem; }
            .profile-hero-position-banner-btn > span { display: none; }
        }
        @media (max-width: 600px) {
            .profile-hero::after { display: none; }
            .profile-hero-grid > .profile-headshot { width: 100px; height: 130px; }
            .profile-headshot-initials { font-size: 2rem; }
            .profile-name-last { font-size: 1.85rem; }
            .profile-name-first { font-size: 0.85rem; }
        }

        /* Tab-bar trailing actions (version selector + claim) */
        .profile-tab-actions {
            margin-left: auto;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.85rem;
            padding: 0.35rem 0;
        }


        /* Section headers */
        .profile-section-title {
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--color-navy);
            margin: 0;
            line-height: 1.2;
            letter-spacing: -0.005em;
        }
        .profile-section-subtitle {
            color: var(--color-navy);
            font-size: 1rem;
            font-weight: 500;
            margin: 0.3rem 0 0 0;
        }

        /* Career highlight stat tiles */
        .profile-stats-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 1px;
            background-color: var(--border-subtle);
            border-radius: 1rem;
            overflow: hidden;
        }
        .profile-stat-tile {
            background: #ffffff;
            padding: 1.5rem 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
        }
        .profile-stat-number {
            font-weight: 800;
            font-size: 2rem;
            color: var(--color-navy);
            line-height: 1;
        }
        .profile-stat-label {
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--color-navy);
            text-align: center;
        }
        @media (max-width: 991.98px) {
            .profile-stats-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
            .profile-stat-number {
                font-size: 1.65rem;
            }
        }
        @media (max-width: 575.98px) {
            .profile-stats-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        /* ─── Profile analytics: rates, trend, donut, milestones, numbers ─── */
        .profile-rates-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1px;
            background-color: var(--border-subtle);
            border-radius: 1rem;
            overflow: hidden;
            margin-bottom: 0;
        }
        .profile-rate-tile {
            background: #ffffff;
            padding: 1.25rem 0.75rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
            text-align: center;
        }
        .profile-rate-number {
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            font-size: 1.85rem;
            color: var(--color-navy);
            line-height: 1;
        }
        .profile-rate-label {
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--color-navy);
        }
        @media (max-width: 767.98px) {
            .profile-rates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .profile-rate-number { font-size: 1.5rem; }
        }

        /* Finish-position distribution bar chart — buckets racer's finishes
           by position group (P1, P2, P3, P4-5, P6-10, P11+) with bar heights
           relative to the most-frequent bucket. Far clearer than a per-race line
           when a racer is dominant or has many results. */
        .profile-dist-row {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 0.5rem;
            align-items: end;
            min-height: 170px;
        }
        .profile-dist-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.4rem;
            min-width: 0;
        }
        .profile-dist-bar-wrap {
            position: relative;
            width: 100%;
            height: 130px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            background: var(--surface-tint);
            border-radius: 0.5rem;
            padding: 0.35rem;
        }
        .profile-dist-bar {
            width: 100%;
            border-radius: 0.35rem;
            min-height: 4px;
            transition: height 0.2s ease;
            /* Per-bar values supplied inline as custom properties (server data). */
            height: var(--bar-height, 0);
            background: var(--bar-color, var(--color-navy));
        }
        .profile-dist-count {
            position: absolute;
            top: 0.3rem;
            left: 0;
            right: 0;
            text-align: center;
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            font-size: 1.05rem;
            color: var(--color-navy);
        }
        .profile-dist-bucket {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--color-navy);
            letter-spacing: 0.04em;
        }
        .profile-dist-share {
            font-family: 'Poppins', sans-serif;
            font-weight: 500;
            font-size: 0.9rem;
            color: var(--color-navy);
        }
        @media (max-width: 575.98px) {
            .profile-dist-row {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                row-gap: 1rem;
            }
            .profile-dist-bar-wrap {
                height: 110px;
            }
        }

        /* Class participation donut */
        .profile-donut-row {
            display: grid;
            grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
            gap: 1.5rem;
            align-items: center;
        }
        .profile-donut-svg {
            width: 100%;
            max-width: 200px;
            height: auto;
            display: block;
        }
        .profile-donut-center {
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            fill: var(--color-navy);
        }
        .profile-donut-legend {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .profile-donut-legend li {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            font-weight: 500;
            color: var(--color-navy);
        }
        /* Empty-state / caption text — navy, above the sub-floor (was repeated inline). */
        .profile-note {
            color: var(--color-navy);
            font-size: 1rem;
            font-weight: 500;
        }
        .profile-note--total {
            font-size: 0.95rem;
            margin-top: 0.75rem;
        }

        .profile-donut-legend-dot {
            width: 0.85rem;
            height: 0.85rem;
            border-radius: 0.25rem;
            flex-shrink: 0;
            /* Slice colour supplied inline as a custom property (server data). */
            background: var(--dot-color, var(--color-navy));
        }
        .profile-donut-legend-name {
            flex: 1 1 0;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .profile-donut-legend-pct {
            font-weight: 700;
            color: var(--color-navy);
        }
        @media (max-width: 767.98px) {
            .profile-donut-row {
                grid-template-columns: 1fr;
                gap: 1rem;
                justify-items: center;
                text-align: left;
            }
            .profile-donut-legend {
                width: 100%;
            }
        }

        /* Footer disclaimer about data sources */
        .profile-data-note {
            font-family: 'Poppins', sans-serif;
            font-size: 1.05rem;
            font-weight: 500;
            color: var(--color-navy);
            line-height: 1.5;
            margin: 0.5rem 0 0;
            padding: 0.9rem 1.25rem;
            background: var(--surface-tint);
            border-radius: 0.75rem;
            text-align: center;
        }

        /* Number history timeline */
        .profile-numbers-timeline {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            margin-top: 1rem;
        }
        .profile-numbers-timeline--flush { margin-top: 0; }
        .profile-number-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.4rem 0.85rem;
            background: #ffffff;
            border: 1.5px solid var(--border-subtle);
            border-radius: 999px;
        }
        .profile-number-pill.is-current {
            border-color: #000;
        }
        .profile-number-pill-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2.5rem;
            height: 2rem;
            padding: 0 0.45rem;
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            font-size: 1.15rem;
            color: var(--color-navy);
            background: #ffffff;
            border: 2px solid #000;
            border-radius: 0.375rem;
            font-variant-numeric: tabular-nums;
        }
        .profile-number-pill-range {
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--color-navy);
        }

        /* Two-up row: places two adjacent <section class="card results-surface">
           cards side-by-side at half/half on desktop, stacked on mobile.
           Each child stretches to equal height via grid's default align-items: stretch. */
        .profile-side-by-side {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.75rem;
        }
        .profile-side-by-side > .card {
            margin: 0;
            height: 100%;
        }
        @media (max-width: 991.98px) {
            .profile-side-by-side {
                grid-template-columns: 1fr;
            }
        }

        /* Podium colors */
        .racer-podium-1 { color: var(--color-bronze); }
        .racer-podium-2 { color: #6c757d; }
        .racer-podium-3 { color: #8B5E3C; }

        /* ═══ V1-style Racer Stats table (ported from IndexV1) ═══ */
        .profile-stats-wrap {
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #dee2e6;
        }
        table.profile-stats-table { width: 100%; border-collapse: collapse; font-family: 'Poppins', sans-serif; }
        table.profile-detail-table { font-family: 'Poppins', sans-serif; }
        table.profile-stats-table thead th {
            background: #f8f9fa;
            font-weight: 700;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--color-navy);
            padding: 0.75rem 0.65rem;
            text-align: center;
            border-bottom: 1px solid #dee2e6;
            white-space: nowrap;
        }
        table.profile-stats-table thead th:nth-child(1) { width: 36px; }
        table.profile-stats-table thead th:nth-child(2),
        table.profile-stats-table thead th:nth-child(3),
        table.profile-stats-table thead th:nth-child(4) { text-align: center; }
        table.profile-stats-table tbody tr { border-bottom: 1px solid #e9ecef; transition: background 0.12s; }
        table.profile-stats-table tbody tr:last-child { border-bottom: none; }
        table.profile-stats-table tbody tr.profile-parent-row { cursor: pointer; }
        table.profile-stats-table tbody tr.profile-parent-row:hover { background: #f8f9fa; }
        table.profile-stats-table tbody tr.profile-parent-row.open { background: #f1f3f5; }
        table.profile-stats-table td {
            padding: 0.75rem 0.65rem;
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            font-weight: 500;
            text-align: center;
            white-space: nowrap;
            color: var(--color-navy);
        }
        table.profile-stats-table td:nth-child(2),
        table.profile-stats-table td:nth-child(3),
        table.profile-stats-table td:nth-child(4) { text-align: center; }

        td.profile-dt-control {
            cursor: pointer;
            width: 36px;
            text-align: center;
        }
        .profile-dt-chevron {
            color: #adb5bd;
            display: inline-block;
            vertical-align: middle;
            transition: transform 0.18s ease-in-out, color 0.15s;
        }
        table.profile-stats-table tbody tr.profile-parent-row:hover .profile-dt-chevron { color: #6c757d; }
        table.profile-stats-table tbody tr.profile-parent-row.open .profile-dt-chevron {
            transform: rotate(90deg);
            color: var(--color-navy);
        }
        .profile-cell-year { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; color: var(--color-navy); }

        .profile-series-badge {
            display: inline-block;
            font-family: 'Poppins', sans-serif;
            font-weight: 500;
            font-size: 1rem;
            padding: 0.2rem 0.55rem;
            color: var(--color-navy);
            background: transparent;
        }
        .profile-series-utahsbk,
        .profile-series-cvma,
        .profile-series-afm,
        .profile-series-mra,
        .profile-series-mastersofthemountains {
            background: transparent;
            color: var(--color-navy);
        }

        .profile-cell-rds { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; color: var(--color-navy); }

        .profile-fg { color: var(--color-bronze); font-weight: 600; }
        .profile-fs { color: #6c757d; font-weight: 600; }
        .profile-fb { color: #8B5E3C; font-weight: 600; }

        tr.profile-child-row { display: none; }
        tr.profile-child-row.visible { display: table-row; }
        tr.profile-child-row > td { padding: 0 !important; background: #fafbfc; border-bottom: 2px solid #dee2e6; }

        .profile-child-wrap { padding: 0.5rem 0 1rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }

        table.profile-detail-table { width: 100%; min-width: 700px; border-collapse: collapse; table-layout: fixed; }
        table.profile-detail-table col.col-class { width: 22%; }
        table.profile-detail-table col.col-standing { width: 11%; }
        table.profile-detail-table thead th {
            font-weight: 700;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--color-navy);
            text-align: center;
            vertical-align: middle;
            background: transparent;
            white-space: nowrap;
        }
        table.profile-detail-table thead th:first-child { text-align: left; padding-left: 1rem; }
        table.profile-detail-table thead th.th-st { text-align: right; padding-right: 0.75rem; }
        table.profile-detail-table thead .rd-row th { padding: 0.5rem 0.25rem; border-bottom: 2px solid #dee2e6; }
        table.profile-detail-table thead .rd-row th:first-child { padding-left: 1rem; }
        table.profile-detail-table thead .rd-row th.th-st { padding-right: 0.75rem; }
        table.profile-detail-table thead .rd-row th:first-child,
        table.profile-detail-table thead .rd-row th.th-st { border-bottom: 1px solid #e9ecef; }
        table.profile-detail-table thead .rd-row th.th-rd { border-left: 1px solid #dee2e6; }
        table.profile-detail-table thead .rd-row th.th-rd-last { border-right: 1px solid #dee2e6; }
        table.profile-detail-table thead .sub-row th {
            font-size: 0.9rem;
            letter-spacing: 0.06em;
            color: var(--color-navy);
            font-weight: 700;
            padding: 0.25rem 0.2rem 0.4rem;
            border-bottom: 1px solid #e9ecef;
        }
        table.profile-detail-table thead .sub-row th.sub-l { border-left: 1px solid #dee2e6; }
        table.profile-detail-table thead .sub-row th.sub-r { border-right: 1px solid #dee2e6; }
        table.profile-detail-table thead .sub-row th.sub-empty { padding: 0; height: 0; font-size: 0; line-height: 0; border-bottom: 1px solid #e9ecef; }
        table.profile-detail-table tbody td {
            font-size: 1rem;
            font-weight: 500;
            padding: 0.55rem 0.25rem;
            text-align: center;
            vertical-align: middle;
            color: var(--color-navy);
            border-bottom: 1px solid #e9ecef;
            white-space: nowrap;
        }
        table.profile-detail-table tbody tr:last-child td { border-bottom: none; }
        table.profile-detail-table tbody td:first-child {
            text-align: left;
            padding-left: 1rem;
            padding-right: 0.5rem;
            font-weight: 600;
            font-size: 1rem;
            color: var(--color-navy);
            white-space: normal;
            overflow-wrap: break-word;
            word-break: break-word;
            vertical-align: middle;
            min-width: 7.5rem;
        }
        table.profile-detail-table tbody td.td-st { text-align: right; padding-right: 0.75rem; }
        table.profile-detail-table tbody td.td-l { border-left: 1px solid #dee2e6; }
        table.profile-detail-table tbody td.td-r { border-right: 1px solid #dee2e6; }

        .profile-pos {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            line-height: 1.2;
        }
        .profile-pos.c1 { color: var(--color-bronze); }
        .profile-pos.c2 { color: #6c757d; }
        .profile-pos.c3 { color: #8B5E3C; }
        .profile-pos.c-top { color: var(--color-navy); }
        .profile-pos.c-mid { color: #6c757d; }
        .profile-pos.c-dnf { color: #dc3545; font-weight: 700; }
        .profile-pos.c-dns { color: #6c757d; font-weight: 700; }
        .profile-pos-pts { font-size: 1rem; font-weight: 500; color: var(--color-navy); margin-top: 1px; }
        .profile-pos-link { text-decoration: none; color: inherit; display: flex; align-items: center; justify-content: center; }
        .profile-pos-link:hover { opacity: 0.7; }
        .profile-pos-dash { font-weight: 400; font-size: 1rem; color: var(--color-navy); }
        .profile-standing { display: inline-block; font-weight: 700; font-size: 1rem; color: var(--color-navy); text-align: right; }
        .profile-standing.st-1 { color: var(--color-bronze); }
        .profile-standing.st-2 { color: #6c757d; }
        .profile-standing.st-3 { color: #8B5E3C; }
        .profile-st-pts { font-weight: 500; font-size: 1rem; color: var(--color-navy); margin-left: 0.25rem; }

        @media (max-width: 900px) {
            .profile-stats-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            table.profile-stats-table { min-width: 600px; }
        }

        /* Recent Best Results cards */
        .profile-best-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
            gap: 1rem;
        }
        .profile-best-card {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.15rem;
            border: 1px solid var(--border-subtle);
            border-radius: 1rem;
            background: #ffffff;
            text-decoration: none;
            color: inherit;
            transition: border-color 0.2s;
        }
        .profile-best-card:hover,
        .profile-best-card:focus {
            text-decoration: none;
            color: inherit;
            border-color: #000;
        }
        .profile-best-card:hover .profile-best-class,
        .profile-best-card:focus .profile-best-class { color: var(--color-navy); }
        .profile-best-card .profile-best-meta,
        .profile-best-card:hover .profile-best-meta,
        .profile-best-card:focus .profile-best-meta { color: var(--color-navy); }
        .profile-best-position {
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            font-size: 1.5rem;
            min-width: 4rem;
            flex: 0 0 auto;
            text-align: center;
            line-height: 1;
            white-space: nowrap;
        }
        .profile-best-class {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--color-navy);
            transition: color 0.2s;
        }
        .profile-best-meta {
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--color-navy);
        }

        /* Garage — mirrors the Recent Best Results card pattern for visual consistency. */
        .profile-garage-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
            gap: 1rem;
        }
        .profile-garage-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.15rem;
            border: 1px solid var(--border-subtle);
            border-radius: 1rem;
            background: #ffffff;
            transition: border-color 0.2s;
        }
        .profile-garage-item:hover {
            border-color: #000;
        }
        .profile-garage-icon {
            flex: 0 0 auto;
            min-width: 4rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: var(--color-navy);
        }
        .profile-garage-icon i,
        .profile-garage-icon .fas,
        .profile-garage-icon .fa-motorcycle {
            font-size: 2rem !important;
            line-height: 1;
        }
        .profile-garage-body {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            min-width: 0;
        }
        .profile-garage-name {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--color-navy);
        }
        .profile-garage-meta {
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--color-navy);
        }

        /* Personal Bests — fastest lap per class, grouped by season.
           Poppins throughout: the skewed race-number face is for number plates only, and a lap
           time is data, not a plate. */
        .profile-pb-season + .profile-pb-season { margin-top: 1.5rem; }
        .profile-pb-season-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--color-navy);
            margin: 0 0 0.6rem;
        }
        .profile-pb-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .profile-pb-row {
            display: grid;
            /* minmax(0, …) on the flexible column so a long class name shrinks instead of
               pushing the time off the card (the mobile overflow gotcha). */
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas:
                "class time"
                "meta  time";
            align-items: center;
            column-gap: 1rem;
            padding: 0.75rem 1rem;
            border: 1px solid var(--border-subtle);
            border-radius: 0.75rem;
            background: #ffffff;
        }
        .profile-pb-class {
            grid-area: class;
            font-size: 1rem;
            font-weight: 700;
            color: var(--color-navy);
            overflow-wrap: anywhere;
        }
        .profile-pb-meta {
            grid-area: meta;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--color-navy);
            overflow-wrap: anywhere;
        }
        .profile-pb-time {
            grid-area: time;
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--color-navy);
            /* The column reads as a ladder of lap times, so the digits must align. */
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            text-decoration: none;
        }
        a.profile-pb-time:hover,
        a.profile-pb-time:focus {
            color: var(--color-navy);
            text-decoration: underline;
        }

        /* The season's other classes, folded under its fastest lap. Native <details>: no JS. */
        .profile-pb-more { margin-top: 0.5rem; }
        .profile-pb-more > .profile-pb-list { margin-top: 0.5rem; }
        /* Older seasons, folded as a block under the newest one. */
        .profile-pb-past {
            margin-top: 1rem;
            padding-top: 0.5rem;
            border-top: 1px solid var(--border-subtle);
        }
        .profile-pb-past-body { margin-top: 0.75rem; }
        .profile-pb-more-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            min-height: 44px;
            padding: 0 0.25rem;
            font-size: max(0.95rem, 12px);
            font-weight: 600;
            color: var(--color-navy);
            cursor: pointer;
            list-style: none;
        }
        .profile-pb-more-toggle::-webkit-details-marker { display: none; }
        .profile-pb-more-toggle::before {
            content: "";
            width: 0.5rem;
            height: 0.5rem;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(-45deg);
            transition: transform 0.2s ease;
        }
        .profile-pb-more[open] > .profile-pb-more-toggle::before { transform: rotate(45deg); }
        .profile-pb-more-toggle:hover { text-decoration: underline; }

        @media (max-width: 575.98px) {
            /* Stacked: at 360px a side-by-side time column squeezes the class name to
               two or three characters per line. */
            .profile-pb-row {
                grid-template-columns: minmax(0, 1fr);
                grid-template-areas:
                    "class"
                    "meta"
                    "time";
                row-gap: 0.15rem;
            }
        }

        /* ── Racer-authored content: sponsors, race reports, photo gallery ────────────────
           Owner-only edit chrome reuses the hero's vocabulary. Touch targets are px, never
           rem: Metronic's root font-size drops to 12px on phones, so a rem-based 44px floor
           silently shrinks to ~33px. */

        .profile-section-actions {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-left: auto;
        }
        .profile-inline-add-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            min-height: 44px;
            padding: 0 0.9rem;
            border: 1px solid var(--border-subtle);
            border-radius: 0.6rem;
            background: #ffffff;
            color: var(--color-navy);
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: border-color 0.2s;
        }
        .profile-inline-add-btn:hover,
        .profile-inline-add-btn:focus { border-color: #000; }
        .profile-inline-add-btn i { font-size: 0.85rem !important; color: var(--color-navy) !important; }
        /* "Choose sponsor" — solid black so it reads as the other door, not a twin of "Create sponsor"
           (user decision, Oct 2026). Black is the page's existing emphasis colour. */
        #chooseSponsorBtn.profile-inline-add-btn {
            background: #000;
            border-color: #000;
            color: #ffffff;
            transition: background-color 0.2s, border-color 0.2s;
        }
        #chooseSponsorBtn.profile-inline-add-btn:hover,
        #chooseSponsorBtn.profile-inline-add-btn:focus-visible { background: var(--color-navy); border-color: var(--color-navy); }

        /* Per-tile edit/delete controls, shared by sponsor tiles, gallery tiles and reports. */
        .profile-tile-actions {
            display: flex;
            gap: 0.25rem;
        }
        .profile-tile-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            padding: 0;
            border: 1px solid var(--border-subtle);
            border-radius: 0.45rem;
            background: rgba(255, 255, 255, 0.92);
            color: var(--color-navy);
            cursor: pointer;
            transition: border-color 0.2s;
        }
        .profile-tile-btn:hover,
        .profile-tile-btn:focus { border-color: #000; }
        .profile-tile-btn i { font-size: 0.8rem !important; color: var(--color-navy) !important; }

        /* ── Sponsors ─────────────────────────────────────────────────────────────────── */
        /* A centred wrapping row, not an auto-fill grid (user decision, Sep 2026): auto-fill
           reserves empty tracks, so one or two sponsors sat hard left under a wide card. Flex
           rows stretch their items to equal height, which the grid used to provide. */
        .profile-sponsor-strip {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.75rem;
            align-items: stretch;
        }
        .profile-sponsor-tile {
            flex: 0 1 9rem;
            min-width: 0;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 6rem;
            padding: 1rem;
            border: 1px solid var(--border-subtle);
            border-radius: 0.75rem;
            background: #ffffff;
            transition: border-color 0.2s, transform 0.2s;
        }
        .profile-sponsor-tile:hover {
            border-color: #000;
            transform: translateY(-2px);
        }
        .profile-sponsor-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            text-decoration: none;
        }
        .profile-sponsor-logo {
            max-width: 100%;
            max-height: 3.5rem;
            object-fit: contain;
        }
        /* The fallback when a sponsor has no logo — and the alt text when it does. */
        .profile-sponsor-name {
            font-size: 1rem;
            font-weight: 600;
            color: var(--color-navy);
            text-align: center;
            overflow-wrap: anywhere;
        }
        .profile-sponsor-tile .profile-tile-actions {
            position: absolute;
            top: 0.35rem;
            right: 0.35rem;
        }

        /* Seasons (Oct 2026). Past seasons reuse the Personal Bests disclosure classes; only the
           owner's rollover prompt, the quiet carry-forward buttons and the dialog's checklist are
           new. Neutral surface + navy — no new colours. */
        .profile-sponsor-rollover {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1.25rem;
            padding: 1rem 1.25rem;
            border: 1px solid var(--border-subtle);
            border-radius: 0.9rem;
            background: var(--surface-tint);
        }
        .profile-sponsor-rollover-title {
            margin: 0 0 0.2rem;
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--color-navy);
        }
        .profile-sponsor-rollover-text {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--color-navy);
        }
        .profile-sponsor-rollover .btn { flex: 0 0 auto; min-height: 44px; }

        /* A racer in two series shows one strip per series season, each under its own heading. */
        .profile-sponsor-season + .profile-sponsor-season { margin-top: 1.5rem; }

        .profile-sponsor-carry-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .profile-sponsor-carry-intro {
            margin: 0 0 0.75rem;
            font-size: 1rem;
            font-weight: 500;
            color: var(--color-navy);
        }
        .profile-sponsor-carry-option {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            min-height: 44px;
            margin: 0;
            padding-left: 0;
            border-top: 1px solid var(--border-subtle);
        }
        .profile-sponsor-carry-option .form-check-input { flex: 0 0 auto; margin: 0; width: 1.25rem; height: 1.25rem; }
        .profile-sponsor-carry-option .form-check-label {
            flex: 1 1 auto;
            min-width: 0;
            padding: 0.5rem 0;
            font-size: 1rem;
            font-weight: 600;
            color: var(--color-navy);
            overflow-wrap: anywhere;
            cursor: pointer;
        }

        @media (max-width: 575.98px) {
            /* Three across at 360px rather than two oversized tiles. */
            .profile-sponsor-tile { flex-basis: 7.5rem; }

            .profile-sponsor-rollover { flex-direction: column; align-items: stretch; }
        }

        /* ── Race reports ─────────────────────────────────────────────────────────────── */
        .profile-report-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .profile-report {
            padding: 1.1rem 1.25rem;
            border: 1px solid var(--border-subtle);
            border-radius: 0.9rem;
            background: #ffffff;
        }
        .profile-report-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 0.4rem;
        }
        .profile-report-round {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--color-navy);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        /* Reads as the plain kicker at rest (no underline — user decision, Sep 2026) and turns
           brand blue on hover/focus, the same cue as a linked comment author's name. */
        .profile-report-round-link { text-decoration: none; }
        .profile-report-round-link:hover,
        .profile-report-round-link:focus-visible {
            color: var(--color-blue);
            text-decoration: none;
        }
        .profile-report-actions { display: flex; gap: 0.25rem; }
        /* Neutral chip (surface tint + navy) — the page's chip vocabulary, no accent colour. */
        .profile-report-stat {
            display: inline-flex;
            align-items: baseline;
            gap: 0.5rem;
            padding: 0.3rem 0.75rem;
            margin: 0 0 0.6rem;
            background: var(--surface-tint);
            border-radius: 999px;
            color: var(--color-navy);
        }
        .profile-report-stat-label {
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .profile-report-stat-value {
            font-size: 1rem;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }
        .profile-report-title {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--color-navy);
            margin: 0 0 0.5rem;
        }
        .profile-report-body {
            /* The body is stored as plain text with real newlines; pre-wrap is what turns them
               back into paragraphs without any markup being involved. */
            white-space: pre-wrap;
            font-size: 1rem;
            font-weight: 500;
            line-height: 1.6;
            color: var(--color-navy);
            /* A pasted unbroken token would otherwise side-scroll the whole page. */
            overflow-wrap: anywhere;
        }

        /* A report's pictures. Smaller tiles than the gallery on purpose — they illustrate the
           write-up, and the gallery below is where the same photos are shown full size. */
        .profile-report-photos {
            display: grid;
            /* minmax(0, …) so a tile shrinks with the card instead of overflowing it. */
            grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
            gap: 0.6rem;
            margin-top: 0.85rem;
        }
        .profile-report-photo {
            position: relative;
            margin: 0;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-card, 1rem);
            background: var(--surface-tint);
        }
        .profile-report-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .profile-report-photo .profile-tile-actions {
            position: absolute;
            top: 0.4rem;
            right: 0.4rem;
        }

        .profile-report-editor {
            padding: 1.1rem 1.25rem;
            margin-bottom: 1rem;
            border: 1px solid var(--border-subtle);
            border-radius: 0.9rem;
            background: var(--surface-tint);
        }
        .profile-report-editor-row { margin-bottom: 0.85rem; }
        .profile-report-label {
            display: block;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--color-navy);
            margin-bottom: 0.3rem;
        }
        .profile-report-optional { font-size: 0.9rem; font-weight: 500; color: var(--color-navy); }
        .profile-report-input,
        .profile-report-select,
        .profile-report-textarea {
            font-size: 1rem;
            font-weight: 500;
            color: var(--color-navy);
        }
        .profile-report-textarea { line-height: 1.6; }
        .profile-report-hint {
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--color-navy);
            margin: 0.35rem 0 0;
        }
        .profile-report-editor-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        /* ── Photo gallery ────────────────────────────────────────────────────────────── */
        .profile-gallery-grid {
            display: grid;
            /* minmax(0, …) so a tile can shrink below its content width instead of
               overflowing the card on a narrow screen. */
            grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
            gap: 1rem;
        }
        .profile-gallery-item { margin: 0; }
        .profile-gallery-frame {
            position: relative;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-card, 1rem);
            background: var(--surface-tint);
        }
        .profile-gallery-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .profile-gallery-frame .profile-tile-actions {
            position: absolute;
            top: 0.4rem;
            right: 0.4rem;
        }
        .profile-gallery-caption {
            display: block;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--color-navy);
            margin-top: 0.4rem;
            overflow-wrap: anywhere;
        }
        .profile-gallery-caption.is-editable { cursor: text; min-height: 1.2rem; }
        .profile-gallery-caption.is-editable:empty::before {
            content: 'Add a caption';
            color: var(--color-navy);
            opacity: 0.55;
        }

        @media (max-width: 575.98px) {
            /* Two up, not one — a single-column gallery is a scroll marathon. */
            .profile-gallery-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.6rem;
            }
            .profile-gallery-caption { font-size: 0.9rem; }
            /* Two up, like the gallery — a one-up strip inside a report is a scroll marathon. */
            .profile-report-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

/* Photo albums — a stack of the album's first three photos, which opens into the album's own grid
   (user decision, Sep 2026, replacing labelled sections). A racer with no albums gets NONE of this
   chrome: the card renders the one flat grid it always did, which is why nothing here hangs off
   .profile-gallery-grid itself. */
.profile-album-covers {
    display: grid;
    /* Wider than a photo tile: a stack needs room for the layers it fans out behind it. */
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.25rem 1.6rem;
    margin-bottom: 1.75rem;
}
.profile-album-cover {
    position: relative;
    margin: 0;
}
/* The stack is one button: the whole picture opens the album, which is what the eye expects. The
   owner's rename/delete sit OUTSIDE it (a button inside a button is invalid markup and the inner
   one stops firing). */
.profile-album-cover-stack {
    display: block;
    position: relative;
    width: 100%;
    /* Room for the two layers behind, which step down and right. */
    padding: 0 0.9rem 0.9rem 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.profile-album-cover-layer {
    /* The layers are <span>s. Absolute positioning makes a span a block on its own, but the front
       layer is `relative`, which leaves it INLINE. Width, aspect-ratio, radius and overflow clipping
       then don't hold its <img>, so it drew square and unclipped in front of rounded cards. */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 0.9rem);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-card, 1rem);
    border: 1px solid var(--border-subtle);
    background: var(--surface-tint);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.profile-album-cover-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Deepest first in the DOM, so the front photo is last and needs no z-index of its own. */
.profile-album-cover-layer--3 { transform: translate(0.9rem, 0.9rem) scale(0.95); }
.profile-album-cover-layer--2 { transform: translate(0.45rem, 0.45rem) scale(0.975); }
.profile-album-cover-layer--1 { position: relative; }
/* The stack fans a little further open on hover — the same "this opens" language as the tile zoom,
   in the only direction a stack can move. */
.profile-album-cover-stack:hover .profile-album-cover-layer--3,
.profile-album-cover-stack:focus-visible .profile-album-cover-layer--3 { transform: translate(1.25rem, 1.25rem) scale(0.95); }
.profile-album-cover-stack:hover .profile-album-cover-layer--2,
.profile-album-cover-stack:focus-visible .profile-album-cover-layer--2 { transform: translate(0.65rem, 0.65rem) scale(0.975); }
.profile-album-cover-stack:focus-visible .profile-album-cover-layer--1 {
    outline: 2px solid var(--color-blue);
    outline-offset: -2px;
}
/* An album with nothing in it yet — owner-only, so it is a prompt, not a broken tile. */
.profile-album-cover-layer--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-album-cover-layer--empty i { color: var(--color-navy); font-size: 1.6rem; opacity: 0.35; }
.profile-album-cover-meta {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    margin-top: 0.5rem;
    /* A long name wraps onto a centred second line rather than a left-aligned one. */
    text-align: center;
}
.profile-album-cover-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-navy);
    overflow-wrap: anywhere;
}
/* Pinned to the front layer's top-right corner, clear of the stack's fan. */
.profile-album-actions--cover {
    position: absolute;
    top: 0.4rem;
    right: 1.3rem;
    margin-left: 0;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 0.6rem;
}

/* The open album: back button, name, and the album's own grid. */
.profile-album-view-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.85rem;
}
.profile-album-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-navy);
    background: var(--surface-tint);
    border: 1px solid var(--border-subtle);
    border-radius: 0.6rem;
    /* px, never rem: Metronic's root drops to 12px on phones. */
    min-height: 44px;
    padding: 0.4rem 0.9rem;
}
.profile-album-back:hover,
.profile-album-back:focus-visible { border-color: #000; }
.profile-album-back i { color: var(--color-navy); font-size: 0.9rem; }

.profile-album-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.65rem;
}
/* Below .profile-section-title (1.35rem) — an album is a slice of the card, not a new card. */
.profile-album-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-navy);
    margin: 0;
}
.profile-album-count {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-navy);
    opacity: 0.7;
}
/* Pushed to the end of the head row; same quiet treatment as a comment's remove control, and the
   44px touch floor in px because Metronic's root drops to 12px on phones. */
.profile-album-actions {
    margin-left: auto;
    display: flex;
    gap: 0.15rem;
}
.profile-album-btn {
    border: 0;
    background: transparent;
    color: var(--color-navy);
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
    line-height: 1;
    border-radius: 0.475rem;
    opacity: 0.6;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.profile-album-btn:hover,
.profile-album-btn:focus-visible { opacity: 1; background: var(--surface-tint); }
.profile-album-btn i { color: var(--color-navy); font-size: 0.95rem; }
.profile-album-empty { margin: 0; padding: 0.75rem 0; }

/* Filing a photo by dragging it onto an album (owner-only, and only once an album exists). The
   drag and the targets are monochrome, like every other hover affordance on the site: a black
   border says "this is where it lands", no accent colour. */
.profile-gallery-frame.is-draggable { cursor: grab; }
.profile-gallery-frame.is-draggable:active { cursor: grabbing; }
.profile-gallery-frame.is-drag-source,
.profile-album-cover.is-drag-source { opacity: 0.45; }
.profile-album-drag-hint {
    margin: -0.75rem 0 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-navy);
}
/* While a photo is in the air, every place it can land is outlined, so the targets are found by
   looking rather than by sweeping the pointer across the page. */
.profile-album-cover[data-album-drop],
.profile-album-back[data-album-drop] {
    border-radius: var(--radius-card, 1rem);
    outline: 2px dashed transparent;
    outline-offset: 0.35rem;
    transition: outline-color 0.15s ease, background-color 0.15s ease;
}
.profile-album-back[data-album-drop] { border-radius: 0.6rem; outline-offset: 0.2rem; }
.is-photo-dragging .profile-album-cover[data-album-drop],
.is-photo-dragging .profile-album-back[data-album-drop] { outline-color: var(--border-subtle); }
.is-photo-dragging .profile-album-cover[data-album-drop].is-drop-over,
.is-photo-dragging .profile-album-back[data-album-drop].is-drop-over {
    outline: 2px solid #000;
    background-color: var(--surface-tint);
}
.profile-album-cover.is-drop-over .profile-album-cover-layer--1 { transform: translateY(-2px); }

/* Race report comments. The one block on this page written by people other than the profile
   owner, so it is separated from the report body by a hairline rather than being styled as more
   of the same card — a reader has to see where the racer's own words stop. */
.profile-comments {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-subtle);
}
/* A report-like notification links to "#report-{N}" and lands on the report's start, so it
   needs clearance under the fixed header. */
.profile-report { scroll-margin-top: 110px; }
/* The same frame as a comment target (hold 0.5s, fade over 1s — see .profile-comment-own:target
   below), on the whole report card. Its own keyframes because the card is white: the tint fades
   back to #fff, not to transparent. Not cancelled under prefers-reduced-motion, for the same reason. */
.profile-report:target {
    outline: 2px solid transparent;
    outline-offset: 4px;
    animation: profile-report-target-fade 1.5s ease-out forwards;
}
@keyframes profile-report-target-fade {
    0%, 33% { outline-color: #000; background-color: var(--surface-tint); }
    100% { outline-color: transparent; background-color: #ffffff; }
}
/* A notification links straight to one comment ("#comment-{N}"), whose id sits on its OWN content
   (.profile-comment-own), not the <li> — so the frame wraps just that comment, never its replies.
   The margin keeps it clear of the fixed header; the frame is monochrome so the eye finds it. */
.profile-comment-own {
    scroll-margin-top: 110px;
    border-radius: 0.75rem;
}
/* The frame holds for 0.5s so the eye lands on it, then fades to transparent over 1s (user
   request, Oct 2026) — `forwards` keeps it gone. Deliberately NOT cancelled under
   prefers-reduced-motion: Windows machines with animation effects off report reduced motion for
   everything, and the frame would then never go away. */
.profile-comment-own:target {
    outline: 2px solid transparent;
    outline-offset: 6px;
    background: transparent;
    animation: profile-comment-target-fade 1.5s ease-out forwards;
}
@keyframes profile-comment-target-fade {
    0%, 33% { outline-color: #000; background-color: var(--surface-tint); }
    100% { outline-color: transparent; background-color: transparent; }
}
.profile-comment-list {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
/* The identity line: avatar, name and date are flex SIBLINGS centred against each other, rather
   than the avatar living in its own grid column beside them. A column cannot line the three up —
   the items are three different heights (36px avatar, ~22px text, 44px touch target on the "×"),
   so whichever is tallest sets the row and the others float off its centre. As siblings, one
   align-items: center settles all of them. */
.profile-comment-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
}
.profile-comment-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-tint);
    border: 1px solid var(--border-subtle);
    /* flex-shrink: 0 — a long name must not squash the face. */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-comment-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-comment-initials {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1;
}
.profile-comment-author {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-navy);
    text-decoration: none;
}
/* Brand blue on hover — linked names only; a dangling author renders as a plain span. */
a.profile-comment-author:hover,
a.profile-comment-author:focus-visible { text-decoration: underline; color: var(--color-blue); }
/* Navy, not the gray a timestamp usually gets — no gray text on this platform. */
.profile-comment-time {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-navy);
    opacity: 0.75;
}
.profile-comment-body {
    /* Stored as plain text with real newlines; pre-wrap is what turns them back into paragraphs
       with no markup involved. */
    white-space: pre-wrap;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--color-navy);
    /* Indented to the avatar's width plus the head row's gap, so the text starts under the name
       rather than under the face. */
    margin: 0.15rem 0 0 2.85rem;
    overflow-wrap: anywhere;
}
/* Sits in the head row, pushed to the end — it is a per-row control, not a card action, so it
   does not wear .profile-tile-btn's white tile. 44px of tap target comes from the padding. */
.profile-comment-remove {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--color-navy);
    padding: 0.55rem;
    min-width: 44px;
    min-height: 44px;
    line-height: 1;
    border-radius: 0.475rem;
    opacity: 0.55;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.profile-comment-remove:hover,
.profile-comment-remove:focus-visible { opacity: 1; background: var(--surface-tint); }
.profile-comment-remove i { color: var(--color-navy); font-size: 0.95rem; }

.profile-comment-form { display: flex; flex-direction: column; gap: 0.5rem; }
.profile-comment-input {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-navy);
    border-radius: 0.65rem;
    resize: vertical;
}
.profile-comment-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.profile-comment-submit {
    font-size: 1rem;
    font-weight: 600;
    min-height: 44px;
    padding: 0.5rem 1.4rem;
}
.profile-comment-error {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-navy);
}

/* Replies. Threads are ONE level deep, so this indent happens once and never compounds off a
   phone screen. The list and the reply box both start under the parent's name (the body's own
   2.85rem indent), with a hairline down the left marking the thread. */
/* The text lines up with the body above it; the padding (and 44px height) is the tap target. */
.profile-comment-reply {
    margin: 0 0 0 calc(2.85rem - 0.5rem);
    border: 0;
    background: transparent;
    color: var(--color-navy);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0 0.5rem;
    min-height: 44px;
    border-radius: 0.475rem;
}
.profile-comment-reply:hover,
.profile-comment-reply:focus-visible { color: var(--color-blue); background: var(--surface-tint); }
/* Heart + Reply share one line under the body. The row carries the body's indent, so the controls
   inside it drop their own. */
.profile-comment-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0 0 calc(2.85rem - 0.5rem);
}
.profile-comment-actions .profile-comment-reply { margin: 0; }
/* The like control (reports and comments share it): heart toggle + a count that opens "Liked by".
   Outline navy heart, filled brand blue once the viewer's like is on — no new colour. Both are
   separate 44px targets in px, like every control on this page. */
.profile-like { display: inline-flex; align-items: center; }
.profile-like-toggle {
    display: inline-flex;
    align-items: center;
    /* The heart hugs the RIGHT edge of its 44px target and the count hugs the left of its own, so
       the two read as one unit (~6px apart) while each keeps a full-size tap target. */
    justify-content: flex-end;
    border: 0;
    background: transparent;
    color: var(--color-navy);
    padding: 0 3px 0 0.5rem;
    min-height: 44px;
    min-width: 44px;
    border-radius: 0.475rem;
}
.profile-like-toggle.is-readonly { min-width: 0; cursor: default; }
button.profile-like-toggle:hover,
button.profile-like-toggle:focus-visible { background: var(--surface-tint); color: var(--color-blue); }
.profile-like-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
    transition: transform 0.15s ease;
}
.profile-like-toggle.is-liked,
.profile-like-toggle.is-readonly { color: var(--color-blue); }
.profile-like-toggle.is-liked .profile-like-icon,
.profile-like-toggle.is-readonly .profile-like-icon { fill: currentColor; }
button.profile-like-toggle:active .profile-like-icon { transform: scale(0.85); }
/* The count is its own button — tapping it lists who liked. No underline (user decision, Oct
   2026); the hover tint is the affordance. */
.profile-like-count {
    border: 0;
    background: transparent;
    color: var(--color-navy);
    font-size: max(0.9rem, 12px);
    font-weight: 600;
    min-height: 44px;
    min-width: 28px;
    padding: 0 0.6rem 0 3px;
    text-align: left;
    border-radius: 0.475rem;
}
.profile-like-count:hover,
.profile-like-count:focus-visible { background: var(--surface-tint); color: var(--color-blue); text-decoration: none; }
.profile-like-count[hidden] { display: none; }

/* The report's own like row sits between the report body/photos and its comments. */
.profile-report-likes { display: flex; align-items: center; margin: 0.35rem 0 0 -0.35rem; }

/* "Liked by" dialog. */
.profile-likers-dialog { max-width: 420px; }
.profile-likers-title { font-size: 1.2rem; font-weight: 700; color: var(--color-navy); }
.profile-likers-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.profile-likers-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.3rem 0.5rem;
    border-radius: 0.65rem;
    color: var(--color-navy);
    text-decoration: none;
}
a.profile-likers-link:hover,
a.profile-likers-link:focus-visible { background: var(--surface-tint); color: var(--color-blue); }
.profile-likers-name { font-size: 1rem; font-weight: 600; }
.profile-comment-replies {
    list-style: none;
    margin: 0.35rem 0 0 2.85rem;
    padding: 0 0 0 0.85rem;
    border-left: 2px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
/* Emoji picker. The toggle sits at the left of the actions row with the error line beside it; the
   panel opens IN FLOW under the textarea (no popover to clip or position on a phone). Monochrome
   chrome — the emoji themselves are the only colour. */
.profile-comment-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}
.profile-comment-emoji-toggle {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--color-navy);
    min-width: 44px;
    min-height: 44px;
    border-radius: 0.475rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.profile-comment-emoji-toggle:hover,
.profile-comment-emoji-toggle:focus-visible,
.profile-comment-emoji-toggle[aria-expanded="true"] { opacity: 1; background: var(--surface-tint); }
.profile-emoji-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 0.15rem;
    padding: 0.4rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.65rem;
    background: #fff;
    max-height: 200px;
    overflow-y: auto;
}
.profile-emoji-panel[hidden] { display: none; }
.profile-emoji-option {
    border: 0;
    background: transparent;
    min-height: 44px;
    border-radius: 0.475rem;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.profile-emoji-option:hover,
.profile-emoji-option:focus-visible { background: var(--surface-tint); }

/* "@Name" at the start of a reply — the same link treatment as the author name in the head row
   (navy 700, blue underline on hover), so it reads as the same kind of thing. */
.profile-comment-mention {
    font-weight: 700;
    color: var(--color-navy);
    text-decoration: none;
}
.profile-comment-mention:hover,
.profile-comment-mention:focus-visible { text-decoration: underline; color: var(--color-blue); }
.profile-reply-form { margin: 0.6rem 0 0 2.85rem; }
/* The form's own display:flex would otherwise beat the [hidden] attribute. */
.profile-reply-form[hidden] { display: none; }
.profile-reply-buttons { display: flex; gap: 0.5rem; margin-left: auto; }
.profile-comment-cancel {
    font-size: 1rem;
    font-weight: 600;
    min-height: 44px;
    padding: 0.5rem 1.2rem;
    color: var(--color-navy);
}

@media (max-width: 575.98px) {
    /* The form actions stack so the Post button keeps its full-width tap target — the emoji
       toggle and error line ABOVE it, next to the box they act on. */
    .profile-comment-form-actions { flex-direction: column; align-items: stretch; }
    .profile-comment-submit { width: 100%; }
    .profile-reply-buttons { margin-left: 0; }
    .profile-reply-buttons > .btn { flex: 1 1 0; }
    /* Half the indent on phones: the thread line still reads, the text keeps its width. */
    .profile-comment-replies { margin-left: 1rem; padding-left: 0.65rem; }
    .profile-reply-form { margin-left: 1rem; }
}

/* Photo viewer (#profileLightbox) — the gallery and report tiles open full size here.
   The scrim is painted on the modal element itself, not left to Bootstrap's backdrop: a photo
   needs a neutral dark surround, and clicking that area still closes the dialog because it is
   the modal element Bootstrap already listens on. */
/* Hover affordance on a photo tile: the picture itself grows a little inside its frame, which
   already clips (overflow: hidden), so nothing reflows and the grid holds perfectly still. This
   replaced a zoom-in cursor — the movement says "this opens" more plainly than a cursor glyph
   nobody looks at, and it reads on a phone, where there is no cursor at all. The whole tile is
   the trigger, so the owner's overlay buttons don't punch a dead patch in the middle of it.

   Hung off the classes the VIEW renders, never off .profile-photo-zoomable, which racer-profile.js
   adds at runtime: a hover effect is a CSS fact about the markup, and tying it to the script meant
   it silently did nothing wherever the script had not run. */
.profile-gallery-img,
.profile-report-photo img {
    /* Ease-out: it leaves quickly and settles, so the tile feels like it is being lifted rather
       than mechanically resized. Both directions share it, so pulling away unwinds the same way. */
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.profile-gallery-frame:hover .profile-gallery-img,
.profile-report-photo:hover img {
    transform: scale(1.06);
}

/* The pointer and the focus ring DO belong to the script's class — they promise a click that
   only the viewer can deliver, so they must not appear on a page where it never mounted. */
.profile-photo-zoomable { cursor: pointer; }
.profile-photo-zoomable:focus-visible {
    transform: scale(1.06);
    /* Inset: the frame clips anything outside it. */
    outline: 2px solid var(--color-blue);
    outline-offset: -2px;
}

/* NO prefers-reduced-motion exception here, deliberately (owner decision, Sep 2026) — the same
   call the WhichCall pulses carry. Windows reports reduced-motion for every visitor once
   "animation effects" are off in Ease of Access, so honouring it took the ease away from a large
   share of real users (including this project's own machine, where the effect first read as
   broken and then as a hard snap). What it gates is tiny, hover-only and user-initiated: a 6%
   scale inside a frame that already clips, moving nothing else on the page. */

.profile-lightbox { background: rgba(9, 12, 26, 0.92); }
.profile-lightbox-dialog {
    max-width: min(1100px, 94vw);
    margin-inline: auto;
}
.profile-lightbox-content {
    position: relative;
    background: transparent;
    border: 0;
    box-shadow: none;
    align-items: center;
}
.profile-lightbox-figure {
    margin: 0;
    width: 100%;
    text-align: center;
}
.profile-lightbox-img {
    max-width: 100%;
    /* Leaves room for the caption line and the close button above it. */
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    transition: opacity 0.15s ease;
}
.profile-lightbox-img.is-loading { opacity: 0.35; }

.profile-lightbox-meta {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    margin-top: 0.85rem;
    padding: 0 1rem;
}
/* White on the scrim — the page's navy would disappear into it. */
.profile-lightbox-caption {
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    overflow-wrap: anywhere;
}
.profile-lightbox-counter {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

/* Contrast over an arbitrary photo is unpredictable, so every control carries its own dark
   disc. 44px in px, never rem — Metronic's root drops to 12px on phones. */
.profile-lightbox-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(9, 12, 26, 0.72);
    color: #ffffff;
    transition: background-color 0.15s ease;
}
.profile-lightbox-btn:hover,
.profile-lightbox-btn:focus-visible { background: #000000; }
.profile-lightbox-btn i { color: #ffffff; font-size: 1.1rem; }

.profile-lightbox-close {
    position: absolute;
    top: -3.25rem;
    right: 0;
    z-index: 2;
}
.profile-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.profile-lightbox-prev { left: 0.4rem; }
.profile-lightbox-next { right: 0.4rem; }

@media (max-width: 575.98px) {
    .profile-lightbox-dialog { max-width: 100vw; margin-inline: 0; }
    .profile-lightbox-img { max-height: 70vh; border-radius: 0; }
    /* Above the photo there is no room on a phone, so the close button rides its top-right
       corner instead. */
    .profile-lightbox-close { top: 0.5rem; right: 0.5rem; }
}

/* Confirm dialog (#profileConfirmModal) — the one dialog every owner-only removal asks through.
   Metronic's inherited base is ~0.8rem, so each line declares its own size; the footer buttons
   clear the 44px touch floor in px, since the root font-size drops to 12px on phones. */
#profileConfirmModal .modal-title,
#profileAlbumNameModal .modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-navy);
}
/* Album name dialog (#profileAlbumNameModal) — New Album + Rename; same voice as the confirm. */
.profile-album-name-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-navy);
}
.profile-album-name-input {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-navy);
    min-height: 44px;
}
.profile-album-name-error {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f1416c; /* Metronic danger — the error, like the footer's red Delete, is the one red. */
}
#profileAlbumNameModal .modal-footer .btn {
    font-size: 1rem;
    font-weight: 600;
    min-height: 44px;
    padding: 0.55rem 1.25rem;
}
.profile-confirm-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-navy);
    line-height: 1.5;
}
#profileConfirmModal .modal-footer .btn {
    font-size: 1rem;
    font-weight: 600;
    min-height: 44px;
    padding: 0.55rem 1.25rem;
}

/* Claim modal — licence dropzone + preview (former inline styles in _ClaimModal) */
.claim-dropzone {
    border: 2px dashed #009ef7;
    border-radius: 0.475rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.claim-preview-img { max-width: 100%; max-height: 200px; border-radius: 0.475rem; }

/* Add Sponsor dialog: pick from the SuperAdmin sponsor library (Oct 2026). Same white tile + hairline
   as the public sponsor strip; the picked tile takes the page's black emphasis border (no new
   colour). Tiles are buttons with a 64px px floor — comfortably over the 44px touch floor. */
.profile-sponsor-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.5rem;
    max-height: 15rem;
    overflow-y: auto;
    padding: 2px;
    margin-top: 0.35rem;
}
.profile-sponsor-template {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 0.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem;
    background: #ffffff;
    transition: border-color 0.15s ease;
}
.profile-sponsor-template:hover,
.profile-sponsor-template:focus-visible { border-color: #000; }
.profile-sponsor-template.is-selected { border: 2px solid #000; padding: calc(0.5rem - 1px); }
.profile-sponsor-template img { max-width: 100%; max-height: 2.75rem; object-fit: contain; }
.profile-sponsor-template-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-navy);
    text-align: center;
    overflow-wrap: anywhere;
}
.profile-sponsor-template-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-navy);
}
.profile-sponsor-template-note.is-hidden { display: none; }
.profile-sponsor-template-clear {
    border: 0;
    background: transparent;
    color: var(--color-blue);
    font-size: 0.9rem;
    font-weight: 600;
    min-height: 44px;
    padding: 0 0.5rem;
    border-radius: 0.475rem;
}
.profile-sponsor-template-clear:hover,
.profile-sponsor-template-clear:focus-visible { background: var(--surface-tint); }