/* Permission explainer sheet (shared/perms.js). Same anatomy as the app's confirm sheet
   (#cal-confirm in calendar.css): a bottom sheet, a title, a line, the accent button and a quiet one.
   Its own copy because account.html does not load calendar.css. */
#perm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:470}
#perm-sheet{position:fixed;bottom:0;left:0;right:0;z-index:471;background:var(--bg2);border-radius:20px 20px 0 0;
  box-shadow:0 -12px 48px rgba(0,0,0,.5);padding:22px 20px calc(env(safe-area-inset-bottom,20px) + 12px);
  animation:permUp .18s ease-out;font-family:var(--font)}
#perm-sheet[hidden],#perm-overlay[hidden]{display:none}
.perm-t{font-size:1.0625rem;font-weight:700;color:var(--text);letter-spacing:-0.01em}
.perm-m{font-size:0.9375rem;color:var(--muted2);line-height:1.4;margin-top:6px}
#perm-sheet button{width:100%;min-height:48px;border:none;border-radius:12px;font-family:var(--font);font-size:0.9375rem;cursor:pointer;touch-action:manipulation}
.perm-ok{min-height:50px!important;margin-top:18px;background:var(--acc);color:var(--acc-ink);font-weight:700}
.perm-no{margin-top:6px;background:none;color:var(--muted2);font-weight:600}
@keyframes permUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#perm-sheet{animation:none}}