/* RLN IMPACT ANALYTICS V3 */

.rln-analytics-v3{
    --av3-ink:#17182d;
    --av3-muted:#747990;
    --av3-line:#e3e6ef;
    --av3-soft:#f6f7fb;
    --av3-purple:#5b46d7;
    --av3-purple2:#7766e8;
    --av3-green:#589777;
    --av3-amber:#b88535;
    --av3-red:#a65c50;
    --av3-card:#fff;
}

/* ---------------------------------------------------------
   Main studio
--------------------------------------------------------- */

.rln-v3-trend-studio{
    position:relative;
    margin:18px 0 22px;
    padding:24px;
    overflow:hidden;
    border:1px solid var(--av3-line);
    border-radius:18px;
    background:
        radial-gradient(
            circle at 96% 0,
            rgba(91,70,215,.09),
            transparent 26%
        ),
        #fff;
    box-shadow:
        0 16px 42px rgba(25,27,52,.05);
}

.rln-v3-trend-studio:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:
        linear-gradient(
            90deg,
            var(--av3-purple),
            #9385ed,
            transparent 75%
        );
}

.rln-v3-trend-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.rln-v3-trend-eyebrow{
    display:block;
    margin-bottom:7px;
    color:var(--av3-purple);
    font-size:11px;
    line-height:1;
    font-weight:850;
    letter-spacing:.14em;
}

.rln-v3-trend-head h2{
    margin:0;
    color:var(--av3-ink);
    font-size:25px;
    line-height:1.2;
    letter-spacing:-.035em;
}

.rln-v3-trend-head p{
    margin:7px 0 0;
    color:var(--av3-muted);
    font-size:14px;
    line-height:1.65;
}

.rln-v3-period-tabs,
.rln-v3-view-tabs{
    display:inline-flex;
    align-items:center;
    padding:4px;
    gap:3px;
    border:1px solid var(--av3-line);
    border-radius:10px;
    background:#f3f4f8;
}

.rln-v3-period-tabs button,
.rln-v3-view-tabs button{
    appearance:none;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#696e80;
    padding:8px 13px;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    transition:
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.rln-v3-period-tabs button:hover,
.rln-v3-view-tabs button:hover{
    transform:translateY(-1px);
}

.rln-v3-period-tabs button.is-active,
.rln-v3-view-tabs button.is-active{
    background:#25283f;
    color:#fff;
    box-shadow:
        0 5px 14px rgba(32,35,60,.18);
}

.rln-v3-trend-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 12px;
    margin-bottom:12px;
    border:1px solid var(--av3-line);
    border-radius:12px;
    background:#fafbfe;
}

.rln-v3-range-status{
    display:flex;
    align-items:center;
    min-width:0;
    gap:10px;
    color:#6f7487;
    font-size:12px;
}

.rln-v3-range-status strong{
    color:#30354c;
    font-weight:800;
}

.rln-v3-dot{
    width:8px;
    height:8px;
    flex:0 0 8px;
    border-radius:50%;
    background:#7db18f;
    box-shadow:
        0 0 0 4px rgba(125,177,143,.12);
}

.rln-v3-trend-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 210px;
    gap:12px;
}

.rln-v3-chart-card{
    min-width:0;
    padding:10px 8px 4px;
    border:1px solid var(--av3-line);
    border-radius:14px;
    background:#fff;
}

#rln-v3-timeline-chart{
    width:100%;
    height:360px;
}

.rln-v3-side-metrics{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.rln-v3-side-metric{
    min-height:116px;
    padding:14px 12px;
    border:1px solid var(--av3-line);
    border-radius:13px;
    background:
        linear-gradient(
            180deg,
            #fff,
            #fafaff
        );
}

.rln-v3-side-metric span{
    display:block;
    margin-bottom:10px;
    color:#85899a;
    font-size:11px;
}

.rln-v3-side-metric strong{
    display:block;
    color:var(--av3-purple);
    font-size:23px;
    line-height:1;
    letter-spacing:-.04em;
}

.rln-v3-side-metric small{
    display:block;
    margin-top:5px;
    color:#989baa;
    font-size:10px;
}


/* ---------------------------------------------------------
   GitHub-inspired daily activity strip
--------------------------------------------------------- */

.rln-v3-activity{
    margin-top:12px;
    padding:14px 15px;
    border:1px solid var(--av3-line);
    border-radius:13px;
    background:#fafbfe;
}

.rln-v3-activity-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
    color:#757a8c;
    font-size:11px;
}

.rln-v3-activity-head strong{
    color:#35394d;
    font-size:12px;
}

.rln-v3-activity-grid{
    display:grid;
    grid-template-columns:repeat(23,minmax(7px,1fr));
    gap:4px;
}

.rln-v3-activity-cell{
    aspect-ratio:1;
    min-width:7px;
    border-radius:3px;
    background:#eceef4;
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.rln-v3-activity-cell:hover{
    transform:scale(1.35);
    z-index:2;
    box-shadow:0 5px 14px rgba(38,41,68,.2);
}

.rln-v3-activity-cell[data-level="1"]{
    background:#e5e1fb;
}
.rln-v3-activity-cell[data-level="2"]{
    background:#c5bcf4;
}
.rln-v3-activity-cell[data-level="3"]{
    background:#9587e8;
}
.rln-v3-activity-cell[data-level="4"]{
    background:#5b46d7;
}

.rln-v3-activity-cell.is-provisional{
    outline:1px dashed #967037;
    outline-offset:1px;
}


/* ---------------------------------------------------------
   Sidebar information architecture
--------------------------------------------------------- */

.rln-v3-nav-list{
    list-style:none!important;
    padding:0!important;
    margin:0!important;
}

.rln-v3-nav-list li{
    margin:0 0 4px!important;
}

.rln-v3-nav-list a{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:39px;
    padding:8px 9px;
    border-radius:7px;
    color:#d8dbea!important;
    font-size:13px;
    font-weight:750;
    text-decoration:none!important;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.rln-v3-nav-list a:hover{
    background:rgba(255,255,255,.08);
    transform:translateX(2px);
}

.rln-v3-nav-list a.is-active{
    background:#565a82;
    color:#fff!important;
}

.rln-v3-nav-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:26px;
    border-radius:5px;
    background:rgba(255,255,255,.07);
    color:#abb0cb;
    font-size:10px;
}


/* ---------------------------------------------------------
   Existing sections become clearer analytical layers
--------------------------------------------------------- */

.rln-v3-secondary-scorecard{
    border-top:1px solid var(--av3-line);
}

.rln-v3-legacy-daily{
    display:none!important;
}

.rln-v3-section-tag{
    scroll-margin-top:110px;
}


/* ---------------------------------------------------------
   Entry motion / dynamic effect
--------------------------------------------------------- */

.rln-v3-reveal{
    opacity:0;
    transform:translateY(12px);
    transition:
        opacity .5s cubic-bezier(.2,.7,.3,1),
        transform .5s cubic-bezier(.2,.7,.3,1);
}

.rln-v3-reveal.is-visible{
    opacity:1;
    transform:none;
}


/* ---------------------------------------------------------
   Loading/error
--------------------------------------------------------- */

.rln-v3-trend-loading{
    display:flex;
    align-items:center;
    justify-content:center;
    height:310px;
    color:#85899a;
    font-size:13px;
}

.rln-v3-trend-loading:before{
    content:"";
    width:15px;
    height:15px;
    margin-right:9px;
    border:2px solid #d9dbe5;
    border-top-color:var(--av3-purple);
    border-radius:50%;
    animation:rlnV3Spin .8s linear infinite;
}

@keyframes rlnV3Spin{
    to{transform:rotate(360deg)}
}


/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media(max-width:980px){

    .rln-v3-trend-grid{
        grid-template-columns:1fr;
    }

    .rln-v3-side-metrics{
        grid-template-columns:repeat(4,1fr);
    }

    .rln-v3-side-metric{
        min-height:90px;
    }
}

@media(max-width:700px){

    .rln-v3-trend-studio{
        padding:17px 13px;
        border-radius:14px;
    }

    .rln-v3-trend-head{
        display:block;
    }

    .rln-v3-period-tabs{
        margin-top:15px;
    }

    .rln-v3-trend-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .rln-v3-side-metrics{
        grid-template-columns:1fr 1fr;
    }

    #rln-v3-timeline-chart{
        height:315px;
    }

    .rln-v3-activity-grid{
        grid-template-columns:repeat(15,1fr);
    }
}

@media(prefers-reduced-motion:reduce){

    .rln-v3-reveal,
    .rln-v3-period-tabs button,
    .rln-v3-view-tabs button,
    .rln-v3-nav-list a,
    .rln-v3-activity-cell{
        transition:none!important;
        animation:none!important;
    }
}

/* RLN_REGION_RANK_HOVER_SCOPE_START */

/*
 * ONLY elements marked by analytics-v3.js as actual
 * 17-region ranking items are affected.
 *
 * No [class*=card], [class*=region], [class*=row],
 * [class*=item] wildcard selectors are used.
 */

body.rln-analytics-v3 .rln-v3-region-rank-item {
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

/* ranking row only */
body.rln-analytics-v3 .rln-v3-region-rank-item:hover,
body.rln-analytics-v3 .rln-v3-region-rank-item:focus-visible {
    background:#f5f6fb !important;
    border-color:#cbd0df !important;
    box-shadow:
        0 3px 10px rgba(32,35,60,.07) !important;
    transform:translateY(-1px);
}

/* region name */
body.rln-analytics-v3
.rln-v3-region-rank-item:hover
.rln-v3-region-rank-name,
body.rln-analytics-v3
.rln-v3-region-rank-item:focus-visible
.rln-v3-region-rank-name {
    color:#1c2036 !important;
    -webkit-text-fill-color:#1c2036 !important;
    opacity:1 !important;
}

/* score */
body.rln-analytics-v3
.rln-v3-region-rank-item:hover
.rln-v3-region-rank-score,
body.rln-analytics-v3
.rln-v3-region-rank-item:focus-visible
.rln-v3-region-rank-score {
    color:#171a2d !important;
    -webkit-text-fill-color:#171a2d !important;
    opacity:1 !important;
}

/* rank number badge */
body.rln-analytics-v3
.rln-v3-region-rank-item:hover
.rln-v3-region-rank-number,
body.rln-analytics-v3
.rln-v3-region-rank-item:focus-visible
.rln-v3-region-rank-number {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    background:#282c49 !important;
    opacity:1 !important;
}

/*
 * Explicitly do NOT modify nested charts, tabs,
 * detail cards or general regional containers.
 */

body.rln-analytics-v3
.rln-v3-region-rank-item:focus-visible {
    outline:2px solid rgba(91,70,215,.38) !important;
    outline-offset:2px;
}

/* RLN_REGION_RANK_HOVER_SCOPE_END */
