/* The sheet — what replaced prompt(), alert() and confirm().
   On a phone it rises from the bottom edge, because that is where the thumb
   already is and because a dialog anchored to the top of a tall screen is a
   dialog you have to reach for. On a desktop it is a centred card. Same
   markup, same code, one media query. */

.sheet-back{position:fixed;inset:0;z-index:100;background:rgba(20,30,25,.45);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity .18s ease;padding:0}
.sheet-back.in{opacity:1}
body.sheet-open{overflow:hidden}

.sheet{width:100%;max-width:560px;background:var(--surface);color:var(--ink);
  border-radius:20px 20px 0 0;box-shadow:0 -8px 40px rgba(20,30,25,.28);
  max-height:92vh;display:flex;flex-direction:column;
  transform:translateY(18px);transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.sheet-back.in .sheet{transform:translateY(0)}

/* The little bar at the top of a phone sheet: a universally understood
   "this slides away", drawn once so nobody has to be told. */
.sheet-grip{width:38px;height:4px;border-radius:99px;background:var(--line);
  margin:10px auto 2px;flex:none}

.sheet-body{padding:12px 22px 4px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet-body h3{font-family:Petrona,Georgia,serif;font-weight:600;font-size:24px;
  line-height:1.2;margin:6px 0 8px;letter-spacing:-.01em;text-wrap:balance}
.sheet-blurb{color:var(--muted);font-size:16px;margin:0 0 20px}
.sheet-say{font-size:16.5px;margin:0 0 6px}
.sheet-body .field:last-of-type{margin-bottom:6px}
.sheet-err{background:var(--surface);border:1.5px solid var(--urgent);border-radius:11px;
  padding:12px 14px;font-size:15.5px;margin:4px 0 8px}
.sheet-err b{color:var(--urgent)}

/* The foot never scrolls away: the two things you can do are always on screen,
   and Save is always the one under your thumb. */
.sheet-foot{display:flex;flex-direction:column;gap:9px;padding:14px 22px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--surface);
  border-radius:0 0 20px 20px;flex:none}
.sheet-foot .btn{width:100%}
.btn.danger{background:var(--urgent);border-color:var(--urgent);color:var(--on-urgent)}
.btn.danger:hover{filter:brightness(.93)}

.sheet .drop{padding:20px 14px}
.sheet .shots{margin-top:9px}
.sheet .shots img{cursor:default}

@media (min-width:700px){
  .sheet-back{align-items:center;padding:24px}
  .sheet{border-radius:18px;max-height:86vh;transform:translateY(0) scale(.97)}
  .sheet-back.in .sheet{transform:none}
  .sheet-grip{display:none}
  .sheet-body{padding-top:22px}
  .sheet-foot{flex-direction:row-reverse;border-radius:0 0 18px 18px}
  .sheet-foot .btn{width:auto;flex:1 1 auto}
  .sheet-foot .btn.ghost{flex:0 0 auto;padding:0 22px}
}
@media (prefers-reduced-motion:reduce){
  .sheet-back,.sheet{transition:none}
}