/* Confirmed saves stay above navigation without covering the screen. */
#save-feedback{position:fixed;z-index:19;inset-inline:16px;bottom:calc(var(--nav-height,100px) + 16px);display:flex;justify-content:center;pointer-events:none}
.save-feedback-card{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) 44px;align-items:start;gap:12px;box-sizing:border-box;width:min(100%,440px);max-height:calc(100vh - var(--nav-height,100px) - 32px);max-height:calc(100dvh - var(--nav-height,100px) - 32px);padding:18px 12px 18px 18px;border:1px solid var(--accent);border-radius:20px;background:var(--card);box-shadow:0 14px 50px #0005;pointer-events:auto;isolation:isolate;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.save-feedback-card strong{display:block;font-size:1.05rem;line-height:1.35;overflow-wrap:anywhere}
.save-feedback-card p{font-size:.88rem;line-height:1.5;margin:5px 0 0;overflow-wrap:anywhere}
.save-feedback-dismiss{position:sticky;top:0;z-index:2;min-width:44px;min-height:44px;padding:0;font-size:1.5rem}
.save-feedback-emblem{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--accent);border-radius:50%;font-size:1.25rem;color:var(--accent)}
[data-motion=on] .save-feedback-card{animation:save-arrive 320ms cubic-bezier(.2,.7,.2,1) both}
[data-effect=alarm][data-motion=on] .save-feedback-emblem{animation:save-ring 600ms ease-out both}
[data-effect=reminder][data-motion=on] .save-feedback-emblem{animation:save-bloom 650ms ease-out both}
[data-effect=event][data-motion=on] .save-feedback-card,[data-effect=birthday][data-motion=on] .save-feedback-card{animation:save-celebrate 650ms cubic-bezier(.2,.7,.2,1) both}
.save-feedback-particles{position:absolute;inset:0;z-index:-1;pointer-events:none}
.save-feedback-particles i{position:absolute;inset-inline-start:calc(8% + var(--particle)*7%);top:85%;width:5px;height:5px;background:var(--accent);border-radius:50%;opacity:0}
[data-motion=on] .save-feedback-particles i{animation:save-spark 950ms ease-out calc(var(--particle)*28ms) both}
[data-effect=birthday] .save-feedback-particles i{width:6px;height:10px;border-radius:2px}
@keyframes save-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes save-ring{from{box-shadow:0 0 0 0 var(--accent)}to{box-shadow:0 0 0 9px transparent}}
@keyframes save-bloom{from{transform:scale(.85)}to{transform:scale(1)}}
@keyframes save-celebrate{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes save-spark{0%{opacity:0;transform:translateY(0) rotate(0)}25%{opacity:.65}100%{opacity:0;transform:translateY(-110px) rotate(100deg)}}
.motion-off #save-feedback *,#save-feedback[data-motion=off] *{animation:none!important}
@media(prefers-reduced-motion:reduce){#save-feedback *{animation:none!important}}
.alarm-priority{margin:0 0 24px}
.alarm-priority h2{font-size:clamp(1.7rem,5vw,2.25rem);margin:0 0 10px}
.alarm-priority>button{width:100%;min-height:56px;font-size:1.1rem;font-weight:750;margin:6px 0 12px}
.alarm-priority .notice{margin:0;line-height:1.5}
.alarm-clock-section{margin-block-start:32px;padding-block-start:22px;border-top:1px solid var(--surface-border)}
.alarm-clock-section>h2{margin:0 0 10px}
.event-celebration{margin-block:18px}
@media(max-width:360px){#save-feedback{inset-inline:8px}.save-feedback-card{gap:8px;padding:12px 8px 12px 12px;grid-template-columns:30px minmax(0,1fr) 44px}.save-feedback-emblem{width:28px;height:28px}}
@media(max-height:360px){#save-feedback{bottom:calc(var(--nav-height,100px) + 8px)}.save-feedback-card{padding:6px;max-height:calc(100vh - var(--nav-height,100px) - 16px);max-height:calc(100dvh - var(--nav-height,100px) - 16px)}}
