/* ============================================================
   DRAWER — The side drawer, its scrim and toasts
   ============================================================ */

.scrim{position:fixed;inset:0;z-index:60;display:none;backdrop-filter:none}
.scrim.on{display:block}
.drawer {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(660px,96vw);
  z-index:61;
  display:none;
  flex-direction:column;
}
.drawer.on{display:flex}
.dr-h{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.dr-b{flex:1;overflow-y:auto;scrollbar-gutter:stable}
.dr-f{display:flex;gap:8px;justify-content:flex-end;flex:0 0 auto}
.x {
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--chrome);
  font-size:17px;
}
.x:hover{color:var(--ink)}
#toasts {
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  z-index:90;
  display:flex;
  flex-direction:column;
  gap:7px;
  align-items:center;
  pointer-events:none;
}
.toast{color:#fff;animation:tin var(--t-med) var(--ease)}

@media(max-width:820px) {
  .drawer{width:100%}
}

.previewbox{padding:14px;overflow:auto}
.previewbox .sheet{box-shadow:0 2px 10px rgba(0,0,0,.16);padding:9mm;width:210mm}
/* a wide drawer gets the room a wide form actually needs */
.drawer.wide{width:min(1360px,97vw)}

@media(min-width:1700px) {
  .drawer.wide{width:min(1500px,95vw)}
}

.drawer{background:var(--paper);box-shadow:var(--sh-3)}
.dr-h{background:var(--card);border-bottom:1px solid var(--line);box-shadow:none}
.dr-t{letter-spacing:-.015em}
.dr-f{padding:12px 20px;background:var(--card);border-top:1px solid var(--line);box-shadow:none}
.x:hover{background:var(--n100)}
#toasts{bottom:22px}
.toast.err{background:var(--red)}
.toast.ok{background:var(--green)}
.dr-h{height:62px;padding:0 22px}
.dr-t{font-size:16px;font-weight:650}
.dr-b{padding:22px}
.toast{background:#413D39}
.scrim{background:rgba(66,61,56,.38)}
.idlewarn .btn{background:#fff;color:#16181C;border:0}