/*
 * See-your-city team bar integration.
 *
 * The canonical component styles come from sector/team/team-info.css, which
 * is loaded immediately before this file. Keep this file limited to preview
 * positioning, responsive placement, and demo-only feedback states.
 */

.city-preview .demo-map-overlay-top {
    top: calc(var(--demo-header-height) + var(--demo-top-gap));
    left: 8px;
    right: 8px;
    align-items: stretch;
    pointer-events: none;
    transform: translateY(-8px);
    opacity: 0;
}

.city-preview.is-open .demo-map-overlay-top {
    transform: translateY(0);
    opacity: 1;
}

.city-preview .demo-map-overlay-top > * {
    pointer-events: auto;
}

.city-preview .demo-pa-bar {
    position: relative;
}

/* Undo the legacy demo copy's component overrides so the canonical mobile
   bar remains the source of truth. */
.city-preview .demo-pa-bar .pa-id-team {
    max-width: none;
}

.city-preview .demo-pa-bar .pa-stats {
    margin-left: 0;
}

.city-preview .demo-pa-bar .pa-stat {
    min-width: 0;
    cursor: default;
}

/* Keep Back and the forward action in the standard left/right positions,
   including narrow phones where the previous rules stacked them. */
@media (max-width: 430px) {
    .city-preview .demo-guide-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .city-preview {
        --demo-team-bar-height: 86px;
    }
}

/* The signed-in map adds .row from 768px upward, but keeps the mobile overlay
   gutters through 768px. Mirror both breakpoints instead of switching the
   demo's positioning one pixel early. */
@media (min-width: 768px) {
    .city-preview {
        --demo-team-bar-height: 52px;
    }

    .city-preview .pa-bar.row.demo-pa-bar {
        width: fit-content;
        max-width: calc(100vw - 140px);
        height: 52px;
        min-height: 0;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 18px;
        padding: 0 16px;
        margin: 0 auto;
    }

    .city-preview .pa-bar.row.demo-pa-bar .pa-id {
        flex: 0 1 auto;
        width: auto;
        max-width: none;
        padding: 0;
        gap: 10px;
    }

    .city-preview .pa-bar.row.demo-pa-bar .pa-id-user {
        max-width: 140px;
        font-size: 15px;
    }

    .city-preview .pa-bar.row.demo-pa-bar .pa-id-team {
        max-width: 180px;
    }

    .city-preview .pa-bar.row.demo-pa-bar .pa-stats {
        order: initial;
        display: flex;
        grid-template-columns: none;
        flex: 0 0 auto;
        width: auto;
        height: 44px;
        margin-left: auto;
        gap: 0;
        align-items: center;
    }

    .city-preview .pa-bar.row.demo-pa-bar .pa-stat {
        flex: 0 0 auto;
        width: auto;
        min-width: 92px;
        max-width: 108px;
        height: 36px;
        min-height: 0;
        max-height: 36px;
        padding: 3px 14px;
    }
}

@media (min-width: 769px) {
    .city-preview .demo-map-overlay-top {
        left: 70px;
        right: 70px;
        align-items: center;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .city-preview .pa-bar.row.demo-pa-bar {
        width: calc(100vw - 180px);
        max-width: 640px;
        gap: 10px;
        padding: 0 12px;
    }

    .city-preview .pa-bar.row.demo-pa-bar .pa-id {
        flex: 1 1 0;
        min-width: 0;
        gap: 8px;
    }

    .city-preview .pa-bar.row.demo-pa-bar .pa-id-user {
        max-width: 110px;
    }

    .city-preview .pa-bar.row.demo-pa-bar .pa-id-team {
        flex: 1 1 0;
        max-width: none;
    }

    .city-preview .pa-bar.row.demo-pa-bar .pa-stat {
        width: 76px;
        min-width: 76px;
        height: 34px;
        max-height: 34px;
        padding: 3px 5px;
    }
}

/* PAP award feedback: the audio/haptic signal is provided by the shared
   SectorCelebration system; this keeps the visual emphasis on the real PAP
   balance tile the user will later interact with. */
.demo-pa-bar.is-pap-award-active,
.demo-pa-bar.is-pap-award-active .pa-stats,
.demo-pa-bar.is-pap-award-active #demoStatPap {
    overflow: visible !important;
}

.demo-pa-bar.is-pap-award-active {
    animation: demoPapBarSpotlight 1.65s cubic-bezier(0.16, 1, 0.3, 1);
}

#demoStatPap {
    position: relative;
    isolation: isolate;
}

#demoStatPap.is-pap-award-active {
    z-index: 5;
    animation: demoPapAwardTile 1.65s cubic-bezier(0.16, 1, 0.3, 1);
}

#demoStatPap.is-pap-award-active .label,
#demoStatPap.is-pap-award-active .value {
    animation: demoPapAwardValue 1.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.demo-pap-award-badge {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: calc(100% + 7px);
    min-width: max-content;
    border-radius: 999px;
    background: #00a844;
    color: #fff;
    padding: 6px 9px;
    font: 800 0.7rem/1 'Roboto', sans-serif;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.76);
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(0, 168, 68, 0.3);
}

#demoStatPap.is-pap-award-active .demo-pap-award-badge {
    animation: demoPapAwardBadge 1.65s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes demoPapBarSpotlight {
    0%, 100% {
        border-color: rgba(0, 0, 0, 0.06);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    }
    28%, 62% {
        border-color: rgba(0, 168, 68, 0.48);
        box-shadow: 0 0 0 4px rgba(0, 200, 83, 0.12), 0 12px 30px rgba(0, 168, 68, 0.24);
    }
}

@keyframes demoPapAwardTile {
    0% { transform: scale(1); background: #fff; }
    24% { transform: scale(1.13); background: #ecfdf3; }
    48% { transform: scale(1.05); background: #f3fff7; }
    70% { transform: scale(1.1); background: #ecfdf3; }
    100% { transform: scale(1); background: #fff; }
}

@keyframes demoPapAwardValue {
    0%, 100% { color: #0a0a0a; }
    22%, 72% { color: #008c3a; }
}

@keyframes demoPapAwardBadge {
    0% { opacity: 0; transform: translate(-50%, 8px) scale(0.76); }
    18% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
    68% { opacity: 1; transform: translate(-50%, -5px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -16px) scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
    .demo-pa-bar.is-pap-award-active,
    #demoStatPap.is-pap-award-active,
    #demoStatPap.is-pap-award-active .label,
    #demoStatPap.is-pap-award-active .value,
    #demoStatPap.is-pap-award-active .demo-pap-award-badge {
        animation: none;
    }

    #demoStatPap.is-pap-award-active {
        background: #ecfdf3;
        box-shadow: 0 0 0 3px rgba(0, 168, 68, 0.2);
    }
}