:root {
    --dm-bg: #0b0f10;
    --dm-panel: #121819;
    --dm-panel2: #161d1e;
    --dm-line: rgba(211,220,215,.13);
    --dm-line-strong: rgba(211,220,215,.22);
    --dm-text: #f1f4f1;
    --dm-muted: #9ba49f;
    --dm-green: #76d564;
    --dm-positive: #70cf72;
    --dm-danger: #df6f69
}

body {
    background: var(--dm-bg);
    color: var(--dm-text)
}

.dm-page {
    min-height: 100vh;
    background: linear-gradient(rgba(118,213,100,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(118,213,100,.018) 1px,transparent 1px),var(--dm-bg);
    background-size: 72px 72px;
    color: var(--dm-text)
}

.dm-shell {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding-right: clamp(1rem,2vw,2.25rem);
    padding-left: clamp(1rem,2vw,2.25rem)
}

.dm-research-header {
    padding: 2rem 0 1.7rem;
    background: linear-gradient(180deg,#0e1314,#0b0f10);
    border-bottom: 1px solid var(--dm-line)
}

.dm-breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.35rem;
    color: #6f7873;
    font-size: .72rem;
    font-weight: 650
}

    .dm-breadcrumb a {
        color: #919b95;
        text-decoration: none
    }

        .dm-breadcrumb a:hover {
            color: var(--dm-green)
        }

    .dm-breadcrumb strong {
        color: #c8ceca
    }

.dm-header-grid, .dm-player-header {
    display: grid;
    grid-template-columns: minmax(320px,1fr) auto;
    align-items: end;
    gap: 3rem
}

.dm-kicker {
    color: var(--dm-green);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase
}

.dm-title-block h1 {
    margin: .45rem 0 .55rem;
    color: #fff;
    font-family: "Bahnschrift Condensed","Arial Narrow",sans-serif;
    font-size: clamp(2.6rem,4vw,4.2rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.035em;
    text-transform: uppercase
}

.dm-title-block p {
    max-width: 790px;
    margin: 0;
    color: var(--dm-muted);
    font-size: .9rem;
    line-height: 1.65
}

.dm-dataset-strip {
    display: grid;
    grid-template-columns: repeat(5,minmax(88px,auto));
    margin: 0;
    background: var(--dm-panel);
    border: 1px solid var(--dm-line-strong)
}

    .dm-dataset-strip > div {
        padding: .7rem .8rem;
        border-right: 1px solid var(--dm-line)
    }

        .dm-dataset-strip > div:last-child {
            border-right: 0
        }

    .dm-dataset-strip dt {
        color: #707a75;
        font-size: .57rem;
        letter-spacing: .08em;
        text-transform: uppercase
    }

    .dm-dataset-strip dd {
        margin: .12rem 0 0;
        color: #fff;
        font-size: .76rem;
        font-weight: 750
    }

.dm-workspace {
    padding: 1rem 0 2.5rem
}

.dm-stat-strip {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border: 1px solid var(--dm-line-strong);
    background: var(--dm-panel)
}

    .dm-stat-strip > div {
        display: grid;
        gap: .1rem;
        padding: .82rem 1rem;
        border-right: 1px solid var(--dm-line)
    }

        .dm-stat-strip > div:last-child {
            border-right: 0
        }

    .dm-stat-strip span, .dm-context-grid span {
        color: #75807a;
        font-size: .62rem;
        letter-spacing: .08em;
        text-transform: uppercase
    }

    .dm-stat-strip strong {
        color: #fff;
        font-size: 1.15rem
    }

    .dm-stat-strip small, .dm-context-grid small {
        color: var(--dm-muted);
        font-size: .66rem
    }

.dm-controls {
    display: grid;
    grid-template-columns: 170px 190px minmax(260px,1fr);
    gap: .65rem;
    align-items: end;
    margin-top: .75rem;
    padding: .72rem .8rem;
    border: 1px solid var(--dm-line-strong);
    background: var(--dm-panel)
}

    .dm-controls label {
        display: block;
        margin-bottom: .28rem;
        color: #76807b;
        font-size: .62rem;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: .07em
    }

    .dm-controls input, .dm-controls select {
        width: 100%;
        min-height: 38px;
        padding: .48rem .62rem;
        border: 1px solid var(--dm-line-strong);
        border-radius: 3px;
        background: #0e1314;
        color: var(--dm-text);
        font: inherit;
        font-size: .79rem
    }

.dm-tabs {
    display: flex;
    overflow-x: auto;
    margin-top: .55rem;
    border: 1px solid var(--dm-line-strong);
    background: #0f1516
}

    .dm-tabs button {
        flex: 0 0 auto;
        padding: .63rem .9rem .58rem;
        border: 0;
        border-right: 1px solid var(--dm-line);
        border-bottom: 2px solid transparent;
        background: transparent;
        color: #9da7a2;
        font-size: .73rem;
        font-weight: 780;
        white-space: nowrap
    }

        .dm-tabs button:hover {
            color: #fff;
            background: rgba(255,255,255,.025)
        }

        .dm-tabs button.is-active {
            border-bottom-color: var(--dm-green);
            background: rgba(118,213,100,.055);
            color: #fff
        }

.dm-view-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-top: .55rem;
    padding: .62rem .8rem;
    border: 1px solid var(--dm-line-strong);
    border-bottom: 0;
    background: #111718
}

    .dm-view-heading h2, .dm-chart-heading h2 {
        margin: 0;
        color: #fff;
        font-size: .86rem;
        font-weight: 800
    }

    .dm-view-heading p, .dm-chart-heading p {
        margin: .16rem 0 0;
        color: var(--dm-muted);
        font-size: .69rem
    }

    .dm-view-heading > strong {
        color: var(--dm-green);
        font-size: .7rem;
        white-space: nowrap
    }

.dm-table-frame {
    border: 1px solid var(--dm-line-strong);
    background: var(--dm-panel)
}

.dm-table-scroll {
    overflow: auto;
    max-height: 68vh
}

.dm-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--dm-text);
    font-size: .73rem
}

    .dm-table th, .dm-table td {
        min-width: 82px;
        padding: .56rem .58rem;
        border-right: 1px solid var(--dm-line);
        border-bottom: 1px solid var(--dm-line);
        text-align: center;
        vertical-align: middle;
        white-space: nowrap
    }

        .dm-table th.is-left, .dm-table td.is-left {
            text-align: left
        }


    .dm-table thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background: #151c1d;
        color: #dfe5e1;
        font-size: .65rem;
        font-weight: 600
    }

    .dm-table tbody tr:hover > td {
        background: #171e1f
    }

.dm-rank {
    color: #a5aea9;
    font-weight: 650
}

.dm-player-link {
    color: #fff;
    font-weight: 650;
    text-decoration: none;
}

    .dm-player-link:hover {
        color: var(--dm-green);
    }

.dm-value {
    color: #fff;
    font-weight: 650;
}

.dm-delta {
    font-weight: 650
}

    .dm-delta.is-positive {
        color: var(--dm-positive)
    }

    .dm-delta.is-negative {
        color: var(--dm-danger)
    }

    .dm-delta.is-neutral {
        color: #7f8984
    }

.dm-state {
    display: inline-flex;
    padding: .16rem .4rem;
    border: 1px solid #4b5651;
    border-radius: 999px;
    background: #202725;
    color: #eef3f0;
    font-size: .62rem;
    font-weight: 650
}

.dm-state--strong, .dm-state--surging, .dm-state--strongrise, .dm-state--rising {
    border-color: #438f42;
    background: #173019;
    color: #d8f4d5
}

.dm-state--declining, .dm-state--weak, .dm-state--strongfall, .dm-state--falling {
    border-color: #98504a;
    background: #381d1b;
    color: #ffd8d4
}

.dm-loading, .dm-error {
    min-width: min(900px,90vw) !important;
    padding: 3rem !important;
    text-align: center !important;
    color: var(--dm-muted)
}

.dm-empty {
    display: grid;
    gap: .3rem;
    place-items: center;
    padding: 3rem;
    border: 1px solid var(--dm-line-strong);
    background: var(--dm-panel);
    color: var(--dm-muted)
}

    .dm-empty strong {
        color: var(--dm-text)
    }

.dm-source-note {
    margin-top: .9rem;
    padding: .2rem 0 0;
    color: var(--dm-muted);
    font-size: .76rem;
    line-height: 1.6;
    text-align: right;
}

.dm-source-note a {
    color: var(--dm-green);
    font-weight: 750;
    text-decoration: none;
    transition: color .15s ease;
}

.dm-source-note a:hover {
    color: #fff;
}

.dm-back-link {
    color: var(--dm-green);
    font-size: .78rem;
    font-weight: 750;
    text-decoration: none
}

.dm-chart-panel {
    margin-top: .75rem;
    border: 1px solid var(--dm-line-strong);
    background: var(--dm-panel)
}

.dm-chart-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--dm-line)
}

.dm-chart-toggle {
    display: flex;
    border: 1px solid var(--dm-line-strong)
}

    .dm-chart-toggle button {
        padding: .4rem .65rem;
        border: 0;
        border-right: 1px solid var(--dm-line);
        background: #0e1314;
        color: var(--dm-muted);
        font-size: .68rem
    }

        .dm-chart-toggle button:last-child {
            border-right: 0
        }

        .dm-chart-toggle button.is-active {
            background: rgba(118,213,100,.09);
            color: #fff
        }

.dm-chart-wrap {
    padding: .8rem;
    overflow: hidden
}

    .dm-chart-wrap svg {
        display: block;
        width: 100%;
        height: auto
    }

.dm-chart-grid {
    stroke: rgba(211,220,215,.12);
    stroke-width: 1
}

.dm-chart-label {
    fill: #7f8984;
    font-size: 12px
}

.dm-chart-line {
    stroke: var(--dm-green);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round
}

.dm-chart-dot {
    fill: var(--dm-green);
    stroke: #0b0f10;
    stroke-width: 3
}

.dm-context-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .75rem;
    margin-top: .75rem
}

    .dm-context-grid article {
        display: grid;
        gap: .15rem;
        padding: .9rem;
        border: 1px solid var(--dm-line-strong);
        background: var(--dm-panel)
    }

    .dm-context-grid strong {
        color: #fff;
        font-size: 1.05rem
    }

@media(max-width:1000px) {
    .dm-header-grid {
        grid-template-columns: 1fr
    }

    .dm-dataset-strip {
        grid-template-columns: repeat(5,1fr)
    }

    .dm-stat-strip, .dm-context-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .dm-controls {
        grid-template-columns: 1fr 1fr
    }

    .dm-search-field {
        grid-column: 1/-1
    }
}

@media(max-width:575.98px) {
    .dm-dataset-strip {
        grid-template-columns: repeat(2,1fr)
    }

        .dm-dataset-strip > div {
            border-bottom: 1px solid var(--dm-line)
        }

    .dm-stat-strip, .dm-context-grid {
        grid-template-columns: 1fr
    }

        .dm-stat-strip > div {
            border-right: 0;
            border-bottom: 1px solid var(--dm-line)
        }

    .dm-controls {
        grid-template-columns: 1fr
    }

    .dm-search-field {
        grid-column: auto
    }

    .dm-view-heading, .dm-chart-heading, .dm-player-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem
    }
}

/* Player Values identity columns: compact and frozen while horizontally scrolling. */
.dm-table th,
.dm-table td {
    min-width: 70px;
}

.dm-table .dm-col--rowRank {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

.dm-table .dm-col--player {
    width: 1%;
    min-width: 150px;
    max-width: 210px;
}

.dm-table .dm-col--position {
    width: 58px;
    min-width: 58px;
    max-width: 58px;
}

.dm-table .dm-col--team {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
}

.dm-table .dm-col--age {
    min-width: 64px;
}

.dm-table .dm-col--peakDateUtc {
    min-width: 118px;
}

.dm-table .dm-col--historicalRangePosition {
    min-width: 154px;
}

.dm-table .dm-col--player,
.dm-table .dm-col--position,
.dm-table .dm-col--team {
    position: sticky;
    z-index: 5;
    background: var(--dm-panel);
}

.dm-table .dm-col--player {
    left: 0;
}

.dm-table .dm-col--position {
    left: 150px;
}

.dm-table .dm-col--team {
    left: 208px;
}

.dm-table thead .dm-col--player,
.dm-table thead .dm-col--position,
.dm-table thead .dm-col--team {
    z-index: 8;
    background: #151c1d;
}

.dm-table tbody tr:hover > .dm-col--player,
.dm-table tbody tr:hover > .dm-col--position,
.dm-table tbody tr:hover > .dm-col--team {
    background: #171e1f;
}

.dm-table .dm-col--team::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    bottom: 0;
    width: 10px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,.30), transparent);
}

.dm-context-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media(max-width:1000px) {
    .dm-context-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:575.98px) {
    .dm-context-grid {
        grid-template-columns: 1fr;
    }
}