/* CPSA Results — Ethisphere design system reskin (matches Results.jsx / CPSA.html) */

#cpsa-results-container,
#cpsa-results-container *:not([class*="fa-"]) {
  font-family: var(--font, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
#cpsa-results-container * {
  box-sizing: border-box;
}

/* ── Loading overlay (on results page while scoring API runs) ── */
#cpsa-results-loading {
  display: none;
  text-align: center;
  padding: 3rem 1.5rem;
  color: #475569;
}
#cpsa-results-loading .cpsa-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #e2e8f0;
  border-top-color: #0F7F6D;
  border-radius: 50%;
  animation: cpsa-spin 0.9s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes cpsa-spin { to { transform: rotate(360deg); } }
#cpsa-results-error {
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

#cpsa-results-container { background: #fff; }

/* ── Score header ── */
.cpsa-res__hero { background: #F8F3EC; border-bottom: 1px solid rgba(6, 32, 56, 0.08); }
.cpsa-res__heroInner { max-width: 760px; margin: 0 auto; padding: 64px 40px 56px; text-align: center; }

.cpsa-tierpill {
  display: inline-block; padding: 7px 18px; border-radius: 999px;
  font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 22px;
}
.cpsa-tierpill--low  { background: rgba(196, 79, 65, 0.12); color: #A43A2D; }
.cpsa-tierpill--good { background: rgba(15, 127, 109, 0.12); color: #0F7F6D; }

.cpsa-tier { font-weight: 800; font-size: 54px; line-height: 1.06; color: #062038; letter-spacing: -0.03em; margin-bottom: 16px; }

.cpsa-score__caption { font-size: 17px; line-height: 1.55; color: #44586c; margin: 0 auto 30px; max-width: 540px; }
.cpsa-score__caption b { color: #062038; }

.cpsa-meter { max-width: 560px; margin: 0 auto; }
.cpsa-meter__track {
  position: relative; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #C44F41 0%, #F18276 32%, #7EDFBF 70%, #0F7F6D 100%);
  opacity: 0.9;
}
.cpsa-meter__marker {
  position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 999px;
  background: #062038; border: 3px solid #fff; transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(6, 32, 56, 0.3);
}
.cpsa-meter__tiers { display: flex; justify-content: space-between; margin-top: 12px; }
.cpsa-meter__tiers span { font-weight: 600; font-size: 11px; line-height: 1.2; color: #98a6b5; flex: 1; text-align: center; }
.cpsa-meter__tiers span:first-child { text-align: left; }
.cpsa-meter__tiers span:last-child { text-align: right; }
.cpsa-meter__tiers span.is-current { color: #062038; font-weight: 700; }

.cpsa-res__actions { display: flex; justify-content: center; margin-top: 30px; }
.cpsa-res__ephemeral { font-size: 13.5px; line-height: 1.55; color: #5b7088; margin: 18px auto 0; max-width: 540px; }

.eth-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; line-height: 1;
  padding: 14px 24px; border-radius: 15px; border: 0; cursor: pointer;
  text-decoration: none; transition: filter 0.15s ease, background 0.15s ease;
}
.eth-btn--primary { background: #00FFA0; color: #062038; box-shadow: 0 8px 20px rgba(0, 255, 160, 0.28); }
.eth-btn--primary:hover { filter: brightness(1.05); color: #062038; }
.eth-btn--secondary { background: #0F7F6D; color: #F8F3EC; }
.eth-btn--secondary:hover { background: #0d6e5e; color: #F8F3EC; }

/* ── Rail + content grid ── */
.cpsa-res__grid { max-width: 1240px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 268px 1fr; gap: 56px; align-items: start; }
.cpsa-res__main { min-width: 0; }

.cpsa-rail { position: sticky; top: 120px; padding-top: 52px; align-self: start; }
.cpsa-rail__head { font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: #7393B0; margin-bottom: 18px; }
.cpsa-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cpsa-rail__link { text-decoration: none; }
.cpsa-rail__item { display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: 10px; transition: background 0.14s ease; }
.cpsa-rail__item.is-active { background: rgba(15, 127, 109, 0.07); }
.cpsa-rail__mark {
  flex: none; width: 24px; height: 24px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; line-height: 1;
}
.cpsa-rail__item.is-todo .cpsa-rail__mark { background: #EDEDED; color: #7393B0; }
.cpsa-rail__item.is-active .cpsa-rail__mark { background: #0F7F6D; color: #fff; }
.cpsa-rail__name { font-weight: 600; font-size: 13.5px; line-height: 1.35; color: #44586c; padding-top: 4px; }
.cpsa-rail__item.is-active .cpsa-rail__name { color: #062038; }
.cpsa-rail__item.is-todo .cpsa-rail__name { color: #8597a8; font-weight: 500; }

@media (max-width: 900px) {
  .cpsa-res__grid { grid-template-columns: 1fr; gap: 0; }
  .cpsa-res__grid > .cpsa-rail { display: none; }
}

/* ── Content sections ── */
.cpsa-res__section { max-width: 880px; margin: 0 auto; padding: 52px 40px 0; }
.cpsa-res__section:last-child { padding-bottom: 84px; }
.cpsa-res__grid .cpsa-res__section { max-width: 820px; padding-left: 0; padding-right: 0; margin: 0; }

.cpsa-res__h2 { font-weight: 700; font-size: 30px; line-height: 1.18; color: #062038; letter-spacing: -0.02em; margin: 0 0 18px; }
.cpsa-res__h3 { font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: #7393B0; margin: 0 0 22px; }
.cpsa-res__p, .cpsa-dimres__body { font-size: 16px; line-height: 1.62; color: #44586c; margin: 0 0 16px; }

.eth-accent-box {
  border-left: 4px solid #00FFA0;
  padding: 16px 20px;
  background: rgba(0, 255, 160, 0.06);
  border-radius: 8px;
}
.eth-accent-box.is-emerald { border-left-color: #0F7F6D; background: rgba(15, 127, 109, 0.06); }
.cpsa-rec { margin-top: 8px; font-size: 16px; line-height: 1.62; color: #1f3147; }
.cpsa-rec p { margin: 0 0 8px; }
.cpsa-rec p:last-child { margin-bottom: 0; }

/* Overview body — admin-authored rich HTML (mirrors .cpsa-res__p) */
.cpsa-res__overviewbody p { font-size: 16px; line-height: 1.62; color: #44586c; margin: 0 0 16px; }
.cpsa-res__overviewbody p:last-child { margin-bottom: 0; }
.cpsa-res__overviewbody ul { margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; }
.cpsa-res__overviewbody b, .cpsa-res__overviewbody strong { color: #062038; }

/* ── Section-by-section (per-dimension) results ── */
.cpsa-dimres__rule { height: 3px; border-radius: 999px; background: linear-gradient(90deg, #0F7F6D 0%, #7EDFBF 55%, #00FFA0 100%); opacity: 0.85; margin-bottom: 44px; }
.cpsa-dimres__name { font-weight: 700; font-size: 28px; line-height: 1.2; color: #0F7F6D; letter-spacing: -0.015em; margin: 0 0 10px; }
.cpsa-dimres__sub { margin-top: 30px; }
.cpsa-dimres__subhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cpsa-dimres__subtitle { font-weight: 700; font-size: 19px; line-height: 1.3; color: #062038; letter-spacing: -0.01em; margin: 0; }

.cpsa-verdictpill { display: inline-block; padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }
.cpsa-verdictpill--opportunity { background: rgba(233, 168, 73, 0.16); color: #9A6A14; }
.cpsa-verdictpill--strength { background: rgba(15, 127, 109, 0.12); color: #0F7F6D; }

.cpsa-dimres__body p { font-size: 16px; line-height: 1.62; color: #44586c; margin: 0 0 14px; }
.cpsa-dimres__body b, .cpsa-dimres__body strong { color: #1f3147; }
.cpsa-dimres__body ul { margin: 0 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; }
.cpsa-dimres__body li { font-size: 15.5px; line-height: 1.55; color: #44586c; }
.cpsa-dimres__body li ul { margin: 7px 0 0; }

.cpsa-dimres__cta { display: flex; justify-content: center; margin-top: 26px; }
.cpsa-minicta {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 14.5px; line-height: 1.3; color: #0F7F6D; text-decoration: none;
  padding: 13px 22px; border: 1.5px solid rgba(15, 127, 109, 0.35); border-radius: 999px;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.cpsa-minicta:hover { background: rgba(15, 127, 109, 0.07); border-color: #0F7F6D; }
.cpsa-minicta i { font-size: 12px; }

/* ── Dark CTA ── */
.cpsa-darkcta { background: #062038; border-radius: 18px; padding: 40px 44px; text-align: center; }
.cpsa-darkcta__title { font-weight: 700; font-size: 24px; line-height: 1.2; color: #fff; margin: 0 0 12px; letter-spacing: -0.01em; }
.cpsa-darkcta__body { font-size: 15.5px; line-height: 1.6; color: #B0C1D3; margin: 0 auto 24px; max-width: 540px; }

.cpsa-restart-wrap { margin-top: 28px; text-align: center; }
.cpsa-restart { font-weight: 700; font-size: 14px; color: #0F7F6D; text-decoration: none; }
.cpsa-restart:hover { text-decoration: underline; }

/* ── Legal disclaimers ── */
.cpsa-legal { border-top: 1px solid rgba(6, 32, 56, 0.12); padding-top: 40px; }
.cpsa-legal__lead { font-weight: 600; font-size: 13.5px; line-height: 1.5; color: #44586c; margin: 0 0 16px; }
.cpsa-legal__p { font-size: 12.5px; line-height: 1.65; color: #5b7088; margin: 0 0 16px; }
.cpsa-legal__p--caps { letter-spacing: 0.01em; }
/* Legal disclaimers — admin-authored rich HTML */
.cpsa-legal__rich p { font-size: 12.5px; line-height: 1.65; color: #5b7088; margin: 0 0 16px; }
.cpsa-legal__rich p:last-child { margin-bottom: 0; }
.cpsa-legal__rich u { text-decoration: underline; }

/* ── Print-only report header / footer ──────────────────────────────────────
   Hidden on screen; the printed copy is the only place they appear, because
   on paper nothing else says which report this is or who it was run for. */
.cpsa-printhead, .cpsa-printfoot { display: none; }

.cpsa-printhead__brand { display: flex; flex-direction: column; gap: 8px; }
.cpsa-printhead__logo { width: 172px; height: auto; }
.cpsa-printhead__wordmark { font-weight: 800; font-size: 15pt; letter-spacing: 0.13em; color: #062038; }
.cpsa-printhead__title { font-weight: 700; font-size: 12pt; line-height: 1.25; color: #062038; }
.cpsa-printhead__meta { font-size: 10pt; line-height: 1.5; color: #5b7088; text-align: right; white-space: nowrap; }
.cpsa-printfoot { font-size: 9.5pt; line-height: 1.5; color: #7b8b9b; }

/* ── Print / "save as PDF" ──────────────────────────────────────────────────
   The printed sheet is the copy the respondent actually keeps, so it is laid
   out as a report rather than a screenshot of a web page: the page furniture
   (side rail, print button, "this page won't be saved" note, the eight
   repeated per-dimension CTAs) is dropped, a titled header identifies the
   report, and page breaks are pinned so every dimension starts on a fresh
   sheet instead of straddling two.

   Tinted pills, the score meter and the dimension rules carry meaning, so
   they get print-color-adjust: exact — plus a border, so they still read if
   the visitor prints with background graphics switched off.

   Type is set to the 12pt body standard legal documents use, with the
   headings scaled around it rather than the other way round.

   `size: portrait` names the orientation but deliberately not the paper, so
   the sheet stays whatever the visitor picked in the print dialog (Letter
   here, A4 elsewhere) and can't come out landscape. */
@page { size: portrait; margin: 0.6in 0.6in 0.7in; }

@media print {
  body { background: #fff !important; }

  /* Web-only furniture */
  .cpsa-print-hide,
  .cpsa-restart-wrap,
  .cpsa-res__actions,
  .cpsa-res__ephemeral,
  .cpsa-rail,
  .cpsa-dimres__cta,
  #cpsa-results-loading,
  #cpsa-results-error { display: none !important; }

  /* Font Awesome glyphs are decorative here and print as tofu when the icon
     font isn't fetched for the print job. */
  #cpsa-results-container i[class*="fa-"] { display: none !important; }

  .cpsa-printhead {
    display: flex !important;
    align-items: flex-end; justify-content: space-between; gap: 24px;
    padding-bottom: 12px; margin-bottom: 24px;
    border-bottom: 2px solid #0F7F6D;
  }
  .cpsa-printfoot {
    display: block !important;
    margin-top: 26px; padding-top: 10px;
    border-top: 1px solid rgba(6, 32, 56, 0.12);
  }

  /* Full page width — the two-column grid and its rail are screen-only */
  .cpsa-res__grid { display: block !important; max-width: none !important; padding: 0 !important; }
  .cpsa-res__main { width: auto; }
  .cpsa-res__section,
  .cpsa-res__grid .cpsa-res__section {
    max-width: none !important; margin: 0 !important; padding: 0 !important;
  }

  /* Score header — no full-bleed band, no 144px of hero padding */
  .cpsa-res__hero { background: #fff !important; border-bottom: 0 !important; padding: 0 !important; }
  .cpsa-res__heroInner { max-width: none; padding: 0 !important; }
  .cpsa-tierpill { margin-bottom: 12px; border: 1px solid currentColor; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .cpsa-tier { font-size: 28pt; margin-bottom: 10px; }
  .cpsa-score__caption { font-size: 12pt; line-height: 1.45; max-width: none; margin-bottom: 22px; }
  .cpsa-meter { max-width: 520px; }
  .cpsa-meter__tiers span { font-size: 9pt; }
  .cpsa-meter__track,
  .cpsa-dimres__rule { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .cpsa-meter__marker { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  /* Body copy — 12pt, the size legal documents are set at */
  #overview { padding-top: 24px !important; }
  .cpsa-res__h2 { font-size: 18pt; margin-bottom: 14px; }
  .cpsa-res__p,
  .cpsa-res__overviewbody p,
  .cpsa-dimres__body p,
  .cpsa-dimres__body li,
  .cpsa-rec { font-size: 12pt; line-height: 1.45; orphans: 3; widows: 3; }
  .eth-accent-box { break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  /* One dimension per sheet */
  .cpsa-dimres { break-before: page; }
  .cpsa-dimres__rule { margin-bottom: 20px; break-after: avoid; }
  .cpsa-dimres__name { font-size: 16pt; margin-bottom: 8px; break-after: avoid; }
  .cpsa-dimres__sub { margin-top: 20px; }
  .cpsa-dimres__subhead { margin-bottom: 8px; break-after: avoid; }
  .cpsa-dimres__subtitle { font-size: 13pt; }
  .cpsa-tierpill, .cpsa-verdictpill { font-size: 8.5pt; }
  .cpsa-verdictpill { border: 1px solid currentColor; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .cpsa-res__h2, .cpsa-res__h3 { break-after: avoid; }

  /* Closing CTA — a printed page has no buttons, so it reads as a note with
     its destination spelled out */
  .cpsa-darkcta {
    background: #fff !important; box-shadow: none !important;
    border: 1px solid rgba(6, 32, 56, 0.2); border-radius: 8px;
    padding: 22px 26px !important; break-inside: avoid;
  }
  .cpsa-darkcta__title { font-size: 14pt; color: #062038 !important; }
  .cpsa-darkcta__body { font-size: 11.5pt; line-height: 1.45; color: #44586c !important; max-width: none; margin-bottom: 14px; }
  /* At 12pt the label and the URL no longer fit on one line inside a
     button-shaped outline, so the outline goes and they stack as two lines:
     the call to action, then where it goes. */
  .cpsa-darkcta .eth-btn {
    display: block; background: none !important; box-shadow: none !important;
    color: #0F7F6D !important; border: 0; border-radius: 0;
    padding: 0; font-size: 11.5pt; white-space: nowrap;
  }
  .cpsa-darkcta .eth-btn::after {
    content: attr(href); display: block;
    margin-top: 3px; font-weight: 500; font-size: 9.5pt; color: #5b7088;
    white-space: normal; overflow-wrap: anywhere;
  }

  /* The disclaimers are the one place 12pt is worth breaking, but they still
     hold the 10pt floor that keeps fine print legible on paper. */
  .cpsa-legal { break-inside: avoid; padding-top: 26px; }
  .cpsa-legal__lead { font-size: 11pt; }
  .cpsa-legal__p, .cpsa-legal__rich p { font-size: 10pt; line-height: 1.5; margin-bottom: 12px; }
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .cpsa-res__heroInner { padding: 44px 20px 40px; }
  .cpsa-tier { font-size: 36px; }
  .cpsa-res__section { padding: 40px 20px 0; }
  .cpsa-res__grid { padding: 0 20px; }
  .cpsa-darkcta { padding: 32px 24px; }
  .cpsa-dimres__name { font-size: 24px; }
}