/* Onboarding flow styles (uses design tokens)*/

.container-narrow {
  width: 100%;
  max-width: 720px;
  min-width: 320px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  padding-bottom: 120px;
  box-sizing: border-box;
}

.container-narrow > * {
  max-width: 100%;
  overflow-wrap: break-word;
}

.onboarding-progress { margin-bottom: var(--space-5); }

.onboarding-progress-bar { 
  background: var(--color-border-decorative); 
  height: 8px; 
  border-radius: var(--radius-sm); 
  overflow: hidden; 
  flex: 1; /* ensure it expands within .onboarding-progress-row flex container */
}
.onboarding-progress-fill { 
  background: var(--color-primary); 
  height: 100%; 
  transition: width var(--transition-base);
  border-radius: var(--radius-sm); 
}

.onboarding-title { 
  color: var(--color-heading); 
  margin: 0 0 var(--space-2); 
  font-weight: var(--font-weight-bold); 
  line-height: var(--line-height-snug);
  font-size: var(--font-size-lg);
}
.onboarding-subtitle { 
  font-size: var(--font-size-base); 
  color: var(--color-text-muted); 
  margin: 0 0 var(--space-5); 
}

.onboarding-card { 
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}
.onboarding-body { 
  margin: 0; 
  font-size: var(--font-size-base); 
  line-height: var(--line-height-relaxed); 
  color: var(--color-text-body);
}

.onboarding-actions { 
  display: flex; 
  flex-wrap: wrap; 
  gap: var(--space-3); 
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 0;
  padding: var(--space-4);
  background: var(--color-page-bg);
  z-index: 200;
}

.onboarding-footnote { 
  margin-top: var(--space-6); 
  font-size: var(--font-size-sm); 
  color: var(--color-text-muted);
}

/* Button alignment helpers */
.onboarding-actions .onboarding-back { margin-left: 0; }
.onboarding-actions .onboarding-next-action { margin-right: 0rem; }

@media (max-width: 700px) {
  .onboarding-actions { justify-content: center; }
  .onboarding-actions .onboarding-next-action { margin-left: 0; }
}

/* -------------------------------------------------- */
/* Mobile sticky action bar                          */
/* without overlapping content; supports safe area   */
/* -------------------------------------------------- */
@media (max-width: 700px) {
  .onboarding-step.container-narrow { /* reserve space so content not hidden behind fixed bar */
    padding-bottom: 140px; /* ~button height + padding; adjust if button size changes */
  }
  .onboarding-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0; /* override existing margin */
    padding: var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    background: var(--color-page-bg, #fff);
    z-index: 100; /* sits above content */
    justify-content: center; /* keep buttons centered on mobile */
  }
  .onboarding-actions .onboarding-next-action {
    flex: none; /* prevent button from stretching full width */
  }
}

/* Error handling */
.onboarding-error-box {
  border: 1px solid var(--color-alert);
  background: color-mix(in srgb, var(--color-alert) 10%, var(--color-surface));
  color: var(--color-alert);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin: 0 0 var(--space-4);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
}

@media (max-width: 600px) {
  .container-narrow { padding: var(--space-5) var(--space-4); }
  .onboarding-title { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }
}

/* -------------------------------------------------- */
/* Accessible custom radios & checkboxes (no markup yet) */
/* Usage guideline: Wrap input + label in .onboarding-choice */
/* Input stays visually hidden but focusable; label carries design */
/* -------------------------------------------------- */

.onboarding-choice-group { 
  display: grid; 
  gap: var(--space-3); 
  margin-bottom: var(--space-5);
}

.onboarding-choice { 
  position: relative; 
  display: flex; 
  align-items: flex-start; 
  gap: var(--space-3); 
  padding: var(--space-4); 
  border-radius: var(--radius-lg); 
  background: var(--color-surface); 
  cursor: pointer; 
  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
  border: 1px solid var(--color-border);
}
.onboarding-choice:hover { border-color: var(--color-primary); }
.onboarding-choice:active { background: #fff; }

/* Visually hidden but accessible input */
.onboarding-choice input[type="radio"],
.onboarding-choice input[type="checkbox"] { 
  position: absolute; 
  opacity: 0; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  margin: 0; 
  cursor: pointer; 
}

/* Custom indicator box / circle */
.onboarding-indicator { 
  width: 24px; 
  height: 24px; 
  flex-shrink: 0; 
  border: 2px solid var(--color-border); 
  border-radius: var(--radius-sm); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background: #fff; 
  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}
/* Radio variant (circle) */
.onboarding-choice[data-type="radio"] .onboarding-indicator { border-radius: var(--radius-round); }

/* -------------------------------------------------- */
/* Checked / Selected state (improved for clarity & accessibility) */
/* Goals: strong affordance, minimal motion, high contrast, clear touch target */
/* -------------------------------------------------- */

/* Base inner marker (dot / will be replaced for checkbox) */
.onboarding-indicator::after { 
  content: ""; 
  width: 10px; 
  height: 10px; 
  border-radius: var(--radius-round); 
  background: var(--color-surface); 
  transform: scale(0); 
  transition: transform var(--transition-base); 
}

/* Radio / checkbox common checked visuals */
.onboarding-choice input[type="radio"]:checked + .onboarding-indicator,
.onboarding-choice input[type="checkbox"]:checked + .onboarding-indicator { 
  background: var(--color-primary); 
  border-color: var(--color-primary); 
  box-shadow: 0 0 0 2px rgba(0,0,0,0.05); /* subtle lift ring */
}
.onboarding-choice input[type="radio"]:checked + .onboarding-indicator::after { 
  transform: scale(1); /* grow dot for radios */
}

/* Checkbox specific: replace dot with checkmark (SVG) */
.onboarding-choice[data-type="checkbox"] .onboarding-indicator { position: relative; }
.onboarding-choice[data-type="checkbox"] input[type="checkbox"]:checked + .onboarding-indicator::after { 
  width: 16px; 
  height: 16px; 
  background: none; 
  transform: scale(1); 
}
.onboarding-choice[data-type="checkbox"] input[type="checkbox"]:checked + .onboarding-indicator::before { 
  content: ""; 
  position: absolute; 
  width: 16px; 
  height: 16px; 
  inset: 0; 
  margin: auto; 
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' stroke='none' fill='%23000'%3E%3Cpath d='M6.6 11.2L3.4 8l-1.2 1.2 4.4 4.4 8-8L13.4 4l-6.8 7.2z'/%3E%3C/svg%3E") center/16px 16px no-repeat; 
  background: var(--color-selected);
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04), 0 2px 4px -2px rgba(0,0,0,0.06); 

}

/* Highlight entire choice when selected (modern browsers) */
.onboarding-choice:has(input[type="radio"]:checked),
.onboarding-choice:has(input[type="checkbox"]:checked) { 
  background: var(--color-selected); /* consistent token usage */
  border-color: var(--color-primary); 
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04), 0 2px 4px -2px rgba(0,0,0,0.06); 
}

/* Fallback highlight (no :has support) relies on label text + indicator emphasis */
.onboarding-choice input[type="radio"]:checked ~ .onboarding-label-text,
.onboarding-choice input[type="checkbox"]:checked ~ .onboarding-label-text { 
  font-weight: var(--font-weight-bold); 
  color: var(--color-heading); 
}

/* Reduced motion preference: remove scale animation */
@media (prefers-reduced-motion: reduce) { 
  .onboarding-indicator, 
  .onboarding-indicator::after { transition: none; } 
}

/* Focus visible state (improved: ring around container when possible) */
.onboarding-choice:has(input[type="radio"]:focus-visible),
.onboarding-choice:has(input[type="checkbox"]:focus-visible) { 
  box-shadow: 0 0 0 3px rgba(0,0,0,0.25); 
}
/* Fallback if :has unsupported - keep indicator outline */
.onboarding-choice input[type="radio"]:focus-visible + .onboarding-indicator,
.onboarding-choice input[type="checkbox"]:focus-visible + .onboarding-indicator { 
  outline: 3px solid rgba(0,0,0,0.35); 
  outline-offset: 2px; 
}

/* Selected container highlight */
.onboarding-choice input[type="radio"]:checked ~ .onboarding-label-text,
.onboarding-choice input[type="checkbox"]:checked ~ .onboarding-label-text { 
  font-weight: var(--font-weight-bold); 
  color: var(--color-heading);
}

.onboarding-label-text { 
  font-size: var(--font-size-base); 
  line-height: var(--line-height-relaxed); 
  color: var(--color-text-body); 
  flex: 1;
}

/* Disabled state */
.onboarding-choice input:disabled + .onboarding-indicator,
.onboarding-choice input:disabled ~ .onboarding-label-text { 
  opacity: .4; 
  cursor: not-allowed;
}

/* High contrast mode consideration */
@media (forced-colors: active) {
  .onboarding-indicator { border: 2px solid ButtonText; }
  .onboarding-choice input[type="radio"]:checked + .onboarding-indicator,
  .onboarding-choice input[type="checkbox"]:checked + .onboarding-indicator { background: ButtonFace; border-color: ButtonText; }
  .onboarding-choice input[type="radio"]:checked + .onboarding-indicator::after,
  .onboarding-choice input[type="checkbox"]:checked + .onboarding-indicator::after { background: ButtonText; }
}

/* -------------------------------------------------- */
/* Age Range Slider Styles                           */
/* -------------------------------------------------- */

.onboarding-age-slider-container {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.onboarding-age-slider-wrapper {
  position: relative;
  margin: var(--space-6) 0;
}

.onboarding-age-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--radius-sm);
  background: var(--color-border-decorative);
  outline: none;
  cursor: pointer;
  margin: var(--space-4) 0;
}

/* Webkit styles (Chrome, Safari, Edge) */
.onboarding-age-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all var(--transition-base);
  border: 3px solid var(--color-page-bg);
}

.onboarding-age-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.onboarding-age-slider:focus::-webkit-slider-thumb {
  outline: 3px solid rgba(0, 0, 0, 0.25);
  outline-offset: 2px;
}

/* Firefox styles */
.onboarding-age-slider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 3px solid var(--color-page-bg);
  transition: all var(--transition-base);
}

.onboarding-age-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.onboarding-age-slider::-moz-range-track {
  height: 8px;
  border-radius: var(--radius-sm);
  background: var(--color-border-decorative);
  border: none;
}

.onboarding-age-slider:focus::-moz-range-thumb {
  outline: 3px solid rgba(0, 0, 0, 0.25);
  outline-offset: 2px;
}

/* Age range labels */
.onboarding-age-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.onboarding-age-value {
  text-align: center;
  margin-bottom: var(--space-4);
}

.onboarding-age-value-display {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-1);
}

.onboarding-age-value-label {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .onboarding-age-slider::-webkit-slider-thumb,
  .onboarding-age-slider::-moz-range-thumb {
    transition: none;
  }
  .onboarding-age-slider::-webkit-slider-thumb:hover,
  .onboarding-age-slider::-moz-range-thumb:hover {
    transform: none;
  }
}

/* High contrast mode for slider */
@media (forced-colors: active) {
  .onboarding-age-slider {
    background: ButtonFace;
    border: 1px solid ButtonText;
  }
  .onboarding-age-slider::-webkit-slider-thumb,
  .onboarding-age-slider::-moz-range-thumb {
    background: ButtonText;
    border: 2px solid ButtonFace;
  }
}

/* -------------------------------------------------- */
/* Hand Visual Component Styles for Onboarding */
/* -------------------------------------------------- */


/* Hand visual container */
.onboarding-hand-visual { 
    margin-bottom: var(--space-4, 16px); 
}

.onboarding-hand-map { 
    margin-bottom: var(--space-4, 16px); 
    padding: var(--space-3, 12px);
    border: 2px solid var(--color-border-decorative, #e0e0e0);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface, #fff);
}

.onboarding-hand-svg { 
    width: 100%; 
    max-width: 400px; 
    height: auto; 
    display: block; 
    margin: 0 auto;
}

/* Hand parts styling */
.hand-palm { 
    fill: var(--color-border-decorative, #e0e0e0); 
    stroke: var(--color-border, #ccc);
    stroke-width: 1;
}

.hand-area.clickable { 
    fill: var(--color-border-decorative, #e0e0e0); 
    stroke: var(--color-border, #ccc);
    stroke-width: 1.5;
    cursor: pointer; 
    transition: var(--transition-base, .15s ease-in-out);
}

.hand-area.clickable:hover { 
    fill: var(--color-primary, #007bff); 
    opacity: 0.7;
}

.hand-area.clickable.selected { 
    fill: var(--color-primary, #007bff); 
    stroke: var(--color-primary, #007bff);
    stroke-width: 2;
}

/* Error states */
.onboarding-hand-visual.has-error .onboarding-hand-map {
    border-color: var(--color-alert, #dc3545);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

/* Non-interactive elements */
.unclickable { 
    pointer-events: none; 
}

/* Accessibility and motion preferences */
@media (prefers-reduced-motion: reduce) { 
    .hand-area.clickable { 
        transition: none; 
    } 
}

/* -------------------------------------------------- */
/* Onboarding Header (mascot + speech bubble)         */
/* -------------------------------------------------- */
.onboarding-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4, 20px);
  margin: 0 0 var(--space-5, 24px);
  position: relative;
  padding: 0;
}
.onboarding-mascot { margin: 0; }
.onboarding-mascot-image {
  width: 110px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));
}
.onboarding-question-block { flex: 1; min-width: 0; }
.onboarding-speech {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border-decorative);
  border-radius: var(--radius-lg,16px);
  padding: var(--space-5,24px) var(--space-6,32px) var(--space-5,24px) var(--space-5,24px);
  box-shadow: 0 2px 4px -2px rgba(0,0,0,0.05), 0 6px 16px -6px rgba(0,0,0,0.06);
  max-width: 100%;
}
.onboarding-speech::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 38px;
  width: 22px;
  height: 22px;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border-decorative);
  border-top: 1px solid var(--color-border-decorative);
  transform: rotate(-45deg);
  box-shadow: 2px -2px 4px rgba(0,0,0,0.02);
}
.onboarding-step.container-narrow { position: relative; }
@media (min-width: 900px) {
  .onboarding-question-block { max-width: 540px; }
  .onboarding-mascot-image { width: 130px; }
}
@media (min-width: 1200px) {
  .onboarding-mascot-image { width: 150px; }
}
@media (max-width: 700px) {
  .onboarding-header { flex-direction: row; align-items: flex-start; gap: var(--space-3,12px); }
  .onboarding-mascot-image { width: 80px; }
  .onboarding-speech { padding: var(--space-4,20px); }
  .onboarding-speech::before { left: -12px; top: 30px; width: 18px; height: 18px; }
}
@media (max-width: 480px) {
  .onboarding-header { flex-wrap: wrap; }
  .onboarding-mascot-image { width: 72px; }
  .onboarding-speech { width: calc(100% - 84px); }
  .onboarding-speech::before { left: -10px; top: 28px; width: 16px; height: 16px; }
}
@media (max-width: 360px) {
  .onboarding-speech { width: 100%; }
  .onboarding-speech::before { display: none; }
}

/* Progress bar & back button refinements */
.onboarding-progress-row { display: flex; align-items: center; gap: var(--space-2,8px); }
.onboarding-back-inline { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; text-decoration: none; transition: var(--transition-base, .15s ease-in-out); }
.onboarding-back-icon { width: 20px; height: 20px; }
.onboarding-back-icon path { fill: var(--color-primary); transition: var(--transition-base, .15s ease-in-out); }
.onboarding-back-inline:hover, .onboarding-back-inline:focus { outline: none; background: var(--color-primary); }
.onboarding-back-inline:hover .onboarding-back-icon path, .onboarding-back-inline:focus .onboarding-back-icon path { fill: var(--color-surface); }
@media (prefers-reduced-motion: reduce) {
  .onboarding-back-inline, .onboarding-back-icon path { transition: none; }
}

/* Label text inline layout & hand icons */
.onboarding-label-text { display: inline-flex; align-items: center; gap: var(--space-2,8px); }
.onboarding-hand-icon { width: 32px; height: auto; display: block; }

/* Pain level display */
.pain-emoji { font-size: 2em; line-height: 1; margin-bottom: 4px; }
.pain-description { font-size: 0.9em; font-weight: 500; color: var(--color-text-body); }