/* =========================================================================
   NGF — Instrument Request form (Webform: instrument_request).
   Scoped to .webform-submission-instrument-request-form, which Webform emits
   on the form element itself, so no extra class needs adding in a form_alter.
   Attached from ngf_form_alter() in ngf.theme.

   Targets real Webform markup only:
     .webform-type-fieldset        our section wrappers (radios emit
                                   .webform-type-radios instead, so this
                                   selector does not catch them)
     .fieldset-wrapper             the inner div a fieldset renders
     .webform-element-description  field help text (set to display *before*
                                   the input sitewide, see the module's
                                   hook_install)
     .webform-multiple-table       the repeatable composite tables
     .progress-tracker             the wizard step indicator
   ========================================================================= */

/* NOTE ON SELECTORS: element ids are NOT stable here — Drupal appends a random
   suffix (edit-sec-billing--9bO8zCUNxm4) whenever an id could collide, which
   happens on every AJAX rebuild of this wizard. Target the stable
   [data-drupal-selector="..."] attribute instead of #id for anything that must
   survive a page transition. */

.webform-submission-instrument-request-form {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--ngf-sp-6) var(--ngf-sp-16);
  font-family: var(--ngf-font-body);
  color: var(--ngf-fg-1);
}

/* Same page-title gap as the contact forms (see ngf-contact-form__title in
   contact-form.css) — nothing in page.html.twig surfaces a heading for this
   route, so ngf_form_alter() adds one directly on the form. */
.ngf-instrument-request__title {
  font-size: var(--ngf-fs-3xl);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--ngf-sp-10) var(--ngf-sp-6) 0 0;
}

/* -------------------------------------------------------------------------
   Wizard step indicator
   ------------------------------------------------------------------------- */
.webform-submission-instrument-request-form .webform-progress {
  margin: var(--ngf-sp-8) 0 var(--ngf-sp-10);
}
.webform-submission-instrument-request-form .progress-tracker {
  display: flex;
  gap: var(--ngf-sp-2);
  padding: 0;
  margin: 0;
  list-style: none;
}
.webform-submission-instrument-request-form .progress-step {
  flex: 1;
  border-top: 3px solid var(--ngf-border);
  padding-top: var(--ngf-sp-3);
  text-align: left;
}
.webform-submission-instrument-request-form .progress-step.is-complete {
  border-top-color: var(--ngf-success);
}
.webform-submission-instrument-request-form .progress-step.is-active {
  border-top-color: var(--ngf-seismic-500);
}
/* The tracker library ships a round numbered marker; the NGF treatment is a
   coloured rule above the label instead, so the marker is dropped rather
   than restyled. */
.webform-submission-instrument-request-form .progress-marker {
  display: none;
}
.webform-submission-instrument-request-form .progress-text {
  display: block;
}
.webform-submission-instrument-request-form .progress-step-label {
  font-size: var(--ngf-fs-xs);
  font-weight: var(--ngf-w-semi);
  letter-spacing: var(--ngf-tr-wide);
  text-transform: uppercase;
  color: var(--ngf-fg-3);
  margin-bottom: var(--ngf-sp-1);
}
.webform-submission-instrument-request-form .progress-step.is-active .progress-step-label {
  color: var(--ngf-seismic-500);
}
.webform-submission-instrument-request-form .progress-title {
  font-size: var(--ngf-fs-sm);
  font-weight: var(--ngf-w-semi);
  color: var(--ngf-fg-3);
  letter-spacing: var(--ngf-tr-snug);
}
.webform-submission-instrument-request-form .progress-step.is-complete .progress-title {
  color: var(--ngf-fg-2);
}
.webform-submission-instrument-request-form .progress-step.is-active .progress-title {
  color: var(--ngf-seismic-500);
}
/* Per-step description — see the theme's webform-progress-tracker override
   and ngf_instrument_request_preprocess_webform_progress_tracker(). */
.webform-submission-instrument-request-form .progress-description {
  font-size: var(--ngf-fs-xs);
  line-height: 1.35;
  color: var(--ngf-fg-3);
  margin-top: var(--ngf-sp-1);
}
@media (max-width: 640px) {
  .webform-submission-instrument-request-form .progress-description {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   "Before you start" panel
   The seismic left border is what makes it read as a preamble rather than
   another form section — it is the one element on the page that is telling
   you something instead of asking.
   ------------------------------------------------------------------------- */
.webform-submission-instrument-request-form .ngf-ir-prep {
  background: var(--ngf-bg-surface);
  border: 1px solid var(--ngf-border-strong);
  border-left: 4px solid var(--ngf-seismic-500);
  border-radius: var(--ngf-r-md);
  padding: var(--ngf-sp-6);
  margin-bottom: var(--ngf-sp-8);
}
.webform-submission-instrument-request-form .ngf-ir-prep h2 {
  font-size: var(--ngf-fs-md);
  font-weight: var(--ngf-w-semi);
  letter-spacing: var(--ngf-tr-snug);
  margin: 0 0 var(--ngf-sp-2);
  color: var(--ngf-fg-1);
}
.webform-submission-instrument-request-form .ngf-ir-prep p {
  font-size: var(--ngf-fs-sm);
  color: var(--ngf-fg-2);
  margin: 0 0 var(--ngf-sp-4);
}
.webform-submission-instrument-request-form .ngf-ir-prep ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ngf-sp-2) var(--ngf-sp-6);
  font-size: var(--ngf-fs-sm);
  color: var(--ngf-fg-2);
}
@media (max-width: 640px) {
  .webform-submission-instrument-request-form .ngf-ir-prep ul {
    grid-template-columns: 1fr;
  }
}
.webform-submission-instrument-request-form .ngf-ir-prep li {
  position: relative;
  padding-left: 22px;
}
.webform-submission-instrument-request-form .ngf-ir-prep li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ngf-seismic-100);
  border: 1px solid var(--ngf-seismic-500);
}
/* Needs the p to out-specify .ngf-ir-prep p above, which would otherwise
   flatten the top margin and butt this note against the checklist. */
.webform-submission-instrument-request-form .ngf-ir-prep p.ngf-ir-prep__note {
  margin: var(--ngf-sp-4) 0;
}

@media (max-width: 640px) {
  /* Three stacked rows of step labels costs more than it explains on a small
     screen — collapse to just the current step. */
  .webform-submission-instrument-request-form .progress-step {
    display: none;
  }
  .webform-submission-instrument-request-form .progress-step.is-active {
    display: block;
    flex: 1 1 100%;
  }
}

/* -------------------------------------------------------------------------
   Section cards
   ------------------------------------------------------------------------- */
.webform-submission-instrument-request-form .webform-type-fieldset {
  background: var(--ngf-bg-surface);
  border: 1px solid var(--ngf-border);
  border-radius: var(--ngf-r-md);
  box-shadow: var(--ngf-shadow-1);
  padding: var(--ngf-sp-6);
  margin: 0 0 var(--ngf-sp-6);
}
/* A <legend> is positioned in the fieldset's border box by default, which
   pushes it outside a padded card. Floating it forces it into normal flow so
   it sits inside the card like a heading; the ::after clearfix on the wrapper
   below stops the float from collapsing the card's height. */
.webform-submission-instrument-request-form .webform-type-fieldset > legend {
  float: left;
  width: 100%;
  font-size: var(--ngf-fs-lg);
  font-weight: var(--ngf-w-semi);
  letter-spacing: var(--ngf-tr-snug);
  color: var(--ngf-fg-1);
  padding: 0 0 var(--ngf-sp-3);
  margin: 0 0 var(--ngf-sp-4);
  border-bottom: 1px solid var(--ngf-border);
}

/* The floated legend must not displace the content below it — without an
   explicit clear, a grid or flex .fieldset-wrapper shrinks to fit alongside
   the float instead of starting on the next line. */
.webform-submission-instrument-request-form .webform-type-fieldset > .fieldset-wrapper {
  clear: both;
}
.webform-submission-instrument-request-form .webform-type-fieldset > .fieldset-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

/* Nested fieldsets (radios, checkboxes, composites) must not inherit the
   card treatment — they are fields inside a card, not cards. */
.webform-submission-instrument-request-form .webform-type-fieldset .fieldgroup,
.webform-submission-instrument-request-form .webform-type-radios,
.webform-submission-instrument-request-form .webform-type-checkboxes {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 var(--ngf-sp-5);
}
.webform-submission-instrument-request-form .webform-type-radios > legend,
.webform-submission-instrument-request-form .webform-type-checkboxes > legend {
  font-size: var(--ngf-fs-sm);
  font-weight: var(--ngf-w-semi);
  color: var(--ngf-fg-2);
  border-bottom: 0;
  padding: 0;
  margin: 0 0 var(--ngf-sp-2);
}

/* Instrument phases (NGW-142 Task 4): unlike other nested fieldsets, a phase
   IS meant to read as its own repeatable unit — one per date range — so it
   gets a card treatment too, just a step lighter than the outer section
   card it sits inside. Header band (phase label + its two dates + its own
   remove button) matches the mockup's grey band above the instruments
   table, rather than a plain fieldset legend. */
.webform-submission-instrument-request-form .ngf-instrument-phase {
  border: 1px solid var(--ngf-border);
  border-radius: var(--ngf-r-sm);
  overflow: hidden;
  margin: 0 0 var(--ngf-sp-5);
}
.webform-submission-instrument-request-form .ngf-instrument-phase__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ngf-sp-4);
  background: var(--ngf-bg-subtle);
  border-bottom: 1px solid var(--ngf-border);
  padding: var(--ngf-sp-3) var(--ngf-sp-4);
}
.webform-submission-instrument-request-form .ngf-instrument-phase__label {
  font-size: var(--ngf-fs-xs);
  font-weight: var(--ngf-w-semi);
  letter-spacing: var(--ngf-tr-wide);
  text-transform: uppercase;
  color: var(--ngf-fg-2);
}
/* The generic ".form-item" rule (form + form-item = 2 classes) otherwise
   beats these on specificity and wins the margin-left back to 0, since
   every date wrapper carries both the .form-item and .ngf-instrument-
   phase__date classes at once — qualify with the head as well (3 classes)
   so this actually wins. */
.webform-submission-instrument-request-form .ngf-instrument-phase__head .ngf-instrument-phase__date {
  display: flex;
  align-items: center;
  gap: var(--ngf-sp-2);
  margin: 0 0 0 auto;
}
.webform-submission-instrument-request-form .ngf-instrument-phase__head .ngf-instrument-phase__date:nth-of-type(2) {
  margin-left: 0;
}
.webform-submission-instrument-request-form .ngf-instrument-phase__date label {
  display: inline;
  margin: 0;
  font-size: var(--ngf-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ngf-tr-wide);
  color: var(--ngf-fg-3);
  white-space: nowrap;
}
.webform-submission-instrument-request-form .ngf-instrument-phase__date input {
  width: 150px;
}
.webform-submission-instrument-request-form .ngf-instrument-phase__remove {
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid var(--ngf-border-strong);
  border-radius: var(--ngf-r-sm);
  background: var(--ngf-bg-surface);
  color: var(--ngf-fg-2);
  font-size: 0;
  cursor: pointer;
}
.webform-submission-instrument-request-form .ngf-instrument-phase__remove::before {
  content: "×";
  font-size: var(--ngf-fs-lg);
}
.webform-submission-instrument-request-form .ngf-instrument-phase__remove:hover {
  border-color: var(--ngf-danger);
  color: var(--ngf-danger);
}
.webform-submission-instrument-request-form .ngf-instrument-phase .webform-multiple-table {
  margin: 0;
}
/* Full-bleed against the phase card's own border, with its own border
   removed, reads as one continuous strip (the phase header band, then this
   table, in series) rather than a table nested inside the phase card. Inset
   it and let it keep its own border/radius from the general
   .webform-multiple-table table rule instead. */
.webform-submission-instrument-request-form .ngf-instrument-phase .webform-multiple-table table {
  width: calc(100% - var(--ngf-sp-12));
  margin: var(--ngf-sp-6) auto 0;
}
.webform-submission-instrument-request-form .ngf-instrument-phase__leadtime-warning,
.webform-submission-instrument-request-form .ngf-instrument-phase .webform-multiple-add {
  /* Same left/right inset as the table above, so the two align. */
  margin: var(--ngf-sp-4) var(--ngf-sp-6);
}
/* .ngf-instrument-phases__add's own look (green outline, half width,
   centred, uppercase) lives with the other "+ Add another ___" buttons —
   see the shared ".webform-multiple-add .form-submit,
   .ngf-instrument-phases__add" rule further down. */

/* -------------------------------------------------------------------------
   Fields
   ------------------------------------------------------------------------- */
.webform-submission-instrument-request-form .form-item {
  margin: 0 0 var(--ngf-sp-5);
}
.webform-submission-instrument-request-form label {
  display: block;
  font-size: var(--ngf-fs-sm);
  font-weight: var(--ngf-w-semi);
  color: var(--ngf-fg-2);
  margin-bottom: var(--ngf-sp-2);
}
.webform-submission-instrument-request-form label.form-required::after {
  content: " *";
  color: var(--ngf-danger);
}

/* Help text sits between label and input (see the module's hook_install,
   which sets default_description_display: before sitewide). Reading order is
   label → what to type → the input; text under the input arrives after the
   user has already started or already finished. */
.webform-submission-instrument-request-form .webform-element-description {
  font-size: var(--ngf-fs-sm);
  line-height: 1.45;
  color: var(--ngf-fg-3);
  margin: 0 0 var(--ngf-sp-2);
}

.webform-submission-instrument-request-form input[type="text"],
.webform-submission-instrument-request-form input[type="email"],
.webform-submission-instrument-request-form input[type="tel"],
.webform-submission-instrument-request-form input[type="number"],
.webform-submission-instrument-request-form input[type="date"],
.webform-submission-instrument-request-form select,
.webform-submission-instrument-request-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--ngf-sp-3) var(--ngf-sp-4);
  border: 1px solid var(--ngf-border-strong);
  border-radius: var(--ngf-r-sm);
  background: var(--ngf-bg-surface);
  font-family: var(--ngf-font-body);
  font-size: var(--ngf-fs-base);
  color: var(--ngf-fg-1);
  transition: border-color var(--ngf-dur-base) var(--ngf-ease-out),
              box-shadow var(--ngf-dur-base) var(--ngf-ease-out);
}
.webform-submission-instrument-request-form input[type="number"],
.webform-submission-instrument-request-form input[type="date"] {
  font-family: var(--ngf-font-mono);
  font-variant-numeric: tabular-nums;
}
.webform-submission-instrument-request-form textarea {
  min-height: 120px;
  resize: vertical;
}
.webform-submission-instrument-request-form input:focus,
.webform-submission-instrument-request-form select:focus,
.webform-submission-instrument-request-form textarea:focus {
  outline: none;
  border-color: var(--ngf-seismic-400);
  box-shadow: 0 0 0 3px var(--ngf-seismic-100);
}

/* Two-up on desktop for the short paired fields, single column under 640px. */
@media (min-width: 641px) {
  .webform-submission-instrument-request-form [data-drupal-selector="edit-sec-your-info"] .fieldset-wrapper,
  .webform-submission-instrument-request-form [data-drupal-selector="edit-sec-billing"] .fieldset-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--ngf-sp-5);
  }
  /* Elements that should still span the full width of that grid. */
  .webform-submission-instrument-request-form [data-drupal-selector="edit-sec-your-info"] > .fieldset-wrapper > .webform-type-webform-markup,
  .webform-submission-instrument-request-form [data-drupal-selector="edit-sec-your-info"] > .fieldset-wrapper > .webform-type-select,
  .webform-submission-instrument-request-form [data-drupal-selector="edit-sec-billing"] > .fieldset-wrapper > .webform-type-webform-markup,
  .webform-submission-instrument-request-form [data-drupal-selector="edit-sec-billing"] > .fieldset-wrapper > .webform-type-checkbox,
  .webform-submission-instrument-request-form [data-drupal-selector="edit-sec-billing"] > .fieldset-wrapper > .webform-type-textarea {
    grid-column: 1 / -1;
  }
}

/* Confirmation shown in place of the billing fields while "same as above" is
   ticked — hiding inputs without saying what will be used instead just leaves
   a gap where a question used to be. */
.webform-submission-instrument-request-form .ngf-ir-billing-note {
  font-size: var(--ngf-fs-sm);
  color: var(--ngf-fg-2);
  background: var(--ngf-bg-subtle);
  border-left: 3px solid var(--ngf-success);
  border-radius: var(--ngf-r-sm);
  padding: var(--ngf-sp-3) var(--ngf-sp-4);
  margin: var(--ngf-sp-3) 0 0;
}

/* "Your role on this project" (submitter_role): a real first row inside the
   Collaborators table isn't possible — Webform's composite-table renderer
   builds every row from one schema, with no hook for a locked,
   differently-shaped row (see the conversation with the user on this) — so
   rather than fake a merged look, it's just its own ordinary question,
   above the table like anything else on the page. */

/* -------------------------------------------------------------------------
   Checkboxes — rounded, matching the billing "same as above" affordance
   ------------------------------------------------------------------------- */
.webform-submission-instrument-request-form .webform-type-checkbox,
.webform-submission-instrument-request-form .form-type-checkbox {
  display: flex;
  align-items: center;
  gap: var(--ngf-sp-3);
}
.webform-submission-instrument-request-form .webform-type-checkbox label,
.webform-submission-instrument-request-form .form-type-checkbox label,
.webform-submission-instrument-request-form .form-type-checkbox--webform-checkbox label {
  margin-bottom: 0;
  font-weight: var(--ngf-w-regular);
  color: var(--ngf-fg-1);
  font-size: var(--ngf-fs-base);
}
.webform-submission-instrument-request-form input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 5px;
  accent-color: var(--ngf-seismic-500);
}
.webform-submission-instrument-request-form input[type="radio"] {
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: var(--ngf-seismic-500);
}

/* Request type: the two options are a fork in the road, not a list — give
   them enough presence to read as two choosable cards side by side. Scoped to
   this one element rather than all radios, since the other radio groups on
   the form are ordinary lists. */
@media (min-width: 641px) {
  .webform-submission-instrument-request-form [data-drupal-selector="edit-request-type"] .webform-options-display-one-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ngf-sp-3);
  }
}
.webform-submission-instrument-request-form [data-drupal-selector="edit-request-type"] .form-type-radio {
  margin: 0;
  padding: var(--ngf-sp-4) var(--ngf-sp-5);
  background: var(--ngf-bg-surface);
  border: 1px solid var(--ngf-border-strong);
  border-radius: var(--ngf-r-md);
  cursor: pointer;
  transition: border-color var(--ngf-dur-base) var(--ngf-ease-out),
              box-shadow var(--ngf-dur-base) var(--ngf-ease-out);
}
.webform-submission-instrument-request-form [data-drupal-selector="edit-request-type"] .form-type-radio:hover {
  border-color: var(--ngf-seismic-300);
}
/* :has() lets the whole card show the selected state, not just the dot. */
.webform-submission-instrument-request-form [data-drupal-selector="edit-request-type"] .form-type-radio:has(input:checked) {
  border-color: var(--ngf-seismic-500);
  box-shadow: inset 0 0 0 1px var(--ngf-seismic-500);
}
.webform-submission-instrument-request-form [data-drupal-selector="edit-request-type"] .form-type-radio {
  /* Two-line label (title + description) reads better with the radio dot
     pinned to the top than vertically centered against the whole block.
     The sitewide .form-type-radio rule lays out input/label/description as
     a single flex row with no wrap — wrap it here and push the description
     onto its own line, indented to align under the label rather than the
     dot (input width + the row's own gap). */
  align-items: flex-start;
  flex-wrap: wrap;
}
.webform-submission-instrument-request-form [data-drupal-selector="edit-request-type"] .form-type-radio label {
  font-weight: var(--ngf-w-semi);
  cursor: pointer;
}
.webform-submission-instrument-request-form [data-drupal-selector="edit-request-type"] .form-type-radio .description {
  flex-basis: 100%;
  margin: var(--ngf-sp-1) 0 0 calc(17px + var(--ngf-sp-3));
  font-size: var(--ngf-fs-sm);
  font-weight: normal;
  color: var(--ngf-fg-3);
}

/* Radio and checkbox option rows: control and its label on one line. The
   blanket `label { display: block }` above is right for text inputs (label
   above field) and wrong here, so it is undone for these two. */
.webform-submission-instrument-request-form .form-type-radio,
.webform-submission-instrument-request-form .js-form-type-radio,
.webform-submission-instrument-request-form .form-type-checkbox,
.webform-submission-instrument-request-form .js-form-type-checkbox {
  display: flex;
  align-items: center;
  gap: var(--ngf-sp-3);
  margin: 0 0 var(--ngf-sp-2);
}
.webform-submission-instrument-request-form .form-type-radio label,
.webform-submission-instrument-request-form .form-type-checkbox label {
  display: inline;
  margin-bottom: 0;
  font-weight: var(--ngf-w-regular);
  font-size: var(--ngf-fs-base);
  color: var(--ngf-fg-1);
}

/* Support needed toggle-switch styling lives further down, scoped to
   [data-drupal-selector="edit-support-needed"] directly (superseded the
   pill-checkbox version that used to be here). */

/* -------------------------------------------------------------------------
   Repeatable composite tables
   ------------------------------------------------------------------------- */
.webform-submission-instrument-request-form .webform-multiple-table {
  margin-bottom: var(--ngf-sp-4);
  overflow-x: auto;
}
.webform-submission-instrument-request-form .webform-multiple-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ngf-bg-surface);
  border: 1px solid var(--ngf-border-strong);
  border-radius: var(--ngf-r-sm);
}
.webform-submission-instrument-request-form .webform-multiple-table th {
  text-align: left;
  font-size: var(--ngf-fs-xs);
  font-weight: var(--ngf-w-semi);
  letter-spacing: var(--ngf-tr-wide);
  text-transform: uppercase;
  color: var(--ngf-fg-3);
  padding: var(--ngf-sp-3) var(--ngf-sp-4);
  border-bottom: 1px solid var(--ngf-border);
  background: var(--ngf-bg-subtle);
}
.webform-submission-instrument-request-form .webform-multiple-table td {
  padding: var(--ngf-sp-2) var(--ngf-sp-4);
  border-bottom: 1px solid var(--ngf-border);
  vertical-align: middle;
}
.webform-submission-instrument-request-form .webform-multiple-table .form-item {
  margin: 0;
}
/* Inside a table row the column header already names the field, so the
   per-cell label is redundant noise. */
.webform-submission-instrument-request-form .webform-multiple-table td label {
  display: none;
}
.webform-submission-instrument-request-form .webform-multiple-table td input,
.webform-submission-instrument-request-form .webform-multiple-table td select {
  padding: var(--ngf-sp-2) var(--ngf-sp-3);
  font-size: var(--ngf-fs-sm);
}

/* "Add more" control — a real button, green outline, centred, half width,
   uppercase — one look shared by every "+ Add another ___" button on the
   form (collaborators, funding sources, instruments-within-a-phase, and
   phases themselves). Dashed borders read as a drop zone or placeholder
   outline rather than something clickable. */
.webform-submission-instrument-request-form .webform-multiple-add {
  padding: var(--ngf-sp-4) 0 0;
  background: none;
  border: 0;
}
.webform-submission-instrument-request-form .webform-multiple-add .form-submit,
.webform-submission-instrument-request-form .ngf-instrument-phases__add {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  min-height: 40px;
  border: 1.5px solid var(--ngf-success);
  border-radius: var(--ngf-r-sm);
  color: var(--ngf-success);
  background: var(--ngf-bg-surface);
  font-family: var(--ngf-font-body);
  font-size: var(--ngf-fs-xs);
  font-weight: var(--ngf-w-semi);
  letter-spacing: var(--ngf-tr-wide);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}
.webform-submission-instrument-request-form .webform-multiple-add .form-submit:hover,
.webform-submission-instrument-request-form .ngf-instrument-phases__add:hover {
  background: var(--ngf-success);
  color: var(--ngf-white);
  border-color: var(--ngf-success);
}
/* Buttons default to the arrow cursor in every browser — nothing here sets
   pointer on its own, so every submit/image button on the form (row
   add/remove icons included) needs it spelled out or it doesn't read as
   clickable on hover. */
.webform-submission-instrument-request-form input[type="submit"],
.webform-submission-instrument-request-form input[type="image"],
.webform-submission-instrument-request-form button {
  cursor: pointer;
}
.webform-submission-instrument-request-form .webform-multiple-table--no-items-message {
  font-size: var(--ngf-fs-sm);
  color: var(--ngf-fg-3);
  padding: var(--ngf-sp-4);
  background: var(--ngf-bg-subtle);
  border: 1px solid var(--ngf-border);
  border-radius: var(--ngf-r-sm);
}

/* -------------------------------------------------------------------------
   Section intro copy (webform_markup blocks)
   ------------------------------------------------------------------------- */
/* Webform names these wrappers .webform-type-webform-markup, not
   .webform-markup, so an earlier .webform-markup selector here never matched
   and the theme's reset left the paragraphs with no separation at all. */
.webform-submission-instrument-request-form .webform-type-webform-markup {
  margin-bottom: var(--ngf-sp-5);
}
.webform-submission-instrument-request-form .webform-type-webform-markup p {
  font-size: var(--ngf-fs-sm);
  line-height: var(--ngf-lh-body);
  color: var(--ngf-fg-2);
  margin: 0 0 var(--ngf-sp-3);
}
.webform-submission-instrument-request-form .webform-type-webform-markup p:last-child {
  margin-bottom: 0;
}
.webform-submission-instrument-request-form .webform-type-webform-markup ul {
  margin: 0 0 var(--ngf-sp-3);
  padding-left: var(--ngf-sp-5);
  font-size: var(--ngf-fs-sm);
  line-height: var(--ngf-lh-body);
  color: var(--ngf-fg-2);
}

/* -------------------------------------------------------------------------
   Actions
   ------------------------------------------------------------------------- */
.webform-submission-instrument-request-form .form-actions {
  display: flex;
  align-items: center;
  gap: var(--ngf-sp-3);
  flex-wrap: wrap;
  background: var(--ngf-bg-surface);
  border: 1px solid var(--ngf-border);
  border-radius: var(--ngf-r-md);
  padding: var(--ngf-sp-4) var(--ngf-sp-6);
  margin-top: var(--ngf-sp-6);
}
.webform-submission-instrument-request-form .form-actions .form-submit {
  min-height: 46px;
  padding: 0 var(--ngf-sp-6);
  border: 1px solid var(--ngf-border-strong);
  border-radius: var(--ngf-r-sm);
  background: transparent;
  font-family: var(--ngf-font-body);
  font-size: var(--ngf-fs-sm);
  font-weight: var(--ngf-w-semi);
  letter-spacing: var(--ngf-tr-wide);
  text-transform: uppercase;
  color: var(--ngf-fg-1);
  cursor: pointer;
  transition: background-color var(--ngf-dur-base) var(--ngf-ease-out),
              color var(--ngf-dur-base) var(--ngf-ease-out),
              border-color var(--ngf-dur-base) var(--ngf-ease-out);
}
.webform-submission-instrument-request-form .form-actions .form-submit:hover {
  background: var(--ngf-ink-800);
  color: var(--ngf-white);
  border-color: var(--ngf-ink-800);
}
/* Forward action is the primary one; push it to the right so Back and Save
   sit together on the left. Webform uses a different class per page position
   — --next on the first page, --preview on the page before the review step,
   and [data-drupal-selector="edit-submit"] on the review step itself — so all three are covered. */
/* These must carry at least as much specificity as the base
   `.form-actions .form-submit` rule above, or its transparent background
   wins and the primary action renders as a plain outline button. */
.webform-submission-instrument-request-form .form-actions .webform-button--next,
.webform-submission-instrument-request-form .form-actions .webform-button--preview,
.webform-submission-instrument-request-form .form-actions [data-drupal-selector="edit-submit"] {
  margin-left: auto;
  background: var(--ngf-seismic-500);
  border-color: var(--ngf-seismic-500);
  color: var(--ngf-white);
}
.webform-submission-instrument-request-form .form-actions .webform-button--next:hover,
.webform-submission-instrument-request-form .form-actions .webform-button--preview:hover,
.webform-submission-instrument-request-form .form-actions [data-drupal-selector="edit-submit"]:hover {
  background: var(--ngf-seismic-600);
  border-color: var(--ngf-seismic-600);
  color: var(--ngf-white);
}

/* -------------------------------------------------------------------------
   Preview / review step
   ------------------------------------------------------------------------- */
.webform-submission-instrument-request-form .webform-preview {
  background: var(--ngf-bg-surface);
  border: 1px solid var(--ngf-border);
  border-radius: var(--ngf-r-md);
  box-shadow: var(--ngf-shadow-1);
  padding: var(--ngf-sp-6);
}
.webform-submission-instrument-request-form .webform-preview .webform-element-help {
  display: none;
}
/* Each wizard page ("You & Billing", "Your request") reaches the preview as a
   native <details>/<summary>. The approved review design has no page-level
   grouping at all — the sections themselves are the units — so this layer is
   flattened out entirely: the summary is dropped and the <details> is left as
   a bare pass-through wrapper. */
.webform-submission-instrument-request-form .webform-preview details.webform-container-type-details > summary {
  display: none;
}
.webform-submission-instrument-request-form .webform-preview details.webform-container-type-details {
  margin: 0;
}
/* Each fieldset is the visual card: white on white, separated by its border
   rather than by a fill, so the whole review reads as one flat sheet of
   sections instead of nested boxes. */
.webform-submission-instrument-request-form .webform-preview fieldset.webform-container-type-fieldset {
  background: var(--ngf-bg-surface);
  border: 1px solid var(--ngf-border);
  border-radius: var(--ngf-r-md);
  padding: var(--ngf-sp-5);
  margin-bottom: var(--ngf-sp-4);
}
.webform-submission-instrument-request-form .webform-preview fieldset.webform-container-type-fieldset:last-child {
  margin-bottom: 0;
}
/* Section heading: a rule spanning the full card width under a small caps
   label. A <legend> is shrink-to-fit and, left alone, is laid out inside the
   fieldset's top border — which shows the card's own border running under it
   as a second line. Floating it takes it out of that special border slot and
   makes it an ordinary block inside the card, so .fieldset-wrapper below has
   to clear it. */
.webform-submission-instrument-request-form .webform-preview fieldset.webform-container-type-fieldset legend {
  float: left;
  width: 100%;
  box-sizing: border-box;
  font-size: var(--ngf-fs-xs);
  font-weight: var(--ngf-w-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ngf-fg-2);
  padding-bottom: var(--ngf-sp-2);
  border-bottom: 1px solid var(--ngf-border);
  margin-bottom: var(--ngf-sp-4);
}
.webform-submission-instrument-request-form .webform-preview fieldset.webform-container-type-fieldset > .fieldset-wrapper {
  clear: both;
}
/* One "Edit" per wizard page, not per section, so it cannot sit in a card
   header the way the design shows it. Pulled to the right and set as a quiet
   link instead of a button, so it reads as a jump-back rather than an action
   competing with Submit. Its position at the head of each group is set in
   ngf_instrument_request_preprocess_webform_container_base_html(), not here. */
.webform-submission-instrument-request-form .webform-preview .webform-wizard-page-edit {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--ngf-sp-2);
}
.webform-submission-instrument-request-form .webform-preview .webform-wizard-pages-link {
  background: none;
  border: 0;
  padding: 0;
  width: auto;
  min-width: 0;
  font-family: var(--ngf-font-sans);
  font-size: var(--ngf-fs-xs);
  font-weight: var(--ngf-w-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ngf-link);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.webform-submission-instrument-request-form .webform-preview .webform-wizard-pages-link:hover {
  text-decoration: none;
}
/* Label/value rows: label in a fixed left column, value alongside it, so the
   values line up down the card the way the design shows. */
.webform-submission-instrument-request-form .webform-preview .webform-element {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--ngf-sp-2) var(--ngf-sp-4);
  align-items: baseline;
  margin-bottom: var(--ngf-sp-3);
}
.webform-submission-instrument-request-form .webform-preview .webform-element:last-child {
  margin-bottom: 0;
}
.webform-submission-instrument-request-form .webform-preview .webform-element label {
  font-family: var(--ngf-font-sans);
  font-size: var(--ngf-fs-sm);
  font-weight: var(--ngf-w-regular);
  color: var(--ngf-fg-3);
  margin: 0;
}
/* Values that are read as data rather than prose get the mono face, matching
   how dates, coordinates and contact details are set in the design. */
.webform-submission-instrument-request-form .webform-preview .webform-element-type-email,
.webform-submission-instrument-request-form .webform-preview .webform-element-type-tel,
.webform-submission-instrument-request-form .webform-preview .webform-element-type-date,
.webform-submission-instrument-request-form .webform-preview .webform-element-type-number,
.webform-submission-instrument-request-form .webform-preview .webform-element-type-ngf-instrument-phases {
  font-family: var(--ngf-font-mono);
  font-size: var(--ngf-fs-sm);
}
@media (max-width: 640px) {
  .webform-submission-instrument-request-form .webform-preview .webform-element {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .webform-submission-instrument-request-form .webform-preview .webform-element label {
    font-size: var(--ngf-fs-xs);
  }
}

/* The consent card is a live input, rendered after (and outside) the read-only
   summary, so it gets no spacing from the rules above and butts straight up
   against the last summary card. */
.webform-submission-instrument-request-form .ngf-ir-review-consent {
  margin-top: var(--ngf-sp-6);
}

/* -------------------------------------------------------------------------
   Warning callouts (unfunded notice, phase lead-time notice)
   Amber is not one of the sitewide tokens (closest, --ngf-warning, is a
   brownish amber meant for text/borders, not a tint), so the background
   tint here is a one-off literal color rather than a token.
   ------------------------------------------------------------------------- */
.webform-submission-instrument-request-form .ngf-ir-notice--warn {
  background: #fdf6e7;
  border: 1px solid #e8d3a0;
  border-radius: var(--ngf-r-sm);
  color: #6b4a0d;
  font-size: var(--ngf-fs-sm);
  padding: var(--ngf-sp-3) var(--ngf-sp-4);
}
.webform-submission-instrument-request-form .ngf-ir-notice--warn strong {
  font-weight: var(--ngf-w-semi);
}

/* -------------------------------------------------------------------------
   Funding: "Date funded" and "Award number" sit side by side; everything
   else in the section stays full width.
   ------------------------------------------------------------------------- */
@media (min-width: 641px) {
  .webform-submission-instrument-request-form [data-drupal-selector="edit-sec-funding"] > .fieldset-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--ngf-sp-5);
  }
  .webform-submission-instrument-request-form [data-drupal-selector="edit-sec-funding"] > .fieldset-wrapper > * {
    grid-column: 1 / -1;
  }
  /* data-drupal-selector sits on the <input> itself for a plain date/
     textfield, one level below its .form-item wrapper, so target the
     wrapper by its form-item-<key> class instead — and match the "span
     all columns" rule's own selector prefix so this reliably outranks it
     regardless of specificity math or declaration order. */
  .webform-submission-instrument-request-form [data-drupal-selector="edit-sec-funding"] > .fieldset-wrapper > .form-item-funding-date,
  .webform-submission-instrument-request-form [data-drupal-selector="edit-sec-funding"] > .fieldset-wrapper > .form-item-award-number {
    grid-column: auto;
  }
}

/* -------------------------------------------------------------------------
   Support needed: toggle switches, not checkboxes — "switch on what
   applies" promises a switch. Same [type=checkbox] input, restyled.
   ------------------------------------------------------------------------- */
/* This is a fieldset (title_display: invisible still renders a <legend> +
   .fieldset-wrapper), and Webform wraps the options themselves in a further
   .webform-options-display-one-column div inside that — the checkbox rows
   are two levels down from the data-drupal-selector target, not direct
   children of .fieldset-wrapper, so the flex row has to be applied there. */
.webform-submission-instrument-request-form [data-drupal-selector="edit-support-needed"] .webform-options-display-one-column {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ngf-sp-3);
}
.webform-submission-instrument-request-form [data-drupal-selector="edit-support-needed"] .form-type-checkbox {
  align-items: center;
  background: var(--ngf-bg-surface);
  border: 1px solid var(--ngf-border-strong);
  border-radius: var(--ngf-r-pill);
  padding: var(--ngf-sp-2) var(--ngf-sp-4);
  margin: 0;
}
.webform-submission-instrument-request-form [data-drupal-selector="edit-support-needed"] input[type="checkbox"] {
  position: relative;
  appearance: none;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: var(--ngf-border-strong);
  border: 0;
  cursor: pointer;
  transition: background-color var(--ngf-dur-base) var(--ngf-ease-out);
}
.webform-submission-instrument-request-form [data-drupal-selector="edit-support-needed"] input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ngf-white);
  transition: transform var(--ngf-dur-base) var(--ngf-ease-out);
}
.webform-submission-instrument-request-form [data-drupal-selector="edit-support-needed"] input[type="checkbox"]:checked {
  background: var(--ngf-seismic-500);
}
.webform-submission-instrument-request-form [data-drupal-selector="edit-support-needed"] input[type="checkbox"]:checked::before {
  transform: translateX(15px);
}
.webform-submission-instrument-request-form [data-drupal-selector="edit-support-needed"] label {
  display: inline;
  cursor: pointer;
}
.webform-submission-instrument-request-form [data-drupal-selector="edit-support-needed"] .form-type-checkbox:has(input:checked) label {
  color: var(--ngf-seismic-500);
  font-weight: var(--ngf-w-semi);
}
/* -------------------------------------------------------------------------
   Location: coordinates left / map center / environment + description
   right, matching the mockup's 190px | 1fr | 190px layout. The center column
   is the draw-a-box map; its JS lives in ngf_instrument_request/bbox-map.
   ------------------------------------------------------------------------- */
.webform-submission-instrument-request-form .ngf-ir-maprow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ngf-sp-5);
}
@media (min-width: 900px) {
  .webform-submission-instrument-request-form .ngf-ir-maprow {
    grid-template-columns: 190px 1fr 190px;
    align-items: start;
  }
}
.webform-submission-instrument-request-form .ngf-ir-coordset h3,
.webform-submission-instrument-request-form .ngf-ir-envset h3 {
  font-size: var(--ngf-fs-xs);
  font-weight: var(--ngf-w-semi);
  letter-spacing: var(--ngf-tr-wide);
  text-transform: uppercase;
  color: var(--ngf-fg-3);
  margin: 0 0 var(--ngf-sp-2);
}
.webform-submission-instrument-request-form .ngf-ir-coordset .form-item {
  display: flex;
  align-items: center;
  gap: var(--ngf-sp-2);
  margin-bottom: var(--ngf-sp-2);
}
.webform-submission-instrument-request-form .ngf-ir-coordset label {
  display: inline;
  width: 62px;
  flex: none;
  font-size: var(--ngf-fs-xs);
  color: var(--ngf-fg-3);
}
.webform-submission-instrument-request-form .ngf-ir-coordset input {
  font-family: var(--ngf-font-mono, monospace);
  text-align: right;
}
/* Taller than the 262px the placeholder reserved — a box has to be dragged
   inside this, not just looked at, and the corner handles need room. */
.webform-submission-instrument-request-form .ngf-ir-map {
  position: relative;
  min-height: 360px;
  border: 1px solid var(--ngf-border);
  border-radius: var(--ngf-r-sm);
  background: var(--ngf-bg-subtle);
  z-index: 0;
}
.webform-submission-instrument-request-form .ngf-ir-map--drawing {
  cursor: crosshair;
}
.webform-submission-instrument-request-form .ngf-ir-map__hint {
  position: absolute;
  left: 50%;
  bottom: var(--ngf-sp-4);
  transform: translateX(-50%);
  z-index: 500;
  padding: var(--ngf-sp-2) var(--ngf-sp-4);
  border-radius: var(--ngf-r-pill, 999px);
  background: rgb(0 0 0 / 0.72);
  color: #fff;
  font-size: var(--ngf-fs-xs);
  white-space: nowrap;
  pointer-events: none;
}
/* Corner grips. Sized well past the visible dot so they stay grabbable on
   touch, where the 26px icon alone would be under the ~44px target. */
.webform-submission-instrument-request-form .ngf-ir-map__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}
.webform-submission-instrument-request-form .ngf-ir-map__handle span {
  display: block;
  padding: 2px 5px;
  border: 2px solid #fff;
  border-radius: var(--ngf-r-sm);
  background: #e2483d;
  color: #fff;
  font-size: 10px;
  font-weight: var(--ngf-w-semi);
  letter-spacing: var(--ngf-tr-wide);
  line-height: 1.2;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
}
.webform-submission-instrument-request-form .ngf-ir-map__handle:active {
  cursor: grabbing;
}