/* persona.css — shared styles for Persona public funnel.
   Design matched to Neurvo IQ: light, clean, teal-accented, medical-clinical.
   Single-question-per-screen quiz UX, colored sentiment Likert, sticky bottom nav. */

:root {
  --bg: #ffffff;
  --bg-soft: #f8faf9;
  --surface: #ffffff;
  --border: #e5e7eb;
  --border-soft: #f1f3f5;
  --text: #2C3345;
  --text-muted: #6b7280;
  --text-subtle: #9ca3af;

  --primary: #16a34a;
  --primary-hover: #15803d;
  --teal: #0d9488;
  --teal-dark: #0f766e;
  --blue: #2563eb;
  --blue-soft: #eff6ff;

  --success-bg: #e8f5ec;
  --success-bg-strong: #d0e8d8;
  --neutral-bg: #FDF5D8;
  --warn-bg: #f8e6e6;
  --danger-bg: #f5d6d6;

  /* Semantic color palette — reused across the app so every scale reads
     the same way:
       sem-good   = green   · healthy / strength / below clinical threshold
       sem-watch  = amber   · mild / subclinical / worth paying attention to
       sem-risk   = red     · clinical / elevated / seek support
       sem-info   = blue    · descriptive, no valence (e.g. a personality trait)
       sem-trait  = purple  · neurodivergent traits / inner parts (not pathology) */
  --sem-good:   #16a34a;
  --sem-good-bg:#e8f7ed;
  --sem-watch:  #d97706;
  --sem-watch-bg:#fdf3e7;
  --sem-risk:   #dc2626;
  --sem-risk-bg:#fdecec;
  --sem-info:   #2563eb;
  --sem-info-bg:#eff6ff;
  --sem-trait:  #8b5cf6;
  --sem-trait-bg:#f3efff;

  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.08);
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Top header --- */
header.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 40;
}
header.topbar .brand {
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
  letter-spacing: -0.02em;
}
/* Section pill in the header — icon + label, per-section color. */
header.topbar .section-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 10px 6px 8px;
  background: var(--bg-soft);
  border-radius: 999px;
  transition: color .2s ease, background-color .2s ease;
}
header.topbar .section-name svg { width: 14px; height: 14px; stroke-width: 2.25; }
header.topbar .section-name span { white-space: nowrap; }

/* --- Progress bar below header --- */
.progress-outer {
  position: fixed;
  top: 60px; left: 0; right: 0;
  height: 4px;
  background: var(--border-soft);
  z-index: 30;
  overflow: hidden;
}
.progress-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--agree-1, #22c55e) 0%, var(--teal) 100%);
  width: 0%;
  transition: width .4s cubic-bezier(.4,0,.2,1);
  border-radius: 0 2px 2px 0;
}

/* --- Main quiz container --- */
main.quiz {
  max-width: 600px;
  margin: 0 auto;
  padding: 96px 20px 120px;
  min-height: 100vh;
}

main.splash {
  max-width: 600px;
  margin: 0 auto;
  padding: 112px 20px 80px;
  min-height: 100vh;
  text-align: center;
}

/* --- Headings --- */
.q-heading {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
  padding: 16px 0 32px;
}
.q-heading.small { font-size: 20px; }

.screen-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 12px;
}
.screen-title .accent { color: var(--teal); }

.screen-sub {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 24px;
}

/* --- Multi-question page layout (16P-style circle scale) --- */

:root {
  --agree-1: #22c55e;  /* strongly agree */
  --agree-2: #4ade80;  /* agree */
  --neutral: #9ca3af;
  --disagree-1: #a78bfa;  /* disagree */
  --disagree-2: #8b5cf6;  /* strongly disagree */
}

.items-page {
  display: flex;
  flex-direction: column;
}

.items-page .page-sub {
  font-size: 12px;
  color: var(--text-subtle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}

.q-item {
  display: block;
  padding: 48px 0 20px;
  border-bottom: 1px solid var(--border);
  transition: opacity .25s ease;
  margin: 0;
}
/* First question: no preceding border, so less top breathing room needed */
.q-item:first-of-type { padding-top: 20px; }
.q-item:last-of-type { border-bottom: none; }
@media (min-width: 768px) {
  .q-item { padding: 56px 0 24px; }
  .q-item:first-of-type { padding-top: 24px; }
}

.q-item.inactive { opacity: 0.3; pointer-events: none; }

/* Question text — sans-serif, left-aligned, bold.
   Spaced from its circle row enough that the question reads as its own line. */
.q-text {
  display: block;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  text-align: left;
  margin: 0 0 20px;
  padding: 0;
  letter-spacing: -0.005em;
}
@media (min-width: 768px) { .q-text { font-size: 20px; margin-bottom: 24px; } }

/* Circle row + edge captions stacked below */
.circle-scale {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.circles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}
.cap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
}
.cap {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
/* Disagree now sits on the left, Agree on the right */
.cap-left  { color: var(--disagree-2); }
.cap-right { color: var(--agree-1); }

/* Circle radio — base (all same size) */
.circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}
@media (min-width: 768px) {
  .circle { width: 48px; height: 48px; }
}
.circle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border-radius: 50%;
  margin: 0;
}
.circle .tick {
  opacity: 0;
  color: #fff;
  transition: opacity .15s ease;
  width: 55%;
  height: 55%;
}
.circle:hover { transform: scale(1.06); }
.circle.checked {
  background: currentColor;
}
.circle.checked .tick { opacity: 1; }

/* Colors (graduated green → purple, same saturation steps) */
.circle.color-agree-1    { color: #22c55e; }
.circle.color-agree-2    { color: #4ade80; }
.circle.color-agree-3    { color: #86efac; }
.circle.color-neutral    { color: #9ca3af; }
.circle.color-disagree-3 { color: #c4b5fd; }
.circle.color-disagree-2 { color: #a78bfa; }
.circle.color-disagree-1 { color: #8b5cf6; }

/* Big single-selection stack (for consent/splash etc) */
.likert-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.likert-stack .likert-btn {
  min-height: 58px;
  padding: 0 24px;
  font-size: 16px;
  text-align: left;
  justify-content: flex-start;
  border-radius: 12px;
  border: 1.5px solid transparent;
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.likert-stack .likert-btn.selected {
  border-color: var(--primary);
}

/* --- Choice buttons: uniform light green (single selection) --- */
.choice-stack { display: flex; flex-direction: column; gap: 12px; }
.choice-btn {
  height: 58px;
  width: 100%;
  padding: 0 24px;
  background: var(--success-bg);
  border: none;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform .15s, opacity .15s;
}
.choice-btn:hover:not(:disabled) { opacity: 0.9; }
.choice-btn:active:not(:disabled) { transform: scale(0.97); }
.choice-btn.selected { outline: 2px solid var(--primary); outline-offset: 2px; }
.choice-btn .check {
  width: 18px; height: 18px;
  color: var(--primary);
  display: none;
}
.choice-btn.selected .check { display: block; }

/* --- Yes/No inline pair --- */
.yn-stack { display: flex; gap: 12px; }
.yn-stack .choice-btn { flex: 1; justify-content: center; }

/* --- Big primary CTA (iq-btn-green equivalent) --- */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  padding: 15px 24px;
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  border-radius: 12px;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: transform .15s, opacity .15s;
  text-decoration: none;
}
.btn-primary:hover:not(:disabled) { opacity: 0.9; }
.btn-primary:active:not(:disabled) { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-subtle); }

/* --- Sticky bottom nav --- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.03);
  z-index: 40;
}
.bottom-nav-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}
.bottom-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--bg-soft);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  transition: background .15s;
}
.bottom-nav button:hover:not(:disabled) { background: #eef2f5; }
.bottom-nav button:disabled { opacity: 0.35; cursor: not-allowed; }
.bottom-nav .counter {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
}
.bottom-nav .counter strong { color: var(--text); font-weight: 700; }

/* --- Consent checkboxes --- */
.consent-list {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin: 0 0 24px;
}
.consent-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
}
.consent-item input {
  margin-top: 3px;
  accent-color: var(--primary);
  width: 18px; height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.consent-item strong { font-weight: 600; }

/* --- Email form --- */
.email-form { max-width: 360px; margin: 0 auto; }
.email-form input {
  width: 100%;
  padding: 14px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
  margin-bottom: 12px;
  outline: none;
  transition: border-color .15s;
}
.email-form input:focus { border-color: var(--primary); }
.email-form .err {
  color: #dc2626;
  font-size: 13px;
  min-height: 18px;
  margin-top: 6px;
}

/* --- Intro bullet list --- */
.intro-bullets { list-style: none; padding: 0; margin: 24px 0; }
.intro-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  color: var(--text-muted);
  font-size: 16px;
}
.intro-bullets .check-circle {
  width: 24px; height: 24px;
  background: var(--success-bg);
  color: var(--teal-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- Footer (minimal) --- */
footer.foot {
  padding: 16px;
  text-align: center;
  color: var(--text-subtle);
  font-size: 12px;
  border-top: 1px solid var(--border-soft);
}

/* --- Save indicator --- */
.save-indicator {
  font-size: 12px;
  color: var(--text-subtle);
}
.save-indicator.saving { color: var(--blue); }
.save-indicator.saved { color: var(--teal); }
.save-indicator.error { color: #dc2626; }

/* --- Responsive --- */
@media (max-width: 480px) {
  main.quiz, main.splash { padding-left: 16px; padding-right: 16px; }
  .q-heading { font-size: 20px; }
  .screen-title { font-size: 24px; }
  .q-text { font-size: 18px; }
  .choice-btn { font-size: 15px; height: 54px; }
}