/* Modal and drawer.
 *
 * G14 — native <dialog>. It brings a focus trap, Escape-to-close, inertness of
 * the rest of the page and ::backdrop for free; a hand-rolled <div class="modal">
 * brings none of them (UX_SPEC.md §7 #8). Every overlay in this app is a real
 * <dialog> opened with showModal(), and every close is a <form method="dialog">
 * or the Escape key — no bespoke JavaScript is involved in either.
 */

dialog.sheet{
  padding:var(--sp-0);
  max-height:100%;max-width:100%;overflow:auto;
  background:var(--paper-2);color:var(--ink);
  border:var(--bw-1) solid var(--rule-ink);border-radius:var(--r-2);
  box-shadow:var(--sh-3);
}
dialog.sheet::backdrop{background:var(--ink);opacity:var(--op-scrim)}

/* A form modal sits centred; a drawer is flush to the right edge, full height. */
dialog.sheet.m{width:var(--w-modal);margin:auto}
dialog.sheet.d{
  width:var(--w-drawer);height:100%;max-height:100%;
  margin-top:var(--sp-0);margin-bottom:var(--sp-0);margin-right:var(--sp-0);margin-left:auto;
  border-radius:var(--r-0);
  border-top:0;border-right:0;border-bottom:0;
  border-left:var(--bw-2) solid var(--rule-ink);
}

.sheet-h{
  position:sticky;top:var(--sp-0);z-index:var(--z-sticky);
  display:flex;gap:var(--sp-4);align-items:flex-start;
  padding:var(--sp-5);background:var(--paper-2);
  border-bottom:var(--bw-2) solid var(--rule-ink);
}
.sheet-h .ttl{flex:1 1 auto;min-width:0}
.sheet-h h2{
  font-family:var(--font-display);font-size:var(--fs-6);font-weight:var(--fw-reg);
  letter-spacing:var(--track-tight);line-height:var(--lh-tight);
}
.sheet-h .eyebrow{display:block;margin-bottom:var(--sp-2)}
.sheet-h form{display:flex;margin:var(--sp-0)}
.sheet-b{padding:var(--sp-5)}
.sheet-f{
  position:sticky;bottom:var(--sp-0);
  display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5);background:var(--paper-3);
  border-top:var(--bw-1) solid var(--rule);
}
.sheet-f form{display:flex;margin:var(--sp-0)}

.formsect{border-top:var(--bw-1) solid var(--rule);padding-top:var(--sp-4);margin-top:var(--sp-5)}
.formsect:first-child{border-top:0;padding-top:var(--sp-0);margin-top:var(--sp-0)}
.formsect > .fs-h{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.formsect > .fs-h .no{font-family:var(--font-display);font-size:var(--fs-5);color:var(--accent);line-height:var(--lh-flat)}
.formsect > .fs-h h3{
  font-size:var(--fs-0);letter-spacing:var(--track-caps);text-transform:uppercase;
  font-weight:var(--fw-bold);color:var(--ink-2);
}
.formsect > .fs-h .opt{
  margin-left:auto;font-size:var(--fs-0);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:var(--track-caps);
}

.sheet-done{text-align:center;padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
.sheet-done > svg{width:var(--sp-8);height:var(--sp-8);color:var(--color-ok)}
.sheet-done .t{font-family:var(--font-display);font-size:var(--fs-6);margin-top:var(--sp-4)}
.sheet-done .s{color:var(--ink-2);margin-top:var(--sp-3)}

@media (max-width:860px){
  .picker{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .sheet-b{padding:var(--sp-4)}
}