/**
 * Golden Eagle GS — Component Library: Interactive
 * Stage 3 — Enterprise Component Library
 *
 * Covers: Timeline, FAQ Components, Modal Components, Empty States,
 * Loading States, Success & Error States.
 *
 * UNLIKE components-core.css, this file is REGISTERED ONLY in
 * functions.php (wp_register_style), not enqueued sitewide — these
 * components appear on specific pages only (Recruitment's timeline,
 * FAQ page, any page using a modal or a form's success/error state).
 * Each Stage 5 page that needs one or more of these must call
 * `wp_enqueue_style( 'ge-components-interactive' )` itself. This split
 * is the concrete enforcement of DESIGN_SYSTEM.md §7's "no unnecessary
 * CSS" principle — a page with no timeline, FAQ, or modal never pays
 * for this file's bytes.
 *
 * Same token discipline as components-core.css: every value traces to
 * the :root tokens in style.css, no hard-coded hex/spacing.
 */

/* ==========================================================================
   1. TIMELINE COMPONENT
   ========================================================================== */
/* Mobile/Tablet: vertical stepper (line runs down the left edge).
   Laptop/Desktop: horizontal stepper (line runs across the top of each
   node) — matches the Phase 3 spec's explicit "rotates 90°" requirement. */

.ge-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-6);
  position: relative;
  padding-left: var(--ge-space-6);
}

.ge-timeline::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--ge-color-gold-500) 0%,
    var(--ge-color-gold-300) 50%,
    var(--ge-color-gold-500) 100%
  );
}

.ge-timeline__step {
  position: relative;
}

.ge-timeline__node {
  position: absolute;
  left: calc(-1 * var(--ge-space-6));
  top: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ge-color-navy-850);
  border: 2px solid var(--ge-color-gold-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--ge-color-gold-300);
  transition: 
    transform var(--ge-duration-base) var(--ge-ease-standard),
    box-shadow var(--ge-duration-base) var(--ge-ease-standard);
  box-shadow: 0 0 0 4px var(--ge-color-navy-900);
}

.ge-timeline__node.ge-timeline__node--active {
  transform: scale(1.15);
}

.ge-timeline__content {
  padding-left: calc(64px + var(--ge-space-3));
  padding-top: var(--ge-space-1);
}

.ge-timeline__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ge-color-text-primary);
  margin: 0 0 var(--ge-space-1);
  line-height: 1.3;
}

.ge-timeline__description {
  font-size: 14px;
  color: var(--ge-color-text-secondary);
  line-height: 1.6;
  max-width: 20em;
}

@media (max-width: 767px) {
  .ge-timeline {
    gap: var(--ge-space-5);
    padding-left: var(--ge-space-5);
  }

  .ge-timeline::before {
    left: 27px;
  }

  .ge-timeline__node {
    width: 56px;
    height: 56px;
    font-size: 20px;
    left: calc(-1 * var(--ge-space-5));
  }

  .ge-timeline__content {
    padding-left: calc(56px + var(--ge-space-3));
  }

  .ge-timeline__title {
    font-size: 15px;
  }

  .ge-timeline__description {
    font-size: 13px;
    line-height: 1.5;
  }
}

@media (min-width: 1024px) {
  .ge-timeline {
    flex-direction: row;
    padding-left: 0;
    padding-top: 32px;
  }

  .ge-timeline::before {
    left: 0;
    right: 0;
    top: 31px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(
      90deg,
      var(--ge-color-gold-500) 0%,
      var(--ge-color-gold-300) 50%,
      var(--ge-color-gold-500) 100%
    );
  }

  .ge-timeline__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ge-timeline__node {
    position: static;
    margin-bottom: var(--ge-space-3);
  }

  .ge-timeline__content {
    padding-left: 0;
    padding-top: 0;
  }

  .ge-timeline__description {
    max-width: 14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ge-timeline__node.ge-timeline__node--active {
    transform: none;
  }
}

/* ==========================================================================
   2. FAQ COMPONENTS (Accordion)
   ========================================================================== */

.ge-accordion-item {
  border-bottom: 1px solid var(--ge-color-border-subtle);
}

.ge-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ge-space-3);
  padding: var(--ge-space-4) 0;
  background: none;
  border: none;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--ge-color-text-primary);
  cursor: pointer;
}

.ge-accordion-trigger__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform var(--ge-duration-base) var(--ge-ease-standard);
}

.ge-accordion-trigger__icon::before,
.ge-accordion-trigger__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ge-color-gold-300);
  transform: translate(-50%, -50%);
}

.ge-accordion-trigger__icon::before {
  width: 12px;
  height: 2px;
}

.ge-accordion-trigger__icon::after {
  width: 2px;
  height: 12px;
  transition: transform var(--ge-duration-base) var(--ge-ease-standard);
}

.ge-accordion-trigger[aria-expanded="true"] .ge-accordion-trigger__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.ge-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ge-duration-base) var(--ge-ease-standard);
}

.ge-accordion-panel-open {
  max-height: 800px;
}

.ge-accordion-panel__inner {
  padding: 0 0 var(--ge-space-4);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ge-color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .ge-accordion-panel {
    transition: none;
  }
}

/* ==========================================================================
   3. MODAL COMPONENTS
   ========================================================================== */

.ge-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--ge-space-4);
  background: rgba(5, 11, 20, 0.75);
}

.ge-modal.ge-modal-open {
  display: flex;
}

.ge-modal__panel {
  background: var(--ge-color-navy-850);
  border: 1px solid var(--ge-color-border-active);
  border-radius: var(--ge-radius-lg);
  padding: var(--ge-space-6);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.ge-modal__close {
  position: absolute;
  top: var(--ge-space-3);
  right: var(--ge-space-3);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--ge-color-text-secondary);
  cursor: pointer;
  border-radius: var(--ge-radius-sm);
}

.ge-modal__close:hover,
.ge-modal__close:focus-visible {
  color: var(--ge-color-gold-300);
  background: var(--ge-color-navy-800);
}

.ge-modal__title {
  color: var(--ge-color-text-primary);
  margin: 0 0 var(--ge-space-3);
  padding-right: var(--ge-space-6);
}

body.ge-modal-lock-scroll {
  overflow: hidden;
}

@media (min-width: 768px) {
  .ge-modal__panel {
    padding: var(--ge-space-7);
  }
}

/* ==========================================================================
   4. EMPTY STATES
   ========================================================================== */
/* Applies to: Careers "no open positions", Blog "no articles in
   category", FAQ "no search results" — one component, three contexts,
   per the Phase 3 UI Spec's empty-state requirement. Pair with
   Elementor's native Loop Grid "No Results Message" setting where
   applicable, applying this class to that setting's HTML output. */

/* CONTRAST FIX (v12, 2026-10-03) — WCAG AA.
 *
 * MEASURED FAILURE: this component's text colours are the design
 * system's light-on-dark tokens, but it is transparent, so it inherited
 * whatever background it happened to land on. On the job-application
 * confirmation ("Application Received") the surrounding section is
 * white, which measured on the live site as:
 *     title  #FFFFFF on #FFFFFF = 1.00:1  (literally invisible)
 *     body   #B8C2D4 on #FFFFFF = 1.79:1
 * against a 4.5:1 AA requirement. 14 templates use this component and
 * roughly two-thirds of them sit on light backgrounds, so the same
 * failure was present well beyond the one page that was reported.
 *
 * FIX: the component now carries its own surface instead of borrowing
 * the page's. That makes it correct by construction wherever it is
 * placed — no per-page patching, and no future template can
 * accidentally reintroduce the bug. Measured on the new surface:
 *     title  #FFFFFF on #10203A = 16.3:1  ✓
 *     body   #B8C2D4 on #10203A =  9.0:1  ✓
 * Tokens only; no new colour values are introduced. */
.ge-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ge-space-3);
  padding: var(--ge-space-8) var(--ge-space-4);
  color: var(--ge-color-text-secondary);
  background: var(--ge-color-navy-850);
  border: 1px solid var(--ge-color-border-subtle);
  border-radius: var(--ge-radius-lg);
}

.ge-empty-state__icon {
  width: 48px;
  height: 48px;
  color: var(--ge-color-text-muted);
}

/* line-height explicitly set to `normal` (CSS's own initial value) —
   a defensive patch added alongside the new Typography Foundation
   base h1/h3 rules (style.css :root, Stage 6B). This component is
   used as both <h1> (index.php/404.php) and <h3> (every Homepage
   empty-state) by design, deliberately looking identical regardless
   of heading level. Before this patch it had no line-height at all,
   so it always rendered at the browser's own default (`normal`)
   regardless of tag — consistent. The new base h1/h3 rules set
   DIFFERENT line-heights (1.1 vs 1.25), which would have broken that
   consistency as an unintended side effect. Setting `normal`
   explicitly here restores the exact prior appearance in both
   contexts — a zero-regression guarantee, not a new design. */
.ge-empty-state__title {
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  color: var(--ge-color-text-primary);
  margin: 0;
}

/* REMOVED (v12, 2026-10-03). This rule, present since v11, read:
 *
 *     body.error404 .ge-empty-state__title { color: var(--ge-color-navy-900); }
 *
 * It was a correct diagnosis of the contrast bug but a per-page patch —
 * it fixed the 404 heading only, leaving the same failure on the job
 * application confirmation, Careers, Contact, Search, Archive, Taxonomy,
 * Blog index and FAQ.
 *
 * It must be removed rather than merely superseded: now that
 * .ge-empty-state carries its own navy surface (see the contrast-fix
 * block above), forcing the title to navy-900 would paint dark text on
 * a dark card and recreate the very bug it was added to solve. The
 * component-level fix covers the 404 page along with every other
 * usage. */

.ge-empty-state__description {
  font-size: 14px;
  max-width: 28em;
}

/* Onward actions inside an empty state (V18). Added for the Insights
   page, whose empty state now routes visitors onward instead of being a
   dead end. Stacks on narrow screens, inline from 480px — the same
   behaviour every other CTA group in this theme uses. */
.ge-empty-state__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ge-space-3);
  margin-top: var(--ge-space-5);
}

@media (min-width: 480px) {
  .ge-empty-state__actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   FORM SUPPORT — v13 (Dynamic Inquiry + CV upload)
   ========================================================================== */
/* Helper/hint text under a field, and the required-fields note.

   The DEFAULT targets the light page surface. Every native template renders
   inside the parent theme's white body, and v13 coloured this text with
   --ge-color-text-secondary (#B8C2D4) — a token chosen for dark surfaces,
   which measured 1.79:1 against white. That put the CV field's own
   "PDF, DOC or DOCX, up to 5 MB" constraint below AA and effectively
   invisible. #54595F measures 7.0:1 on white.

   Hints that genuinely sit on a dark surface — the ones inside a revealed
   conditional inquiry block — keep the light token via the scoped rule
   below. Information is carried by the text itself, never by colour alone. */
.ge-form-hint {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: #54595F;
  margin-top: var(--ge-space-1);
}

/* Conditional inquiry blocks. The `hidden` attribute does the hiding —
   this rule only guarantees it wins over the display value a sibling
   selector might otherwise apply, so a block can never be visually shown
   while its inputs are disabled. */
[data-ge-inquiry-block][hidden] {
  display: none;
}

/* A revealed block is set apart from the always-visible base fields so
   the change of context is legible, not just an abrupt appearance.

   The `color` is NOT optional decoration: this rule paints a dark surface
   (#10203A) onto a page whose body text is inherited from the parent theme
   at #333333. v13 set the background without pairing a text colour, so all
   18 conditional labels across the six blocks rendered at 1.29:1 — the
   inputs were visible but the questions were not. Declaring the colour here
   is enough for every label inside, because nothing in the cascade sets an
   explicit colour on `label`; they all inherit. */
[data-ge-inquiry-block]:not([hidden]) {
  margin-block: var(--ge-space-4);
  padding: var(--ge-space-4);
  background: var(--ge-color-navy-850);
  color: var(--ge-color-text-primary);
  border: 1px solid var(--ge-color-border-subtle);
  border-radius: var(--ge-radius-md);
}

/* The one place a hint DOES sit on a dark surface, so it keeps the light
   token (9.08:1 on #10203A) instead of the light-surface default above. */
[data-ge-inquiry-block] .ge-form-hint {
  color: var(--ge-color-text-secondary);
}

/* File input. No `color` is declared: the only file input on the site is
   the optional CV field, which sits on the light page surface, so the
   inherited #333333 (12.63:1) is correct. v13's explicit dark-surface token
   pushed Chrome's "No file chosen" text to 1.79:1. Should a file input ever
   be placed on a dark surface, colour it there rather than globally.
   The button chrome stays browser-drawn, which is deliberate. */
.ge-form-file,
input[type="file"] {
  max-width: 100%;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  /* Conditional blocks appear and disappear instantly; no transition is
     declared above, so there is nothing to disable. Stated explicitly
     rather than left silent, per this project's documentation discipline. */
  [data-ge-inquiry-block] {
    transition: none;
  }
}

/* ==========================================================================
   5. LOADING STATES
   ========================================================================== */
/* Button-level loading (.ge-btn.ge-is-loading) is defined in
   components-core.css alongside the rest of the button system, since
   every button can potentially enter a loading state. This section
   covers block-level / full-form loading only. */

.ge-form-loading {
  position: relative;
  opacity: 0.6;
  pointer-events: none;
}

.ge-loading-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--ge-color-border-subtle);
  border-top-color: var(--ge-color-gold-300);
  border-radius: 50%;
  animation: ge-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ge-loading-spinner {
    animation-duration: 1.4s;
  }
}

/* ==========================================================================
   6. SUCCESS & ERROR STATES
   ========================================================================== */
/* Toggled by form-enhancements.js on Elementor Pro Forms' native
   .elementor-form element via submit_success/submit_error events — see
   that script's docblock. Also usable standalone as .ge-alert for any
   static confirmation/error message. */

.ge-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ge-space-2);
  padding: var(--ge-space-3) var(--ge-space-4);
  border-radius: var(--ge-radius-sm);
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid transparent;
}

.ge-alert--success,
.ge-form-success {
  background: rgba(201, 162, 75, 0.1);
  border-color: var(--ge-color-success);
  color: var(--ge-color-gold-100);
}

.ge-alert--error,
.ge-form-error {
  background: rgba(196, 84, 74, 0.1);
  border-color: var(--ge-color-error);
  color: var(--ge-color-error);
}

/* Multi-step form Review step (Request Manpower) — a plain, readable
   label/value list using only existing tokens, deliberately minimal
   since form inputs elsewhere in the theme have no dedicated styling
   of their own to match; not a general forms redesign. */
.ge-form-review {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-3);
  margin: var(--ge-space-4) 0;
}

.ge-form-review__row {
  display: flex;
  justify-content: space-between;
  gap: var(--ge-space-4);
  padding-bottom: var(--ge-space-2);
  border-bottom: 1px solid var(--ge-color-border-subtle);
}

.ge-form-review__row dt {
  color: var(--ge-color-text-muted);
  font-size: 14px;
}

.ge-form-review__row dd {
  margin: 0;
  color: var(--ge-color-text-primary);
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

/* ==========================================================================
   V19 — REQUEST MANPOWER GUIDANCE (2026-10-04)
   Copy added around the employer form, not inside it. Lives in the sitewide
   interactive bundle because this page loads no page-specific stylesheet.
   ========================================================================== */

.ge-rm-intro {
  max-width: 70ch;
  margin-bottom: var(--ge-space-6);
}

.ge-rm-intro__lead {
  color: var(--ge-color-text-muted-on-light);
  line-height: 1.7;
  margin: 0 0 var(--ge-space-4);
}

/* V19.1: these rendered #FFFFFF on the white .ge-page-section surface —
   1.00:1, completely invisible. navy-900 gives 18.4:1. */
.ge-rm-intro__title,
.ge-rm-next__title {
  color: var(--ge-color-navy-900);
  font-size: 18px;
  margin: 0 0 var(--ge-space-3);
}

.ge-rm-intro__list,
.ge-rm-next__list {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-2);
  margin: 0;
  padding-left: var(--ge-space-4);
  color: var(--ge-color-text-muted-on-light);
  line-height: 1.6;
}

.ge-rm-intro__list strong {
  color: var(--ge-color-navy-900);
}

.ge-rm-next {
  max-width: 70ch;
  margin-top: var(--ge-space-7);
  padding-top: var(--ge-space-6);
  border-top: 1px solid var(--ge-color-border-subtle);
}

/* V19.1: --ge-color-gold-300 (#E8C878) measures 1.90:1 on white. On this
   light surface the link uses navy-900 with a persistent underline, so it is
   still unmistakably a link without relying on colour alone. */
.ge-rm-next__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ge-color-navy-900);
  font-weight: 600;
  text-decoration: underline;
}

.ge-rm-next__link:hover,
.ge-rm-next__link:focus-visible {
  text-decoration: none;
}

/* ==========================================================================
   PHASE 1 / SLICE 1 — COMPLETENESS + REQUEST SUCCESS (2026-10-08)
   --------------------------------------------------------------------------
   SURFACE: both blocks sit inside `.ge-page-section`, which is a LIGHT
   surface inherited from the parent theme. Every colour below is therefore
   taken from the light-surface tokens (--ge-color-navy-900 for headings,
   --ge-color-text-muted-on-light for secondary text) and never from
   --ge-color-text-primary, which is #FFFFFF and would be invisible here.
   Declaring the surface explicitly is deliberate: inheriting it is what
   produced the earlier invisible-heading defects.
   ========================================================================== */

.ge-completeness {
  margin: 0 0 var(--ge-space-6, 2rem);
  padding: var(--ge-space-5, 1.5rem);
  border: 1px solid rgba(10, 22, 40, 0.12);
  border-left: 3px solid var(--ge-color-gold-500);
  background: rgba(10, 22, 40, 0.025);
}

.ge-completeness__title {
  margin: 0 0 0.5rem;
  color: var(--ge-color-navy-900);
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ge-completeness__status {
  margin: 0 0 var(--ge-space-4, 1rem);
  color: var(--ge-color-navy-900);
  font-weight: 600;
}

.ge-completeness[data-ge-ready="true"] {
  border-left-color: var(--ge-color-gold-300);
}

.ge-completeness__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ge-completeness__item {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.75rem;
  color: var(--ge-color-text-muted-on-light);
}

/* State is conveyed by a text mark AND by weight/colour — never colour
   alone, so it survives greyscale and colour-vision differences. */
.ge-completeness__item::before {
  position: absolute;
  top: 0.3rem;
  left: 0;
  content: "+";
  color: var(--ge-color-gold-700);
  font-weight: 700;
}

.ge-completeness__item[data-ge-satisfied="true"] {
  color: var(--ge-color-navy-900);
}

.ge-completeness__item[data-ge-satisfied="true"]::before {
  content: "\2713";
  color: var(--ge-color-gold-700);
}

.ge-completeness__note {
  margin: var(--ge-space-4, 1rem) 0 0;
  color: var(--ge-color-text-muted-on-light);
  font-size: 0.875rem;
}

.ge-request-success {
  max-width: 44rem;
  padding: var(--ge-space-6, 2rem) 0;
}

.ge-request-success__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--ge-color-gold-700);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ge-request-success__title {
  margin: 0 0 var(--ge-space-5, 1.5rem);
  color: var(--ge-color-navy-900);
}

.ge-request-success__subtitle {
  margin: var(--ge-space-6, 2rem) 0 var(--ge-space-3, 0.75rem);
  color: var(--ge-color-navy-900);
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ge-request-success__ref {
  margin: 0 0 var(--ge-space-5, 1.5rem);
  padding: var(--ge-space-5, 1.5rem);
  border: 1px solid rgba(10, 22, 40, 0.12);
  background: var(--ge-color-navy-900);
}

.ge-request-success__ref-label {
  margin: 0 0 0.35rem;
  color: var(--ge-color-gold-300);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* This nested block IS a dark surface, declared above, so the two rules
   below correctly use the dark-surface tokens. */
.ge-request-success__ref-code {
  margin: 0 0 0.5rem;
}

.ge-request-success__ref-code code {
  color: var(--ge-color-text-primary);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: none;
}

.ge-request-success__ref-note {
  margin: 0;
  color: var(--ge-color-text-secondary);
  font-size: 0.8125rem;
}

.ge-request-success__recap,
.ge-request-success__next {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--ge-color-text-muted-on-light);
}

.ge-request-success__recap li,
.ge-request-success__next li {
  margin-bottom: 0.35rem;
}

.ge-request-success__privacy {
  margin: var(--ge-space-3, 0.75rem) 0 0;
  color: var(--ge-color-text-muted-on-light);
  font-size: 0.8125rem;
  font-style: italic;
}

.ge-request-success__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ge-space-3, 0.75rem);
  margin-top: var(--ge-space-6, 2rem);
}

/* Touch target floor. The existing multi-step controls measure 42px; new
   controls must not inherit that. */
.ge-request-success__actions .ge-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 640px) {
  .ge-completeness {
    padding: var(--ge-space-4, 1rem);
  }

  .ge-request-success__ref-code code {
    font-size: 1.25rem;
  }

  .ge-request-success__actions .ge-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Field hint for the Phase 1 / Slice 1 employer fields. LIGHT surface
   (inside `.ge-page-section`), so the muted-on-light token — never
   --ge-color-text-primary, which is #FFFFFF. Rendered as a block so it
   sits under its input, and referenced by aria-describedby so screen
   readers read it as part of the field. */
.ge-field-hint {
  display: block;
  margin-top: 0.3rem;
  color: var(--ge-color-text-muted-on-light);
  font-size: 0.8125rem;
  line-height: 1.5;
}