/* =============================================================================
   CAREGIVER TEST — page-specific styles (utilities live in style.css)
   ============================================================================= */

[data-show-when][hidden] {
  display: none !important;
}

/* Card surfaces blend with the page background (#f1f1f3) instead of pure white.
   Tweak --cgt-card-bg to nudge how close the cards sit to the UI background. */
:root {
  --cgt-card-bg: #f9f9fb;
}

[data-show-when] .bg-white {
  background-color: var(--cgt-card-bg);
}

.care-giver-test-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, #fff 55%, rgba(255, 255, 255, 0) 100%);
}

#care-giver-test-app {
  padding-bottom: 96px;
}

.care-giver-test-fade-image {
  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent 100%);
  mask-image: linear-gradient(to top, #000 60%, transparent 100%);
}

@keyframes careGiverTestStepIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.care-giver-test-step-enter {
  animation: careGiverTestStepIn 450ms ease both;
}

@media (prefers-reduced-motion: reduce) {
  .care-giver-test-step-enter {
    animation: none;
  }

  .cgt-results-loader__dot {
    animation: none;
    box-shadow: 20px 0 var(--cgt-loader-dot), -20px 0 var(--cgt-loader-dot-fade);
    background: var(--cgt-loader-dot);
  }
}

.cgt-results-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 220px;
  padding: 2.5rem 1rem;
}

.cgt-results-loader__text {
  margin: 0;
  text-align: center;
}

.cgt-results-loader__dot {
  --cgt-loader-dot: var(--primary-800);
  --cgt-loader-dot-fade: color-mix(in srgb, var(--primary-800) 18%, transparent);
  width: 15px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: cgtResultsLoader 1s infinite linear alternate;
}

@keyframes cgtResultsLoader {
  0% {
    box-shadow: 20px 0 var(--cgt-loader-dot), -20px 0 var(--cgt-loader-dot-fade);
    background: var(--cgt-loader-dot);
  }

  33% {
    box-shadow: 20px 0 var(--cgt-loader-dot), -20px 0 var(--cgt-loader-dot-fade);
    background: var(--cgt-loader-dot-fade);
  }

  66% {
    box-shadow: 20px 0 var(--cgt-loader-dot-fade), -20px 0 var(--cgt-loader-dot);
    background: var(--cgt-loader-dot-fade);
  }

  100% {
    box-shadow: 20px 0 var(--cgt-loader-dot-fade), -20px 0 var(--cgt-loader-dot);
    background: var(--cgt-loader-dot);
  }
}

.care-giver-test-header__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 6px 4px 2px;
  border-radius: var(--r-full);
  color: var(--primary-800);
  text-decoration: none;
  transition: background-color 200ms ease;
}

.care-giver-test-header__back-text {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.care-giver-test-header__back svg {
  flex-shrink: 0;
}

.care-giver-test-header__back:focus-visible {
  outline: 2px solid var(--primary-800);
  outline-offset: 2px;
}

@media (hover: hover) {
  .care-giver-test-header__back:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}

.care-giver-test-header__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-left: -10px;
}

.care-giver-test-header__logotype {
  width: 60px;
  height: auto;
  margin-left: 0;
}

.care-giver-test-progress {
  height: 6px;
  background: var(--primary-200);
  border-radius: var(--r-full);
  overflow: hidden;
}

.care-giver-test-progress__bar {
  height: 100%;
  width: 0;
  background: var(--secondary-500);
  border-radius: inherit;
  transition: width 280ms ease;
}

.care-giver-test-options {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.care-giver-test-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  border: 1px solid var(--primary-200);
  border-radius: var(--r-md);
  background: var(--primary-50);
  text-align: right;
  font-family: var(--font-secondary);
  font-size: 0.95rem;
  color: var(--primary-800);
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.care-giver-test-option:focus-visible {
  outline: 2px solid var(--secondary-500);
  outline-offset: 2px;
}

.care-giver-test-option.is-selected {
  border-color: var(--secondary-500);
  background: color-mix(in srgb, var(--secondary-100) 60%, #fff);
  box-shadow: 0 0 0 1px var(--secondary-500);
}

@media (hover: hover) {
  .care-giver-test-option:hover {
    border-color: var(--primary-400);
  }

  .care-giver-test-option.is-selected:hover {
    border-color: var(--secondary-500);
  }
}

.care-giver-test-option__radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--primary-400);
  border-radius: var(--r-full);
  position: relative;
}

.care-giver-test-option.is-selected .care-giver-test-option__radio {
  border-color: var(--secondary-500);
}

.care-giver-test-option.is-selected .care-giver-test-option__radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: var(--secondary-500);
}

.care-giver-test-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 10px;
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}

.care-giver-test-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.care-giver-test-btn--primary {
  border: 1px solid var(--secondary-500);
  background: var(--secondary-500);
  color: #fff;
}

.care-giver-test-btn--primary:not(:disabled):focus-visible {
  outline: 2px solid var(--secondary-500);
  outline-offset: 2px;
}

@media (hover: hover) {
  .care-giver-test-btn--primary:not(:disabled):hover {
    background: var(--secondary-700);
    border-color: var(--secondary-700);
  }
}

.care-giver-test-btn--ghost {
  border: 1px solid var(--primary-300);
  background: #fff;
  color: var(--primary-800);
}

.care-giver-test-btn--ghost:not(:disabled):focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

@media (hover: hover) {
  .care-giver-test-btn--ghost:not(:disabled):hover {
    background: var(--primary-100);
  }
}

.care-giver-test-field__input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--primary-200);
  border-radius: var(--r-md);
  font-family: var(--font-secondary);
  font-size: 1rem;
  color: var(--primary-800);
  background: var(--primary-50);
}

.care-giver-test-field__input:focus {
  outline: none;
  border-color: var(--secondary-300);
  box-shadow: 0 0 0 3px rgba(125, 43, 41, 0.12);
}

.care-giver-test-field__input--ltr {
  direction: ltr;
  text-align: left;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   RESULTS — color-coded breakdown shown on the thank-you step
   ============================================================================= */

.cgt-result {
  /* low = good, medium = caution, severe/high = alert */
  --cgt-low-bg: #E7F7F0;
  --cgt-low-fg: #1B8A5A;
  --cgt-medium-bg: #FDF1DD;
  --cgt-medium-fg: #B5731A;
  --cgt-severe-bg: #FBE9E9;
  --cgt-severe-fg: #C03B3B;

  font-family: var(--font-secondary);
}

.cgt-result__overall {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
  border: 1px solid transparent;
}

.cgt-result__overall--low {
  background: var(--cgt-low-bg);
  border-color: color-mix(in srgb, var(--cgt-low-fg) 25%, transparent);
}

.cgt-result__overall--medium {
  background: var(--cgt-medium-bg);
  border-color: color-mix(in srgb, var(--cgt-medium-fg) 25%, transparent);
}

.cgt-result__overall--severe {
  background: var(--cgt-severe-bg);
  border-color: color-mix(in srgb, var(--cgt-severe-fg) 25%, transparent);
}

.cgt-result__overall-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cgt-result__overall-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-800);
}

.cgt-result__overall-score {
  font-size: 0.95rem;
  color: var(--primary-500);
}

.cgt-result__table {
  width: 100%;
  border-collapse: collapse;
}

.cgt-result__table th {
  padding: 0 var(--sp-2) var(--sp-2);
  text-align: right;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--primary-500);
  border-bottom: 1px solid var(--primary-200);
}

.cgt-result__table th:not(:first-child),
.cgt-result__status {
  text-align: center;
  white-space: nowrap;
}

.cgt-result__table td {
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--primary-100);
  font-size: 1rem;
  color: var(--primary-800);
  vertical-align: middle;
}

.cgt-result__table tbody tr:last-child td {
  border-bottom: none;
}

.cgt-result__name {
  line-height: 1.5;
  font-weight: 500;
}

.cgt-result__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.cgt-result__badge--low {
  background: var(--cgt-low-bg);
  color: var(--cgt-low-fg);
}

.cgt-result__badge--medium {
  background: var(--cgt-medium-bg);
  color: var(--cgt-medium-fg);
}

.cgt-result__badge--severe {
  background: var(--cgt-severe-bg);
  color: var(--cgt-severe-fg);
}

.cgt-explanations__title {
  margin: 0 0 var(--sp-4);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--primary-800);
}

.cgt-explanations__greeting {
  margin: 0 0 var(--sp-3);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--primary-900) !important;
}

.cgt-explanations__lead {
  margin: 0 0 var(--sp-5);
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--primary-700);
}

.cgt-explanations__summary {
  margin: 0 0 var(--sp-4);
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--primary-800);
}

.cgt-explanations__intro {
  margin: 0 0 var(--sp-4);
  font-size: 1.25rem;
  line-height: 1.7;
  font-weight: 600;
  color: var(--primary-700);
}

.cgt-explanations__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.cgt-explanations__item {
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 500;
  color: var(--primary-800);
}

/* Centered shell for medium screens (540px–1023px keep the mobile layout). */
@media (min-width: 540px) and (max-width: 1023.98px) {
  body {
    max-width: 480px;
    margin-inline: auto;
  }

  .care-giver-test-footer {
    left: 50%;
    right: auto;
    width: 480px;
    transform: translateX(-50%);
  }
}


/* =============================================================================
   DESKTOP (≥1024px)
   Everything above is the mobile (base) layout — do NOT edit it for desktop.
   Add desktop-only overrides inside the per-section blocks below. Anything
   not overridden here keeps inheriting the mobile styles untouched.
   ============================================================================= */

/* ─── DESKTOP · PAGE / LAYOUT ──────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Tune these to resize the desktop layout:
     --dt-max = full header/footer band, --dt-pad = left/right gutter,
     --ct-col = the centered reading column that holds the card + actions. */
  :root {
    --dt-max: 1440px;
    --dt-pad: 40px;
    --ct-col: 760px;
  }

  /* Lift the centered mobile-shell cap so the page can use the full width. */
  body {
    max-width: none;
    margin-inline: 0;
  }

  /* The quiz is a focused, single-task experience, so the content stays in a
     comfortable centered reading column rather than stretching full-bleed. */
  #care-giver-test-app {
    max-width: var(--ct-col);
    margin-inline: auto;
    padding-inline: var(--dt-pad);
    padding-top: 48px;
    padding-bottom: 140px;
  }

  #care-giver-test-app > section {
    gap: var(--sp-6);
  }

  .care-giver-test-footer {
    left: 0;
    right: 0;
    width: auto;
    transform: none;
    padding-block: 20px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* ─── DESKTOP · HEADER ─────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Header content aligns to the wider page band so the logo sits at the page
     edge, while the card below stays in the narrower reading column. */
  body > header {
    max-width: var(--dt-max);
    margin-inline: auto;
    padding-inline: var(--dt-pad);
    padding-block: 22px;
  }

  .care-giver-test-header__back {
    min-height: 44px;
    gap: 8px;
    padding: 6px 8px 6px 4px;
  }

  .care-giver-test-header__back-text {
    font-size: 1rem;
  }

  .care-giver-test-header__back svg {
    width: 24px;
    height: 24px;
  }

  .care-giver-test-header__logo:not(.care-giver-test-header__logotype) {
    width: auto;
    height: 50px;
    margin-left: -8px;
  }

  .care-giver-test-header__logotype {
    width: auto;
    height: 50px;
    margin-left: 0;
  }
}

/* ─── DESKTOP · INTRO ──────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  [data-show-when="intro"] .bg-white {
    padding: 56px 60px;
    border-radius: var(--r-lg);
  }

  [data-show-when="intro"] .text-2xl {
    font-size: 40px;
    line-height: 1.25;
  }

  [data-show-when="intro"] .text-md {
    font-size: 20px;
    line-height: 1.4;
  }
}

/* ─── DESKTOP · QUESTION ───────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .care-giver-test-progress {
    height: 8px;
  }

  #progress-label {
    font-size: 15px;
    margin-bottom: var(--sp-6);
  }

  #question-card {
    padding: 48px 56px;
    border-radius: var(--r-lg);
  }

  #question-number {
    font-size: 15px;
  }

  #question-text {
    font-size: 24px;
    line-height: 1.7;
    margin-bottom: var(--sp-8);
  }

  .care-giver-test-options {
    gap: var(--sp-4);
  }

  .care-giver-test-option {
    padding: var(--sp-5);
    font-size: 1.125rem;
  }

  .care-giver-test-option__radio {
    width: 22px;
    height: 22px;
  }
}

/* ─── DESKTOP · OUTRO ──────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  [data-show-when="outro"] .bg-white {
    padding: 56px 60px;
    border-radius: var(--r-lg);
  }

  [data-show-when="outro"] .text-2xl {
    font-size: 34px;
  }

  [data-show-when="outro"] .text-lg {
    font-size: 22px;
    line-height: 1.5;
  }

  #outro-form {
    gap: var(--sp-5);
  }

  .care-giver-test-field__input {
    padding: var(--sp-4) var(--sp-4);
    font-size: 1.0625rem;
  }
}

/* ─── DESKTOP · RESULTS ────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  [data-show-when="results"] .bg-white {
    padding: 56px 60px;
    border-radius: var(--r-lg);
  }

  [data-show-when="results"] .text-2xl {
    font-size: 40px;
  }

  [data-show-when="results"] .text-md {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 8px;
  }
}

/* ─── DESKTOP · THANK YOU ──────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  [data-show-when="thank-you"] .bg-white {
    border-radius: var(--r-lg);
    overflow: hidden;
  }

  [data-show-when="thank-you"] .p-6 {
    padding: 36px 54px 10px 54px;
  }

  [data-show-when="thank-you"] .text-2xl {
    font-size: 40px;
  }

  [data-show-when="thank-you"] .text-lg {
    font-size: 24px;
    line-height: 1.5;
  }

  .cgt-result__overall {
    padding: var(--sp-5);
  }

  .cgt-result__overall-label {
    font-size: 1.35rem;
  }

  .cgt-result__overall-score {
    font-size: 1.1rem;
  }

  .cgt-result__table th {
    font-size: 1rem;
  }

  .cgt-result__table td {
    padding: var(--sp-4) var(--sp-3);
    font-size: 1.15rem;
  }

  .cgt-result__badge {
    font-size: 1.05rem;
    padding: 6px 18px;
  }
}

/* ─── DESKTOP · FOOTER ─────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Action bar mirrors the reading column so the buttons line up with the card. */
  .care-giver-test-footer > .container {
    max-width: var(--ct-col);
    margin-inline: auto;
    padding-inline: var(--dt-pad);
  }

  .care-giver-test-footer .care-giver-test-btn {
    padding-block: var(--sp-4);
    font-size: 1.25rem;
  }
}