/* Health Tools Design System - That One.App */
/* Mathematical health calculations with personal tracking elements */
/* Extends Calculator, Utilities, Trackers, and Decision Tools Design Systems */

/* Import the base design systems */
@import url('./decision-tools-design-system.css');

/* ===== HEALTH-SPECIFIC VARIABLES ===== */
:root {
  /* Health Status Colors */
  --health-excellent: #10B981;    /* Bright green for excellent health */
  --health-good: #22C55E;         /* Green for good health */
  --health-normal: #3B82F6;       /* Blue for normal/healthy range */
  --health-warning: #F59E0B;      /* Orange for warning/attention needed */
  --health-danger: #EF4444;       /* Red for danger/immediate attention */
  
  /* BMI Category Colors */
  --bmi-underweight: #06B6D4;     /* Cyan for underweight */
  --bmi-normal: #10B981;          /* Green for normal weight */
  --bmi-overweight: #F59E0B;      /* Orange for overweight */
  --bmi-obese: #EF4444;           /* Red for obese */
  --bmi-severe-obese: #DC2626;    /* Dark red for severe obesity */
  
  /* Macro Colors */
  --macro-protein: #8B5CF6;       /* Purple for protein */
  --macro-carbs: #F59E0B;         /* Orange for carbohydrates */
  --macro-fat: #EF4444;           /* Red for fats */
  --macro-fiber: #22C55E;         /* Green for fiber */
  
  /* Heart Rate Zones */
  --hr-zone-1: #10B981;           /* Recovery zone - Green */
  --hr-zone-2: #3B82F6;           /* Aerobic zone - Blue */
  --hr-zone-3: #F59E0B;           /* Anaerobic zone - Orange */
  --hr-zone-4: #EF4444;           /* VO2 Max zone - Red */
  --hr-zone-5: #DC2626;           /* Max effort - Dark red */
  
  /* Pregnancy Stages */
  --pregnancy-trimester-1: #F472B6; /* Pink for first trimester */
  --pregnancy-trimester-2: #A855F7; /* Purple for second trimester */
  --pregnancy-trimester-3: #8B5CF6; /* Deep purple for third trimester */
  --pregnancy-due: #EF4444;         /* Red for due date approaching */
  
  /* Body Fat Ranges */
  --bodyfat-essential: #06B6D4;    /* Cyan for essential fat */
  --bodyfat-athlete: #10B981;      /* Green for athletes */
  --bodyfat-fitness: #22C55E;      /* Light green for fitness */
  --bodyfat-average: #F59E0B;      /* Orange for average */
  --bodyfat-obese: #EF4444;        /* Red for obese range */
  
  /* Calorie Colors */
  --calorie-deficit: #10B981;      /* Green for calorie deficit */
  --calorie-maintenance: #3B82F6;  /* Blue for maintenance */
  --calorie-surplus: #F59E0B;      /* Orange for surplus */
  
  /* Health Component Sizing */
  --health-meter-width: 300px;
  --health-meter-height: 20px;
  --health-ring-size: 140px;
  --health-zone-chart-height: 200px;
  --health-timeline-height: 120px;
  
  /* Health Animations */
  --health-meter-fill-duration: 1.5s;
  --health-ring-fill-duration: 2s;
  --health-pulse-duration: 2s;
  
  /* Health Typography */
  --health-metric-size: 2.5rem;
  --health-unit-size: 1rem;
  --health-category-size: 1.125rem;
}

/* ===== BASE HEALTH CONTAINER ===== */
.health-tool {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-md);
  background: var(--cloud);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  line-height: 1.6;
}

.health-tool__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-lg) 0;
  text-align: center;
}

.health-tool__subtitle {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0 0 var(--space-xl) 0;
  text-align: center;
}

/* ===== HEALTH SECTIONS ===== */
.health-section {
  background: white;
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: var(--border-width) solid rgba(91, 158, 191, 0.1);
}

.health-section:last-child {
  margin-bottom: 0;
}

.health-section__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-md) 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.health-section__subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-lg) 0;
}

/* ===== HEALTH INPUT COMPONENTS ===== */

/* Unit Switcher for Metric/Imperial */
.health-unit-switcher {
  display: flex;
  background: var(--breeze);
  border-radius: var(--border-radius);
  padding: 4px;
  margin-bottom: var(--space-md);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.health-unit-option {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  border-radius: calc(var(--border-radius) - 4px);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: var(--touch-target);
}

.health-unit-option.active {
  background: white;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.health-unit-option:hover:not(.active) {
  background: rgba(255, 255, 255, 0.5);
}

/* Measurement Inputs */
.health-measurement-input {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.health-input {
  flex: 1;
  padding: var(--space-md);
  border: 2px solid var(--breeze);
  border-radius: var(--border-radius);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: white;
  transition: all var(--transition-fast);
  min-height: var(--touch-target);
}

.health-input:focus {
  outline: none;
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(91, 158, 191, 0.1);
}

.health-input-unit {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 40px;
  text-align: center;
}

/* Height Input (ft/in or cm) */
.health-height-input {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.health-height-input .health-input {
  width: 80px;
}

.health-height-separator {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  font-weight: 500;
}

/* Circumference Grid for Body Fat */
.health-circumference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* Goal and Activity Selectors */
.health-goal-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.health-goal-option {
  padding: var(--space-md);
  border: 2px solid var(--breeze);
  border-radius: var(--border-radius);
  background: white;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
  min-height: var(--touch-target);
}

.health-goal-option:hover {
  border-color: var(--ocean);
  background: var(--breeze);
}

.health-goal-option.selected {
  border-color: var(--health-normal);
  background: rgba(16, 185, 129, 0.1);
  color: var(--health-good);
}

.health-goal-option__title {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 4px;
}

.health-goal-option__description {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Activity Level Selector */
.health-activity-level {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.health-activity-option {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  border: 2px solid var(--breeze);
  border-radius: var(--border-radius);
  background: white;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.health-activity-option:hover {
  border-color: var(--ocean);
  background: var(--breeze);
}

.health-activity-option.selected {
  border-color: var(--health-normal);
  background: rgba(59, 130, 246, 0.1);
}

.health-activity-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--breeze);
  margin-right: var(--space-md);
  position: relative;
  flex-shrink: 0;
}

.health-activity-option.selected .health-activity-radio {
  border-color: var(--health-normal);
  background: var(--health-normal);
}

.health-activity-option.selected .health-activity-radio::after {
  content: '';
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.health-activity-content {
  flex: 1;
}

.health-activity-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.health-activity-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ===== HEALTH DISPLAY COMPONENTS ===== */

/* BMI Display with Category */
.health-bmi-display {
  text-align: center;
  margin: var(--space-xl) 0;
}

.health-bmi-value {
  font-size: var(--health-metric-size);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.health-bmi-unit {
  font-size: var(--health-unit-size);
  color: var(--text-secondary);
  font-weight: 400;
  margin-left: var(--space-xs);
}

.health-category-indicator {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  font-size: var(--health-category-size);
  font-weight: 600;
  margin-top: var(--space-sm);
}

.health-category-indicator--underweight {
  background: rgba(6, 182, 212, 0.1);
  color: var(--bmi-underweight);
}

.health-category-indicator--normal {
  background: rgba(16, 185, 129, 0.1);
  color: var(--bmi-normal);
}

.health-category-indicator--overweight {
  background: rgba(245, 158, 11, 0.1);
  color: var(--bmi-overweight);
}

.health-category-indicator--obese {
  background: rgba(239, 68, 68, 0.1);
  color: var(--bmi-obese);
}

/* BMI Range Chart */
.health-range-chart {
  width: var(--health-meter-width);
  height: var(--health-meter-height);
  margin: var(--space-lg) auto;
  border-radius: calc(var(--health-meter-height) / 2);
  background: linear-gradient(
    to right,
    var(--bmi-underweight) 0% 18.5%,
    var(--bmi-normal) 18.5% 25%,
    var(--bmi-overweight) 25% 30%,
    var(--bmi-obese) 30% 100%
  );
  position: relative;
  box-shadow: var(--shadow-sm);
}

.health-range-pointer {
  position: absolute;
  top: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid var(--text-primary);
  transform: translateX(-50%);
  transition: left var(--health-meter-fill-duration) ease-out;
}

.health-range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Macro Ring Chart */
.health-macro-rings {
  width: var(--health-ring-size);
  height: var(--health-ring-size);
  margin: var(--space-xl) auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.health-macro-ring {
  position: absolute;
  border-radius: 50%;
  border: 12px solid transparent;
  transition: all var(--health-ring-fill-duration) ease-out;
}

.health-macro-ring--protein {
  width: 100%;
  height: 100%;
  border-color: var(--macro-protein);
  border-top-color: rgba(139, 92, 246, 0.2);
  border-right-color: rgba(139, 92, 246, 0.2);
  border-bottom-color: rgba(139, 92, 246, 0.2);
  transform: rotate(-90deg);
}

.health-macro-ring--carbs {
  width: 80%;
  height: 80%;
  border-color: var(--macro-carbs);
  border-top-color: rgba(245, 158, 11, 0.2);
  border-right-color: rgba(245, 158, 11, 0.2);
  border-bottom-color: rgba(245, 158, 11, 0.2);
  transform: rotate(-90deg);
}

.health-macro-ring--fat {
  width: 60%;
  height: 60%;
  border-color: var(--macro-fat);
  border-top-color: rgba(239, 68, 68, 0.2);
  border-right-color: rgba(239, 68, 68, 0.2);
  border-bottom-color: rgba(239, 68, 68, 0.2);
  transform: rotate(-90deg);
}

.health-macro-center {
  background: white;
  border-radius: 50%;
  width: 40%;
  height: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: var(--shadow-sm);
}

.health-macro-calories {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.health-macro-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.health-macro-legend {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.health-macro-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
}

.health-macro-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.health-macro-legend-color--protein {
  background: var(--macro-protein);
}

.health-macro-legend-color--carbs {
  background: var(--macro-carbs);
}

.health-macro-legend-color--fat {
  background: var(--macro-fat);
}

/* Heart Rate Zone Chart */
.health-hr-zones {
  width: 100%;
  height: var(--health-zone-chart-height);
  background: var(--breeze);
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
  margin: var(--space-lg) 0;
}

.health-hr-zone {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  color: white;
  font-weight: 600;
  font-size: var(--text-sm);
  transition: all var(--transition-normal);
}

.health-hr-zone--recovery {
  bottom: 80%;
  height: 20%;
  background: var(--hr-zone-1);
}

.health-hr-zone--aerobic {
  bottom: 60%;
  height: 20%;
  background: var(--hr-zone-2);
}

.health-hr-zone--anaerobic {
  bottom: 40%;
  height: 20%;
  background: var(--hr-zone-3);
}

.health-hr-zone--vo2max {
  bottom: 20%;
  height: 20%;
  background: var(--hr-zone-4);
}

.health-hr-zone--max {
  bottom: 0%;
  height: 20%;
  background: var(--hr-zone-5);
}

.health-hr-current {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--text-primary);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  transition: bottom var(--transition-normal);
}

.health-hr-current::after {
  content: '';
  position: absolute;
  right: var(--space-md);
  top: -4px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--text-primary);
}

/* Pregnancy Timeline */
.health-pregnancy-timeline {
  width: 100%;
  height: var(--health-timeline-height);
  background: linear-gradient(
    to right,
    var(--pregnancy-trimester-1) 0% 33.33%,
    var(--pregnancy-trimester-2) 33.33% 66.66%,
    var(--pregnancy-trimester-3) 66.66% 100%
  );
  border-radius: var(--border-radius);
  position: relative;
  margin: var(--space-lg) 0;
  overflow: hidden;
}

.health-pregnancy-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  transition: width var(--health-meter-fill-duration) ease-out;
}

.health-pregnancy-weeks {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  color: white;
  font-weight: 700;
  font-size: var(--text-xl);
}

.health-pregnancy-label {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  color: white;
  font-weight: 600;
  font-size: var(--text-sm);
}

.health-pregnancy-due {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  color: white;
  font-size: var(--text-sm);
}

/* Week Display */
.health-week-display {
  text-align: center;
  margin: var(--space-xl) 0;
}

.health-week-number {
  font-size: var(--health-metric-size);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.health-week-label {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

/* Countdown Display */
.health-countdown-display {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.health-countdown-item {
  text-align: center;
  padding: var(--space-md);
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.health-countdown-number {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.health-countdown-unit {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--space-xs);
}

/* ===== HEALTH RESULT COMPONENTS ===== */

/* Health Status Badges */
.health-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  font-size: var(--text-sm);
  font-weight: 600;
  margin: var(--space-xs);
}

.health-status-badge--excellent {
  background: rgba(16, 185, 129, 0.1);
  color: var(--health-excellent);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.health-status-badge--good {
  background: rgba(34, 197, 94, 0.1);
  color: var(--health-good);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.health-status-badge--normal {
  background: rgba(59, 130, 246, 0.1);
  color: var(--health-normal);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.health-status-badge--warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--health-warning);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.health-status-badge--danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--health-danger);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Health Result Cards */
.health-result-card {
  background: white;
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  margin: var(--space-md) 0;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid;
  transition: all var(--transition-normal);
}

.health-result-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.health-result-card--excellent {
  border-left-color: var(--health-excellent);
}

.health-result-card--good {
  border-left-color: var(--health-good);
}

.health-result-card--normal {
  border-left-color: var(--health-normal);
}

.health-result-card--warning {
  border-left-color: var(--health-warning);
}

.health-result-card--danger {
  border-left-color: var(--health-danger);
}

.health-result-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.health-result-card__value {
  font-size: var(--health-metric-size);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.health-result-card__description {
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Training Recommendations */
.health-training-recommendations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.health-training-card {
  background: white;
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border-top: 4px solid;
  transition: all var(--transition-normal);
}

.health-training-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.health-training-card--recovery {
  border-top-color: var(--hr-zone-1);
}

.health-training-card--aerobic {
  border-top-color: var(--hr-zone-2);
}

.health-training-card--anaerobic {
  border-top-color: var(--hr-zone-3);
}

.health-training-card--vo2max {
  border-top-color: var(--hr-zone-4);
}

.health-training-card__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.health-training-card__range {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.health-training-card__description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ===== HEALTH ANIMATIONS ===== */

/* Pulse animation for heart rate */
@keyframes health-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
}

.health-pulse {
  animation: health-pulse var(--health-pulse-duration) ease-in-out infinite;
}

/* Progress bar fill animation */
@keyframes health-fill {
  from {
    width: 0%;
  }
  to {
    width: var(--progress-width, 100%);
  }
}

.health-animated-fill {
  animation: health-fill var(--health-meter-fill-duration) ease-out forwards;
}

/* Ring chart animation */
@keyframes health-ring-fill {
  from {
    stroke-dasharray: 0 1000;
  }
  to {
    stroke-dasharray: var(--ring-progress, 0) 1000;
  }
}

.health-ring-animated {
  animation: health-ring-fill var(--health-ring-fill-duration) ease-out forwards;
}

/* ===== HEALTH MOBILE OPTIMIZATIONS ===== */
@media (max-width: 640px) {
  .health-tool {
    padding: var(--space-sm);
  }
  
  .health-section {
    padding: var(--space-md);
  }
  
  .health-measurement-input {
    flex-direction: column;
    align-items: stretch;
  }
  
  .health-height-input {
    flex-direction: column;
    gap: var(--space-md);
  }
  
  .health-height-input .health-input {
    width: 100%;
  }
  
  .health-goal-selector {
    grid-template-columns: 1fr;
  }
  
  .health-circumference-grid {
    grid-template-columns: 1fr;
  }
  
  .health-countdown-display {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .health-training-recommendations {
    grid-template-columns: 1fr;
  }
  
  .health-macro-legend {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
  }
  
  /* Larger touch targets on mobile */
  .health-input {
    min-height: 48px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .health-unit-option {
    min-height: 48px;
  }
  
  .health-goal-option {
    min-height: 48px;
  }
}

/* ===== HEALTH ACCESSIBILITY ===== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .health-range-chart {
    border: 2px solid var(--text-primary);
  }
  
  .health-macro-ring {
    border-width: 16px;
  }
  
  .health-status-badge {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .health-animated-fill,
  .health-ring-animated,
  .health-pulse {
    animation: none;
  }
  
  .health-range-pointer,
  .health-pregnancy-progress {
    transition: none;
  }
}

/* Focus management for keyboard navigation */
.health-input:focus,
.health-unit-option:focus,
.health-goal-option:focus,
.health-activity-option:focus {
  outline: 2px solid var(--ocean);
  outline-offset: 2px;
}

/* Screen reader only text for health metrics */
.health-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;
}

/* ===== HEALTH PRINT STYLES ===== */
@media print {
  .health-tool {
    box-shadow: none;
    background: white;
  }
  
  .health-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  
  .health-result-card {
    border: 1px solid #000;
    break-inside: avoid;
  }
  
  /* Hide interactive elements in print */
  .health-unit-switcher,
  .health-goal-selector,
  .health-activity-level {
    display: none;
  }
}

/* ===== HEALTH DARK THEME SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --cloud: #1F2937;
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-muted: #9CA3AF;
    --breeze: #374151;
  }
  
  .health-section {
    background: #111827;
    border-color: rgba(107, 114, 128, 0.2);
  }
  
  .health-input {
    background: #111827;
    border-color: #4B5563;
    color: var(--text-primary);
  }
  
  .health-macro-center {
    background: #111827;
  }
  
  .health-result-card {
    background: #111827;
  }
  
  .health-training-card {
    background: #111827;
  }
}

/* ===== HEALTH UTILITY CLASSES ===== */

/* Spacing utilities for health components */
.health-mt-sm { margin-top: var(--space-sm); }
.health-mt-md { margin-top: var(--space-md); }
.health-mt-lg { margin-top: var(--space-lg); }
.health-mt-xl { margin-top: var(--space-xl); }

.health-mb-sm { margin-bottom: var(--space-sm); }
.health-mb-md { margin-bottom: var(--space-md); }
.health-mb-lg { margin-bottom: var(--space-lg); }
.health-mb-xl { margin-bottom: var(--space-xl); }

/* Text utilities for health displays */
.health-text-center { text-align: center; }
.health-text-large { font-size: var(--health-metric-size); }
.health-text-weight-bold { font-weight: 700; }

/* Color utilities for quick health status */
.health-color-excellent { color: var(--health-excellent); }
.health-color-good { color: var(--health-good); }
.health-color-normal { color: var(--health-normal); }
.health-color-warning { color: var(--health-warning); }
.health-color-danger { color: var(--health-danger); }