/* financials-card-carousel.css
   One dashboard slot holding both multiplier cards, one at a time.

   Height is set on the viewport in JS from whichever slide is showing, so the
   frame follows the active card instead of standing at the height of the
   taller one. The transition here is what makes that change read as a slide
   rather than a jump. */

.stat-carousel {
    position: relative;
}

.stat-carousel-viewport {
    overflow: hidden;
    /* Room for each card's hover shadow, taken back out of the layout by the
       matching negative margin — the frame clips horizontally, and without
       this the shadow would be sliced off flat against the edge. The 10px
       sideways sits inside the .stats-grid's own 20px padding, so nothing
       spills out of the panel. */
    padding: 10px;
    margin: -10px;
    /* Explicit, because JS writes a content height onto this element. */
    box-sizing: content-box;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-carousel-track {
    display: flex;
    /* flex-start, not stretch: each slide keeps its own height so the viewport
       has a real number to measure. */
    align-items: flex-start;
    /* Wider than the viewport's 10px shadow room, so the neighbouring card
       doesn't peek in as a dark strip at the edge. The JS translate adds it. */
    gap: 20px;
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.stat-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
}

/* JS hides a slide with no data by setting `hidden`. The UA rule for that is
   display:none at almost no specificity, so any author display here would beat
   it — state it outright rather than relying on there not being one. */
.stat-carousel-slide[hidden],
.stat-carousel-nav[hidden] {
    display: none !important;
}

/* The lift the other stat cards get on hover reads as a glitch inside a
   clipped, sliding frame — it jumps against a fixed edge. Everything else
   about the hover state stays. */
.stat-carousel-slide .stat-card:hover,
.stat-carousel-slide .stat-card.clickable:hover {
    transform: none;
}

/* ---------------- nav ---------------- */

.stat-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
}

.stat-carousel-pill {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.55);
    color: #64748b;
    cursor: pointer;
    transition: 0.18s;
}

.stat-carousel-pill:hover {
    background: #fff;
    color: #00264b;
}

.stat-carousel-pill.active {
    background: #00264b;
    color: #fff;
}

.stat-carousel-arrow {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    color: #475569;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.18s;
}

.stat-carousel-arrow:hover {
    background: #fff;
    color: #00264b;
}

@media (prefers-reduced-motion: reduce) {
    .stat-carousel-viewport,
    .stat-carousel-track {
        transition: none;
    }
}