/*
  Grey Epoch brand tokens — these come from the shared stylesheet
  (/static/css/styles.css, linked in wizard/index.html before this file),
  the same real brand sheet used by Trade Checking. This file only holds
  wizard-specific layout on top of those --ge-* tokens; it no longer
  defines its own colour variables.

  Brand rule (see static/css/styles.css's own source doc): no red or green
  anywhere, even for errors/success, everywhere else in the system — Navy +
  Sand tints only. The "done" step indicator here still uses a deeper navy
  tint instead of green, per that rule.

  Exception - error states only, confirmed with Bea 2026-07-28: this file
  uses a dedicated --ge-error red (defined below) for the error summary,
  invalid fields, and the Remove button. The sand-tint background was
  carrying three unrelated meanings here (current step / error / invalid
  field) with no non-red fix that stayed reliably distinguishable. Scoped to
  this file only - the admin app and Trade Checking keep the no-red rule.

  Contrast note: --ge-sand fails WCAG contrast as text or a border on white
  (~1.7:1), so it is only ever used as a background fill with navy text on
  top, matching the same rule the shared stylesheet follows. --ge-text-muted
  / --ge-navy-60 (~3.57:1 on white) also fails as real text at the sizes used
  here - swapped for the existing --ge-navy-80 token (6.34:1 on white)
  wherever it's used as real text below, rather than inventing a new colour.
*/
:root {
  /* Wizard-only, per the brand exception noted above. #b3261e / #fbeaea
     are not new brand colours - #b3261e already appears elsewhere in this
     shared design system (styles.css .ge-bad) as the established "wrong/
     danger" red; reused here rather than picking a new one. */
  --ge-error: #b3261e;
  --ge-error-tint: #fbeaea;
}
.ge-kyc {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-weight: 300;
  color: var(--ge-text-dark);
  max-width: 780px;
  margin: 0 auto;
  padding: 40px var(--space-5) 100px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.ge-kyc * { box-sizing: border-box; }

/* Headings now use Lato too (the new stylesheet's brand font throughout,
   unlike legacy which kept Helvetica Neue for headings only). */
.ge-kyc h1, .ge-kyc h2, .ge-kyc h3, .ge-kyc h4 {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .ge-kyc * { transition: none !important; animation: none !important; }
}

/* Header */
/* The top header used to be its own .ge-header with an image logo; it's
   now the shared .ge-nav component (full-width navy band, white text
   logo) - same treatment as the admin app, styled entirely by the shared
   stylesheet. No rules needed here any more. */

/* Intro — a proper welcome before the prototype/status notices, not just
   another notice itself. Larger, more confident scale than the rest of the
   form (closer to how greyepoch.com's own headlines read) so the wizard
   opens like a considered product, not a login screen. */
.ge-intro-title {
  font-size: 30px;
  margin: 0 0 10px;
}
.ge-intro-lead {
  font-size: 16px;
  font-weight: 300;
  color: var(--ge-navy-80);
  max-width: 560px;
  margin: 0 0 28px;
}

/* Consent gate - shown before the rest of the form; ticking the checkbox
   and clicking Continue is required to reveal it (see wizard.mjs). */
.ge-consent-gate {
  border: 1px solid var(--ge-navy-20);
  background: var(--ge-navy-10);
  border-radius: 2px;
  padding: 20px 22px;
  margin-bottom: 28px;
}
.ge-consent-gate__label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}
.ge-consent-gate__label input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.ge-consent-gate__label a { color: var(--ge-navy); text-decoration: underline; }
/* Base/primary/hover/disabled look shared with the Back/Save/Next/Submit
   row - see .ge-form-nav button and friends below, which this reuses
   instead of restating the same declarations under a new class. */
.ge-consent-gate__continue { margin-top: var(--space-4); }

/* Progress - named .ge-wizard-progress, not .ge-progress, because the
   shared stylesheet's .ge-progress is a different component entirely
   (Trade Checking's 6-step submission bar: flex row, navy border, a
   background and a ::before connecting line) that would otherwise bleed
   through onto this step-tabs container. */
.ge-wizard-progress { margin-bottom: 28px; }
.ge-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  font-size: 12px;
  color: var(--ge-navy-80);
}
.ge-steps li {
  border: 1px solid var(--ge-navy-20);
  border-radius: 2px;
}
.ge-steps li.ge-step-current { border-color: var(--ge-navy); background: var(--ge-sand-30); }
/* "Done" is a success state - brand rule bans green, so this uses a
   deeper navy tint instead (the same substitution the shared stylesheet
   uses for its own "Submitted" status pill). */
.ge-steps li.ge-step-done { border-color: var(--ge-navy-80); }
.ge-step-nav {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 10px;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ge-steps li.ge-step-current .ge-step-nav { color: var(--ge-navy); font-weight: 700; }
.ge-steps li.ge-step-done .ge-step-nav { color: var(--ge-navy-80); }
.ge-progress-summary { font-size: 13px; color: var(--ge-navy-80); margin: 0; }
/* Error summary - previously shared --ge-sand-30 with the "current step"
   tab background and invalid-field fill, which is why errors didn't read
   as errors (see wizard.css top comment re: the red exception). Now its
   own --ge-error/--ge-error-tint, distinct from every other state on the
   page. */
.ge-error-summary {
  border-left: 4px solid var(--ge-error);
  background: var(--ge-error-tint);
  border-radius: 2px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.ge-error-summary p { margin: 0 0 8px; font-weight: 700; color: var(--ge-error); }
.ge-error-summary ul { margin: 0; padding-left: 18px; }
.ge-error-summary a { color: var(--ge-navy); }

/* Section headings */
.ge-section {
  color: var(--ge-navy);
  font-size: 22px;
  font-weight: 700;
  margin: 40px 0 20px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--ge-sand);
  /* display:table (not inline-block) so the sand underline still hugs just
     the text width, but the heading stays block-level - it always starts
     its own line rather than sitting next to whatever came right before it
     (e.g. the "+ Add another signatory" button in Signatories & Traders). */
  display: table;
}
.ge-section:first-of-type { margin-top: 0; }

.ge-sub {
  font-size: 13px;
  color: var(--ge-navy-80);
  margin: 0 0 12px;
}

/* Required-field marker - navy, not red, per the brand's no-red rule. */
.ge-required { color: var(--ge-navy); font-weight: 700; }

/* Text fields - label on its own row, then a .ge-field-body row below
   holding the input plus its help/error text, so everything lines up
   consistently regardless of message length (see ge-frontend skill). */
.ge-field {
  display: grid;
  row-gap: 6px;
  margin-bottom: 20px;
}
.ge-field label {
  font-size: 14px;
}
/* Optionality belongs next to the label, visible and persistent - never
   only in a placeholder (which vanishes on focus/typing and isn't reliably
   announced) and never only in a section blurb. */
.ge-optional-tag {
  font-weight: 400;
  font-size: 12px;
  color: var(--ge-navy-80);
}
.ge-field-body {
  display: grid;
  row-gap: 4px;
}
.ge-field input,
.ge-field select,
.ge-repeat-field input,
.ge-repeat-field select {
  width: 100%;
  padding: 10px;
  min-height: 44px;
  border: 1px solid var(--ge-navy-60);
  border-radius: 2px;
  font-size: 16px; /* 16px minimum - below this, iOS Safari zooms in on focus */
  font-family: inherit;
  background: #fff;
}
/* Field sizing - most fields (legal name, address lines) genuinely need
   the full column width, but a handful don't and shouldn't stretch to fill
   it (a postcode does not need the same width as an address line). Below
   640px everything stays full-width and stacked, matching every other
   field on the page - only ≥640px narrows these specific ones. */
.ge-field--medium .ge-field-body { max-width: 320px; }
.ge-field-row {
  margin-bottom: 20px;
}
.ge-field-row .ge-field { margin-bottom: 0; }
@media (min-width: 640px) {
  .ge-field-row {
    display: grid;
    grid-template-columns: 1fr 2fr; /* postcode : town, roughly 4:8 of 12 columns */
    gap: 0 16px;
    /* Without this, grid's default stretch makes the shorter field (Town)
       grow to match the taller one (Postcode, which has help text below
       it) - found by actually rendering this and measuring both boxes. */
    align-items: start;
  }
}

/* Invalid fields: --ge-error border + tint (see the red exception noted at
   the top of this file) - previously navy + sand-30, which was the same
   fill as the error summary and the "current step" tab. */
.ge-field input[aria-invalid="true"],
.ge-repeat-row input[aria-invalid="true"] {
  border-color: var(--ge-error);
  background: var(--ge-error-tint);
}
/* Named .ge-field-msg, not .ge-field-error - the shared stylesheet
   (static/css/styles.css) already defines its own, differently-styled
   .ge-field-error (literally red, for a different use in Trade Checking),
   and it was bleeding its background/border through here since this
   rule never overrode those two properties. Same class of bug as the
   .ge-nav / .ge-form-nav collision above.

   Always present (even when empty) and height-reserved, so a message
   appearing/disappearing never shifts other content - see wizard.mjs
   header for why that mattered (it could make a click miss its target). */
.ge-field-msg {
  font-size: 12px;
  font-weight: 700;
  color: var(--ge-error);
  margin: 0;
  min-height: 1.2em;
}
/* Any .ge-field--medium field (320px box - LEI today, three others too) can
   have a message long enough to wrap onto two lines there - the generic
   single-line reservation above isn't tall enough for that, which reopens
   the exact "message appearing shifts the page right before a click on
   Next" bug the reservation above was written to prevent (confirmed via
   Playwright on the LEI field: the Next button visibly moved out from under
   a fast click once its message wrapped). Scoped to the class, not just the
   one field that happens to have a long enough message today. */
.ge-field--medium .ge-field-msg { min-height: 2.4em; }
/* Overrides .ge-help's normal bottom margin only when it's nested inside
   a field (e.g. the LEI hint) - .ge-field-body's row-gap handles spacing
   there instead; .ge-help used outside a field keeps its own spacing. */
.ge-field-body .ge-help { margin: 0; }

/* FCA note */
.ge-note { font-size: 14px; margin: 0 0 18px; }

/* Yes / No rows */
.ge-yesno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  max-width: 480px;
}
.ge-yesno-q {
  font-size: 14px;
}
.ge-yesno-opts { display: flex; gap: 20px; flex: 0 0 auto; }
.ge-yesno-opts label {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  min-height: 44px;
}
.ge-help { font-size: 12px; color: var(--ge-navy-80); margin: 0 0 18px; }
/* Repeatable rows - each one is its own card (a numbered heading plus a
   Remove button, with a visible caption above every field) rather than a
   bare row of unlabelled boxes. Placeholder text alone disappears the
   moment you start typing, so once a row is filled in - or there's more
   than one signatory/trader - there was nothing left on screen saying
   whose details you were looking at or which box was which. */
.ge-repeat-row {
  border: 1px solid var(--ge-navy-20);
  border-radius: 2px;
  padding: 20px 22px;
  margin-bottom: 18px;
  max-width: 640px;
}
.ge-repeat-row__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4);
}
.ge-repeat-row__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ge-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.ge-repeat-row__fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ge-repeat-field {
  display: grid;
  row-gap: 4px;
  flex: 1 1 160px;
  min-width: 140px;
}
.ge-repeat-field__label {
  font-size: 12px;
  color: var(--ge-navy-80);
}
/* Title dropdown - narrower than the generic field rule since "Mr"/"Prof"
   etc. never need as much room as a name or email box. */
.ge-repeat-field--title { flex: 0 0 90px; min-width: 80px; }
/* Country code + national number split. */
.ge-repeat-field--phone { flex: 1 1 340px; min-width: 340px; }
.ge-phone-row {
  display: flex;
  gap: 8px;
}
/* .ge-phone-row prefixed so these flex-basis values beat the generic
   ".ge-repeat-field select"/"input" rule's specificity (same trap as the
   form-nav buttons had - a plain class alone loses to class+type). */
.ge-phone-row .ge-phone-code { flex: 0 0 210px; min-width: 180px; }
/* flex-basis 160px (not "auto") plus a matching min-width so this box
   never gets squeezed smaller than a full number needs - "auto" alone let
   the row's other fields crowd it down to just a few characters wide. */
.ge-phone-row .ge-phone-national { flex: 1 1 160px; min-width: 150px; }

/* Destructive action - uses the red exception (see top-of-file note),
   confirmed with Bea 2026-07-28, rather than the navy/muted treatment
   every other secondary control on this page uses. */
.ge-remove {
  flex: 0 0 auto;
  border: 1px solid var(--ge-error);
  background: #fff;
  color: var(--ge-error);
  border-radius: 2px;
  padding: 10px 16px;
  min-height: 44px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.ge-remove:hover { background: var(--ge-error); color: #fff; }
/* Secondary-button treatment, same as Back/Save (1.4's dashed style is
   gone - dashed borders signal drop-zones, not "add a row"). Both this and
   the Traders one below share this same class already (same border/fill/
   text colour) - fixed min-width so "+ Add another signatory" and
   "+ Add another trader" render as the same size box despite the different
   text length, rather than the shorter one looking mismatched next to it. */
.ge-add {
  display: inline-block;
  min-width: 220px;
  text-align: center;
  background: none;
  border: 1px solid var(--ge-navy);
  color: var(--ge-navy);
  border-radius: 2px;
  padding: 10px 16px;
  min-height: 44px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 24px;
}
.ge-add:hover { background: var(--ge-navy-10); }

/* Documents (step 6) - genuinely optional forever (confirmed with Bea
   2026-07-29), not just "optional right now". The notice box is deliberately
   the most visually prominent thing on the step, ahead of the upload slots
   themselves - a plain sentence of body text was judged not obvious enough
   given this reverses what a KYC form's Documents step usually implies. */
.ge-doc-optional-notice {
  background: var(--ge-navy-10);
  border: 1px solid var(--ge-navy-20);
  border-radius: 2px;
  padding: 14px 18px;
  margin: 0 0 20px;
  font-size: 14px;
  max-width: 640px;
}
.ge-doc-optional-notice strong { color: var(--ge-navy); }

.ge-doc-slot {
  border: 1px solid var(--ge-navy-20);
  border-radius: 2px;
  padding: 20px 22px;
  margin-bottom: 18px;
  max-width: 640px;
}
.ge-doc-slot__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ge-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ge-doc-slot input[type="file"] {
  display: block;
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 8px;
}
.ge-doc-status {
  font-size: 13px;
  color: var(--ge-navy-80);
  margin: 0;
}
.ge-doc-status.ge-doc-ok { color: var(--ge-navy); font-weight: 700; }

/* Review */
.ge-review-section {
  border: 1px solid var(--ge-navy-20);
  border-radius: 2px;
  padding: 20px 22px;
  margin-bottom: 18px;
}
.ge-review-section h3 {
  font-size: 14px;
  color: var(--ge-navy);
  margin: 0 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ge-review-section dl { margin: 0; }
.ge-review-section dt { font-size: 12px; color: var(--ge-navy-80); margin-top: 8px; }
.ge-review-section dt:first-child { margin-top: 0; }
.ge-review-section dd { font-size: 14px; margin: 2px 0 0; }
.ge-edit-link { font-size: 13px; color: var(--ge-navy); text-decoration: underline; }

/* Consent */
.ge-consent {
  margin: 32px 0 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ge-navy-20);
}
.ge-consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}
.ge-consent label + label { margin-top: 14px; }
.ge-consent input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; }
.ge-consent a { color: var(--ge-navy); text-decoration: underline; }

/* Honeypot - hidden from sighted users and screen readers, but still a
   real, fillable field a bot's form-autofill will typically find */
.ge-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form nav (Back / Save / Next / Submit row) - named .ge-form-nav, not
   .ge-nav, because the shared stylesheet's .ge-nav is a different thing
   entirely (the full-width navy top header bar used by Trade Checking's
   signed-in pages). Reusing that name here would have pulled in a navy
   band background behind these buttons by accident. */
.ge-form-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  padding-top: var(--space-5);
  border-top: 1px solid var(--ge-navy-20);
  flex-wrap: wrap;
}
.ge-nav-spacer { flex: 1 1 auto; }
.ge-form-nav button,
.ge-consent-gate__continue {
  border-radius: 2px;
  padding: 11px 24px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.3px;
  cursor: pointer;
  border: 1px solid var(--ge-navy-60);
  background: #fff;
  color: var(--ge-text-dark);
}
/* .ge-form-nav prefixed so these beat .ge-form-nav button's specificity
   (class+type) - .ge-next/.ge-submit/.ge-save alone (class only) were
   being silently overridden by it before this fix. .ge-consent-gate__continue
   is included directly (it isn't inside .ge-form-nav) so it gets the same
   primary treatment without restating it. */
.ge-form-nav .ge-next, .ge-form-nav .ge-submit,
.ge-consent-gate__continue {
  background: var(--ge-navy);
  color: #fff;
  border-color: var(--ge-navy);
}
.ge-form-nav .ge-next:hover, .ge-form-nav .ge-submit:hover,
.ge-consent-gate__continue:hover:not(:disabled) { background: var(--ge-navy-80); }
.ge-form-nav .ge-save { border-color: var(--ge-navy); color: var(--ge-navy); background: #fff; }
.ge-form-nav .ge-save:hover { background: var(--ge-sand-30); }
/* Disabled state - not used by any .ge-form-nav button today, but defined
   here (rather than only on .ge-consent-gate__continue) so any future
   disabled Back/Save/Next/Submit button gets the same treatment for free,
   matching the shared stylesheet's .ge-btn[disabled] convention. */
.ge-form-nav button:disabled,
.ge-consent-gate__continue:disabled {
  background: var(--ge-navy-20);
  border-color: var(--ge-navy-20);
  color: var(--ge-navy-60);
  cursor: not-allowed;
}
/* The Save button's own name + email fields, in the nav bar itself -
   narrower than a full-width form field (they're compact row items, not a
   step's main content) and no bottom margin (the row's own align-items/gap
   already space them from their neighbours; .ge-field's normal 20px would
   double up). */
.ge-save-name, .ge-save-email { margin-bottom: 0; flex: 1 1 220px; max-width: 280px; }

/* Confirmation */
.ge-confirmation { padding-top: 8px; }
.ge-mock-tag { font-size: 12px; color: var(--ge-navy-80); font-style: italic; }
/* Save-preview modal - named .ge-modal-overlay, not .ge-modal, because the
   shared stylesheet's .ge-modal is the styling for the box itself (a
   different component - it's meant for an HTML <dialog>, with its own
   border-radius/max-width/box-shadow) which would otherwise bleed onto
   this full-screen backdrop <div>. .ge-modal-box below (the actual white
   box) doesn't collide with anything in the shared sheet. */
.ge-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 64, 84, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10;
}
/* Giving .ge-modal-overlay its own `display` breaks the plain HTML
   `hidden` attribute (author styles win over the browser's built-in
   hidden rule) - this restores it. Without this, the modal invisibly
   covers the whole page and blocks every click, even while "hidden". */
.ge-modal-overlay[hidden] { display: none; }
.ge-modal-box {
  background: #fff;
  border-radius: 2px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}
.ge-modal-box h2 { color: var(--ge-navy); font-size: 16px; margin: 0 0 12px; }
.ge-modal-box ul { padding-left: 18px; }
.ge-modal-box button {
  margin-top: 16px;
  margin-right: 8px;
  border-radius: 2px;
  padding: 10px 20px;
  min-height: 44px;
  border: 1px solid var(--ge-navy);
  background: var(--ge-navy);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
/* "Confirm and save"/"Edit email address" reuse the shared .ge-btn/
   .ge-btn--primary/.ge-btn--secondary system (static/css/styles.css),
   rather than a new modal-only button style. The override below only
   exists to win against .ge-modal-box button's own element-selector
   specificity (which otherwise forces every button in the modal navy-
   filled) - same specificity-beating idiom already used for
   .ge-form-nav .ge-save above. */
.ge-modal-box .ge-btn--secondary {
  background: #fff;
  color: var(--ge-navy);
}
/* --ge-navy-10, matching .ge-btn--secondary's own hover everywhere else it's
   used (static/css/styles.css) - this rule only exists to beat
   .ge-modal-box button's specificity, not to invent a second hover style. */
.ge-modal-box .ge-btn--secondary:hover { background: var(--ge-navy-10); }
#save-modal-confirm-text { font-weight: 700; margin: 12px 0 0; }

/* AR status disclosure - persistent, low-emphasis, legal footer text. */
.ge-ar-disclosure {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--ge-navy-20);
}
.ge-ar-disclosure p {
  font-size: 13px;
  color: var(--ge-navy-80);
  max-width: 640px;
  margin: 0;
}

/* Focus visibility */
.ge-kyc input:focus-visible,
.ge-kyc button:focus-visible,
.ge-kyc a:focus-visible {
  outline: 2px solid var(--ge-navy);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .ge-yesno { justify-content: flex-start; }
  .ge-form-nav { flex-direction: column; align-items: stretch; }
  .ge-nav-spacer { display: none; }
}