/* Sheet (modal), scrim, toast, tooltip. */
/* modal, toast, tooltip */
/* ---------- modal sheet ---------- */
.scrim{position:fixed;inset:0;height:100dvh;z-index:var(--z-modal);background:rgba(21,20,14,.55);display:grid;place-items:center;padding:24px;overscroll-behavior:contain;animation:ss-scrim .2s ease-out}
.sheet{background:var(--paper);border:1px solid var(--hair-strong);width:min(520px,100%);overflow:auto;display:grid;position:relative;max-height:calc(100dvh - 56px);padding:0 24px 24px;gap:16px;overscroll-behavior:contain;box-shadow:8px 8px 0 var(--accent),8px 8px 0 1px var(--hair-strong);animation:ss-pop .22s cubic-bezier(.2,.7,.2,1);-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
.sheet.wide{width:min(760px,100%)}
/* header stays put while the body scrolls, so Close is always in reach */
.sheet-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:3;background:var(--paper);margin-inline:-24px;padding:14px 24px 12px;border-bottom:1px solid var(--hair);gap:12px;min-height:62px}
/* ---------- toast ---------- */
.toast{position:fixed;z-index:var(--z-toast);background:var(--ink);color:var(--paper);font-family:var(--mono);left:16px;right:16px;transform:none;width:fit-content;max-width:min(460px,calc(100% - 32px));margin-inline:auto;padding:12px 16px;font-size:var(--fs-ui);line-height:1.45;text-align:center;border:1px solid var(--ink);box-shadow:4px 4px 0 var(--accent);animation:ss-pop .2s ease-out;overflow-wrap:anywhere;bottom:var(--toast-b,calc(var(--player-h) + 16px + env(safe-area-inset-bottom,0px)))}
.tip{position:absolute;z-index:var(--z-tip);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:var(--fs-caption);padding:6px 9px;pointer-events:none;white-space:nowrap}
.sheet:focus{outline:0}
.sheet-head .eyebrow{color:var(--muted)}
.sheet-head [data-close]{margin-left:auto;flex:0 0 auto}
.sheet > .sheet-head + *{margin-top:4px}
@keyframes ss-scrim{from{background:rgba(21,20,14,0)}}
@keyframes ss-pop{from{opacity:0;transform:translateY(10px)}}
@keyframes ss-up{from{transform:translateY(100%)}}
@media (max-width:760px){
  /* phone: bottom sheet with a handle, rounded top, safe area at the bottom */
  .scrim{place-items:end stretch;padding:env(safe-area-inset-top,0px) 0 0}
  .sheet,.sheet.wide{width:100%;max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px));border:0;border-top:1px solid var(--hair-strong);border-radius:14px 14px 0 0;box-shadow:0 -10px 30px rgba(21,20,14,.18);padding:0 var(--gutter-r) calc(20px + env(safe-area-inset-bottom,0px)) var(--gutter);animation:ss-up .28s cubic-bezier(.2,.7,.2,1)}
  .sheet-head{margin-inline:calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));padding:22px var(--gutter-r) 10px var(--gutter);min-height:0;border-radius:14px 14px 0 0}
  .sheet-head::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;border-radius:2px;background:var(--hair);transform:translateX(-50%)}
  .toast{font-size:var(--fs-small);max-width:calc(100% - 32px)}
}
@media (prefers-reduced-motion:reduce){
  .scrim{animation:none!important}
  .sheet{animation:none!important}
  .toast{animation:none!important}
}