/*
 * Y1 Member Network Onboarding
 * ASU / Unity-aligned visual treatment — v5
 *
 * ASU palette:
 * Maroon: #8C1D40
 * Gold: #FFC627
 * Black: #191919
 * Dark Gray: #484848
 * Medium Gray: #747474
 * Light Gray: #D0D0D0
 * Very Light Gray: #E8E8E8
 * Off White: #FAFAFA
 * White: #FFFFFF
 *
 * v5 changes (measured against apply.asu.edu, Aug 2026):
 * A. Required indicator is now a maroon asterisk AFTER the label text.
 *    Unity's dot (.uds-field-required) is emitted server-side, so it
 *    indented required questions past every other label AND never
 *    appeared at all on fields made required by #states. Drawing the
 *    marker from the .form-required class — which Drupal's states JS
 *    applies at runtime — covers both cases with one rule.
 * B. Type scale matched to Unity: 36 section / 24 sub-head /
 *    18 bold question label / 16 body / 14 helper. Leading: 1.2 on
 *    headings, 1.4 on labels and helper text, 1.5 on body.
 * C. Spacing ladder matched to Unity's tokens — 8 / 16 / 24 / 48 / 64:
 *      label -> helper .......... 32px (16 label margin + 16 helper margin)
 *      helper -> controls ....... 16px
 *      question -> question ..... 48px
 *      section rule ............. 64px above, 48px below
 *      card / callout padding ... 24px
 *    Mobile steps down one rung (48 / 32 / 16).
 * D. Helper text is 14px medium gray, capped at 640px.
 *
 * A note on !important: the theme puts Bootstrap utility classes
 * (.card, .mb-3, .card-header, .form-control) on webform wrappers, and
 * those utilities carry !important themselves. Every !important below
 * is there to win against a specific theme rule, not for convenience.
 *
 * v4 changes (selection controls matched to apply.asu.edu):
 * i.   Step-1 choice cards: uniform gray border with a circular check
 *      badge on the right; selected = 2px gold border + solid gold badge
 *      with dark check ("yellow way").
 * ii.  Yes/No-type radio groups are outlined button chips with the radio
 *      circle right of the label; selected = maroon fill, white label,
 *      white badge with maroon check ("maroon way").
 * iii. Grid/consent checkboxes: checked = gold fill with dark check.
 *
 * v3 changes (Scott's feedback + apply.asu.edu inspiration):
 * a. Step headings use ASU's gold-highlight treatment; the floating gold
 *    accent line is retired.
 * b. The progress tracker sits in its own off-white band.
 * c. Typographic hierarchy tightened (see v5 for current values).
 * d. Hairline dividers above each major form section.
 *
 * v2 changes (front-end review, Aug 2026):
 * 1. Progress tracker rebuilt against the progress-tracker library's real
 *    hooks (.progress-marker::before/::after).
 * 2. Button hierarchy: Next / Submit are ASU gold CTAs, Back is quiet gray.
 * 3. Fieldset legends lose the theme's card-header padding.
 * 4. Radio/checkbox option labels are 16px regular weight.
 * 5. Step-1 choice cards get enough left padding for the radio control.
 * 6. Checked radios/checkboxes get an ASU maroon fill with a white glyph.
 * 7. Text inputs, selects and textareas capped at the 700px measure.
 * 8. "Before you submit" gold top border restored.
 * 9. Review cards capped at 820px.
 * 10. Duplicate "Join the Y1 Member Network" H2 on step 1 hidden.
 */
/* =========================================================
   GLOBAL FORM TYPOGRAPHY
   ========================================================= */
.webform-submission-form {
  font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
  color: #191919;
  font-size: 16px;
  line-height: 1.5;
}
.webform-submission-form p,
.webform-submission-form li {
  font-size: 16px;
  line-height: 1.5;
}
.webform-submission-form a {
  color: #8C1D40;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.webform-submission-form a:hover,
.webform-submission-form a:focus {
  color: #8C1D40;
  text-decoration-thickness: 2px;
}
/* =========================================================
   PAGE HEADINGS
   Step headings use ASU's gold-highlight treatment (black text on a
   gold block, as on apply.asu.edu). The old floating gold accent line
   is retired — it read as an underline for the progress tracker.
   ========================================================= */
.y1-page-intro {
  margin: 0 0 32px;
}
.y1-page-intro h2 {
  display: inline;
  margin: 0;
  padding: 0.08em 0.35em 0.15em;
  background: #FFC627;
  color: #191919;
  font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.y1-page-intro p {
  max-width: 700px;
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.4;
}
/* Step 1 repeats the page H1 ("Join the Y1 Member Network") inside the
   intro. Hide the duplicate heading and let the opening line lead. */
[data-webform-key="section_entry_point"] .y1-page-intro h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  padding: 0;
  background: transparent;
}
[data-webform-key="section_entry_point"] .y1-page-intro p:first-of-type {
  margin-top: 0;
  font-size: 18px;
  line-height: 1.4;
}
/* =========================================================
   SECTION STRUCTURE
   Hairline dividers between major sections, on Unity's 64/48 rhythm.
   ========================================================= */
.y1-form-section {
  margin: 64px 0 0 !important;
  padding: 48px 0 0 !important;
  border: 0;
  border-top: 1px solid #E8E8E8;
  background: transparent;
}
.y1-section-heading {
  margin: 0 0 24px;
}
.y1-section-heading h3 {
  margin: 0;
  color: #191919;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.y1-section-heading h3::after {
  content: "";
  display: block;
  width: 64px;
  height: 6px;
  margin-top: 8px;
  background: #FFC627;
}
/* =========================================================
   QUESTION LABELS + HELPER TEXT
   ========================================================= */
/* Question labels: 18px bold, one clear step above body and helper text.
   !important needed — the theme pins legends/labels at 16px otherwise. */
.webform-submission-form .form-item > label,
.webform-submission-form legend {
  color: #191919;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 0 16px !important;
}
/* Strip the theme's card-header treatment from fieldset legends so
   question labels align with everything else on the page. */
.webform-submission-form fieldset legend,
.webform-submission-form legend.card-header {
  width: auto;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
/* Option labels (radio + checkbox choices) read as answers, not headings. */
.webform-submission-form .form-check label.option,
.webform-submission-form .form-check .form-check-label {
  color: #191919;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4;
}
/* Helper text: 14px gray, 32px below the label and 16px above the control.
   The top gap is PADDING, not margin, on purpose: a label and its helper
   are adjacent siblings whose margins collapse, but a legend and the
   fieldset wrapper's are not — using margin gave 16px on text fields and
   32px on radio groups. Padding is immune to collapsing, so both land on
   16px (label margin) + 16px (padding) = 32px. */
/* display: block is load-bearing — the theme wraps descriptions in an
   inline <small>, so max-width was silently doing nothing and helper text
   was running the full 1200px column. */
.webform-submission-form .description {
  display: block;
  max-width: 640px;
  margin: 0 0 16px !important;
  padding-top: 16px !important;
  color: #747474 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
/* Character counters under textareas */
.webform-submission-form .text-count-wrapper,
.webform-submission-form .counter,
.webform-submission-form .text-count-message {
  margin-top: 4px;
  color: #747474;
  font-size: 14px;
}
/* =========================================================
   REQUIRED INDICATOR — TRAILING ASTERISK
   Unity marks required fields with a red dot BEFORE the label, which
   indents required questions past every other label, and it is emitted
   server-side — so fields made required by #states (e.g. "What kind of
   member profile are you creating?") never receive one at all. Draw a
   maroon asterisk after the label text from the .form-required class,
   which Drupal's states JS applies at runtime, so conditional fields
   are covered by the same rule. font-size: 1em keeps the asterisk at
   whatever size its label is. The required / aria attributes are
   untouched — this is the visual marker only.
   Note both class names: Unity puts .js-form-required on text, select and
   checkbox labels (with the dot INSIDE the label) and .js-form-required
   .form-required on fieldset legend spans. Matching only .form-required
   hides the dot on text fields without replacing it.
   ========================================================= */
.webform-submission-form .uds-field-required {
  display: none !important;
}
.webform-submission-form .fieldset-legend.js-form-required::after,
.webform-submission-form .fieldset-legend.form-required::after,
.webform-submission-form label.js-form-required:not(.form-check-label)::after,
.webform-submission-form label.form-required:not(.form-check-label)::after {
  content: "*";
  margin-left: 6px;
  color: #8C1D40;
  font-size: 1em;
  font-weight: 700;
}
/* Single checkboxes (the consent statements on step 5 and the Review
   confirmation) are the exception: the theme already uses label::before
   for the box and label::after for the checkmark glyph, so the asterisk
   has nowhere to go on the label. Put it on the wrapper instead — the
   label is inline-block, so it lands right after the text, and the
   :not(.form-check-label) above keeps this rule from disturbing the
   checkmark. */
.webform-submission-form .form-check:has(> label.js-form-required)::after {
  content: "*";
  margin-left: 6px;
  color: #8C1D40;
  font-size: 16px;
  font-weight: 700;
}
/* Same treatment where the theme puts .form-required on the legend
   itself. Kept as its own rule so browsers without :has() still get
   the selectors above. */
.webform-submission-form legend.form-required:not(:has(.fieldset-legend.form-required))::after {
  content: "*";
  margin-left: 6px;
  color: #8C1D40;
  font-size: 1em;
  font-weight: 700;
}
/* =========================================================
   VERTICAL RHYTHM
   Single fields 32px apart; option groups (radios / checkboxes), which
   carry helper text and a block of controls, get 48px. The theme's
   .card.mb-3 utility sets its own margin with !important, so these
   have to as well. Order matters: each rule below overrides the one
   above it for a narrower set of elements.
   ========================================================= */
.webform-submission-form .form-item,
.webform-submission-form .form-check {
  margin-bottom: 32px !important;
}
.webform-submission-form .js-webform-type-radios,
.webform-submission-form .js-webform-type-checkboxes,
.webform-submission-form .js-form-type-radios,
.webform-submission-form .js-form-type-checkboxes {
  margin-bottom: 48px !important;
}
/* Options inside a group stay tight. */
.webform-submission-form .form-radios .form-item,
.webform-submission-form .form-radios .form-check,
.webform-submission-form .form-checkboxes .form-item,
.webform-submission-form .form-checkboxes .form-check {
  margin-bottom: 12px !important;
}
/* Standalone consent checkboxes sit closer than full questions. */
.webform-submission-form .form-type-checkbox {
  margin-bottom: 24px !important;
}
/* Markup blocks (page intros, the "Required:" note, the text inside
   "Before you submit") carry their own margins — the wrapper must not
   add a second gap. Specificity is deliberately higher than the rules
   above so this cannot be defeated by rule order; inside .card-body,
   where margins can't collapse, the doubled gap was ~64px of dead
   space. */
.webform-submission-form .form-item.js-form-type-webform-markup {
  margin-bottom: 0 !important;
}
/* =========================================================
   REMOVE GENERIC SURVEY / QUALTRICS BOXING
   ========================================================= */
.webform-submission-form fieldset.fieldgroup,
.y1-options-grid,
.y1-radio-group,
.y1-choice-cards {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.y1-options-grid fieldset,
.y1-radio-group fieldset,
.y1-choice-cards fieldset {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.webform-submission-form .fieldset-wrapper,
.y1-options-grid .fieldset-wrapper,
.y1-radio-group .fieldset-wrapper,
.y1-choice-cards .fieldset-wrapper {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
/* =========================================================
   STEP 1 SELECTION CARDS — apply.asu.edu style
   Uniform gray border, 24px padding, and a circular check badge
   pinned to the card's right edge. Selected: 2px gold border and a
   solid gold badge with a dark check ("the yellow way").
   ========================================================= */
.y1-choice-cards .form-radios {
  display: block;
  margin-top: 0 !important;
}
.y1-choice-cards .form-radios > .form-item,
.y1-choice-cards .form-radios > .js-form-item,
.y1-choice-cards .form-type-radio {
  position: relative;
  min-height: 0 !important;
  margin: 0 0 16px !important;
  padding: 24px 76px 24px 24px !important;
  border: 1px solid #747474;
  background: #FFFFFF;
  box-shadow: none !important;
}
.y1-choice-cards .form-radios > .form-item:last-child,
.y1-choice-cards .form-radios > .js-form-item:last-child {
  margin-bottom: 0 !important;
}
.y1-choice-cards .form-item:hover {
  background: #FAFAFA;
}
/* Keyboard-only focus ring (mouse clicks don't flash the outline) */
.y1-choice-cards .form-item:has(input:focus-visible) {
  outline: 3px solid #191919;
  outline-offset: 2px;
}
/* Selected card: gold border (padding compensates the extra 1px) */
.y1-choice-cards .form-item:has(input:checked) {
  border: 2px solid #FFC627;
  padding: 23px 75px 23px 23px !important;
  background: #FFFFFF;
}
/* Whole card is clickable: the (invisible) radio stretches over it */
.y1-choice-cards .form-check input[type="radio"] {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  cursor: pointer;
  z-index: 1;
}
.y1-choice-cards label,
.y1-choice-cards .form-check label.option {
  position: static !important;
  margin: 0 !important;
  color: #191919;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  cursor: pointer;
}
/* Check badge: circle pinned to the card's right, vertically centered */
.y1-choice-cards .form-check label::before {
  position: absolute !important;
  left: auto !important;
  right: 24px !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%);
  width: 30px !important;
  height: 30px !important;
  border: 2px solid #D0D0D0 !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
}
/* Check glyph inside the badge — light gray until selected */
.y1-choice-cards .form-check label::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: auto !important;
  right: 31px !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23BFBFBF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5L13.5 4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
}
/* Card body copy — this is option text, not question helper text, so it
   keeps its own tighter spacing. */
.y1-choice-cards .form-radios .description {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  color: #747474 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
.y1-member-type-cards {
  margin-top: 48px;
}
/* =========================================================
   STANDARD RADIO GROUPS — Yes/No button chips (apply.asu.edu)
   Outlined chips with the radio circle to the right of the label.
   Selected state ("the maroon way") is defined under CHECKED STATES.
   ========================================================= */
.y1-radio-group .form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0 !important;
}
.y1-radio-group .form-radios > .form-item,
.y1-radio-group .form-type-radio {
  position: relative;
  margin: 0 !important;
  padding: 14px 56px 14px 20px !important;
  border: 1px solid #747474;
  background: #FFFFFF;
  box-shadow: none !important;
}
.y1-radio-group .form-item:hover {
  background: #FAFAFA;
}
.y1-radio-group .form-item:has(input:focus-visible) {
  outline: 3px solid #191919;
  outline-offset: 2px;
}
.y1-radio-group label,
.y1-radio-group .form-check label.option {
  position: static !important;
  margin: 0 !important;
  cursor: pointer;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.y1-radio-group .form-check label::before {
  position: absolute !important;
  left: auto !important;
  right: 16px !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%);
  width: 24px !important;
  height: 24px !important;
  border: 2px solid #747474 !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
}
.y1-radio-group .form-check label::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: auto !important;
  right: 20px !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
}
/* Whole chip is clickable: the (invisible) radio stretches over it */
.y1-radio-group .form-check input[type="radio"] {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  cursor: pointer;
  z-index: 1;
}
/* =========================================================
   CHECKBOX LISTS
   ========================================================= */
.y1-options-grid {
  margin-top: 0 !important;
}
.webform-options-display-two-columns {
  column-count: 2;
  column-gap: 32px;
}
.webform-options-display-two-columns .form-item {
  break-inside: avoid;
  margin-bottom: 12px !important;
}
/* =========================================================
   CHECKED STATES — clean, per apply.asu.edu
   The theme draws the control on label::before and the glyph on
   label::after. Order matters here: generic rules first, then the
   chip (maroon way) and card (yellow way) overrides.
   ========================================================= */
/* Generic checked radio: white circle, maroon ring, maroon dot */
.webform-submission-form .form-check input[type="radio"]:checked + label::before {
  background: #FFFFFF !important;
  border: 2px solid #8C1D40 !important;
}
.webform-submission-form .form-check input[type="radio"]:checked + label::after {
  background: #8C1D40 !important;
  border-radius: 50%;
}
/* Generic checked checkbox: gold fill, dark check */
.webform-submission-form .form-check input[type="checkbox"]:checked + label::before {
  background: #FFC627 !important;
  border-color: #FFC627 !important;
}
.webform-submission-form .form-check input[type="checkbox"]:checked + label::after {
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23191919' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5L13.5 4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
}
/* Yes/No chips — selected: maroon fill, white label, white badge with
   a maroon check (the reference form's selected Yes/No treatment) */
.y1-radio-group .form-item:has(input:checked) {
  border-color: #8C1D40;
  background: #8C1D40 !important;
}
.y1-radio-group .form-item:has(input:checked) label {
  color: #FFFFFF !important;
}
.y1-radio-group .form-check input[type="radio"]:checked + label::before {
  background: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
}
.y1-radio-group .form-check input[type="radio"]:checked + label::after {
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238C1D40' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5L13.5 4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
  border-radius: 0 !important;
}
/* Step-1 cards — selected: solid gold badge with a dark check */
.y1-choice-cards .form-check input[type="radio"]:checked + label::before {
  background: #FFC627 !important;
  border: 2px solid #FFC627 !important;
}
.y1-choice-cards .form-check input[type="radio"]:checked + label::after {
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23191919' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5L13.5 4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  border-radius: 0 !important;
}
/* =========================================================
   WHY JOIN CALLOUT
   ========================================================= */
.y1-callout {
  max-width: 700px;
  margin: 32px 0;
  padding: 24px;
  border-top: 8px solid #FFC627;
  background: #FAFAFA;
}
.y1-callout h3 {
  margin: 0 0 12px;
  color: #191919;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.y1-callout p {
  margin: 0 0 8px;
}
.y1-callout ul {
  margin-bottom: 0;
}
/* =========================================================
   PUBLIC / PRIVACY NOTICES
   ========================================================= */
.y1-public-notice,
.y1-private-information,
.y1-review-private {
  max-width: 700px;
  margin: 32px 0;
  padding: 24px;
  border-left: 8px solid #8C1D40;
  background: #FAFAFA;
}
.y1-public-notice p,
.y1-private-information p,
.y1-review-private p {
  margin-top: 0;
}
.y1-public-notice p:last-child,
.y1-private-information p:last-child,
.y1-review-private p:last-child {
  margin-bottom: 0;
}
/* =========================================================
   BEFORE YOU SUBMIT DETAILS
   ========================================================= */
/* !important needed: the theme's .card border otherwise wins. */
.y1-before-submit {
  max-width: 700px;
  margin: 32px 0;
  border: 1px solid #D0D0D0 !important;
  border-top: 8px solid #FFC627 !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
.y1-before-submit > summary {
  padding: 16px 24px;
  border: 0 !important;
  background: transparent !important;
  color: #191919;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.y1-before-submit > summary:hover {
  background: #FAFAFA !important;
}
.y1-before-submit .details-wrapper {
  padding: 8px 24px 24px;
}
/* =========================================================
   REQUIRED NOTE — quiet housekeeping text, well below question level
   ========================================================= */
.y1-required-note {
  max-width: 700px;
  margin: 0 0 24px;
  padding: 0;
  color: #747474;
  font-size: 14px;
}
.y1-required-note strong {
  color: #484848;
}
/* =========================================================
   TEXT INPUTS
   ========================================================= */
.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="url"],
.webform-submission-form select,
.webform-submission-form textarea {
  width: 100%;
  max-width: 700px;
  font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
  font-size: 16px;
}
.webform-submission-form textarea {
  min-height: 144px;
}
/* =========================================================
   FILE UPLOADS
   The bare "Choose File / No file chosen" control reads as unstyled
   browser chrome, so the whole control sits in a dashed upload panel.
   NOTE: also set '#file_help': none on the two image_file elements
   (profile_photo, organization_logo). Without it Drupal appends its own
   "One file only. / 1 MB limit. / Allowed types: …" lines to the
   description, joined by <br> tags inside the same element — CSS can't
   reformat those onto one line, and hiding the breaks runs the sentences
   together. With '#file_help': none the YAML description is the only
   text, so state the constraints there.
   ========================================================= */
.webform-submission-form .form-managed-file {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 700px;
  padding: 20px 24px;
  border: 1px dashed #747474;
  background: #FAFAFA;
}
.webform-submission-form .form-file {
  font-size: 14px !important;
  color: #484848;
}
/* File-upload button styled as a quiet Unity pill */
.webform-submission-form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 20px;
  border: 0;
  border-radius: 400px;
  background: #E8E8E8;
  color: #191919;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.webform-submission-form input[type="file"]::file-selector-button:hover {
  background: #D0D0D0;
}
/* =========================================================
   REVIEW — DIRECTORY-LIKE PRESENTATION
   ========================================================= */
.y1-review-card {
  max-width: 820px;
  margin: 0 0 24px;
  padding: 24px;
  border: 1px solid #D0D0D0;
  border-top: 8px solid #FFC627;
  background: #FFFFFF;
  box-shadow: none !important;
}
.y1-review-card--submission {
  border-top-color: #8C1D40;
  background: #FAFAFA;
}
.y1-review-card h3 {
  margin: 0 0 16px !important;
  color: #191919;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.y1-review-card p {
  max-width: 700px;
  margin-bottom: 8px;
}
/* The entry name sits a step below the card heading. !important on
   line-height too — the theme's .webform-submission-form p rule (1.5)
   otherwise out-specifies this one and leaves the name over-leaded. */
.y1-review-name {
  margin: 0 0 12px !important;
  color: #191919;
  font-size: 20px !important;
  font-weight: 700;
  line-height: 1.3 !important;
}
/* A label introducing a chip group binds down to its chips: more air
   above it than below. */
.y1-review-card p:has(+ .y1-tag-list) {
  margin-top: 20px !important;
  margin-bottom: 8px !important;
}
.y1-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px;
  padding: 0;
  list-style: none;
}
.y1-tag-list:last-child {
  margin-bottom: 0;
}
.y1-tag-list li {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #D0D0D0;
  background: #E8E8E8;
  color: #191919;
  font-size: 16px;
  line-height: 1.25;
}
/* =========================================================
   PROGRESS TRACKER — SIMPLE / QUIET
   Styled against the progress-tracker library's real hooks:
   the circle + number live on .progress-marker::before and the
   connector line on .progress-marker::after.
   ========================================================= */
/* The tracker sits in its own quiet band (off-white, hairline top and
   bottom) so it reads as a distinct progress zone under the page title
   instead of floating between the title and the intro copy. */
.webform-progress-tracker {
  margin: 12px 0 40px !important;
  padding: 24px 16px 20px !important;
  border: 0 !important;
  border-top: 1px solid #E8E8E8 !important;
  border-bottom: 1px solid #E8E8E8 !important;
  background: #FAFAFA !important;
  box-shadow: none !important;
}
.webform-progress-tracker .progress-step,
.webform-progress-tracker .progress-step.is-active,
.webform-progress-tracker .progress-step.is-complete {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* The marker element spans its step column; the drawn circle is ::before.
   The state-specific selectors are included so no element-level marker
   styling (from the theme or older custom CSS) can reintroduce fills. */
.webform-progress-tracker .progress-marker,
.webform-progress-tracker .progress-step.is-active .progress-marker,
.webform-progress-tracker .progress-step.is-complete .progress-marker {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: normal !important;
}
/* Upcoming step: white circle, gray ring */
.webform-progress-tracker .progress-marker::before {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  width: 32px !important;
  height: 32px !important;
  margin: 0 auto !important;
  border: 2px solid #747474 !important;
  border-radius: 50%;
  background: #FFFFFF !important;
  color: #484848 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  position: relative;
  z-index: 2;
}
/* Connector line: runs from this circle's center to the next one's */
.webform-progress-tracker .progress-marker::after {
  top: 15px !important;
  left: calc(50% + 20px) !important;
  right: calc(-50% + 20px) !important;
  width: auto !important;
  height: 2px !important;
  border: 0 !important;
  background: #D0D0D0 !important;
  z-index: 1;
}
.webform-progress-tracker .progress-step:last-child .progress-marker::after {
  display: none !important;
}
/* Completed step: white circle, maroon ring + number, maroon trail */
.webform-progress-tracker .progress-step.is-complete .progress-marker::before {
  border-color: #8C1D40 !important;
  background: #FFFFFF !important;
  color: #8C1D40 !important;
}
.webform-progress-tracker .progress-step.is-complete .progress-marker::after {
  background: #8C1D40 !important;
}
/* Active step: solid maroon circle, white number */
.webform-progress-tracker .progress-step.is-active .progress-marker::before {
  border-color: #8C1D40 !important;
  background: #8C1D40 !important;
  color: #FFFFFF !important;
}
.webform-progress-tracker .progress-title,
.webform-progress-tracker .progress-text {
  margin-top: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #484848 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  text-align: center;
}
.webform-progress-tracker .progress-step.is-active .progress-title,
.webform-progress-tracker .progress-step.is-active .progress-text {
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  color: #191919 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
/* =========================================================
   FORM ACTION AREA — GOLD CTA, QUIET BACK
   ========================================================= */
.webform-submission-form .webform-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid #E8E8E8;
}
.webform-submission-form .webform-actions .button,
.webform-submission-form .webform-actions .btn {
  box-shadow: none !important;
}
/* Primary actions (Next / Submit for review): ASU gold CTA */
.webform-submission-form .webform-button--next,
.webform-submission-form .webform-button--submit {
  border: 2px solid #FFC627 !important;
  background: #FFC627 !important;
  color: #191919 !important;
}
.webform-submission-form .webform-button--next:hover,
.webform-submission-form .webform-button--next:focus,
.webform-submission-form .webform-button--submit:hover,
.webform-submission-form .webform-button--submit:focus {
  border-color: #E8B517 !important;
  background: #E8B517 !important;
  color: #191919 !important;
}
/* Secondary action (Back): quiet gray */
.webform-submission-form .webform-button--previous {
  border: 2px solid #E8E8E8 !important;
  background: #E8E8E8 !important;
  color: #191919 !important;
}
.webform-submission-form .webform-button--previous:hover,
.webform-submission-form .webform-button--previous:focus {
  border-color: #D0D0D0 !important;
  background: #D0D0D0 !important;
  color: #191919 !important;
}
/* =========================================================
   ACCESSIBILITY / FOCUS
   ========================================================= */
.webform-submission-form input:focus-visible,
.webform-submission-form select:focus-visible,
.webform-submission-form textarea:focus-visible,
.webform-submission-form button:focus-visible,
.webform-submission-form a:focus-visible {
  outline: 3px solid #191919;
  outline-offset: 2px;
}
/* =========================================================
   MOBILE — one rung down the same ladder (48 / 32 / 16)
   ========================================================= */
@media (max-width: 767px) {
  .y1-page-intro {
    margin-bottom: 24px;
  }
  .y1-page-intro h2 {
    font-size: 26px;
  }
  .y1-page-intro p,
  [data-webform-key="section_entry_point"] .y1-page-intro p:first-of-type {
    font-size: 17px;
  }
  /* Question labels stay at 18px on mobile — the desktop size already
     sits right for small screens, so there is no override here. */
  .y1-section-heading h3,
  .y1-review-card h3 {
    font-size: 22px;
  }
  .y1-form-section {
    margin: 48px 0 0 !important;
    padding-top: 32px !important;
  }
  /* Question gaps (32 / 48) carry over from desktop unchanged. */
  .webform-submission-form .form-radios .form-item,
  .webform-submission-form .form-radios .form-check,
  .webform-submission-form .form-checkboxes .form-item,
  .webform-submission-form .form-checkboxes .form-check {
    margin-bottom: 12px !important;
  }
  .webform-options-display-two-columns {
    column-count: 1;
  }
  .y1-choice-cards .form-radios > .form-item,
  .y1-choice-cards .form-radios > .js-form-item,
  .y1-choice-cards .form-type-radio {
    margin-bottom: 12px !important;
    padding: 16px 60px 16px 16px !important;
  }
  .y1-choice-cards .form-item:has(input:checked) {
    padding: 15px 59px 15px 15px !important;
  }
  .y1-choice-cards .form-check label::before {
    right: 16px !important;
    width: 26px !important;
    height: 26px !important;
  }
  .y1-choice-cards .form-check label::after {
    right: 21px !important;
    background-size: 13px 13px !important;
  }
  .y1-choice-cards label {
    font-size: 17px !important;
  }
  .y1-member-type-cards {
    margin-top: 32px;
  }
  .y1-review-card,
  .y1-callout,
  .y1-public-notice,
  .y1-private-information,
  .y1-review-private {
    padding: 16px;
  }
  .webform-submission-form .form-managed-file {
    padding: 16px;
    gap: 12px;
  }
  .webform-progress-tracker {
    margin: 8px 0 28px !important;
    padding: 16px 8px 14px !important;
  }
  .webform-progress-tracker .progress-marker::before {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
  }
  .webform-progress-tracker .progress-marker::after {
    top: 12px !important;
    left: calc(50% + 16px) !important;
    right: calc(-50% + 16px) !important;
  }
  .webform-progress-tracker .progress-title,
  .webform-progress-tracker .progress-text {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  .webform-submission-form .webform-actions {
    margin-top: 48px;
    padding-top: 32px;
  }
}

/* =========================================================
   CONFIRMATION — CONFIRMATION PAGE PRESENTATION
   ========================================================= */
.y1-confirmation {
  max-width: 748px;        /* 700px measure + 24px gutters each side */
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.y1-confirmation p {
  max-width: 700px;
}
@media (max-width: 575.98px) {
  .y1-confirmation { padding-inline: 1rem; }
}