/******************************************************************************
 * Which Is Bigger? — About Controls — Version 0.2.25 Alpha
 ******************************************************************************/

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

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

#about-dialog {
    width:min(343px,calc(100vw - 32px));
    height:min(635px,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);
}

.about-dialog-header {
    display:flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:15px 16px 10px;
}

#about-dialog-title {
    margin:0;
    font-size:1.35rem;
    line-height:1;
}

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

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

#about-dialog-content {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    margin:0 12px;
    padding:4px 8px 8px;
    border-block:1px solid rgba(18,85,114,.2);
    font-size:.82rem;
    line-height:1.48;
}

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

#about-dialog-content p {
    margin:0 0 13px;
}

#about-dialog-content p:last-child {
    margin-bottom:4px;
}

#about-portrait {
    width:126px;
    height:auto;
    display:block;
    margin:4px auto 14px;
    border:5px solid rgba(255,255,255,.72);
    border-radius:8px;
    box-shadow:0 4px 12px rgba(64,48,28,.32);
}

.about-divider {
    width:100%;
    height:0;
    margin:4px 0 16px;
    border:0;
    border-top:1px solid rgba(18,85,114,.28);
}

.about-dedication {
    font-weight:800;
}

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

.about-dialog-actions {
    flex:0 0 auto;
    padding:10px 16px 15px;
}

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

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

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

@media (max-height:760px) {
    .about-dialog-header {
        padding-top:11px;
    }

    .about-dialog-actions {
        padding-bottom:11px;
    }
}