/* ==========================================================================
   fg2 · WEBFORMS  ·  the band, the card and the controls

   WHAT THIS FILE IS FOR. The site has 141 webforms and every one of them
   renders through markup and stylesheets written for the previous light
   design. components.css section 20 re-pointed the COLOURS of that markup at
   the token set so the fields stopped being invisible. It did not touch the
   BOXES, and the boxes are the rest of the defect. Measured on the running
   site at 1440 before this file:

     /contact-us-form   card  712px wide, centred at x=364, in a 1392px frame
     /contact-us-form   consent sentence overhangs the card by 118.8px
     /contact-us-form   one submit inside two painted boxes and an arrow
     /media-inquiry     no card at all, form full bleed at 1440px
     /product/DDR4      fields on --surface-raised inside a --surface-raised
                        card, so the field fill and the card fill are one
                        colour and only the border says where a field is

   WHY THE ANCHOR IS WHAT IT IS. Three files already style this markup and two
   of them load after components.css:

     component.css  #block-frontgrade-content .webform-submission-form ...
     interior.css   #block-frontgrade-content .fg-interior .file-attachments__form-embed ...
     product.css    #block-frontgrade-content .fg-product .file-attachments__form-embed ...

   The first is the site's own sheet and anchors every webform rule on
   #block-frontgrade-content, which scores 1-1-0, so a selector built from
   classes alone cannot beat it whatever order the aggregator emits. The other
   two score 1-3-0 and 1-3-1 and load at weight -6, after this file. Every
   rule here therefore names the block id AND one more element than the rule
   it answers: form.webform-submission-form rather than
   .webform-submission-form, and the paragraph bundle class ahead of the
   wrapper class. That puts this file last on specificity rather than on load
   order, which is the same argument components.css section 20 makes for the
   same markup. The id is matched, never written.

   THE SCOPE IS THE DARK GROUND AND NOTHING ELSE. main:not(.fg2-legacy-skin)
   is the whole of the guard, exactly as in components.css section 20.
   legacy-skin.css puts .fg2-legacy-skin on <main> for every route still
   rendering on the white legacy ground, and those routes carry webforms too:
   /user/login, the standalone /form/* pages, the unconverted product bundles.
   Those pages keep the black action bar and the light fields their own skin
   draws, because that treatment is correct on a white page and this one is
   not.

   THE TWO EMBED SHAPES. The site embeds a webform into a page two ways and
   they produce different markup, which is why forms on the same pattern look
   nothing like each other today:

     paragraph--type--form     the file-attachment component's wrapper chain,
                               .component-file-attachments > .file-attachments__sidebar
                               > .file-attachments__container > li >
                               .file-attachments__form-embed > form
                               used by /contact-us-form, /request-a-quote,
                               /contact/supplier-resources/become-supplier

     paragraph--type--webform  the form on its own, no wrapper at all
                               used by /media-inquiry, /rma-request

   The first inherits the DOWNLOADS treatment, because the downloads list and
   the form paragraph share that wrapper chain; the second inherits nothing.
   Both are given the same band and the same single card below, so a form is
   the same object on every page that carries one.

   THE PARAGRAPH BUNDLE CLASS IS THE DISCRIMINATOR, not :has(). The wrapper
   chain is shared with the downloads list, whose narrow measure is correct
   for a stack of document rows and wrong for a form; the bundle class says
   which of the two is being rendered and says it in the markup's own words.
   Verified on /legal/ethics-code-conduct, the one page with a real downloads
   list: its .component-file-attachments carries no paragraph--type--form
   ancestor and no .file-attachments__form-embed, so nothing here reaches it.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. THE LEGACY VIEWPORT GRID

   Every webform is laid out as a twelve column grid whose track widths are
   computed from --grid-viewport-width, which the sitewide stylesheet leaves
   at 100vw, and whose inner block is placed on column-3-start / column-10-end.
   Widths taken from the window rather than from the element they sit in are
   correct for a full bleed page and wrong inside any container: the tracks
   still add up to the width of the window, so the form overhangs whatever it
   is placed in by the difference.

   interior.css and product.css each return the form to normal flow inside
   their own wrapper. Neither reaches /media-inquiry, because that page has no
   wrapper, so its form kept the grid. The form is what carries the grid, so
   the form is what should undo it, once, for every page.

   This is the same correction article.css:163 makes for the Layout Builder
   grid on an article body, arrived at from the same measurement.
   -------------------------------------------------------------------------- */

main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form {
  display: block;
  width: auto;
  margin-inline: 0;
}

main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form > .webform-submission-form__inner {
  width: auto;
  max-width: none;
  margin-inline: 0;
}


/* --------------------------------------------------------------------------
   2. THE BAND AND ITS ONE CARD

   THE BAND IS THE PATTERN'S CONTAINER. Every other band in the interior
   pattern lays its content out at --container-max plus a gutter each side and
   centres what is left over, so the hero title, the switchbacks and the
   closing call to action all start at the same edge. The form band did not:
   it took --container-text, the 760px article reading measure, from the
   downloads rules it shares a wrapper with. Measured at 1440 the card sat at
   x=364 and ran 712px while the H1 above it started at x=24 and the call to
   action below it started at x=24, so the form read as a narrow strip dropped
   into the middle of the page.

   THE CAP ONLY EVER BIT ON WIDE SCREENS, which is the clearest evidence that
   it was inherited rather than chosen. At 768 the same card measured 712px
   inside a 720px frame and at 390 it measured 350px inside 350px, both flush
   with the page. Only above roughly 808px did the 760px cap start leaving
   margin, and the design below that width is already the one this section
   restores everywhere.

   THE PRODUCT PAGE IS THE PRECEDENT. product.css already strips the wrapper
   chain to nothing and lets .fg-container supply the width, so the same
   .file-attachments__form-embed card measures 1392px at x=24 on /product/DDR4
   today. The interior pattern now matches it.

   ONE CARD, NOT THREE. The wrapper chain painted three nested boxes round one
   form: .component-file-attachments in --surface-raised with a hairline top
   and bottom, .file-attachments__container with a hairline top, and
   .file-attachments__form-embed in --surface-panel with a hairline all round.
   The first two are the downloads list's own row rules and have nothing to
   draw here, so they are returned to plain blocks and the embed keeps the
   card.
   -------------------------------------------------------------------------- */

/* The band. It is the container, and it keeps the vertical rhythm section 5
   of interior.css gives every component. The webform paragraph gets that
   rhythm here, because it is not in that file's list. */
main:not(.fg2-legacy-skin) #block-frontgrade-content .fg-interior__body .paragraph--type--form .component-file-attachments,
main:not(.fg2-legacy-skin) #block-frontgrade-content .fg-interior__body .paragraph--type--webform {
  display: block;
  width: 100%;
  max-width: calc(var(--container-max) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
  background: none;
  border: 0;
}

main:not(.fg2-legacy-skin) #block-frontgrade-content .fg-interior__body .paragraph--type--webform {
  padding-block: var(--section-y);
}

/* The wrappers between the band and the card. Their width caps, their auto
   margins, their gutters and their hairlines are all the downloads list's,
   so all four go and the card inherits the band's own width. */
main:not(.fg2-legacy-skin) #block-frontgrade-content .paragraph--type--form .file-attachments,
main:not(.fg2-legacy-skin) #block-frontgrade-content .paragraph--type--form .file-attachments__sidebar,
main:not(.fg2-legacy-skin) #block-frontgrade-content .paragraph--type--form .file-attachments__container,
main:not(.fg2-legacy-skin) #block-frontgrade-content .paragraph--type--form .file-attachments__container > li {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

/* The card. --surface-raised is the kit's card fill, one step off the page
   ground, and it is what product.css already gives the same element. The
   fields inside take --surface-panel in section 4, so a field is a step
   above the card rather than the same colour as it. */
main:not(.fg2-legacy-skin) #block-frontgrade-content .paragraph--type--form .file-attachments__form-embed,
main:not(.fg2-legacy-skin) #block-frontgrade-content .paragraph--type--webform form.webform-submission-form {
  padding: var(--space-7);
  background: var(--surface-raised);
  border: var(--border-hairline-w) solid var(--border-hairline);
  color: var(--text-muted);            /* 5.57:1 on --surface-raised */
}


/* --------------------------------------------------------------------------
   3. THE FLEX ROW

   The webform module lays a two column form out as .webform-flexbox with
   margin: 1em -0.5em and puts the compensating margin back on
   .webform-flex--container. The net position is right and the boxes are not:
   measured at 1440 the row's own box started 8px to the left of the form and
   ended 8px to the right of it, so every containment test on the card failed
   on three elements that were only ever a gutter mechanism. The gutter is
   restated as a gap, which is the same spacing with no box outside its
   parent.
   -------------------------------------------------------------------------- */

main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .webform-flexbox {
  gap: var(--space-6);
  margin-inline: 0;
}

main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .webform-flex,
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .webform-flex--container {
  min-width: 0;
  margin-inline: 0;
  padding-inline: 0;
}


/* --------------------------------------------------------------------------
   4. FIELDS

   THE FILL MOVES TO --surface-panel. The token file names that colour for
   "raised rows, inputs, tooltips"; components.css section 20 pointed the
   fields at --surface-raised instead, which is also the card's fill, so on
   /product/DDR4 the field and the card measured the same rgb(14,18,32) and
   only the 1px border said where a field began. --text-primary on
   --surface-panel measures 14.55:1 and --border-ui measures 3.50:1 on it,
   both already recorded in components.css section 20.

   THE HEIGHT IS A TARGET SIZE, not a look. Measured at 390 the submit drew at
   40px and the product pages' select at 37.2px, both under the 44px WCAG
   2.5.5 target. min-height is used rather than height so a textarea and a
   multi-line control still grow.
   -------------------------------------------------------------------------- */

main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form input[type="text"],
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form input[type="email"],
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form input[type="tel"],
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form input[type="url"],
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form input[type="number"],
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form input[type="search"],
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form input[type="date"],
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form input[type="password"],
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form select,
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: var(--space-3);
  background-color: var(--surface-panel);
  border: var(--border-hairline-w) solid var(--border-ui);   /* 3.50:1 on --surface-panel */
  border-radius: var(--fg-control-radius);
  color: var(--text-primary);          /* 14.55:1 on --surface-panel */
  font-family: var(--font-body);
  font-size: var(--fs-body);
}

main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form select option {
  background-color: var(--surface-panel);
  color: var(--text-primary);
}

/* The site draws its own caret over a select through .custom-select-wrap and
   sizes the control with a fixed height that predates the target size rule.
   The wrapper is a block so the caret keeps its position over a full width
   control, and the height gives way to the minimum above. */
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .custom-select-wrap {
  display: block;
  width: 100%;
  min-width: 0;
}

main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .custom-select-wrap select.custom-select {
  height: auto;
  background: var(--surface-panel);
}

/* Field rows and their labels. The rows carry the form's vertical rhythm and
   nothing else; the label colour and size are components.css section 20's and
   are not restated. min-width: 0 is what lets a row inside a flex column
   shrink to its column rather than to its content. */
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .js-form-item,
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .form-item {
  min-width: 0;
  max-width: 100%;
  margin-block: 0 var(--space-5);
}

main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .js-form-item > label,
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .form-item > label {
  display: block;
  max-width: 100%;
  margin-block: 0 var(--space-2);
  overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
   5. CHOICE CONTROLS AND THE CONSENT SENTENCE

   WHY THE TERMS SENTENCE LEFT THE CARD. The webform module's own stylesheet
   sets

     @media (min-width: 768px) {
       .webform-flex--container .form-type-checkbox,
       .webform-flex--container .form-type-radio { white-space: nowrap; }
     }

   in webform.element.flexbox.css. That is written for a Yes / No box in a
   narrow column and the consent control is a full sentence carrying a link.
   The label inherits the nowrap, and components.css section 20 makes the row
   a flex container, so the label is a flex item whose automatic minimum size
   is its max-content: 466.3px of unbreakable text in a 347.5px column.
   Measured on /contact-us-form at 1440 it ran to x=1169.8 against a card
   ending at x=1076, overhanging by 118.8px; at 768 the same, and at 390 the
   media query does not apply and there was no overflow. Restoring wrapping is
   the whole repair.

   THE SENTENCE IS ALSO NOT A FIELD LABEL. component.css gives every label in
   the form the uppercase, letterspaced label voice, which is right for the
   word above a field and wrong for a sentence of prose with a link in it, so
   the choice label is returned to sentence case and body leading.
   -------------------------------------------------------------------------- */

main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .js-form-type-checkbox,
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .js-form-type-radio,
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .form-type-checkbox,
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .form-type-radio {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .js-form-type-checkbox label,
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .js-form-type-radio label,
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .form-type-checkbox label,
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .form-type-radio label {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  white-space: normal;
  overflow-wrap: break-word;
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-primary);          /* 13.09:1 on --surface-raised */
}

/* The checkbox itself is components.css section 20's 24px control. The row
   is a flex line, so the sentence needs its own leading to sit on the box's
   optical centre rather than on its top edge. */
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .js-form-type-checkbox input[type="checkbox"],
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .js-form-type-radio input[type="radio"] {
  margin-block-start: 1px;
}

/* A fieldset of boxes keeps the group's own spacing and loses the site's
   default fieldset frame, which was drawn for the light page. */
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form fieldset {
  min-width: 0;
  max-width: 100%;
  margin-block: 0 var(--space-5);
  padding: 0;
  border: 0;
}


/* --------------------------------------------------------------------------
   6. THE ACTIONS ROW

   THE BLACK BOX IS THE SITE'S OWN BUTTON, DRAWN ROUND THE BUTTON.
   component.css styles the WRAPPER as the control:

     #block-frontgrade-content .webform-submission-form .form-actions
       border: 1px solid #121212; width: max-content; display: flex;
       padding: .8rem .5rem .8rem 1rem;
       background-image: linear-gradient(to top, #121212 50%, none 50%)

     #block-frontgrade-content .webform-submission-form
       .form-actions:not(.webform-progress ~ .form-actions)
       background-color: #000; color: #fff

     ... .form-actions::after   a 30x20 arrow in a white mask

   and components.css section 20 styles the INPUT as the control. Both paint,
   so one submit rendered as a 176.2 x 67.6 black rectangle with a 1px #121212
   border, a white arrow, and a 104.2 x 40 orange button sitting inside it.
   Measured on all six forms swept, at all three widths.

   The wrapper is returned to what it is, a row that holds the controls, and
   the one painted box is the button components.css section 20 already draws.

   THE SELECTOR IS WRITTEN TWICE, AND THE SECOND COPY IS THE LOAD BEARING ONE.
   The arm that carries the black fill ends in

     :not(.webform-progress ~ .form-actions)

   and a :not() takes the specificity of the most specific selector inside it,
   which here is a two class compound, so that rule scores 1-4-0 rather than
   the 1-3-0 it looks like. The plain selector below scores 1-3-2 and loses to
   it: measured after the first pass, the padding and the border went and the
   fill stayed rgb(0,0,0). Repeating the same :not() carries the block to
   1-5-2, which is above both arms and above the wizard variants on
   /request-a-quote as well.
   -------------------------------------------------------------------------- */

main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .form-actions,
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .form-actions:not(.webform-progress ~ .form-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  width: auto;
  max-width: 100%;
  margin: var(--space-7) 0 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
}

main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .form-actions::before,
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .form-actions::after,
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .form-actions:not(.webform-progress ~ .form-actions)::before,
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .form-actions:not(.webform-progress ~ .form-actions)::after {
  content: none;
}

/* The one button. Its fill, colour, type and padding are components.css
   section 20's .fg-btn--primary values; only the target height is added, for
   the reason section 4 gives. */
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .form-submit,
main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .webform-button--submit {
  min-height: 44px;
  width: auto;
  max-width: 100%;
}


/* --------------------------------------------------------------------------
   7. NARROW WIDTHS
   The card's padding steps down with the band's, on the breakpoint
   interior.css already uses for the same element.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  main:not(.fg2-legacy-skin) #block-frontgrade-content .paragraph--type--form .file-attachments__form-embed,
  main:not(.fg2-legacy-skin) #block-frontgrade-content .paragraph--type--webform form.webform-submission-form {
    padding: var(--space-5);
  }

  main:not(.fg2-legacy-skin) #block-frontgrade-content .fg-interior__body .paragraph--type--webform {
    padding-block: var(--section-y-sm);
  }
}

/* Below the module's own flexbox breakpoint the two columns stack, so the row
   gap replaces the column gap and the consent sentence is already wrapping. */
@media (max-width: 767px) {
  main:not(.fg2-legacy-skin) #block-frontgrade-content form.webform-submission-form .webform-flexbox {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   8. THE ERROR PATH

   Enabling the platform's inline form errors gives a failed submission three
   things it did not have: a summary at the top listing every failing field with
   a link to each, a message beside each field, and aria-invalid on the control.
   Two of those arrive unstyled on this ground, and one of them arrives
   unreadable.

   MEASURED ON /report-website-issue AFTER AN EMPTY SUBMISSION, at 1440:

     summary link text   #303030 on #090c14   1.48:1   FAIL 1.4.3
     inline error text   #7d89a3 on #0e1220   5.31:1   passes, but it is the
                                                       same tone as help text

   The summary links fall through to `body a { color: #303030 }` in the legacy
   stylesheet, which was written for a white page. On the dark system messages
   band they are very nearly invisible, and they are the fastest route a
   keyboard or screen reader user has to the field that failed.

   WHAT THIS SECTION DOES. It gives the summary links the accent, which is the
   colour this design already uses to mean "act on this", and underlines them so
   they are still links when the colour is not available. It lifts the inline
   message off the muted tone onto the primary one, so an error does not read as
   another line of help text. Both are colour only: no box, no spacing and no
   layout moves.
   -------------------------------------------------------------------------- */

.fg2-system-messages [data-drupal-messages] a:link,
.fg2-system-messages [data-drupal-messages] a:visited {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.fg2-system-messages [data-drupal-messages] a:hover,
.fg2-system-messages [data-drupal-messages] a:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
}

main:not(.fg2-legacy-skin) #block-frontgrade-content .form-item--error-message,
main:not(.fg2-legacy-skin) #block-frontgrade-content .form-item--error-message strong {
  color: var(--text-primary);
}