/* ==========================================================
   INSIGHT MEDIA V29
   fast expressive radio operating surface
   ========================================================== */

:root{
    --v29-bg:#f7f5f0;
    --v29-surface:#ffffff;
    --v29-soft:#efede7;
    --v29-ink:#171614;
    --v29-muted:#716f69;

    --v29-live:#de4f3e;
    --v29-purple:#7659d6;
    --v29-green:#3d8b66;
    --v29-gold:#d9a63c;

    --v29-line:rgba(22,20,18,.08);

    --v29-shadow:
        0 22px 65px
        rgba(31,25,21,.10);

    --v29-radius:30px;
}

/* ----------------------------------------------------------
   Faster perceived loading
   ---------------------------------------------------------- */

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
}

img{
    content-visibility:auto;
}

.im-section,
.im-card,
.im-story-card,
.im-station-card{
    content-visibility:auto;
    contain-intrinsic-size:300px;
}

/* ----------------------------------------------------------
   Ambient product canvas
   ---------------------------------------------------------- */

body::before{
    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;
    z-index:-1;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(222,79,62,.07),
            transparent 28rem
        ),
        radial-gradient(
            circle at 7% 76%,
            rgba(118,89,214,.06),
            transparent 27rem
        );
}


/* ----------------------------------------------------------
   Global glass header enhancement
   ---------------------------------------------------------- */

.im-topbar,
.im-header,
header.im-header{
    backdrop-filter:
        blur(22px)
        saturate(1.25);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(1.25);
}


/* ----------------------------------------------------------
   Floating right-side intelligence dock
   ---------------------------------------------------------- */

.v29-dock{
    position:fixed;

    right:18px;
    top:50%;

    transform:
        translateY(-50%);

    z-index:900;

    display:flex;
    flex-direction:column;

    gap:7px;

    padding:7px;

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

    border-radius:24px;

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

    backdrop-filter:
        blur(20px)
        saturate(1.35);

    box-shadow:
        0 18px 55px
        rgba(32,26,23,.13);
}

.v29-dock-item{
    position:relative;

    width:49px;
    height:49px;

    border:0;
    border-radius:18px;

    background:transparent;

    color:#292623;

    display:grid;
    place-items:center;

    cursor:pointer;

    text-decoration:none;

    font-size:18px;

    transition:
        transform .16s ease,
        background .16s ease;
}

.v29-dock-item:hover{
    transform:
        translateX(-3px)
        scale(1.05);

    background:#f0ede7;
}

.v29-dock-item.live{
    color:white;
    background:var(--v29-live);
}

.v29-dock-tip{
    position:absolute;

    right:61px;
    top:50%;

    transform:
        translateY(-50%)
        translateX(8px);

    opacity:0;
    pointer-events:none;

    white-space:nowrap;

    padding:
        9px
        13px;

    border-radius:13px;

    background:#171614;
    color:white;

    font-size:11px;
    font-weight:750;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.18);

    transition:
        opacity .14s ease,
        transform .14s ease;
}

.v29-dock-item:hover
.v29-dock-tip{
    opacity:1;

    transform:
        translateY(-50%)
        translateX(0);
}


/* ----------------------------------------------------------
   Live pulse island
   ---------------------------------------------------------- */

.v29-live-island{
    position:fixed;

    top:18px;
    left:50%;

    transform:
        translateX(-50%);

    z-index:850;

    min-width:
        min(
            400px,
            calc(100vw - 150px)
        );

    max-width:560px;

    min-height:52px;

    padding:
        7px
        10px
        7px
        8px;

    display:flex;
    align-items:center;

    gap:10px;

    border-radius:20px;

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

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

    backdrop-filter:
        blur(22px)
        saturate(1.3);

    box-shadow:
        0 14px 45px
        rgba(33,27,23,.12);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.v29-live-island:hover{
    transform:
        translateX(-50%)
        translateY(2px);

    box-shadow:
        0 20px 55px
        rgba(33,27,23,.16);
}

.v29-live-art{
    width:38px;
    height:38px;

    border-radius:14px;

    display:grid;
    place-items:center;

    flex:none;

    background:
        linear-gradient(
            145deg,
            #e76855,
            #a44238
        );

    color:white;
}

.v29-live-art.is-live{
    animation:
        v29LivePulse
        1.5s ease-in-out infinite;
}

@keyframes v29LivePulse{
    50%{
        transform:scale(.91);
    }
}

.v29-live-copy{
    min-width:0;
    flex:1;
}

.v29-live-copy strong{
    display:block;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:12px;
}

.v29-live-copy span{
    display:block;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#76716c;

    font-size:10px;

    margin-top:2px;
}

.v29-live-audience{
    padding:
        7px
        9px;

    border-radius:999px;

    background:#efede8;

    font-size:10px;

    white-space:nowrap;
}


/* ----------------------------------------------------------
   Floating persistent audio player
   ---------------------------------------------------------- */

.v29-player{
    position:fixed;

    left:50%;
    bottom:18px;

    transform:
        translateX(-50%);

    z-index:920;

    width:
        min(
            760px,
            calc(100vw - 32px)
        );

    min-height:72px;

    padding:
        9px
        12px;

    display:grid;

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

    align-items:center;

    gap:12px;

    border-radius:25px;

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

    background:
        rgba(25,23,21,.94);

    color:white;

    backdrop-filter:
        blur(20px)
        saturate(1.3);

    box-shadow:
        0 25px 70px
        rgba(28,23,20,.28);
}

.v29-play{
    width:52px;
    height:52px;

    border:0;
    border-radius:19px;

    background:white;
    color:#191715;

    cursor:pointer;

    display:grid;
    place-items:center;

    font-size:18px;

    transition:
        transform .16s ease;
}

.v29-play:hover{
    transform:scale(1.05);
}

.v29-player-copy{
    min-width:0;
}

.v29-player-copy strong{
    display:block;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:13px;
}

.v29-player-copy span{
    display:block;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    margin-top:3px;

    color:#b7b1ad;

    font-size:10px;
}

.v29-wave{
    height:34px;

    display:flex;
    align-items:center;

    gap:3px;
}

.v29-wave i{
    width:3px;
    height:8px;

    display:block;

    border-radius:999px;

    background:
        rgba(255,255,255,.45);
}

.v29-player.playing
.v29-wave i{
    animation:
        v29Wave
        .6s ease-in-out
        infinite alternate;
}

.v29-wave i:nth-child(2){animation-delay:.12s}
.v29-wave i:nth-child(3){animation-delay:.23s}
.v29-wave i:nth-child(4){animation-delay:.08s}
.v29-wave i:nth-child(5){animation-delay:.31s}
.v29-wave i:nth-child(6){animation-delay:.18s}

@keyframes v29Wave{
    to{
        height:29px;
        background:white;
    }
}


/* ----------------------------------------------------------
   Universal command/search palette
   ---------------------------------------------------------- */

.v29-command{
    position:fixed;
    inset:0;

    z-index:1100;

    display:none;

    padding:
        min(12vh,90px)
        18px
        30px;

    justify-content:center;
    align-items:flex-start;

    background:
        rgba(22,19,18,.28);

    backdrop-filter:
        blur(14px);
}

.v29-command.open{
    display:flex;
}

.v29-command-panel{
    width:
        min(
            680px,
            100%
        );

    max-height:
        min(
            720px,
            78vh
        );

    overflow:hidden;

    border-radius:30px;

    background:white;

    box-shadow:
        0 40px 120px
        rgba(29,24,21,.30);
}

.v29-command-search{
    padding:15px;

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

.v29-command-search input{
    width:100%;

    height:56px;

    border:0;
    outline:0;

    border-radius:18px;

    padding:0 18px;

    background:#f4f2ed;

    color:#1d1b19;

    font-size:16px;
}

.v29-command-results{
    max-height:600px;
    overflow:auto;

    padding:9px;
}

.v29-command-group{
    padding:
        10px
        10px
        5px;

    color:#8d8983;

    font-size:9px;
    font-weight:900;

    letter-spacing:.14em;

    text-transform:uppercase;
}

.v29-command-link{
    min-height:58px;

    padding:8px 11px;

    display:grid;

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

    gap:10px;

    align-items:center;

    border-radius:18px;

    color:#211f1c;

    text-decoration:none;

    transition:
        background .13s ease;
}

.v29-command-link:hover,
.v29-command-link.active{
    background:#f2efe9;
}

.v29-command-icon{
    width:42px;
    height:42px;

    border-radius:15px;

    display:grid;
    place-items:center;

    background:#eae7e0;
}

.v29-command-link strong,
.v29-command-link small{
    display:block;
}

.v29-command-link strong{
    font-size:12px;
}

.v29-command-link small{
    margin-top:3px;

    color:#817d76;

    font-size:10px;
}

.v29-command-key{
    color:#99948d;

    font-size:9px;
}


/* ----------------------------------------------------------
   Quick creator popup
   ---------------------------------------------------------- */

.v29-create-sheet{
    position:fixed;
    inset:0;

    z-index:1080;

    display:none;

    align-items:flex-end;
    justify-content:center;

    padding:18px;

    background:
        rgba(19,16,15,.28);

    backdrop-filter:blur(13px);
}

.v29-create-sheet.open{
    display:flex;
}

.v29-create-panel{
    width:
        min(
            760px,
            100%
        );

    padding:24px;

    border-radius:34px;

    background:#fffaf3;

    box-shadow:
        0 30px 90px
        rgba(30,24,20,.30);

    animation:
        v29Sheet
        .25s
        cubic-bezier(.2,.8,.2,1);
}

@keyframes v29Sheet{
    from{
        transform:translateY(35px);
        opacity:0;
    }
}

.v29-create-head{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-bottom:20px;
}

.v29-create-head h2{
    margin:0;

    color:#1e1b18;

    font-size:28px;

    letter-spacing:-.045em;
}

.v29-close{
    width:42px;
    height:42px;

    border:0;
    border-radius:15px;

    background:#ece7df;

    cursor:pointer;
}

.v29-create-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:9px;
}

.v29-create-card{
    min-height:145px;

    padding:17px;

    border:0;

    border-radius:24px;

    color:#211e1b;

    text-align:left;

    text-decoration:none;

    cursor:pointer;

    transition:
        transform .15s ease;
}

.v29-create-card:hover{
    transform:
        translateY(-4px);
}

.v29-create-card:nth-child(1){
    background:#f4d6ce;
}

.v29-create-card:nth-child(2){
    background:#ddd5f2;
}

.v29-create-card:nth-child(3){
    background:#d8e6d8;
}

.v29-create-card:nth-child(4){
    background:#f1e0b9;
}

.v29-create-card b{
    display:block;

    margin-top:42px;

    font-size:17px;
}

.v29-create-card small{
    display:block;

    margin-top:4px;

    color:#665f59;
}


/* ----------------------------------------------------------
   Enhanced cards globally
   ---------------------------------------------------------- */

.im-card,
.im-story-card,
.im-station-card,
.cp-moment-card{
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.im-card:hover,
.im-story-card:hover,
.im-station-card:hover{
    transform:
        translateY(-4px);

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


/* ----------------------------------------------------------
   Global shortcut/search button
   ---------------------------------------------------------- */

.v29-search-launcher{
    position:fixed;

    left:18px;
    top:50%;

    transform:
        translateY(-50%);

    z-index:850;

    width:50px;
    height:50px;

    border:0;
    border-radius:19px;

    background:#171614;
    color:white;

    box-shadow:
        0 15px 40px
        rgba(25,20,18,.20);

    cursor:pointer;

    font-size:18px;
}


/* ----------------------------------------------------------
   Toast
   ---------------------------------------------------------- */

.v29-toast{
    position:fixed;

    left:50%;
    bottom:105px;

    transform:
        translateX(-50%)
        translateY(15px);

    z-index:1200;

    max-width:
        calc(100vw - 30px);

    padding:
        10px
        15px;

    border-radius:14px;

    background:#171614;
    color:white;

    opacity:0;
    pointer-events:none;

    font-size:11px;

    transition:
        opacity .17s ease,
        transform .17s ease;
}

.v29-toast.show{
    opacity:1;

    transform:
        translateX(-50%)
        translateY(0);
}


/* ----------------------------------------------------------
   Mobile bottom nav
   ---------------------------------------------------------- */

.v29-mobile-nav{
    display:none;
}


/* ----------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------- */

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        scroll-behavior:auto !important;

        transition-duration:.01ms !important;
    }
}


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

@media(max-width:900px){

    .v29-live-island{
        top:10px;

        min-width:
            min(
                410px,
                calc(100vw - 90px)
            );
    }

    .v29-dock{
        display:none;
    }

    .v29-search-launcher{
        display:none;
    }

    .v29-create-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .v29-player{
        bottom:76px;
    }

    .v29-mobile-nav{
        position:fixed;

        left:10px;
        right:10px;
        bottom:10px;

        z-index:950;

        height:58px;

        display:grid;

        grid-template-columns:
            repeat(5,1fr);

        gap:4px;

        padding:5px;

        border-radius:22px;

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

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

        backdrop-filter:
            blur(20px);

        box-shadow:
            0 16px 50px
            rgba(35,28,24,.17);
    }

    .v29-mobile-nav a,
    .v29-mobile-nav button{
        border:0;

        border-radius:16px;

        display:grid;
        place-items:center;

        background:transparent;

        color:#27231f;

        text-decoration:none;

        cursor:pointer;

        font-size:17px;
    }

    .v29-mobile-nav .go-live{
        background:var(--v29-live);
        color:white;
    }
}

@media(max-width:520px){

    .v29-live-island{
        left:12px;
        right:12px;

        transform:none;

        width:auto;
        min-width:0;
    }

    .v29-live-island:hover{
        transform:none;
    }

    .v29-player{
        width:
            calc(100vw - 20px);

        min-height:66px;

        bottom:74px;

        grid-template-columns:
            auto
            minmax(0,1fr);
    }

    .v29-wave{
        display:none;
    }

    .v29-create-grid{
        grid-template-columns:1fr 1fr;
    }

    .v29-create-card{
        min-height:125px;
    }
}