.oncall-alert-controls{display:grid;grid-template-columns:1fr 1fr;gap:18px;min-width:0}
.oncall-alert-field{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:20px;font-weight:700}
.oncall-alert-field select{width:100%;min-width:0;min-height:62px;padding:12px;font:inherit;color:#173b28;background:#fff;border:2px solid #aabfb1;border-radius:10px}
.oncall-alert-preview{grid-column:1/-1;min-height:62px;font-size:22px}
.oncall-alert-notice,.oncall-alert-status{grid-column:1/-1;margin:0;font-size:18px;line-height:1.6;color:#405c4a;overflow-wrap:anywhere}
.oncall-alert-status:empty{display:none}
.oncall-tone-open{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;padding:12px;border:2px solid #aabfb1;border-radius:10px;background:#fff;color:#173b28;font:inherit;text-align:left}
.oncall-tone-dialog{box-sizing:border-box;width:calc(100% - 36px);max-width:460px;max-height:86dvh;margin:auto;padding:0;border:0;border-radius:26px;background:#242424;color:#fff;box-shadow:0 20px 70px #0008;color-scheme:dark;overflow:hidden}
.oncall-tone-dialog::backdrop{background:#000a}
.oncall-tone-dialog h2{margin:0;padding:25px 26px 18px;font-size:27px;color:#fff}
.oncall-tone-list{padding:0 12px;max-height:calc(86dvh - 170px);overflow-y:auto;overscroll-behavior:contain}
.oncall-tone-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px;padding:12px 14px;box-sizing:border-box;border-radius:12px;font-size:22px;font-weight:600;cursor:pointer;color:#f5f5f5}
.oncall-tone-row:has(input:checked){background:#ffffff0a}
.oncall-tone-row input{appearance:none;flex:0 0 28px;width:28px;height:28px;margin:0;border:2px solid #929292;border-radius:50%;background:transparent;box-shadow:none}
.oncall-tone-row input:checked{border-color:#72bdff;background:radial-gradient(circle,#72bdff 0 6px,transparent 7px)}
.oncall-tone-row:focus-within{outline:2px solid #72bdff;outline-offset:-2px}
.oncall-tone-dialog footer{display:flex;justify-content:flex-end;gap:12px;border-top:1px solid #ffffff1a;padding:10px 18px}
.oncall-tone-dialog footer button{min-width:82px;min-height:58px;border:0;background:transparent;color:#72bdff;font-size:23px;font-weight:700;border-radius:10px}
.oncall-tone-dialog button:disabled{opacity:.5}
.oncall-tone-error:empty{display:none}
.oncall-tone-error{margin:0;padding:8px 26px;color:#ffb4b4;font-size:18px}
@media(max-width:400px){.oncall-alert-controls{grid-template-columns:1fr;gap:16px}.oncall-alert-field select{font-size:21px}}
.notification-settings{box-sizing:border-box;width:calc(100% - 24px);max-width:540px;max-height:92dvh;margin:auto;padding:20px 24px 30px;background:#fff;color:#17372c;border:1px solid #e1e7e3;border-radius:22px;overflow:auto}
.notification-settings::backdrop{background:#10281f66}
.notification-settings header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.notification-settings header h2{margin:0;font-size:28px;color:#17372c}
.notification-settings header button{border:0;background:transparent;color:#17372c;font-size:40px;min-width:48px;min-height:56px;line-height:1}
.notification-settings header [data-notification-close]{flex:0 0 48px;width:48px;height:48px;min-height:48px;margin-left:auto;padding:0;border-radius:12px}
.notification-settings header button:focus-visible{outline:3px solid #087e5b;outline-offset:2px}
.notification-controls{display:block;background:#fff;color:#17372c}
.notification-row{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:88px;width:100%;padding:20px 2px;border:0;border-bottom:1px solid #e9eeeb;background:#fff;color:#17372c;font-size:23px;font-weight:600;text-align:left}
.notification-row small{display:block;margin-top:8px;font-size:18px;font-weight:400;color:#60756a;line-height:1.5}
.notification-tone{cursor:pointer;font-family:inherit;border-radius:0}
.notification-tone>span:last-child{font-size:30px;color:#779084}
.notification-switch{flex:0 0 68px;position:relative;width:68px;min-width:68px;height:40px;min-height:40px;padding:4px;border:0;border-radius:24px;background:#b6c3bd;cursor:pointer}
.notification-switch>span{display:block;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0002;transform:translateX(0);transition:transform .15s}
.notification-switch[aria-checked="true"]{background:#087e5b}
.notification-switch[aria-checked="true"]>span{transform:translateX(28px)}
.notification-switch[aria-checked="true"]>span::after{content:'✓';display:block;color:#087e5b;font-size:22px;line-height:32px;text-align:center}
.notification-switch:disabled{opacity:.45;cursor:default}
.notification-switch:focus-visible,.notification-tone:focus-visible{outline:3px solid #087e5b;outline-offset:3px}
.notification-help{margin:12px 0 0;font-size:16px;line-height:1.5;color:#60756a}
.oncall-tone-dialog{background:#fff;color:#17372c;color-scheme:light;border:1px solid #e1e7e3;box-shadow:0 20px 70px #10281f33}
.oncall-tone-dialog::backdrop{background:#10281f66}
.oncall-tone-dialog h2,.oncall-tone-row{color:#17372c}
.oncall-tone-row:has(input:checked){background:#eef8f2}
.oncall-tone-row input{border-color:#93a79b}
.oncall-tone-row input:checked{border-color:#087e5b;background:radial-gradient(circle,#087e5b 0 6px,transparent 7px)}
.oncall-tone-row:focus-within{outline-color:#087e5b}
.oncall-tone-dialog footer{border-top-color:#e9eeeb}
.oncall-tone-dialog footer button{color:#087e5b}
.oncall-tone-error{color:#b3261e}
.oncall-tone-dialog[open]{display:flex;flex-direction:column}
.oncall-tone-dialog h2,.oncall-tone-dialog footer,.oncall-tone-error{flex-shrink:0}
.oncall-tone-dialog[open] .oncall-tone-list{flex:1;min-height:0;max-height:none}
.oncall-tone-dialog footer{gap:8px}
.oncall-tone-dialog footer button{min-width:0;flex:1;font-size:calc(20px * var(--font-scale,1));padding:8px 4px;line-height:1.3}
.oncall-tone-dialog footer [data-tone-preview]{flex:1.5}
@media(max-width:400px){.oncall-tone-dialog footer{padding:8px 10px;gap:4px}}

/* Notification dialogs follow the same explicit dark palette as the app. */
:root[data-theme=dark] :is(.notification-settings,.notification-controls,.notification-row,.oncall-tone-dialog){background:var(--surface,#222222);color:var(--ink,#f2f2f2);border-color:var(--line,#636363);color-scheme:dark}
:root[data-theme=dark] :is(.notification-settings header h2,.notification-settings header button,.oncall-tone-dialog h2,.oncall-tone-row){color:var(--ink,#f2f2f2)}
:root[data-theme=dark] :is(.notification-row small,.notification-help,.oncall-alert-notice,.oncall-alert-status,.notification-tone>span:last-child){color:var(--muted,#c4c4c4)}
:root[data-theme=dark] :is(.oncall-alert-field select,.oncall-tone-open){background:var(--surface,#222222);color:var(--ink,#f2f2f2);border-color:var(--line,#636363)}
:root[data-theme=dark] .oncall-tone-row:has(input:checked){background:#444444}
:root[data-theme=dark] .oncall-tone-row input{border-color:#ababab}
:root[data-theme=dark] .oncall-tone-row input:checked{border-color:#cccccc;background:radial-gradient(circle,#cccccc 0 6px,transparent 7px)}
:root[data-theme=dark] .oncall-tone-row:focus-within{outline-color:#cccccc}
:root[data-theme=dark] .oncall-tone-dialog footer{border-top-color:var(--line,#636363)}
:root[data-theme=dark] .oncall-tone-dialog footer button{color:#cccccc}
:root[data-theme=dark] .oncall-tone-error{color:#ffd1d4}
:root[data-theme=dark] .notification-switch{background:#818181}
:root[data-theme=dark] .notification-switch[aria-checked="true"]{background:#cccccc}
:root[data-theme=dark] .notification-switch[aria-checked="true"]>span::after{color:#222222}
:root[data-theme=dark] :is(.notification-switch,.notification-tone,.notification-settings header button):focus-visible{outline-color:#cccccc}
:root[data-theme=dark] :is(.notification-settings,.oncall-tone-dialog)::backdrop{background:#00000099}

/* Keep volume choices beside the existing sound switch, with full touch targets. */
.notification-volume{padding:14px 2px 18px;border-bottom:1px solid #e9eeeb;min-width:0}
.notification-volume-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;font-size:calc(20px * var(--font-scale,1));font-weight:600}
.notification-volume-preview{min-height:44px;padding:8px 12px;border:1px solid #aabfb1;border-radius:10px;background:#fff;color:#17372c;font:inherit;font-size:calc(17px * var(--font-scale,1));white-space:nowrap}
.notification-volume-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.notification-volume-options button{min-width:0;min-height:48px;padding:8px 4px;border:1px solid #aabfb1;border-radius:10px;background:#fff;color:#17372c;font:inherit;font-size:calc(20px * var(--font-scale,1));font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.notification-volume-options button[aria-pressed="true"]{border:2px solid #087e5b;background:#e4f2e9;color:#075d43}
.notification-volume :is(button,a):focus-visible{outline:3px solid #087e5b;outline-offset:3px}
.notification-volume button:disabled,.notification-tone:disabled{opacity:.5;cursor:default}
.notification-volume .notification-help{font-size:15px;margin-top:10px}
.notification-volume-update a{display:inline-block;min-height:44px;padding:10px 0;color:#087e5b;text-decoration:underline;font:inherit}
:root[data-theme=dark] .notification-volume{border-color:var(--line,#636363)}
:root[data-theme=dark] :is(.notification-volume-options button,.notification-volume-preview){background:var(--surface,#222222);color:var(--ink,#f2f2f2);border-color:var(--line,#636363)}
:root[data-theme=dark] .notification-volume-options button[aria-pressed="true"]{border-color:#cccccc;background:#444444;color:#f2f2f2}
:root[data-theme=dark] .notification-volume :is(button,a):focus-visible{outline-color:#cccccc}
:root[data-theme=dark] .notification-volume-update a{color:#cccccc}

/* Alert controls share the monochrome dark palette. */
:root[data-theme=dark] :is(.notification-settings,.notification-controls,.notification-row,.oncall-tone-dialog,.oncall-alert-field select,.oncall-tone-open){background:var(--surface,#1c1c1c);color:var(--ink,#f3f3f3);border-color:var(--line,#606060)}
:root[data-theme=dark] :is(.oncall-tone-row:has(input:checked),.notification-volume-options button[aria-pressed=true]){background:#414141;color:#fff;border-color:#aaa}
:root[data-theme=dark] .oncall-tone-row input{border-color:#888}
:root[data-theme=dark] .oncall-tone-row input:checked{border-color:#ddd;background:radial-gradient(circle,#ddd 0 6px,transparent 7px)}
:root[data-theme=dark] :is(.oncall-tone-row:focus-within,.notification-switch,.notification-tone,.notification-settings header button,.notification-volume button,.notification-volume a):focus-visible{outline-color:#ddd}
:root[data-theme=dark] .oncall-tone-row:focus-within{outline-color:#ddd}
:root[data-theme=dark] :is(.oncall-tone-dialog footer button,.notification-volume-update a){color:#ddd}
:root[data-theme=dark] .notification-switch{background:#666}
:root[data-theme=dark] .notification-switch[aria-checked=true]{background:#ddd}
:root[data-theme=dark] .notification-switch[aria-checked=true]>span{background:#fff}
:root[data-theme=dark] .notification-switch[aria-checked=true]>span::after{color:#111}
:root[data-theme=dark] :is(.notification-settings,.oncall-tone-dialog){box-shadow:0 20px 70px #0006}