/* Not-there-yet: a city we are not in, or a business we do not run. */
/* THE SCRIM SCROLLS, and the card is centred by auto margins rather than align-items.
   align-items:center on a flex container clips an item taller than the container: the overflow
   goes off BOTH ends, and the half above the top cannot be scrolled to at all. On a short
   window that put the dialog's heading and its buttons off screen with no way to reach them.
   Auto margins centre it exactly the same way while letting it overflow downward, where the
   scrim's own scrolling can reach it. */
.modal{ position:fixed; inset:0; z-index:var(--z-modal); display:none;
  justify-content:center; background:var(--scrim); padding:20px; overflow-y:auto; }
.modal.on{ display:flex; }

/* the dialog and everything in it are SURFACES (styles/surface.css) */
.card{ position:relative; width:min(430px,100%); padding:26px; margin:auto; flex:0 0 auto; }
.card h3{ margin:0 0 10px;
  font:var(--w-title) var(--fs-17)/var(--lh-snug) var(--font-title);
  color:var(--ink); }
.card p{ margin:0 0 18px; font:400 var(--fs-13)/var(--lh-copy) var(--font-mono);
  color:var(--text-soft); }
.card input{ width:100%; padding:11px 13px; margin-bottom:10px;
  font:400 var(--fs-14) var(--font-mono); box-sizing:border-box; }
.card .row{ display:flex; gap:10px; margin-top:6px; }
.card button{ position:relative; flex:1; padding:12px; cursor:pointer;
  font:600 var(--fs-13) var(--font-mono); letter-spacing:var(--ls-hud); }
.card .go{ background-color:var(--ink); color:var(--on-ink); }
.card .no{ background-color:var(--surface); color:var(--ink); }
.card .done{ margin:16px 0 0; color:var(--ink); display:none; }
.card.sent .done{ display:block; }
/* keep a way out after sending: hide the send button, not the whole row */
.card.sent .go,.card.sent input,.card.sent p.ask-copy{ display:none; }

/* what was answered, above the form */
/* a SURFACE too: it is the same height as the fields under it, so it takes the same corner
   and the dialog reads as one set of boxes rather than two */
.card .sum{ position:relative; margin:0 0 16px; }
.card .sum div{ display:flex; gap:12px; align-items:center; padding:9px 12px;
  font:400 var(--fs-13) var(--font-mono); color:var(--ink);
  border-bottom:1px solid var(--hairline); }
.card .sum div:last-child{ border-bottom:0; }
.card .sum span{ min-width:76px; color:var(--text-muted); font-size:var(--fs-10);
  letter-spacing:var(--ls-label); text-transform:uppercase; }