/**
 * AI Readiness Check (FW-73) — styles for [farseer_ai_readiness_check].
 *
 * Plain CSS (no Vite build). Every rule is scoped under `.fai` with at least
 * two classes, so it wins over the `.art-html` element styles the HTML page
 * builder element wraps around it (buttons, inputs, labels, list bullets).
 * rem units follow the theme's fluid root font-size (1rem ≈ 16px).
 */

.fai {
  --fai-blue: var(--color-blue, #4F52FF);
  --fai-pink: var(--color-pink, #FF60A5);
  --fai-text: var(--color-black, #0A0A0A);
  --fai-surface: var(--color-white, #FFFFFF);
  --fai-line: #DDDDDD;
  --fai-tint-blue: #DCDCFF;
  --fai-tint-pink: #FFF2F6;
  --fai-tint-yellow: #FFF8EB;
  --fai-tint-green: #F2FBF2;

  /* The page builder zeroes the HTML element's own padding, so the check
     brings its side gutters with it. */
  --fai-gutter: var(--container-pad, 1.875rem);
  box-sizing: border-box;
  max-width: calc(47.5rem + 2 * var(--fai-gutter));
  margin: 0 auto;
  padding: 3.5rem var(--fai-gutter) 5rem;
  font-family: var(--font-primary, 'Roobert', system-ui, sans-serif);
  color: var(--fai-text);
  line-height: 1.4;
}

.fai .fai__view { display: none; }
.fai .fai__view.is-on { display: block; animation: fai-in .35s ease; }
@keyframes fai-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }

/* Typography ------------------------------------------------------------ */

.fai .fai__title {
  font-size: 5rem;
  line-height: .95;
  letter-spacing: -.04em;
  font-weight: 700;
  margin: 0 0 1.75rem;
}
.fai .fai__h2 {
  font-size: 2.625rem;
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 700;
  margin: 0 0 1.25rem;
}
.fai .fai__h3 {
  font-size: 1.375rem;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0 0 .25rem;
}
.fai .fai__view :where(p) {
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: -.01em;
  margin: 0 0 1rem;
}
.fai .fai__lead {
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0 0 2.25rem;
  max-width: 36em;
}
.fai .fai__small { font-size: .9375rem; opacity: .85; margin: 1.875rem 0 0; }
.fai .fai__meta { font-size: .875rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .625rem; }
.fai .fai__q {
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 700;
  margin: 0 0 1.75rem;
  outline: none;
}
.fai .fai__hint { margin: -.875rem 0 1.375rem; font-size: 1.0625rem; }
.fai [hidden] { display: none !important; }

/* Buttons --------------------------------------------------------------- */

.fai .fai__btn {
  display: inline-block;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  border: 0;
  border-radius: 999px;
  padding: 1rem 1.875rem;
  cursor: pointer;
  background: var(--fai-blue);
  color: #fff;
  text-decoration: none;
  transition: background-color .2s ease, opacity .2s ease;
}
.fai .fai__btn:hover { background: var(--color-blue-dark, #4C34FF); color: #fff; }
.fai .fai__btn:disabled { opacity: .4; cursor: default; background: var(--fai-blue); }
.fai .fai__next { margin-top: 1.5rem; }

.fai .fai__btn--light,
.fai .fai__btn--light:hover { background: #fff; color: var(--fai-text); }
.fai .fai__btn--light:hover { opacity: .9; }

.fai .fai__link {
  display: block;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--fai-text);
  cursor: pointer;
  margin-top: 1.625rem;
  padding: .375rem 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.fai .fai__link:hover { background: none; color: var(--fai-blue); }

.fai .fai__btn:focus-visible,
.fai .fai__opt:focus-visible,
.fai .fai__link:focus-visible { outline: 3px solid var(--fai-pink); outline-offset: 3px; }

/* Progress -------------------------------------------------------------- */

.fai .fai__bar { height: 6px; background: var(--fai-line); border-radius: 6px; overflow: hidden; margin: .375rem 0 2.5rem; }
.fai .fai__bar i { display: block; height: 100%; width: 0; background: var(--fai-blue); transition: width .3s ease; }

.fai .fai__part {
  display: inline-block;
  background: var(--fai-tint-blue);
  color: #000;
  border-radius: 999px;
  padding: .375rem .875rem;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.125rem;
}
.fai .fai__part--A { background: var(--fai-tint-pink); }
.fai .fai__part--P { background: var(--fai-tint-yellow); }

/* Options --------------------------------------------------------------- */

.fai .fai__opts { display: grid; gap: .75rem; }
.fai .fai__opt {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-align: left;
  padding: 1.125rem 1.375rem;
  border-radius: 1.125rem;
  border: 2px solid var(--fai-line);
  background: var(--fai-surface);
  color: var(--fai-text);
  cursor: pointer;
  transition: border-color .2s ease;
}
.fai .fai__opt:hover { border-color: var(--fai-blue); background: var(--fai-surface); color: var(--fai-text); }
.fai .fai__opt.is-sel { border-color: var(--fai-blue); box-shadow: inset 0 0 0 1px var(--fai-blue); }
.fai .fai__opt kbd {
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  min-width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #F1F1F1;
  color: #000;
  flex: none;
  box-shadow: none;
  padding: 0;
}
.fai .fai__opt--multi kbd { border-radius: 7px; }
.fai .fai__opt--multi.is-sel kbd { background: var(--fai-blue); color: #fff; }

/* Fields ---------------------------------------------------------------- */

.fai .fai__field { display: grid; gap: .5rem; margin-top: 1.125rem; }
.fai .fai__field label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
}
.fai .fai__field input[type='text'],
.fai .fai__field select {
  font: inherit;
  font-size: 1.125rem;
  line-height: 1.2;
  width: 100%;
  max-width: none;
  padding: .875rem 1rem;
  border-radius: .875rem;
  border: 2px solid var(--fai-line);
  background-color: var(--fai-surface);
  color: var(--fai-text);
}
.fai .fai__field select { padding-right: 2.5rem; background-position: right 1rem center; }
/* Focus matches a selected option: blue border, no extra outline ring. */
.fai .fai__field input[type='text']:focus,
.fai .fai__field select:focus {
  border-color: var(--fai-blue);
  box-shadow: inset 0 0 0 1px var(--fai-blue);
  outline: none;
}

/* Result ---------------------------------------------------------------- */

.fai .fai__result-top { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem; align-items: center; margin: 1.25rem 0 2.75rem; }
.fai .fai__map { width: 100%; height: auto; display: block; }
.fai .fai__map text { font-family: inherit; fill: var(--fai-text); }
.fai .fai__q1 { fill: var(--fai-tint-pink); }
.fai .fai__q2 { fill: var(--fai-tint-yellow); }
.fai .fai__q3 { fill: var(--fai-tint-blue); }
.fai .fai__q4 { fill: var(--fai-tint-green); }
.fai .fai__dot-halo { fill: var(--fai-blue); opacity: .2; }
.fai .fai__dot { fill: var(--fai-blue); stroke: #fff; stroke-width: 3; }

.fai .fai__scores { display: grid; gap: 1.25rem; }
.fai .fai__score b { display: block; font-size: 3.5rem; letter-spacing: -.04em; line-height: 1; }
.fai .fai__score span { font-size: 1rem; font-weight: 700; }

.fai .fai__card { background: var(--fai-surface); border-radius: 1.5rem; padding: 1.875rem; margin-bottom: 1.75rem; }
.fai .fai__profile .fai__h2 { margin-bottom: .75rem; outline: none; }
.fai .fai__profile p { margin: 0; }

.fai .fai__pillars { display: grid; gap: .875rem; padding: 1.625rem 1.75rem; }
.fai .fai__pl { display: grid; grid-template-columns: 7.5rem 1fr 3.25rem; gap: .875rem; align-items: center; font-size: 1rem; font-weight: 700; }
.fai .fai__pl span:last-child { text-align: right; }
.fai .fai__track { height: 12px; border-radius: 12px; background: var(--fai-line); overflow: hidden; }
.fai .fai__track i { display: block; height: 100%; background: var(--fai-blue); border-radius: 12px; }

.fai .fai__setup { font-size: 1rem; margin: 0 0 1.75rem; }

.fai .fai__tips { display: grid; gap: .875rem; margin: 0 0 2.75rem; }
.fai .fai__tip { background: var(--fai-surface); border-radius: 1.125rem; padding: 1.375rem 1.5rem; }
.fai .fai__tip b { display: block; font-size: 1.125rem; margin-bottom: .375rem; }
.fai .fai__tip p { margin: 0; font-size: 1.0625rem; }

.fai .fai__offer { background: var(--fai-blue); color: #fff; border-radius: 1.5rem; padding: 2.25rem 2rem; }
.fai .fai__offer .fai__h2,
.fai .fai__offer p { color: #fff; }
.fai .fai__offer p { max-width: 34em; margin-bottom: 1.5rem; }

/* Email me my results --------------------------------------------------- */

.fai .fai__email { margin: 1.75rem 0 0; }
.fai .fai__email .fai__h3 { margin-bottom: .5rem; }
.fai .fai__email-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; margin-bottom: 1rem; }
.fai .fai__email-row .fai__field { margin-top: .5rem; }
.fai .fai__field input[type='email'] {
  font: inherit;
  font-size: 1.125rem;
  line-height: 1.2;
  width: 100%;
  max-width: none;
  padding: .875rem 1rem;
  border-radius: .875rem;
  border: 2px solid var(--fai-line);
  background-color: var(--fai-surface);
  color: var(--fai-text);
}
.fai .fai__field input[type='email']:focus {
  border-color: var(--fai-blue);
  box-shadow: inset 0 0 0 1px var(--fai-blue);
  outline: none;
}
.fai .fai__email .fai__notice { font-size: .875rem; opacity: .85; margin: 0 0 1.25rem; }
.fai .fai__email .fai__notice a { color: inherit; text-decoration: underline; }
.fai .fai__email .fai__status { font-size: 1rem; font-weight: 700; margin: 1rem 0 0; }
.fai .fai__status.is-ok { color: var(--color-green-accessible-strong, #148119); }
.fai .fai__status.is-error { color: var(--color-pink-accessible-strong, #B74576); }
.fai .fai__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Responsive / motion --------------------------------------------------- */

@media (max-width: 767px) {
  .fai { --fai-gutter: 1.25rem; padding-top: 2rem; padding-bottom: 3.75rem; }
  .fai .fai__title { font-size: 2.75rem; }
  .fai .fai__h2 { font-size: 1.875rem; }
  .fai .fai__q { font-size: 1.625rem; }
  .fai .fai__lead { font-size: 1.25rem; }
  .fai .fai__result-top { grid-template-columns: 1fr; }
  .fai .fai__email-row { grid-template-columns: 1fr; }
  .fai .fai__pl { grid-template-columns: 6rem 1fr 2.75rem; }
  .fai .fai__card,
  .fai .fai__offer { padding: 1.5rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fai .fai__view.is-on { animation: none; }
  .fai .fai__bar i { transition: none; }
}