/* PULSE — Patient Reactivation.
   Standalone stylesheet for reactivation.html ONLY.
   index.html and phones.html load styles.css and are untouched by this file —
   nothing here is shared, so this page can be restyled freely without any risk
   to the two live surveys.

   Palette and type are lifted from krmconsulting.ai: warm paper, one deep-green
   accent, Fraunces headings / Inter body / JetBrains Mono for the small
   uppercase labels. */

:root {
  --paper: #f4f0e8;       /* page background */
  --card: #ede7db;        /* options, inputs, reveal blocks */
  --ink: #141414;         /* headings, input text, primary button fill */
  --body: #4a4a46;        /* body copy */
  --muted: #69655e;       /* labels, placeholders, back button */
  --accent: #2f5d4c;      /* the single accent */
  --accent-hover: #3e7a62;
  --accent-soft: #e1eae2; /* selected / hover wash */
  --line: rgba(20, 20, 20, 0.12); /* hairline borders */
  --danger: #9b2c2c;
  --radius: 6px;
  --focus: 0 0 0 3px rgba(47, 93, 76, 0.16);
}

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

html,
body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--body);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* survey-core.js toggles the `hidden` PROPERTY on reveal blocks, the Back
   button, the inline errors and the booking link. !important guarantees hidden
   always beats the display value a class sets — .reveal and .form are both
   flex containers, and an attribute selector alone would only tie on
   specificity. Without this, revealed inputs would never hide. */
[hidden] { display: none !important; }

.app {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 20px 72px;
}

/* ----- Topbar ----- */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 28px;
}
.progress {
  flex: 1;
  height: 3px;
  background: rgba(20, 20, 20, 0.1);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.25s ease;
}
.back {
  background: none;
  border: 0;
  padding: 4px 2px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.back:hover { color: var(--accent); }

/* ----- Screens ----- */
/* survey-core.js shows exactly one screen by adding .active. */
.screen { display: none; }
.screen.active {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eyebrow,
.s1-greeting {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
.eyebrow { color: var(--accent); }
.s1-greeting { color: var(--muted); }
/* No ?biz= in the URL -> the greeting stays empty and must not leave a gap. */
.s1-greeting:empty { display: none; }

.question {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.question:focus { outline: none; } /* focused programmatically for screen readers */

.copy { color: var(--body); margin: 0; }
.hint { color: var(--muted); font-size: 0.85rem; margin: 0; }

/* ----- Options ----- */
.options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.option {
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.option:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.option:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
}
/* survey-core.js re-applies .selected when a screen is revisited via Back. */
.option.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ----- Reveal block ("Other" -> type it) ----- */
/* Unhidden by survey-core.js when its data-reveal option is tapped. Holds the
   label, the input and the [data-advance] Continue, so Continue only appears
   when it is actually needed. */
.reveal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.reveal .input { background: var(--paper); }

/* ----- Form ----- */
.form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}
.reveal .label { margin-top: 0; }

.input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 13px;
  font-family: inherit;
  font-size: 16px; /* 16px prevents iOS zooming on focus */
  color: var(--ink);
}
.input::placeholder { color: var(--muted); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
}

.error {
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 500;
  margin: 4px 0 0;
}

/* ----- Buttons ----- */
.btn {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 14px 18px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.btn:disabled { opacity: 0.55; cursor: default; }

/* Primary: ink fill that turns green on hover. */
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover:not(:disabled) { background: var(--accent); }

/* The results-screen booking CTA and the thank-you link are green-filled. */
.btn.primary-green { background: var(--accent); color: var(--paper); }
.btn.primary-green:hover:not(:disabled) { background: var(--accent-hover); }

.btn.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn.secondary:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.form .btn { margin-top: 10px; }

/* ----- Results ----- */
/* #resultFigure is written by cfg.onEnter via textContent. */
.figure {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 4px 0 0;
}
.figure-note {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition: none !important; }
}