/* Dialog on native <dialog> (focus trap, Escape and the top layer come free).
   Use it only when the task needs protected focus: confirming a purchase, a code step.
   Drawn as a window (V2-PROMOTE, from the shop's buy dialog): lacquer body, bright frame, the head as a title bar.
   Desktop: centred card. Under 600px: a sheet from the bottom edge.
   Markup: <dialog class="sheet" aria-labelledby="t"><div class="sheet-inner">
             <div class="sheet-head">[icon] <div><h2 id="t">..</h2></div> <button class="sheet-close">..</button></div>
             ... <div class="sheet-actions">..</div></div></dialog>
   JS: openDialog(el) / closeDialog(el) in js/lib/ui.js (also closes on backdrop click). */

.sheet {
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  color: var(--text);
  background: var(--plate-body);
  border: 1px solid var(--frame-hi);
  border-radius: var(--r-4);
  box-shadow: var(--bevel), var(--e-3);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out),
    overlay var(--dur-3) allow-discrete,
    display var(--dur-3) allow-discrete;
}
.sheet[open] { opacity: 1; transform: none; }
@starting-style { .sheet[open] { opacity: 0; transform: translateY(14px) scale(0.985); } }
.sheet::backdrop {
  background: transparent;
  transition: background-color var(--dur-3) var(--ease-out), overlay var(--dur-3) allow-discrete, display var(--dur-3) allow-discrete;
}
/* The fallback covers browsers where ::backdrop does not inherit custom properties. */
.sheet[open]::backdrop { background: color-mix(in srgb, var(--ink-00, #08080A) 78%, transparent); }
@starting-style { .sheet[open]::backdrop { background: transparent; } }

.sheet-inner { padding: var(--s-6); padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); }
/* The head is the window's title bar (window.css): plate-head lacquer across the full width, a frame rule under it. */
.sheet-head {
  display: grid;
  grid-template-columns: auto 1fr 44px;
  gap: var(--s-4);
  align-items: center;
  margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-5);
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-6);
  background: var(--plate-head);
  border-bottom: 1px solid var(--frame);
}
.sheet-head h2 { font-size: var(--fs-xl); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.sheet-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--accent-hi);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.sheet-close:hover { border-color: var(--accent); background: var(--tint); }
.sheet-close .icon { width: 20px; height: 20px; }
.sheet-price { color: var(--accent-hi); font-weight: 600; font-variant-numeric: tabular-nums; }
.sheet-note { color: var(--text-2); margin-bottom: var(--s-4); }
.sheet-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-5); }
.sheet .form-submit-status { margin-top: 0; margin-bottom: var(--s-3); }

@media (max-width: 599px) {
  .sheet {
    width: 100vw;
    max-width: 100vw;
    margin: auto 0 0;
    max-height: 92dvh;
    border-radius: var(--r-4) var(--r-4) 0 0;
    border-bottom: 0;
    transform: translateY(40px);
  }
  @starting-style { .sheet[open] { opacity: 0; transform: translateY(40px); } }
  .sheet-inner { padding: var(--s-5) var(--s-4); padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); }
  .sheet-head { margin: calc(var(--s-5) * -1) calc(var(--s-4) * -1) var(--s-4); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); }
  .sheet-actions .btn { flex: 1 1 100%; }
}