/* ==========================================================================
   "Where AI Actually Fits" — interactive tool
   Variables are scoped to .wai-root (NOT :root) so they can't overwrite the
   site palette in styles.css. Values re-mapped to the logo colours.
   ========================================================================== */

.wai-root {
  /* light theme (default) */
  --navy: #0b1636;                      /* primary text */
  --navy-soft: #4a5578;                 /* secondary text */
  --blue: #1a5fe0;
  --cyan: #0093c8;
  --bg: #ffffff;                        /* card surface */
  --bg-soft: #f5f7fb;                   /* inset surface */
  --line: rgba(11, 27, 107, .12);
  --muted: #7b86a6;
  --green: #12855a; --green-bg: #eafaf0; --green-line: #bce8d2;
  --amber: #97650f; --amber-bg: #fdf3e0; --amber-line: #f0dcae;
  --red:   #b73b3b; --red-bg:   #fdecec; --red-line:   #f3c9c9;
  --grad: linear-gradient(90deg, #1a5fe0, #00b4f0);
  --card-grad: #ffffff;
  --card-shadow: 0 24px 60px rgba(11, 27, 107, .12);
  --capture-grad: linear-gradient(160deg, #eef4ff, #f4f9ff);
  --input-bg: #ffffff;
}

/* dark theme remap — same roles, futuristic surface */
:root[data-theme="dark"] .wai-root {
  --navy: #f2f6ff;
  --navy-soft: #9aa8cf;
  --blue: #4f9dff;
  --cyan: #00b4f0;
  --bg: rgba(255, 255, 255, .045);
  --bg-soft: rgba(255, 255, 255, .025);
  --line: rgba(122, 152, 255, .18);
  --muted: #6b7aa8;
  --green: #4ade9b; --green-bg: rgba(74, 222, 155, .1);  --green-line: rgba(74, 222, 155, .32);
  --amber: #fbc85c; --amber-bg: rgba(251, 200, 92, .1);  --amber-line: rgba(251, 200, 92, .32);
  --red:   #ff8b8b; --red-bg:   rgba(255, 139, 139, .1); --red-line:   rgba(255, 139, 139, .32);
  --card-grad: linear-gradient(160deg, rgba(13, 24, 66, .8), rgba(6, 13, 42, .55));
  --card-shadow: 0 28px 70px rgba(0, 0, 0, .5);
  --capture-grad: linear-gradient(160deg, rgba(26, 95, 224, .16), rgba(0, 180, 240, .06));
  --input-bg: rgba(255, 255, 255, .07);
}

.wai-root *, .wai-root *::before, .wai-root *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.wai-root {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--navy);
}
.wai-wrap { width: 100%; max-width: 720px; margin: 0 auto; }

.wai-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
}
.wai-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--grad); display: inline-block; border-radius: 2px; }
.wai-title { font-weight: 700; font-size: clamp(23px, 3.4vw, 30px); line-height: 1.2; margin: 0 0 6px; color: var(--navy); letter-spacing: -.02em; }
.wai-sub { color: var(--muted); font-size: 14.5px; margin: 0 0 26px; max-width: 56ch; line-height: 1.55; }

.wai-steps { display: flex; gap: 6px; margin-bottom: 26px; }
.wai-step-dot { height: 4px; flex: 1; background: var(--line); border-radius: 3px; overflow: hidden; }
.wai-step-dot-fill { height: 100%; width: 0%; background: var(--grad); transition: width .3s ease; }

.wai-card {
  background: var(--card-grad);
  border: 1px solid var(--line); border-radius: 18px; padding: 26px;
  backdrop-filter: blur(16px);
  box-shadow: var(--card-shadow);
}
.wai-phase { display: none; }
.wai-phase.is-active { display: block; }

/* Phase A: industry */
.wai-industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wai-industry-card {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 16px 10px; text-align: center;
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--navy-soft);
  background: var(--bg); font-family: inherit; width: 100%;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.wai-industry-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wai-industry-card:hover { border-color: var(--blue); }
.wai-industry-card.is-selected { border-color: var(--blue); background: var(--bg-soft); color: var(--navy); }

/* Phase B: blocks */
.wai-buildarea {
  min-height: 120px; border: 1.5px dashed var(--line); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;
  background: var(--bg-soft); transition: border-color .15s ease, background .15s ease;
}
.wai-buildarea.is-dropzone { border-color: var(--blue); background: #eef3ff; }
.wai-buildarea-hint { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--muted); text-align: center; padding: 20px 0; }
.wai-block-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
  animation: wai-slide .2s ease;
}
@keyframes wai-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.wai-block-order { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--muted); width: 18px; }
.wai-block-label { font-size: 13.5px; font-weight: 600; flex: 1; }
.wai-block-remove { color: var(--muted); cursor: pointer; font-size: 15px; padding: 2px 6px; background: none; border: 0; line-height: 1; }
.wai-block-remove:hover { color: var(--red); }

.wai-bench { display: flex; flex-wrap: wrap; gap: 8px; }
.wai-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 20px;
  padding: 8px 14px; cursor: grab; font-size: 13px; font-weight: 500; color: var(--navy);
  font-family: inherit;
  user-select: none; touch-action: none; transition: border-color .15s ease, background .15s ease;
}
.wai-chip:hover { border-color: var(--blue); }
.wai-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wai-chip.is-placed { opacity: .32; cursor: default; pointer-events: none; }
.wai-ghost {
  position: fixed; z-index: 999; pointer-events: none;
  background: #1a5fe0; color: #fff; border-radius: 8px; padding: 7px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 600; transform: translate(-50%, -50%); opacity: .92;
}

/* Phase C: who/time */
.wai-qrow { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.wai-qrow-label { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.wai-qgroup { margin-bottom: 8px; }
.wai-qgroup-label { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.wai-qchips { display: flex; flex-wrap: wrap; gap: 6px; }
.wai-qchip {
  border: 1px solid var(--line); border-radius: 16px; padding: 6px 12px; font-size: 12.5px; cursor: pointer;
  background: var(--bg); font-family: inherit;
  color: var(--navy-soft); transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.wai-qchip:hover { border-color: var(--blue); }
.wai-qchip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wai-qchip.is-selected { border-color: var(--blue); background: var(--blue); color: #fff; }

/* buttons */
.wai-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 22px; }
.wai-btn-primary {
  background: var(--grad); border: none; color: #fff; font-weight: 600; font-size: 14px;
  padding: 12px 24px; border-radius: 9px; cursor: pointer; font-family: 'Inter', sans-serif;
}
.wai-btn-primary:disabled { opacity: .35; cursor: not-allowed; }
.wai-btn-ghost {
  background: none; border: 1px solid var(--line); color: var(--muted); font-size: 13px;
  padding: 10px 16px; border-radius: 9px; cursor: pointer; font-family: 'Inter', sans-serif;
}
.wai-btn-ghost:hover { color: var(--navy); border-color: var(--navy-soft); }
.wai-hint-text { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--muted); }

/* Phase D: results */
.wai-result-block { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wai-result-block:last-child { border-bottom: none; }
.wai-pill {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 12px; white-space: nowrap;
}
.wai-pill.ai     { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-line); }
.wai-pill.hybrid { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-line); }
.wai-pill.human  { background: var(--red-bg);   color: var(--red);   border: 1px solid var(--red-line); }
.wai-result-label { flex: 1; font-size: 13.5px; font-weight: 600; }
.wai-result-hours { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--muted); width: 60px; text-align: right; }

.wai-section-title { font-size: 15px; font-weight: 700; margin: 26px 0 10px; }
.wai-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wai-bar-label { width: 110px; font-size: 12.5px; color: var(--navy-soft); flex: none; }
.wai-bar-track { flex: 1; height: 8px; background: var(--bg-soft); border-radius: 4px; overflow: hidden; }
.wai-bar-fill { height: 100%; background: var(--grad); border-radius: 4px; transition: width .5s ease; }
.wai-bar-val { width: 50px; text-align: right; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--muted); }

.wai-callout { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-top: 22px; text-align: center; }
.wai-callout-num { font-size: 38px; font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.wai-callout-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.wai-callout-translate { font-size: 13.5px; color: var(--navy-soft); margin-top: 10px; line-height: 1.6; }

.wai-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 8px; }
.wai-col { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.wai-col-title { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.wai-col.ai     .wai-col-title { color: var(--green); }
.wai-col.human  .wai-col-title { color: var(--red); }
.wai-col.hybrid .wai-col-title { color: var(--amber); }
.wai-col ul { margin: 0; padding-left: 16px; font-size: 13px; color: var(--navy-soft); line-height: 1.7; }

.wai-insight-line { font-size: 13.5px; color: var(--navy-soft); line-height: 1.7; margin-top: 6px; }
.wai-insight-line strong { color: var(--navy); }

.wai-recs { margin-top: 8px; }
.wai-rec { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.wai-rec:last-child { border-bottom: none; }
.wai-rec-num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; font-weight: 700; color: var(--blue); flex: none; width: 22px; }
.wai-rec-text { font-size: 13.5px; color: var(--navy-soft); line-height: 1.6; }

/* lead capture */
.wai-capture {
  border: 1px solid rgba(0, 180, 240, .3);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 24px;
  background: var(--capture-grad);
}
.wai-capture[hidden] { display: none; }
.wai-capture-title { font-size: 15.5px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.wai-capture-sub { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; max-width: 62ch; }

.wai-capture-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wai-field { margin-bottom: 12px; }
.wai-field label { display: block; font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: 5px; }
.wai-optional { font-weight: 400; color: var(--muted); }
.wai-field input {
  width: 100%; padding: 10px 13px; font-family: inherit; font-size: 13.5px; color: var(--navy);
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wai-field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26, 95, 224, .12); }
.wai-field input:disabled { opacity: .6; }

/* honeypot — off-screen, never shown to a person */
.wai-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wai-consent { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--navy-soft); line-height: 1.55; margin: 4px 0 16px; cursor: pointer; }
.wai-consent input { margin-top: 2px; accent-color: var(--blue); flex: none; }

.wai-capture-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wai-capture-actions .wai-btn-ghost[hidden] { display: none; }

.wai-form-status { display: none; margin-top: 13px; font-size: 12.5px; line-height: 1.6; padding: 10px 13px; border-radius: 9px; }
.wai-form-status.is-visible { display: block; }
.wai-form-status.is-ok { background: var(--green-bg); border: 1px solid var(--green-line); color: var(--green); }
.wai-form-status.is-error { background: var(--red-bg); border: 1px solid var(--red-line); color: var(--red); }
.wai-form-status a { color: inherit; text-decoration: underline; }

#wai-results-body[hidden] { display: none; }

@media (max-width: 520px) {
  .wai-capture-row { grid-template-columns: 1fr; gap: 0; }
  .wai-capture-actions .wai-btn-primary,
  .wai-capture-actions .wai-btn-ghost { width: 100%; }
}

.wai-cta-box { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.wai-cta-text { font-size: 13.5px; color: var(--navy-soft); line-height: 1.7; margin: 0 0 16px; }
.wai-cta-btn {
  display: inline-block; background: var(--grad); color: #fff; font-weight: 600; font-size: 14px;
  padding: 13px 26px; border-radius: 9px; text-decoration: none; font-family: 'Inter', sans-serif;
}
.wai-cta-btn:hover { color: #fff; }

@media (max-width: 600px) { .wai-three-col { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .wai-industry-grid { grid-template-columns: repeat(2, 1fr); }
  .wai-card { padding: 20px; }
  .wai-actions { flex-wrap: wrap; }
  .wai-bar-label { width: 88px; }
}