/* Alert signup and the membership controls. Both live on parchment. */

.alert-form {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.channel-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--body-parch);
}

.radio {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.radio input { accent-color: var(--ink); margin: 0; }

.alert-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.field { display: block; }
/* Real labels, not placeholder-only labelling. They are visually hidden until
   the field has content or focus, so the design's bare underline is preserved
   without leaving the input unnamed to a screen reader. */
.field > .field-label {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.field input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  padding: 8px 2px;
  color: var(--ink);
  outline: none;
}
.field input::placeholder { color: var(--placeholder); }
.field input:focus-visible { border-bottom-width: 2px; outline: none; }

.alert-form .btn-solid {
  align-self: start;
  padding: 15px 36px;
  font-size: 13px;
  border: none;
}

/* SMS consent. Not in the original designs — US SMS rules require express
   written consent at the point of collection and a stated STOP path, so this
   copy is not optional and must not be removed to tidy the layout. */
.consent {
  margin: 0;
  max-width: 60ch;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--body-parch);
}
.consent a { color: var(--ink); text-decoration-color: var(--gold-dark); }

.form-note {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--terracotta);
}
.on-parchment .form-note { color: #8a3a20; }

/* Replaces the whole form once someone is on the list. */
.form-success {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  color: var(--green-confirm);
}

.freq-choice {
  display: flex;
  gap: 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--body-parch);
}
.freq-choice .radio { gap: 6px; }

[hidden] { display: none !important; }