:root {
  --transition-fast: 0.2s ease;
}

body.fixed-header-active {
  padding-top: var(--header-height);
}

.container {
  max-width: var(--width-tool-container);
  margin-inline: auto;
  padding-inline: var(--space-md);
  padding-bottom: max(var(--space-section), 8rem);
 
  min-height: calc(100vh - var(--header-height)); 

  min-height: calc(100dvh - var(--header-height)); 
}

.noscript-notice {
  background-color: var(--color-primary-lighter);
  color: var(--color-primary-dark);
  padding: var(--space-md);
  text-align: center;
  font-size: var(--font-size-md);
  line-height: 1.6;
  border-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.header {
  background: var(--color-primary-lighter);
  padding: var(--space-xl) var(--space-md);
  margin-bottom: var(--space-xl);
  border-bottom: 0;
  text-align: center;
  position: relative;
  z-index: 10;
  margin-top: var(--header-height);
}

.header h1 {
  color: var(--color-primary-dark);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  word-break: keep-all;
}

.header h1 .emoji {
  font-size: clamp(1.25rem, 0.5rem + 2vw, 2rem);
  line-height: 1;
}

.header p {
  font-size: var(--font-size-base);
  color: var(--color-text-light);
  line-height: 1.6;
  max-width: 65ch;
  margin: 0 auto;
}

.card {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
  border-radius: var(--border-radius-lg);
  opacity: 0;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium), opacity var(--transition-medium);
}
.card.visible { opacity: 1; }

#result-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header--primary-light {
  background-color: var(--color-primary-light);
}

.card-header--primary-lighter {
  background-color: var(--color-primary-lighter);
}

.card-title--primary,
.text-primary-strong {
  color: var(--color-primary-dark);
}

.card-title .emoji { font-size: 1.5em; }

.btn {
  min-height: 3rem;
  box-shadow: var(--shadow-soft);
}

.btn:disabled { background-color: var(--color-border-light); color: var(--color-text-lighter); border-color: var(--color-border); }

#intro-card .intro-text { margin-bottom: var(--space-lg); font-size: var(--font-size-base); color: var(--color-text-light); line-height: var(--line-height-base); word-break: keep-all; }
#intro-card .intro-text p { margin-bottom: var(--space-md); }

.intro-analogy-box {
  background-color: var(--color-primary-lighter);
  border: 0;
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  text-align: left;
  box-shadow: none;
}

.intro-analogy-box__title { margin-bottom: var(--space-sm); }

.intro-quick-action {
  display: flex;
  justify-content: center;
  margin: var(--space-lg) 0;
}

.evidence-note {
  margin: var(--space-lg) 0 var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-base);
  background-color: var(--color-surface-alt, var(--color-primary-lighter));
}

.evidence-note__title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  list-style: none;
}

.evidence-note__title::-webkit-details-marker {
  display: none;
}

.evidence-note--compact > .evidence-note__title::after {
  content: "+";
  margin-left: auto;
  color: var(--color-text-light);
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.evidence-note--compact[open] > .evidence-note__title::after {
  content: "−";
}

.evidence-note__text {
  margin: var(--space-sm) 0 0;
  color: var(--color-text);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.evidence-note__text a {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.intro-time-note {
  margin-top: var(--space-md);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: var(--font-weight-semibold);
}

.retry-button {
  width: 100%;
  max-width: 18.75rem;
  margin: 0 auto;
}

.btn--text {
  background-color: transparent;
  border: none;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.inline-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-style: normal;
  flex-shrink: 0;
}
.inline-emoji.icon {
  width: 1.35em;
  min-width: 1.35em;
  text-align: center;
}
.domain-selection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.domain-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.domain-instruction {
  width: 100%;
  text-align: center;
  margin-bottom: var(--space-lg);
  line-height: 1.7;
  color: var(--color-text-light);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.domain-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.domain-option > input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#domain-selection-card .domain-option > input[name="bonding-domain"] {
  inline-size: 100% !important;
  block-size: 100% !important;
}

.domain-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  min-height: 8rem;
  padding: var(--space-lg);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: none;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.domain-icon { font-size: 2.5rem; color: var(--color-primary); margin-bottom: var(--space-sm); line-height: 1; }
.domain-title {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  word-break: keep-all;
  overflow-wrap: normal;
}

#domain-selection-card .domain-option > input:checked + .domain-btn {
  border-color: var(--color-primary-dark) !important;
  background: var(--color-primary-dark) !important;
  color: var(--color-text-on-primary) !important;
  box-shadow: 0 0 0 3px var(--focus-ring-color), var(--shadow-soft) !important;
}

.domain-option > input:checked + .domain-btn::after {
  content: "✓";
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--color-surface);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
}

#domain-selection-card .domain-option > input:checked + .domain-btn .domain-title {
  color: var(--color-text-on-primary) !important;
}

#domain-selection-card .domain-option > input:checked + .domain-btn .domain-icon {
  color: var(--color-text-on-primary) !important;
}

.domain-option > input:focus-visible + .domain-btn {
  outline: 0.1875rem solid var(--color-primary-dark);
  outline-offset: 0.1875rem;
  box-shadow: 0 0 0 0.25rem var(--color-primary-light);
}

.area-progress-indicator { margin-bottom: var(--space-lg); }
.progress-container { height: 0.625rem; width: 100%; background-color: var(--color-border-light); border-radius: var(--border-radius-pill); margin: var(--space-sm) 0 var(--space-xs); overflow: hidden; box-shadow: inset 0 1px 2px rgba(var(--shadow-color-rgb), 0.05); }
.progress-bar { height: 100%; width: 0%; background-color: var(--color-primary); border-radius: var(--border-radius-pill); transition: width 0.4s ease; }
.progress-text-container { display: flex; justify-content: space-between; font-size: var(--font-size-sm); color: var(--color-text-light); }
#area-progress-text { font-weight: var(--font-weight-medium); }

.tool-progress__item {
  min-height: 2.5rem;
  border: 0;
  border-radius: var(--border-radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xs) var(--space-sm);
  word-break: keep-all;
}
.tool-progress__item.is-complete {
  background-color: var(--color-primary-lighter);
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.tool-progress__item.is-current {
  background-color: var(--color-primary);
  border-color: var(--color-primary-dark);
  color: var(--color-text-on-primary);
  font-weight: var(--font-weight-semibold);
}

#question-card-title {
  color: var(--color-text-light);
  text-align: center;
}
#question-card-title strong { color: var(--color-primary); font-weight: 700; }

.question-timeframe-note {
  max-width: 52rem;
  margin: 0 auto var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius-base);
  background-color: var(--color-primary-lighter);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.question-container {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.question {
  width: 100%;
  margin: 0;
  padding: 0;
  scroll-margin-top: calc(var(--header-height, 4rem) + var(--space-lg));
}

h3#question-prompt {
  font-size: inherit;
  font-weight: inherit;
}

#question-prompt:focus-visible {
  border-radius: var(--border-radius-sm);
  outline: 0.1875rem solid var(--color-primary-dark);
  outline-offset: 0.25rem;
}
.question-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-md);
  width: 100%;
}
.question-category-emoji {
  flex: 0 0 auto;
  font-size: 2rem;
  line-height: 1;
}
.question-title-text-container {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.question-category-title { font-size: var(--font-size-sm); color: var(--color-primary-dark); margin-bottom: var(--space-xs); font-weight: var(--font-weight-semibold); display: block; word-break: keep-all; }
.question-title-text { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--color-text); line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }
.question-title-text strong { font-weight: var(--font-weight-bold); color: var(--color-text); }
.rating-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0 var(--space-md); min-width: 0; }
.rating-option { position: relative; min-width: 0; min-height: 2.75rem; }
.rating-option input[type="radio"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.rating-label { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-width: 0; padding: var(--space-md); border: 1px solid var(--color-border-light); border-radius: var(--border-radius-lg); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); text-align: center; min-height: 6.25rem; background-color: var(--color-surface); word-break: keep-all; overflow-wrap: break-word; }
.rating-option input[type="radio"]:checked + .rating-label { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); box-shadow: 0 0 0 3px var(--focus-ring-color), var(--shadow-soft); color: var(--color-text-on-primary); }
.rating-option input[type="radio"]:checked + .rating-label::after { content: "✓"; position: absolute; top: var(--space-xs); right: var(--space-xs); font-weight: var(--font-weight-bold); color: var(--color-text-on-primary); }
.rating-option input[type="radio"]:focus-visible + .rating-label { outline: 0.1875rem solid var(--color-primary-dark); outline-offset: 0.1875rem; box-shadow: 0 0 0 0.25rem var(--color-primary-light); }
.rating-marker { font-size: 2rem; line-height: 1; margin-bottom: var(--space-sm); }
.rating-text { min-width: 0; font-weight: var(--font-weight-medium); color: var(--color-text-light); font-size: var(--font-size-sm); line-height: 1.45; overflow-wrap: break-word; }
.rating-option input[type="radio"]:checked + .rating-label .rating-text { font-weight: var(--font-weight-semibold); color: var(--color-text-on-primary); }

.nav-buttons { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-xl); padding-inline: var(--space-sm); }
.btn-secondary#prev-btn, .btn-primary#next-btn {
    font-size: var(--font-size-sm); 
}
.question-support-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}
html body.tool-standard-ui main #question-card .question-support-actions:has(#back-to-domain-btn) {
  display: flex !important;
  min-height: auto !important;
  margin-top: var(--space-xl) !important;
  padding: 0 !important;
}
html body.tool-standard-ui main #question-card #back-to-domain-btn {
  display: inline-flex !important;
}

.result-container,
#result-capture-area,
.result-header { min-width: 0; max-width: 100%; }
.result-header { text-align: center; margin-bottom: var(--space-lg); }
.result-domain-label { margin: 0 0 var(--space-xs); color: var(--color-primary-dark); font-weight: var(--font-weight-bold); }
.result-subtitle { max-width: 48rem; margin: 0 auto; font-size: var(--font-size-sm); color: var(--color-text-light); line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }

.result-summary,
.today-action,
.strong-answers-section,
.areas-analysis,
.reality-compare-card,
.result-scope-note {
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  border: 0;
  border-radius: var(--border-radius-lg);
  background-color: var(--color-surface);
  box-shadow: none;
}

.result-summary { background-color: var(--color-primary-lighter); }
.result-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.result-metric { min-width: 0; padding: var(--space-lg); border-radius: var(--border-radius-lg); background-color: var(--color-surface); text-align: center; }
.result-metric__label { display: block; min-width: 0; color: var(--color-text-light); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }
.result-metric__value { display: block; min-width: 0; margin: var(--space-sm) 0 0; color: var(--color-primary-dark); font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.35rem); font-weight: var(--font-weight-bold); line-height: 1.15; overflow-wrap: anywhere; }
html body.tool-standard-ui #result-card .result-metric__value {
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.35rem);
  white-space: normal;
}
.result-description { margin-top: var(--space-lg); color: var(--color-text); line-height: var(--line-height-base); text-align: center; }
.result-description p { margin: 0; }
.result-description p + p { margin-top: var(--space-sm); }
.top-areas-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.top-area-item { display: flex; min-width: 0; align-items: center; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--border-radius-base); background-color: var(--color-surface); }
.top-area-item__icon { font-size: 1.85rem; line-height: 1; }
.top-area-item span:last-child { display: flex; min-width: 0; flex-direction: column; }
.top-area-item strong,
.top-area-item small { overflow-wrap: break-word; }
.top-area-item small { margin-top: 0.15rem; color: var(--color-text-light); line-height: 1.45; }

.today-action { background-color: var(--color-surface-alt, var(--color-primary-lighter)); }
.today-action h3,
.reality-compare-card h3 { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); color: var(--color-primary-dark); text-align: center; }
.today-action h3 span,
.reality-compare-card h3 span { font-size: 1.85rem; }
#today-action-text { display: grid; max-width: 46rem; gap: var(--space-sm); margin: var(--space-md) auto 0; }
.today-action p { margin: 0; color: var(--color-text); line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }
.today-action-condition { color: var(--color-text-light); text-align: center; }
.today-action-list { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.today-action-list li { min-width: 0; padding: var(--space-md); border-radius: var(--border-radius-base); background-color: var(--color-surface); line-height: 1.65; word-break: keep-all; overflow-wrap: break-word; }
.today-action-fallback { padding-top: var(--space-xs); color: var(--color-text-light); text-align: center; }

.section-heading { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-lg); color: var(--color-primary-dark); text-align: center; }
.section-heading .emoji { font-size: 1.85rem; }
.strong-answers-list { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.strong-answers-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding: var(--space-md); border-radius: var(--border-radius-base); background-color: var(--color-primary-lighter); line-height: 1.65; }
.strong-answers-list li > span { min-width: 0; word-break: keep-all; overflow-wrap: break-word; }
.strong-answers-list li > strong { flex: 0 0 auto; color: var(--color-primary-dark); font-size: var(--font-size-sm); }
.strong-answers-list .strong-answer-empty { display: block; color: var(--color-text-light); text-align: center; }

.area-results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.area-result-card { min-width: 0; padding: var(--space-lg); border-radius: var(--border-radius-lg); background-color: var(--color-primary-lighter); }
.area-result-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.area-result-card__header h4 { min-width: 0; margin: 0; color: var(--color-text); font-size: var(--font-size-base); line-height: 1.45; word-break: keep-all; overflow-wrap: break-word; }
.area-result-card__header h4 span { font-size: 1.5rem; }
.area-result-card__header > strong { flex: 0 0 auto; color: var(--color-primary-dark); white-space: nowrap; }
.area-result-card__description { margin: var(--space-sm) 0 0; color: var(--color-text-light); font-size: var(--font-size-sm); line-height: 1.65; word-break: keep-all; overflow-wrap: break-word; }
.area-result-card__description--empty { font-style: italic; }
.area-distribution { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin: var(--space-md) 0 0; }
.area-distribution__item { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: var(--space-xs); margin: 0; padding: var(--space-sm); border-radius: var(--border-radius-sm); background-color: var(--color-surface); }
.area-distribution__item dt { min-width: 0; color: var(--color-text-light); font-size: var(--font-size-xs, 0.8125rem); line-height: 1.45; word-break: keep-all; overflow-wrap: break-word; }
.area-distribution__item dd { flex: 0 0 auto; margin: 0; color: var(--color-primary-dark); font-weight: var(--font-weight-bold); white-space: nowrap; }

.reality-compare-card { background-color: var(--color-primary-lighter); }
.reality-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.reality-compare-grid p { display: flex; flex-direction: column; gap: var(--space-xs); margin: 0; padding: var(--space-md); border-radius: var(--border-radius-base); background-color: var(--color-surface); }
.reality-compare-grid span { color: var(--color-text-light); font-size: var(--font-size-sm); }
.reality-compare-note { margin: var(--space-md) 0 0; color: var(--color-text-light); text-align: center; line-height: 1.65; }

.result-scope-note { background-color: var(--ds-warning-bg, var(--color-warning-bg, var(--color-primary-lighter))); }
.result-scope-note h3 { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-md); color: var(--color-primary-dark); line-height: 1.4; word-break: keep-all; overflow-wrap: break-word; }
.result-scope-note p { max-width: 52rem; margin: 0; color: var(--color-text); line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }
.result-scope-note p + p { margin-top: var(--space-sm); }
.result-help-link { min-height: 2.75rem; margin-top: var(--space-md); }

.date-text { margin-bottom: var(--space-md); color: var(--color-text-light); font-size: var(--font-size-sm); text-align: right; }
.btn--text {
  min-height: 2.75rem;
}

.result-footer-row {
  text-align: center;
  margin-top: var(--space-xl);
}

@media (hover: hover) {
  .rating-label:hover { background-color: var(--color-primary-lighter); border-color: var(--color-primary); }
  .domain-option:hover .domain-btn { background-color: var(--color-primary-lighter); border-color: var(--color-primary); }
  .domain-option:hover input:checked + .domain-btn { background-color: var(--color-primary-dark); }
  .btn--text:hover { color: var(--color-primary-dark); background-color: var(--color-primary-lighter); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .rating-label,
  .domain-btn,
  .rating-marker::before {
    transform: none !important;
  }
}

@media (max-width: 48rem) {
  .header { padding: var(--space-lg) var(--space-sm); margin-bottom: var(--space-lg); }
  .header h1 { font-size: clamp(var(--fs-h1-min,1.25rem), 1.2vw + 1rem, var(--fs-h1-max,var(--font-size-xl))); gap: var(--space-sm); }
  .header h1 .emoji { font-size: clamp(1.25rem, 0.5rem + 2vw, 2rem); }
  .header p { font-size: var(--font-size-base); }
  body.tool-standard-ui .tool-progress {
    display: none;
  }
  .domain-selection-grid,
  .rating-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 37.5rem) {
  .domain-selection-grid,
  .rating-options,
  .result-metric-grid,
  .top-areas-summary,
  .area-results-grid,
  .reality-compare-grid,
  .area-distribution { grid-template-columns: 1fr; }
  .rating-options {
    padding-bottom: 4.5rem;
  }
  .domain-btn {
    min-height: 5.25rem;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-md);
    text-align: left;
  }
  .domain-icon {
    margin-bottom: 0;
    font-size: 2rem;
  }
  .domain-title {
    margin-bottom: 0;
  }
  .intro-quick-action .btn {
    width: 100%;
    max-width: 22rem;
  }
  .intro-quick-action {
    padding-inline-end: 4rem;
  }
  .card-header {
    align-items: flex-start;
    gap: var(--space-sm);
    flex-direction: column;
  }
  .rating-label {
    min-height: 4rem;
    flex-direction: row;
    gap: var(--space-sm);
    justify-content: flex-start;
    text-align: left;
  }
  .rating-marker {
    margin-bottom: 0;
    font-size: 1.85rem;
  }
  .question-support-actions .btn {
    width: 100%;
  }
  .result-summary,
  .today-action,
  .strong-answers-section,
  .areas-analysis,
  .reality-compare-card,
  .result-scope-note {
    padding: var(--space-md);
  }
  .result-footer-row {
    padding-bottom: 4.5rem;
  }
  .strong-answers-list li {
    flex-direction: column;
    gap: var(--space-xs);
  }
  .question-timeframe-note {
    padding-inline: var(--space-sm);
    text-align: left;
  }
}

@media (max-width: 30rem) {
  .nav-buttons {
    gap: var(--space-sm);
    padding-inline: 0;
  }
  .nav-buttons .btn {
    min-width: 0;
    flex: 1 1 0;
  }
}

@media (forced-colors: active) {
  .domain-option > input:checked + .domain-btn,
  .rating-option input[type="radio"]:checked + .rating-label {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
    outline: 0.1875rem solid CanvasText;
    forced-color-adjust: none;
  }
  .domain-option > input:checked + .domain-btn .domain-title,
  .domain-option > input:checked + .domain-btn .domain-icon,
  .rating-option input[type="radio"]:checked + .rating-label .rating-text {
    color: HighlightText;
  }
  .result-metric,
  .top-area-item,
  .today-action-list li,
  .area-result-card,
  .area-distribution__item,
  .reality-compare-grid p,
  .result-scope-note {
    border: 1px solid CanvasText;
  }
}

/* Keep the six response choices easy to scan without showing native radio circles. */
.rating-option:nth-child(1) { --rating-face: "🙂"; }
.rating-option:nth-child(2) { --rating-face: "😐"; }
.rating-option:nth-child(3) { --rating-face: "😕"; }
.rating-option:nth-child(4) { --rating-face: "😟"; }
.rating-option:nth-child(5) { --rating-face: "😣"; }
.rating-option:nth-child(6) { --rating-face: "🤷"; }

.rating-marker {
  display: block;
  width: 2.75rem;
  font-size: 0;
  line-height: 1;
}

.rating-marker::before {
  content: var(--rating-face);
  display: block;
  font-size: 2.35rem;
  line-height: 1;
}

.rating-option input[type="radio"]:checked + .rating-label .rating-marker::before {
  transform: scale(1.08);
}

@media (max-width: 37.5rem) {
  .rating-marker {
    flex: 0 0 2.75rem;
    margin-bottom: 0;
    text-align: center;
  }
}