/**
 * STYLES — Better Clients Business Health Assessment
 * ============================================================
 * Layout and structure only — colors and fonts are CSS custom
 * properties set at runtime from config/branding.js (see js/utils.js
 * applyBranding), same pattern as the base Assessment Framework.
 * Elevated relative to the free Scorecard: a serif display face for
 * headlines, more generous spacing, and a card-based results/report
 * presentation, per the "premium flagship" branding decision. Same
 * Better Clients color palette throughout — no new brand.
 */

:root {
  --forest: #1e3a2f;
  --forest-dark: #16291f;
  --gold: #c8a84b;
  --gold-dark: #b5953d;
  --off-white: #fafafa;
  --charcoal: #1e3a2f;
  --sage: #5c7a68;
  --champagne: #d4c5a0;
  --deep-sage: #2e5040;
  --warm-gray: #f0ede6;
  --font-family: "Inter", Arial, sans-serif;
  --display-font-family: "Fraunces", Georgia, serif;
}

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

body {
  font-family: var(--font-family);
  background-color: var(--off-white);
  color: var(--charcoal);
  line-height: 1.7;
}

.screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.screen.hidden {
  display: none;
}

.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 28px 48px;
  flex: 1;
}
.container-center {
  text-align: center;
}

.logo-container {
  margin-bottom: 32px;
}
.logo-container img {
  display: block;
}
.logo-img {
  max-height: 44px;
}
.logo-container.hidden {
  display: none;
}

.eyebrow {
  font-family: var(--font-family);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--sage);
  margin-bottom: 12px;
}

.headline {
  font-family: var(--display-font-family);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.2;
  margin-bottom: 20px;
}

.screen-heading {
  font-family: var(--display-font-family);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 14px;
}

.subtitle {
  display: block;
  font-size: 1.05rem;
  color: var(--sage);
  margin-bottom: 24px;
}

#intro-paragraphs p,
#instructions-paragraphs p {
  margin-bottom: 18px;
}

.btn {
  display: inline-block;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  border-radius: 6px;
  padding: 14px 28px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.15s ease;
}
.btn-forest {
  background: var(--forest);
  color: var(--off-white);
}
.btn-forest:hover {
  background: var(--forest-dark);
}
.btn-gold {
  background: var(--gold);
  color: var(--forest);
}
.btn-gold:hover {
  background: var(--gold-dark);
}
.btn-outline {
  background: transparent;
  color: var(--forest);
  border: 1px solid var(--forest);
}
.btn-outline:hover {
  background: var(--warm-gray);
}
.btn.hidden {
  display: none;
}
.mt-28 {
  margin-top: 28px;
}
.btn-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
}

/* Progress */
.progress-section {
  margin-bottom: 36px;
}
.progress-meta {
  font-size: 0.85rem;
  color: var(--sage);
  margin-bottom: 8px;
}
.progress-track {
  background: var(--warm-gray);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
.progress-fill {
  background: var(--gold);
  height: 100%;
  transition: width 0.2s ease;
}

.response-scale-hint {
  font-size: 0.85rem;
  color: var(--sage);
  margin-bottom: 24px;
}

.question-text {
  font-family: var(--display-font-family);
  font-size: 1.4rem;
  color: var(--forest);
  margin-bottom: 28px;
  line-height: 1.4;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.option-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--warm-gray);
  border-radius: 8px;
  padding: 14px 18px;
  font-family: var(--font-family);
  font-size: 0.98rem;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.option-card .option-value {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--sage);
}
.option-card:hover {
  border-color: var(--gold);
}
.option-card.selected {
  border-color: var(--forest);
  background: var(--warm-gray);
}
.option-card.selected .option-value {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}

/* Forms (intake + lead) */
.form-field {
  margin-bottom: 18px;
}
.form-field label,
.consent-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 6px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--warm-gray);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--font-family);
  font-size: 0.95rem;
}
.form-field textarea {
  resize: vertical;
  min-height: 80px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.form-grid .form-field.full {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.field-error {
  color: #b3261e;
  font-size: 0.85rem;
  margin-top: 6px;
}
.field-error.hidden {
  display: none;
}

.consent-field {
  margin: 24px 0;
}
.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 0.9rem;
}
.consent-label input {
  margin-top: 3px;
}

.form-note {
  font-size: 0.82rem;
  color: var(--sage);
  margin-top: 16px;
}

/* Review screen */
.review-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 24px;
}
.review-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--warm-gray);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.review-item .review-q {
  font-size: 0.92rem;
  color: var(--charcoal);
}
.review-item .review-a {
  font-weight: 600;
  color: var(--forest);
  white-space: nowrap;
}
.review-edit-btn {
  background: none;
  border: none;
  color: var(--sage);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.82rem;
  margin-top: 4px;
}

/* Processing */
.processing-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid var(--warm-gray);
  border-top-color: var(--gold);
  animation: spin 0.9s linear infinite;
  margin: 24px 0;
}
.processing-spinner-centered {
  margin-left: auto;
  margin-right: auto;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Results / report */
.bio-intro {
  font-style: italic;
  color: var(--sage);
  margin-bottom: 32px;
}
.bio-intro p {
  margin-bottom: 14px;
}
.bio-intro.hidden {
  display: none;
}

.score-display {
  margin-bottom: 32px;
}
.score-track {
  background: var(--warm-gray);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
.score-bar-fill {
  background: var(--gold);
  height: 100%;
  width: 0;
  transition: width 0.8s ease;
}

/* CSP-safe width steps for .progress-fill / .score-bar-fill — one
   integer-percent class per possible value (both bars only ever need
   whole-number percentages), applied via classList in js/ui.js instead
   of element.style.width, so the participant CSP's style-src can be
   'self' only, with no 'unsafe-inline' needed. Same visual result and
   the same CSS transition above still animates on class change exactly
   as it did on inline style change. */
.fill-0 {
  width: 0%;
}
.fill-1 {
  width: 1%;
}
.fill-2 {
  width: 2%;
}
.fill-3 {
  width: 3%;
}
.fill-4 {
  width: 4%;
}
.fill-5 {
  width: 5%;
}
.fill-6 {
  width: 6%;
}
.fill-7 {
  width: 7%;
}
.fill-8 {
  width: 8%;
}
.fill-9 {
  width: 9%;
}
.fill-10 {
  width: 10%;
}
.fill-11 {
  width: 11%;
}
.fill-12 {
  width: 12%;
}
.fill-13 {
  width: 13%;
}
.fill-14 {
  width: 14%;
}
.fill-15 {
  width: 15%;
}
.fill-16 {
  width: 16%;
}
.fill-17 {
  width: 17%;
}
.fill-18 {
  width: 18%;
}
.fill-19 {
  width: 19%;
}
.fill-20 {
  width: 20%;
}
.fill-21 {
  width: 21%;
}
.fill-22 {
  width: 22%;
}
.fill-23 {
  width: 23%;
}
.fill-24 {
  width: 24%;
}
.fill-25 {
  width: 25%;
}
.fill-26 {
  width: 26%;
}
.fill-27 {
  width: 27%;
}
.fill-28 {
  width: 28%;
}
.fill-29 {
  width: 29%;
}
.fill-30 {
  width: 30%;
}
.fill-31 {
  width: 31%;
}
.fill-32 {
  width: 32%;
}
.fill-33 {
  width: 33%;
}
.fill-34 {
  width: 34%;
}
.fill-35 {
  width: 35%;
}
.fill-36 {
  width: 36%;
}
.fill-37 {
  width: 37%;
}
.fill-38 {
  width: 38%;
}
.fill-39 {
  width: 39%;
}
.fill-40 {
  width: 40%;
}
.fill-41 {
  width: 41%;
}
.fill-42 {
  width: 42%;
}
.fill-43 {
  width: 43%;
}
.fill-44 {
  width: 44%;
}
.fill-45 {
  width: 45%;
}
.fill-46 {
  width: 46%;
}
.fill-47 {
  width: 47%;
}
.fill-48 {
  width: 48%;
}
.fill-49 {
  width: 49%;
}
.fill-50 {
  width: 50%;
}
.fill-51 {
  width: 51%;
}
.fill-52 {
  width: 52%;
}
.fill-53 {
  width: 53%;
}
.fill-54 {
  width: 54%;
}
.fill-55 {
  width: 55%;
}
.fill-56 {
  width: 56%;
}
.fill-57 {
  width: 57%;
}
.fill-58 {
  width: 58%;
}
.fill-59 {
  width: 59%;
}
.fill-60 {
  width: 60%;
}
.fill-61 {
  width: 61%;
}
.fill-62 {
  width: 62%;
}
.fill-63 {
  width: 63%;
}
.fill-64 {
  width: 64%;
}
.fill-65 {
  width: 65%;
}
.fill-66 {
  width: 66%;
}
.fill-67 {
  width: 67%;
}
.fill-68 {
  width: 68%;
}
.fill-69 {
  width: 69%;
}
.fill-70 {
  width: 70%;
}
.fill-71 {
  width: 71%;
}
.fill-72 {
  width: 72%;
}
.fill-73 {
  width: 73%;
}
.fill-74 {
  width: 74%;
}
.fill-75 {
  width: 75%;
}
.fill-76 {
  width: 76%;
}
.fill-77 {
  width: 77%;
}
.fill-78 {
  width: 78%;
}
.fill-79 {
  width: 79%;
}
.fill-80 {
  width: 80%;
}
.fill-81 {
  width: 81%;
}
.fill-82 {
  width: 82%;
}
.fill-83 {
  width: 83%;
}
.fill-84 {
  width: 84%;
}
.fill-85 {
  width: 85%;
}
.fill-86 {
  width: 86%;
}
.fill-87 {
  width: 87%;
}
.fill-88 {
  width: 88%;
}
.fill-89 {
  width: 89%;
}
.fill-90 {
  width: 90%;
}
.fill-91 {
  width: 91%;
}
.fill-92 {
  width: 92%;
}
.fill-93 {
  width: 93%;
}
.fill-94 {
  width: 94%;
}
.fill-95 {
  width: 95%;
}
.fill-96 {
  width: 96%;
}
.fill-97 {
  width: 97%;
}
.fill-98 {
  width: 98%;
}
.fill-99 {
  width: 99%;
}
.fill-100 {
  width: 100%;
}

/* Off-screen helper for the copyToClipboard() execCommand fallback in
   js/utils.js — replaces an inline style.cssText assignment so no
   remaining code path in this app needs style-src 'unsafe-inline'. */
.clipboard-fallback-helper {
  position: fixed;
  opacity: 0;
}

.score-number {
  font-weight: 700;
  color: var(--forest);
}

.zone-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
@media (min-width: 560px) {
  .zone-snapshot-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.zone-tile {
  background: #fff;
  border: 1px solid var(--warm-gray);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}
.zone-tile .zone-label {
  font-size: 0.78rem;
  color: var(--sage);
  margin-bottom: 4px;
}
.zone-tile .zone-score {
  font-family: var(--display-font-family);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--forest);
}
.zone-tile .zone-band {
  font-size: 0.72rem;
  color: var(--sage);
}
.zone-tile.is-primary {
  border-color: var(--gold);
  background: var(--warm-gray);
}

.result-name {
  font-family: var(--display-font-family);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 4px;
}

.report-section {
  margin: 32px 0;
}
.report-section h3 {
  font-family: var(--display-font-family);
  font-size: 1.25rem;
  color: var(--forest);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--warm-gray);
}
.report-section p {
  margin-bottom: 14px;
}

.pull-quote {
  font-family: var(--display-font-family);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--forest);
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px 20px;
  margin: 24px 0;
}

.tension-block {
  margin-bottom: 18px;
}
.tension-block .tension-title {
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 4px;
}

.not-saying-list {
  list-style: none;
  padding: 0;
}
.not-saying-list li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.not-saying-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
}

.cta-section {
  background: var(--warm-gray);
  border-radius: 10px;
  padding: 28px;
  margin: 32px 0;
}
.cta-heading {
  border: none;
  padding: 0;
}
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.cta-secondary-note {
  font-size: 0.85rem;
  color: var(--sage);
  margin-top: 12px;
}
.cta-secondary-note a {
  color: var(--forest);
}

.bio-card {
  background: #fff;
  border: 1px solid var(--warm-gray);
  border-radius: 10px;
  padding: 24px;
  margin: 32px 0;
}
.bio-card.hidden {
  display: none;
}
.bio-card-label {
  font-style: italic;
  color: var(--sage);
  margin-bottom: 12px;
}
.bio-card-inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.bio-headshot {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.bio-text {
  font-size: 0.92rem;
}

.disclaimer {
  font-size: 0.78rem;
  color: var(--sage);
  font-style: italic;
  margin-top: 32px;
}

.copyright {
  text-align: center;
  font-size: 0.78rem;
  color: var(--sage);
  padding: 24px;
}

@media print {
  .btn,
  .copyright,
  header,
  nav {
    display: none !important;
  }
  .screen {
    min-height: 0;
  }
}