.notification-sounds-panel .section-heading { align-items: baseline; }
.notification-sound-upload { max-width: 42rem; }
.notification-sound-upload input[type="file"] { display: block; width: 100%; min-height: 48px; padding: .55rem; border: 1px solid var(--border); border-radius: .45rem; background: var(--surface); }
.notification-sound-upload p { max-width: 42rem; margin-bottom: .65rem; }
.notification-sounds-empty { margin: 1rem 0 0; color: var(--subtle); }
.notification-sound-list { display: grid; gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.notification-sound-list > li { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(14rem, 32rem); align-items: center; gap: .6rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.notification-sound-details { min-width: 0; }
.notification-sound-details h3 { margin: 0 0 .2rem; font-size: 1rem; overflow-wrap: anywhere; }
.notification-sound-details p { margin: 0; font-size: .85rem; }
.notification-sound-list audio { display: block; width: 100%; max-width: 32rem; min-height: 48px; }
.notification-sound-delete { grid-column: 1 / -1; justify-self: start; max-width: 100%; }
.notification-sound-delete > summary { display: flex; align-items: center; min-height: 44px; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.notification-sound-delete form { max-width: 36rem; padding: .85rem 0; }
.notification-sound-delete form p { margin: .3rem 0 .5rem; overflow-wrap: anywhere; }
.notification-sound-delete-button { min-height: 44px; margin-top: .4rem; padding: .5rem .75rem; }
@media (max-width: 700px) {
    .notification-sound-list > li { grid-template-columns: minmax(0, 1fr); }
    .notification-sound-delete { grid-column: 1; }
}
.notification-sound-preferences > label:not(.checkbox-label) { display: block; margin-top: .9rem; font-size: .9rem; font-weight: 600; }
.notification-sound-preferences select { display: block; width: 100%; max-width: 32rem; min-height: 48px; margin-top: .35rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: .45rem; background: var(--surface); color: var(--text); font: inherit; }
.notification-sound-preferences .checkbox-label { min-height: 48px; }
.notification-sound-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .85rem; }
.notification-sound-actions button { min-width: 48px; min-height: 48px; }
.notification-sound-preferences :is(button, select, input):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.notification-sound-preferences [role="status"] { min-height: 1.5em; margin: .65rem 0 0; overflow-wrap: anywhere; }
.notification-sound-region { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; width: min(38rem, calc(100% - 2rem)); margin: .5rem auto; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface); color: var(--text); }
.notification-sound-region[hidden] { display: none; }
.notification-sound-region [data-notification-sound-global-status] { flex: 1 1 12rem; min-width: 0; margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.notification-sound-region .notification-sound-actions { margin: 0; }
.notification-sound-region button { min-width: 48px; min-height: 48px; padding: .5rem .75rem; }
.notification-sound-region-compact { width: fit-content; max-width: calc(100% - 2rem); margin: .25rem auto; padding: .1rem .35rem; }
.notification-sound-region-compact .notification-sound-actions { width: auto; }
.notification-sound-region-compact button { min-width: 44px; min-height: 40px; padding: .3rem .6rem; }
.notification-sound-region :is(button):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.message-toast [data-stop-notification-sound] { color: var(--primary); }
.notification-sound-preferences button:disabled,.notification-sound-preferences select:disabled { cursor: not-allowed; opacity: .7; }
@media (max-width: 600px) {
    .notification-sound-actions { align-items: stretch; }
    .notification-sound-actions button { flex: 1 1 9rem; }
    .notification-sound-region { align-items: stretch; }
    .notification-sound-region .notification-sound-actions { width: 100%; }
    .notification-sound-region-compact .notification-sound-actions { width: auto; }
    .notification-sound-region-compact button { flex: 0 0 auto; }
}