html:has(.archive-site) {
    scrollbar-gutter: stable both-edges;
}
.archive-site .shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    min-height: 100svh;
}
.archive-site .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-self: start;
    justify-self: center;
    width: 100%;
    max-width: 1274px;
    container-type: inline-size;
    gap: 20px;
}
.archive-site .site-header .brand {
    justify-self: start;
}
.archive-site .site-header .dashboard-settings {
    justify-self: end;
}
.archive-site .archive-tabs {
    --tab-underline-gap: 13px;
    width: auto;
    align-self: center;
    align-items: stretch;
    gap: clamp(14px, 3cqw, 29px);
    font-size: min(14px, 4cqw);
    border-bottom: 1px solid #ffffff16;
}
.archive-site .archive-tabs .tab {
    padding: var(--tab-underline-gap) 0;
}
.archive-site main {
    min-width: 0;
    padding-block: 24px;
}
.archive-site footer {
    align-self: end;
    justify-self: center;
    width: 100%;
    max-width: 1274px;
    padding-block: 12px;
}
@media (min-width: 1500px) {
    .archive-site .site-header,
    .archive-site footer {
        max-width: 1384px;
    }
}
.archive-site #song-search-view {
    padding: 0;
}
.archive-search-home {
    --archive-search-width: 760px;
    --archive-search-height: 54px;
    --archive-search-opacity: 80%;
    --archive-home-lift: clamp(24px, 7svh, 96px);
    display: grid;
    justify-items: center;
}
#song-search-view:not(.has-selection) .archive-search-home {
    position: relative;
    top: calc(-1 * var(--archive-home-lift));
}
.has-selection .archive-search-home {
    padding: 0 0 24px;
}
.archive-search-home .song-search-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    position: relative;
    width: min(100%, var(--archive-search-width));
    margin: 0;
    padding: 0;
    gap: 12px;
}
.archive-search-support {
    display: grid;
    gap: 8px;
}
#song-search-view:not(.has-selection) .archive-search-support {
    position: absolute;
    top: calc(100% + 12px);
    inset-inline: 0;
}
.archive-home-brand {
    position: absolute;
    inset-inline: 0;
    bottom: calc(100% + clamp(22px, 4svh, 44px));
    justify-content: center;
    gap: clamp(10px, 2vw, 18px);
    margin: 0;
    font-size: clamp(26px, 5vw, 42px);
}
.archive-home-brand .brand-icon {
    width: clamp(52px, 10vw, 72px);
    height: auto;
}
.has-selection :is(.archive-home-brand, .archive-recent-songs) {
    display: none;
}
.archive-recent-songs {
    margin-top: 10px;
}
.archive-recent-songs h2 {
    margin: 0 0 15px;
    font-size: 14px;
    font-weight: 500;
}
#recent-song-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    max-height: max(56px, calc(50svh - 226px));
    overflow-y: auto;
    list-style: none;
}
.archive-recent-songs .song-option {
    padding-block: 8px;
    border-radius: var(--control-radius);
    background: color-mix(in srgb, var(--panel) calc(100% * var(--performance-panel-dim)), transparent);
    color: var(--ink);
}
.archive-recent-songs .song-option:hover,
.archive-recent-songs .song-option:focus-visible {
    background: color-mix(in srgb, var(--panel) 75%, var(--row-hover));
}
.archive-recent-difficulties {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}
@media (width > 600px) {
    .archive-recent-songs .option-song {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
    }
    .archive-recent-songs .option-song > small {
        grid-column: 1;
    }
    .archive-recent-difficulties {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }
}
.archive-search-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}
.archive-search-actions .library-open {
    justify-self: start;
}
.archive-search-actions .search-help-trigger {
    grid-column: -2;
}
#archive-chart-controls {
    justify-self: center;
}
.archive-chart-modes button {
    white-space: nowrap;
}
@media (max-width: 500px) {
    .archive-search-actions {
        grid-template-columns: minmax(0, 1fr) max-content;
        justify-items: start;
    }
    .archive-search-actions .search-help-trigger {
        grid-row: 1;
    }
    #archive-chart-controls {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}
@media (max-height: 420px) {
    #song-search-view:not(.has-selection) .archive-search-support {
        position: static;
    }
}
.archive-search-home .song-search {
    width: 100%;
}
#song-search-view:has(#chart-viewer:not([hidden]))
    .archive-search-home
    .song-search {
    display: none;
}
.archive-search-home .song-search .search-wrap {
    border-radius: 999px;
    min-height: var(--archive-search-height);
    padding-inline: 18px;
    background: color-mix(
        in srgb,
        #131318 var(--archive-search-opacity),
        transparent
    );
}
.archive-catalog-status {
    text-align: center;
    color: var(--muted);
}
.archive-catalog-status:empty {
    display: none;
}
.archive-site main:has(#song-search-view.has-selection:not([hidden])),
#archive-chart-content:has(#chart-details:not([hidden])) {
    display: grid;
}
#song-search-view.has-selection {
    display: grid;
    grid-template-rows: auto 1fr;
}
#archive-chart-content:has(#chart-details:not([hidden])) {
    align-items: center;
}
.archive-chart-details {
    width: min(100%, 920px);
    margin-inline: auto;
    padding-top: var(--panel-padding-inline);
}
.archive-chart-details .selected-song > .cover-tile.large {
    align-self: start;
}
@media (width > 1000px) {
    .archive-chart-details .selected-song > .song-radar svg {
        height: var(--song-cover-size);
    }
}
.archive-chart-details #chart-details-body {
    width: min(100%, 580px);
    margin-inline: auto;
}
@media (min-width: 850px) {
    .archive-chart-details #chart-details-body {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }
}
@media (min-width: 1100px) {
    .archive-chart-details {
        --song-cover-size: clamp(175px, calc(12.5dvh + 55px), 190px);
        width: min(100%, 1040px);
    }
    .archive-site .shell:has(#calculator-view:not([hidden])) {
        max-width: 1600px;
    }
    #calculator-chart {
        height: clamp(300px, calc(100dvh - 575px), 620px);
    }
}
@media (min-width: 1100px) and (max-height: 1249px) {
    .archive-site
        .shell:has(
            #song-search-view.has-selection:not([hidden]),
            #calculator-view:not([hidden])
        ) {
        main {
            padding-block: 8px;
        }
    }
    #song-search-view.has-selection .archive-search-home {
        padding-bottom: 22px;
    }
    .archive-chart-details {
        --panel-padding-inline: 24px;
        --song-section-gap: 12px;
    }
    .archive-chart-details #chart-details-body {
        --details-plot-width: clamp(400px, calc(55dvh - 100px), 520px);
        padding-bottom: var(--panel-padding-inline);
    }
    .archive-chart-details .details-chart :is(svg, .details-plot-placeholder) {
        width: min(100%, var(--details-plot-width));
        margin-inline: auto;
    }
    .archive-chart-details .details-audio {
        margin-bottom: 12px;
    }
    .archive-chart-details .details-plots {
        gap: 8px;
    }
}
@media (min-width: 1100px) and (max-height: 960px) {
    .archive-chart-details {
        --song-section-gap: 8px;
    }
    .archive-chart-details .details-values {
        row-gap: 11px;
    }
    .archive-chart-details .details-audio {
        margin-bottom: 8px;
    }
    .archive-chart-details .details-plots {
        gap: 6px;
    }
    .archive-chart-details #chart-details-body {
        --details-plot-width: clamp(368px, calc(100dvh - 552px), 440px);
    }
}
@media (min-width: 1100px) and (min-height: 1250px) {
    .archive-chart-details {
        --song-cover-size: 210px;
        width: min(100%, 1120px);
    }
    .archive-chart-details .selected-song > .song-radar {
        width: 320px;
    }
    .archive-site .shell:has(#calculator-view:not([hidden])) {
        max-width: 1720px;
    }
}
.details-placeholder-line {
    display: inline-block;
    width: min(100%, 9ch);
    height: 0.8em;
    vertical-align: middle;
}
.details-unlock .details-placeholder-line {
    width: min(100%, 26ch);
}
.details-audio-loading > .skeleton-shape {
    height: 36px;
}
.details-audio-loading .details-audio-wave {
    height: 36px;
}
.chart-viewer-player .details-audio-loading .details-audio-wave {
    height: 56px;
}
.chart-stage-placeholder {
    width: min(100%, 272px);
    height: 100%;
    margin-inline: auto;
}
.archive-chart-viewer {
    position: relative;
    width: min(100%, 1568px);
    margin-inline: auto;
}
.archive-chart-viewer .chart-viewer-content {
    height: auto;
    max-height: none;
    overflow: visible;
}
.archive-chart-viewer #chart-viewer-body {
    padding-top: 16px;
}
@media (min-width: 960px) {
    #archive-chart-content:has(#chart-viewer:not([hidden])) {
        display: grid;
    }
    .archive-chart-viewer {
        --chart-sidebar-width: clamp(224px, 20vw, 300px);
        display: grid;
        grid-template-columns: var(--chart-sidebar-width) minmax(0, 1fr) var(
                --chart-sidebar-width
            );
        align-items: start;
        gap: clamp(12px, 1.5vw, 24px);
    }
    .archive-chart-viewer .chart-viewer-content {
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
        min-height: 460px;
    }
    .archive-chart-viewer > .chart-viewer-settings {
        grid-column: 3;
        grid-row: 1;
    }
}

.archive-site .shell:has(#song-search-view.has-selection:not([hidden])) {
    grid-template-rows: auto 1fr auto;
}

@media (min-width: 960px) {
    .archive-site
        .shell:has(
            #song-search-view:not([hidden]) #chart-viewer:not([hidden])
        ) {
        grid-template-rows: auto 1fr;

        main {
            grid-column: 1;
            grid-row: 2;
            padding-bottom: 16;
        }
        footer {
            grid-column: 1;
            grid-row: 2;
            position: relative;
            z-index: 2;
            pointer-events: none;
        }
        footer > * {
            pointer-events: auto;
        }
    }
}

.archive-cards {
    padding-bottom: var(--panel-padding-inline);
}
.archive-cards:has(#appeal-helper-detail:not([hidden])) {
    width: min(100%, 760px);
    margin-inline: auto;
}
.archive-cards #appeal-helper-artwork {
    width: min(100%, clamp(228px, 45dvh, 600px));
}
.archive-cards #appeal-helper-artwork .appeal-helper-image {
    max-height: none;
}
.archive-crews {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) minmax(
            210px,
            300px
        );
    gap: 18px;
    align-items: start;
}
.archive-crews .archive-crew-preview {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    min-height: 450px;
    padding-block: 20px 12px;
}
.archive-crews .crew-browser {
    grid-column: 1;
    grid-row: 1;
}
.archive-crews .crew-sidebar {
    grid-column: 3;
    grid-row: 1;
    max-height: none;
}
.archive-crews .crew-browser,
.archive-crews .crew-sidebar {
    position: static;
    width: auto;
    transform: none;
    margin: 0;
}
.crew-expand,
.crew-jump {
    display: none;
    place-items: center;
}
.crew-expand {
    width: var(--button-height);
    height: var(--button-height);
    flex: none;
    padding: 0;
    border-radius: var(--control-radius);
}
.crew-expand:hover,
.crew-expand:focus-visible {
    background: var(--control-bg);
    color: var(--accent);
}
.crew-expand[aria-pressed="true"] .crew-expand-icon,
.crew-expand[aria-pressed="false"] .crew-collapse-icon {
    display: none;
}

@media (min-width: 1200px) {
    .archive-site .shell:has(.archive-crews:not([hidden])) {
        grid-template-rows: auto 1fr auto;
    }
    .archive-site main:has(.archive-crews:not([hidden])) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .archive-crews {
        justify-self: center;
        width: 100%;
        transition: width 280ms cubic-bezier(0.45, 0, 0.55, 1);
    }
    .archive-crews.is-expanded {
        width: calc(100vw - 20px);
    }
    .crew-expand {
        display: grid;
    }
    @media (prefers-reduced-motion: reduce) {
        .archive-crews {
            transition: none;
        }
    }
    .archive-crews .archive-crew-preview,
    .archive-crews .crew-browser,
    .archive-crews .crew-sidebar {
        align-self: stretch;
        height: auto;
    }
    .archive-crews .crew-browser,
    .archive-crews .crew-sidebar {
        contain: size;
    }
    .archive-crews .crew-sidebar {
        min-height: 0;
        scrollbar-gutter: stable;
    }
    .archive-crews .crew-voices {
        display: flex;
        flex-direction: column;
        flex: 0 1 auto;
        min-height: 0;
    }
    .archive-crews .crew-voices:has(.crew-voice-player:not([hidden])) {
        min-height: 245px;
    }
    .archive-crews .crew-voices > :not(.crew-voice-scroll) {
        flex: none;
    }
    .archive-crews .crew-voice-scroll {
        min-height: 0;
    }
}
@media (min-width: 1920px) {
    .archive-site .shell:has(.archive-crews:not([hidden])) {
        /* Scale the preview column beyond Full HD */
        --crew-preview-unit: clamp(1px, min(100vw / 1920, 100dvh / 1080), 2px);
        max-width: calc(1480px + 680 * (var(--crew-preview-unit) - 1px));
    }
}

@media (max-width: 1199px) {
    .archive-crews {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .archive-crews .archive-crew-preview {
        height: min(78dvh, 700px);
    }
    .archive-crews .crew-browser {
        height: min(78dvh, 720px);
    }
    .crew-jump {
        display: grid;
        position: sticky;
        z-index: 3;
        bottom: max(28px, env(safe-area-inset-bottom));
        margin: -36px auto 0;
        width: 36px;
        height: 36px;
        padding: 0;
    }
}
@media (max-width: 960px) {
    .archive-site .site-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        min-height: 74px;
        height: auto;
        padding-block: 14px 0;
    }
    .archive-site .archive-tabs {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: space-between;
        gap: 8px;
    }
    .archive-site .dashboard-settings {
        grid-column: 2;
        grid-row: 1;
    }
}
@media (max-width: 760px) {
    .archive-site main {
        padding-block: 16px;
    }
}