/* ==========================================================================
   comms.css: the three communication pages only.

       /call-me-back   /refer   /my-interview

   base.css is the design contract and is linked first; site.css sits between
   the two and owns the stamped header and footer. Nothing here overrides a
   base.css component and nothing here depends on a site.css class, so these
   pages still read correctly if site.css changes underneath them. Every
   value below is a base.css token.
   ========================================================================== */

/* ------------------------------------------------------------------ shell */
.comms-main { padding-block: 40px 80px; }
.comms-head { margin-bottom: 28px; }
.comms-head .lead { margin-top: 10px; }

/* The one-line route to a person, in the same place on every page (WCAG 3.2.6). */
.comms-help { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Shown only when scripting is off, so it never competes with the live page. */
noscript { display: block; }
.comms-note {
  margin: 0 0 24px; padding: 12px 14px; font-size: var(--fs-small); line-height: 1.55;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ---------------------------------------------------------------- honeypot */
.comms-hp {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ forms */
.comms-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.comms-form .field { margin: 0 0 24px; }
.comms-form .field:last-child { margin-bottom: 0; }
.comms-legend { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 8px; padding: 0; }
.comms-legend .opt-tag { font-weight: 400; color: var(--muted); }
.comms-form .field__hint { margin-top: 0; }
.comms-form .field__error { margin-top: 2px; }

.comms-block { margin-bottom: 8px; }
.comms-block + .comms-block { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.comms-block > .h3 { margin-bottom: 18px; }

.comms-row { display: grid; gap: 0; }
@media (min-width: 560px) { .comms-row { grid-template-columns: 1fr 1fr; gap: 0 16px; } }

/* Rule 7: the reason sits beside the field in plain view, not behind a link. */
.comms-privacy {
  margin-top: 10px; padding: 10px 12px; color: var(--ink);
  background: var(--accent-tint); border: 1px solid var(--accent-border);
  border-radius: var(--radius); font-size: var(--fs-small); line-height: 1.5;
}

.comms-consent {
  margin: 28px 0 24px; padding: 18px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.comms-consent .field { margin: 0; }
.comms-consent .field__hint { margin-top: 12px; }

.comms-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.comms-done .comms-actions { margin-top: 24px; }

/* --------------------------------------------------------------- messages */
.comms-alert {
  margin-bottom: 20px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--danger-tint); border: 1px solid var(--danger); color: var(--danger);
  font-size: var(--fs-small); font-weight: 500;
}
.comms-alert:empty { display: none; }

.comms-fallback {
  margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius);
  background: var(--warn-tint); border: 1px solid #D9B45B; color: var(--ink);
  font-size: var(--fs-small); line-height: 1.55;
}
.comms-fallback:empty { display: none; }

/* --------------------------------------------------------- what we booked */
.comms-card { margin-bottom: 28px; }
.comms-card .eyebrow { margin-bottom: 10px; }
.comms-when {
  margin: 0; font-size: var(--fs-h3); font-weight: 600; line-height: 1.25;
  letter-spacing: -.01em; color: var(--ink);
}
.comms-when:empty { display: none; }
.comms-zone { margin: 2px 0 0; font-size: var(--fs-small); color: var(--muted); }
.comms-facts { margin-top: 18px; }
.comms-facts dd { font-size: .9375rem; }
.comms-facts .link-arrow { margin-left: 2px; white-space: nowrap; }
.comms-card__add { margin: 20px 0 0; }

/* The two big answers. Taller than a normal choice: they are the whole point
   of the page, and they are often tapped one-handed on a phone. */
.comms-choices .opt { min-height: 76px; }

/* Revealed by comms.js when a new time is asked for. With scripting off the
   whole block is visible and the server ignores it unless it is needed. */
.comms-reveal { margin: 0 0 24px; }
.comms-reveal .field:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- success */
.comms-done { margin-top: 8px; }
.comms-done .steps { margin-top: 20px; }
.comms-done .step h3 { margin-bottom: 8px; }
.comms-done .step p { font-size: .9375rem; }
.comms-done__when { font-weight: 600; margin-top: 4px; }
.comms-done__when:empty { display: none; }
.comms-done__next { margin-top: 20px; font-size: .9375rem; }

.comms-save {
  margin: 20px 0 0; padding: 16px; background: var(--ground);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.comms-save__why { font-size: var(--fs-small); color: var(--muted); margin: 0 0 14px; }