/* ========================================
Insights Page - Visual Components
Extracted visual/animation components for /insights/ landing page
======================================== */

/* ----------------------------------------
Semi-Circle Pie Chart (Explainer Section)
---------------------------------------- */

/* Explainer layout modifier: visual on top, content below */
.insights-explainer--top {
    flex-direction: column !important;
    text-align: center;
}

.insights-explainer--top .insights-explainer__content {
    max-width: var(--max-width-50);
}

.insights-explainer--top .insights-explainer__visual {
    width: 100%;
}

/* Placeholder container */
.insights-explainer__placeholder[data-visual="insights-page"] {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: 100%;
    aspect-ratio: auto;
    padding: 0;
}

/* Semi-circle chart wrapper */
.semi-pie-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Mobile legend grid - hidden on desktop */
.semi-pie-legend-mobile {
    display: none;
}

/* Desktop layout: left legend | chart | right legend */
.semi-pie-layout {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2rem;
    width: 100%;
}

/* Legend columns */
.semi-pie-legend {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 8rem;
}

.semi-pie-legend--left {
    align-items: flex-end;
    text-align: right;
}

.semi-pie-legend--right {
    align-items: flex-start;
    text-align: left;
}

/* Legend items */
.semi-pie-chart .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.semi-pie-legend--left .legend-item {
    flex-direction: row-reverse;
}

.semi-pie-chart .legend-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: var(--border-radius-p-med);
    flex-shrink: 0;
}

.semi-pie-chart .legend-label {
    font-size: 0.9rem;
    color: var(--text-body);
}

.semi-pie-chart .legend-percent.strong {
    background: #e9f6ee;
    font-size: 0.7rem;
    line-height: 1.7;
    padding: 0 0.35rem;
    border-radius: 0.5rem 0.5rem 0.5rem 0;
    color: #4b6058;
}

.semi-pie-legend--left .legend-percent.strong {
    border-radius: 0.5rem 0.5rem 0 0.5rem;
}

/* Semi-circle container - responsive sizing */
.semi-pie-circle-wrapper {
    width: 100%;
    max-width: 36rem;
    aspect-ratio: 2 / 1; /* Width is 2x height for semi-circle */
    overflow: hidden;
    position: relative;
}

.semi-pie-circle-container {
    width: 100%;
    aspect-ratio: 1 / 1; /* Full circle, but only top half visible */
    position: relative;
}

/* Base ring gradient - slices mapped to top 180° */
/* From 270deg (9 o'clock/left) going clockwise through top to 90deg (3 o'clock/right) */
/* Leaders 12%, Challengers 16%, Contenders 24%, Emerging 48% */
.semi-pie-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
    from 270deg,
    #38C673 0deg 21.6deg,
    #15A061 21.6deg 50.4deg,
    #00734B 50.4deg 93.6deg,
    #004A32 93.6deg 180deg,
    transparent 180deg 360deg
    );
    transition: opacity 0.25s ease;
}

/* Center hole to create ring effect */
.semi-pie-center-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background: #fcfff6;
    border-radius: 50%;
    z-index: 2;
    pointer-events: auto;
    cursor: default;
}

/* Slice overlays container */
.semi-pie-slice-overlays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Individual slice overlays for hover effects */
/* Each slice uses clip-path with mathematically precise arc points */
.semi-pie-slice-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 1;
}

/* Slice 0 (Leaders): 270° to 291.6° - 12% of 180° */
.semi-pie-slice-overlay[data-slice-index="0"] {
    background: #38C673;
    clip-path: polygon(
    50% 50%,
    0% 50%,
    0.07% 47.4%,
    0.28% 44.8%,
    0.6% 42.2%,
    1.1% 39.6%,
    1.7% 37.1%,
    2.4% 34.6%,
    3.3% 32.1%,
    3.5% 31.6%
    );
}

/* Slice 1 (Challengers): 291.6° to 320.4° - 16% of 180° */
.semi-pie-slice-overlay[data-slice-index="1"] {
    background: #15A061;
    clip-path: polygon(
    50% 50%,
    3.5% 31.6%,
    4.3% 29.7%,
    5.5% 27.3%,
    6.7% 25%,
    8% 22.8%,
    9.6% 20.6%,
    11.2% 18.6%,
    12.9% 16.6%,
    14.6% 14.6%,
    16.6% 12.9%,
    17.9% 11.7%
    );
}

/* Slice 2 (Contenders): 320.4° to 3.6° - 24% of 180° */
.semi-pie-slice-overlay[data-slice-index="2"] {
    background: #00734B;
    clip-path: polygon(
    50% 50%,
    17.9% 11.7%,
    20.6% 9.6%,
    22.8% 8%,
    25% 6.7%,
    27.3% 5.5%,
    29.7% 4.3%,
    32.1% 3.3%,
    34.6% 2.4%,
    37.1% 1.7%,
    39.6% 1.1%,
    42.2% 0.6%,
    44.8% 0.3%,
    47.4% 0.05%,
    50% 0%,
    52.6% 0.05%,
    53.1% 0.1%
    );
}

/* Slice 3 (Emerging): 3.6° to 90° - 48% of 180° */
.semi-pie-slice-overlay[data-slice-index="3"] {
    background: #004A32;
    clip-path: polygon(
    50% 50%,
    53.1% 0.1%,
    55.3% 0.3%,
    57.8% 0.6%,
    60.4% 1.1%,
    63% 1.7%,
    65.5% 2.4%,
    67.9% 3.3%,
    70.4% 4.3%,
    72.7% 5.5%,
    75% 6.7%,
    77.3% 8%,
    79.4% 9.6%,
    81.5% 11.2%,
    83.5% 12.9%,
    85.4% 14.6%,
    87.2% 16.6%,
    88.9% 18.6%,
    90.5% 20.6%,
    92% 22.8%,
    93.3% 25%,
    94.6% 27.3%,
    95.7% 29.7%,
    96.7% 32.1%,
    97.6% 34.6%,
    98.3% 37.1%,
    98.9% 39.6%,
    99.4% 42.2%,
    99.75% 44.8%,
    99.95% 47.4%,
    100% 50%
    );
}

/* Hover states */
.semi-pie-slice-overlay.slice-highlighted {
    opacity: 1;
}

.insights-explainer__placeholder[data-visual="insights-page"].slice-hover-active .semi-pie-ring {
    opacity: 0.2;
}

.semi-pie-chart .legend-item.slice-faded {
    opacity: 0.3;
}

.semi-pie-chart .legend-item.slice-highlighted {
    opacity: 1;
}

/* ----------------------------------------
Matrix Chart with Dots
---------------------------------------- */

/* Matrix chart in explainer section */
.insights-explainer__visual .insights-visual {
    width: 100%;
    height: auto;
}

.insights-explainer__visual .matrix-placeholder {
    aspect-ratio: 2.5/1;
    height: auto;
    border-radius: var(--border-radius-p-2);
    box-shadow: none !important;
    background: none !important;
}

.insights-explainer__placeholder .legend-label {
    align-items: flex-start;
    text-align: left;
    color: var(--text-dark);
}

.axis-label {
    display: none !important;
}

.axis-label.x-axis {
    top: 0.7rem;
}

.matrix-dots.animate .dot {
    box-shadow: 0 0 24px #fcfff670;
}

/* Enable hover transitions only after initial animation completes */
.matrix-dots.animate .dot.animation-complete {
    animation: none !important; /* Remove animation so forwards doesn't block transforms */
    opacity: 1; /* Preserve final opacity */
    transition: transform 0.4s ease-out;
}

.insights-visual:hover .matrix-dots.animate .dot.animation-complete {
    transform: translate(var(--tx), var(--ty));
}

.insights-visual .matrix-dots .dot:nth-child(5) {
    top: 33%;
}

.matrix-dots .dot:nth-child(1) {
    width: 3rem;
    height: 3rem;
}

.matrix-dots .dot:nth-child(2) {
    width: 2.4rem;
    height: 2.4rem;
}

.matrix-dots .dot:nth-child(3),
.matrix-dots .dot:nth-child(4),
.matrix-dots .dot:nth-child(5) {
    width: 1.6rem;
    height: 1.6rem;
}

.matrix-dots .dot:nth-child(6),
.matrix-dots .dot:nth-child(7),
.matrix-dots .dot:nth-child(8) {
    width: 1.2rem;
    height: 1.2rem;
}

.matrix-dots .dot:nth-child(9),
.matrix-dots .dot:nth-child(10),
.matrix-dots .dot:nth-child(11),
.matrix-dots .dot:nth-child(12) {
    width: 1rem;
    height: 1rem;
}

@media only screen and (max-width: 640px) {
    .matrix-dots .dot:nth-child(1) {
        width: 1.8rem;
        height: 1.8rem;
    }

    .matrix-dots .dot:nth-child(2) {
        width: 1.5rem;
        height: 1.5rem;
    }

    .matrix-dots .dot:nth-child(3),
    .matrix-dots .dot:nth-child(4),
    .matrix-dots .dot:nth-child(5) {
        width: 1.1rem;
        height: 1.1rem;
    }

    .matrix-dots .dot:nth-child(6),
    .matrix-dots .dot:nth-child(7),
    .matrix-dots .dot:nth-child(8) {
        width: 1rem;
        height: 1rem;
    }

    .matrix-dots .dot:nth-child(9),
    .matrix-dots .dot:nth-child(10),
    .matrix-dots .dot:nth-child(11),
    .matrix-dots .dot:nth-child(12) {
        width: 0.8rem;
        height: 0.8rem;
    }
}

/* ----------------------------------------
Matrix Curves (concentric ellipses)
Radiating from upper-right, expanding toward lower-left
---------------------------------------- */

.matrix-curves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image:
        linear-gradient(to right, transparent, black 5%, black 95%, transparent),
        linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent, black 5%, black 95%, transparent),
        linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
    mask-composite: intersect;
}

.matrix-curve {
    position: absolute;
    border-color: #cee0d9 !important;
    border-radius: 50%;
    rotate: 45deg;
}

/* Accelerating expansion: tighter upper-right, expanding lower-left */
.insights-visual .matrix-curve-1 {
    width: 37%;
    height: 45%;
    top: 15%;
    right: 1%;
    opacity: 0.8;
}

.insights-visual .matrix-curve-2 {
    width: 60%;
    height: 72%;
    top: 8%;
    right: -9%;
    opacity: 0.7;
}

.insights-visual .matrix-curve-3 {
    width: 86%;
    height: 102%;
    top: 0%;
    right: -20%;
    opacity: 0.6;
}

.insights-visual .matrix-curve-4 {
    width: 115%;
    height: 135%;
    top: -9%;
    right: -32%;
    opacity: 0.5;
}

.insights-visual .matrix-curve-5 {
    width: 147%;
    height: 171%;
    top: -19%;
    right: -45%;
    opacity: 0.42;
}

.insights-visual .matrix-curve-6 {
    width: 182%;
    height: 210%;
    top: -30%;
    right: -59%;
    opacity: 0.35;
}

/* ----------------------------------------
Orbit Shift Demo Animation
Multi-step animation sequence for explainer section
---------------------------------------- */

.orbit-shift-demo {
    position: relative;
    width: 76%;
    max-width: 32rem;
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.3);
    padding: 4rem 0;
    aspect-ratio: 2.5 / 1;
    overflow: hidden;
    /* pointer-events: none; */
}

/* All steps hidden by default, shown via JS */
.orbit-shift-demo__input,
.orbit-shift-demo__loading,
.orbit-shift-demo__results {
    position: absolute;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    pointer-events: none;
}

/* Active state for each step */
.orbit-shift-demo__input.active,
.orbit-shift-demo__loading.active,
.orbit-shift-demo__results.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Fade out state */
.orbit-shift-demo__input.fade-out,
.orbit-shift-demo__loading.fade-out,
.orbit-shift-demo__results.fade-out {
    opacity: 0;
    transform: translateY(-10px);
}

/* ----- Step 1: Input Field ----- */
.orbit-shift-demo__input {
    width: 100%;
}

.orbit-shift-demo .orbit-shift-container {
    background-color: var(--color-white);
    border-radius: var(--border-radius-p-1-5);
    box-shadow: 0 4px 24px color-mix(in srgb, var(--color-black) 5%, transparent), 0 -2px 4px color-mix(in srgb, var(--color-black) 2%, transparent);
    overflow: hidden;
}

.orbit-shift-demo .orbit-shift-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.6rem 0 0;
}

.orbit-shift-demo .orbit-shift-title {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 0.6rem;
    background: #4b6058;
    padding: 0.5rem 1rem;
    overflow: hidden;
    max-width: 10rem;
}

.orbit-shift-demo .orbit-shift-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 0.9rem;
    height: 0.9rem;
    background: url(/wp-content/uploads/2024/06/palomarr-logo-p.svg) no-repeat center center;
    background-size: contain;
}

.orbit-shift-demo .orbit-shift-title-text {
    color: white;
    font-size: 0.7rem !important;
    white-space: nowrap;
}

/* Input wrapper for typed text */
.orbit-shift-demo .orbit-shift-input-wrapper {
    flex: 1;
    min-width: 200px;
    padding: 0.4rem 0.2rem;
    font-size: 0.9rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    min-height: 2.2rem;
}

.orbit-shift-demo .orbit-shift-typed-text {
    color: var(--text-dark);
}

/* Blinking cursor */
.orbit-shift-demo .orbit-shift-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: var(--text-dark);
    margin-left: 1px;
    animation: cursorBlink 0.6s ease-in-out infinite;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Hide cursor when typing complete */
.orbit-shift-demo__input.typing-complete .orbit-shift-cursor {
    display: none;
}

/* Submit button - hidden by default, no transition out */
.orbit-shift-demo .orbit-shift-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #1a1a1a;
    color: white;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    visibility: hidden; /* Prevent flash during loop reset */
    overflow: hidden;
    margin: 0.4rem 0;
    /* No transition on default - only transition IN when showing */
}

.orbit-shift-demo .orbit-shift-submit svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke: var(--color-white);
}

/* Button appears when text is typed */
.orbit-shift-demo__input.show-button .orbit-shift-submit {
    width: 2rem;
    opacity: 1;
    visibility: visible;
    transition: width 0.2s ease, opacity 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

/* Button click animation */
.orbit-shift-demo__input.button-clicked .orbit-shift-submit {
    transform: scale(0.9);
    background: var(--color-primary);
}

/* ----- Step 2: Loading State ----- */
.orbit-shift-demo__loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #e9f6ee;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-p-1-5);
}

.orbit-shift-demo__star {
    width: 1rem;
    height: 1rem;
    animation: starSpin 3s ease-in-out infinite;
}

@keyframes starSpin {
    0% { transform: scaleX(1); }
    20% { transform: scaleX(0); }
    40% { transform: scaleX(1); }
    50% { transform: scaleX(1); }
    60% { transform: scaleX(1); }
    80% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

.orbit-shift-demo__loading-text {
    color: var(--color-primary);
    font-size: 1rem;
}

/* ----- Step 3: Results State ----- */
.orbit-shift-demo__results {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--color-white);
    padding: 0.8rem 1.5rem 1rem;
    border-radius: var(--border-radius-p-1-5);
    box-shadow: 0 4px 24px color-mix(in srgb, var(--color-black) 8%, transparent);
}

.orbit-shift-demo__results-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9f6ee;
    border-radius: 50%;
    flex-shrink: 0;
}

.orbit-shift-demo__results-icon img {
    width: 1.3rem;
    height: 1.3rem;
}

.orbit-shift-demo__results-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.orbit-shift-demo__results-count {
    font-size: 1.3rem;
    color: var(--color-primary);
}

.orbit-shift-demo__results-label {
    font-size: 0.9rem;
    color: #5a6b65;
    text-align: left;
}

/* ----- Results Rings Animation ----- */
/* Rings container sized to match insights-explainer__visual (aspect 2.5/1) */
.orbit-shift-demo__rings {
    position: absolute;
    /* Break out of orbit-shift-demo and size to visual container */
    top: 50%;
    left: 50%;
    width: 100%;  /* Scale up to approximate visual container width */
    height: 100%; /* 250% * 2.5 aspect ratio */
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
}

.orbit-shift-demo__ring {
    position: absolute;
    border: 1px solid #cee0d9; /* Match matrix-curves color */
    border-radius: 50%;
    opacity: 0;
    rotate: 45deg; /* Constant rotation like matrix-curves */
}

/* Start positions: match matrix-curves exactly (elliptical, upper-right) */
.orbit-shift-demo__ring-1 {
    width: 37%;
    height: 45%;
    top: 15%;
    right: 1%;
}

.orbit-shift-demo__ring-2 {
    width: 60%;
    height: 72%;
    top: 8%;
    right: -9%;
}

.orbit-shift-demo__ring-3 {
    width: 86%;
    height: 102%;
    top: 0%;
    right: -20%;
}

.orbit-shift-demo__ring-4 {
    width: 115%;
    height: 135%;
    top: -9%;
    right: -32%;
}

/* Animation when results are active (rings are sibling of results) */
.orbit-shift-demo:has(.orbit-shift-demo__results.active) .orbit-shift-demo__ring-1 {
    animation: ringShift1 0.4s ease-out forwards;
    animation-delay: 0.5s;
}

.orbit-shift-demo:has(.orbit-shift-demo__results.active) .orbit-shift-demo__ring-2 {
    animation: ringShift2 0.4s ease-out forwards;
    animation-delay: 0.5s;
}

.orbit-shift-demo:has(.orbit-shift-demo__results.active) .orbit-shift-demo__ring-3 {
    animation: ringShift3 0.4s ease-out forwards;
    animation-delay: 0.5s;
}

.orbit-shift-demo:has(.orbit-shift-demo__results.active) .orbit-shift-demo__ring-4 {
    animation: ringShift4 0.4s ease-out forwards;
    animation-delay: 0.5s;
}

/* Ring 1: expand and shift toward center-left */
@keyframes ringShift1 {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.8;
        width: 37%;
        height: 45%;
        top: 15%;
        right: 1%;
    }
    100% {
        opacity: 0.8;
        width: 42%;
        height: 77%;
        top: 12%;
        right: 24%;
    }
}

/* Ring 2: expand and shift toward center-left */
@keyframes ringShift2 {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.7;
        width: 60%;
        height: 72%;
        top: 8%;
        right: -9%;
    }
    100% {
        opacity: 0.7;
        width: 70%;
        height: 132%;
        top: -10%;
        right: 15%;
    }
}

/* Ring 3: expand and shift toward center-left */
@keyframes ringShift3 {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.6;
        width: 86%;
        height: 102%;
        top: 0%;
        right: -20%;
    }
    100% {
        opacity: 0.6;
        width: 98%;
        height: 187%;
        top: -32%;
        right: 6%;
    }
}

/* Ring 4: expand and shift toward center-left */
@keyframes ringShift4 {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.5;
        width: 115%;
        height: 135%;
        top: -9%;
        right: -32%;
    }
    100% {
        opacity: 0.5;
        width: 126%;
        height: 242%;
        top: -54%;
        right: -3%;
    }
}

/* Fade out rings when results fade out */
.orbit-shift-demo:has(.orbit-shift-demo__results.fade-out) .orbit-shift-demo__ring {
    transition: opacity 0.4s ease-out;
    opacity: 0 !important;
}

/* Mobile adjustments for Orbit Shift */
@media only screen and (max-width: 640px) {
    .orbit-shift-demo {
        max-width: 100%;
    }

    .orbit-shift-demo .orbit-shift-title {
        padding: 0.5rem 0.75rem;
        max-width: 7rem;
    }

    .orbit-shift-demo .orbit-shift-title-text {
        display: none;
    }

    .orbit-shift-demo .orbit-shift-input-wrapper {
        min-width: 140px;
        font-size: 0.8rem;
    }

    .orbit-shift-demo__loading {
        padding: 0.6rem 1rem;
    }

    .orbit-shift-demo__star {
        width: 1.2rem;
        height: 1.2rem;
    }

    .orbit-shift-demo__loading-text {
        font-size: 0.9rem;
    }

    .orbit-shift-demo__results {
        padding: 0.75rem 1.25rem;
        gap: 0.75rem;
    }

    .orbit-shift-demo__results-icon {
        width: 2rem;
        height: 2rem;
    }

    .orbit-shift-demo__results-icon img {
        width: 1rem;
        height: 1rem;
    }

    .orbit-shift-demo__results-count {
        font-size: 1.1rem;
    }

    .orbit-shift-demo__results-label {
        font-size: 0.8rem;
    }
}

/* ----------------------------------------
Responsive: Tablet (Semi-Pie Chart)
---------------------------------------- */

@media only screen and (max-width: 1024px) {
    /* Semi-circle chart tablet */
    .semi-pie-circle-wrapper {
        max-width: 28rem;
    }

    .semi-pie-layout {
        gap: 1.5rem;
    }

    .semi-pie-legend {
        min-width: 6rem;
    }

    .semi-pie-chart .legend-label {
        font-size: 0.85rem;
    }
}

/* ----------------------------------------
Responsive: Mobile (Semi-Pie Chart)
---------------------------------------- */

@media only screen and (max-width: 640px) {
    /* Semi-circle chart mobile: 2x2 grid above chart */
    .semi-pie-legend-mobile {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem 1.5rem;
        margin-bottom: 1.5rem;
        width: 100%;
        max-width: 20rem;
    }

    .semi-pie-legend-mobile .legend-item {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

    .semi-pie-legend-mobile .legend-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .semi-pie-legend-mobile .legend-label {
        font-size: 0.8rem;
        color: var(--text-body);
    }

    .semi-pie-legend-mobile .legend-percent.strong {
        background: #e9f6ee;
        font-size: 0.65rem;
        line-height: 1.6;
        padding: 0 0.25rem;
        border-radius: 0.4rem 0.4rem 0.4rem 0;
        color: #4b6058;
    }

    /* Hide desktop split legends */
    .semi-pie-legend--left,
    .semi-pie-legend--right {
        display: none;
    }

    /* Mobile chart sizing */
    .semi-pie-layout {
        justify-content: center;
    }

    .semi-pie-circle-wrapper {
        max-width: 20rem;
    }

    /* Mobile hover states for mobile legend */
    .semi-pie-legend-mobile .legend-item.slice-faded {
        opacity: 0.3;
    }

    .semi-pie-legend-mobile .legend-item.slice-highlighted {
        opacity: 1;
    }
}