/*
 * credits.css - the credits page (1.11.29)
 *
 * Neutral on purpose, like tags.css: a theme stays CSS and fonts with no logic
 * in it, and a theme that never heard of this page still paints it. Only
 * variables every theme defines are named here -- --font-color-text,
 * --font-color-highlight, --font-color-accent, --background-primary,
 * --background-highlight, --titleline-top -- and the one edge colour falls
 * back to a grey, because --border-color is defined by no theme (the lesson of
 * 1.11.19).
 */

.credits-body {
    grid-column: main-start / main-end;
    grid-row: 2;
    width: 100%;
    max-width: 68rem;
    justify-self: center;
    padding: 0 1rem 2rem;
    box-sizing: border-box;
    /* #gallery-title is positioned absolutely over the header, so whatever
       comes first under the header has to clear it -- the wrapper does it once
       for everything inside, the way .tag-search-body does. */
    margin-top: calc(3 * var(--titleline-top));
}

.credits-intro {
    margin: 0 0 1.5rem;
    max-width: 46rem;
}

.credits-section {
    margin: 0 0 2rem;
}

.credits-section h3 {
    margin: 0 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.35));
}

.credits-note {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    opacity: 0.85;
    max-width: 46rem;
}

.credits-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.credits-entry {
    margin: 0 0 1rem;
    padding: 0.6rem 0.8rem;
    background: var(--background-highlight);
    border-radius: 0.4rem;
    /* A licence text is long and unbroken; without this it pushes the page
       sideways on a phone. */
    overflow-wrap: anywhere;
}

.credits-name {
    font-weight: 600;
    color: var(--font-color-highlight);
}

.credits-version,
.credits-origin {
    margin-left: 0.5rem;
    font-size: 0.85rem;
    opacity: 0.75;
}

.credits-license {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.82rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.35));
    border-radius: 1rem;
}

.credits-copyright,
.credits-people {
    margin-top: 0.3rem;
    font-size: 0.9rem;
}

.credits-url {
    margin-top: 0.2rem;
    font-size: 0.85rem;
}

.credits-url a {
    color: var(--font-color-accent);
}

.credits-fulltext {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.credits-fulltext summary {
    cursor: pointer;
    color: var(--font-color-accent);
}

.credits-fulltext pre {
    margin: 0.5rem 0 0;
    padding: 0.6rem;
    background: var(--background-primary);
    border-radius: 0.3rem;
    max-height: 22rem;
    overflow: auto;
    white-space: pre-wrap;
    font-family: var(--font-family-mono);
    font-size: 0.78rem;
}

@media screen and (max-width: 600px) {
    .credits-body {
        padding: 0 0.6rem 2rem;
    }
    .credits-version,
    .credits-origin,
    .credits-license {
        display: block;
        margin-left: 0;
        margin-top: 0.25rem;
    }
    .credits-license {
        width: fit-content;
    }
}