/* Filtering the document root preserves the viewport for fixed-position modals. */
html.gdc-grayscale {
    filter: grayscale(var(--gdc-site-grayscale, 0%));
}

.gdc-appearance-settings {
    border-top: 1px solid #ddd;
    margin-top: 24px;
    padding-top: 24px;
}

.gdc-appearance-settings h2 {
    font-size: 18px;
    margin: 0 0 20px;
}

.gdc-grayscale-label, .gdc-grayscale-scale {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.gdc-grayscale-label label { font-weight: 700; }
.gdc-grayscale-label output { font-weight: 700; white-space: nowrap; }

#site-grayscale {
    display: block;
    width: 100%;
    min-height: 32px;
    margin: 4px 0;
    accent-color: #53659b;
    cursor: pointer;
}

.gdc-grayscale-scale, #site-grayscale-help { color: #555; }
#site-grayscale-help { margin-top: 12px; }