/*
  Styled to match ClaimForm 2.0 and Luna, which both dress from @erika/ui.

  This page cannot USE that library - it is a Vue component package and this is three static
  files with no build step - so it borrows the design language instead: the same brand gradient
  on the body, the same self-hosted typeface, and the same token values under the same names.
  Copied values, not a copied file: if the library moves a token, this does not follow on its
  own. The names are kept identical so a diff against
  `Erika Storybook/src/styles/tokens.css` is a five-minute job rather than an archaeology
  project.

  THE FONT IS SELF-HOSTED, in site/fonts/. That is not laziness about a CDN - it is the rule
  this page is built on: no third-party requests, ever. A font host would be one.
  Three weights, ~95 KB: book for text, medium for controls, bold for the greeting.
*/

@font-face {
  font-family: 'EF Circular Web';
  src: url('fonts/ef-circular-web-book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Copied from the library with the file. They keep the fallback from reflowing the page
     when the real face arrives. */
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'EF Circular Web';
  src: url('fonts/ef-circular-web-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'EF Circular Web';
  src: url('fonts/ef-circular-web-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  --font-sans: 'EF Circular Web', 'Helvetica Now', 'Helvetica', Arial, sans-serif;

  --erikapink: #9a004f;
  --erikadarkblue: #141e4e;
  --erikatitleblue: #627fa6;
  --erikawhite: #f8f8fc;

  --color-brand-pink-050: #fef1f6;
  --color-neutral-050: #f8f8fc;
  --color-neutral-200: #c8c8cd;
  --color-neutral-700: #50505a;

  /*
    The app backdrop, verbatim from the library. A radial wash of brand pink in the top-left
    over a blue-to-white sweep. `background-attachment: fixed` anchors it to the viewport so it
    does not repeat down a long page.

    It is the page backdrop, which is a different job from any surface colour - do not point it
    at a ramp stop.
  */
  --color-bg-app:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--erikapink) 6%, transparent), transparent 35%),
    linear-gradient(160deg, var(--erikatitleblue) 0%, var(--color-neutral-050) 100%);

  --color-surface-default-border: var(--color-neutral-200);
  --color-surface-muted-bg: color-mix(in srgb, var(--erikatitleblue) 8%, var(--erikawhite));
  --color-surface-muted-border: color-mix(in srgb, var(--erikatitleblue) 18%, transparent);

  --border-radius-xs: 0.5rem;
  --border-radius-s: 0.75rem;
  --border-radius-m: 1rem;
  --border-radius-full: 9999px;

  --spacing-1: 0.5rem;
  --spacing-2: 0.75rem;
  --spacing-3: 1rem;
  --spacing-4: 1.5rem;
  --spacing-5: 2rem;
  --spacing-6: 2.5rem;

  --text-small-print-fontSize: 0.75rem;
  --text-eyebrow-fontSize: 0.75rem;
  --text-body-fontSize: 1rem;
  --text-body-lineHeight: 1.5rem;
  --text-subheading-fontSize: 1.125rem;
  --text-display-hero-fontSize: clamp(1.375rem, 1.1rem + 1.12vw, 2rem);

  --typography-weight-book: 400;
  --typography-weight-medium: 500;
  --typography-weight-bold: 700;

  --shadow-brand-blue-subtle: 0 4px 12px color-mix(in srgb, var(--erikadarkblue) 6%, transparent);

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
  `hidden` is only a default of `display: none`, so any explicit display wins over it - and
  .button sets `display: inline-block`. Without this the Back button stayed visible on the
  first step while the DOM insisted it was hidden. Every state in this page is toggled with
  the attribute, so the guard has to be absolute.
*/
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  background: var(--color-bg-app);
  background-attachment: fixed;
  color: var(--erikadarkblue);
  font-family: var(--font-sans);
  font-size: var(--text-body-fontSize);
  font-weight: var(--typography-weight-book);
  line-height: var(--text-body-lineHeight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media print {
  /* The gradient is ink nobody asked for. */
  body {
    background: var(--erikawhite);
  }
}

/*
  The brand watermark, ported from @erika/ui's BrandBackdrop. All three of these are
  load-bearing and only work together:
    - `relative` is what the figure anchors to,
    - `overflow: hidden` is what CROPS it,
    - `isolation` opens a stacking context so the figure's z-index: -1 sits behind the card
      without falling through this element and disappearing behind the page gradient.
*/
.brand-backdrop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  padding:
    calc(var(--spacing-6) + env(safe-area-inset-top, 0px)) var(--spacing-3)
    calc(var(--spacing-6) + env(safe-area-inset-bottom, 0px));
}

.brand-backdrop__figure {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 42.5rem;
  max-width: 100%;

  /*
    An absolutely-positioned element paints ABOVE in-flow content, so without this the
    watermark can cover the questions.
  */
  z-index: -1;

  /* Flex, not inline: an inline wrapper forms a line box and gains a ~4px strut descender
     that floats the artwork up off the edge. */
  display: flex;
  pointer-events: none;
  opacity: 0.6;

  /*
    Tone rides on currentColor - the artwork is a single fill.

    This value is calibrated against the LIGHT END of --color-bg-app, because that is where
    the watermark is actually drawn. Do not retune it in isolation: a watermark colour is a
    RELATIONSHIP to a surface, not a standalone value. When the library briefly flattened its
    backdrop, this same colour went from lighter than its ground to darker - it crossed over,
    and under 1 L* of separation it vanishes rather than dims. If the gradient changes,
    re-derive this against it.
  */
  color: var(--color-brand-pink-050);

  /* Deliberate bleed: pushes ~45% of the figure past the bottom edge, where the wrapper's
     `overflow: hidden` crops it into a corner watermark. Changing either half alone breaks
     the composition. */
  transform: translate(15%, 45%);
}

.brand-backdrop__figure svg {
  display: block;
  width: 100%;
  height: auto;
  forced-color-adjust: none;
}

/*
  Below these sizes the figure crowds the content rather than framing it. The height stop
  catches short landscape viewports, where a bottom-anchored watermark lands in the middle of
  the form.
*/
@media (max-width: 900px), (max-height: 640px) {
  .brand-backdrop__figure {
    display: none;
  }
}

@media print {
  .brand-backdrop__figure {
    display: none;
  }
}

/*
  A resting surface has no cast: it separates from the gradient by its own lightness and by the
  hairline above, not by a shadow. That is the library's rule and it is why there is no
  box-shadow here.
*/
.card {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(var(--spacing-4), 4vw, var(--spacing-6));
  background: var(--erikawhite);
  border: 1px solid var(--color-surface-default-border);
  border-radius: var(--border-radius-m);
}

.card__brand {
  margin: 0;
  font-size: var(--text-eyebrow-fontSize);
  font-weight: var(--typography-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--erikapink);
}

.card__title {
  margin: var(--spacing-1) 0 0;
  font-size: var(--text-display-hero-fontSize);
  font-weight: var(--typography-weight-bold);
  line-height: 1.2;
}

.card__intro {
  margin: var(--spacing-2) 0 0;
  color: var(--color-neutral-700);
}

.card__intro:empty {
  display: none;
}

.state__text,
.state__thanks {
  margin: var(--spacing-4) 0;
}

.state__thanks {
  font-size: var(--text-subheading-fontSize);
  font-weight: var(--typography-weight-medium);
}

/*
  The progress line, above the question. Two halves that say the same thing to different
  audiences: a sentence for screen readers (role="status", so a step change is announced) and a
  row of pips for everyone else. The pips are aria-hidden precisely because they would otherwise
  repeat the sentence as five meaningless list items.
*/
.progress {
  margin-top: var(--spacing-5);
}

.progress__label {
  margin: 0;
  font-size: var(--text-eyebrow-fontSize);
  font-weight: var(--typography-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--erikapink);
}

.progress__steps {
  display: flex;
  gap: 0.375rem;
  margin: var(--spacing-1) 0 0;
  padding: 0;
  list-style: none;
}

.progress__pip {
  flex: 1 1 0;
  height: 0.25rem;
  border-radius: var(--border-radius-full);
  background: var(--color-surface-muted-bg);
  border: 1px solid var(--color-surface-muted-border);
}

.progress__pip--done,
.progress__pip--current {
  background: var(--erikadarkblue);
  border-color: var(--erikadarkblue);
}

/*
  The step being answered. Only one is ever visible; the rest carry the `hidden` attribute.
  tabindex="-1" makes it focusable so focus can move here on a step change, and the outline is
  suppressed because the claimant did not ask for focus - they answered a question.
*/
.step:focus {
  outline: none;
}

.step:focus-visible {
  outline: 2px solid var(--erikatitleblue);
  outline-offset: 4px;
  border-radius: var(--border-radius-xs);
}

.question {
  margin: var(--spacing-4) 0 0;
  padding: 0;
  border: 0;
}

.question__legend {
  display: block;
  padding: 0;
  font-size: var(--text-subheading-fontSize);
  font-weight: var(--typography-weight-medium);
  line-height: 1.4;
}

/*
  The row never wraps. With a flex-basis the six options tip onto a second line somewhere
  around 400px wide and the claimant gets "1 2 3 4 5" over a full-width "6", which reads as a
  different question. `flex: 1 1 0` with `min-width: 0` makes them share whatever width there
  is, so the scale stays one row down to the narrowest phone.

  Width is allowed to fall below 44px on a very small screen; height is not. That keeps the
  target comfortably past the WCAG 2.2 AA minimum (24x24) at every width, and at the AAA 44px
  on anything from about 380px up.
*/
.scale {
  display: flex;
  gap: var(--spacing-1);
  margin-top: var(--spacing-3);
}

.scale__option {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 420px) {
  .scale {
    gap: 0.25rem;
  }
}

.scale__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.scale__label {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 2.75rem: the 44px target the WCAG 2.2 pointer-size rule asks for. */
  min-height: 2.75rem;
  border: 1px solid var(--color-surface-default-border);
  border-radius: var(--border-radius-xs);
  background: var(--erikawhite);
  color: var(--erikadarkblue);
  font-weight: var(--typography-weight-medium);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.scale__label:hover {
  border-color: var(--erikatitleblue);
  box-shadow: var(--shadow-brand-blue-subtle);
}

.scale__input:checked + .scale__label {
  background: var(--erikadarkblue);
  border-color: var(--erikadarkblue);
  color: var(--erikawhite);
}

.scale__input:focus-visible + .scale__label {
  outline: 2px solid var(--erikatitleblue);
  outline-offset: 2px;
}

.scale__ends {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-3);
  margin-top: var(--spacing-1);
  font-size: var(--text-small-print-fontSize);
  color: var(--color-neutral-700);
}

.field__input {
  display: block;
  width: 100%;
  min-height: 6rem;
  margin-top: var(--spacing-3);
  padding: var(--spacing-2);
  border: 1px solid var(--color-surface-default-border);
  border-radius: var(--border-radius-xs);
  background: var(--erikawhite);
  color: var(--erikadarkblue);
  font: inherit;
  resize: vertical;
}

.field__input:focus-visible {
  outline: 2px solid var(--erikatitleblue);
  outline-offset: 1px;
}

.field__counter {
  margin: 0.375rem 0 0;
  font-size: var(--text-small-print-fontSize);
  color: var(--color-neutral-700);
  text-align: right;
}

.form__error {
  margin: var(--spacing-4) 0 0;
  padding: var(--spacing-2) var(--spacing-3);
  border-left: 3px solid var(--erikapink);
  border-radius: var(--border-radius-xs);
  background: var(--color-surface-muted-bg);
  color: var(--erikapink);
}

/*
  Either button can be absent - Back on the first step, Next until the question is answered - so
  the row is laid out to keep whichever remains on its own side rather than drifting to the
  middle.
*/
.nav {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-3);
  margin-top: var(--spacing-5);
}

.nav .button {
  margin-top: 0;
}

.nav #back-button[hidden] + .button {
  margin-left: auto;
}

.button {
  display: inline-block;
  margin-top: var(--spacing-5);
  padding: var(--spacing-2) var(--spacing-5);
  min-height: 2.75rem;
  border: 1px solid var(--erikadarkblue);
  border-radius: var(--border-radius-full);
  background: var(--erikadarkblue);
  color: var(--erikawhite);
  font: inherit;
  font-weight: var(--typography-weight-medium);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--erikadarkblue) 88%, #ffffff);
}

.button:focus-visible {
  outline: 2px solid var(--erikatitleblue);
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.65;
  cursor: default;
}

/*
  Placed after .button on purpose: same specificity, so source order decides, and the variant
  has to be able to override the base background.
*/
.button--ghost {
  background: transparent;
  color: var(--erikadarkblue);
  border-color: var(--color-surface-default-border);
}

.button--ghost:hover:not(:disabled) {
  background: var(--color-surface-muted-bg);
  border-color: var(--erikadarkblue);
}

.button--link {
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .scale__label,
  .button {
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease,
      box-shadow 120ms ease;
  }
}