/*
 * The attributions page (attributions.js): /attributions shows one pane,
 * the icon sets, data sources and software the site credits. Built on
 * app.css's tokens, light, dark and auto.
 */

/* The attributions pane alone, whatever the width (as the sat pane). */
.panes.is-attributions {
    display: flex;
}

.panes.is-attributions > .pane:not(.pane--attributions),
.panes:not(.is-attributions) > .pane--attributions {
    display: none;
}

.pane--attributions {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.attr-head {
    padding: 12px 20px 14px;
    border-bottom: 1px solid var(--grid);
}

.pane--attributions .attr-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.attr-body {
    display: grid;
    gap: 24px;
    max-width: 760px;
    padding: 16px 20px 28px;
}

.attr-section h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 650;
}

.attr-lead {
    color: var(--ink-2);
}

.attr-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--grid);
}

.attr-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--grid);
}

.attr-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    font-weight: 600;
}

.attr-by {
    color: var(--ink-2);
    font-weight: 400;
}

.attr-licence {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
}

.attr-use {
    margin-top: 2px;
    color: var(--ink-2);
    font-size: 13px;
}

@media (max-width: 719.98px) {
    .attr-head {
        padding: 10px 12px 12px;
    }

    .pane--attributions .attr-title {
        font-size: 22px;
    }

    .attr-body {
        padding: 12px 12px 24px;
    }
}