@layer components {
/* Patient Dashboard Styles */
/* Layout Containers */
.dashboard-grid-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  max-width: 1320px;
  margin-inline: auto;
  padding: var(--space-4);
  box-sizing: border-box;
}

@media (min-width: 992px) {
  .dashboard-grid-container {
    padding-inline: var(--space-3);
  }
}

.dashboard-title { 
  font-weight: var(--font-weight-bold); 
  color: var(--color-heading); 
  margin-bottom: var(--space-5); 
  font-size: var(--font-size-base); /* Closer to original 1.1rem heading size */
}

/* Unified row horizontal spacing to ensure equal left/right gutters across dashboard sections */
/* Override Bootstrap row gutters for consistent left/right spacing irrespective of nested card padding */
.dashboard-row {
  margin-left: 0 !important; /* neutralize -0.75rem default */
  margin-right: 0 !important;
}
.dashboard-row > [class^="col"],
.dashboard-row > .col-12,
.dashboard-row > .col-lg-4,
.dashboard-row > .col-lg-8,
.dashboard-row > .col-md-12 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
@media (max-width: 768px) {
  .dashboard-row > [class^="col"],
  .dashboard-row > .col-12 { padding-left: var(--space-3); padding-right: var(--space-3); }
}
@media (max-width: 576px) {
  .dashboard-row > [class^="col"],
  .dashboard-row > .col-12 { padding-left: var(--space-2); padding-right: var(--space-2); }
}

.patient-dashboard-card, .charts { 
  container-type: inline-size;
  background: var(--color-surface); 
  border-radius: var(--radius-md); /* Original was ~12px (0.75rem); using radius-md (8px) for design consistency */ 
  box-shadow: var(--shadow-sm); 
  padding: var(--space-5); 
  margin-bottom: var(--space-5); 
  color: var(--color-text-body); 
  position: relative; 
  border: 1px solid var(--color-border-decorative); /* Reinstate subtle card border for clearer separation */
}

/* Container Queries for Charts/Score Card */
@container (max-width: 400px) {
  .patient-dashboard-card, .charts {
    padding: var(--space-4);
  }
  
  .score-circle {
    width: var(--pd-score-diameter-sm);
    height: var(--pd-score-diameter-sm);
  }
  
  .score-value {
    font-size: 2rem; /* Slightly smaller than lg */
  }
  
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  
  .chart-header .btn {
    align-self: flex-end;
  }
}

.patient-dashboard-card a:not(.btn):not(.btn-primary-token) { 
  color: var(--color-text-body); 
  display: block; 
  margin-top: var(--space-1); 
  font-size: var(--font-size-sm); 
  text-decoration: none; 
  transition: color var(--transition-base); 
}
.patient-dashboard-card a:not(.btn):not(.btn-primary-token):hover { color: var(--color-primary); }

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.chart-header h3 {
  margin: 0;
  font-size: var(--font-size-md);
}

.charts h3 { 
  font-weight: var(--font-weight-bold); /* closer to original bold */ 
  color: var(--color-heading); 
  text-align: center; 
  font-size: var(--font-size-base); /* 18px vs original ~17.6px */
  margin-bottom: var(--space-4); 
  letter-spacing: .5px; 
}

/* Chart Containers */
#dexterity-score-chart,
#rom-score-chart,
#pain-score-chart,
#overall-score-chart { 
  width: 100%; 
  min-height: var(--pd-chart-min-height); 
}

/* Score Badges */
.overall-score-badge {
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: white;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  line-height: 60px;
  text-align: center;
  margin: 0 auto;
}

/* Score Circle */
.score-circle, .score-circle-empty { 
  width: var(--pd-score-diameter); 
  height: var(--pd-score-diameter); 
  border: var(--score-ring-thickness) solid var(--color-primary); 
  border-radius: var(--radius-round); 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  margin: 0 auto var(--space-4); 
  background: var(--color-surface); 
  position: relative; 
  font-family: var(--font-family-sans); 
  transition: border-color var(--transition-base); 
}
.score-circle-empty { border-color: var(--color-border-decorative); }

.score-value { 
  font-size: var(--font-size-lg); /* Increase prominence (36px) for readability */
  font-weight: var(--font-weight-bold); 
  line-height: 1; 
  color: var(--color-heading); 
}

.score-label { 
  font-size: var(--font-size-sm); /* More legible than 9px for 50+ demographic */
  color: var(--color-text-muted); 
  letter-spacing: .5px; 
  text-transform: uppercase; 
}

.no-score-text { 
  font-size: var(--font-size-base); /* Elevate for readability */
  color: var(--color-text-muted); 
  font-weight: var(--font-weight-bold); 
}

.score-description { 
  font-size: var(--font-size-sm); 
  color: var(--color-text-muted); 
  text-align: center; 
  margin: 0; 
}

/* Assessment Alerts */
.assessment-required-display .alert { 
  border-radius: var(--radius-md); 
  padding: var(--space-2) var(--space-3); 
  margin: var(--space-2) 0; 
}
.assessment-required-display .btn { 
  font-size: var(--font-size-xs); 
  padding: var(--space-2) var(--space-3); 
  border-radius: var(--radius-sm); 
}
.assessment-status { 
  border-top: 1px solid var(--color-border-decorative); 
  padding-top: var(--space-2); 
  margin-top: var(--space-2); 
}
.assessment-status div { margin: 2px 0; }

/* Chips and Delta Badges */
.chips { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.chip { 
  display: inline-flex; align-items: center; gap: 6px; 
  padding: 2px 8px; border-radius: var(--radius-pill, 9999px); 
  font-size: var(--font-size-base); border: 1px solid var(--color-border-decorative);
}
.chip-success { background: rgba(40, 167, 69, .08); color: var(--color-heading); border-color: rgba(40,167,69,.25); }

/* Segmented Controls */
.segmented-control {
  display: flex;
  background: var(--color-surface);
  border: 1px solid var(--color-border-decorative);
  /* Capsule track: a capsule and the capsules inside it nest exactly at any
     padding, which the old 8px track / calc(8px - 2px) option never did. */
  border-radius: var(--radius-pill, 9999px);
  padding: 3px;
  gap: 2px;
}

.segmented-control-option {
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  border-radius: var(--radius-pill, 9999px);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-sans);
  color: var(--color-text-body);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  min-width: 48px;
  text-align: center;
  position: relative;
}

.segmented-control-option:hover {
  background: var(--color-selected);
  color: var(--color-heading);
}

.segmented-control-option.active {
  background: var(--color-primary);
  color: var(--color-text-body-inverted);
  font-weight: var(--font-weight-bold);
}

.segmented-control-option:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  z-index: 1;
}

/* Chart containers with consistent min-height */
.chart-container {
  min-height: 300px;
  position: relative;
}

.chart-container-sm {
  min-height: 250px;
  position: relative;
}
.chip-missing { background: rgba(220, 53, 69, .06); color: var(--color-heading); border-color: rgba(220,53,69,.25); }
.delta-badge { 
  display: inline-block; padding: 4px 8px; border-radius: var(--radius-sm); 
  font-size: var(--font-size-base); font-weight: var(--font-weight-bold);
  border: 1px solid currentColor;
}
.delta-badge-up { background: rgba(40,167,69,.15); color: #198754; border-color: rgba(40,167,69,.3); }
.delta-badge-down { background: rgba(220,53,69,.15); color: #dc3545; border-color: rgba(220,53,69,.3); }
.delta-badge-stable { background: rgba(108,117,125,.15); color: #6c757d; border-color: rgba(108,117,125,.3); }

/* Distance to Goal */
.distance-to-goal {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Score Breakdown Row */
.score-breakdown-row {
  border-top: 1px solid var(--color-border-decorative);
}
.score-breakdown-row .border-end {
  border-color: var(--color-border-decorative) !important;
}
.score-breakdown-row .fw-bold {
  font-size: var(--font-size-base);
}

/* Chart Header & Filters */
.chart-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: var(--space-4); 
}
.chart-header h3 { 
  margin-bottom: 0; 
  text-align: left; 
}
.chart-filters { 
  display: flex; 
  gap: var(--space-2); 
}
.chart-filters .form-select { min-width: 120px; }

a {
    color: var(--color-text-body);
}

/* Recovery Focus Card Styles */
.recovery-focus-card {
  background: linear-gradient(135deg, rgba(72, 187, 120, 0.03) 0%, rgba(72, 187, 120, 0.08) 100%);
  border: 1px solid rgba(72, 187, 120, 0.15);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.recovery-focus-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.recovery-focus-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.recovery-focus-icon {
  color: #48bb78;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.recovery-focus-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin: 0;
}

.recovery-focus-message {
  color: var(--color-text-body);
  font-size: var(--font-size-base);
  line-height: 1.5;
  margin: 0;
  padding-left: calc(1.1rem + var(--space-2)); /* Align with title text */
}

/* Custom Assessment Button */

/* Avatar */
.avatar-circle { 
  width: var(--pd-avatar-size); 
  height: var(--pd-avatar-size); 
  border-radius: var(--radius-round); 
  background: var(--color-heading); 
  color: var(--color-page-bg); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 2rem; 
  font-weight: var(--font-weight-bold); 
  margin: 0 auto; 
}

/* Calendar Styles (disabled until calendar re-enablement) */
/* .week-schedule-con { 
  background: var(--color-surface); 
  border-radius: var(--radius-md); 
  width: 100%; 
  border: 1px solid var(--color-border-decorative); 
  box-shadow: var(--shadow-sm); 
}
.week-schedule-con h4 { 
  background: var(--color-heading); 
  color: var(--color-surface); 
  padding: var(--space-4); 
  margin: 0; 
  text-align: center; 
  font-size: var(--font-size-md); 
  font-weight: var(--font-weight-bold); 
} */

/* FullCalendar overrides (disabled until calendar re-enablement) */
/* .fc .fc-toolbar { 
  background: var(--color-surface); 
  padding: var(--space-3) var(--space-4); 
  border-bottom: 1px solid var(--color-border-decorative); 
}
.fc .fc-toolbar-title { 
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold); 
  color: var(--color-heading); 
  text-transform: uppercase; 
  letter-spacing: .06em; 
}
.fc .fc-button, .fc .fc-button-primary { 
  background: rgba(0,0,0,0.05) !important; 
  border: 1px solid rgba(0,0,0,0.1) !important; 
  color: var(--color-heading) !important; 
  width: var(--pd-calendar-button-size) !important; 
  height: var(--pd-calendar-button-size) !important; 
  border-radius: var(--radius-sm) !important; 
  font-size: var(--font-size-sm) !important; 
  transition: background var(--transition-base) !important; 
}
.fc .fc-button:hover { background: rgba(0,0,0,0.12) !important; }
.fc th { 
  padding: var(--space-3) 0; 
  font-size: var(--font-size-sm); 
  font-weight: var(--font-weight-bold); 
  background: var(--color-surface); 
  border: 1px solid var(--color-border-decorative); 
}
.fc td { border: 1px solid var(--color-border-decorative); background: var(--color-surface); }
.fc .fc-daygrid-day-number { padding: 4px 8px; font-size: var(--font-size-xs); }
.fc .fc-day-today .fc-daygrid-day-number { 
  background: var(--color-heading); 
  color: var(--color-surface); 
  width: 24px; height: 24px; border-radius: var(--radius-round); 
  display: flex; align-items: center; justify-content: center; 
} */

/* Event Items (disabled until calendar re-enablement) */
/* .event-item { 
  display: flex; align-items: center; gap: 4px; 
  font-size: var(--font-size-sm);
  padding: 2px 6px; 
  border: 1px solid var(--color-border-decorative); 
  border-radius: var(--radius-sm); 
  background: var(--color-surface); 
  width: var(--pd-event-item-width); 
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}
.event-item span { color: var(--color-text-body); } */

/* Responsive Tweaks */
@media (max-width: 768px) { 
  .event-item { width: 100%; font-size: var(--font-size-xs); padding: 1px 2px; border: none; } 
  .patient-dashboard-card, .charts { padding: var(--space-4); }
}
@media (max-width: 480px) { 
  .event-item { font-size: var(--font-size-xs); } 
  .score-circle { width: var(--pd-score-diameter-sm); height: var(--pd-score-diameter-sm); }
}
@media (max-width: 360px) { 
  .event-item { font-size: var(--font-size-xs); } 
}

/* Utility */
.muted { color: var(--color-text-muted); }
.divider { border-top: 1px solid var(--color-border-decorative); margin: var(--space-4) 0; }

/* Global ApexCharts typography fallback (ensures charts inherit design tokens even if JS options miss some labels) */
.apexcharts-text, 
.apexcharts-legend-text, 
.apexcharts-tooltip, 
.apexcharts-xaxis-label, 
.apexcharts-yaxis-label { 
  font-family: var(--font-family-sans) !important; 
  font-size: var(--font-size-sm) !important; 
}

/* Ensure tooltip contrast and readability */
.apexcharts-tooltip {
  line-height: var(--line-height-normal);
}

/* Overall Hand Score State Styles (semantic, token-driven) */
.hand-score-display.score-excellent { --score-color: var(--color-success); }
.hand-score-display.score-good { --score-color: var(--color-primary); }
.hand-score-display.score-fair { --score-color: var(--color-warning); }
.hand-score-display.score-needs { --score-color: var(--color-alert); }

/* Bind score circle & value color to --score-color variable (set by state class above) */
.hand-score-display .score-circle { border-color: var(--score-color); }
.hand-score-display .score-value { color: var(--score-color); }

/* Meaning badge for qualitative band (Excellent, Good, Fair, Needs improvement) */
.meaning-badge {
  background: var(--score-color);
  color: var(--color-surface);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 2px 6px;
  border-radius: var(--radius-pill, 9999px);
  letter-spacing: .5px;
}

/* Delta badge unified (existing classes kept; ensure text contrast with tokens) */
.delta-badge-up { background: rgba(40,167,69,.12); color: var(--color-success); }
.delta-badge-down { background: rgba(220,53,69,.12); color: var(--color-alert); }
.delta-badge-stable { background: rgba(108,117,125,.12); color: var(--color-text-muted); }

/* Next action container styling */
.hand-score-display .next-action { text-align: center; }
.hand-score-display .next-action .btn-secondary-token { margin-top: var(--space-3); }

/* Smart CTA Styling - Prominent and Action-Oriented */
.smart-cta-container {
  margin: var(--space-4) 0;
}

.smart-cta-button {
  font-weight: var(--font-weight-bold);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 200px;
  justify-content: center;
}

.smart-cta-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Effort Score Section - Separated and Distinct */
.effort-score-section {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-decorative);
  background: rgba(var(--color-primary-rgb, 0, 122, 255), 0.02);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.effort-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.effort-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
}

.effort-percentage {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.effort-bar {
  width: 100%;
  height: 8px;
  background: var(--color-border-decorative);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}

.effort-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
  border-radius: var(--radius-pill);
  transition: width var(--transition-base);
}

/* Humanized Message Styling - Warm and Personal */
.humanized-message {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  line-height: var(--line-height-relaxed);
  margin: var(--space-3) 0;
}

/* Assessment Chips - Cleaner Visual Design */
.assessment-chips {
  margin-top: var(--space-4);
}

.chip {
  display: inline-flex; 
  align-items: center; 
  gap: 4px; 
  padding: 4px 12px; 
  border-radius: var(--radius-pill, 9999px); 
  font-size: var(--font-size-base); 
  border: 1px solid var(--color-border-decorative);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-base);
}

.chip-success { 
  background: rgba(40, 167, 69, .1); 
  color: var(--color-success); 
  border-color: rgba(40,167,69,.3); 
}

.chip-missing { 
  background: rgba(108, 117, 125, .08); 
  color: var(--color-text-muted); 
  border-color: rgba(108,117,125,.25); 
}

/* Score Context Improvements */
.score-context {
  margin-top: var(--space-3);
}

.score-freshness {
  margin-top: var(--space-2);
}

/* Improved meaning badge */
.meaning-badge {
  background: var(--score-color);
  color: var(--color-surface);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  padding: 4px 12px;
  border-radius: var(--radius-pill, 9999px);
  letter-spacing: .5px;
  display: inline-block;
  margin-bottom: var(--space-2);
}

/* Center primary token buttons inside dashboard cards & chart panels */
.patient-dashboard-card .btn-primary-token,
.charts .btn-primary-token {
  display: block;               /* ensure block for auto margins */
  margin-left: auto;            /* center horizontally */
  margin-right: auto;           /* center horizontally */
  margin-top: var(--space-4);   /* preserve vertical rhythm */
  margin-bottom: var(--space-4);
}

/* When full-width utility (w-100) is applied, keep vertical spacing but no need for auto margins */
.patient-dashboard-card .btn-primary-token.w-100,
.charts .btn-primary-token.w-100 {
  margin-left: 0;
  margin-right: 0;
}

/* Top Greeting Section Styles */
.greeting-wrapper {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.greeting-content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.greeting-text {
  flex: 1;
}

.greeting-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}

.greeting-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-bottom: 0;
  line-height: var(--line-height-normal);
}

.greeting-wrapper .avatar-circle {
  width: 60px;
  height: 60px;
  font-size: 1.5rem;
  background: var(--color-primary);
  color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-round);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.greeting-actions {
  align-self: flex-start;
}

@container (min-width: 600px) {
  .greeting-wrapper {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .greeting-actions {
    align-self: center;
  }
}

@container (max-width: 400px) {
  .greeting-content {
    flex-direction: column;
    text-align: center;
  }
  
  .greeting-wrapper .avatar-circle {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }
  
  .greeting-actions {
    align-self: center;
    width: 100%;
  }
  
  .greeting-actions .btn {
    width: 100%;
  }
}

/* Hero Section: Today's Check-up Styles */
.hero-card {
  container-type: inline-size;
  background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-primary-rgb, 0, 122, 255), 0.02) 100%);
  box-shadow: var(--shadow-sm), 0 4px 20px rgba(var(--color-primary-rgb, 0, 122, 255), 0.08);
  position: relative;
  overflow: hidden;
}

.hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
}

.hero-content {
  padding: var(--space-2) 0;
}

.hero-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-4);
  text-align: left;
}

.hero-title .text-primary {
  color: var(--color-primary) !important;
}

.hero-assessment-info {
  background: rgba(var(--color-primary-rgb, 0, 122, 255), 0.05);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  border-left: 4px solid var(--color-primary);
}

.hero-due-text {
  font-size: var(--font-size-base);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}

.hero-reason-text {
  font-size: var(--font-size-base);
  text-align: left;
}

.hero-cta-button {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-button), 0 4px 12px rgba(var(--color-primary-rgb, 0, 122, 255), 0.25);
  transition: all var(--transition-base);
  text-transform: none;
  letter-spacing: 0.5px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: block;
}

.hero-cta-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--elevation-button-hover), 0 6px 16px rgba(var(--color-primary-rgb, 0, 122, 255), 0.35);
}

.hero-time-estimate {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: var(--space-3);
  background: rgba(var(--color-success-rgb, 40, 167, 69), 0.08);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--color-success-rgb, 40, 167, 69), 0.2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.hero-secondary-actions {
  border-top: 1px solid var(--color-border-decorative);
  padding-top: var(--space-3);
}

.hero-actions-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.hero-secondary-actions .btn {
  font-size: var(--font-size-xs);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.hero-secondary-actions .btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
}

/* Assessment Hero Icon Colors */
.fa-clipboard-check,
.fa-hand-paper,
.fa-ruler-combined,
.fa-heart-pulse,
.fa-check-circle,
.fa-clock {
  color: var(--color-text-body);
}

/* Custom Badge Style */
.badge-custom {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-primary);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border: 1px solid hsla(150, 25%, 90%, 1); /* Subtle border */
}
/* Voice Companion Styles */
.btn-voice-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  color: #6d28d9; /* Deep Purple text */
  background-color: var(--color-surface);
  border: 2px solid #7c3aed; /* Vivid Purple border */
  border-radius: var(--radius-pill, 9999px); /* Pill shape implies "conversation" */
  transition: all var(--transition-base);
  cursor: pointer;
}

.btn-voice-token:hover {
  background-color: rgba(124, 58, 237, 0.08); /* Subtle purple tint on hover */
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  color: #5b21b6;
}

.btn-voice-token:active {
  transform: translateY(0);
  background-color: rgba(124, 58, 237, 0.15);
}

.btn-voice-token i {
  font-size: 1.1em;
}

/* Container Queries for Hero Section */
@container (max-width: 500px) {
  .hero-title {
    font-size: var(--font-size-base);
  }
  
  .hero-cta-button {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
  }
  
  .hero-actions-group {
    flex-direction: column;
  }
  
  .hero-secondary-actions .btn {
    width: 100%;
  }
  
  .hero-assessment-info {
    padding: var(--space-3);
  }
}

/* Skeleton Loader */
.skeleton-loader {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 200px;
}

.skeleton-loader::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Tabbed Interface Styles */
.dashboard-tabs .nav-tabs {
  border-bottom: 1px solid var(--color-border-decorative);
  margin-bottom: var(--space-4);
}

.dashboard-tabs .nav-link {
  color: var(--color-text-muted);
  border: none;
  border-bottom: 3px solid transparent;
  font-weight: var(--font-weight-bold);
  padding: var(--space-3) var(--space-4);
  transition: all var(--transition-base);
}

.dashboard-tabs .nav-link:hover {
  color: var(--color-primary);
  border-color: transparent;
}

.dashboard-tabs .nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: transparent;
}

/* Ghost Chart Overlay */
.ghost-chart-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  z-index: 10;
  text-align: center;
  padding: var(--space-4);
}

.ghost-chart-content {
  background: var(--color-surface);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-width: 400px;
}

/* Chart Zones */
.chart-zone-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}
}
/* ==========================================================================
   Progress page
   One visual language for every chart on /Progress: the same card, the same
   header, the same range control, the same empty state, and a drill-down that
   reads as part of its card rather than a bolted-on panel.

   NOTE — this section sits OUTSIDE the `@layer components` block that wraps the
   rest of this file, deliberately and for the same reason components.css states
   for itself: unlayered rules outrank Bootstrap, and layered ones do not, at any
   specificity. Everything inside the layer above loses to the Bootstrap CDN for
   every property Bootstrap sets — which is why `.dashboard-tabs`' tab styling
   never took effect and the tabs rendered as raw Bootstrap. Rules that have to
   beat Bootstrap belong here; keep them scoped to `.progress-page`.
   ========================================================================== */

/* Per-modality series colours. Each modality owns a hue so a series is
   identifiable without reading the legend; the -alt tone carries the right
   hand, so left/right differ by colour as well as by dash pattern. */
.progress-page {
  /* Set from progress-charts.js once a chart has rendered: the measured distance
     from the chart container's left edge to the first y-axis value. Everything
     that reads as a caption for the plot indents by it, so the card title, the
     axis values and the band key share one left edge whatever the label widths
     turn out to be in a given locale. */
  --progress-chart-gutter: 0px;

  /* Idle tabs sit a step darker than the card so the selected one reads as raised. */
  --progress-tab-idle: hsl(150, 14%, 90%);
  --progress-tab-hover: hsl(150, 18%, 94%);

  --progress-overall: var(--color-primary);
  --progress-overall-alt: hsl(150, 30%, 45%);
  --progress-dexterity: var(--color-success);
  --progress-dexterity-alt: hsl(120, 35%, 48%);
  --progress-rom: hsl(30, 85%, 42%);
  --progress-rom-alt: hsl(30, 70%, 58%);
  --progress-wrist: hsl(205, 60%, 35%);
  --progress-wrist-alt: hsl(205, 45%, 55%);
  /* Thumb sits between ROM's orange and wrist's blue so the six lines stay
     distinguishable from one another at a glance. */
  --progress-thumb: hsl(265, 45%, 45%);
  --progress-thumb-alt: hsl(265, 35%, 62%);
  --progress-pain: var(--color-pain);
  --progress-pain-alt: hsl(275, 40%, 62%);
}

/* These components are shown and hidden with the `hidden` attribute, and several
   of them set `display: flex`. Whether an author `display` beats the UA sheet's
   `[hidden]` rule is not something to leave to the browser, so state it. */
.progress-page [hidden] {
  display: none !important;
}

/* --- page header + single range control ---------------------------------- */

.progress-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.progress-header h1 {
  margin-bottom: var(--space-1);
  color: var(--color-heading);
  font-weight: var(--font-weight-bold);
}

.progress-header-text {
  min-width: 0;
}

/* Headline score. A ring reading as a proportion of 100 rather than a flat
   disc: the old badge filled a circle with a hard-coded band colour and set
   white text on it, which at the "Fair" amber failed contrast outright and
   said nothing about the scale the number sits on. */
.progress-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.progress-score-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: conic-gradient(
    var(--progress-score-color, var(--color-primary)) calc(var(--progress-score-pct, 0) * 3.6deg),
    var(--color-border-decorative) 0
  );
}

.progress-score-ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--color-surface);
}

.progress-score-value {
  position: relative;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-heading);
}

.progress-score-caption {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Ring colour follows the canonical ScoreRating band, matching the chart
   shading and the band key. Class names come from ScoreRating.CssClass. */
.progress-score-ring.score-excellent { --progress-score-color: var(--color-success); }
.progress-score-ring.score-good      { --progress-score-color: var(--color-primary); }
.progress-score-ring.score-fair      { --progress-score-color: hsl(30, 85%, 42%); }
.progress-score-ring.score-poor      { --progress-score-color: var(--color-alert); }

/* Tour on the left, range picker on the right — the row that was empty on one side. */
.progress-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-decorative);
}

/* Right-aligned so the picker lines up with the range control in every card below. */
.progress-range-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

/* The launch button is styled by walkthrough.css (shared with the dashboard); this
   only undoes the block layout it uses there, where it sits on its own row. */
.progress-range #wt-launch-wrap {
  margin: 0;
  padding: 0;
  justify-content: flex-start;
}

/* Sized down from the stock segmented control: six of these are on screen at
   once, and none of them is the thing being read. */
.progress-page .progress-range-control .segmented-control-option {
  padding: var(--space-1) var(--space-2);
  min-width: 0;
}

/* The control carries six ranges now (1 week - 1 year). .segmented-control is
   nowrap, so at intermediate widths the last option was clipped by main's
   overflow-x exactly the way the mobile rule below already describes. Wrapping
   is allowed at every width rather than only under 768px. */
.progress-page .progress-range-control {
  flex-wrap: wrap;
}

.progress-range-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* --- insight banner ------------------------------------------------------- */

.progress-insight {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border-decorative);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-body);
}

.progress-insight i {
  color: var(--color-primary);
  flex: 0 0 auto;
}

/* --- legacy resets -------------------------------------------------------- */

/* custom.css carries two older rules that this page inherits and fights:
   `.patient-dashboard-card { text-align: center }` (an earlier, unrelated
   definition of the same class name, which this stylesheet overrides for
   background and padding but never for alignment) and
   `.tab-pane { text-align: center; padding: 25px; min-height: 300px }`.
   Together they centred every heading against left-aligned body copy and ate
   50px of chart width on a phone. Reset inside the progress page only, so the
   pages that still rely on the old rules are untouched. */
.progress-page .patient-dashboard-card {
  text-align: left;
  /* The same legacy rule also sets `height: 100%`, which this stylesheet never
     overrode. In a Bootstrap row the column stretches, so the card inherited a
     height larger than its content and carried ~24px of dead space below its
     last element — the uneven gap under the range row. */
  height: auto;
}

.progress-page .tab-pane {
  text-align: left;
  padding: 0;
  min-height: 0;
}

/* --- chart card header ---------------------------------------------------- */

/* Title on the left, aligned to the plot's first y-axis value; latest reading and
   delta on the right. padding-left moves only the left edge, so the right-hand
   group stays flush right. */
.progress-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  padding-left: var(--progress-chart-gutter, 0px);
}

.progress-chart-head h2,
.progress-chart-head h3 {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-heading);
  text-align: left;
  letter-spacing: normal;
}

/* Latest value + rating, sitting beside the chart title. */
.progress-latest {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.progress-latest-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
}

/* --- assessment tabs ------------------------------------------------------ */

/* Index-card tabs: every tab reads as a tab, not just the selected one. The
   idle tabs are sunk and darker; the selected one is raised onto the panel's own
   surface and drops its bottom border so it joins the content below it.
   (The `.dashboard-tabs` rules inside this file's @layer block never applied
   here — see the note at the top of this section — so the tabs had been
   rendering as unstyled Bootstrap.) */
.progress-page .dashboard-tabs .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.progress-page .dashboard-tabs .nav-item {
  margin-bottom: 0;
}

.progress-page .dashboard-tabs .nav-link {
  /* Pulls the tab down onto the strip's rule so the selected one can cover it. */
  margin-bottom: -1px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--progress-tab-idle);
  color: var(--color-text-body);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  transition: background var(--transition-base), color var(--transition-base);
}

/* The border is restated here, not just the colours: styles.css carries
   `.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { border: 0 }` and loads
   after this file, so without this the tab loses its 1px border on hover, its box
   shrinks by 2px and the label jumps. Bootstrap's own hover rule also repaints
   border-color, which this outranks. */
.progress-page .dashboard-tabs .nav-link:hover,
.progress-page .dashboard-tabs .nav-link:focus {
  border: 1px solid var(--color-border);
  background: var(--progress-tab-hover);
  color: var(--color-heading);
}

.progress-page .dashboard-tabs .nav-link.active {
  background: var(--color-surface);
  /* Same colour as the panel below, so the tab and its content read as one sheet. */
  border-bottom-color: var(--color-surface);
  color: var(--color-heading);
  font-weight: var(--font-weight-bold);
}

/* The selected tab is already where hovering would take it, so hovering it should
   do nothing at all — including keeping the bottom edge open into its panel. */
.progress-page .dashboard-tabs .nav-link.active:hover,
.progress-page .dashboard-tabs .nav-link.active:focus {
  border: 1px solid var(--color-border);
  border-bottom-color: var(--color-surface);
  background: var(--color-surface);
}

.progress-page .dashboard-tabs .nav-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

@media (max-width: 576px) {
  .progress-page .dashboard-tabs .nav-link {
    padding: var(--space-2);
    flex: 1 1 auto;
  }
}

/* --- chart canvas + band key ---------------------------------------------- */

.progress-chart {
  width: 100%;
  min-height: var(--pd-chart-min-height);
}

/* Legend for the shaded score bands drawn behind the score charts. Uses the
   canonical ScoreRating bands so the shading means the same thing here as the
   rating label does on a results screen. */
.progress-band-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  /* Indents the swatches to the plot's left edge, in line with the y-axis
     values and the card title. The separator rule above stays full width:
     padding sits inside the border box. */
  padding-left: var(--progress-chart-gutter, 0px);
  border-top: 1px solid var(--color-border-decorative);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* One row under the chart: the reading guide on the left, the range control on
   the right. Both are footnotes to the graph rather than part of its heading,
   and putting them on a shared baseline keeps the card to three bands — title,
   plot, footnotes — instead of a stack of separate strips.
   padding-left indents the guide to the plot's first y-axis value while leaving
   the control flush with the card's right edge. */
.progress-chart-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  padding-left: var(--progress-chart-gutter, 0px);
  border-top: 1px solid var(--color-border-decorative);
}

/* Whichever guide the modality has takes the left of the row and pushes the
   control right. The band key and the note bring their own rule and spacing for
   when they stand alone, so drop those here. */
.progress-chart-foot > .progress-band-key,
.progress-chart-foot > .progress-chart-note {
  flex: 1 1 auto;
  margin: 0;
  margin-right: auto;
  padding-top: 0;
  padding-left: 0;
  border-top: 0;
}

.progress-band-key-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.progress-band-swatch {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}

.progress-band-swatch.band-poor      { background: hsl(0, 100%, 25%, .18); }
.progress-band-swatch.band-fair      { background: hsl(30, 100%, 50%, .18); }
.progress-band-swatch.band-good      { background: hsl(150, 25%, 25%, .18); }
.progress-band-swatch.band-excellent { background: hsl(120, 43%, 28%, .18); }

.progress-chart-note {
  margin-top: var(--space-3);
  margin-bottom: 0;
  padding-left: var(--progress-chart-gutter, 0px);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* --- per-chart empty state ------------------------------------------------ */

/* Replaces a blank pair of axes when a modality has no data in the selected
   range: says which range is empty and offers the assessment that would fill it. */
.progress-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--pd-chart-min-height);
  padding: var(--space-5);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}

.progress-empty i {
  font-size: var(--font-size-md);
  opacity: .5;
}

.progress-empty-title {
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
}

/* --- footer actions ------------------------------------------------------- */

.progress-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-decorative);
}

/* Pain has no drill-down, so its row carries the action alone. */
.progress-card-actions.actions-end {
  justify-content: flex-end;
}

/* --- drill-down ----------------------------------------------------------- */

.progress-detail-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-body);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-sans);
  cursor: pointer;
  transition: all var(--transition-base);
}

.progress-detail-toggle:hover {
  background: var(--color-selected);
  color: var(--color-heading);
}

.progress-detail-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.progress-detail-toggle .chevron {
  transition: transform var(--transition-base);
}

.progress-detail-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

/* The drill-down is an inset of its card, not a separate surface: same radius
   language, one step of contrast, so it reads as "more of this chart". */
.progress-detail {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-page-bg);
  border: 1px solid var(--color-border-decorative);
  border-radius: var(--radius-md);
}

.progress-detail-head {
  margin-bottom: var(--space-4);
}

.progress-detail-head h4 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
}

.progress-detail-head p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Labelled controls, so a select's meaning does not depend on its contents. */
.progress-detail-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.progress-control {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 140px;
}

.progress-control label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.progress-control select {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-sans);
  color: var(--color-text-body);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.progress-control select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

@media (max-width: 768px) {
  /* Wrapping is now unconditional (see above); on a narrow card the control also
     takes the card's full width so the wrapped rows fill it evenly. */
  .progress-page .progress-range-control {
    width: 100%;
  }

  .progress-page .progress-range-control .segmented-control-option {
    /* Three per row, so six options make two even rows. `1 1 auto` sized each
       option to its own label, which left the second row as two stretched
       buttons with a hole between them. */
    flex: 1 0 28%;
    /* Tighter horizontally so three labels fit a row at 375px. */
    padding: var(--space-2) var(--space-1);
  }

  /* The plot's gutter is a desktop nicety; on a phone the width is worth more. */
  .progress-chart-head,
  .progress-chart-foot {
    padding-left: 0;
  }
}

@media (max-width: 576px) {
  .progress-control { min-width: 0; flex: 1 1 100%; }
  .progress-chart-head { align-items: flex-start; }
  .progress-card-actions { flex-direction: column; align-items: stretch; }
  .progress-band-key, .progress-chart-note { padding-left: 0; }
  .progress-header { gap: var(--space-3); }
  .progress-score-ring { width: 72px; height: 72px; }
  .progress-score-ring::before { inset: 7px; }
  .progress-score-value { font-size: var(--font-size-base); }
  .progress-page .delta-badge-context { display: none; }

  /* The header wraps on a phone, putting the score on a line of its own where
     `justify-content: space-between` leaves it hard against the left edge under
     left-aligned title copy. Auto side margins beat justify-content and centre it
     on that line. */
  .progress-score { margin-inline: auto; }

  /* Full-width launcher, matching the dashboard's greeting card. Both the wrapper
     and the button need it: the wrapper is the flex item, the button is what is
     actually painted. */
  .progress-range #wt-launch-wrap,
  .progress-range #wt-launch {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Typography — the product typeface, on the two patient screens
   Nothing sets font-family on <body> that outranks Bootstrap's reboot, and the
   rules in this file that DO name the token font sit inside `@layer components`,
   where unlayered Bootstrap wins at any specificity. The result was that both of
   these screens rendered as a mix: headings and anything freshly written in the
   unlayered sections in Atkinson Hyperlegible Next, and everything else — mini-stat
   figures, the effort label, badges, the band key, the range control — in
   Bootstrap's system stack.

   Scoped to these two pages rather than set on <body>: the honest fix is
   body-level, but that restyles every screen in the app at once and is not a
   decision to make from inside a chart task. See TRK-001 item 86.
   ========================================================================== */

.patient-home,
.progress-page {
  font-family: var(--font-family-sans);
}

/* Buttons and form controls take the UA font unless told otherwise. */
.patient-home button,
.patient-home input,
.patient-home select,
.patient-home textarea,
.progress-page button,
.progress-page input,
.progress-page select,
.progress-page textarea {
  font-family: inherit;
}

/* The segmented control asks for --font-size-sm from inside the layer, so Bootstrap's
   `button { font-size: inherit }` was overriding it to the 16px body size. */
.patient-home .segmented-control-option,
.progress-page .segmented-control-option {
  font-size: var(--font-size-sm);
}

/* Same story for the option's own corners, and this one was visible: Bootstrap's
   reboot sets an unlayered `button { border-radius: 0 }`, which beat the layered
   rule above at any specificity, so the selected option painted as a square block
   inside the rounded track. Unlayered, and not page-scoped — the care-provider
   research dashboard renders the same control. */
.segmented-control-option {
  border-radius: var(--radius-pill, 9999px);
}

/* Same story for heading weight: base.css asks for bold from `@layer base`, and
   unlayered styles.css (`h1, h2, h3 { font-weight: 500 }`) outranks it. */
.patient-home h1, .patient-home h2, .patient-home h3, .patient-home h4,
.progress-page h1, .progress-page h2, .progress-page h3, .progress-page h4 {
  font-weight: var(--font-weight-bold);
}

/* One type scale across both screens, on the token steps (9 / 12.8 / 18 / 25.6 / 36).
   Equivalent elements were landing on different sizes: the page title was 40px on the
   dashboard (Bootstrap's fluid h1, since `.greeting-title`'s own font-size is layered
   and outranked) against 32px on progress (Bootstrap's `.h2`) — neither of them a token
   step. Card headings, badges and the time pill were likewise on Bootstrap sizes. */

/* Page title */
.patient-home .greeting-title,
.progress-page .progress-header h1 {
  font-size: var(--font-size-lg);
}

/* Card and section headings */
.patient-home h2, .patient-home h3,
.progress-page h2, .progress-page h3 {
  font-size: var(--font-size-md);
}

/* Sub-headings inside a card */
.patient-home h4,
.progress-page h4 {
  font-size: var(--font-size-base);
}

/* Lede and body copy */
.patient-home .greeting-subtitle,
.patient-home .hero-reason-text,
.patient-home .recovery-focus-message,
.patient-home .humanized-message,
.progress-page .progress-header p,
.progress-page .progress-insight {
  font-size: var(--font-size-base);
}

/* Captions, labels, chips and controls */
.patient-home .badge-custom,
.patient-home .hero-time-estimate,
.patient-home .score-label,
.patient-home .score-freshness,
.patient-home .effort-label,
.patient-home .effort-percentage,
.patient-home .score-breakdown-row .text-muted,
.patient-home .btn-secondary-token,
.progress-page .progress-band-key,
.progress-page .progress-chart-note,
.progress-page .progress-range-label,
.progress-page .progress-latest,
.progress-page .progress-score-caption {
  font-size: var(--font-size-sm);
}

/* The headline score, identical on both: same ring, same number, caption beneath —
   the .progress-score arrangement. The dashboard's was a 120px ring around a 36px
   figure against progress's 88px and 25.6px. */
.patient-home .score-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.patient-home .score-circle,
.patient-home .score-circle-empty {
  width: 88px;
  height: 88px;
}

.patient-home .score-value,
.patient-home .no-score-text,
.progress-page .progress-score-value {
  font-size: var(--font-size-md);
}

/* The mini-stat figures read as data, a step above their labels. */
.patient-home .score-breakdown-row .fw-bold {
  font-size: var(--font-size-base);
}

/* ==========================================================================
   Patient home
   Same treatment as the progress-page section above: the legacy rules this page
   inherits are reset inside its own scope, and the components are put back on
   the token system.

   NOTE — like that section, this sits OUTSIDE the `@layer components` block that
   wraps the rest of this file, and for the same reason: layered rules lose to the
   unlayered Bootstrap CDN at any specificity. Keep rules scoped to `.patient-home`.
   ========================================================================== */

/* --- legacy resets -------------------------------------------------------- */

/* custom.css carries an older, unrelated `.patient-dashboard-card` that this
   stylesheet overrides for background and padding but not for alignment or
   height. `text-align: center` fought every component's own left alignment
   (both of them tried to win it back with `text-left`, a Bootstrap 4 class that
   does not exist in Bootstrap 5), and `height: 100%` made each card taller than
   its content inside a stretched grid row. */
.patient-home .patient-dashboard-card,
.patient-home .charts {
  text-align: left;
  height: auto;
}

/* --- greeting ------------------------------------------------------------- */

.patient-home .greeting-content {
  /* --space-6 of dead space above the avatar, on a page that already has the
     grid container's own padding. */
  margin-top: 0;
}

.patient-home .greeting-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* The launcher now sits beside the greeting instead of on a band of its own. */
.patient-home #wt-launch-wrap {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

/* --- hero ----------------------------------------------------------------- */

.patient-home .hero-content {
  padding: 0;
}

.patient-home .hero-title {
  /* --font-size-lg is 36px, the page's h1 size, on what is a card heading under
     the greeting. Steps it below the greeting so the page has one clear top. */
  font-size: var(--font-size-md);
  margin-bottom: var(--space-2);
}

/* Was an inline max-width on the element; a measure belongs in the stylesheet. */
.patient-home .hero-reason-text {
  max-width: 60ch;
  margin-bottom: var(--space-4);
}

/* Bootstrap's .bg-light is a grey that predates the token palette and reads as a
   different surface from everything around it. */
.patient-home .hero-time-estimate {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-decorative);
  color: var(--color-text-muted);
}

/* --- score card ----------------------------------------------------------- */

/* .charts sets `text-align: center` on its h3 from a rule shared with the
   care-provider area; the card's own heading should read like every other card
   heading on the patient side. */
.patient-home #overall-hand-score-card .chart-header h3 {
  text-align: left;
  font-size: var(--font-size-md);
  color: var(--color-heading);
  letter-spacing: normal;
}

.patient-home .score-breakdown-row .fw-bold {
  color: var(--color-heading) !important;
}

.patient-home .score-breakdown-row .text-muted {
  font-size: var(--font-size-sm);
}

/* Bootstrap's .border-end is a grey rule; match the token border so the three
   mini-stats are divided in the page's own colour. */
.patient-home .score-breakdown-row .border-end {
  border-color: var(--color-border-decorative) !important;
}

.patient-home .score-freshness {
  font-size: var(--font-size-sm);
}

/* --- recovery tip --------------------------------------------------------- */

.patient-home .recovery-focus-card {
  display: flex;
  gap: var(--space-3);
}

.patient-home .recovery-focus-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin: 0;
}

.patient-home .recovery-focus-message {
  margin-bottom: 0;
  color: var(--color-text-body);
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 576px) {
  .patient-home .greeting-actions {
    width: 100%;
  }

  .patient-home .greeting-actions #wt-launch-wrap,
  .patient-home .greeting-actions #wt-launch {
    width: 100%;
    justify-content: center;
  }
}

/* --- greeting card -------------------------------------------------------- */

/* The greeting was the only block on the page not in a card, sitting flush against
   the top of the viewport. It now reads as the page header, the way the progress
   page's does — two banded rows split by a rule: name and avatar on top, how the
   week is going and the tour launcher below.

   Note `.greeting-wrapper` also declares `container-type: inline-size` and tries to
   change its OWN flex-direction from inside `@container (min-width: 600px)`. A
   container query cannot style the element that establishes it, so that rule has
   never applied — the greeting was a single column at every width, which is why the
   tour button sat centred beneath the text. The layout is set here instead. */
.patient-home .greeting-wrapper {
  margin-top: var(--space-4);
  flex-direction: column;
  gap: 0;
}

.patient-home .greeting-top,
.patient-home .greeting-bottom {
  display: flex;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

/* Avatar then name, grouped at the left. */
.patient-home .greeting-top {
  justify-content: flex-start;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-decorative);
}

/* Message left, tour launcher right. */
.patient-home .greeting-bottom {
  justify-content: space-between;
}

.patient-home .greeting-bottom {
  padding-top: var(--space-3);
}

.patient-home .greeting-title,
.patient-home .greeting-subtitle {
  margin: 0;
  min-width: 0;
}

/* `.greeting-title` already asks for the heading colour and bold, but it sits inside
   this file's `@layer components` block: unlayered `styles.css` (`h1, h2, h3 {
   font-weight: 500 }`) outranks it, and the colour fell back to the card's inherited
   --color-text-body. Restated here, where it is unlayered — same as the progress
   page's h1. */
.patient-home .greeting-title {
  color: var(--color-heading);
  font-weight: var(--font-weight-bold);
}

.patient-home .greeting-actions {
  flex: 0 0 auto;
}

/* `.avatar-circle` carries `margin: 0 auto`, and auto margins in a flex row absorb the
   free space — they beat any `justify-content`, so the avatar floated in the leftover
   width rather than sitting where the row put it. */
.patient-home .greeting-top .avatar-circle {
  margin: 0;
}

/* The label is two words and should stay on one line; without this the button takes
   whatever width the message leaves it and wraps. */
.patient-home #wt-launch {
  white-space: nowrap;
}

@media (max-width: 576px) {
  /* Avatar and name still fit side by side on a phone, so only the lower row —
     message above a full-width launcher — stacks. */
  .patient-home .greeting-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .patient-home .greeting-title {
    font-size: var(--font-size-md);
  }
}

/* --- hero ----------------------------------------------------------------- */

/* btn-secondary-token is laid out for a standalone block button; inside the hero's
   action row it needs to sit on the baseline with the time pill. */
.patient-home .hero-content .btn-secondary-token {
  margin: 0;
  width: auto;
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-sm);
}

/* --- hand recovery score -------------------------------------------------- */

/* Same ring language as the progress page's headline score, so the two screens
   read as one product: a proportion of 100 rather than a ring of constant weight,
   and coloured from the same ScoreRating band. `--radius-round` is 32px, a pill
   radius — on a 120px box it had been drawing a rounded SQUARE, not a circle. */
.patient-home .score-circle,
.patient-home .score-circle-empty {
  position: relative;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--score-color, var(--color-primary)) calc(var(--score-pct, 0) * 3.6deg),
    var(--color-border-decorative) 0
  );
  margin: 0;
}

.patient-home .score-circle-empty {
  background: var(--color-border-decorative);
}

.patient-home .score-circle::before,
.patient-home .score-circle-empty::before {
  content: "";
  position: absolute;
  inset: var(--score-ring-thickness);
  border-radius: 50%;
  background: var(--color-surface);
}

.patient-home .score-value,
.patient-home .score-label,
.patient-home .no-score-text {
  position: relative;
}

/* The low band. The stylesheet called it `.score-needs` while ScoreRating calls it
   `score-poor`; both are bound so neither name silently does nothing. */
.patient-home .hand-score-display.score-poor,
.hand-score-display.score-poor { --score-color: var(--color-alert); }

/* Score and its context sit side by side rather than as a tall centred stack. */
.patient-home .hand-score-display {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.patient-home .hand-score-display > .score-figure,
.patient-home .hand-score-display > .score-circle-empty {
  flex: 0 0 auto;
}

.patient-home .hand-score-display > .score-context {
  flex: 1 1 260px;
  min-width: 0;
  text-align: left !important;
}

.patient-home .score-context .delta-badge {
  margin-left: 0 !important;
}

.patient-home .humanized-message {
  font-size: var(--font-size-base);
  color: var(--color-heading);
  margin-top: var(--space-2) !important;
  margin-bottom: var(--space-2) !important;
}

/* Full-width rows below the score/context pair. */
.patient-home .hand-score-display > .effort-score-section,
.patient-home .hand-score-display > .score-breakdown-row {
  flex: 1 1 100%;
}

.patient-home .effort-score-section {
  margin-top: 0;
}

@media (max-width: 576px) {
  .patient-home .hand-score-display {
    justify-content: center;
  }

  .patient-home .hand-score-display > .score-context {
    text-align: center !important;
    flex-basis: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Mobile assessment picker (patient home)

   The assessment menu lives only in the desktop left sidebar, which is hidden
   below 768px, and the mobile bottom nav carries Home / Progress / Profile. On a
   phone the only reachable assessment was whichever one the hero card happened
   to recommend. This section is that menu, shown at exactly the breakpoint the
   sidebar is hidden at, so the two are never both on screen and never both gone.

   Almost nothing is styled here on purpose: the markup reuses the sidebar's own
   global nav classes, so the type scale, the row heights, the recessed sublist
   panel, the caret rotation and the greyed unavailable entries all come from
   _OffCanvasNavBarPartial. What is left below is only the visibility switch and
   the handful of resets needed to sit the sidebar's list inside a dashboard card
   instead of a 250px fixed rail.

   DELIBERATELY OUTSIDE `@layer components`, which everything above is inside.
   `styles.css` is loaded unlayered and carries a bare `h1, h2, h3 { ... }`, and
   an unlayered rule beats every layered one no matter its specificity. This is
   one instance of the layering problem recorded as TRK-001 item 85(h); it is
   worked around here rather than fixed, because fixing it is a stylesheet-wide
   change.
--------------------------------------------------------------------------- */
.mobile-assessment-picker { display: none; }

/* Same query as `.desktop-sidebar { display: none }` in _OffCanvasNavBarPartial.
   If that breakpoint moves, this one must move with it. */
@media (max-width: 767px) {
  .mobile-assessment-picker { display: block; }
}

/* custom.css (@layer legacy) still sets `.patient-dashboard-card` to
   text-align:center and height:100%; neither suits a nav list. */
.mobile-assessment-picker {
  text-align: left;
  height: auto;
}

/* The sidebar's list is spaced to clear a fixed rail's logo header. Inside a card
   that top margin is just a gap. */
.mobile-assessment-picker .desktop-nav-list {
  margin: 0;
}

.mobile-assessment-picker .nav-section-header {
  margin-top: 0;
  padding-top: 0;
}