/* The checkout panel and the preview enlarger: a page turned in from the ring edge. */
.sheet {
  position: fixed; margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink);
  width: min(26rem, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow: visible;
  transform-origin: 0 50%;
  opacity: 0; transform: perspective(1400px) rotateY(-32deg) translateX(-18px);
  transition: opacity 240ms ease, transform 280ms var(--ease-heavy);
}
.sheet[data-state="open"] { opacity: 1; transform: none; transition: opacity 240ms var(--ease-settle), transform 380ms var(--ease-heavy); }
.sheet::backdrop { background: rgb(23 58 42 / 0.45); opacity: 0; transition: opacity 280ms ease; }
.sheet[data-state="open"]::backdrop { opacity: 1; }
.sheet-in { position: relative; padding: 28px 24px 24px 44px; max-height: calc(100svh - 32px); overflow: auto; }
/* binder ring holes down the left edge */
.sheet-in::before {
  content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 14px;
  background: radial-gradient(circle at 7px 50%, var(--panel) 0 5px, var(--pearl-shade) 5.5px 6.5px, transparent 7px) 0 0 / 14px 33.34% repeat-y;
}
.sheet h2 { font-size: var(--step-2); margin: var(--s2) 0 var(--s1); }
.sheet p { margin-bottom: var(--s2); }
.portrait { display: block; width: 88px; height: 88px; border: 1px solid var(--moulding); }
.sheet .links { display: flex; flex-wrap: wrap; gap: 8px 20px; max-width: none; }
.sheet .links a { min-height: 44px; display: inline-flex; align-items: center; }
.sheet .btn { width: 100%; }
.sheet-large { width: min(34rem, calc(100vw - 24px)); }
.sheet-large img { display: block; width: 100%; height: auto; max-height: 70svh; object-fit: contain; background: var(--pearl); margin-bottom: var(--s1); }
@media (min-width: 900px) { .sheet-in { padding: 36px 36px 32px 56px; } .sheet-large { width: min(40rem, 90vw); } }