/* Shared checkbox targets, including labels with the input before or after text. */
:root input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex: 0 0 20px;
    margin: 6px;
    vertical-align: middle;
    accent-color: #e95d00;
    cursor: pointer;
}

body label:has(> input[type="checkbox"]):not(:has(> select, > textarea, > input:not([type="checkbox"]))) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 6px;
    line-height: 1.5;
    cursor: pointer;
}

body label:has(> input[type="checkbox"]) > input[type="checkbox"] {
    order: 2;
    margin: 0 0 0 auto;
}

body label:has(> input[type="checkbox"]):hover { background-color: #f2f5f8; }
body label:has(> input[type="checkbox"]):focus-within { outline: 2px solid #b54a00; outline-offset: 2px; }
:root input[type="checkbox"]:focus-visible { outline: 2px solid #b54a00; outline-offset: 3px; }
:root input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .6; }

.bremm-edit-active {
    outline: 2px solid #e95d00;
    outline-offset: 3px;
    scroll-margin-top: 150px;
}
.bremm-edit-source { outline: 3px solid #873700; outline-offset: 3px; }
.bremm-edit-muted { opacity: .45; filter: grayscale(1); }
@media (max-width: 640px) { .bremm-edit-active { scroll-margin-top: 110px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }