/* Chrome for the PUBLIC form page only — the page around the form, not the form.
 * The form itself is form.css, which the designer loads too so its preview is
 * the real thing. Kept apart because these rules are unscoped: they would
 * restyle the app if they were in the shared file. */
:root { --pg-bg: #eef1f4; --pg-ink-2: #5a6672; color-scheme: light; }
* { box-sizing: border-box; }
html, body {
  margin: 0; background: var(--pg-bg); color: #16202b;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
body {
  display: flex; flex-direction: column; align-items: center;
  /* viewport-fit=cover plus safe-area keeps the send button clear of the home bar. */
  padding: max(20px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
}
.card-wrap { width: 100%; max-width: 620px; }
.loading { color: var(--pg-ink-2); text-align: center; padding: 48px 0; }

/* The failure states: a resolvable code with no published form, an unknown code,
   a dead network. Same card treatment as the form so a failure does not look
   like a different site. */
.pane {
  background: #fff; border: 1px solid #e3e7ec; border-radius: 14px;
  padding: 28px 22px; text-align: center;
}
.pane h1 { margin: 0 0 10px; font-size: 21px; font-weight: 650; letter-spacing: -.01em; }
.pane p { margin: 0 0 8px; color: var(--pg-ink-2); font-size: 15px; }
.pane .dim { color: #8091a0; font-size: 13.5px; margin-bottom: 0; }

/* Quiet on purpose. The practice is the name on this page; this only answers
   "who made this" for the one person in ten who wonders. */
.by { color: var(--pg-ink-2); opacity: .75; font-size: 12px; margin: 14px 0 0; }

/* --- embedded ------------------------------------------------------------- */
/* Inside an iframe on the practice's own website. The page around the form is
   the host's: its background shows through, its column decides the width, and
   the padding that centres a standalone page only adds a margin inside a box
   that already has one. The form itself is untouched — same renderer, same
   card — so what the practice previewed is what their visitors get. */
html.embed, html.embed body { background: transparent; }
html.embed body { padding: 0; }
/* The host's column decides the width. Ours would be a second measure inside
   theirs. */
html.embed .card-wrap { max-width: none; }
/* The maker's mark stays. It is small, it is true, and a practice can see it in
   the preview before pasting the snippet — quietly dropping it on someone
   else's site would be the dishonest direction to err in. */
html.embed .by { margin-top: 10px; }