/* Loaded after the site's bundled styles; never applies to Django admin. */
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) {
    background: var(--sj-bg-page);
    color: var(--sj-text-primary);
    color-scheme: light;
}

html[data-bs-theme="dark"]:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) {
    color-scheme: dark;
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) body {
    color: var(--sj-text-primary);
    background: var(--sj-bg-page);
}

html[data-sj-theme-scope="pwa"],
html[data-sj-theme-scope="pwa"] body {
    background: var(--sj-toolbar-bg);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) body.public-v2,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) body.pwa {
    background: var(--sj-bg-surface);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) :where(a:not(.btn, .wall .item)) {
    color: var(--sj-link);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) :where(a:not(.btn, .wall .item)):hover {
    color: var(--sj-link-hover);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) hr:not(.sj-authored-content *),
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .border:not(.sj-authored-content *),
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .border-top:not(.sj-authored-content *),
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .border-bottom:not(.sj-authored-content *) {
    border-color: var(--sj-border) !important;
}

/* Navigation and surfaces from Bootstrap 4 and the existing site layout. */
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .navbar-light,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .main-navbar {
    background-color: var(--sj-navbar-bg);
    color: var(--sj-text-primary);
    border-color: var(--sj-border);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .content,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .pre-content,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .card,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .list-group-item,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .jumbotron,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .modal-content {
    background-color: var(--sj-bg-surface);
    color: var(--sj-text-primary);
    border-color: var(--sj-border);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .bg-light:not(.sj-authored-content *),
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .card-header,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .card-footer,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .breadcrumb,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .modal-header,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .modal-footer,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) footer {
    background-color: var(--sj-bg-subtle) !important;
    color: var(--sj-text-primary);
    border-color: var(--sj-border);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .navbar-light .navbar-nav .nav-link,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .navbar-light .navbar-brand,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .navbar-light .navbar-toggler,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .nav-tabs .nav-link,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .page-link,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .breadcrumb-item.active {
    color: var(--sj-text-primary);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .navbar-light .navbar-nav .nav-link:hover,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .navbar-light .navbar-nav .active > .nav-link,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .nav-tabs .nav-link.active {
    color: var(--sj-accent-text);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .navbar-light .navbar-toggler {
    border-color: var(--sj-border);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .navbar-mini .fontgray {
    color: var(--sj-text-muted) !important;
}

html[data-bs-theme="dark"]:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .navbar-light .navbar-toggler-icon {
    filter: invert(1) grayscale(1);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .dropdown-menu,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .popover,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .page-link {
    background: var(--sj-bg-elevated);
    color: var(--sj-text-primary);
    border-color: var(--sj-border);
    box-shadow: var(--sj-shadow);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .dropdown-item,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .list-group-item-action {
    color: var(--sj-text-primary);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .dropdown-item:hover,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .list-group-item-action:hover,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .page-link:hover {
    background: var(--sj-action-hover);
    color: var(--sj-link-hover);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .dropdown-item.active,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .page-item.active .page-link {
    background: var(--sj-action-selected);
    color: var(--sj-text-primary);
    border-color: var(--sj-accent);
}

/* Native controls, Bootstrap forms, and focus visibility. */
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .form-control,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .custom-select,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .input-group-text,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]),
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) textarea,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) select:not(.sj-theme-select) {
    background-color: var(--sj-bg-input);
    color: var(--sj-text-primary);
    border-color: var(--sj-border);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) input::placeholder,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) textarea::placeholder {
    color: var(--sj-text-muted);
    opacity: 1;
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .form-control:disabled,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .form-control[readonly],
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .custom-select:disabled {
    background-color: var(--sj-bg-subtle);
    color: var(--sj-text-disabled);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--sj-focus);
    outline-offset: 2px;
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .form-control:focus,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .custom-select:focus {
    color: var(--sj-text-primary);
    background: var(--sj-bg-input);
    border-color: var(--sj-focus);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--sj-focus) 24%, transparent);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .text-muted:not(.sj-authored-content *),
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .fontgray:not(.sj-authored-content *),
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .font-disabled:not(.sj-authored-content *),
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .form-text:not(.sj-authored-content *),
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) small.text-secondary:not(.sj-authored-content *) {
    color: var(--sj-text-muted) !important;
}

/* Tables and status surfaces. */
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .progress { background: var(--sj-bg-subtle); }
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .progress-bar.bg-warning {
    background: var(--sj-accent) !important;
    color: var(--sj-accent-ink);
}
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .progress-bar[aria-valuenow="0"] { color: var(--sj-text-primary); }

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .fontcertgreen:not(.sj-authored-content *) {
    color: var(--sj-success) !important;
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) :is(.alert-secondary, .alert-light, .alert-dark) {
    background: var(--sj-bg-subtle);
    color: var(--sj-text-primary);
    border-color: var(--sj-border);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .table {
    color: var(--sj-text-primary);
    background: var(--sj-bg-surface);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .table th,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .table td,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .table-bordered,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .table-bordered th,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .table-bordered td {
    border-color: var(--sj-border);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .table-striped tbody tr:nth-of-type(odd),
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .table-hover tbody tr:hover,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .table-active {
    background: var(--sj-bg-subtle);
    color: var(--sj-text-primary);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .thead-light th {
    background: var(--sj-bg-subtle);
    color: var(--sj-text-primary);
    border-color: var(--sj-border);
}

/* Bootstrap 4 contextual utilities use fixed light-palette colors. */
html[data-bs-theme="dark"]:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"])
    :is(.table-success, .table-success > th, .table-success > td) {
    background-color: var(--sj-success-bg) !important;
    color: var(--sj-success);
}

html[data-bs-theme="dark"]:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"])
    :is(.table-info, .table-info > th, .table-info > td) {
    background-color: var(--sj-info-bg) !important;
    color: var(--sj-info);
}

html[data-bs-theme="dark"]:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"])
    :is(.table-warning, .table-warning > th, .table-warning > td) {
    background-color: var(--sj-warning-bg) !important;
    color: var(--sj-warning);
}

html[data-bs-theme="dark"]:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"])
    :is(.table-danger, .table-danger > th, .table-danger > td) {
    background-color: var(--sj-danger-bg) !important;
    color: var(--sj-danger);
}

html[data-bs-theme="dark"]:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"])
    :is(.bg-success, .badge-success):not(.sj-authored-content *) {
    background-color: var(--sj-success-bg) !important;
    color: var(--sj-success) !important;
}

html[data-bs-theme="dark"]:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"])
    :is(.bg-info, .badge-info):not(.sj-authored-content *) {
    background-color: var(--sj-info-bg) !important;
    color: var(--sj-info) !important;
}

html[data-bs-theme="dark"]:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"])
    :is(.bg-warning, .badge-warning):not(.sj-authored-content *) {
    background-color: var(--sj-warning-bg) !important;
    color: var(--sj-warning) !important;
}

html[data-bs-theme="dark"]:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"])
    :is(.bg-danger, .badge-danger):not(.sj-authored-content *) {
    background-color: var(--sj-danger-bg) !important;
    color: var(--sj-danger) !important;
}

html[data-bs-theme="dark"]:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"])
    .alert-primary {
    background-color: var(--sj-info-bg);
    color: var(--sj-info);
    border-color: var(--sj-info);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .alert-success {
    color: var(--sj-success);
    background: var(--sj-success-bg);
    border-color: var(--sj-success);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .alert-warning {
    color: var(--sj-warning);
    background: var(--sj-warning-bg);
    border-color: var(--sj-warning);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .alert-danger,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .alert-error {
    color: var(--sj-danger);
    background: var(--sj-danger-bg);
    border-color: var(--sj-danger);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .alert-info {
    color: var(--sj-info);
    background: var(--sj-info-bg);
    border-color: var(--sj-info);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .close {
    color: var(--sj-text-primary);
    text-shadow: none;
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .modal-backdrop {
    background: var(--sj-overlay);
}

/* Bootstrap button palettes remain recognizable in either theme. */
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .btn-link {
    color: var(--sj-link);
}
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .btn-link:hover {
    color: var(--sj-link-hover);
}
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .text-info:not(.sj-authored-content *) { color: var(--sj-info) !important; }
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .text-success:not(.sj-authored-content *) { color: var(--sj-success) !important; }
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .text-danger:not(.sj-authored-content *) { color: var(--sj-danger) !important; }
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .text-warning:not(.sj-authored-content *) { color: var(--sj-warning) !important; }

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .btn-primary {
    background: var(--sj-button-primary);
    border-color: var(--sj-button-primary);
    color: var(--sj-button-primary-text);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .btn-primary:hover {
    background: var(--sj-button-primary-hover);
    border-color: var(--sj-button-primary-hover);
    color: var(--sj-button-primary-text);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .btn-secondary {
    background: var(--sj-button-secondary);
    border-color: var(--sj-button-secondary);
    color: var(--sj-button-secondary-text);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .btn-secondary:hover {
    background: var(--sj-button-secondary-hover);
    border-color: var(--sj-button-secondary-hover);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .btn-light {
    background: var(--sj-bg-subtle);
    border-color: var(--sj-border);
    color: var(--sj-text-primary);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .btn-light:hover {
    background: var(--sj-action-hover);
    color: var(--sj-text-primary);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .btn-default.fontwhite {
    color: var(--sj-accent-contrast) !important;
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .btn-outline-secondary {
    color: var(--sj-text-primary);
    border-color: var(--sj-border);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .btn-outline-secondary:hover {
    background: var(--sj-action-hover);
    color: var(--sj-text-primary);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .btn-success {
    background: var(--sj-button-success);
    border-color: var(--sj-button-success);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .btn-danger {
    background: var(--sj-button-danger);
    border-color: var(--sj-button-danger);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .btn-warning {
    background: var(--sj-button-warning);
    border-color: var(--sj-button-warning);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .btn-info {
    background: var(--sj-button-info);
    border-color: var(--sj-button-info);
}

/* Select2 renders its dropdown outside the original input element. */
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .select2-container--default .select2-selection--single,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .select2-container--default .select2-selection--multiple,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .select2-dropdown,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .select2-search__field {
    background: var(--sj-bg-input);
    color: var(--sj-text-primary);
    border-color: var(--sj-border);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .select2-container--default .select2-selection--single .select2-selection__rendered,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .select2-container--default .select2-results__option {
    color: var(--sj-text-primary);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--sj-action-selected);
    color: var(--sj-text-primary);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .select2-container--default .select2-results__option[aria-selected="true"],
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--sj-bg-subtle);
    color: var(--sj-text-primary);
    border-color: var(--sj-border);
}

/* FullCalendar v5 and its list views. */
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .fc {
    --fc-page-bg-color: var(--sj-bg-surface);
    --fc-neutral-bg-color: var(--sj-bg-subtle);
    --fc-border-color: var(--sj-border);
    --fc-list-event-hover-bg-color: var(--sj-action-hover);
    --fc-today-bg-color: var(--sj-action-selected);
    color: var(--sj-text-primary);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .fc .fc-button-primary {
    background: var(--sj-button-primary);
    border-color: var(--sj-button-primary);
    color: var(--sj-button-primary-text);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .fc .fc-button-primary:hover,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .fc .fc-button-primary:not(:disabled):active,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--sj-button-primary-hover);
    border-color: var(--sj-button-primary-hover);
    color: var(--sj-button-primary-text);
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .fc .fc-list-day-cushion,
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .fc .fc-scrollgrid-section-header th {
    background: var(--sj-bg-subtle);
    color: var(--sj-text-primary);
}

/* Native header control; the PWA can expose the same control elsewhere. */
html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .sj-theme-control {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.25rem 0.5rem;
    color: var(--sj-text-primary);
    font-size: 0.875rem;
    white-space: nowrap;
}

html:is([data-sj-theme-scope="site"], [data-sj-theme-scope="pwa"]) .sj-theme-control select {
    min-height: 2rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--sj-border);
    border-radius: 0.25rem;
    background: var(--sj-bg-input);
    color: var(--sj-text-primary);
}

/* Standalone email documents retain their own light canvas. */
html[data-sj-theme-scope="site"] .sj-message-content {
    display: block;
    width: 100%;
    height: 70vh;
    min-height: 350px;
    border: 0;
    background: #ffffff;
    color-scheme: light;
}

/* Inline authored content inherits the page theme. Do not force a canvas or
   text color here: wrappers may also be semantic alerts or cards. */

/* Compact appearance control in the prayer/date strip. */
html[data-sj-theme-scope="site"] .navbar-mini .nav.navbar-left {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
html[data-sj-theme-scope="site"] .sj-theme-menu {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 8px;
    text-align: left;
}
html[data-sj-theme-scope="site"] .sj-theme-menu summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    /* Use the strip's existing vertical padding for the hit area. */
    margin: -5px 0;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--sj-text-primary);
    cursor: pointer;
    list-style: none;
    font-size: 16px;
}
html[data-sj-theme-scope="site"] .sj-theme-menu summary::-webkit-details-marker { display: none; }
html[data-sj-theme-scope="site"] .sj-theme-menu summary i { margin-right: 0; }
html[data-sj-theme-scope="site"] .sj-theme-menu summary:hover { background: var(--sj-action-hover); }
html[data-sj-theme-scope="site"] .sj-theme-menu[open] summary,
html[data-sj-theme-scope="site"] .sj-theme-menu summary:focus-visible { outline: 2px solid var(--sj-focus); outline-offset: 1px; }
html[data-sj-theme-scope="site"] .sj-theme-options {
    position: absolute;
    right: 0;
    top: calc(100% + 7px);
    min-width: 180px;
    padding: 6px;
    z-index: 1100;
    border: 1px solid var(--sj-border);
    border-radius: 9px;
    background: var(--sj-bg-elevated);
    box-shadow: var(--sj-shadow);
}
html[data-sj-theme-scope="site"] .sj-theme-options button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--sj-text-primary);
    text-align: left;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}
html[data-sj-theme-scope="site"] .sj-theme-options button:hover,
html[data-sj-theme-scope="site"] .sj-theme-options button:focus-visible { background: var(--sj-action-hover); outline: 2px solid var(--sj-focus); outline-offset: -2px; }
html[data-sj-theme-scope="site"] .sj-theme-options i { width: 18px; text-align: center; }
html[data-sj-theme-scope="site"] .sj-theme-check { margin-left: auto; color: var(--sj-success); visibility: hidden; }
html[data-sj-theme-scope="site"] [aria-pressed="true"] .sj-theme-check { visibility: visible; }
html[data-sj-theme-scope="site"] .navbar-brand .logo {
    background: var(--sj-logo-bg);
    filter: var(--sj-monochrome-image-filter);
    border-radius: 3px;
    padding: 2px;
}

/* Multicolor Umoor artwork includes dark lettering: preserve its light canvas. */
html[data-sj-theme-scope="site"] img[src*="/umoor-logos/"] {
    background: var(--sj-artwork-bg);
    border-radius: 4px;
}