/* Fido Intake — the enquiry surface: form + AI interview chat
   ---------------------------------------------------------------------------
   LIGHT THEME (binding). Warm paper panel, ink text, one cyan accent taken
   from the fidodesign.net brand colour. The form and the chat that replaces it
   share these tokens, so the page reads as one surface.

   Scoped to .fi-wrap[data-fido-intake] (current markup) and .fido-intake
   (legacy markup) so the surrounding theme is never disturbed. A theme can
   restyle the surface by redefining these custom properties.

   Written for a light surface: every text colour below clears WCAG AA
   (4.5:1) against the paper it sits on.
   --------------------------------------------------------------------------- */

/* =========================================================================
   1. Design tokens
   ========================================================================= */

.fi-wrap[data-fido-intake],
.fido-intake {
  /* Ink */
  --fi-ink: #16181c;          /* 16.6:1 on paper */
  --fi-ink-soft: #4c5359;     /*  7.4:1 on paper */
  --fi-ink-faint: #6b7178;    /*  4.8:1 on paper — meta only */

  /* Surfaces */
  --fi-paper: #fcfaf7;        /* the panel */
  --fi-card: #ffffff;
  --fi-surface: #ffffff;
  --fi-surface-alt: #f5f2ed;  /* AI bubble — reads as a bubble on a white card */
  --fi-bubble-line: #dcd5ca;
  --fi-surface-quiet: #f7f5f1;

  /* Lines */
  --fi-line: #e6e1d9;         /* hairlines, dividers — decorative */
  --fi-line-strong: #8f877c;  /* 3.4:1 — control boundaries (WCAG 1.4.11) */

  /* Accent — deep teal for anything that must be read, brand cyan for fills */
  --fi-accent: #0b6b69;       /*  5.9:1 on paper */
  --fi-accent-ring: rgba(11, 107, 105, 0.28);
  --fi-accent-wash: #eefafa;
  --fi-accent-line: #c2dedd;  /* hairline around that wash */
  --fi-accent-fill: #00dee2;  /* brand cyan — decoration, never text */

  /* Client bubble */
  --fi-tint: #e4f8f8;
  --fi-tint-line: #c4ecec;

  /* Buttons */
  --fi-btn: #16181c;
  --fi-btn-hover: #33383f;
  --fi-btn-ink: #ffffff;
  --fi-accent-fg: #ffffff;    /* kept: legacy submit-button token */

  /* Errors */
  --fi-danger: #b3261e;       /*  5.9:1 on the error tint */
  --fi-danger-ink: #8c1d18;
  --fi-danger-bg: #fdf3f2;
  --fi-danger-line: #f0d5d1;

  /* Geometry */
  --fi-radius: 8px;
  --fi-radius-lg: 14px;
  --fi-gap: 18px;

  box-sizing: border-box;
  max-width: 760px;
  margin: 0 auto;
  padding: 34px 34px 30px;
  color: var(--fi-ink);
  background: var(--fi-paper);
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-radius-lg);
  box-shadow: 0 1px 2px rgba(22, 24, 28, 0.05), 0 18px 44px -28px rgba(22, 24, 28, 0.28);
  font-size: 16px;
  line-height: 1.55;
}

/* Author `display` beats the UA [hidden] rule, so state changes must be
   explicit or a hidden block would stay on screen. */
.fi-wrap[data-fido-intake] [hidden],
.fido-intake [hidden] {
  display: none !important;
}

/* =========================================================================
   2. Heading
   ========================================================================= */

.fi-wrap[data-fido-intake] .fi-title,
.fido-intake .fi-title {
  margin: 0 0 6px;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.015em;
  /* Must be set, not inherited: many themes (this site's included) colour
     headings white, which is invisible on the light panel. */
  color: var(--fi-ink);
}

.fi-wrap[data-fido-intake] .fi-intro,
.fido-intake .fi-intro {
  margin: 0 0 26px;
  color: var(--fi-ink-soft);
}

/* =========================================================================
   3. Form layout (unchanged geometry)
   ========================================================================= */

.fi-wrap[data-fido-intake] .fi-form,
.fido-intake .fi-form {
  display: block;
}

.fi-wrap[data-fido-intake] .fi-row,
.fido-intake .fi-row {
  display: grid;
  gap: var(--fi-gap);
  margin-bottom: var(--fi-gap);
}

@media (min-width: 640px) {
  .fi-wrap[data-fido-intake] .fi-row--2,
  .fido-intake .fi-row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.fi-wrap[data-fido-intake] .fi-field,
.fido-intake .fi-field {
  display: block;
  margin-bottom: var(--fi-gap);
}

.fi-wrap[data-fido-intake] .fi-row .fi-field,
.fido-intake .fi-row .fi-field {
  margin-bottom: 0;
}

.fi-wrap[data-fido-intake] .fi-label,
.fido-intake .fi-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.fi-wrap[data-fido-intake] .fi-label em,
.fido-intake .fi-label em {
  font-style: normal;
  color: var(--fi-danger);
}

/* =========================================================================
   4. Controls
   ========================================================================= */

.fi-wrap[data-fido-intake] input[type="text"],
.fi-wrap[data-fido-intake] input[type="email"],
.fi-wrap[data-fido-intake] select,
.fi-wrap[data-fido-intake] textarea,
.fido-intake input[type="text"],
.fido-intake input[type="email"],
.fido-intake select,
.fido-intake textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  font: inherit;
  color: var(--fi-ink);
  background: var(--fi-surface);
  border: 1px solid var(--fi-line-strong);
  border-radius: var(--fi-radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fi-wrap[data-fido-intake] input::placeholder,
.fi-wrap[data-fido-intake] textarea::placeholder,
.fido-intake input::placeholder,
.fido-intake textarea::placeholder {
  color: var(--fi-ink-faint);
  opacity: 1;
}

.fi-wrap[data-fido-intake] textarea,
.fido-intake textarea {
  resize: vertical;
  min-height: 130px;
}

.fi-wrap[data-fido-intake] input:focus,
.fi-wrap[data-fido-intake] select:focus,
.fi-wrap[data-fido-intake] textarea:focus,
.fido-intake input:focus,
.fido-intake select:focus,
.fido-intake textarea:focus {
  outline: none;
  border-color: var(--fi-accent);
  box-shadow: 0 0 0 3px var(--fi-accent-ring);
}

/* invalid state is only applied after a submit attempt, so typing is not
   punished before the user has finished */
.fi-wrap[data-fido-intake] .fi-field.is-invalid input,
.fi-wrap[data-fido-intake] .fi-field.is-invalid select,
.fi-wrap[data-fido-intake] .fi-field.is-invalid textarea,
.fido-intake .fi-field.is-invalid input,
.fido-intake .fi-field.is-invalid select,
.fido-intake .fi-field.is-invalid textarea {
  border-color: var(--fi-danger);
}

.fi-wrap[data-fido-intake] .fi-field.is-invalid input:focus,
.fi-wrap[data-fido-intake] .fi-field.is-invalid select:focus,
.fi-wrap[data-fido-intake] .fi-field.is-invalid textarea:focus,
.fido-intake .fi-field.is-invalid input:focus,
.fido-intake .fi-field.is-invalid select:focus,
.fido-intake .fi-field.is-invalid textarea:focus {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18);
}

.fi-wrap[data-fido-intake] .fi-error,
.fido-intake .fi-error {
  display: block;
  margin-top: 5px;
  min-height: 1em;
  font-size: 0.82em;
  color: var(--fi-danger);
}

/* =========================================================================
   5. Actions
   ========================================================================= */

.fi-wrap[data-fido-intake] .fi-actions,
.fido-intake .fi-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.fi-wrap[data-fido-intake] .fi-submit,
.fido-intake .fi-submit {
  padding: 13px 26px;
  font: inherit;
  font-weight: 600;
  color: var(--fi-btn-ink);
  background: var(--fi-btn);
  border: 1px solid transparent;
  border-radius: var(--fi-radius);
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.fi-wrap[data-fido-intake] .fi-submit:hover:not(:disabled),
.fido-intake .fi-submit:hover:not(:disabled) {
  background: var(--fi-btn-hover);
}

.fi-wrap[data-fido-intake] .fi-submit:focus-visible,
.fido-intake .fi-submit:focus-visible {
  outline: 3px solid var(--fi-accent);
  outline-offset: 2px;
}

.fi-wrap[data-fido-intake] .fi-submit:disabled,
.fido-intake .fi-submit:disabled {
  opacity: 0.55;
  cursor: progress;
}

.fi-wrap[data-fido-intake] .fi-status,
.fido-intake .fi-status {
  font-size: 0.88em;
  color: var(--fi-ink-soft);
}

.fi-wrap[data-fido-intake] .fi-status.is-error,
.fido-intake .fi-status.is-error {
  color: var(--fi-danger);
}

/* honeypot — off-screen rather than display:none, because some bots skip
   hidden fields but will happily fill an absolutely-positioned one */
.fi-wrap[data-fido-intake] .fi-hp,
.fido-intake .fi-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================================
   6. No-JS / fallback success block
   ========================================================================= */

.fi-wrap[data-fido-intake] .fi-success,
.fido-intake .fi-success {
  padding: 22px 24px;
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-radius);
  background: var(--fi-surface-alt);
}

.fi-wrap[data-fido-intake] .fi-success strong,
.fido-intake .fi-success strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.1em;
  color: var(--fi-ink);
}

.fi-wrap[data-fido-intake] .fi-success p,
.fido-intake .fi-success p {
  margin: 0;
  color: var(--fi-ink-soft);
}

/* =========================================================================
   7. Responsive
   ========================================================================= */

@media (max-width: 600px) {
  .fi-wrap[data-fido-intake],
  .fido-intake {
    padding: 22px 18px 20px;
    border-radius: 12px;
  }

  .fi-wrap[data-fido-intake] .fi-title,
  .fido-intake .fi-title {
    font-size: 1.35rem;
  }
}

@media (max-width: 380px) {
  .fi-wrap[data-fido-intake],
  .fido-intake {
    padding: 18px 14px 16px;
  }
}

/* =========================================================================
   8. Motion preferences
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .fi-wrap[data-fido-intake] input,
  .fi-wrap[data-fido-intake] select,
  .fi-wrap[data-fido-intake] textarea,
  .fi-wrap[data-fido-intake] .fi-submit,
  .fido-intake input,
  .fido-intake select,
  .fido-intake textarea,
  .fido-intake .fi-submit {
    transition: none;
  }
}