/******************************************************************************
 * Which Is Bigger? — Credits and Sources — Version 0.2.42 Alpha
 ******************************************************************************/

#credits-overlay {
    position:fixed;
    inset:0;
    z-index:130;
    display:grid;
    place-items:center;
    padding:16px;
    background:rgba(0,0,0,.72);
}

#credits-overlay[hidden] {
    display:none;
}

#credits-dialog {
    width:min(680px,calc(100vw - 32px));
    height:min(760px,calc(100svh - 32px));
    max-height:calc(100svh - 32px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(18,85,114,.42);
    border-radius:16px;
    background:#f6eed8;
    color:var(--map-ink);
    box-shadow:0 20px 54px rgba(0,0,0,.58);
}

.credits-dialog-header {
    display:flex;
    flex:0 0 auto;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:16px 18px 12px;
}

#credits-dialog-title {
    margin:0;
    font-size:1.4rem;
    line-height:1.1;
}

#credits-dialog-subtitle {
    margin:5px 0 0;
    color:rgba(30,46,51,.72);
    font-size:.78rem;
    font-weight:700;
}

#credits-dialog-close {
    width:36px;
    height:36px;
    flex:0 0 auto;
    padding:0;
    border-radius:50%;
    background:transparent;
    color:var(--map-ink);
    font-size:1.55rem;
    line-height:1;
    transform:none;
}

#credits-dialog-close:hover {
    background:rgba(7,60,109,.1);
    transform:none;
}

#credits-dialog-content {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    margin:0 13px;
    padding:5px 10px 16px;
    border-block:1px solid rgba(18,85,114,.2);
    font-size:.84rem;
    line-height:1.45;
}

#credits-dialog-content:focus-visible {
    outline:2px solid var(--color-primary-hover);
    outline-offset:-2px;
}

#credits-dialog-content section + section {
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid rgba(18,85,114,.2);
}

#credits-dialog-content h3 {
    margin:0 0 7px;
    color:#073c6d;
    font-size:1.05rem;
}

#credits-dialog-content p {
    margin:0 0 10px;
}

#credits-dialog-content a {
    color:#075f9f;
    font-weight:800;
}

#credits-search-label {
    display:block;
    margin:13px 0 5px;
    font-weight:800;
}

#credits-search {
    width:100%;
    min-height:42px;
    padding:9px 11px;
    border:1px solid rgba(18,85,114,.42);
    border-radius:9px;
    background:rgba(255,255,255,.68);
    color:var(--map-ink);
    font:inherit;
    font-size:.92rem;
}

#credits-results-summary {
    margin:10px 0 7px!important;
    color:rgba(30,46,51,.72);
    font-size:.76rem;
    font-weight:700;
}

#credits-results {
    display:grid;
    gap:8px;
}

.credit-entry {
    padding:10px 11px;
    border:1px solid rgba(18,85,114,.19);
    border-radius:9px;
    background:rgba(255,255,255,.48);
}

.credit-entry h4 {
    margin:0 0 4px;
    color:#17373f;
    font-size:.9rem;
}

.credit-entry-details {
    margin:0 0 5px!important;
    overflow-wrap:anywhere;
    color:#263f45;
    font-size:.76rem;
}

.credit-entry-requested {
    color:rgba(30,46,51,.78);
    font-style:italic;
}

.credit-entry-source {
    display:inline-block;
    font-size:.76rem;
}

.credits-empty {
    padding:18px 10px;
    text-align:center;
    color:rgba(30,46,51,.7);
}

#credits-show-all {
    width:100%;
    min-height:40px;
    margin-top:12px;
    padding:8px 12px;
    border-radius:9px;
    font-size:.84rem;
    transform:none;
}

.credits-dialog-actions {
    flex:0 0 auto;
    padding:10px 18px 15px;
}

#credits-close-button {
    width:100%;
    min-height:42px;
    padding:9px 12px;
    border-radius:9px;
    font-size:.9rem;
    transform:none;
}

#credits-dialog-close:focus-visible,
#credits-close-button:focus-visible,
#credits-show-all:focus-visible,
#credits-search:focus-visible,
#credits-dialog-content a:focus-visible {
    outline:2px solid var(--color-primary-hover);
    outline-offset:2px;
}

body.credits-dialog-open {
    overflow:hidden!important;
}

@media (max-width:600px) {
    #credits-dialog {
        width:calc(100vw - 20px);
        height:calc(100svh - 20px);
        max-height:calc(100svh - 20px);
    }

    .credits-dialog-header {
        padding:13px 14px 10px;
    }

    #credits-dialog-content {
        margin-inline:9px;
        padding-inline:7px;
    }

    .credits-dialog-actions {
        padding:9px 14px 12px;
    }
}

@media (max-height:650px) {
    .credits-dialog-header {
        padding-top:10px;
    }

    .credits-dialog-actions {
        padding-bottom:10px;
    }
}