/* All rules in this file belong to the `pages` cascade layer. */
@layer pages {
/* Assessment Progress Bar */
.progress-bar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border-light);
  padding: 0.6rem 1.5rem;
}

.progress-bar-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 820px;
  margin: 0 auto;
}

/* Self-serve intake uses the report-style header in normal flow; the progress
   bar sits under it and sticks to the top while scrolling the form. */
.assessment-page--self-serve {
  background: var(--color-bg-warm);
  min-height: 100vh;
}

.assessment-page--self-serve .progress-bar-fixed {
  position: sticky;
  top: 0;
  margin-top: 1.75rem;
}

.progress-bar-track {
  flex: 1;
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

.progress-bar-pct {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 2.5rem;
  text-align: right;
}

/* Hero Section */
.hero {
  background: var(--color-bg);
  padding: 5rem 2rem 2rem;
  text-align: center;
}

.assessment-page .hero {
  padding-top: 4rem;
}

.hero-content {
  max-width: 560px;
  margin: 0 auto;
}

.hero-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin: 0 0 1rem 0;
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: 3.25rem;
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 1.25rem 0;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.hero-subtitle {
  font-size: 1.05rem;
  color: var(--color-text);
  margin: 0 0 1rem 0;
  font-weight: 400;
  line-height: 1.65;
}

.hero-meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0;
  letter-spacing: 0.01em;
}

/* Main Container */
.assessment-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

/* Assessment Intro */
.assessment-intro {
  max-width: 640px;
  margin: 0 auto 2.5rem;
}

.assessment-intro-body {
  font-size: 1rem;
  color: var(--color-text);
  margin: 0 0 0.75rem;
  line-height: 1.6;
}

.assessment-more-details summary {
  display: inline-block;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  list-style: none;
  user-select: none;
}

.assessment-more-details summary::-webkit-details-marker {
  display: none;
}

.assessment-more-details[open] summary {
  margin-bottom: 0.75rem;
}

.assessment-more-details-content p {
  font-size: 0.9rem;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.assessment-more-details-content ol {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.8;
}

/* Intro Section */
.intro-section {
  max-width: 560px;
  margin: 0 auto 3rem;
}

.dimensions-explainer {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-md);
}

.dimensions-explainer p {
  margin: 0 0 0.85rem 0;
  font-size: 0.95rem;
  color: var(--color-text);
}

.dimensions-explainer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dimensions-explainer li {
  font-size: 0.95rem;
  color: var(--color-text);
  position: relative;
  padding-left: 16px;
}

.dimensions-explainer li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dimensions-explainer li:nth-child(1)::before {
  background: var(--color-relevance);
}

.dimensions-explainer li:nth-child(2)::before {
  background: var(--color-satisfaction);
}

.dimensions-explainer li:nth-child(3)::before {
  background: var(--color-time-energy);
}

.intro-text {
  font-size: 1.2rem;
  color: var(--color-text);
  line-height: 1.8;
  margin: 0 0 2.5rem 0;
  text-align: center;
}

/* Instructions */
.instructions {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: var(--shadow-md);
}

.instructions h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 1.5rem 0;
}

.instruction-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.instruction-list li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 0 1rem 3.5rem;
  position: relative;
  border-bottom: 1px solid var(--color-border-light);
}

.instruction-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.instruction-list li:first-child {
  padding-top: 0;
}

.instruction-list li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1rem;
  width: 2rem;
  height: 2rem;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.instruction-list li:first-child::before {
  top: 0;
}

.instruction-list li strong {
  font-weight: 600;
  color: var(--color-text);
}

.instruction-list li span {
  color: var(--color-text-light);
  font-size: 0.95rem;
}

/* Scale Guide */
.scale-guide {
  margin-bottom: 2.5rem;
}

.scale-guide h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 1rem 0;
  text-align: center;
}

.scale-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.scale-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
}

.scale-card h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 0.5rem 0;
}

.scale-question {
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin: 0 0 0.75rem 0;
  font-style: italic;
}

.scale-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.scale-card li {
  font-size: 0.85rem;
  color: var(--color-text);
  padding: 0.35rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.scale-range {
  font-weight: 600;
  color: var(--color-accent);
  min-width: 2.5rem;
}

/* Registration Form */
.email-consent {
  max-width: 560px;
  margin: 0 auto 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted, var(--color-gray));
  text-align: center;
}

.registration-form {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Waiting Page */
.waiting-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  text-align: center;
  padding: 2rem;
}

.waiting-page h1 {
  font-family: var(--font-serif);
  font-size: 3.25rem;
  font-weight: 400;
  color: var(--color-text);
  margin: 0.75rem 0 1.25rem;
  line-height: 1.15;
}

.waiting-message {
  font-size: 1.05rem;
  color: var(--color-text-light);
  margin: 0 0 3rem;
  line-height: 1.65;
}

.waiting-expect {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.waiting-expect-heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.expect-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: center;
  width: 100%;
}

.expect-list li {
  font-size: 0.95rem;
  color: var(--color-text);
}

/* Client-side validation banner */
.client-error-banner {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
  color: var(--color-danger-bright);
  font-size: 0.9rem;
  padding: 0.875rem 1.25rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Sticks below the progress bar and above the sticky column header (z-index 30):
   while answers are being dropped, knowing that matters more than reading the
   column labels. */
.save-error-banner {
  position: sticky;
  top: var(--progress-bar-h);
  z-index: 40;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.875rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

.save-error-banner strong {
  display: block;
  color: var(--color-danger-bright);
}

.dim-autosave--failed .dim-autosave-status {
  color: var(--color-danger-bright);
  font-style: normal;
  font-weight: 600;
}

.dim-slider-wrap--invalid .rating-slider {
  outline: 2px solid var(--color-danger-bright);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Error Messages */
.error-messages {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.error-messages p {
  color: var(--color-danger-bright);
  margin: 0;
  font-size: 0.95rem;
}

/* Email Section */
.email-section {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 2.5rem;
  box-shadow: var(--shadow-md);
}

.email-section label {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: var(--color-text);
}

.field-hint {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem 0;
}

.email-input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--color-bg-warm);
}

.email-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

/* Quick Fill (testing only) */
.quick-fill-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

.quick-fill-btn {
  background: transparent;
  border: 1px dashed var(--color-border);
  color: var(--color-text-light);
  font-size: 0.78rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}

.quick-fill-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ─── Category Sections ─── */
.category-section {
  margin-bottom: 0.75rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-black);
  border-left: 3px solid var(--color-black);
  background: var(--color-white);
}

.category-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  background: var(--color-white);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.category-header:hover {
  background: var(--color-bg-warm);
}

.category-header-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.category-diamond {
  color: #7c5cbf;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.category-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}

.category-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.category-counter {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.toggle-icon {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  transition: transform 0.2s;
  line-height: 1;
}

.toggle-icon.rotated {
  transform: rotate(180deg);
}

/* Category content — expanded by default */
.category-content {
  display: none;
  border-top: 1px solid var(--color-border-light);
}

.category-content.expanded {
  display: block;
}

/* ─── Dimension Table ─── */
.dim-table-header,
.dim-row {
  display: grid;
  /* Time & energy is a three-stop slider with labels, so it needs a real
     column rather than the narrow one the old dropdown sat in. */
  grid-template-columns: 200px 1fr 1fr 1fr;
  align-items: center;
}

/* One header for the whole form, pinned under the progress bar while the user
   scrolls the categories. The horizontal padding carries the category
   section's border widths (3px left, 1px right) less this header's own 1px
   border, so the columns stay lined up with the rows inside those sections. */
.dim-table-header {
  position: sticky;
  top: var(--progress-bar-h);
  z-index: 30;
  padding: 0.5rem 1rem 0.5rem calc(1rem + 2px);
  margin-bottom: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.dim-table-header > div {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.dim-table-header .col-slider,
.dim-table-header .col-time {
  padding-left: 0.75rem;
}

/* ─── Column-header info tooltips ─── */
.dim-tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 0.3rem;
}

.dim-tip-btn {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: help;
}

.dim-tip-btn svg {
  width: 13px;
  height: 13px;
}

.dim-tip-btn:hover,
.dim-tip-btn:focus-visible {
  color: var(--color-accent-dark);
}

/* Opens downward: the category section clips overflow, and the header row is
   its top edge. */
.dim-tip-bubble {
  position: absolute;
  top: calc(100% + 8px);
  left: -0.5rem;
  z-index: 20;
  width: 15rem;
  padding: 0.6rem 0.7rem;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
  /* The header row is uppercase and letter-spaced; the bubble is prose. */
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-white);
}

/* Right-anchored for the last column, which would otherwise be clipped. */
.dim-tip--right .dim-tip-bubble {
  left: auto;
  right: -0.5rem;
}

.dim-tip:hover .dim-tip-bubble,
.dim-tip:focus-within .dim-tip-bubble {
  opacity: 1;
  visibility: visible;
}

.dim-tip-question {
  display: block;
}

.dim-tip-scale {
  display: block;
  margin-top: 0.35rem;
  color: var(--color-accent-light);
}

.dim-row {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border-light);
  gap: 0;
}

.dim-row:last-child {
  border-bottom: none;
}

.dim-area {
  padding-right: 1.25rem;
}

.dim-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.2rem 0;
}

.dim-desc {
  font-size: 0.78rem;
  color: var(--color-text-light);
  margin: 0;
  line-height: 1.4;
}

/* ─── Sliders ─── */
.dim-slider-wrap {
  padding: 0 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 4px;
}

.slider-value {
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 1.25rem;
  text-align: right;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.slider-numeric-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-bottom: 2px;
  padding-right: calc(1.25rem + 0.5rem);
}

.rating-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
  outline: none;
  cursor: pointer;
}

/* Untouched thumb — gray */
.rating-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #a89e8c;
  cursor: pointer;
  border: 2px solid var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: background 0.15s;
}

.rating-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #a89e8c;
  cursor: pointer;
  border: 2px solid var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: background 0.15s;
}

/* Touched — relevance (purple) */
.dim-slider-wrap--touched .slider--relevance::-webkit-slider-thumb {
  background: #7c5cbf;
}

.dim-slider-wrap--touched .slider--relevance::-moz-range-thumb {
  background: #7c5cbf;
}

/* Touched — satisfaction (green) */
.dim-slider-wrap--touched .slider--satisfaction::-webkit-slider-thumb {
  background: var(--color-positive);
}

.dim-slider-wrap--touched .slider--satisfaction::-moz-range-thumb {
  background: var(--color-positive);
}

.slider-tick-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--color-text-muted);
  padding-right: calc(1.25rem + 0.5rem);
}

/* ─── Time & energy: three-stop slider ───
   Both extremes are bad and the middle is the good answer, so the thumb goes
   red / green / red rather than filling a track. */
/* Untouched: a hollow thumb, so "not answered" never reads as "Balanced". */
.dim-time .slider--time::-webkit-slider-thumb {
  background: var(--color-white);
  border: 2px solid #a89e8c;
  box-shadow: none;
}

.dim-time .slider--time::-moz-range-thumb {
  background: var(--color-white);
  border: 2px solid #a89e8c;
  box-shadow: none;
}

.dim-time--not_enough .slider--time::-webkit-slider-thumb,
.dim-time--too_much .slider--time::-webkit-slider-thumb {
  background: var(--color-danger);
  border-color: var(--color-white);
}

.dim-time--not_enough .slider--time::-moz-range-thumb,
.dim-time--too_much .slider--time::-moz-range-thumb {
  background: var(--color-danger);
  border-color: var(--color-white);
}

.dim-time--balanced .slider--time::-webkit-slider-thumb {
  background: var(--color-positive);
  border-color: var(--color-white);
}

.dim-time--balanced .slider--time::-moz-range-thumb {
  background: var(--color-positive);
  border-color: var(--color-white);
}

/* Equal thirds so the middle label centers on the middle stop. The padding
   matches .slider-tick-labels, keeping these labels inside the same track width
   as "Irrelevant / Important" alongside them. */
.dim-time-labels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 0.65rem;
  color: var(--color-text-muted);
  padding-right: calc(1.25rem + 0.5rem);
}

.dim-time-labels span:nth-child(2) {
  text-align: center;
}

.dim-time-labels span:nth-child(3) {
  text-align: right;
}

.dim-time-labels .is-active {
  font-weight: 600;
}

.dim-time--not_enough .dim-time-labels span:nth-child(1).is-active,
.dim-time--too_much .dim-time-labels span:nth-child(3).is-active {
  color: var(--color-danger);
}

.dim-time--balanced .dim-time-labels span:nth-child(2).is-active {
  color: var(--color-positive);
}

.dim-note {
  grid-column: 1 / -1;
  padding: 0.25rem 0 0.5rem;
}

.dim-note-toggle {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
  padding: 0.2rem 0;
  user-select: none;
}

.dim-note-toggle::-webkit-details-marker { display: none; }

/* The note is easy to miss as a bare line of muted text, so give it a soft
   gold chip — visible, but quieter than the sliders it sits under. */
.dim-note-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--color-accent-bg);
  color: var(--color-accent-dark);
  font-weight: 500;
  transition: background 0.15s;
}

.dim-note-btn::before { content: '+'; font-weight: 700; }
details[open] .dim-note-btn::before { content: '−'; }

.dim-note-toggle:hover .dim-note-btn,
.dim-note-toggle:focus-visible .dim-note-btn {
  background: var(--color-accent-muted);
}

.dim-note-input {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  border: none;
  border-bottom: 1px solid var(--color-border-light);
  background: transparent;
  font-size: 0.8rem;
  color: var(--color-text);
  font-family: inherit;
  resize: none;
  padding: 0.2rem 0;
  outline: none;
}

.dim-note-input::placeholder { color: var(--color-text-muted); }
.dim-note-input:focus { border-bottom-color: #7c5cbf; }

.dim-autosave-status {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-left: 0.5rem;
  font-style: italic;
}

@media (max-width: 700px) {
  .dim-table-header {
    display: none;
  }

  .dim-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1rem;
  }

  .dim-slider-wrap,
  .dim-time {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Submit Section */
.submit-section {
  text-align: center;
  margin-top: 2.5rem;
  padding-top: 1rem;
}

.submit-button {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 1rem 3rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: var(--shadow-md);
  letter-spacing: 0.01em;
}

.submit-button:hover {
  background: var(--color-primary-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.submit-button:active {
  transform: translateY(0);
}

.submit-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Results Page Styles */
.results-page {
  min-height: 100vh;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 20px;
}

.results-card {
  background: var(--color-surface);
  border-radius: 16px;
  max-width: 960px;
  width: 100%;
  padding: 48px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.06);
}

.results-header {
  text-align: center;
  margin-bottom: 40px;
}

.results-body {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.results-left {
  flex: 0 0 35%;
}

.results-brand {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #D4703A;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.results-title {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 400;
  color: var(--color-heading);
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin: 0 0 28px;
}

.results-score-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0 0 6px;
}

.results-score-subtitle {
  font-size: 12px;
  color: var(--color-gray);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 20px;
  line-height: 1.5;
}

.results-score-number {
  font-family: var(--font-serif);
  font-size: 80px;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1;
  margin: 0 0 28px;
}

/* Tighten the gap below the number when a change indicator follows it. */
.results-score-number:has(+ .results-delta) {
  margin-bottom: 10px;
}

.results-delta {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 24px;
}

.results-delta--up { color: var(--color-positive); }
.results-delta--down { color: var(--color-danger); }
.results-delta--flat { color: var(--color-text-muted); }

.results-scale-heading {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0 0 14px;
}

.results-scale {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 22px;
}

.results-scale-item {
  font-size: 13px;
  color: #444;
  line-height: 1.4;
}

.results-scale-range {
  font-weight: 500;
  color: var(--color-heading);
}

.results-goal-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: #666;
  line-height: 1.55;
  margin: 0 0 28px;
}

.results-cta-btn {
  display: block;
  width: 100%;
  padding: 12px 20px;
  background: var(--color-heading);
  color: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s ease;
}

.results-cta-btn:hover {
  background: #D4703A;
}

.results-right {
  flex: 1;
  background: var(--color-white);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #EEEBE3;
}

.results-outer {
  max-width: 960px;
  width: 100%;
  margin-top: 24px;
}

@media (max-width: 700px) {
  .results-page {
    padding: 20px 16px;
  }

  .results-card {
    padding: 28px 20px;
  }

  .results-body {
    flex-direction: column;
    gap: 28px;
  }

  .results-left,
  .results-right {
    flex: none;
    width: 100%;
  }

  .results-right {
    padding: 12px 8px;
  }

  .results-title {
    font-size: 28px;
  }

  .results-score-number {
    font-size: 60px;
  }
}

.how-to-read-btn {
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 50px;
  padding: 8px 22px;
  font-size: 12px;
  color: var(--color-gray-dark);
  cursor: pointer;
  font-weight: 500;
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.2s;
}

.how-to-read-btn:hover {
  border-color: #e5866b;
}

/* How to Read Modal */
.htr-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.5);
  z-index: 200;
}

.htr-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 201;
  background: var(--color-surface);
  border-radius: 20px;
  padding: 36px 36px 32px;
  max-width: 500px;
  width: calc(100% - 48px);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15);
}

.htr-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--color-gray);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.htr-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #e5866b;
  font-weight: 700;
  margin: 0 0 10px;
}

.htr-title {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--color-heading);
  font-weight: 400;
  margin: 0 0 20px;
}

.htr-intro {
  font-size: 13px;
  color: var(--color-gray-dark);
  line-height: 1.6;
  margin: 0 0 18px;
}

.htr-quadrants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.htr-quad {
  border-radius: 12px;
  padding: 14px 16px;
}

.htr-quad-direction {
  display: block;
  font-size: 10px;
  color: var(--color-gray);
  margin-bottom: 4px;
}

.htr-quad strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
}

.htr-quad p {
  font-size: 12px;
  color: var(--color-gray-dark);
  line-height: 1.5;
  margin: 0;
}

.htr-quad--urgent    { background: rgba(229,134,107,0.09); border: 1px solid rgba(229,134,107,0.25); }
.htr-quad--urgent strong { color: #e5866b; }
.htr-quad--working   { background: rgba(71,128,96,0.08);  border: 1px solid rgba(71,128,96,0.2); }
.htr-quad--working strong { color: var(--color-positive); }
.htr-quad--consider  { background: rgba(217,217,217,0.4); border: 1px solid var(--color-divider); }
.htr-quad--consider strong { color: var(--color-gray); }
.htr-quad--background { background: rgba(194,221,248,0.15); border: 1px solid rgba(194,221,248,0.5); }
.htr-quad--background strong { color: #6a9fc0; }

.htr-axes-text {
  font-size: 13px;
  color: var(--color-gray-dark);
  line-height: 1.6;
  margin: 0 0 16px;
}

.htr-footnote {
  font-size: 12px;
  color: var(--color-gray-dark);
  line-height: 1.6;
  margin: 0 0 24px;
}

.htr-got-it {
  width: 100%;
  background: var(--color-heading);
  color: var(--color-surface);
  border: none;
  border-radius: 50px;
  padding: 13px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.2s;
}

.htr-got-it:hover {
  background: #e5866b;
}

.htr-got-it:disabled {
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.htr-intro-lead {
  font-size: 14px;
  color: var(--color-ink-soft);
  margin: 0 0 12px;
}

.htr-intro-list {
  margin: 0 0 12px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

/* The scale anchors under each criterion in the intake modal. */
.htr-intro-scale {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--color-gray-dark);
}

/* Notes — listed with the criteria but not itself a rating, so it sits
   outside the numbered list while keeping the same indent. */
.htr-intro-extra {
  margin: 0 0 20px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

/* Intake modal ("How the Life Map works") — reopen link + example card */
.htr-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.htr-reopen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-accent-dark);
  cursor: pointer;
}

.htr-reopen:hover {
  text-decoration: underline;
}

.htr-reopen .htr-icon {
  color: currentColor;
}

.htr-modal--intake .htr-got-it {
  margin-top: 14px;
}

.htr-example {
  background: var(--color-bg-warm);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 0 0 20px;
}

.htr-example-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text-muted);
  font-weight: 600;
  margin: 0 0 14px;
}

.htr-example-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 8px;
}

.htr-example-row--badge {
  margin-bottom: 14px;
}

.htr-example-name {
  font-size: 12px;
  color: var(--color-gray-dark);
}

.htr-example-num {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-heading);
}

.htr-example-badge {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-align-drifting-bg);
  color: var(--color-accent-dark);
}

.htr-example-track {
  position: relative;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  margin: 0 0 16px;
}

.htr-example-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: var(--radius-pill);
}

.htr-example-fill--relevance    { background: var(--color-relevance-strong); }
.htr-example-fill--satisfaction { background: var(--color-satisfaction-strong); }

.htr-example-thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.htr-example-thumb--relevance    { background: var(--color-relevance-strong); }
.htr-example-thumb--satisfaction { background: var(--color-satisfaction-strong); }

.htr-example-note {
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
}

.htr-example-note-label {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0 0 4px;
}

.htr-example-note-body {
  font-size: 13px;
  color: var(--color-gray-dark);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
}

.htr-privacy {
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
}

.htr-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--color-gray-dark);
  line-height: 1.5;
  margin: 0 0 6px;
}

.htr-privacy-note .htr-icon {
  margin-top: 1px;
}

.htr-privacy-details {
  margin-left: 23px;
}

.htr-privacy-summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-accent-dark);
  text-decoration: underline;
  cursor: pointer;
  list-style: none;
}

.htr-privacy-summary::-webkit-details-marker {
  display: none;
}

.htr-privacy-summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.htr-privacy-details[open] .htr-privacy-summary::after {
  transform: rotate(-135deg);
}

.htr-privacy-copy {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-gray-dark);
}

.htr-privacy-copy p {
  margin: 0 0 10px;
}

.htr-privacy-copy p:last-child {
  margin-bottom: 0;
}

.htr-privacy-copy strong {
  color: var(--color-heading);
}

.htr-privacy-eff {
  color: var(--color-text-muted);
}

.htr-privacy-copy a {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

/* Chart tabs */
.chart-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: var(--color-divider);
  border-radius: 50px;
  padding: 3px;
  /* Wide enough for the longer "Sub-Domain" label to sit on one line — the two
     tabs are flex: 1, so the container has to fit twice the wider label. */
  max-width: 240px;
  margin: 0 auto 20px;
}

.chart-tab {
  flex: 1;
  padding: 8px 16px;
  white-space: nowrap;
  border: none;
  border-radius: 50px;
  background: transparent;
  color: var(--color-gray);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all 0.2s;
}

.chart-tab--active {
  background: var(--color-white);
  color: var(--color-heading);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Zoom presets. Deliberately quieter than the tabs above them: which ratings
   are plotted is the decision, where you happen to be looking is an adjustment,
   and the two should not compete for the same weight. */
.chart-zoom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px 6px;
  max-width: 470px;
  margin: -8px auto 14px;
}

.chart-zoom-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* A deliberate line break rather than a rule: the two whole-map views and the
   four quadrants are different questions, and at the width of a chart panel the
   row wraps anyway — better it wrap where the meaning divides than wherever the
   last pill happens to run out of room. */
.chart-zoom-break {
  flex-basis: 100%;
  height: 0;
}

.chart-zoom-btn {
  padding: 5px 11px;
  border: 1px solid var(--color-border-light);
  border-radius: 50px;
  background: var(--color-white);
  color: var(--color-gray);
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* :not() keeps this off the selected pill — a plain .chart-zoom-btn:hover would
   outrank .chart-zoom-btn--active on specificity and paint dark text onto the
   dark background of the preset you just clicked. */
.chart-zoom-btn:not(.chart-zoom-btn--active):hover {
  color: var(--color-heading);
  border-color: var(--color-border);
}

/* "Fit to ratings" on a map that already fills the scale. */
.chart-zoom-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.chart-zoom-btn--active {
  background: var(--color-heading);
  border-color: var(--color-heading);
  color: var(--color-white);
  font-weight: 600;
}

.results-right .chart-section {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}

/* Chart Section */
.chart-section {
  background: var(--color-white);
  border: 1px solid var(--color-divider);
  border-radius: 20px;
  padding: 24px 12px 20px;
  margin-bottom: 24px;
}

.chart-header {
  text-align: center;
  margin-bottom: 1rem;
}

.chart-header h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--color-heading);
  font-weight: 400;
  margin: 0 0 6px;
}

.chart-description {
  font-size: 13px;
  color: var(--color-gray);
  margin: 0 auto;
  max-width: 420px;
  line-height: 1.5;
}

.chart-wrapper {
  position: relative;
}

/* Custom HTML tooltip for the bubble chart (supports the NOTE section) */
.bubble-tooltip {
  position: absolute;
  /* Vertical placement is computed in the controller so a tall stack can flip
     or pin itself to stay on the chart; only the horizontal centring is CSS. */
  transform: translate(-50%, 0);
  z-index: 40;
  pointer-events: none;
  min-width: 150px;
  max-width: 260px;
  padding: 10px 12px;
  background: rgba(30, 26, 22, 0.94);
  color: #fff;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.12s ease;
}

/* Two or more bubbles under the cursor. Width is fixed rather than shrink-to-
   fit so a stack of short notes doesn't render a narrow card that wraps every
   stat line — which also keeps entry heights predictable enough to measure. */
.bubble-tooltip--stacked {
  width: 260px;
  max-width: 260px;
}

/* How many bubbles the cursor is inside, so a truncated list still says how
   much is under there. */
.bubble-tt-count {
  margin: 0 0 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* Rules separate stacked entries; a single entry keeps the original card. */
.bubble-tt-entry + .bubble-tt-entry {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.bubble-tt-more {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.bubble-tt-title {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 700;
}

/* The signpost card shown for a stack too crowded to list: the count is the
   headline here rather than a label above a list, so it carries the weight the
   entry titles carry elsewhere. */
.bubble-tt-stack-count {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
}

.bubble-tt-cta {
  margin: 3px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

/* One dot per bubble in the stack — how many, and how many domains they come
   from, in the space of a line. */
.bubble-tt-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.bubble-tt-swatches .bubble-tt-swatch {
  margin-right: 0;
}

/* Ties each name in a stack back to its bubble on the chart. */
.bubble-tt-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border: 1.5px solid;
  border-radius: 50%;
  vertical-align: baseline;
}

.bubble-tt-row {
  margin: 0;
  opacity: 0.92;
}

.bubble-tt-row b {
  font-weight: 700;
}

.bubble-tt-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.bubble-tt-note-head {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.bubble-tt-note-body {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
}

/* Notes are free text of any length. In a stack they clamp so one long note
   can't crowd out the entries below it; hovering the bubble alone still shows
   the note in full. */
.bubble-tooltip--stacked .bubble-tt-note-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.bubble-tooltip--stacked .bubble-tt-note {
  margin-top: 5px;
  padding-top: 0;
  border-top: 0;
}

.bubble-tooltip--stacked .bubble-tt-note-body svg {
  vertical-align: -1px;
  opacity: 0.6;
}

/* The pinned card: the same object as the hover card — it shares
   .bubble-tooltip so the two can never drift apart visually — held still after
   a click. Only its behaviour changes: it takes pointer events, lists the whole
   stack, and scrolls. */
.bubble-pin {
  z-index: 45;
  width: 300px;
  max-width: min(300px, calc(100% - 16px));
  padding-bottom: 0;
  pointer-events: auto;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.bubble-pin:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.bubble-pin-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.bubble-pin-head .bubble-tt-count {
  margin: 0;
}

.bubble-pin-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: -4px -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}

.bubble-pin-close:hover,
.bubble-pin-close:focus-visible {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.12);
}

/* Scrolling replaces the hover card's measure-and-drop truncation, so a pinned
   stack never hides an entry. The fade says "there is more below" without
   spending a line of the card saying it, and comes off at the end of the list.
   overscroll-behavior keeps a flicked list from scrolling the page underneath. */
.bubble-pin-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}

.bubble-pin-scroll.is-end {
  mask-image: none;
}

/* Below the mobile breakpoint a floating card would blanket the chart it is
   describing, so it sits as a sheet across the bottom of the panel instead. */
.bubble-pin--sheet {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  transform: none;
  border-radius: 12px 12px 0 0;
}

.chart-divider {
  height: 1px;
  background: var(--color-surface);
  margin: 12px 20px;
}

.chart-legend-guide {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-gray-dark);
}

.legend-icon {
  background: var(--color-gray);
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-icon.size-small {
  width: 10px;
  height: 10px;
}

.legend-icon.size-large {
  width: 20px;
  height: 20px;
}

.chart-hover-hint {
  text-align: center;
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0.4rem 0 0;
}

.chart-color-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: 0.75rem 1rem 0.25rem;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-gray-dark);
}

.chart-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.chart-axis-labels {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.chart-axis-labels span {
  font-size: 10px;
  color: var(--color-gray);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Insights Section */
.insights-section {
  margin-bottom: 24px;
}

.insights-section h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--color-heading);
  font-weight: 400;
  text-align: center;
  margin: 0 0 16px;
}

.category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.category-result-card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid #e8e2d8;
  border-left: 4px solid var(--category-color);
}

.category-result-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-heading);
  margin: 0 0 0.75rem 0;
}

.scores {
  display: flex;
  gap: 1rem;
}

.score {
  flex: 1;
  text-align: center;
}

.score-label {
  display: block;
  font-size: 0.7rem;
  color: var(--color-gray);
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.score-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-heading);
}

/* Next Steps Section */
.next-steps-section {
  background: var(--color-heading);
  border-radius: 16px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.next-steps-text h2 {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-surface);
  font-weight: 400;
  margin: 0 0 6px;
  line-height: 1.4;
}

.next-steps-text p {
  font-size: 12px;
  color: var(--color-gray);
  margin: 0;
  max-width: 340px;
  line-height: 1.6;
}

.action-buttons {
  flex-shrink: 0;
}

.button {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3px;
  transition: background 0.2s;
}

.button-secondary {
  background: #e5866b;
  color: var(--color-white);
}

.button-secondary:hover {
  background: #cf6e50;
}

@media (max-width: 540px) {
  .next-steps-section {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Flash Messages */
.flash {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  animation: flash-in 0.3s ease;
}

.flash--notice {
  background: var(--color-accent);
  color: var(--color-white);
}

.flash--alert {
  background: var(--color-danger);
  color: var(--color-white);
}

@keyframes flash-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

}