/* =========================================================
   EFC Design System — Colors & Type
   Load this once at the top of any HTML file, then use the
   CSS variables or the semantic classes defined below.
   ========================================================= */

/* --- Fonts ------------------------------------------------ */
@font-face {
  font-family: "Matter";
  src: url("fonts/Matter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Matter";
  src: url("fonts/Matter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Matter";
  src: url("fonts/Matter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand colors ------------------------------------- */
  --efc-navy:        #143d5c;  /* primary — headings, nav, buttons */
  --efc-orange:      #f05929;  /* accent — CTAs, highlights (sparingly) */
  --efc-sky:         #bcd6e3;  /* supporting tone — surfaces, hovers, fills */
  --efc-white:       #ffffff;  /* primary surface */
  --efc-ink:         #141414;  /* primary text (not pure black) */

  /* --- Navy scale (tints/shades of --efc-navy) ---------- */
  --efc-navy-900:    #0b2437;
  --efc-navy-800:    #103049;
  --efc-navy-700:    #143d5c;  /* = --efc-navy */
  --efc-navy-600:    #2a5275;
  --efc-navy-500:    #4a6f8e;
  --efc-navy-400:    #7591aa;
  --efc-navy-300:    #a6bccd;
  --efc-navy-200:    #cdd9e4;
  --efc-navy-100:    #e6ecf2;
  --efc-navy-50:     #f3f6f9;

  /* --- Sky scale (tints of --efc-sky) ------------------ */
  --efc-sky-600:     #7aa9c0;
  --efc-sky-500:     #9cc0d2;
  --efc-sky-400:     #bcd6e3;  /* = --efc-sky */
  --efc-sky-300:     #d0e2ec;
  --efc-sky-200:     #e2eef4;
  --efc-sky-100:     #f0f6f9;

  /* --- Orange scale ------------------------------------ */
  --efc-orange-700:  #c44418;
  --efc-orange-600:  #d84d1e;
  --efc-orange-500:  #f05929;  /* = --efc-orange */
  --efc-orange-400:  #f47a52;
  --efc-orange-300:  #f9a587;
  --efc-orange-200:  #fccfbd;
  --efc-orange-100:  #fdeae0;

  /* --- Neutrals ---------------------------------------- */
  --efc-ink-900:     #141414;  /* = --efc-ink */
  --efc-ink-700:     #3d3d3d;
  --efc-ink-500:     #6a6a6a;
  --efc-ink-400:     #8e8e8e;
  --efc-ink-300:     #b8b8b8;
  --efc-ink-200:     #dcdcdc;
  --efc-ink-100:     #ececec;
  --efc-ink-50:      #f6f6f6;

  /* --- Semantic foreground / background ---------------- */
  --fg-1:            var(--efc-ink-900);  /* primary body text */
  --fg-2:            var(--efc-ink-700);  /* secondary text */
  --fg-3:            var(--efc-ink-500);  /* tertiary / meta */
  --fg-muted:        var(--efc-ink-400);  /* placeholders, disabled */
  --fg-on-navy:      var(--efc-white);    /* text on navy bg */
  --fg-on-orange:    var(--efc-white);    /* text on orange bg */
  --fg-brand:        var(--efc-navy);     /* branded headings */
  --fg-accent:       var(--efc-orange);   /* accent text (rare) */

  --bg-canvas:       var(--efc-white);    /* default page */
  --bg-subtle:       var(--efc-sky-100);  /* panels, alt sections */
  --bg-soft:         var(--efc-sky-200);  /* cards on canvas */
  --bg-brand:        var(--efc-navy);     /* dark surfaces */
  --bg-accent:       var(--efc-orange);   /* CTA surface */

  /* --- Borders / dividers ------------------------------ */
  --border-subtle:   #e6ecf2;             /* = --efc-navy-100 */
  --border-default:  #cdd9e4;             /* = --efc-navy-200 */
  --border-strong:   var(--efc-navy-500);
  --border-focus:    var(--efc-orange);

  /* --- Feedback ---------------------------------------- */
  --success:         #2d8a5f;
  --success-bg:      #e4f4ec;
  --warning:         #c08314;
  --warning-bg:      #fbf0d8;
  --danger:          #c43a1f;
  --danger-bg:       #fbe5df;
  --info:            var(--efc-navy);
  --info-bg:         var(--efc-sky-200);

  /* --- Type -------------------------------------------- */
  --font-sans:       "Matter", ui-sans-serif, system-ui, -apple-system,
                     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:       "JetBrains Mono", ui-monospace, "SFMono-Regular",
                     Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;

  /* Type scale (based on 16px) */
  --fs-display-xl:   72px;
  --fs-display-lg:   56px;
  --fs-display-md:   44px;
  --fs-h1:           36px;
  --fs-h2:           28px;
  --fs-h3:           22px;
  --fs-h4:           18px;
  --fs-body-lg:      18px;
  --fs-body:         16px;
  --fs-body-sm:      14px;
  --fs-caption:      12px;
  --fs-eyebrow:      12px;

  /* Line heights */
  --lh-tight:        1.05;
  --lh-snug:         1.2;
  --lh-normal:       1.45;
  --lh-loose:        1.6;

  /* Tracking */
  --ls-tight:        -0.02em;
  --ls-snug:         -0.01em;
  --ls-normal:       0em;
  --ls-wide:         0.04em;
  --ls-eyebrow:      0.14em;

  /* --- Spacing (4px base) ------------------------------ */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* --- Radii ------------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* --- Shadows / elevation ----------------------------- */
  --shadow-xs: 0 1px 2px rgba(20, 61, 92, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 61, 92, 0.08);
  --shadow-md: 0 8px 20px rgba(20, 61, 92, 0.10);
  --shadow-lg: 0 20px 44px rgba(20, 61, 92, 0.14);
  --shadow-xl: 0 32px 64px rgba(20, 61, 92, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* --- Motion ------------------------------------------ */
  --ease-standard:  cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-entrance:  cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-exit:      cubic-bezier(0.4, 0, 0.8, 0.3);
  --dur-fast:       120ms;
  --dur-base:       200ms;
  --dur-slow:       320ms;

  /* --- Layout ------------------------------------------ */
  --container-sm:   640px;
  --container-md:   960px;
  --container-lg:   1200px;
  --container-xl:   1440px;
}

/* ---------------------------------------------------------
   Base element styles (semantic type)
   --------------------------------------------------------- */
html { color: var(--fg-1); background: var(--bg-canvas); }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-brand);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); }

p  { margin: 0; color: var(--fg-1); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-semibold); color: var(--fg-brand); }
.display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-semibold); color: var(--fg-brand); }
.display-md { font-size: var(--fs-display-md); line-height: var(--lh-snug);  letter-spacing: var(--ls-snug);  font-weight: var(--fw-semibold); color: var(--fg-brand); }

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); }
.body    { font-size: var(--fs-body);    line-height: var(--lh-normal); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-3); }

code, pre, .mono { font-family: var(--font-mono); }

a {
  color: var(--efc-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--efc-orange); }

::selection { background: var(--efc-sky); color: var(--efc-navy); }
  /* ============ Wizard — shared ============ */
  .efc-wiz, .efc-wiz *, .efc-wiz *::before, .efc-wiz *::after { box-sizing: border-box; }
  .efc-wiz {
    height: 100%;
    font-family: var(--font-sans);
    color: var(--fg-1);
    border-radius: inherit;
    overflow: hidden;
  }

  .efc-fields { flex: 1; min-height: 0; overflow-y: auto; }
  .efc-step { animation: efcIn .32s var(--ease-entrance); }
  @keyframes efcIn { from { transform: translateY(7px); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) { .efc-step, .efc-success { animation: none !important; } }

  .efc-step-head { margin-bottom: 22px; }
  .efc-step-title { font-size: 24px; line-height: 1.15; }
  .efc-step-sub { margin-top: 7px; color: var(--fg-2); font-size: 15px; line-height: 1.5; }

  .efc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 18px; }
  .efc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .efc-field.full { grid-column: 1 / -1; }
  .efc-field.half { grid-column: span 1; }
  .efc-pair { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1px 1fr; align-items: start; gap: 0 20px; background: var(--efc-sky-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 15px 18px; }
  .efc-pair-col { min-width: 0; }
  .efc-pair-div { width: 1px; align-self: stretch; background: var(--border-default); }
  .efc-label { font-size: 13px; font-weight: var(--fw-medium); color: var(--efc-navy); display: inline-flex; gap: 3px; }
  .efc-req { color: var(--efc-orange); }
  .efc-help { font-size: 12px; color: var(--fg-3); }
  .efc-help.err { color: var(--danger); }

  .efc-input {
    width: 100%;
    border: 1px solid var(--border-default);
    background: #fff;
    border-radius: var(--radius-md);
    padding: 11px 13px;
    font: var(--fw-regular) 15px/1.4 var(--font-sans);
    color: var(--efc-ink);
    transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  }
  .efc-input::placeholder { color: var(--fg-muted); }
  .efc-input:focus { outline: none; border-color: var(--efc-orange); box-shadow: 0 0 0 3px var(--efc-orange-100); }
  .efc-input.err { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
  textarea.efc-input { resize: none; line-height: 1.5; }

  .efc-segment { display: flex; gap: 6px; }
  .efc-seg-btn {
    flex: 1; border: 1px solid var(--border-default); background: #fff;
    border-radius: var(--radius-md); padding: 10px 6px; cursor: pointer; white-space: nowrap;
    font: var(--fw-medium) 13px var(--font-sans); color: var(--efc-navy);
    transition: all var(--dur-fast) var(--ease-standard);
  }
  .efc-seg-btn:hover { background: var(--efc-sky-100); }
  .efc-seg-btn.on { background: var(--efc-navy); color: #fff; border-color: var(--efc-navy); }

  .efc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .efc-chip {
    border: 1px solid var(--border-default); background: #fff;
    border-radius: var(--radius-pill); padding: 8px 15px; cursor: pointer;
    font: var(--fw-medium) 13px var(--font-sans); color: var(--efc-navy);
    transition: all var(--dur-fast) var(--ease-standard);
  }
  .efc-chip:hover { background: var(--efc-sky-100); border-color: var(--efc-navy-300); }
  .efc-chip.on { background: var(--efc-navy); color: #fff; border-color: var(--efc-navy); }
  .efc-chip.on::before { content: "✓ "; color: var(--efc-orange-300); }

  .efc-examples { display: flex; flex-direction: column; gap: 7px; }
  .efc-example {
    display: flex; align-items: center; justify-content: space-between;
    border: 1px solid var(--border-default); background: var(--efc-sky-100);
    border-radius: var(--radius-md); padding: 11px 14px;
    font: var(--fw-medium) 14px var(--font-sans); color: var(--efc-navy);
    text-decoration: none; transition: all var(--dur-fast) var(--ease-standard);
  }
  .efc-example:hover { background: #fff; border-color: var(--efc-navy-300); }
  .efc-example-arrow { color: var(--efc-orange); font-size: 13px; }

  /* footer nav */
  .efc-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border-subtle); }
  .efc-nav-count { font-size: 13px; color: var(--fg-3); }
  .efc-btn {
    border: 1px solid transparent; border-radius: var(--radius-md);
    padding: 11px 20px; cursor: pointer; white-space: nowrap;
    font: var(--fw-semibold) 14px var(--font-sans);
    transition: all var(--dur-fast) var(--ease-standard);
  }
  .efc-btn.primary { background: var(--efc-orange); color: #fff; }
  .efc-btn.primary:hover { background: var(--efc-orange-600); }
  .efc-btn.primary:active { background: var(--efc-orange-700); transform: translateY(1px); }
  .efc-btn.ghost { background: #fff; color: var(--efc-navy); border-color: var(--border-default); }
  .efc-btn.ghost:hover { background: var(--efc-sky-100); border-color: var(--efc-navy-300); }
  .efc-btn:disabled { opacity: .4; cursor: not-allowed; }

  /* success */
  .efc-success { padding: 44px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; animation: efcIn .32s var(--ease-entrance); }
  .efc-success-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--success-bg); color: var(--success); display: grid; place-items: center; margin-bottom: 22px; }
  .efc-success-title { font-size: 26px; }
  .efc-success-sub { max-width: 430px; margin-top: 11px; color: var(--fg-2); font-size: 15px; line-height: 1.55; }
  .efc-success-sub strong { color: var(--efc-navy); }
  .efc-success-recap { width: 100%; max-width: 390px; margin: 26px 0 22px; background: var(--efc-sky-100); border-radius: var(--radius-lg); padding: 4px 18px; text-align: left; }
  .efc-recap-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--efc-navy-100); font-size: 14px; }
  .efc-recap-row:last-child { border-bottom: none; }
  .efc-recap-row span { color: var(--fg-3); }
  .efc-recap-row strong { color: var(--efc-navy); font-weight: var(--fw-semibold); text-align: right; word-break: break-word; }

  /* ============ A · SPLIT ============ */
  .efc-wiz.split { display: flex; background: #fff; }
  .efc-side { position: relative; width: 296px; flex-shrink: 0; background: var(--efc-navy); color: #fff; padding: 32px 28px; display: flex; flex-direction: column; overflow: hidden; }
  .efc-side-logo { height: 32px; width: auto; align-self: flex-start; }
  .efc-side-intro { margin-top: 30px; }
  .efc-eyebrow { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--efc-orange-300); }
  .efc-side-blurb { margin-top: 10px; color: var(--efc-sky); font-size: 14px; line-height: 1.5; }
  .efc-vstep { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
  .efc-vstep-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 14px; font-weight: var(--fw-medium); color: var(--efc-navy-300); transition: color .2s; }
  .efc-vstep-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: var(--fw-semibold); border: 1.5px solid var(--efc-navy-500); flex-shrink: 0; transition: color .2s; }
  .efc-vstep-item.active { color: #fff; }
  .efc-vstep-item.active .efc-vstep-dot { background: var(--efc-orange); border-color: var(--efc-orange); color: #fff; }
  .efc-vstep-item.done { color: var(--efc-sky); }
  .efc-vstep-item.done .efc-vstep-dot { background: var(--efc-navy-600); border-color: var(--efc-navy-600); color: #fff; }
  .efc-side-foot { margin-top: auto; font-size: 12px; color: var(--efc-navy-400); position: relative; z-index: 1; }
  .efc-side-arc { position: absolute; right: -90px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(240,89,41,.22), transparent 68%); pointer-events: none; }
  .efc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .split .efc-fields { padding: 38px 40px 22px; }
  .split .efc-nav { margin: 0 40px; padding: 18px 0; }

/* ============ Standalone full-page mount ============ */
html, body { margin: 0; height: 100%; }
body { background: var(--efc-navy); }   /* matches the split sidebar — no white flash */
#root { height: 100vh; }
.efc-wiz.split { height: 100vh; }

/* ============ Honeypot (spam trap — never shown to humans) ============ */
.efc-hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* ============ Submission error banner ============ */
.efc-error {
  margin: 0 40px 4px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  color: var(--danger);
  font: var(--fw-medium) 13px/1.45 var(--font-sans);
}

/* ============ Mobile step progress (hidden on desktop) ============ */
.efc-mprogress { display: none; }
.efc-mprogress-count { font-size: 13px; color: var(--fg-3); font-weight: var(--fw-medium); }
.efc-mprogress-bar { height: 5px; border-radius: 999px; background: var(--efc-navy-100); overflow: hidden; }
.efc-mprogress-fill { height: 100%; background: var(--efc-orange); transition: width var(--dur-slow) var(--ease-standard); }

/* ============ Keyboard focus rings for custom buttons ============ */
.efc-seg-btn:focus-visible,
.efc-chip:focus-visible,
.efc-btn:focus-visible,
.efc-example:focus-visible {
  outline: 2px solid var(--efc-orange);
  outline-offset: 2px;
}

/* ============ Mobile (≤720px): collapse sidebar to a top band ============ */
@media (max-width: 720px) {
  .efc-wiz.split { flex-direction: column; height: auto; min-height: 100vh; }

  .efc-side {
    width: auto; flex-direction: row; align-items: center;
    gap: 14px; padding: 14px 18px;
  }
  .efc-side-logo { height: 26px; }
  .efc-side-intro, .efc-vstep, .efc-side-foot, .efc-side-arc { display: none; }

  .efc-main { min-height: 0; }

  /* Slim step progress under the band */
  .efc-mprogress {
    display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 0;
  }

  /* Single-column fields + stacked paired panels */
  .split .efc-fields { padding: 18px 20px; }
  .efc-grid { grid-template-columns: 1fr; }
  .efc-field.half { grid-column: 1 / -1; }
  .efc-pair { grid-template-columns: 1fr; gap: 14px; }
  .efc-pair-div { display: none; }
  .split .efc-nav, .efc-error { margin: 0 20px; }
}