/* ==========================================================================
   RECOLLECT — COGNITIVE CARE & MONITORING DESIGN SYSTEM
   Complies with: design.md, PRD.md, rules.md, architecture.md
   Accessibility: WCAG 2.2 Level AAA (Patient UI) / AA (Caregiver/Clinical)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Color Palette - Biophilic Emerald & Calming Sandstone */
  --surface: #f7f9ff;
  --surface-dim: #d4dbe4;
  --surface-bright: #f7f9ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #edf4fe;
  --surface-container: #e8eef8;
  --surface-container-high: #e2e9f2;
  --surface-container-highest: #dce3ed;
  --on-surface: #151c23;
  --on-surface-variant: #404943;
  --inverse-surface: #2a3138;
  --inverse-on-surface: #ebf1fb;
  --outline: #707973;
  --outline-variant: #bfc9c1;
  --surface-tint: #2c694e;
  
  --primary: #0f5238;
  --on-primary: #ffffff;
  --primary-container: #2d6a4f;
  --on-primary-container: #a8e7c5;
  --inverse-primary: #95d4b3;
  --primary-fixed: #b1f0ce;
  --primary-fixed-dim: #95d4b3;
  --on-primary-fixed: #002114;
  --on-primary-fixed-variant: #0e5138;
  
  --secondary: #395f94;
  --on-secondary: #ffffff;
  --secondary-container: #9ec2fe;
  --on-secondary-container: #284f83;
  --secondary-fixed: #d5e3ff;
  --secondary-fixed-dim: #a7c8ff;
  --on-secondary-fixed: #001c3b;
  --on-secondary-fixed-variant: #1e477b;
  
  --tertiary: #6f3a00;
  --on-tertiary: #ffffff;
  --tertiary-container: #914d00;
  --on-tertiary-container: #ffd1ae;
  --tertiary-fixed: #ffdcc3;
  --tertiary-fixed-dim: #ffb77d;
  --on-tertiary-fixed: #2f1500;
  --on-tertiary-fixed-variant: #6e3900;
  
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  
  --mint-badge: #d1fae5;
  --mint-badge-text: #065f46;
  --amber-badge: #fef3c7;
  --amber-badge-text: #92400e;
  --blue-badge: #e0f2fe;
  --blue-badge-text: #0369a1;

  /* Typography */
  --font-family: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Plus Jakarta Sans', 'Atkinson Hyperlegible', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Touch Hitboxes */
  --touch-min: 56px;
  --touch-comfortable: 64px;
  --touch-huge: 72px;

  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Elevation Shadows */
  --shadow-level-1: 0 4px 12px rgba(21, 28, 35, 0.05);
  --shadow-level-2: 0 6px 16px rgba(45, 106, 79, 0.09);
  --shadow-level-3: 0 8px 24px rgba(15, 82, 56, 0.16);
  --shadow-modal: 0 16px 40px rgba(21, 28, 35, 0.22);

  /* Animation */
  --transition-smooth: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Low-Power Mode Overrides (PRD FR-9.10) */
body.low-power-mode {
  --shadow-level-1: none;
  --shadow-level-2: none;
  --shadow-level-3: none;
  --shadow-modal: 0 4px 12px rgba(0,0,0,0.25);
  --transition-smooth: none !important;
}

body.low-power-mode * {
  animation-duration: 0.001s !important;
  transition-duration: 0.001s !important;
}

/* High Contrast Mode */
body.high-contrast {
  --surface: #ffffff;
  --on-surface: #000000;
  --outline: #000000;
  --outline-variant: #000000;
  --surface-container: #f0f0f0;
  --surface-container-high: #e0e0e0;
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-family);
  line-height: 1.5;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  color: var(--on-surface);
  overflow-x: hidden;
}

/* Global Top Navigation & Role Bar */
.global-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 249, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1.5px solid var(--outline-variant);
  padding: 0.65rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.brand-badge .brand-leaf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 1.2rem;
}

.role-switcher-nav {
  display: flex;
  align-items: center;
  background: var(--surface-container-high);
  padding: 4px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--outline-variant);
  gap: 4px;
}

.role-tab-btn {
  border: none;
  background: transparent;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: var(--transition-smooth);
}

.role-tab-btn:hover {
  background: rgba(15, 82, 56, 0.08);
  color: var(--primary);
}

.role-tab-btn.active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: var(--shadow-level-1);
}

/* Standalone App Authenticated Header Bar */
.authenticated-role-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface-container-lowest);
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.95rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--on-surface);
}

.authenticated-role-badge .user-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.logout-action-btn {
  background: #f1f5f9;
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-full);
  padding: 0.4rem 0.85rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: var(--transition-smooth);
}

.logout-action-btn:hover {
  background: #e2e8f0;
  color: var(--error);
  border-color: #fca5a5;
}

.senior-mode-exit-btn {
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-full);
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: var(--transition-smooth);
}

.senior-mode-exit-btn:hover {
  background: #ffffff;
  border-color: var(--primary);
  color: var(--primary);
}

/* Dedicated Login / Space Selection Screen */
.login-screen-wrapper {
  max-width: 960px;
  margin: 1.5rem auto 3rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.login-hero-header {
  text-align: center;
}

.login-hero-header .app-icon-large {
  font-size: 3.5rem;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.login-hero-header h1 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.login-hero-header p {
  font-size: 1.25rem;
  color: var(--on-surface-variant);
  max-width: 600px;
  margin: 0 auto;
}

.login-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.75rem;
}

.role-login-card {
  background: var(--surface-container-lowest);
  border: 2.5px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-level-1);
  transition: var(--transition-smooth);
}

.role-login-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-level-2);
}

.role-login-card.patient-entry {
  border-color: var(--primary);
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.pin-login-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.pin-input-field {
  height: 48px;
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 0 1rem;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  text-align: center;
  outline: none;
}

.pin-input-field:focus {
  border-color: var(--primary);
}

.system-status-pills {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  border: 1.5px solid var(--outline-variant);
  background: var(--surface-container-lowest);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.status-pill.online {
  background: var(--mint-badge);
  color: var(--mint-badge-text);
  border-color: #a7f3d0;
}

.status-pill.offline {
  background: var(--amber-badge);
  color: var(--amber-badge-text);
  border-color: #fde68a;
}

.status-pill.power-saving {
  background: #f1f5f9;
  color: #475569;
}

.lang-selector {
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-full);
  background: var(--surface-container-lowest);
  padding: 0.35rem 0.75rem;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--on-surface);
  cursor: pointer;
  outline: none;
}

/* App Main Container */
.app-viewport {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

/* Views wrapper */
.view-section {
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.view-section.active-view {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   5.2 ROLE GATEWAY & PROFILE SELECTION
   ========================================================================== */
.gateway-hero {
  text-align: center;
  margin: 1.5rem 0 2rem;
}

.gateway-hero h1 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--on-surface);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.gateway-hero p {
  font-size: 1.25rem;
  color: var(--on-surface-variant);
  max-width: 680px;
  margin: 0 auto;
}

.gateway-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.gateway-profile-card {
  background: var(--surface-container-lowest);
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-level-1);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.gateway-profile-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow-level-2);
}

.gateway-profile-card.patient-space {
  border-color: var(--primary-container);
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.gateway-profile-card.patient-space::before {
  content: 'PRIMARY SPACE';
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: var(--primary-fixed);
  color: var(--on-primary-fixed);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
}

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.profile-avatar-circle {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: var(--surface-container-high);
  border: 2px solid var(--outline-variant);
  flex-shrink: 0;
}

.patient-space .profile-avatar-circle {
  background: var(--primary-fixed);
  border-color: var(--primary);
}

.profile-info h3 {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--on-surface);
}

.profile-info span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-surface-variant);
}

.profile-details-box {
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  color: var(--on-surface);
}

.profile-action-btn {
  height: var(--touch-comfortable);
  min-height: 56px;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  transition: var(--transition-smooth);
}

.profile-action-btn.primary-btn {
  background: var(--primary);
  color: #ffffff;
  box-shadow: var(--shadow-level-3);
}

.profile-action-btn.primary-btn:hover {
  background: var(--primary-container);
}

.profile-action-btn.secondary-btn {
  background: var(--secondary);
  color: #ffffff;
  box-shadow: var(--shadow-level-1);
}

.profile-action-btn.secondary-btn:hover {
  background: #284f83;
}

.profile-action-btn.clinical-btn {
  background: var(--inverse-surface);
  color: #ffffff;
}

.profile-action-btn.clinical-btn:hover {
  background: #151c23;
}

/* ==========================================================================
   5.1 SENIOR PATIENT SPACE (MEMORIA / RECOLLECT PATIENT UI)
   ========================================================================== */
.patient-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

/* Orientation Anchor Bar */
.orientation-anchor-bar {
  background: linear-gradient(135deg, #2d6a4f 0%, #0f5238 100%);
  color: #ffffff;
  border-radius: var(--radius-xl);
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: var(--shadow-level-2);
  border: 2px solid #a8e7c5;
  position: relative;
}

.orientation-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--on-primary-container);
}

.orientation-greeting {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.25;
}

.orientation-date {
  font-size: 1.45rem;
  font-weight: 600;
  color: #e2f7eb;
}

/* Auditory Narration Trigger */
.listen-day-btn {
  background: var(--secondary-fixed);
  color: var(--on-secondary-fixed);
  border: 2px solid var(--secondary);
  border-radius: var(--radius-full);
  height: var(--touch-comfortable);
  font-size: 1.25rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-level-1);
}

.listen-day-btn:hover {
  background: #bfd7fe;
  transform: translateY(-2px);
}

.listen-day-btn.speaking {
  background: #ffedd5;
  color: #9a3412;
  border-color: #ea580c;
  animation: pulse-border 1.5s infinite;
}

@keyframes pulse-border {
  0% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(234, 88, 12, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
}

/* Gentle Current Routine Card */
.current-routine-card {
  background: var(--surface-container-lowest);
  border: 2.5px solid var(--primary);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-level-2);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.routine-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.routine-tag-pill {
  background: var(--tertiary-fixed);
  color: var(--on-tertiary-fixed);
  font-size: 1rem;
  font-weight: 800;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.routine-title-box h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--on-surface);
  margin-bottom: 0.25rem;
}

.routine-title-box p {
  font-size: 1.35rem;
  color: var(--on-surface-variant);
}

/* Real Photographic & Detail Visuals */
.routine-visual-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.25rem;
  align-items: center;
}

.routine-macro-photo-container {
  background: #f1f5f9;
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  height: 200px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.routine-macro-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.routine-pills-spec {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.spec-tile {
  background: var(--surface-container-low);
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.spec-tile .spec-icon {
  font-size: 1.75rem;
}

.spec-tile .spec-txt strong {
  display: block;
  font-size: 1.15rem;
  color: var(--on-surface);
}

.spec-tile .spec-txt span {
  font-size: 0.95rem;
  color: var(--on-surface-variant);
}

/* Huge 64px Action Button */
.take-med-big-btn {
  height: var(--touch-huge);
  min-height: 64px;
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  box-shadow: var(--shadow-level-3);
  transition: var(--transition-smooth);
}

.take-med-big-btn:hover {
  background: var(--primary-container);
  transform: scale(1.01);
}

.take-med-big-btn:active {
  transform: scale(0.98);
}

.take-med-big-btn.completed-state {
  background: var(--mint-badge);
  color: var(--mint-badge-text);
  border: 2px solid #10b981;
  box-shadow: none;
  pointer-events: none;
}

/* Patient Daily Schedule Checklist */
.schedule-section-card {
  background: var(--surface-container-lowest);
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.schedule-section-card h3 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--on-surface);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.routine-list-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.routine-list-item {
  background: var(--surface-container-low);
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: var(--transition-smooth);
}

.routine-list-item.done {
  background: #f0fdf4;
  border-color: #86efac;
}

.routine-list-item.active-item {
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: var(--shadow-level-1);
}

.routine-left-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.routine-glyph {
  font-size: 2rem;
}

.routine-meta-txt strong {
  display: block;
  font-size: 1.25rem;
  color: var(--on-surface);
}

.routine-meta-txt span {
  font-size: 1.05rem;
  color: var(--on-surface-variant);
}

.routine-status-pill {
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-full);
  font-size: 1rem;
  font-weight: 700;
  border: 1.5px solid transparent;
}

.routine-status-pill.done-badge {
  background: var(--mint-badge);
  color: var(--mint-badge-text);
  border-color: #6ee7b7;
}

.routine-status-pill.pending-badge {
  background: var(--secondary-fixed);
  color: var(--on-secondary-fixed);
  border-color: #93c5fd;
}

/* Patient Quick Actions: Games, Mood, Reassurance, Family Call */
.patient-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.patient-action-tile {
  background: var(--surface-container-lowest);
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: var(--shadow-level-1);
}

.patient-action-tile.family-tile {
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
  border-color: var(--secondary);
}

.patient-action-tile.game-tile {
  background: linear-gradient(180deg, #ffffff 0%, #fefce8 100%);
  border-color: #d97706;
}

.patient-action-tile.mood-tile {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
  border-color: var(--primary-container);
}

.tile-header-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.tile-icon-avatar {
  font-size: 2.25rem;
}

.tile-title-box h4 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--on-surface);
}

.tile-title-box p {
  font-size: 1rem;
  color: var(--on-surface-variant);
}

.tile-action-button {
  height: 56px;
  border-radius: var(--radius-full);
  border: none;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: var(--transition-smooth);
}

.tile-action-button.call-btn {
  background: var(--secondary);
  color: #ffffff;
}

.tile-action-button.play-btn {
  background: #d97706;
  color: #ffffff;
}

.mood-selector-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.mood-btn {
  flex: 1;
  background: #ffffff;
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 0.6rem 0.3rem;
  font-size: 1.75rem;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.mood-btn span {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--on-surface);
}

.mood-btn:hover {
  border-color: var(--primary);
  background: #f0fdf4;
  transform: translateY(-2px);
}

.mood-btn.selected {
  border-color: var(--primary);
  background: var(--primary-fixed);
  border-width: 2.5px;
}

/* Reassurance & Non-Diagnostic Footer */
.reassurance-banner {
  background: #f0fdf4;
  border: 2px solid #86efac;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #065f46;
}

.disclaimer-text {
  font-size: 0.95rem;
  color: var(--on-surface-variant);
  text-align: center;
  padding: 0.5rem 1rem;
  line-height: 1.4;
}

/* ==========================================================================
   5.3 SENIOR PICTORIAL MEMORY PHOTO GAME (NO TIMERS, CALM FEEDBACK)
   ========================================================================== */
.game-modal-card {
  background: var(--surface-container-lowest);
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: var(--shadow-level-2);
}

.game-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  border-bottom: 1.5px solid var(--outline-variant);
  padding-bottom: 1rem;
}

.game-peace-tag {
  background: #fef3c7;
  color: #92400e;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  font-size: 1.05rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.game-feedback-banner {
  background: #f0fdf4;
  border: 2px solid #6ee7b7;
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: #065f46;
  text-align: center;
  transition: var(--transition-smooth);
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
}

.photo-card {
  background: var(--surface-container-low);
  border: 2.5px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  cursor: pointer;
  transition: var(--transition-smooth);
  user-select: none;
  text-align: center;
}

.photo-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow-level-1);
}

.photo-card.revealed, .photo-card.matched {
  background: #ffffff;
  border-color: var(--primary);
  box-shadow: var(--shadow-level-2);
}

.photo-card.matched {
  background: #f0fdf4;
  border-color: #10b981;
}

.photo-card .card-art {
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
}

.photo-card .card-label {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--on-surface);
}

.photo-card .card-subtitle {
  font-size: 0.95rem;
  color: var(--on-surface-variant);
}

.photo-card.hidden-card .card-art {
  font-size: 2.5rem;
}

.game-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.hint-btn {
  height: 56px;
  background: var(--tertiary-fixed);
  color: var(--on-tertiary-fixed);
  border: 2px solid var(--tertiary);
  border-radius: var(--radius-full);
  padding: 0 1.5rem;
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition-smooth);
}

.hint-btn:hover {
  background: #fed7aa;
}

.game-progress-indicators {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--on-surface);
}

.bloom-dot {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-container-high);
  font-size: 1.1rem;
}

.bloom-dot.bloomed {
  background: #86efac;
}

/* ==========================================================================
   PATIENT-SIDE SCORE TRACKER & FULL-SCREEN GAME TAKEOVER
   ========================================================================== */
.patient-score-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #fef08a;
  border: 2px solid #ca8a04;
  border-radius: var(--radius-full);
  padding: 0.35rem 0.95rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: #1c1917;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: var(--transition-smooth);
}

.patient-score-pill strong {
  color: #0f172a;
  font-weight: 900;
}

.game-fullscreen-takeover {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2100 !important;
  background: var(--surface) !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: none;
  overflow: hidden !important;
  border-radius: 0 !important;
}

.game-fullscreen-takeover.active-modal,
.game-fullscreen-takeover.active-takeover {
  display: flex !important;
  flex-direction: column !important;
}

.game-fullscreen-container {
  width: 100%;
  height: 100%;
  max-width: 1150px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow-y: auto;
  box-sizing: border-box;
  justify-content: space-between;
}

.game-fullscreen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1.5px solid var(--outline-variant);
}

.game-header-titles {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.game-category-icon-badge {
  font-size: 2.8rem;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-container-high);
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-full);
}

.game-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.game-title-group h2 {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  margin: 0;
  color: var(--on-surface);
}

.game-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.patient-game-score-badge {
  background: #fefce8;
  border: 2px solid #eab308;
  border-radius: var(--radius-full);
  padding: 0.4rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: var(--shadow-sm);
}

.patient-game-score-badge .score-star {
  font-size: 1.8rem;
  line-height: 1;
}

.patient-game-score-badge .score-text-group {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.patient-game-score-badge .score-text-group strong {
  font-size: 1.15rem;
  color: #1c1917;
  font-weight: 900;
}

.patient-game-score-badge .score-text-group span {
  font-size: 0.95rem;
  color: #292524;
  font-weight: 700;
}

.game-exit-btn {
  height: 48px;
  background: var(--surface-container-high);
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-full);
  padding: 0 1.25rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--on-surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition-smooth);
}

.game-exit-btn:hover {
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
}

.game-dynamic-area {
  flex: 1;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

/* --------------------------------------------------------------------------
   ENGINE 2: ATTENTION GAME (Garden Flower Focus)
   -------------------------------------------------------------------------- */
.attention-target-banner {
  background: #fef9c3;
  border: 2.5px solid #eab308;
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
  color: #713f12;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.flower-bed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 1.15rem;
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
}

.flower-tile {
  background: var(--surface-container-low);
  border: 2.5px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.25rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 140px;
  user-select: none;
}

.flower-tile:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: var(--primary);
  box-shadow: var(--shadow-level-1);
}

.flower-tile.bloomed-target {
  background: #f0fdf4 !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.4) !important;
  pointer-events: none;
  animation: bloomPop 0.4s ease forwards;
}

.flower-tile.hint-pulse {
  animation: gentlePulse 0.9s ease-in-out infinite alternate;
  border-color: #eab308 !important;
}

@keyframes bloomPop {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1.0); }
}

@keyframes gentlePulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(234, 179, 8, 0); }
  100% { transform: scale(1.06); box-shadow: 0 0 14px rgba(234, 179, 8, 0.6); }
}

.flower-tile-icon {
  font-size: 3.6rem;
  line-height: 1;
}

.flower-tile-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--on-surface);
  text-align: center;
}

/* --------------------------------------------------------------------------
   ENGINE 3: LANGUAGE GAME (Word & Everyday Object Recall)
   -------------------------------------------------------------------------- */
.language-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.language-prompt-card {
  background: var(--surface-container-lowest);
  border: 3px solid var(--primary);
  border-radius: var(--radius-xl);
  padding: 1.75rem 2rem;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.language-prompt-icon {
  font-size: 4.5rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.language-prompt-question {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
  line-height: 1.3;
}

.language-prompt-clue {
  font-size: 1.15rem;
  color: var(--on-surface-variant);
  font-weight: 600;
}

.language-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  width: 100%;
}

.language-option-card {
  background: var(--surface-container-low);
  border: 2.5px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 140px;
  text-align: center;
  user-select: none;
}

.language-option-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow-level-1);
}

.language-option-card.correct {
  background: #f0fdf4 !important;
  border-color: #16a34a !important;
  box-shadow: 0 0 16px rgba(22, 163, 74, 0.4) !important;
  pointer-events: none;
  animation: bloomPop 0.4s ease forwards;
}

.language-option-card.hint-highlight {
  border-color: #eab308 !important;
  animation: gentlePulse 0.9s ease-in-out infinite alternate;
}

.language-option-card .option-icon {
  font-size: 3.2rem;
  line-height: 1;
}

.language-option-card .option-label {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--on-surface);
}

/* --------------------------------------------------------------------------
   ENGINE 4: PROBLEM SOLVING GAME (Daily Routine Steps)
   -------------------------------------------------------------------------- */
.routine-board {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
}

.routine-slots-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  width: 100%;
}

.routine-slot {
  border: 2.5px dashed var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1rem;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--surface-container-lowest);
  text-align: center;
  transition: all 0.25s ease;
}

.routine-slot.filled {
  border-style: solid;
  border-color: #16a34a;
  background: #f0fdf4;
  box-shadow: var(--shadow-sm);
  animation: bloomPop 0.4s ease forwards;
}

.routine-slot-num {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--on-surface-variant);
  background: var(--surface-container-high);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}

.routine-slot.filled .routine-slot-num {
  background: #bbf7d0;
  color: #166534;
}

.routine-slot-txt {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--on-surface);
}

.routine-choices-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  width: 100%;
}

.routine-choice-card {
  background: var(--surface-container-low);
  border: 2.5px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 130px;
  text-align: center;
  user-select: none;
}

.routine-choice-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow-level-1);
}

.routine-choice-card.locked {
  opacity: 0.35;
  pointer-events: none;
  transform: scale(0.95);
  border-color: #86efac;
}

.routine-choice-card.hint-highlight {
  border-color: #eab308 !important;
  animation: gentlePulse 0.9s ease-in-out infinite alternate;
}

.routine-choice-card .choice-icon {
  font-size: 3rem;
  line-height: 1;
}

.routine-choice-card .choice-label {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--on-surface);
}

/* --------------------------------------------------------------------------
   ENGINE 5: HARVEST COUNT GAME (Numeracy & Visual Discrimination)
   -------------------------------------------------------------------------- */
.game-harvest-canvas {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0;
}

.harvest-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.harvest-round-pill {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary);
  background: var(--surface-container-high);
  padding: 0.35rem 1.25rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--outline-variant);
}

.harvest-basket-box {
  width: 100%;
  background: linear-gradient(180deg, var(--surface-container-lowest) 0%, var(--surface-container-low) 100%);
  border: 3px solid #d97706;
  border-radius: var(--radius-2xl, 24px);
  padding: 1.5rem;
  box-shadow: var(--shadow-level-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.harvest-basket-rim {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.harvest-items-basket {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  min-height: 110px;
  padding: 0.75rem;
}

.harvest-basket-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  background: var(--surface-container);
  border: 2.5px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.harvest-basket-item:hover {
  transform: scale(1.08);
}

.harvest-item-icon {
  font-size: 3.2rem;
  line-height: 1;
}

.harvest-item-number-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #d97706;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  border: 2px solid #ffffff;
}

.harvest-basket-item.show-badge .harvest-item-number-badge {
  display: flex;
}

.harvest-basket-item.celebrating {
  animation: bloomPop 0.5s ease forwards;
}

.harvest-prompt-card {
  text-align: center;
  width: 100%;
}

.harvest-prompt-question {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--on-surface);
  margin: 0;
}

.harvest-choices-grid {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  flex-wrap: wrap;
}

.harvest-choice-card {
  background: var(--surface-container-lowest);
  border: 3px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1rem 2rem;
  min-width: 140px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.harvest-choice-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-level-2);
}

.harvest-choice-card .choice-num-val {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
}

.harvest-choice-card .choice-num-sub {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  margin-top: 0.25rem;
}

.harvest-choice-card.correct {
  background: #f0fdf4 !important;
  border-color: #16a34a !important;
  box-shadow: 0 0 20px rgba(22, 163, 74, 0.45) !important;
  pointer-events: none;
  animation: bloomPop 0.4s ease forwards;
}

.harvest-choice-card.hint-highlight {
  border-color: #eab308 !important;
  animation: gentlePulse 0.9s ease-in-out infinite alternate;
}

/* --------------------------------------------------------------------------
   ENGINE 6: NATURE HARMONY / ODD-ONE-OUT (Semantic Association)
   -------------------------------------------------------------------------- */
.game-harmony-canvas {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0;
}

.harmony-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
}

.harmony-round-pill {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary);
  background: var(--surface-container-high);
  padding: 0.35rem 1.25rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--outline-variant);
}

.harmony-prompt-card {
  text-align: center;
  width: 100%;
}

.harmony-prompt-question {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--on-surface);
  margin: 0;
}

.harmony-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  width: 100%;
}

.harmony-card {
  background: var(--surface-container-lowest);
  border: 3px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.5rem 1rem;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  text-align: center;
}

.harmony-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow-level-2);
}

.harmony-card .harmony-card-icon {
  font-size: 3.5rem;
  line-height: 1;
}

.harmony-card .harmony-card-label {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--on-surface);
}

.harmony-card.correct {
  background: #f0fdf4 !important;
  border-color: #16a34a !important;
  box-shadow: 0 0 20px rgba(22, 163, 74, 0.45) !important;
  pointer-events: none;
  animation: bloomPop 0.4s ease forwards;
}

.harmony-card.hint-highlight {
  border-color: #eab308 !important;
  animation: gentlePulse 0.9s ease-in-out infinite alternate;
}

/* --------------------------------------------------------------------------
   COMPLETION SCORE CARD
   -------------------------------------------------------------------------- */
.completion-score-card {
  background: var(--surface-container-high);
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin: 1.25rem 0;
  box-shadow: var(--shadow-sm);
}

.completion-stars-badge {
  font-size: 1.85rem;
  font-weight: 800;
  color: #ca8a04;
}

.completion-score-sub {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-top: 0.4rem;
}

/* ==========================================================================
   5.4 CAREGIVER DASHBOARD & VISUAL TIMELINE
   ========================================================================== */
.caregiver-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.caregiver-hero-bar {
  background: var(--surface-container-lowest);
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  box-shadow: var(--shadow-level-1);
}

.patient-live-pill {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.patient-avatar-thumb {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-full);
  background: var(--primary-fixed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  border: 2px solid var(--primary);
}

.patient-live-details h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--on-surface);
}

.patient-live-details p {
  font-size: 0.95rem;
  color: var(--on-surface-variant);
}

.caregiver-quick-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cg-btn {
  height: 48px;
  padding: 0 1.25rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  border: 1.5px solid var(--outline-variant);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  transition: var(--transition-smooth);
}

.cg-btn:hover {
  background: var(--surface-container-high);
}

.cg-btn.primary {
  background: var(--primary);
  color: #ffffff;
  border: none;
}

.cg-btn.primary:hover {
  background: var(--primary-container);
}

/* Overdue Alert Banner */
.overdue-alert-banner {
  background: #fffbeb;
  border: 2px solid #f59e0b;
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-level-1);
}

.overdue-alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.overdue-alert-header h4 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.overdue-time-badge {
  background: #fef3c7;
  color: #b45309;
  font-weight: 800;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1.5px solid #fcd34d;
}

.overdue-action-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Caregiver Dashboard 2-Column Grid */
.caregiver-dashboard-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .caregiver-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.cg-panel-card {
  background: var(--surface-container-lowest);
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: var(--shadow-level-1);
}

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

.cg-panel-header h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--on-surface);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Timeline Stream */
.timeline-stream {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  padding-left: 2rem;
}

.timeline-stream::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 14px;
  width: 3px;
  background: var(--outline-variant);
  border-radius: var(--radius-full);
}

.timeline-node {
  position: relative;
  background: var(--surface-container-low);
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.timeline-node::before {
  content: '';
  position: absolute;
  top: 14px;
  left: -2.35rem;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--secondary);
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 2px var(--outline-variant);
}

.timeline-node.completed::before {
  background: #10b981;
}

.timeline-node.overdue::before {
  background: #f59e0b;
}

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

.timeline-node-header strong {
  font-size: 1.1rem;
  color: var(--on-surface);
}

.timeline-node-sensor {
  font-size: 0.9rem;
  color: var(--on-surface-variant);
  background: rgba(255,255,255,0.7);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* Caregiver Notes Section */
.notes-input-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.notes-textarea {
  width: 100%;
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  font-family: var(--font-family);
  font-size: 1rem;
  resize: vertical;
  min-height: 80px;
  outline: none;
}

.notes-textarea:focus {
  border-color: var(--primary);
}

.note-tag-select {
  padding: 0.5rem;
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
}

.notes-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: 320px;
  overflow-y: auto;
}

.note-item-card {
  background: var(--surface-container-low);
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.note-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--on-surface-variant);
}

.note-tag-badge {
  background: var(--primary-fixed);
  color: var(--on-primary-fixed);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}

/* ==========================================================================
   CLINICAL & COMMUNITY HEALTH (ASHA / DOCTOR) HUB
   ========================================================================== */
.clinical-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.clinical-header-box {
  background: var(--inverse-surface);
  color: #ffffff;
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.clinical-title-grp h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
}

.clinical-title-grp p {
  font-size: 1rem;
  color: #94a3b8;
}

.clinical-nav-pills {
  display: flex;
  gap: 0.5rem;
  background: #1e293b;
  padding: 4px;
  border-radius: var(--radius-full);
}

.clin-tab-btn {
  border: none;
  background: transparent;
  color: #94a3b8;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.clin-tab-btn.active {
  background: #334155;
  color: #ffffff;
}

/* Mandatory Non-Diagnostic Clinical Banner */
.clinical-disclaimer-box {
  background: #f8fafc;
  border-left: 4px solid var(--secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  color: var(--on-surface-variant);
  line-height: 1.45;
}

/* Telemetry & Composite Score Cards */
.telemetry-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.score-metric-card {
  background: var(--surface-container-lowest);
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.score-metric-card .metric-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--on-surface-variant);
}

.score-metric-card .metric-val {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--primary);
}

.score-metric-card .metric-trend {
  font-size: 0.9rem;
  font-weight: 700;
  color: #059669;
}

/* Explainable AI Behavior Flags */
.behavior-flags-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.behavior-flag-card {
  background: var(--surface-container-lowest);
  border: 2px solid #f59e0b;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.behavior-flag-card.severity-alert {
  border-color: var(--error);
  background: #fff5f5;
}

.flag-header-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.flag-type-badge {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.flag-evidence-box {
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  font-size: 0.95rem;
  color: var(--on-surface);
}

.flag-evidence-box code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: #f1f5f9;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}

.human-review-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.review-action-btn {
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.85rem;
  border: 1.5px solid var(--outline-variant);
  background: #ffffff;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.review-action-btn:hover {
  background: var(--surface-container-high);
}

.review-action-btn.confirm {
  border-color: #10b981;
  color: #065f46;
}

.review-action-btn.dismiss {
  border-color: var(--outline);
  color: var(--outline);
}

/* Doctor Printable Report Preview */
.doctor-report-paper {
  background: #ffffff;
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: var(--shadow-level-1);
}

.report-header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid var(--outline-variant);
  padding-bottom: 1rem;
}

.report-section-block h4 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.5rem;
  border-bottom: 1.5px solid var(--outline-variant);
  padding-bottom: 0.35rem;
}

/* Simplified ASHA / Community Health Worker Action View (FR-9.15) */
.asha-action-card {
  background: #eff6ff;
  border: 2px solid #3b82f6;
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.asha-action-card h3 {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: #1d4ed8;
}

.asha-priority-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.asha-priority-item {
  background: #ffffff;
  border: 1.5px solid #bfdbfe;
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ==========================================================================
   MODALS & OVERLAYS
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(21, 28, 35, 0.6);
  backdrop-filter: blur(6px);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay.active-modal {
  display: flex;
}

.modal-window {
  background: var(--surface-container-lowest);
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  max-width: 560px;
  width: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: var(--shadow-modal);
  max-height: 90vh;
  overflow-y: auto;
}

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

.modal-header h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--on-surface);
}

.modal-close-btn {
  background: transparent;
  border: none;
  font-size: 1.75rem;
  cursor: pointer;
  color: var(--on-surface-variant);
}

/* Form Styles */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-weight: 700;
  font-size: 1rem;
  color: var(--on-surface);
}

.form-input, .form-select {
  height: 48px;
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 0 1rem;
  font-family: var(--font-family);
  font-size: 1rem;
  outline: none;
}

.form-input:focus, .form-select:focus {
  border-color: var(--primary);
}

/* Emergency Banner */
.emergency-trigger-btn {
  background: var(--error);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-full);
  padding: 0.5rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(186, 26, 26, 0.25);
  transition: var(--transition-smooth);
}

.emergency-trigger-btn:hover {
  background: #93000a;
}

/* Toast Notification */
.toast-notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--inverse-surface);
  color: #ffffff;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  box-shadow: var(--shadow-modal);
  z-index: 1000;
  display: none;
  align-items: center;
  gap: 0.75rem;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
}

/* Responsive adjustments for Tablets, Mobile & Phone Screens */
@media (max-width: 680px) {
  /* Layout containers */
  .patient-container,
  .caregiver-container,
  .clinical-container,
  .login-container {
    padding: 0.85rem;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Header & Navigation */
  .global-header {
    flex-direction: column;
    align-items: stretch;
    padding: 0.65rem 0.85rem;
    gap: 0.65rem;
  }

  .system-status-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
  }

  .lang-selector {
    max-width: 130px;
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
  }

  .role-switcher-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Gateway / Login Screen */
  .gateway-hero {
    margin: 1rem 0 1.5rem;
  }

  .gateway-hero h1 {
    font-size: 1.75rem;
  }

  .gateway-hero p {
    font-size: 1rem;
  }

  .gateway-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .gateway-profile-card {
    padding: 1.25rem 1rem;
  }

  /* Orientation Anchor Bar */
  .orientation-anchor-bar {
    padding: 1.15rem 1rem;
    border-radius: var(--radius-lg);
    gap: 0.65rem;
  }

  .orientation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .orientation-greeting {
    font-size: 1.55rem;
    line-height: 1.25;
  }

  .orientation-date {
    font-size: 1.15rem;
  }

  .listen-day-btn {
    height: 52px;
    font-size: 1.1rem;
    padding: 0 1rem;
    text-align: center;
  }

  /* Senior Reminder Card */
  .single-routine-prominent-card {
    padding: 1.25rem 1rem;
    border-radius: var(--radius-lg);
    gap: 1rem;
  }

  .routine-visual-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .routine-title-box h2 {
    font-size: 1.6rem;
  }

  .routine-title-box p {
    font-size: 1.15rem;
  }

  .pill-spec-cards-row {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .take-med-big-btn {
    height: auto;
    min-height: 56px;
    padding: 0.85rem 1rem;
    font-size: 1.2rem;
    white-space: normal;
    text-align: center;
    justify-content: center;
    width: 100%;
  }

  /* Secondary Patient Action Cards (Games, Mood, Calls) */
  .secondary-patient-card {
    flex-direction: column;
    align-items: stretch;
    padding: 1.15rem 1rem;
    border-radius: var(--radius-lg);
    gap: 0.85rem;
  }

  .secondary-card-info {
    gap: 0.85rem;
  }

  .secondary-card-icon {
    font-size: 2.2rem;
  }

  .secondary-card-text h3 {
    font-size: 1.35rem;
  }

  .secondary-card-text p {
    font-size: 1.05rem;
  }

  .secondary-patient-btn {
    width: 100%;
    justify-content: center;
    height: 52px;
    font-size: 1.15rem;
  }

  /* Modals & Full-Screen Takeovers */
  .modal-window {
    padding: 1.25rem 1rem;
    border-radius: var(--radius-lg);
    width: 95%;
    max-width: 100%;
    margin: auto;
    max-height: 94vh;
    gap: 1rem;
  }

  .attention-card {
    padding: 1.5rem 1rem;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 100%;
  }

  .attention-actions-row {
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
  }

  .attention-action-btn {
    width: 100%;
    justify-content: center;
  }

  .game-fullscreen-takeover {
    padding: 0.85rem;
  }

  .memory-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
  }

  .attention-garden-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .routine-slots-grid,
  .routine-choices-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .harvest-basket-box {
    padding: 1rem 0.75rem;
  }

  .harvest-items-basket {
    gap: 0.75rem;
  }

  .harvest-basket-item {
    width: 68px;
    height: 68px;
  }

  .harvest-item-icon {
    font-size: 2.5rem;
  }

  .harvest-choices-grid {
    gap: 0.75rem;
  }

  .harvest-choice-card {
    min-width: 90px;
    padding: 0.75rem 1.25rem;
    flex: 1;
  }

  .harvest-choice-card .choice-num-val {
    font-size: 2.2rem;
  }

  .harmony-options-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .harmony-card {
    min-height: 120px;
    padding: 1rem 0.5rem;
  }

  .harmony-card .harmony-card-icon {
    font-size: 2.8rem;
  }

  .harmony-card .harmony-card-label {
    font-size: 1.05rem;
  }

  /* Caregiver & Clinical Dashboard Mobile */
  .cg-tabs-bar,
  .clin-tabs-bar {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.4rem;
    padding-bottom: 4px;
  }

  .cg-tab-btn,
  .clin-tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
  }

  .caregiver-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .trends-chart-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .trends-svg-canvas {
    width: 100%;
    min-width: 280px;
    height: auto;
  }

  .overdue-action-row {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  .overdue-action-row button {
    width: 100%;
    justify-content: center;
  }

  .settings-option-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .settings-option-row .form-select,
  .settings-option-row input[type="time"] {
    width: 100% !important;
  }

  .telemed-handoff-card {
    padding: 1.25rem 1rem;
  }

  .doctor-report-paper {
    padding: 1.25rem 1rem;
  }
}

/* ==========================================================================
   DESIGN.MD SPECIFICATION ENHANCEMENTS
   ========================================================================== */

/* 2.1 Patient Typography Floor & Rules */
.patient-container {
  font-size: 20pt;
  line-height: 1.6;
  max-width: 840px;
}

.patient-container * {
  text-transform: none !important;
}

.patient-container button,
.patient-container [role="button"],
.attention-action-btn,
.game-category-tile {
  min-height: 48px;
  min-width: 48px;
}

/* ==========================================================================
   FONT SCALING SYSTEM (PRD FR-9.7, design.md Section 2.1 & 6.2)
   3-Tier Proportional Scaling for Senior Patient Space & Senior Modals:
   - Normal: 100% (20pt base floor)
   - Large:  120% (+20% / 24pt base floor)
   - Extra Large: 140% (+40% / 28pt base floor)
   ========================================================================== */

/* Quick Cycle Pill in Orientation Bar */
.patient-font-pill {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.85rem;
  font-size: 1.05rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.patient-font-pill:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

body.dark-mode .patient-font-pill {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

body.high-contrast-mode .patient-font-pill {
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  font-weight: 800 !important;
}

body.high-contrast-mode.high-contrast-dark .patient-font-pill {
  background: #000000 !important;
  color: #ffffff !important;
  border: 3px solid #ffffff !important;
}

/* Scaling Rules: Proportional scaling across Senior Space & Senior Modals */
body.font-scale-normal .patient-container,
body.font-scale-normal .reminder-attention-takeover .attention-card,
body.font-scale-normal #gamesHubModal .modal-window,
body.font-scale-normal #gameModal .game-fullscreen-takeover,
body.font-scale-normal #moodModal .modal-window,
body.font-scale-normal #callModal .modal-window {
  zoom: 1;
}

body.font-scale-large .patient-container,
body.font-scale-large .reminder-attention-takeover .attention-card,
body.font-scale-large #gamesHubModal .modal-window,
body.font-scale-large #gameModal .game-fullscreen-takeover,
body.font-scale-large #moodModal .modal-window,
body.font-scale-large #callModal .modal-window {
  zoom: 1.2;
}

body.font-scale-xlarge .patient-container,
body.font-scale-xlarge .reminder-attention-takeover .attention-card,
body.font-scale-xlarge #gamesHubModal .modal-window,
body.font-scale-xlarge #gameModal .game-fullscreen-takeover,
body.font-scale-xlarge #moodModal .modal-window,
body.font-scale-xlarge #callModal .modal-window {
  zoom: 1.4;
}

/* ==========================================================================
   SEMANTIC HELPER CLASSES FOR THEME ADAPTATION
   ========================================================================== */
.profile-avatar-circle.avatar-caregiver {
  background: #dbeafe;
  border-color: #3b82f6;
}

.profile-avatar-circle.avatar-clinical {
  background: #e2e8f0;
  border-color: #64748b;
}

.pill-illustration-svg {
  background: #e8dfd8;
  border-radius: 16px;
}

.reminder-pill-svg {
  background: #e8dfd8;
  border-radius: 12px;
}

.trends-svg-canvas {
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.telemed-handoff-card {
  background: #f0fdf4;
  border-color: #86efac;
}

.asha-status-cue-box {
  background: #eff6ff;
  border: 2px solid #3b82f6;
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
}

.play-btn-attention {
  background: #0284c7 !important;
}

.play-btn-language {
  background: #059669 !important;
}

.play-btn-routine {
  background: #7c3aed !important;
}

.play-btn-harvest {
  background: #d97706 !important;
}

.play-btn-harmony {
  background: #15803d !important;
}

.mood-cg-assisted-box {
  background: #f8fafc;
  border: 1.5px solid var(--outline-variant);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.shared-device-switch-box {
  margin-top: 1.5rem;
  background: #f8fafc;
  border: 1.5px solid var(--outline-variant);
  border-radius: 12px;
  padding: 1.25rem;
}

.consent-warning-box {
  background: #fefce8;
  border: 2px solid #fde047;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.consent-explanation-box {
  font-size: 1.1rem;
  color: var(--on-surface);
  line-height: 1.5;
  background: #f0fdf4;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.emergency-confirm-btn {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}

.colorblind-preview-box {
  background: #f8fafc;
  border: 1.5px solid var(--outline-variant);
  border-radius: 10px;
  padding: 0.85rem 1.15rem;
  margin-bottom: 1.25rem;
  transition: var(--transition-smooth);
}

.cb-preview-chip {
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cb-preview-chip.chip-completed {
  background: var(--mint-badge);
  color: var(--mint-badge-text);
  border-color: #6ee7b7;
}

.cb-preview-chip.chip-pending {
  background: var(--secondary-fixed);
  color: var(--on-secondary-fixed);
  border-color: #93c5fd;
}

.cb-preview-chip.chip-alert {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

.emerg-notice-box {
  color: #7f1d1d;
  background: #fee2e2;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #fca5a5;
}

.emerg-contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
}

.emerg-contact-sub {
  font-size: 0.85rem;
  color: #64748b;
}

.overdue-desc {
  color: #78350f;
}

.consent-step3-title {
  color: #b45309;
}

.consent-step3-notice {
  color: #713f12;
}

/* ==========================================================================
   HIGH CONTRAST THEME (WCAG AAA Compliant — Stark Light & Midnight Dark)
   Principle: Pure black & white (21:1 contrast ratio), 3px solid borders,
   zero blur, zero gradients, distinct shape & line patterns.
   ========================================================================== */
body.high-contrast-mode,
body.high-contrast {
  --surface: #ffffff !important;
  --on-surface: #000000 !important;
  --surface-dim: #ffffff !important;
  --surface-bright: #ffffff !important;
  --surface-container-lowest: #ffffff !important;
  --surface-container-low: #ffffff !important;
  --surface-container: #ffffff !important;
  --surface-container-high: #ffffff !important;
  --surface-container-highest: #ffffff !important;
  --on-surface-variant: #000000 !important;
  --outline: #000000 !important;
  --outline-variant: #000000 !important;
  --primary: #000000 !important;
  --on-primary: #ffffff !important;
  --primary-container: #000000 !important;
  --on-primary-container: #ffffff !important;
  --secondary: #000000 !important;
  --on-secondary: #ffffff !important;
  --tertiary: #000000 !important;
  --on-tertiary: #ffffff !important;
  --mint-badge: #ffffff !important;
  --mint-badge-text: #000000 !important;
  --amber-badge: #ffffff !important;
  --amber-badge-text: #000000 !important;
  --blue-badge: #ffffff !important;
  --blue-badge-text: #000000 !important;
  background: #ffffff !important;
  color: #000000 !important;
}

body.high-contrast-mode *,
body.high-contrast * {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Stark Light Borders & Surfaces */
body.high-contrast-mode .patient-container,
body.high-contrast-mode .caregiver-container,
body.high-contrast-mode .clinical-container,
body.high-contrast-mode .login-container,
body.high-contrast-mode .login-screen-wrapper,
body.high-contrast-mode .modal-window,
body.high-contrast-mode .attention-card,
body.high-contrast-mode .current-routine-card,
body.high-contrast-mode .cg-panel-card,
body.high-contrast-mode .role-login-card,
body.high-contrast-mode .game-category-tile,
body.high-contrast-mode .photo-card,
body.high-contrast-mode .harvest-basket-box,
body.high-contrast-mode .harvest-basket-item,
body.high-contrast-mode .harvest-choice-card,
body.high-contrast-mode .harmony-card,
body.high-contrast-mode .patient-action-tile,
body.high-contrast-mode .single-routine-prominent-card,
body.high-contrast-mode .secondary-patient-card,
body.high-contrast-mode .global-header,
body.high-contrast-mode .doctor-report-paper,
body.high-contrast-mode .asha-action-card,
body.high-contrast-mode .score-metric-card,
body.high-contrast-mode .behavior-flag-card,
body.high-contrast-mode .flag-evidence-box,
body.high-contrast-mode .timeline-node,
body.high-contrast-mode .note-item-card,
body.high-contrast-mode .care-team-card,
body.high-contrast-mode .pack-switch-bar,
body.high-contrast-mode .schedule-config-box,
body.high-contrast-mode .colorblind-preview-box,
body.high-contrast-mode .mood-cg-assisted-box,
body.high-contrast-mode .shared-device-switch-box,
body.high-contrast-mode .consent-warning-box,
body.high-contrast-mode .consent-explanation-box,
body.high-contrast-mode .asha-status-cue-box,
body.high-contrast-mode .telemed-handoff-card,
body.high-contrast-mode .overdue-alert-banner,
body.high-contrast-mode .pill-illustration-svg,
body.high-contrast-mode .reminder-pill-svg,
body.high-contrast-mode .trends-svg-canvas,
body.high-contrast-mode .authenticated-role-badge,
body.high-contrast-mode .brand-badge,
body.high-contrast-mode .emerg-notice-box,
body.high-contrast-mode .emerg-contact-row {
  border: 3px solid #000000 !important;
  background: #ffffff !important;
  color: #000000 !important;
}

body.high-contrast-mode .emerg-contact-sub,
body.high-contrast-mode .overdue-desc,
body.high-contrast-mode .consent-step3-title,
body.high-contrast-mode .consent-step3-notice {
  color: #000000 !important;
}

/* Contrast Focus Indicator */
body.high-contrast-mode :focus,
body.high-contrast :focus {
  outline: 4px solid #000000 !important;
  outline-offset: 3px !important;
}

/* Interactive Buttons */
body.high-contrast-mode button,
body.high-contrast-mode .take-med-big-btn,
body.high-contrast-mode .attention-action-btn.btn-done,
body.high-contrast-mode .profile-action-btn.primary-btn,
body.high-contrast-mode .cg-btn.primary,
body.high-contrast-mode .tile-action-button.play-btn,
body.high-contrast-mode .emergency-confirm-btn {
  background: #000000 !important;
  color: #ffffff !important;
  border: 3px solid #000000 !important;
  font-weight: 800 !important;
}

body.high-contrast-mode .attention-action-btn.btn-snooze,
body.high-contrast-mode .attention-action-btn.btn-help,
body.high-contrast-mode .cg-btn,
body.high-contrast-mode .secondary-patient-btn,
body.high-contrast-mode .profile-action-btn.secondary-btn,
body.high-contrast-mode .review-action-btn,
body.high-contrast-mode .checklist-action-btn,
body.high-contrast-mode .status-pill,
body.high-contrast-mode .emergency-trigger-btn,
body.high-contrast-mode .caregiver-gate-subtle-btn,
body.high-contrast-mode .logout-action-btn {
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  font-weight: 700 !important;
}

body.high-contrast-mode button:hover,
body.high-contrast-mode .cg-btn:hover,
body.high-contrast-mode .review-action-btn:hover,
body.high-contrast-mode .checklist-action-btn:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast-mode .cg-btn.primary:hover,
body.high-contrast-mode .take-med-big-btn:hover {
  background: #ffff00 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* Tabs & Highlighted Selectors */
body.high-contrast-mode .cg-tab-btn,
body.high-contrast-mode .clin-tab-btn,
body.high-contrast-mode .timeframe-pill,
body.high-contrast-mode .channel-tab-pill {
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  font-weight: 700 !important;
}

body.high-contrast-mode .cg-tab-btn.active,
body.high-contrast-mode .clin-tab-btn.active,
body.high-contrast-mode .timeframe-pill.active,
body.high-contrast-mode .channel-tab-pill.active,
body.high-contrast-mode .game-category-tile.active-category,
body.high-contrast-mode .mood-btn.selected {
  background: #ffff00 !important;
  color: #000000 !important;
  border: 4px solid #000000 !important;
  font-weight: 800 !important;
}

/* Status Badges & Pills */
body.high-contrast-mode .routine-status-pill,
body.high-contrast-mode .schedule-status-badge,
body.high-contrast-mode .cb-preview-chip,
body.high-contrast-mode .flag-type-badge,
body.high-contrast-mode .patient-score-pill,
body.high-contrast-mode .patient-game-score-badge,
body.high-contrast-mode .attention-target-banner,
body.high-contrast-mode .spec-badge {
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  font-weight: 800 !important;
}

body.high-contrast-mode .patient-score-pill strong,
body.high-contrast-mode .patient-game-score-badge .score-text-group strong,
body.high-contrast-mode .patient-game-score-badge .score-text-group span {
  color: #000000 !important;
  font-weight: 900 !important;
}

body.high-contrast-mode.high-contrast-dark .patient-score-pill,
body.high-contrast-mode.high-contrast-dark .patient-game-score-badge {
  background: #000000 !important;
  color: #ffffff !important;
  border: 3px solid #ffffff !important;
}

body.high-contrast-mode.high-contrast-dark .patient-score-pill strong,
body.high-contrast-mode.high-contrast-dark .patient-game-score-badge .score-text-group strong,
body.high-contrast-mode.high-contrast-dark .patient-game-score-badge .score-text-group span {
  color: #ffffff !important;
  font-weight: 900 !important;
}

body.high-contrast-mode .routine-status-pill.done-badge,
body.high-contrast-mode .schedule-status-badge.active,
body.high-contrast-mode .cb-preview-chip.chip-completed {
  background: #ffff00 !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
}

body.high-contrast-mode .overdue-alert-banner,
body.high-contrast-mode .behavior-flag-card.severity-alert,
body.high-contrast-mode .cb-preview-chip.chip-alert {
  background: #ffffff !important;
  color: #000000 !important;
  border: 4px solid #000000 !important;
}

/* Inputs & Form Fields */
body.high-contrast-mode .form-input,
body.high-contrast-mode .form-select,
body.high-contrast-mode .notes-textarea,
body.high-contrast-mode .pin-input-field,
body.high-contrast-mode .lang-selector {
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  font-weight: 700 !important;
}

body.high-contrast-mode .form-input:focus,
body.high-contrast-mode .form-select:focus,
body.high-contrast-mode .notes-textarea:focus,
body.high-contrast-mode .pin-input-field:focus {
  border-color: #000000 !important;
  outline: 4px solid #000000 !important;
}

/* Toggle Switches */
body.high-contrast-mode .toggle-switch .toggle-slider {
  background: #ffffff !important;
  border: 3px solid #000000 !important;
}

body.high-contrast-mode .toggle-switch input:checked + .toggle-slider {
  background: #000000 !important;
}

body.high-contrast-mode .toggle-switch .toggle-slider:before {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
}

body.high-contrast-mode .toggle-switch input:checked + .toggle-slider:before {
  background: #ffff00 !important;
  border: 2px solid #000000 !important;
}

/* Cognitive Game Takeover */
body.high-contrast-mode .game-fullscreen-takeover {
  background: #ffffff !important;
}

body.high-contrast-mode .flower-tile,
body.high-contrast-mode .language-prompt-card,
body.high-contrast-mode .language-option-card,
body.high-contrast-mode .routine-slot,
body.high-contrast-mode .routine-choice-card,
body.high-contrast-mode .completion-score-card,
body.high-contrast-mode .game-exit-btn {
  border: 3px solid #000000 !important;
  background: #ffffff !important;
  color: #000000 !important;
}

body.high-contrast-mode .flower-tile.bloomed-target,
body.high-contrast-mode .language-option-card.correct,
body.high-contrast-mode .routine-slot.filled,
body.high-contrast-mode .photo-card.matched,
body.high-contrast-mode .harvest-choice-card.correct,
body.high-contrast-mode .harmony-card.correct {
  border: 4px solid #000000 !important;
  background: #ffff00 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* Trends Chart SVG in High Contrast */
body.high-contrast-mode .trends-chart-container svg,
body.high-contrast-mode .trends-svg-canvas {
  background: #ffffff !important;
  border: 3px solid #000000 !important;
}

body.high-contrast-mode .trends-chart-container svg line,
body.high-contrast-mode .trends-svg-canvas line {
  stroke: #000000 !important;
  stroke-dasharray: 4,4 !important;
  stroke-width: 1.5px !important;
}

body.high-contrast-mode .trends-chart-container svg text,
body.high-contrast-mode .trends-svg-canvas text {
  fill: #000000 !important;
  font-weight: 800 !important;
}

body.high-contrast-mode .trends-chart-container svg polyline:first-of-type,
body.high-contrast-mode .trends-svg-canvas polyline:first-of-type {
  stroke: #000000 !important;
  stroke-width: 4px !important;
}

body.high-contrast-mode .trends-chart-container svg polyline:last-of-type,
body.high-contrast-mode .trends-svg-canvas polyline:last-of-type {
  stroke: #000000 !important;
  stroke-width: 3.5px !important;
  stroke-dasharray: 8,6 !important;
}

body.high-contrast-mode .trends-chart-container svg circle,
body.high-contrast-mode .trends-svg-canvas circle {
  fill: #000000 !important;
  stroke: #ffffff !important;
  stroke-width: 2px !important;
}

/* ==========================================================================
   HIGH CONTRAST MIDNIGHT DARK VARIANT (WCAG AAA Low-Glare White on Black)
   ========================================================================== */
body.high-contrast-mode.high-contrast-dark {
  --surface: #000000 !important;
  --on-surface: #ffffff !important;
  --surface-dim: #000000 !important;
  --surface-bright: #000000 !important;
  --surface-container-lowest: #000000 !important;
  --surface-container-low: #000000 !important;
  --surface-container: #000000 !important;
  --surface-container-high: #000000 !important;
  --surface-container-highest: #000000 !important;
  --on-surface-variant: #ffffff !important;
  --outline: #ffffff !important;
  --outline-variant: #ffffff !important;
  --primary: #ffffff !important;
  --on-primary: #000000 !important;
  background: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast-mode.high-contrast-dark .patient-container,
body.high-contrast-mode.high-contrast-dark .caregiver-container,
body.high-contrast-mode.high-contrast-dark .clinical-container,
body.high-contrast-mode.high-contrast-dark .login-container,
body.high-contrast-mode.high-contrast-dark .login-screen-wrapper,
body.high-contrast-mode.high-contrast-dark .modal-window,
body.high-contrast-mode.high-contrast-dark .attention-card,
body.high-contrast-mode.high-contrast-dark .current-routine-card,
body.high-contrast-mode.high-contrast-dark .cg-panel-card,
body.high-contrast-mode.high-contrast-dark .role-login-card,
body.high-contrast-mode.high-contrast-dark .game-category-tile,
body.high-contrast-mode.high-contrast-dark .photo-card,
body.high-contrast-mode.high-contrast-dark .patient-action-tile,
body.high-contrast-mode.high-contrast-dark .single-routine-prominent-card,
body.high-contrast-mode.high-contrast-dark .secondary-patient-card,
body.high-contrast-mode.high-contrast-dark .global-header,
body.high-contrast-mode.high-contrast-dark .doctor-report-paper,
body.high-contrast-mode.high-contrast-dark .asha-action-card,
body.high-contrast-mode.high-contrast-dark .score-metric-card,
body.high-contrast-mode.high-contrast-dark .behavior-flag-card,
body.high-contrast-mode.high-contrast-dark .flag-evidence-box,
body.high-contrast-mode.high-contrast-dark .timeline-node,
body.high-contrast-mode.high-contrast-dark .note-item-card,
body.high-contrast-mode.high-contrast-dark .care-team-card,
body.high-contrast-mode.high-contrast-dark .pack-switch-bar,
body.high-contrast-mode.high-contrast-dark .schedule-config-box,
body.high-contrast-mode.high-contrast-dark .colorblind-preview-box,
body.high-contrast-mode.high-contrast-dark .mood-cg-assisted-box,
body.high-contrast-mode.high-contrast-dark .shared-device-switch-box,
body.high-contrast-mode.high-contrast-dark .consent-warning-box,
body.high-contrast-mode.high-contrast-dark .consent-explanation-box,
body.high-contrast-mode.high-contrast-dark .asha-status-cue-box,
body.high-contrast-mode.high-contrast-dark .telemed-handoff-card,
body.high-contrast-mode.high-contrast-dark .overdue-alert-banner,
body.high-contrast-mode.high-contrast-dark .pill-illustration-svg,
body.high-contrast-mode.high-contrast-dark .reminder-pill-svg,
body.high-contrast-mode.high-contrast-dark .trends-svg-canvas,
body.high-contrast-mode.high-contrast-dark .authenticated-role-badge,
body.high-contrast-mode.high-contrast-dark .brand-badge,
body.high-contrast-mode.high-contrast-dark .emerg-notice-box,
body.high-contrast-mode.high-contrast-dark .emerg-contact-row {
  border: 3px solid #ffffff !important;
  background: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast-mode.high-contrast-dark .emerg-contact-sub,
body.high-contrast-mode.high-contrast-dark .overdue-desc,
body.high-contrast-mode.high-contrast-dark .consent-step3-title,
body.high-contrast-mode.high-contrast-dark .consent-step3-notice {
  color: #ffffff !important;
}

body.high-contrast-mode.high-contrast-dark :focus {
  outline: 4px solid #ffff00 !important;
  outline-offset: 3px !important;
}

body.high-contrast-mode.high-contrast-dark button,
body.high-contrast-mode.high-contrast-dark .take-med-big-btn,
body.high-contrast-mode.high-contrast-dark .attention-action-btn.btn-done,
body.high-contrast-mode.high-contrast-dark .profile-action-btn.primary-btn,
body.high-contrast-mode.high-contrast-dark .cg-btn.primary,
body.high-contrast-mode.high-contrast-dark .tile-action-button.play-btn,
body.high-contrast-mode.high-contrast-dark .emergency-confirm-btn {
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #ffffff !important;
}

body.high-contrast-mode.high-contrast-dark .attention-action-btn.btn-snooze,
body.high-contrast-mode.high-contrast-dark .attention-action-btn.btn-help,
body.high-contrast-mode.high-contrast-dark .cg-btn,
body.high-contrast-mode.high-contrast-dark .secondary-patient-btn,
body.high-contrast-mode.high-contrast-dark .profile-action-btn.secondary-btn,
body.high-contrast-mode.high-contrast-dark .review-action-btn,
body.high-contrast-mode.high-contrast-dark .checklist-action-btn,
body.high-contrast-mode.high-contrast-dark .status-pill,
body.high-contrast-mode.high-contrast-dark .emergency-trigger-btn,
body.high-contrast-mode.high-contrast-dark .caregiver-gate-subtle-btn,
body.high-contrast-mode.high-contrast-dark .logout-action-btn {
  background: #000000 !important;
  color: #ffffff !important;
  border: 3px solid #ffffff !important;
}

body.high-contrast-mode.high-contrast-dark .cg-tab-btn.active,
body.high-contrast-mode.high-contrast-dark .clin-tab-btn.active,
body.high-contrast-mode.high-contrast-dark .timeframe-pill.active,
body.high-contrast-mode.high-contrast-dark .channel-tab-pill.active,
body.high-contrast-mode.high-contrast-dark .game-category-tile.active-category,
body.high-contrast-mode.high-contrast-dark .flower-tile.bloomed-target,
body.high-contrast-mode.high-contrast-dark .language-option-card.correct,
body.high-contrast-mode.high-contrast-dark .routine-slot.filled,
body.high-contrast-mode.high-contrast-dark .photo-card.matched,
body.high-contrast-mode.high-contrast-dark .harvest-choice-card.correct,
body.high-contrast-mode.high-contrast-dark .harmony-card.correct,
body.high-contrast-mode.high-contrast-dark .mood-btn.selected {
  background: #ffff00 !important;
  color: #000000 !important;
  border: 4px solid #ffffff !important;
}

body.high-contrast-mode.high-contrast-dark .form-input,
body.high-contrast-mode.high-contrast-dark .form-select,
body.high-contrast-mode.high-contrast-dark .notes-textarea,
body.high-contrast-mode.high-contrast-dark .pin-input-field,
body.high-contrast-mode.high-contrast-dark .lang-selector {
  background: #000000 !important;
  color: #ffffff !important;
  border: 3px solid #ffffff !important;
}

body.high-contrast-mode.high-contrast-dark .game-fullscreen-takeover {
  background: #000000 !important;
}

body.high-contrast-mode.high-contrast-dark .trends-chart-container svg,
body.high-contrast-mode.high-contrast-dark .trends-svg-canvas {
  background: #000000 !important;
  border: 3px solid #ffffff !important;
}

body.high-contrast-mode.high-contrast-dark .trends-chart-container svg line,
body.high-contrast-mode.high-contrast-dark .trends-svg-canvas line {
  stroke: #ffffff !important;
}

body.high-contrast-mode.high-contrast-dark .trends-chart-container svg text,
body.high-contrast-mode.high-contrast-dark .trends-svg-canvas text {
  fill: #ffffff !important;
}

body.high-contrast-mode.high-contrast-dark .trends-chart-container svg polyline,
body.high-contrast-mode.high-contrast-dark .trends-svg-canvas polyline {
  stroke: #ffffff !important;
}

body.high-contrast-mode.high-contrast-dark .trends-chart-container svg circle,
body.high-contrast-mode.high-contrast-dark .trends-svg-canvas circle {
  fill: #ffffff !important;
  stroke: #000000 !important;
}

/* ==========================================================================
   DARK MODE THEME (Calm Night / Reduced Glare Palette)
   ========================================================================== */
body.dark-mode {
  --surface: #0b1329 !important;
  --surface-dim: #070c1a !important;
  --surface-bright: #16203d !important;
  --surface-container-lowest: #0d1730 !important;
  --surface-container-low: #111e3e !important;
  --surface-container: #16254c !important;
  --surface-container-high: #1e3164 !important;
  --surface-container-highest: #283f7d !important;
  --on-surface: #f1f5f9 !important;
  --on-surface-variant: #94a3b8 !important;
  --inverse-surface: #f8fafc !important;
  --inverse-on-surface: #0b1329 !important;
  --outline: #475569 !important;
  --outline-variant: #1e293b !important;
  --surface-tint: #34d399 !important;

  --primary: #10b981 !important;
  --on-primary: #064e3b !important;
  --primary-container: #065f46 !important;
  --on-primary-container: #a7f3d0 !important;

  --secondary: #60a5fa !important;
  --on-secondary: #1e3a8a !important;
  --secondary-container: #1e40af !important;
  --on-secondary-container: #dbeafe !important;

  --tertiary: #fb923c !important;
  --on-tertiary: #7c2d12 !important;
  --tertiary-container: #9a3412 !important;
  --on-tertiary-container: #ffedd5 !important;

  --mint-badge: #064e3b !important;
  --mint-badge-text: #6ee7b7 !important;
  --amber-badge: #78350f !important;
  --amber-badge-text: #fde68a !important;
  --blue-badge: #1e3a8a !important;
  --blue-badge-text: #93c5fd !important;

  background-color: #0b1329 !important;
  color: #f1f5f9 !important;
}

body.dark-mode .global-header {
  background: #080f21 !important;
  border-bottom: 1.5px solid #1e293b !important;
  color: #f1f5f9 !important;
}

body.dark-mode .patient-container,
body.dark-mode .caregiver-container,
body.dark-mode .clinical-container,
body.dark-mode .login-container {
  color: #f1f5f9 !important;
}

body.dark-mode .role-login-card,
body.dark-mode .cg-panel-card,
body.dark-mode .modal-window,
body.dark-mode .attention-card,
body.dark-mode .single-routine-prominent-card,
body.dark-mode .secondary-patient-card,
body.dark-mode .game-category-tile,
body.dark-mode .patient-action-tile,
body.dark-mode .doctor-report-paper,
body.dark-mode .asha-action-card,
body.dark-mode .score-metric-card,
body.dark-mode .pack-switch-bar,
body.dark-mode .game-category-tile.active-category {
  background: #111e3e !important;
  color: #f1f5f9 !important;
  border-color: #1e3164 !important;
}

body.dark-mode .profile-avatar-circle.avatar-caregiver {
  background: #1e3a8a !important;
  border-color: #60a5fa !important;
}

body.dark-mode .profile-avatar-circle.avatar-clinical {
  background: #1e293b !important;
  border-color: #94a3b8 !important;
}

body.dark-mode .pill-illustration-svg,
body.dark-mode .reminder-pill-svg {
  background: #16254c !important;
}

body.dark-mode .trends-svg-canvas {
  background: #080f21 !important;
  border-color: #1e3164 !important;
}

body.dark-mode .telemed-handoff-card {
  background: #064e3b !important;
  border-color: #059669 !important;
}

body.dark-mode .telemed-handoff-card h3,
body.dark-mode .telemed-handoff-card p {
  color: #ecfdf5 !important;
}

body.dark-mode .asha-status-cue-box {
  background: #0d1e3d !important;
  border-color: #2563eb !important;
}

body.dark-mode .asha-status-cue-box div:first-child {
  color: #93c5fd !important;
}

body.dark-mode .asha-status-cue-box div:last-child {
  color: #34d399 !important;
}

body.dark-mode .mood-cg-assisted-box,
body.dark-mode .shared-device-switch-box,
body.dark-mode .colorblind-preview-box {
  background: #0d1730 !important;
  border-color: #1e3164 !important;
  color: #f1f5f9 !important;
}

body.dark-mode .consent-warning-box {
  background: #451a03 !important;
  border-color: #b45309 !important;
  color: #fef08a !important;
}

body.dark-mode .consent-warning-box p,
body.dark-mode .consent-warning-box span {
  color: #fef08a !important;
}

body.dark-mode .consent-explanation-box {
  background: #064e3b !important;
  color: #ecfdf5 !important;
}

body.dark-mode .emerg-notice-box {
  background: #3f1212 !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

body.dark-mode .emerg-contact-row {
  background: #0d1730 !important;
  border-color: #1e3164 !important;
  color: #f1f5f9 !important;
}

body.dark-mode .emerg-contact-sub {
  color: #94a3b8 !important;
}

body.dark-mode .overdue-desc {
  color: #fed7aa !important;
}

body.dark-mode .consent-step3-title {
  color: #fde68a !important;
}

body.dark-mode .consent-step3-notice {
  color: #fef08a !important;
}

body.dark-mode .routine-card.completed {
  background: #064e3b !important;
  border-color: #10b981 !important;
}

body.dark-mode .routine-card.active {
  background: #111e3e !important;
  border-color: #34d399 !important;
}

body.dark-mode .behavior-flag-card {
  background: #111e3e !important;
  border-color: #b45309 !important;
  color: #f1f5f9 !important;
}

body.dark-mode .behavior-flag-card.severity-alert {
  background: #3f1212 !important;
  border-color: #ef4444 !important;
}

body.dark-mode .flag-evidence-box {
  background: #0d1730 !important;
  border-color: #1e3164 !important;
  color: #f1f5f9 !important;
}

body.dark-mode .flag-evidence-box code {
  background: #1e293b !important;
  color: #6ee7b7 !important;
}

body.dark-mode .review-action-btn {
  background: #16254c !important;
  color: #f1f5f9 !important;
  border-color: #283f7d !important;
}

body.dark-mode .review-action-btn:hover {
  background: #1e3164 !important;
}

body.dark-mode .review-action-btn.confirm {
  background: #064e3b !important;
  color: #6ee7b7 !important;
  border-color: #059669 !important;
}

body.dark-mode .review-action-btn.dismiss {
  background: #3f1212 !important;
  color: #fca5a5 !important;
  border-color: #b91c1c !important;
}

body.dark-mode .checklist-action-btn {
  background: #16254c !important;
  color: #f1f5f9 !important;
  border-color: #283f7d !important;
}

body.dark-mode .checklist-action-btn.done {
  background: #064e3b !important;
  color: #6ee7b7 !important;
  border-color: #059669 !important;
}

body.dark-mode .checklist-action-btn.delete {
  background: #2a1515 !important;
  color: #f87171 !important;
  border-color: #7f1d1d !important;
}

body.dark-mode .cb-preview-chip.chip-completed {
  background: #064e3b !important;
  color: #6ee7b7 !important;
  border-color: #059669 !important;
}

body.dark-mode .cb-preview-chip.chip-pending {
  background: #1e3a8a !important;
  color: #93c5fd !important;
  border-color: #2563eb !important;
}

body.dark-mode .cb-preview-chip.chip-alert {
  background: #451a03 !important;
  color: #fde68a !important;
  border-color: #b45309 !important;
}

body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode .notes-textarea,
body.dark-mode .pin-input-field {
  background: #0d1730 !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

body.dark-mode .form-input:focus,
body.dark-mode .form-select:focus,
body.dark-mode .notes-textarea:focus,
body.dark-mode .pin-input-field:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

body.dark-mode .cg-btn {
  background: #16254c !important;
  color: #f1f5f9 !important;
  border-color: #283f7d !important;
}

body.dark-mode .cg-btn:hover {
  background: #1e3164 !important;
}

body.dark-mode .cg-btn.primary,
body.dark-mode .take-med-big-btn,
body.dark-mode .attention-action-btn.btn-done,
body.dark-mode .profile-action-btn.primary-btn {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
}

body.dark-mode .cg-tab-btn,
body.dark-mode .clin-tab-btn,
body.dark-mode .timeframe-pill,
body.dark-mode .channel-tab-pill {
  background: #111e3e !important;
  color: #94a3b8 !important;
  border-color: #1e3164 !important;
}

body.dark-mode .cg-tab-btn.active,
body.dark-mode .clin-tab-btn.active,
body.dark-mode .timeframe-pill.active,
body.dark-mode .channel-tab-pill.active {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
}

body.dark-mode .photo-card {
  background: #16254c !important;
  border-color: #283f7d !important;
}

body.dark-mode .photo-card.revealed,
body.dark-mode .photo-card.matched {
  background: #111e3e !important;
  border-color: #10b981 !important;
}

body.dark-mode .photo-card .card-label {
  color: #f1f5f9 !important;
}

body.dark-mode .game-fullscreen-takeover {
  background: #0b1329 !important;
}

body.dark-mode .patient-score-pill,
body.dark-mode .patient-game-score-badge {
  background: #0f172a !important;
  border-color: #facc15 !important;
  color: #fef08a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .patient-score-pill strong,
body.dark-mode .patient-game-score-badge .score-text-group strong {
  color: #fde047 !important;
  font-weight: 900 !important;
}

body.dark-mode .patient-game-score-badge .score-text-group span {
  color: #e2e8f0 !important;
  font-weight: 700 !important;
}

body.dark-mode .attention-target-banner {
  background: #1e1e38 !important;
  border-color: #eab308 !important;
  color: #fef08a !important;
}

body.dark-mode .flower-tile,
body.dark-mode .language-option-card,
body.dark-mode .routine-choice-card,
body.dark-mode .routine-slot,
body.dark-mode .harvest-basket-item,
body.dark-mode .harvest-choice-card,
body.dark-mode .harmony-card {
  background: #16254c !important;
  border-color: #283f7d !important;
  color: #f1f5f9 !important;
}

body.dark-mode .flower-tile-label,
body.dark-mode .language-option-card .option-label,
body.dark-mode .routine-choice-card .choice-label,
body.dark-mode .routine-slot-txt,
body.dark-mode .harmony-card .harmony-card-label,
body.dark-mode .harvest-choice-card .choice-num-val,
body.dark-mode .harvest-choice-card .choice-num-sub {
  color: #f1f5f9 !important;
}

body.dark-mode .flower-tile.bloomed-target,
body.dark-mode .language-option-card.correct,
body.dark-mode .routine-slot.filled,
body.dark-mode .harvest-choice-card.correct,
body.dark-mode .harmony-card.correct {
  background: #064e3b !important;
  border-color: #22c55e !important;
}

body.dark-mode .harvest-basket-box {
  background: linear-gradient(180deg, #111e3e 0%, #0d1730 100%) !important;
  border-color: #d97706 !important;
}

body.dark-mode .harvest-basket-rim {
  color: #fde68a !important;
}

body.dark-mode .language-prompt-card,
body.dark-mode .harvest-prompt-card,
body.dark-mode .harmony-prompt-card {
  background: #111e3e !important;
  border-color: #10b981 !important;
}

body.dark-mode .completion-score-card {
  background: #111e3e !important;
  border-color: #283f7d !important;
}

body.dark-mode .completion-stars-badge {
  color: #fef08a !important;
}

body.dark-mode .completion-score-sub {
  color: #cbd5e1 !important;
}

body.dark-mode .game-exit-btn {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

body.dark-mode .mood-btn {
  background: #16254c !important;
  border-color: #283f7d !important;
  color: #f1f5f9 !important;
}

body.dark-mode .mood-btn:hover,
body.dark-mode .mood-btn.selected {
  border-color: #10b981 !important;
  background: #064e3b !important;
}

body.dark-mode .notes-item-card,
body.dark-mode .timeline-node,
body.dark-mode .flag-accordion-summary,
body.dark-mode .flag-expanded-content,
body.dark-mode .care-team-card,
body.dark-mode .asha-priority-item,
body.dark-mode .doctor-messages-stream,
body.dark-mode .doctor-msg-banner,
body.dark-mode .note-item-card {
  background: #0d1730 !important;
  color: #f1f5f9 !important;
  border-color: #1e3164 !important;
}

body.dark-mode .trends-chart-container svg {
  background: #080f21 !important;
  border-color: #1e3164 !important;
}

body.dark-mode .trends-chart-container svg line {
  stroke: #1e293b !important;
}

body.dark-mode .trends-chart-container svg text {
  fill: #94a3b8 !important;
}

body.dark-mode .persistent-disclaimer-card,
body.dark-mode .clinical-disclaimer-box,
body.dark-mode .report-top-disclaimer {
  background: #0c1c38 !important;
  color: #93c5fd !important;
  border-color: #1d4ed8 !important;
}

body.dark-mode .schedule-config-box {
  background: #0d1730 !important;
  border-color: #1e3164 !important;
  color: #f1f5f9 !important;
}

body.dark-mode .overdue-alert-banner {
  background: #3b1d06 !important;
  border-color: #b45309 !important;
  color: #fed7aa !important;
}

body.dark-mode .overdue-alert-banner p {
  color: #fed7aa !important;
}

/* ==========================================================================
   COLOURBLIND ACCESSIBILITY SYSTEM (CVD Safe Palettes & Symbol Markers)
   WCAG 2.2 compliant: Color is never the sole indicator of state.
   ========================================================================== */

/* 1. DEUTERANOPIA & PROTANOPIA (Red-Green Deficient Safe) */
body.cb-deuteranopia {
  --primary: #1d4ed8 !important;
  --on-primary: #ffffff !important;
  --primary-container: #1e40af !important;
  --on-primary-container: #dbeafe !important;
  --mint-badge: #dbeafe !important;
  --mint-badge-text: #1e40af !important;
  --amber-badge: #fef3c7 !important;
  --amber-badge-text: #92400e !important;
  --error: #c026d3 !important;
  --error-container: #fae8ff !important;
  --on-error-container: #701a75 !important;
}

body.cb-deuteranopia .routine-status-pill.done-badge,
body.cb-deuteranopia .cb-preview-chip.chip-completed {
  background: #dbeafe !important;
  color: #1e40af !important;
  border-color: #3b82f6 !important;
}

body.cb-deuteranopia .routine-status-pill.pending-badge,
body.cb-deuteranopia .cb-preview-chip.chip-pending {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #f59e0b !important;
}

body.cb-deuteranopia .overdue-alert-banner,
body.cb-deuteranopia .behavior-flag-card.severity-alert,
body.cb-deuteranopia .emerg-notice-box,
body.cb-deuteranopia .cb-preview-chip.chip-alert {
  background: #fae8ff !important;
  color: #701a75 !important;
  border-color: #c026d3 !important;
}

body.cb-deuteranopia .flower-tile.bloomed-target,
body.cb-deuteranopia .language-option-card.correct,
body.cb-deuteranopia .routine-slot.filled,
body.cb-deuteranopia .photo-card.matched {
  background: #dbeafe !important;
  border-color: #2563eb !important;
}

body.cb-deuteranopia .routine-card.completed {
  background: #eff6ff !important;
  border-color: #2563eb !important;
}

body.cb-deuteranopia .status-pill.online {
  border-color: #2563eb !important;
  color: #1e40af !important;
}

/* 2. TRITANOPIA (Blue-Yellow Deficient Safe) */
body.cb-tritanopia {
  --primary: #0d9488 !important;
  --on-primary: #ffffff !important;
  --primary-container: #0f766e !important;
  --on-primary-container: #ccfbf1 !important;
  --mint-badge: #ccfbf1 !important;
  --mint-badge-text: #0f766e !important;
  --amber-badge: #f3e8ff !important;
  --amber-badge-text: #6b21a8 !important;
  --error: #e11d48 !important;
  --error-container: #ffe4e6 !important;
  --on-error-container: #9f1239 !important;
}

body.cb-tritanopia .routine-status-pill.done-badge,
body.cb-tritanopia .cb-preview-chip.chip-completed {
  background: #ccfbf1 !important;
  color: #0f766e !important;
  border-color: #0d9488 !important;
}

body.cb-tritanopia .routine-status-pill.pending-badge,
body.cb-tritanopia .cb-preview-chip.chip-pending {
  background: #f3e8ff !important;
  color: #6b21a8 !important;
  border-color: #9333ea !important;
}

body.cb-tritanopia .overdue-alert-banner,
body.cb-tritanopia .behavior-flag-card.severity-alert,
body.cb-tritanopia .emerg-notice-box,
body.cb-tritanopia .cb-preview-chip.chip-alert {
  background: #ffe4e6 !important;
  color: #9f1239 !important;
  border-color: #e11d48 !important;
}

body.cb-tritanopia .flower-tile.bloomed-target,
body.cb-tritanopia .language-option-card.correct,
body.cb-tritanopia .routine-slot.filled,
body.cb-tritanopia .photo-card.matched {
  background: #ccfbf1 !important;
  border-color: #0d9488 !important;
}

body.cb-tritanopia .routine-card.completed {
  background: #f0fdfa !important;
  border-color: #0d9488 !important;
}

/* 3. ACHROMATOPSIA (High-Luminance Monochrome) */
body.cb-achromatopsia {
  filter: grayscale(100%) contrast(115%);
}

body.cb-achromatopsia .routine-status-pill.done-badge {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

body.cb-achromatopsia .routine-status-pill.pending-badge {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #475569 !important;
}

body.cb-achromatopsia .overdue-alert-banner,
body.cb-achromatopsia .behavior-flag-card.severity-alert,
body.cb-achromatopsia .emerg-notice-box {
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px double #000000 !important;
}

/* 4. ENHANCED SHAPE & PATTERN INDICATORS ("Color is never the only signal") */
body.cb-patterns .routine-status-pill.done-badge:before {
  content: "✓ ";
  font-weight: 900;
}

body.cb-patterns .routine-status-pill.pending-badge:before {
  content: "⏱ ";
}

body.cb-patterns .overdue-alert-banner:before,
body.cb-patterns .emerg-notice-box:before {
  content: "⚠️ ";
  font-size: 1.5rem;
}

body.cb-patterns .behavior-flag-card.severity-alert {
  border-left-width: 8px !important;
  border-left-style: solid !important;
}

body.cb-patterns .routine-card.completed {
  border-left-width: 8px !important;
  border-left-style: solid !important;
}

body.cb-patterns .photo-card.matched:after {
  content: "★";
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.75);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

body.cb-patterns .flower-tile.bloomed-target:after {
  content: "★";
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 1.1rem;
  color: #eab308;
}

/* Schedule Configuration Box in Settings */
.schedule-config-box {
  background: #f8fafc;
  border: 1.5px solid var(--outline-variant);
  border-radius: 10px;
  padding: 0.85rem 1.15rem;
  margin-bottom: 1.25rem;
  transition: var(--transition-smooth);
}

.schedule-times-row {
  display: flex;
  margin-top: 0.85rem;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}

.schedule-status-badge {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
}

.schedule-status-badge.active {
  background: #d1fae5;
  color: #065f46;
}

.schedule-status-badge.inactive {
  background: #f1f5f9;
  color: #64748b;
}

body.dark-mode .schedule-status-badge.active {
  background: #064e3b;
  color: #6ee7b7;
}

body.dark-mode .schedule-status-badge.inactive {
  background: #1e293b;
  color: #94a3b8;
}

/* 3.1 Patient Home Screen Single Prominent Reminder & Secondary Row */
.single-routine-prominent-card {
  background: var(--surface-container-lowest);
  border: 3px solid var(--primary);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-level-2);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.prominent-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.patient-secondary-column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* Min 16dp spacing */
  margin-top: 0.5rem;
}

.secondary-patient-card {
  background: var(--surface-container-lowest);
  border: 2.5px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.5rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  transition: var(--transition-smooth);
}

.secondary-patient-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-level-1);
}

.secondary-card-info {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.secondary-card-icon {
  font-size: 2.75rem;
}

.secondary-card-text h3 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--on-surface);
  margin-bottom: 0.25rem;
}

.secondary-card-text p {
  font-size: 1.25rem;
  color: var(--on-surface-variant);
}

.secondary-patient-btn {
  height: 60px;
  min-height: 56px;
  padding: 0 1.75rem;
  border-radius: var(--radius-full);
  border: none;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.secondary-patient-btn.game-btn {
  background: #d97706;
  color: #ffffff;
}

.secondary-patient-btn.mood-btn-action {
  background: var(--primary);
  color: #ffffff;
}

.secondary-patient-btn.call-btn-action {
  background: var(--secondary);
  color: #ffffff;
}

/* Discreet Caregiver Settings Access at Bottom of Patient Screen */
.patient-caregiver-gate-footer {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.caregiver-gate-subtle-btn {
  background: transparent;
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-full);
  padding: 0.65rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition-smooth);
}

.caregiver-gate-subtle-btn:hover {
  background: var(--surface-container-high);
  color: var(--on-surface);
}

/* 3.2 Reminder Full-Attention Takeover Prompt */
.reminder-attention-takeover {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #fdfbf7;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
}

.reminder-attention-takeover.active-takeover {
  display: flex;
}

.attention-card {
  background: #ffffff;
  border: 3.5px solid var(--primary);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  max-width: 680px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  box-shadow: var(--shadow-modal);
}

.attention-category-badge {
  font-size: 3.5rem;
  width: 80px;
  height: 80px;
  background: #f0fdf4;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #86efac;
}

.attention-title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--on-surface);
  line-height: 1.3;
}

.attention-instructions {
  font-size: 1.5rem;
  color: var(--on-surface-variant);
  line-height: 1.5;
}

.attention-visual-box {
  width: 100%;
  max-width: 440px;
  height: 220px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid var(--outline-variant);
}

.attention-actions-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* > 16dp spacing */
}

.attention-action-btn {
  width: 100%;
  min-height: 64px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  cursor: pointer;
  border: none;
  transition: var(--transition-smooth);
}

.attention-action-btn.btn-done {
  background: var(--primary);
  color: #ffffff;
  box-shadow: var(--shadow-level-2);
}

.attention-action-btn.btn-done:hover {
  background: var(--primary-container);
}

.attention-action-btn.btn-snooze {
  background: var(--surface-container-high);
  color: var(--on-surface);
  border: 2px solid var(--outline-variant);
}

.attention-action-btn.btn-snooze:hover {
  background: var(--surface-container-highest);
}

.attention-action-btn.btn-help {
  background: #fff7ed;
  color: #c2410c;
  border: 2px solid #fed7aa;
}

.attention-action-btn.btn-help:hover {
  background: #ffedd5;
}

.voice-listening-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0369a1;
  background: #e0f2fe;
  padding: 0.45rem 1.2rem;
  border-radius: var(--radius-full);
  border: 1.5px solid #bae6fd;
}

.listening-pulse-dot {
  width: 12px;
  height: 12px;
  background: #0284c7;
  border-radius: 50%;
  animation: pulse-ring 1.5s infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
  100% { transform: scale(0.9); opacity: 1; }
}

/* 3.3 Games Hub & Swappable Packs */
.games-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  width: 100%;
}

.game-category-tile {
  background: var(--surface-container-lowest);
  border: 2.5px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.game-category-tile:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-level-2);
}

.game-category-tile.active-category {
  border-color: #d97706;
  background: #fffbeb;
}

.category-tile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.category-tile-icon {
  font-size: 2.75rem;
}

.category-tile-text h4 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--on-surface);
}

.category-tile-text p {
  font-size: 1.15rem;
  color: var(--on-surface-variant);
}

.pack-switch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-container-low);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--outline-variant);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* 3.5 & 3.6 Caregiver Settings Modal */
.settings-modal-window {
  max-width: 640px;
}

.settings-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1.5px solid var(--outline-variant);
  gap: 1rem;
}

.settings-option-label strong {
  display: block;
  font-size: 1.15rem;
  color: var(--on-surface);
}

.settings-option-label span {
  font-size: 0.95rem;
  color: var(--on-surface-variant);
}

/* Switch Toggle UI */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 30px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--surface-dim);
  transition: .25s;
  border-radius: 30px;
  border: 2px solid var(--outline);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .25s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: var(--primary);
  border-color: var(--primary);
}

input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

/* 4.2 Caregiver Trends View & Non-Diagnostic Footnote */
.caregiver-tabs-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 2px solid var(--outline-variant);
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

.cg-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition-smooth);
}

.cg-tab-btn:hover {
  color: var(--primary);
}

.cg-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.timeframe-pill-group {
  display: flex;
  align-items: center;
  background: var(--surface-container-high);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 3px;
}

.timeframe-pill {
  border: none;
  background: transparent;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.timeframe-pill.active {
  background: var(--primary);
  color: #ffffff;
}

.trends-chart-container {
  background: var(--surface-container-lowest);
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin: 1.25rem 0;
}

.persistent-disclaimer-card {
  background: #f8fafc;
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  font-size: 0.95rem;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Notable Flag Evidence Card (Section 4.2 & 6.3) */
.flag-evidence-accordion {
  border: 2px solid #fed7aa;
  background: #fffbeb;
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}

.flag-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  color: #92400e;
}

.flag-expanded-content {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1.5px solid #fde68a;
  font-size: 0.95rem;
  color: #78350f;
  line-height: 1.5;
}

/* 4.5 Multi-Caregiver Activity Log */
.shared-caregiver-chips {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.caregiver-chip {
  background: var(--surface-container-low);
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
}

/* 4.6 Doctor Messaging Thread (Non-Emergency) */
.doctor-msg-banner {
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: #1e40af;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.doctor-messages-stream {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 1rem;
}

.doctor-msg-bubble {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-lg);
  max-width: 80%;
  font-size: 0.95rem;
  line-height: 1.4;
}

.doctor-msg-bubble.from-caregiver {
  background: #e2e8f0;
  color: #1e293b;
  align-self: flex-end;
}

.doctor-msg-bubble.from-doctor {
  background: #dbeafe;
  color: #1e40af;
  align-self: flex-start;
}

/* 5.1 Doctor Report Top Disclaimer & Reply Box */
.report-top-disclaimer {
  background: #f8fafc;
  border: 2px solid #cbd5e1;
  border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #334155;
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.doctor-reply-box {
  background: #f8fafc;
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-top: 1.5rem;
}

/* 5.3 Clinical Insight Repeated Framing */
.insight-panel-disclaimer {
  font-size: 0.9rem;
  color: #475569;
  background: #f1f5f9;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-style: italic;
}

/* Dynamic Interactive Additions */
.checklist-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.checklist-action-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
}

.checklist-action-btn:hover {
  background: #e2e8f0;
}

.checklist-action-btn.done {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.checklist-action-btn.delete {
  color: #b91c1c;
}

.checklist-action-btn.delete:hover {
  background: #fee2e2;
}

.channel-tab-pill {
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.channel-tab-pill.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.care-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.care-team-member-card {
  background: #ffffff;
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.care-team-member-avatar {
  font-size: 2rem;
  line-height: 1;
}

.care-team-member-info h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  color: var(--on-surface);
}

.care-team-member-info p {
  font-size: 0.85rem;
  color: var(--on-surface-variant);
  margin-bottom: 0.4rem;
}

.care-team-contact-btn {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  cursor: pointer;
  color: var(--primary);
}

.call-simulation-box {
  text-align: center;
  padding: 1.5rem 1rem;
}

.call-pulse-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  margin: 0 auto 1.25rem;
  animation: callPulse 1.5s infinite;
}

@keyframes callPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 18px rgba(37, 99, 235, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.call-end-btn {
  background: #dc2626 !important;
  color: #ffffff !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  padding: 0.75rem 2rem !important;
  border-radius: 9999px !important;
  border: none !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}