@layer components{
/* settings + postvote = modal <dialog> (focus trap, Esc) opened via invoker commands */
.sheet{position:fixed;inset-block:auto 0;inset-inline:0;margin:0;width:100%;max-width:none;max-height:88dvh;height:auto;overflow:auto;border:0;color:var(--ink);background:var(--paper);border-radius:22px 22px 0 0;padding:10px 20px calc(24px + env(safe-area-inset-bottom))}
.sheet::backdrop,.pv::backdrop{background:#0008;backdrop-filter:blur(4px)}
@media(min-width:900px){.sheet{inset-block:0;inset-inline:auto 0;width:400px;max-height:none;height:100dvh;border-radius:0}}
.sheet header{display:flex;justify-content:space-between;align-items:center}.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 12px}
.sec{padding:14px 0;border-top:1px solid var(--line)}.sec>h3,.sec legend{font-size:var(--fs-sm);letter-spacing:1.5px;text-transform:uppercase;color:var(--mute);margin-bottom:8px;font-weight:400}fieldset{border:0}
.prov{display:block;width:100%;padding:12px;border-radius:12px;border:1px solid var(--ctl);margin-top:8px;font-weight:600;text-align:center;text-decoration:none}
.pv{margin:auto;max-width:380px;width:calc(100% - 48px);text-align:center;padding:28px 22px;border-radius:22px;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 30px 80px #0008}
.seal{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:calc(1.75rem*var(--fs));color:var(--btnInk);background:var(--btn);box-shadow:0 0 40px #f0b45a66}.pv p{color:var(--mute);font-size:var(--fs-sm)}}
}
@layer motion{
.sheet,.pv{transition:transform .3s,opacity .3s,display .3s allow-discrete,overlay .3s allow-discrete}
.sheet:not([open]){transform:translateY(100%)}@starting-style{.sheet[open]{transform:translateY(100%)}}
@media(min-width:900px){.sheet:not([open]){transform:translateX(100%)}@starting-style{.sheet[open]{transform:translateX(100%)}}}
.pv:not([open]){opacity:0;transform:scale(.94)}@starting-style{.pv[open]{opacity:0;transform:scale(.94)}}
::view-transition-old(main){animation:.25s ease both fadeout}::view-transition-new(main){animation:.35s ease both fadein}
@keyframes fadeout{to{opacity:0;transform:translateY(-6px)}}@keyframes fadein{from{opacity:0;transform:translateY(6px)}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.6s}
@media(prefers-reduced-motion:reduce){*,*::before,*::after,::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;transition:none!important}}}