/* ==========================================================================
   App additions to the design's rockies-card.css (which is kept as the
   design delivered it, apart from its font paths). Keep this file small.
   ========================================================================== */

/* The WebForms server form wraps the page content; it adds no spacing. */
.rc-form-shell { margin: 0; }

/* A field inside the email / mobile toggle panel fills the row. */
.rc-choice-panel > .rc-field { flex: 1 1 auto; }

/* No texts on this box (Twilio not configured): no toggle, the email field
   shows on its own. */
.rc-choice--email-only .rc-choice-panel--email { display: flex; margin-top: 0; }

/* Fields in a row line up by the tops of their inputs. The design lines a row
   up by its bottom, so a tick or an error under one field pushed its
   neighbours down. */
.rc-grid { align-items: start; }

@media (min-width: 600px) {
  /* The narrow Initial column wraps its label onto two lines: every name
     label takes two lines and sits on the lower one. */
  .rc-grid--name .rc-label { display: flex; flex-direction: column; justify-content: flex-end; min-height: 2.8em; }

  /* Add a card: the button lines up with the input, not with the bottom of
     the field, so an error (or a password manager's icon injected after the
     input) no longer drags it down. Offset = one label line + the field gap. */
  .rc-inline-form { align-items: flex-start; }
  .rc-inline-form > .rc-btn { margin-top: calc(15px * 1.4 + 6px); }
}

/* An example to type over (mobile number): lighter than typed text, still
   4.5:1 on white. */
.rc-input::placeholder { color: #767676; opacity: 1; }

/* The verified contact on the activation form. */
.rc-verified { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--rc-ok); }
.rc-verified .rc-icon { width: 18px; height: 18px; }

/* Card terms list on the activation form. */
.rc-terms { margin: 0 0 12px; padding-left: 18px; font-size: 14px; color: var(--rc-text); }
.rc-terms li { padding: 2px 0; }