/*
============================================================
 INSIGHT DESIGN SYSTEM — T3
 Linear structure
 Fluent depth
 Spectrum creator controls
 Editorial media typography
============================================================
*/


:root{

    /* -------------------------------------------------------
       CORE
       ------------------------------------------------------- */

    --ix-bg:
        #f4f5f7;

    --ix-surface:
        rgba(255,255,255,.92);

    --ix-surface-solid:
        #ffffff;

    --ix-surface-muted:
        #f8f9fb;

    --ix-sidebar:
        #0d1017;

    --ix-sidebar-soft:
        #151923;


    /* -------------------------------------------------------
       TEXT
       ------------------------------------------------------- */

    --ix-ink:
        #111318;

    --ix-text:
        #353b49;

    --ix-muted:
        #7a8395;

    --ix-faint:
        #a5adbb;


    /* -------------------------------------------------------
       ACCENT
       ------------------------------------------------------- */

    --ix-accent:
        #5865f2;

    --ix-accent-strong:
        #4752d8;

    --ix-accent-soft:
        rgba(88,101,242,.09);

    --ix-live:
        #e34955;

    --ix-success:
        #198f68;

    --ix-warning:
        #b87512;


    /* -------------------------------------------------------
       GEOMETRY
       ------------------------------------------------------- */

    --ix-radius-xs:
        6px;

    --ix-radius-sm:
        9px;

    --ix-radius:
        12px;

    --ix-radius-lg:
        18px;


    /* -------------------------------------------------------
       BORDERS
       ------------------------------------------------------- */

    --ix-line:
        rgba(20,28,45,.075);

    --ix-line-strong:
        rgba(20,28,45,.12);


    /* -------------------------------------------------------
       SHADOWS
       ------------------------------------------------------- */

    --ix-shadow-xs:
        0 1px 2px rgba(10,18,35,.035);

    --ix-shadow:
        0 8px 28px rgba(18,27,45,.055);

    --ix-shadow-float:
        0 22px 60px rgba(10,18,35,.11);


    /* -------------------------------------------------------
       LAYOUT
       ------------------------------------------------------- */

    --ix-sidebar-width:
        236px;

    --ix-content-max:
        1440px;

}


/* ==========================================================
   DOCUMENT
   ========================================================== */

html{

    font-size:
        15px;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


body{

    color:
        var(--ix-text);

    background:
        var(--ix-bg);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    letter-spacing:
        -.006em;
}


*{

    box-sizing:
        border-box;
}


a{

    -webkit-tap-highlight-color:
        transparent;
}


/* ==========================================================
   BRAND
   ========================================================== */

.ix-brand,
.media-brand,
.brand,
.sidebar-brand{

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.ix-brand-mark,
.media-brand-mark,
.sidebar-brand-mark{

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    background:
        linear-gradient(
            145deg,
            #6571ff,
            #3f49c7
        );

    color:
        #fff;

    font-size:
        16px;

    font-weight:
        900;

    box-shadow:
        0 7px 20px
        rgba(88,101,242,.25);
}


.ix-brand strong,
.media-brand strong,
.sidebar-brand strong{

    color:
        #fff;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        -.025em;
}


.ix-brand small,
.media-brand small,
.sidebar-brand small{

    color:
        rgba(255,255,255,.45);

    font-size:
        9px;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

aside,
.sidebar,
.media-sidebar,
.ix-sidebar{

    background:
        linear-gradient(
            180deg,
            var(--ix-sidebar),
            #10141d
        );

    color:
        rgba(255,255,255,.68);
}


.sidebar,
.media-sidebar,
.ix-sidebar{

    border-right:
        1px solid
        rgba(255,255,255,.045);
}


/* GROUP LABEL */

.sidebar h3,
.media-sidebar h3,
.ix-nav-label,
.nav-group-title{

    margin:
        24px 10px 7px;

    color:
        rgba(255,255,255,.34);

    font-size:
        8px;

    line-height:
        1;

    font-weight:
        850;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


/* NAV ITEM */

.sidebar a,
.media-sidebar a,
.ix-sidebar a{

    position:
        relative;

    min-height:
        36px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin:
        2px 6px;

    padding:
        0 10px;

    border-radius:
        7px;

    color:
        rgba(255,255,255,.66);

    font-size:
        11px;

    font-weight:
        650;

    text-decoration:
        none;

    transition:
        background .12s ease,
        color .12s ease;
}


.sidebar a:hover,
.media-sidebar a:hover,
.ix-sidebar a:hover{

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

    color:
        #fff;
}


.sidebar a.active,
.sidebar a[aria-current="page"],
.media-sidebar a.active,
.ix-sidebar a.active{

    background:
        rgba(88,101,242,.17);

    color:
        #fff;
}


.sidebar a.active::before,
.media-sidebar a.active::before,
.ix-sidebar a.active::before{

    content:
        "";

    position:
        absolute;

    left:
        -6px;

    width:
        2px;

    height:
        18px;

    border-radius:
        999px;

    background:
        #7883ff;
}


/* ==========================================================
   MAIN WORKSPACE
   ========================================================== */

main,
.media-main,
.ix-main{

    background:
        transparent;
}


.media-shell,
.ix-shell,
main > .container{

    width:
        min(
            calc(100% - 34px),
            var(--ix-content-max)
        );

    margin:
        0 auto;
}


/* ==========================================================
   PAGE HEADER
   ========================================================== */

.page-header,
.media-header,
.ix-page-header{

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        22px;

    margin-bottom:
        24px;
}


.page-header h1,
.media-header h1,
.ix-page-header h1{

    margin:
        0;

    color:
        var(--ix-ink);

    font-size:
        clamp(
            28px,
            4vw,
            46px
        );

    line-height:
        .98;

    font-weight:
        760;

    letter-spacing:
        -.055em;
}


.page-header p,
.media-header p,
.ix-page-header p{

    max-width:
        620px;

    margin:
        7px 0 0;

    color:
        var(--ix-muted);

    font-size:
        12px;

    line-height:
        1.5;
}


/* ==========================================================
   SURFACES
   ========================================================== */

.card,
.panel,
.media-card,
.media-panel,
.ix-card,
.ops-panel,
.t2-card,
.i-panel{

    border:
        1px solid
        var(--ix-line);

    border-radius:
        var(--ix-radius);

    background:
        var(--ix-surface);

    box-shadow:
        var(--ix-shadow-xs);

    backdrop-filter:
        blur(14px);

    transition:
        border-color .12s ease,
        box-shadow .12s ease,
        transform .12s ease;
}


.card:hover,
.media-card:hover,
.ix-card:hover{

    border-color:
        rgba(88,101,242,.14);

    box-shadow:
        var(--ix-shadow);
}


/* ==========================================================
   BUTTONS
   ========================================================== */

button,
.button,
.btn,
input[type="submit"],
input[type="button"],
.ix-button{

    min-height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 12px;

    border:
        1px solid
        var(--ix-line-strong);

    border-radius:
        8px;

    background:
        #fff;

    color:
        #2f3747;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        760;

    letter-spacing:
        -.01em;

    box-shadow:
        var(--ix-shadow-xs);

    cursor:
        pointer;

    transition:
        background .12s ease,
        border-color .12s ease,
        transform .12s ease;
}


button:hover,
.button:hover,
.btn:hover,
.ix-button:hover{

    background:
        #fafbfc;

    border-color:
        rgba(88,101,242,.22);
}


button:active,
.button:active,
.btn:active{

    transform:
        translateY(1px);
}


/* PRIMARY */

.button.primary,
.btn-primary,
.ix-button-primary,
button.primary{

    border-color:
        transparent;

    background:
        var(--ix-accent);

    color:
        #fff;

    box-shadow:
        0 5px 16px
        rgba(88,101,242,.19);
}


.button.primary:hover,
.btn-primary:hover,
.ix-button-primary:hover{

    background:
        var(--ix-accent-strong);
}


/* ==========================================================
   FORMS — SPECTRUM INFLUENCE
   ========================================================== */

label{

    color:
        #505a6d;

    font-size:
        9px;

    font-weight:
        760;

    letter-spacing:
        .025em;
}


input,
select,
textarea{

    width:
        100%;

    min-height:
        38px;

    padding:
        8px 10px;

    border:
        1px solid
        var(--ix-line-strong);

    border-radius:
        8px;

    background:
        #fff;

    color:
        var(--ix-ink);

    font-family:
        inherit;

    font-size:
        11px;

    outline:
        none;

    transition:
        border-color .12s ease,
        box-shadow .12s ease;
}


textarea{

    min-height:
        94px;

    resize:
        vertical;
}


input:focus,
select:focus,
textarea:focus{

    border-color:
        rgba(88,101,242,.55);

    box-shadow:
        0 0 0 3px
        rgba(88,101,242,.09);
}


/* ==========================================================
   TABLES
   ========================================================== */

table{

    width:
        100%;

    border-collapse:
        separate;

    border-spacing:
        0;

    overflow:
        hidden;

    border:
        1px solid
        var(--ix-line);

    border-radius:
        10px;

    background:
        #fff;
}


th{

    padding:
        10px 12px;

    border-bottom:
        1px solid
        var(--ix-line);

    background:
        #f8f9fb;

    color:
        #7a8393;

    font-size:
        8px;

    font-weight:
        850;

    text-align:
        left;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


td{

    padding:
        11px 12px;

    border-bottom:
        1px solid
        rgba(20,28,45,.05);

    color:
        #394253;

    font-size:
        10px;
}


tr:last-child td{

    border-bottom:
        none;
}


/* ==========================================================
   STATUS
   ========================================================== */

.badge,
.status,
.pill,
.ops-status,
.ix-status{

    min-height:
        22px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        0 7px;

    border-radius:
        999px;

    background:
        #f1f3f6;

    color:
        #667085;

    font-size:
        8px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


.status.live,
.badge.live,
.ix-status-live{

    background:
        rgba(227,73,85,.09);

    color:
        var(--ix-live);
}


.status.active,
.badge.active,
.ix-status-active{

    background:
        rgba(25,143,104,.09);

    color:
        var(--ix-success);
}


/* LIVE DOT */

.status.live::before,
.badge.live::before,
.ix-status-live::before{

    content:
        "";

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        currentColor;

    box-shadow:
        0 0 0 4px
        rgba(227,73,85,.09);
}


/* ==========================================================
   TABS
   ========================================================== */

.tabs,
.media-tabs,
.ix-tabs{

    display:
        inline-flex;

    gap:
        3px;

    padding:
        3px;

    border:
        1px solid
        var(--ix-line);

    border-radius:
        9px;

    background:
        #eef0f3;
}


.tabs a,
.media-tabs a,
.ix-tabs a{

    min-height:
        30px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0 10px;

    border-radius:
        6px;

    color:
        #657084;

    font-size:
        9px;

    font-weight:
        750;

    text-decoration:
        none;
}


.tabs a.active,
.media-tabs a.active,
.ix-tabs a.active{

    background:
        #fff;

    color:
        #242b38;

    box-shadow:
        var(--ix-shadow-xs);
}


/* ==========================================================
   MEDIA PLAYER / LIVE
   ========================================================== */

.media-player,
.radio-player,
.live-player,
.ix-player{

    border:
        1px solid
        rgba(88,101,242,.11);

    border-radius:
        var(--ix-radius-lg);

    background:
        linear-gradient(
            145deg,
            #111722,
            #171d2a
        );

    color:
        #fff;

    box-shadow:
        var(--ix-shadow-float);
}


.media-player h2,
.radio-player h2,
.live-player h2{

    color:
        #fff;

    letter-spacing:
        -.04em;
}


.media-player .meta,
.radio-player .meta,
.live-player .meta{

    color:
        rgba(255,255,255,.52);
}


/* ==========================================================
   INTELLIGENCE SURFACE
   ========================================================== */

.insight-card,
.audience-card,
.analytics-card,
.i-panel{

    position:
        relative;

    overflow:
        hidden;
}


.insight-card::before,
.audience-card::before,
.analytics-card::before{

    content:
        "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    right:
        -90px;

    top:
        -90px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(88,101,242,.11),
            transparent 70%
        );

    pointer-events:
        none;
}


/* ==========================================================
   MODAL / POPOVER
   ========================================================== */

.modal,
.dialog,
.popover,
.ix-dialog{

    border:
        1px solid
        var(--ix-line);

    border-radius:
        14px;

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

    box-shadow:
        var(--ix-shadow-float);

    backdrop-filter:
        blur(18px);
}


/* ==========================================================
   SCROLLBARS
   ========================================================== */

*{

    scrollbar-width:
        thin;

    scrollbar-color:
        #c8cdd7
        transparent;
}


*::-webkit-scrollbar{

    width:
        8px;

    height:
        8px;
}


*::-webkit-scrollbar-thumb{

    border:
        2px solid transparent;

    border-radius:
        999px;

    background:
        #c7ccd6;

    background-clip:
        padding-box;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:800px){

    :root{

        --ix-sidebar-width:
            0px;
    }


    body{

        font-size:
            14px;
    }


    .page-header,
    .media-header,
    .ix-page-header{

        display:
            block;
    }


    .sidebar,
    .media-sidebar,
    .ix-sidebar{

        position:
            fixed;

        z-index:
            9999;

        left:
            8px;

        right:
            8px;

        bottom:
            calc(
                8px
                + env(safe-area-inset-bottom)
            );

        width:
            auto !important;

        height:
            auto !important;

        display:
            flex;

        overflow-x:
            auto;

        padding:
            5px;

        border:
            1px solid
            rgba(255,255,255,.07);

        border-radius:
            14px;

        box-shadow:
            0 16px 40px
            rgba(8,12,20,.24);
    }


    .sidebar h3,
    .media-sidebar h3,
    .ix-nav-label,
    .sidebar-brand,
    .media-brand{

        display:
            none;
    }


    .sidebar a,
    .media-sidebar a,
    .ix-sidebar a{

        flex:
            0 0 auto;

        margin:
            0 2px;

        min-height:
            42px;

        padding:
            0 11px;
    }


    body{

        padding-bottom:
            calc(
                74px
                + env(safe-area-inset-bottom)
            );
    }


    table{

        font-size:
            10px;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

    *,
    *::before,
    *::after{

        transition:
            none !important;

        animation:
            none !important;
    }

}


/* ==========================================================
   END INSIGHT DESIGN SYSTEM T3
   ========================================================== */