/* ==========================================
   COLLECTION TIMELINE
========================================== */

.timeline-page .main-content{
    min-width:0;
}

.timeline-scroll{
    padding:26px;
}

.timeline-shell{
    width:100%;
    max-width:1450px;
    margin:0 auto;
}

.timeline-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:26px 28px;
    border:1px solid var(--border);
    border-radius:20px;
    background:
        linear-gradient(120deg,rgba(124,92,252,.14),transparent 48%),
        var(--panel);
}

.timeline-hero h2{
    margin:5px 0 7px;
    color:var(--text);
    font-size:28px;
    line-height:1.25;
}

.timeline-hero p{
    max-width:760px;
    margin:0;
    color:var(--text-light);
    font-size:13px;
    line-height:1.65;
}

.timeline-recording-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
    padding:9px 12px;
    border:1px solid rgba(66,211,146,.28);
    border-radius:999px;
    background:rgba(66,211,146,.08);
    color:var(--success);
    font-size:12px;
    font-weight:600;
}

.timeline-recording-badge i{
    font-size:8px;
}

/* Summary */

.timeline-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-top:18px;
}

.timeline-kpi{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
    padding:18px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--panel);
}

.timeline-kpi > i{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border-radius:12px;
    background:rgba(124,92,252,.12);
    color:var(--primary-hover);
    font-size:15px;
}

.timeline-kpi-accent > i{
    background:rgba(66,211,146,.12);
    color:var(--success);
}

.timeline-kpi div{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.timeline-kpi span,
.timeline-kpi small{
    overflow:hidden;
    color:var(--text-light);
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.timeline-kpi strong{
    margin:2px 0;
    overflow:hidden;
    color:var(--text);
    font-size:22px;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Workspace */

.timeline-workspace{
    margin-top:18px;
    padding:24px;
    border:1px solid var(--border);
    border-radius:19px;
    background:var(--panel);
}

.timeline-toolbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding-bottom:20px;
    border-bottom:1px solid var(--border);
}

.timeline-toolbar h3{
    margin:4px 0 0;
    color:var(--text);
    font-size:20px;
}

.timeline-toolbar p{
    margin:6px 0 0;
    color:var(--text-light);
    font-size:12px;
}

.timeline-filter-group{
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--panel-light);
}

.timeline-filter-group button{
    min-height:34px;
    padding:7px 11px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--text-light);
    font-family:inherit;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

.timeline-filter-group button:hover,
.timeline-filter-group button.active{
    background:rgba(124,92,252,.16);
    color:var(--text);
}

/* Feed */

.timeline-feed{
    position:relative;
    max-width:1050px;
    margin:0 auto;
    padding:4px 0 0 28px;
}

.timeline-feed::before{
    content:"";
    position:absolute;
    top:36px;
    bottom:18px;
    left:47px;
    width:1px;
    background:var(--border);
}

.timeline-date-heading{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:14px;
    margin:25px 0 13px;
}

.timeline-date-heading strong{
    color:var(--text);
    font-size:13px;
}

.timeline-date-heading span{
    height:1px;
    background:var(--border);
}

.timeline-event{
    --event-accent:var(--primary-hover);
    --event-soft:rgba(124,92,252,.12);
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:16px;
    margin-bottom:11px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:15px;
    background:rgba(255,255,255,.02);
    transition:border-color .2s ease,background .2s ease;
}

.timeline-event:hover{
    border-color:color-mix(in srgb,var(--event-accent) 48%,var(--border));
    background:var(--event-soft);
}

.timeline-event-positive{
    --event-accent:var(--success);
    --event-soft:rgba(66,211,146,.06);
}

.timeline-event-negative{
    --event-accent:var(--danger);
    --event-soft:rgba(255,92,122,.06);
}

.timeline-event-market{
    --event-accent:#52a8ff;
    --event-soft:rgba(82,168,255,.06);
}

.timeline-event-milestone{
    --event-accent:var(--warning);
    --event-soft:rgba(244,183,64,.06);
}

.timeline-event-marker{
    position:relative;
    z-index:1;
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    border:1px solid color-mix(in srgb,var(--event-accent) 32%,var(--border));
    border-radius:12px;
    background:var(--panel);
    color:var(--event-accent);
    font-size:13px;
}

.timeline-event-body{
    min-width:0;
}

.timeline-event-body > span{
    color:var(--event-accent);
    font-size:12px;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
}

.timeline-event-body h4{
    margin:4px 0 5px;
    color:var(--text);
    font-size:15px;
}

.timeline-event-body p{
    margin:0;
    color:var(--text-light);
    font-size:12px;
    line-height:1.6;
}

.timeline-event-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 14px;
    margin-top:10px;
    color:var(--text-light);
    font-size:12px;
}

.timeline-event-meta time{
    font-size:12px;
}

.timeline-event-value{
    display:flex;
    align-items:flex-end;
    flex-direction:column;
    justify-content:space-between;
    gap:12px;
    min-width:86px;
}

.timeline-event-value strong{
    color:var(--event-accent);
    font-size:13px;
    text-align:right;
}

.timeline-event-value a{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:9px;
    color:var(--text-light);
    font-size:12px;
    text-decoration:none;
}

.timeline-event-value a:hover{
    border-color:var(--event-accent);
    color:var(--event-accent);
}

.timeline-empty{
    min-height:220px;
    place-items:center;
    align-content:center;
    gap:7px;
    color:var(--text-light);
    text-align:center;
}

.timeline-empty:not([hidden]){
    display:grid;
}

.timeline-empty i{
    color:var(--primary-hover);
    font-size:28px;
}

.timeline-empty strong{
    color:var(--text);
    font-size:14px;
}

.timeline-empty span{
    font-size:12px;
}

.timeline-load-more{
    width:100%;
    max-width:1050px;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:20px auto 0;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(255,255,255,.025);
    color:var(--text-light);
    font-family:inherit;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

.timeline-load-more:hover{
    border-color:var(--primary);
    background:rgba(124,92,252,.09);
    color:var(--text);
}

@media (max-width:1250px){
    .timeline-kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:820px){
    .timeline-scroll{
        padding:18px;
    }

    .timeline-hero,
    .timeline-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .timeline-filter-group{
        width:100%;
        overflow-x:auto;
    }

    .timeline-filter-group button{
        flex:1 0 auto;
    }

    .timeline-feed{
        padding-left:0;
    }

    .timeline-feed::before{
        display:none;
    }
}

@media (max-width:600px){
    .timeline-kpi-grid{
        grid-template-columns:1fr;
    }

    .timeline-hero,
    .timeline-workspace{
        padding:18px;
    }

    .timeline-hero h2{
        font-size:23px;
    }

    .timeline-event{
        grid-template-columns:auto minmax(0,1fr);
    }

    .timeline-event-value{
        grid-column:2;
        align-items:center;
        flex-direction:row;
    }
}