/*
==========================================================
STATISTICS — CROSS-BRANCH COLLABORATIONS
==========================================================
*/


/*
==========================================================
CARD
==========================================================
*/

.cross-branch-panel {

    padding:
        26px 28px;

    border:
        1px solid
        rgba(205,214,231,.88);

    border-radius:
        28px;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0 14px 34px
        rgba(64,72,115,.06);

}


.cross-branch-intro-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        18px;

}


.cross-branch-intro-row p {

    margin:
        0;

    color:
        var(--text-muted,#74798b);

    font-size:
        13px;

}


.cross-branch-legend {

    display:
        flex;

    align-items:
        center;

    flex-shrink:
        0;

    gap:
        8px;

    color:
        var(--text-muted,#74798b);

    font-size:
        11px;

    font-weight:
        750;

}


.cross-branch-legend-scale {

    display:
        flex;

    gap:
        3px;

}


.cross-branch-legend-scale i {

    width:
        18px;

    height:
        10px;

    border-radius:
        3px;

    background:
        #f1f3f8;

}


.cross-branch-legend-scale i:nth-child(2) {
    background: #e4e0fb;
}

.cross-branch-legend-scale i:nth-child(3) {
    background: #c7bef5;
}

.cross-branch-legend-scale i:nth-child(4) {
    background: #9d8dea;
}

.cross-branch-legend-scale i:nth-child(5) {
    background: #7666e8;
}


/*
==========================================================
LAYOUT
==========================================================
*/

.cross-branch-body {

    display:
        grid;

    grid-template-columns:
        auto 340px;

    align-items:
        stretch;

    justify-content:
        center;

    gap:
        140px;

    min-height:
        520px;

}


.cross-branch-matrix-wrapper {

    width:
        auto;

    min-width:
        0;

    overflow-x:
        auto;

    padding:
        2px 3px 8px;

    /*
    Small optical adjustment requested after the final layout:
    move the complete left area (axes + matrix) slightly down.
    */
    transform:
        translateY(8px);

}


/*
==========================================================
MATRIX
==========================================================
*/

.cross-branch-matrix-shell {

    width:
        max-content;

    min-width:
        min(100%,800px);

    margin:
        0;

}


.cross-branch-header-row,
.cross-branch-row {

    display:
        grid;

    grid-template-columns:
        88px
        repeat(6,minmax(82px,1fr));

    gap:
        7px;

}


.cross-branch-header-row {

    margin-bottom:
        7px;

}


.cross-branch-row + .cross-branch-row {

    margin-top:
        7px;

}


/*
==========================================================
AXIS LOGOS
==========================================================
*/

.cross-branch-axis-label {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        58px;

    cursor:
        default;

}


.cross-branch-axis-label img {

    display:
        block;

    width:
        64px;

    height:
        52px;

    object-fit:
        contain;

}


.cross-branch-column-label {

    align-items:
        flex-end;

    padding-bottom:
        5px;

}


.cross-branch-row-label {

    justify-content:
        flex-end;

    padding-right:
        8px;

}


.cross-branch-row-label img {

    width:
        62px;

    height:
        48px;

}


/* Holostars artwork contains more horizontal whitespace. */

.cross-branch-axis-label[data-branch-name="Holostars JP"] img,
.cross-branch-axis-label[data-branch-name="Holostars EN"] img {

    width:
        88px;

    height:
        56px;

}


.cross-branch-row-label[data-branch-name="Holostars JP"] img,
.cross-branch-row-label[data-branch-name="Holostars EN"] img {

    width:
        84px;

    height:
        52px;

}


/* DEV-IS is naturally more compact and visually taller. */

.cross-branch-axis-label[data-branch-name="DEV-IS"] img {

    width:
        50px;

    height:
        46px;

}


.cross-branch-row-label[data-branch-name="DEV-IS"] img {

    width:
        48px;

    height:
        44px;

}


/*
==========================================================
MATRIX CELLS
==========================================================
*/

.cross-branch-cell {

    --cross-branch-cell-color:
        #7666e8;

    --cross-branch-diagonal-color:
        #7666e8;

    position:
        relative;

    min-width:
        82px;

    height:
        62px;

    border:
        1px solid
        rgba(210,216,231,.78);

    border-radius:
        13px;

    background:
        #f5f6fa;

    color:
        #51586b;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        850;

    cursor:
        pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease,
        background .15s ease;

}


/*
Continuous violet scale.
--cross-branch-intensity is calculated in crossBranch.js,
so values such as 238 / 209 / 186 keep distinct shades.
*/

.cross-branch-cell:not(.is-internal) {

    background:
        color-mix(
            in srgb,
            #7666e8 var(--cross-branch-intensity),
            white
        );

}


.cross-branch-cell:not(.is-internal)[style*="--cross-branch-intensity: 0%"] {

    background:
        #f5f6fa;

}


/*
Diagonal = branch identity.
Its strength is normalized rather than tied to the collaboration
count, preventing Hololive JP from overpowering the other branches.
*/

.cross-branch-cell.is-internal {

    background:
        color-mix(
            in srgb,
            var(--cross-branch-diagonal-color) 34%,
            white
        );

    color:
        color-mix(
            in srgb,
            var(--cross-branch-diagonal-color) 78%,
            #1f2430
        );

    border:
        2px solid
        color-mix(
            in srgb,
            var(--cross-branch-diagonal-color) 88%,
            white
        );

    box-shadow:
        inset 0 0 0 2px
        rgba(255,255,255,.72),
        0 3px 8px
        color-mix(
            in srgb,
            var(--cross-branch-diagonal-color) 10%,
            transparent
        );

}


.cross-branch-cell:hover,
.cross-branch-cell:focus-visible {

    z-index:
        2;

    transform:
        translateY(-2px);

    border-color:
        var(--cross-branch-cell-color);

    box-shadow:
        0 8px 18px
        color-mix(
            in srgb,
            var(--cross-branch-cell-color) 19%,
            transparent
        );

    outline:
        none;

}


.cross-branch-cell.is-selected {

    z-index:
        3;

    transform:
        translateY(-3px);

    border-color:
        var(--cross-branch-cell-color);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--cross-branch-cell-color) 18%,
            transparent
        ),
        0 10px 22px
        color-mix(
            in srgb,
            var(--cross-branch-cell-color) 20%,
            transparent
        );

}


.cross-branch-cell.is-internal:hover,
.cross-branch-cell.is-internal:focus-visible,
.cross-branch-cell.is-internal.is-selected {

    border-color:
        var(--cross-branch-diagonal-color);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--cross-branch-diagonal-color) 15%,
            transparent
        ),
        0 8px 18px
        color-mix(
            in srgb,
            var(--cross-branch-diagonal-color) 14%,
            transparent
        );

}


/*
==========================================================
SELECTED RELATION
==========================================================
*/

.cross-branch-selection {

    min-width:
        0;

    height:
        100%;

    min-height:
        520px;

    box-sizing:
        border-box;

    padding:
        20px;

    border:
        1px solid
        rgba(205,214,231,.82);

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(248,248,253,.92)
        );

    box-shadow:
        0 10px 26px
        rgba(68,74,115,.065);

}


.cross-branch-selection-placeholder {

    display:
        grid;

    height:
        100%;

    min-height:
        0;

    box-sizing:
        border-box;

    place-items:
        center;

    padding:
        22px;

    color:
        var(--text-muted,#74798b);

    font-size:
        13px;

    line-height:
        1.6;

    text-align:
        center;

}


.cross-branch-selection-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        18px;

}


.cross-branch-selection-heading > span {

    color:
        var(--text-muted,#74798b);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.cross-branch-clear-button {

    padding:
        7px 13px;

    border:
        1px solid
        rgba(112,125,155,.22);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.88);

    color:
        #636a7c;

    font:
        inherit;

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;

}


/*
==========================================================
SELECTED BRANCHES
==========================================================
*/

.cross-branch-selected-branches {

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        30px
        minmax(0,1fr);

    grid-template-rows:
        72px auto;

    align-items:
        center;

    column-gap:
        10px;

    row-gap:
        7px;

    margin-bottom:
        16px;

}


.cross-branch-selected-branches > div {

    display:
        contents;

}


.cross-branch-selected-branches > div:first-child img {

    grid-column:
        1;

    grid-row:
        1;

}


.cross-branch-selected-branches > div:first-child strong {

    grid-column:
        1;

    grid-row:
        2;

}


.cross-branch-selected-branches > span {

    grid-column:
        2;

    grid-row:
        1;

    align-self:
        center;

    justify-self:
        center;

    margin:
        0;

    color:
        #8b91a2;

    font-size:
        18px;

    font-weight:
        700;

    line-height:
        1;

}


.cross-branch-selected-branches > div:last-child img {

    grid-column:
        3;

    grid-row:
        1;

}


.cross-branch-selected-branches > div:last-child strong {

    grid-column:
        3;

    grid-row:
        2;

}


.cross-branch-selected-branches img {

    display:
        block;

    align-self:
        center;

    justify-self:
        center;

    width:
        76px;

    height:
        68px;

    object-fit:
        contain;

    object-position:
        center;

}


.cross-branch-selected-branches img[src*="holostars-jp"],
.cross-branch-selected-branches img[src*="holostars-en"] {

    width:
        104px;

    height:
        68px;

}


.cross-branch-selected-branches img[src*="dev-is"] {

    width:
        58px;

    height:
        58px;

}


.cross-branch-selected-branches strong {

    align-self:
        start;

    justify-self:
        center;

    overflow:
        hidden;

    width:
        100%;

    color:
        var(--text,#202333);

    font-size:
        12px;

    font-weight:
        850;

    text-align:
        center;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/*
==========================================================
SELECTED RELATION METRICS
==========================================================
*/

.cross-branch-selection-metrics {

    display:
        grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:
        10px;

    margin-bottom:
        12px;

}


.cross-branch-selection-metrics > div {

    position:
        relative;

    overflow:
        hidden;

    padding:
        13px 14px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--metric-accent) 23%,
            #dfe4ee
        );

    border-radius:
        15px;

    background:
        color-mix(
            in srgb,
            var(--metric-accent) 7%,
            white
        );

}


.cross-branch-selection-metrics span,
.cross-branch-active-duo > span {

    display:
        block;

    color:
        var(--text-muted,#74798b);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;

}


.cross-branch-selection-metrics strong {

    display:
        block;

    margin-top:
        6px;

    color:
        var(--metric-accent,#7666e8);

    font-size:
        22px;

    font-weight:
        900;

}


/*
==========================================================
MOST ACTIVE DUO
==========================================================
*/

.cross-branch-active-duo {

    padding:
        14px;

    border:
        1px solid
        rgba(205,214,231,.72);

    border-radius:
        16px;

    background:
        rgba(255,255,255,.78);

}


.cross-branch-duo-portraits {

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        13px;

}


.cross-branch-duo-member {

    display:
        grid;

    justify-items:
        center;

    gap:
        7px;

    min-width:
        0;

    color:
        inherit;

    text-decoration:
        none;

    border-radius:
        14px;

    transition:
        transform .15s ease;

}


.cross-branch-duo-member:hover,
.cross-branch-duo-member:focus-visible {

    transform:
        translateY(-2px);

    outline:
        none;

}


.cross-branch-duo-member:hover strong,
.cross-branch-duo-member:focus-visible strong {

    color:
        var(--duo-member-accent, #7666e8);

}


.cross-branch-duo-portraits img {

    width:
        72px;

    height:
        72px;

    border:
        3px solid
        var(--duo-member-accent, #7666e8);

    border-radius:
        50%;

    object-fit:
        cover;

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--duo-member-accent, #7666e8) 24%,
            transparent
        ),
        0 5px 14px
        rgba(56,64,103,.12);

}


.cross-branch-duo-portraits strong {

    overflow:
        hidden;

    width:
        100%;

    color:
        var(--duo-member-accent, var(--text,#202333));

    font-size:
        11px;

    font-weight:
        800;

    text-align:
        center;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.cross-branch-duo-portraits > span {

    color:
        #7e8497;

    font-size:
        20px;

    font-weight:
        700;

}


.cross-branch-duo-count {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    min-height:
        58px;

    margin-top:
        12px;

    padding:
        8px 12px;

    border-radius:
        12px;

    background:
        rgba(118,102,232,.065);

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        background .15s ease,
        transform .15s ease,
        box-shadow .15s ease;

}


.cross-branch-duo-count:hover,
.cross-branch-duo-count:focus-visible {

    transform:
        translateY(-1px);

    background:
        rgba(118,102,232,.11);

    box-shadow:
        0 6px 14px
        rgba(85,75,160,.08);

    outline:
        none;

}


.cross-branch-duo-count strong {

    color:
        #7666e8;

    font-size:
        19px;

    font-weight:
        900;

}


.cross-branch-duo-count span {

    color:
        var(--text-muted,#74798b);

    font-size:
        11px;

    font-weight:
        700;

}


.cross-branch-no-duo {

    margin-top:
        12px;

    padding:
        24px 10px;

    color:
        var(--text-muted,#74798b);

    font-size:
        12px;

    text-align:
        center;

}


/*
==========================================================
RESPONSIVE — MEDIUM DESKTOP
==========================================================
*/

@media(max-width:1400px) and (min-width:1181px) {

    .cross-branch-body {

        gap:
            80px;

    }

}


/*
==========================================================
RESPONSIVE — TABLET / MOBILE
==========================================================
*/

@media(max-width:1180px) {

    .cross-branch-panel {

        padding:
            22px 18px 20px;

        border-radius:
            24px;

    }


    .cross-branch-intro-row {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .cross-branch-body {

        grid-template-columns:
            1fr;

        justify-content:
            stretch;

        gap:
            18px;

        min-height:
            0;

    }


    .cross-branch-matrix-wrapper {

        width:
            100%;

        transform:
            none;

    }


    .cross-branch-matrix-shell {

        margin:
            0 auto;

    }


    .cross-branch-selection {

        width:
            min(100%,760px);

        height:
            auto;

        min-height:
            0;

        margin:
            0 auto;

    }


    .cross-branch-selection-placeholder {

        min-height:
            120px;

    }

}


/*
==========================================================
RESPONSIVE — SMALL MOBILE
==========================================================
*/

@media(max-width:850px) {

    .cross-branch-header-row,
    .cross-branch-row {

        grid-template-columns:
            66px
            repeat(6,76px);

    }


    .cross-branch-axis-label {

        min-height:
            52px;

    }


    .cross-branch-axis-label img {

        width:
            38px;

        height:
            38px;

    }


    .cross-branch-cell {

        min-width:
            76px;

        height:
            56px;

    }


    .cross-branch-selection {

        padding:
            16px;

    }


    .cross-branch-selection-metrics {

        grid-template-columns:
            1fr;

    }

}


/* =========================
   DARK THEME
========================= */

html[data-theme="dark"] .cross-branch-panel {
    background: var(--surface-primary);
    border-color: var(--border-primary);
    box-shadow: 0 8px 20px rgba(0,0,0,.07);
}

html[data-theme="dark"] .cross-branch-intro-row p,
html[data-theme="dark"] .cross-branch-legend,
html[data-theme="dark"] .cross-branch-selection-placeholder,
html[data-theme="dark"] .cross-branch-selection-metrics span,
html[data-theme="dark"] .cross-branch-active-duo > span,
html[data-theme="dark"] .cross-branch-duo-count span,
html[data-theme="dark"] .cross-branch-no-duo {
    color: var(--text-muted);
}

html[data-theme="dark"] .cross-branch-axis-label,
html[data-theme="dark"] .cross-branch-selection-metrics strong,
html[data-theme="dark"] .cross-branch-selected-branches strong {
    color: var(--text-primary);
}

html[data-theme="dark"] .cross-branch-duo-portraits strong {
    color:
        color-mix(
            in srgb,
            var(--duo-member-accent, #7666e8) 78%,
            var(--text-primary)
        );
}

html[data-theme="dark"] .cross-branch-legend-scale i:first-child,
html[data-theme="dark"] .cross-branch-cell:not(.is-internal)[style*="--cross-branch-intensity: 0%"] {
    background: var(--surface-hover);
}

html[data-theme="dark"] .cross-branch-cell:not(.is-internal) {
    border-color: var(--border-primary);
}

html[data-theme="dark"] .cross-branch-cell.is-internal {
    color:
        color-mix(
            in srgb,
            var(--cross-branch-diagonal-color) 72%,
            var(--text-primary)
        );
    border-color:
        color-mix(
            in srgb,
            var(--cross-branch-diagonal-color) 72%,
            var(--border-primary)
        );
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.08),
        0 3px 8px
        color-mix(
            in srgb,
            var(--cross-branch-diagonal-color) 14%,
            transparent
        );
}

html[data-theme="dark"] .cross-branch-selection {
    background:
        linear-gradient(
            145deg,
            var(--surface-secondary),
            var(--surface-primary)
        );
    border-color: var(--border-primary);
    box-shadow: 0 7px 18px rgba(0,0,0,.07);
}

html[data-theme="dark"] .cross-branch-clear-button {
    background: var(--surface-secondary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

html[data-theme="dark"] .cross-branch-clear-button:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

html[data-theme="dark"] .cross-branch-selection-metrics > div,
html[data-theme="dark"] .cross-branch-active-duo {
    background: var(--surface-secondary);
}

html[data-theme="dark"] .cross-branch-duo-portraits > span {
    color: var(--text-muted);
}


/*
==========================================================
DARK THEME — MATRIX CELLS
==========================================================
*/

html[data-theme="dark"] .cross-branch-cell {

    color:
        var(--text-secondary);

    border-color:
        var(--border-primary);

    background:
        var(--surface-secondary);

}

html[data-theme="dark"]
.cross-branch-cell:not(.is-internal) {

    background:
        color-mix(
            in srgb,
            #7666e8 var(--cross-branch-intensity),
            var(--surface-secondary)
        );

    color:
        color-mix(
            in srgb,
            #c5beff 68%,
            var(--text-primary)
        );

}

html[data-theme="dark"]
.cross-branch-cell:not(.is-internal)
[style*="--cross-branch-intensity: 0%"] {

    background:
        var(--surface-secondary);

    color:
        var(--text-muted);

}

html[data-theme="dark"]
.cross-branch-cell.is-internal {

    background:
        color-mix(
            in srgb,
            var(--cross-branch-diagonal-color) 24%,
            var(--surface-secondary)
        );

    color:
        color-mix(
            in srgb,
            var(--cross-branch-diagonal-color) 62%,
            var(--text-primary)
        );

    border-color:
        color-mix(
            in srgb,
            var(--cross-branch-diagonal-color) 70%,
            var(--border-primary)
        );

    box-shadow:
        inset 0 0 0 2px
        rgba(
            255,
            255,
            255,
            .05
        ),
        0 3px 8px
        color-mix(
            in srgb,
            var(--cross-branch-diagonal-color) 14%,
            transparent
        );

}

html[data-theme="dark"]
.cross-branch-legend-scale i:first-child {

    background:
        var(--surface-secondary);

}

html[data-theme="dark"]
.cross-branch-legend-scale i:nth-child(2) {

    background:
        color-mix(
            in srgb,
            #7666e8 18%,
            var(--surface-secondary)
        );

}

html[data-theme="dark"]
.cross-branch-legend-scale i:nth-child(3) {

    background:
        color-mix(
            in srgb,
            #7666e8 34%,
            var(--surface-secondary)
        );

}

html[data-theme="dark"]
.cross-branch-legend-scale i:nth-child(4) {

    background:
        color-mix(
            in srgb,
            #7666e8 56%,
            var(--surface-secondary)
        );

}

html[data-theme="dark"]
.cross-branch-legend-scale i:nth-child(5) {

    background:
        #7666e8;

}


/*
==========================================================
DARK THEME — BRANCH LOGOS
==========================================================
*/

/*
The source "src" stays unchanged so the JavaScript does not need to know
about the active theme. CSS swaps only the artwork in Dark Mode.
*/

html[data-theme="dark"]
.cross-branch-panel img[src$="dev-is.png"] {

    content:
        url("../../../assets/logos/dev-is-dark-mode.png");

}

html[data-theme="dark"]
.cross-branch-panel img[src$="holostars-en.png"] {

    content:
        url("../../../assets/logos/holostars-en-dark-mode.png");

}