/* The Value Alchemists scorecard engine: shared styles
   Brand tokens are CSS variables. Change them here and every scorecard follows. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --teal: #0B4F6C;        /* header band, primary text on light */
  --teal-deep: #073A50;   /* hover, deep surfaces */
  --gold: #D9A522;        /* progress, marker, accents */
  --gold-soft: #F3E3B3;   /* faint gold wash */
  --ink: #1E2A31;         /* body text */
  --ink-soft: #5B6B74;    /* secondary text */
  --line: #D7DEE2;        /* rules and borders */
  --paper: #F4F6F7;       /* page background */
  --white: #FFFFFF;
  --surface: #FFFFFF;      /* cards, inputs, options; dark theme overrides */
  --danger: #B3261E;

  --font: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --measure: 40rem;       /* ~70 characters at 17px */
  --radius: 6px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}

a { color: var(--teal); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ---- Header band ---------------------------------------------------- */
.brand {
  background: var(--teal);
}
.brand-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand img { height: 44px; width: auto; display: block; }
.brand-name {
  color: rgba(255,255,255,.85);
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}

/* ---- Progress -------------------------------------------------------- */
.progress {
  height: 4px;
  background: rgba(255,255,255,.18);
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width .35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .progress-fill { transition: none; }
}

/* ---- Main column ----------------------------------------------------- */
main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 36px 20px 64px;
}

h1, h2, h3 {
  color: var(--teal);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); letter-spacing: -.01em; }
h2 { font-size: 1.35rem; margin-top: 2em; }
h3 { font-size: 1.05rem; margin-top: 1.6em; }
p { margin: 0 0 1em; }
.lede { font-size: 1.1rem; }
.muted { color: var(--ink-soft); }
.small { font-size: .9rem; }

/* ---- Buttons --------------------------------------------------------- */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: var(--radius);
  padding: 14px 24px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease;
}
.btn-primary { background: var(--gold); color: var(--teal-deep); }
.btn-primary:hover { background: #C4931A; }
.btn-secondary { background: transparent; color: var(--teal); border: 2px solid var(--teal); }
.btn-secondary:hover { background: var(--surface); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-block { display: block; width: 100%; text-align: center; }

.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
}

/* ---- Intro screen ---------------------------------------------------- */
.intro .reassurance {
  margin-top: 12px;
  color: var(--ink-soft);
}

/* ---- Question screen ------------------------------------------------- */
.q-meta {
  display: flex;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: .9rem;
  margin-bottom: 18px;
}
.q-text {
  font-size: clamp(1.25rem, 3.6vw, 1.6rem);
  font-weight: 600;
  color: var(--teal);
  line-height: 1.3;
  margin: 0 0 24px;
}

.options { list-style: none; margin: 0; padding: 0; }
.option {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  line-height: 1.4;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 18px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.option:hover { border-color: var(--teal); }
.option[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.q-nav {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---- Capture form ---------------------------------------------------- */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--teal);
}
.field input[type="text"],
.field input[type="email"] {
  width: 100%;
  font: inherit;
  padding: 13px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.field input:focus { border-color: var(--teal); outline: none; }
.field-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 400;
  color: var(--ink);
}
.field-check input { margin-top: 5px; flex: none; width: 18px; height: 18px; }
.field-error { color: var(--danger); font-size: .9rem; margin-top: 6px; display: none; }
.field.has-error .field-error { display: block; }
.field.has-error input[type="text"],
.field.has-error input[type="email"] { border-color: var(--danger); }
.hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.form-error {
  color: var(--danger);
  margin: 0 0 16px;
  display: none;
}
.form-error.show { display: block; }

/* ---- Result panels (teaser and report) ------------------------------- */
.score-panel {
  background: var(--teal);
  color: var(--white);
  border-radius: var(--radius);
  padding: 28px 24px 26px;
  margin: 8px 0 28px;
}
.score-panel .score-label { color: rgba(255,255,255,.8); font-size: .95rem; margin: 0 0 4px; }
.score-panel .score-big {
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 6px;
  color: var(--gold);
}
.score-panel .score-big small { font-size: .38em; font-weight: 500; color: rgba(255,255,255,.75); margin-left: 6px; }
.score-panel .band-name {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--white);
}

/* Spectrum: lowest band to highest, marker at the respondent's score */
.spectrum { margin-top: 6px; }
.spectrum-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,.18);
  overflow: visible;
}
.spectrum-seg {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(255,255,255,.10);
}
.spectrum-seg + .spectrum-seg { border-left: 2px solid var(--teal); }
.spectrum-seg.active { background: var(--gold); opacity: .55; }
.spectrum-marker {
  position: absolute;
  top: 50%;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--white);
  transform: translate(-50%, -50%);
}
.spectrum-labels {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: rgba(255,255,255,.75);
  margin-top: 10px;
}

/* Category bars */
.cats { list-style: none; padding: 0; margin: 0 0 8px; }
.cat { margin-bottom: 16px; }
.cat-head {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 6px;
}
.cat-head .cat-score { color: var(--ink-soft); font-weight: 500; }
.cat-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--line);
  overflow: hidden;
}
.cat-fill { height: 100%; background: var(--teal); border-radius: 5px; }
.cat.weakest .cat-fill { background: var(--gold); }
.cat.weakest .cat-head { color: var(--teal); }

.callout {
  border-left: 4px solid var(--gold);
  background: var(--surface);
  padding: 16px 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 20px 0 28px;
}
.callout p:last-child { margin-bottom: 0; }

.hero-line {
  font-size: clamp(1.4rem, 4vw, 1.85rem);
  font-weight: 700;
  color: var(--teal);
  line-height: 1.25;
  margin: 0 0 20px;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 8px;
}

.signoff {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 24px;
}
.signoff .name { font-weight: 700; color: var(--teal); margin: 0; }
.signoff .role { color: var(--ink-soft); margin: 0 0 8px; }

.status { color: var(--ink-soft); }
.hidden { display: none !important; }

/* ---- PDF clone (built by report.js and handed to html2pdf) ------------ */
.pdf-clone {
  width: 794px;            /* A4 at 96dpi; html2pdf's own container sets the same width */
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
}
.pdf-clone .brand-inner { max-width: none; padding: 26px 56px; }
.pdf-clone main { max-width: none; padding: 36px 56px 56px; }
.pdf-clone p, .pdf-clone h1, .pdf-clone h2,
.pdf-clone .score-panel, .pdf-clone .callout, .pdf-clone .cat, .pdf-clone .signoff {
  break-inside: avoid;
  page-break-inside: avoid;
}
.pdf-clone h2 { break-after: avoid; page-break-after: avoid; }
.pdf-clone .cats { break-inside: avoid; page-break-inside: avoid; }

/* ---- Print (browser print-to-PDF fallback) ---------------------------- */
@media print {
  body { background: var(--white); font-size: 12pt; }
  .brand { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .brand-inner { padding: 14px 20px; }
  main { padding: 20px 0; max-width: none; }
  .score-panel { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-print { display: none !important; }
  a { text-decoration: none; }
  h2 { break-after: avoid; }
  .callout, .cat { break-inside: avoid; }
}

/* ======================================================================
   Landing page layout (engine.js renders this when landing.photo /
   outcomes / proof_stats / closing exist in the config)
   ====================================================================== */
body.is-landing main { max-width: 64rem; padding-top: 44px; }

.landing-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 48px;
}
@media (min-width: 760px) {
  .landing-hero { grid-template-columns: 3fr 2fr; gap: 48px; }
}
.landing-copy h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); margin-bottom: .6em; }
.landing-copy .lede { max-width: 34rem; }
.landing-copy p:has(.btn) { margin: 28px 0 8px; }
.btn-large { padding: 17px 30px; font-size: 1.05rem; }

.landing-photo img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--radius);
  margin: 0 auto;
}
.photo-caption { text-align: center; margin-top: 10px; }
.photo-caption .name { font-weight: 600; margin: 0; color: var(--teal); }
.photo-caption .role { margin: 0; color: var(--ink-soft); font-size: .9rem; }

.landing-section { margin: 0 0 44px; }
.landing-outcomes { display: grid; gap: 20px; }
@media (min-width: 760px) { .landing-outcomes { grid-template-columns: 1fr 2fr; gap: 40px; } }
.landing-outcomes h2 { margin-top: 0; }
.landing-outcomes ul { list-style: none; margin: 0; padding: 0; }
.landing-outcomes li {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.landing-outcomes li:last-child { border-bottom: 1px solid var(--line); }
.landing-outcomes strong { color: var(--teal); }

.landing-proof {
  background: var(--teal);
  color: var(--white);
  border-radius: var(--radius);
  padding: 32px 28px;
  margin: 0 0 48px;
}
.landing-proof .proof-text { font-size: 1.1rem; margin: 0 0 24px; max-width: 46rem; }
.landing-proof .stats { display: flex; flex-wrap: wrap; gap: 28px 44px; }
.landing-proof .stat .value { font-size: 2.4rem; font-weight: 700; color: var(--gold); line-height: 1; margin: 0 0 6px; }
.landing-proof .stat .label { margin: 0; font-size: .9rem; color: rgba(255,255,255,.8); max-width: 12rem; }

.landing-close { text-align: center; padding: 8px 0 24px; }
.landing-close h2 { margin-top: 0; }
.landing-close p { max-width: 34rem; margin-left: auto; margin-right: auto; }
.landing-close p:has(.btn) { margin-top: 20px; }

.notice { margin-top: 14px; }

/* ======================================================================
   Report extras: handoffs with link lists, footer-style handoff,
   booking block with photo (config.report_cta)
   ====================================================================== */
.handoff-links { list-style: none; padding: 0; margin: 8px 0 0; }
.handoff-links li { padding: 6px 0; }
.handoff-footer {
  margin: 32px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .95rem;
}
.report-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin: 36px 0 8px;
}
@media (min-width: 560px) { .report-cta { grid-template-columns: 120px 1fr; gap: 24px; } }
.report-cta img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto; }
.report-cta p { margin: 0 0 14px; }
.report-cta p:last-child { margin: 0; }

/* ======================================================================
   Dark theme: class="theme-dark" on <body>
   ====================================================================== */
body.theme-dark {
  --paper: #0F1418;
  --surface: #182027;
  --ink: #E8ECEF;
  --ink-soft: #A9B4BB;
  --line: #2C3840;
  --gold-soft: #3A3113;
}
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3,
body.theme-dark .q-text,
body.theme-dark .field label,
body.theme-dark .photo-caption .name,
body.theme-dark .landing-outcomes strong,
body.theme-dark .signoff .name,
body.theme-dark .cat.weakest .cat-head { color: #FFFFFF; }
body.theme-dark a { color: var(--gold); }
body.theme-dark .brand { background: #0A0A0A; border-bottom: 1px solid var(--line); }
body.theme-dark .progress { background: var(--line); }
body.theme-dark .option { background: var(--surface); }
body.theme-dark .option:hover { border-color: var(--gold); }
body.theme-dark .option[aria-pressed="true"] { color: #FFFFFF; }
body.theme-dark .field input[type="text"],
body.theme-dark .field input[type="email"] { background: var(--surface); color: var(--ink); }
body.theme-dark .btn-secondary { color: var(--gold); border-color: var(--gold); }
body.theme-dark .btn-secondary:hover { background: var(--surface); }
body.theme-dark .link-button { color: var(--ink-soft); }
body.theme-dark .callout { background: var(--surface); }
body.theme-dark .cat-fill { background: #3A8BB0; }
body.theme-dark .landing-proof { background: var(--teal); }
body.theme-dark .landing-outcomes li { border-color: var(--line); }