:root {
    /* 🎨 BRAND COLORS */
    --stem-color-ash: #ECE8E0;
    --stem-color-vanilla: #FFFCF4;
    --stem-color-chocolate: #291E1C;
    --stem-color-espresso: #40312E;
    --stem-color-driftwood: #847971;
    --stem-color-sandstone: #C5BEB6;

    --stem-color-sky: #CCDFFF; 
    --stem-color-ocean: #2F3C50; 
    --stem-color-deepsea: #04192A;
    --stem-color-green: #4CAF50; /* Standard green for success operations */
    --stem-color-dark-green: #45a049; /* Darker green for hover states */

    --stem-color-surface: var(--stem-color-vanilla);
    --stem-color-background: var(--stem-color-sandstone);
    --stem-color-border: var(--stem-color-sandstone);
    --stem-color-white: var(--stem-color-vanilla);
    --stem-color-success: var(--stem-color-green);
    --stem-color-warning: var(--stem-color-ocean);
}

body {
  background-color: var(--stem-color-sandstone); /* bg-white */
}

.agreement-card {
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
  padding: 1.5rem; /* p-6 */
  background-color: var(--stem-color-vanilla); /* bg-white */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* simplified shadow-xl */

}

.agreement-card a {
  background-color: transparent;
  border: none;
}

@media (min-width: 768px) { /* md breakpoint */
  .agreement-card {
    padding: 2.5rem; /* md:p-10 */
    margin-top: 3rem; /* md:my-12 */
    margin-bottom: 3rem; /* md:my-12 */
  }
}

/* Header */
.agreement-header {
  margin-bottom: 2rem; /* mb-8 */
}

.agreement-header h1 {
  text-transform: uppercase;
  font-size: 1.5rem; /* text-3xl */
  font-weight: 700; /* font-bold */
  color: var(--stem-color-chocolate); /* text-[--stem-color-chocolate] */
  margin-bottom: 1rem; /* mb-4 */
}

@media (min-width: 768px) { /* md breakpoint */
  .agreement-header h1 {
    font-size: 2rem; /* md:text-4xl */
  }
}

.agreement-header p {
  font-size: 1.125rem; /* text-lg */
  color: var(--stem-color-espresso); /* text-[--stem-color-espresso] */
}

/* Table of Contents */
.agreement-toc {
  background-color: var(--stem-color-ash); /* bg-[--stem-color-ash] */
  padding: 1.5rem; /* p-6 */
  border-radius: 0.5rem; /* rounded-lg */
  margin-bottom: 2.5rem; /* mb-10 */
  border: 1px solid var(--stem-color-sandstone); /* border border-[--stem-color-sandstone] */
}

.agreement-toc h2 {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  margin-bottom: 1rem; /* mb-4 */
  color: var(--stem-color-chocolate); /* text-[--stem-color-chocolate] */
}

.agreement-toc ol {
  list-style-type: decimal; /* list-decimal */
  list-style-position: inside; /* list-inside */
  margin-bottom: 0.5rem; /* space-y-2 */
}

.agreement-toc a {
  color: var(--stem-color-ocean); /* text-[--stem-color-ocean] */
  font-weight: 500; /* font-medium */
}

.agreement-toc a:hover {
  color: var(--stem-color-deepsea); /* hover:text-[--stem-color-deepsea] */
  text-decoration: underline; /* hover:underline */
}

/* Main Content Sections */
.agreement-content-sections {
  margin-bottom: 2rem; /* space-y-8 (for direct children) */
}

.agreement-content-sections section {
  margin-bottom: 2rem; /* space-y-8 (for direct children) */
}

/* Section Headings (h2) */
.agreement-section-heading {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 600; /* font-semibold */
  margin-bottom: 0.75rem; /* mb-3 */
  padding-bottom: 0.5rem; /* pb-2 */
  border-bottom: 1px solid var(--stem-color-sandstone); /* border-b border-[--stem-color-sandstone] */
  color: var(--stem-color-chocolate); /* text-[--stem-color-chocolate] */
}

/* Paragraphs (p) */
.agreement-paragraph {
  margin-bottom: 1rem; /* mb-4 */
}

.agreement-list {
  list-style-type: disc; /* list-disc */
  list-style-position: outside; /* list-outside */
  margin-left: 1.5rem; /* ml-6 */
  margin-bottom: 0.5rem; /* space-y-2 */
}

.agreement-list-nested {
  list-style-type: none; /* list-none */
  margin-left: 1.5rem; /* ml-6 */
  margin-bottom: 0.25rem; /* space-y-1 */
  margin-top: 0.5rem; /* mt-2 */
}

/* Emergency Care Callout Box */
.emergency-callout {
  border-left: 4px solid #ef4444; /* border-l-4 border-red-500 */
  background-color: #fef2f2; /* bg-red-50 */
  padding: 1rem; /* p-4 */
  border-radius: 0.375rem; /* rounded-md */
  margin-top: 1rem; /* my-4 */
  margin-bottom: 1rem; /* my-4 */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}

.emergency-callout p.title {
  font-weight: 600; /* font-semibold */
  color: #991b1b; /* text-red-800 */
  margin-bottom: 0.5rem; /* mb-2 */
}

.emergency-callout p {
  color: #b91c1c; /* text-red-700 */
}

.agreement-italic {
  font-style: italic; /* italic */
  color: var(--stem-color-driftwood); /* text-[--stem-color-driftwood] */
}

/* Acceptance Block */
.agreement-acceptance-block {
  padding: 1rem; /* p-4 */
  background-color: #f9fafb; /* bg-gray-50 */
  border: 1px solid var(--stem-color-sandstone); /* border border-[--stem-color-sandstone] */
  border-radius: 0.5rem; /* rounded-lg */
  font-style: italic; /* italic */
  color: var(--stem-color-driftwood); /* text-[--stem-color-driftwood] */
}
/* AHA result state, next steps and the TV report pop-up. */

/* Clinician tool */
.aha-result-state { background: #F7F5F1; border: 1px solid #E8E2DA; border-radius: 6px; padding: 0.6rem 0.8rem; }
.aha-result-state__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.6rem; margin: 0.5rem 0; }
.aha-result-state__grid label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; }
.aha-result-state__critical { display: block; margin: 0.5rem 0; }
.aha-next-step__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0.4rem; margin-top: 0.4rem; }
.aha-next-step__row > * { min-width: 0; width: 100%; box-sizing: border-box; }
.aha-yours { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: #E6EFE9; color: #2F5D46; font-size: 0.75rem; font-weight: 600; vertical-align: middle; }
.aha-ready { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: #FBEFD9; color: #7A5410; font-size: 0.75rem; font-weight: 600; }
.aha-yours-summary { background: #F2F7F4; border-left: 3px solid #2F5D46; border-radius: 4px; padding: 0.5rem 0.75rem; }
.aha-confirm__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.4rem 1rem; margin: 0 0 0.5rem; }
.aha-confirm__fields dt { font-size: 0.8rem; color: #777; }
.aha-confirm__fields dd { margin: 0; font-weight: 600; }
.aha-priors ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }
@media (max-width: 640px) {
  .aha-next-step__row { grid-template-columns: 1fr; }
}

/* Member surfaces */
.aha-result-note { background: #F4F1EC; border-left: 3px solid #847971; border-radius: 4px; padding: 0.6rem 0.8rem; margin: 0.5rem 0; }
.aha-result-note--non_diagnostic, .aha-result-note--limited { border-left-color: #A8843F; }
.aha-finding__next { margin: 0.35rem 0 0; font-size: 0.9rem; font-weight: 600; }

/* Television: the original report and earlier reports */
.tv-aha-report-button { display: inline-block; margin-top: 2vmin; }
.tv-aha-report {
  position: fixed; inset: 3vmin; z-index: 50; display: grid; grid-template-columns: 2fr 1fr; gap: 2vmin;
  background: #FFFFFF; border: 1px solid #E8E2DA; border-radius: 1vmin; padding: 2vmin;
  box-shadow: 0 1vmin 4vmin rgba(64, 49, 46, 0.25);
}
.tv-aha-report__pane { display: flex; flex-direction: column; gap: 1vmin; min-height: 0; overflow: auto; }
.tv-aha-report__pane--doc iframe { flex: 1; width: 100%; border: 1px solid #E8E2DA; background: #F7F5F1; }
.tv-aha-report__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1vmin; }
.tv-aha-report__list a { display: flex; flex-direction: column; padding: 1.2vmin 1.6vmin; border: 1px solid #E8E2DA; border-radius: 1vmin; color: inherit; text-decoration: none; }
.tv-aha-report__list .is-current a { border-color: #40312E; }
/* Banded and percentile range bars, tabular PDF measures, rows fields
   (DEXA regional table, Kinetisense dysfunction regions) and the
   body composition sign-off panel. */

.aha-bands { margin: 0.75rem 0 0.4rem; }
.aha-bands .aha-bar { margin: 0; }
.aha-bar--banded { background: transparent; }
.aha-bar__segment { position: absolute; top: 0; bottom: 0; background: var(--aha-track, #E8E2DA); border-right: 2px solid #fff; }
.aha-bar__segment:first-child { border-radius: 999px 0 0 999px; }
.aha-bar__segment:nth-last-child(2) { border-radius: 0 999px 999px 0; border-right: 0; }
.aha-bar__segment--current { background: var(--aha-band, #AFC2A6); }
.aha-bar--banded .aha-bar__dot, .aha-bar--percentile .aha-bar__dot { background: var(--stem-color-ocean, #2F3C50); }
.aha-bands__labels { position: relative; height: 1.1rem; margin-top: 0.3rem; font-size: 0.7rem; color: var(--aha-muted, #847971); }
.aha-bands__labels span { position: absolute; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aha-bands__label--current { color: var(--stem-color-ocean, #2F3C50); font-weight: 600; }
.aha-bands__ticks { display: flex; justify-content: space-between; margin-top: 0.3rem; font-size: 0.7rem; color: var(--aha-muted, #847971); }

.aha-measure__source { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--aha-muted, #847971); }
.aha-measures-table td { vertical-align: middle; }
.aha-measures-table__bar { min-width: 9rem; }
.aha-defs { margin: 0.5rem 0 1rem; font-size: 0.85rem; }
.aha-defs dt { font-weight: 600; margin-top: 0.5rem; }
.aha-defs dd { margin: 0.1rem 0 0; color: #555; }
.aha-defs-title, .aha-rows-title { margin: 1rem 0 0.25rem; }
.aha-next-step { margin: 0.75rem 0; padding: 0.6rem 0.85rem; border-radius: 10px; background: #F7F5F1; }
.aha-rows-table { margin: 0.75rem 0; }
.aha-rows-table .aha-table { font-size: 0.85rem; }

/* Clinician tool */
.aha-rows-field { margin: 0.75rem 0 1rem; }
.aha-rows-field table { width: 100%; border-collapse: collapse; }
.aha-rows-field th { text-align: left; font-size: 0.75rem; font-weight: 600; color: #777; padding: 0.3rem; }
.aha-rows-field td { padding: 0.3rem; vertical-align: top; border-top: 1px solid #eee; }
.aha-rows-field td .stem-input { width: 100%; min-width: 4rem; margin: 0; }
.aha-rows-field textarea.stem-input { min-height: 2.5rem; }
.aha-rows-field__wrap { overflow-x: auto; }
.aha-panel { margin: 1rem 0; padding: 0.85rem 1rem; border-radius: 10px; background: #F7F5F1; }
.aha-panel h4 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.aha-panel ul { margin: 0; padding-left: 1.1rem; }
.aha-check--pass { color: #3c6e47; }
.aha-check--fail { color: var(--stem-color-clay, #a4503c); font-weight: 600; }
.aha-check--na { color: #777; }
.aha-template__suggested { display: inline-block; margin-left: 0.4rem; padding: 0 0.4rem; border-radius: 999px; font-size: 0.7rem; background: var(--stem-color-ocean, #2F3C50); color: #fff; }
.aha-source-link { display: inline-block; margin: 0.25rem 0 0.75rem; }

@media print {
  .aha-measures-table tr { break-inside: avoid; }
}
/* Date Selector Container */
.date-selector-component {
  width: 100%;
  margin-bottom: 20px;
}

.date-tabs-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

/* The Scrollable Area */
.date-tabs-container {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 4px 16px 4px; /* Padding bottom for shadow/focus visibility */
  width: 100%;
  
  /* Hide scrollbar for Chrome/Safari/Opera */
  -webkit-overflow-scrolling: touch;
}
.date-tabs-container::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.date-tabs-container {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.date-tab-scroll-btn {
  border: 0px;
  background: transparent;
  font-size: var(--stem-text-xl);
}

/* Individual Date Card */
.date-tab-card {
  flex: 0 0 auto; /* Don't shrink */
  width: 84px;
  height: 117px;
  background: #ffffff;
  border: 1px solid var(--stem-color-border);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--stem-color-driftwood);
}

.date-tab-card:hover {
  border-color: var(--stem-color-sandstone);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Active State (Dark Blue) */
.date-tab-card.active {
  background-color: #1e293b; /* Slate-800 matches screenshot */
  border-color: #1e293b;
  color: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(30, 41, 59, 0.3);
}

/* Typography inside card */
.date-tab-day {
  font-size: var(--stem-text-md);
  font-weight: 400;
  text-transform: uppercase;
  opacity: 0.9;
  line-height: 2.0;
}
.date-tab-month {
  font-size: var(--stem-text-md);
  font-weight: 1000;
  line-height: 1;
}
.date-tab-num {
  font-size: 32px;
  font-weight: 300;
  line-height: 1.5;
}

/* --- Layout Grid --- */
.completion-layout-grid {
  display: grid;
  grid-template-columns: 400px 1fr; /* Sidebar takes 1.2 parts, Main takes 2 parts */
  align-items: start;
  padding: 20px 0;
  border-top: 2px solid var(--stem-color-driftwood);
  margin-top: 40px;
}

/* --- Layout Grid --- */
.appointment-layout-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* Sidebar takes 1.2 parts, Main takes 2 parts */
  gap: 40px;
  align-items: start;
  padding: 20px 0;
  border-top: 2px solid var(--stem-color-driftwood);
  margin-top: 40px;
}


/* Sidebar Styles */
.layout-sidebar {
  position: sticky; /* Keep steps visible while scrolling dates */
  top: 20px;
}

/* --- Vertical Flow Component --- */
.vertical-flow-container {
  padding: 40px; /* Add some padding to the right for spacing */
  max-width: 420px;
}

.flow-back-link {
  display: flex;
  align-items: center;
  color: var(--stem-color-driftwood);
  text-decoration: none;
  font-size: var(--stem-text-md);
  font-weight: 600;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.flow-steps-list {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Space between steps */
  margin-bottom: 40px;
}

.flow-step-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--stem-text-lg); /* Large text as shown in screenshot */
  color: var(--stem-color-sandstone);
  transition: color 0.3s ease;
}

.flow-step-item.completed {
  color: var(--stem-color-sandstone);
}


/* Active Step Description (The heading below the back button) */
.flow-active-description {
  font-weight: 400;
  color: var(--stem-color-ocean);
  margin-bottom: 10px;
}
.flow-active-description p {
  font-size: var(--stem-text-md);
  color: var(--stem-color-driftwood);
  line-height: 1.5;
  max-width: 420px;
}
.appointments-layout-main {
  max-width: 800px;
  padding: 40px;
}
.completion-layout-main {
  display: flex;
  gap: 20px;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
  .appointment-layout-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 10px 0;
    margin-top: 10px;
    border-top: none;
  }

  .completion-layout-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 10px 0;
    margin-top: 10px;
    border-top: none;
  }

  .layout-sidebar {
    position: static;
    margin-bottom: 10px;
  }

  .vertical-flow-container {
    max-width: 100%;
    padding: 16px;
  }

  .vertical-flow-container .appointment-details-sidebar {
    margin-top: 20px;
  }

  /* Compact the steps on mobile */
  .flow-back-link {
    margin-bottom: 16px;
  }

  .flow-steps-list {
    gap: 12px;
    margin-bottom: 16px;
    overflow-x: auto;
  }

  .flow-steps-list .flow-step-item {
    display: none;
  }

  .flow-step-item {
    font-size: var(--stem-text-lg);
    white-space: nowrap;
  }

  .flow-active-description h1,
  .flow-active-description h2 {
    font-size: var(--stem-text-lg);
  }

  .flow-steps-list .flow-active-description,
  .flow-steps-list .appointment-details-sidebar {
    width: 100%;
  }

  .appointments-layout-main {
    max-width: 100%;
    width: 100%;
    padding: 0 8px;
    overflow-x: hidden;
  }

  .completion-layout-main {
    max-width: 100%;
    width: 100%;
    flex-direction: column;
    padding: 0 8px;
    overflow-x: hidden;
  }

  /* Scale date picker for mobile */
  .date-tab-card {
    width: 64px;
    height: 88px;
  }

  .date-tab-num {
    font-size: 24px;
  }

  .date-tab-day {
    font-size: var(--stem-text-sm);
    line-height: 1.6;
  }

  .date-tab-month {
    font-size: var(--stem-text-sm);
  }

  .date-tabs-container {
    gap: 8px;
  }
}

/* Triage Flow Textarea Styling */
.triage-container textarea.input {
  resize: none;
  min-height: 200px; /* Ensure a visible height */
}
/* Book Now is the first step, so its layout grid sits at the very top of the
   card — the default 40px margin, 2px rule and top padding were separating it
   from a heading that is no longer there, and cost vertical space above the
   fold that the service list and catalog need. */
.appointment-layout-grid--flush {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

/* The step guide's 40px inset is sized for the slot-picker page, whose right
   column is tall. On Book Now the right column is one short list, so that inset
   plus the grid's own padding left a large empty band above the catalog. */
.appointment-layout-grid--flush { padding: 0; }

.appointment-layout-grid--flush .vertical-flow-container {
  padding: 0 var(--stem-spacing-xl) 0 0;
}
/* Annual Health Assessment clinician tool — schema-driven station forms. */

/* The station editor uses the whole screen, not the 600px form card. */
.stem-card.stem-form.aha-station { max-width: none; }

.aha-instructions {
  background: var(--stem-color-bone, #f6f3ef);
  border: 1px solid var(--stem-color-pearl, #e8e4df);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}
.aha-instructions ol { margin: 0.5rem 0 0; padding-left: 1.25rem; }

.aha-import { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.aha-import:has(.aha-upload-form) { flex-direction: column; align-items: flex-start; gap: 0.25rem; }

.aha-group { margin: 1.5rem 0; }
.aha-group h3 { margin-bottom: 0.5rem; }

.aha-row {
  display: grid;
  grid-template-columns: minmax(10rem, 1.2fr) 2fr minmax(10rem, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--stem-color-pearl, #e8e4df);
}
.aha-row__label small { display: block; color: #777; }
.aha-row__tag small { display: block; margin-top: 0.25rem; }
.aha-input--short { width: 7rem; display: inline-block; }
.aha-input--unit { width: 4.5rem; display: inline-block; margin-left: 0.35rem; }
.aha-note p { margin: 0 0 0.25rem; }
.aha-reason { margin-top: 0.35rem; font-size: 0.85rem; }

.aha-muted { color: #777; }
.aha-shown { color: var(--stem-color-clay, #a4503c); font-weight: 600; }
.aha-warning { color: var(--stem-color-clay, #a4503c); }

.aha-tag-select--needs_attention, .aha-tag-select--worth_monitoring { border-color: #D9B977; background: #FAF1E1; }
.aha-tag-select--normal { border-color: #b7dfb7; }

.aha-templates { margin: 0.75rem 0; }
.aha-templates__list { display: grid; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.aha-template {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  border: 1px solid var(--stem-color-pearl, #e8e4df);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}
.aha-template--normal { border-left-color: #9CAF88; }
.aha-template--minor_finding { border-left-color: #A9C0E6; }
.aha-template--needs_attention { border-left-color: #D9B977; background: #FDF8EF; }

@media (max-width: 700px) {
  .aha-row { grid-template-columns: 1fr; }
}

.aha-extract-form { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.aha-extract-form select { max-width: min(28rem, 100%); }
.aha-upload-form input[type="file"] { max-width: min(24rem, 100%); }
.aha-upload-or { display: block; margin: 0.6rem 0 0.35rem; }
.aha-ai-badge {
  display: inline-block; font-size: 0.7rem; padding: 0.05rem 0.4rem; border-radius: 4px;
  background: #e8efff; color: #2f3c50; margin-left: 0.35rem; vertical-align: middle;
}
.aha-text-field { margin: 0.75rem 0; }
.aha-confirm { background: #FAF1E1; border: 1px solid #D9B977; border-radius: 6px; padding: 0.6rem 0.8rem; }

.aha-action-row { display: flex; gap: 0.75rem; margin: 0.6rem 0; }
.aha-action-row__n { font-weight: 600; width: 1.5rem; padding-top: 0.5rem; }
.aha-action-row__body { flex: 1; display: grid; grid-template-columns: 2fr 1fr; gap: 0.4rem; }
.aha-action-row__body textarea { grid-column: 1 / -1; }
.aha-counts-panel { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0 1rem; }

.aha-template-group { margin: 0.4rem 0; }
.aha-template-group > summary { cursor: pointer; font-weight: 600; padding: 0.3rem 0; }

/* Combined stations (Physician Exam + Vitals): a tab per section */
.aha-tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; margin: 0.25rem 0 1rem; border-radius: 999px; background: #ECE8E0; flex-wrap: wrap; }
.aha-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; border-radius: 999px; color: var(--stem-color-espresso, #40312E); text-decoration: none; font-size: 0.9rem; }
.aha-tab--active { background: var(--stem-color-chocolate, #291E1C); color: #fff; }
.aha-tab__count { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.5rem; border-radius: 999px; background: #FAF1E1; color: #8A6A1E; }
.aha-tab__count--muted { background: transparent; color: inherit; opacity: 0.7; }

/* Station forms: keep every field inside the card. Text boxes sit under their
   label at full width and only grow downward; grid columns may shrink, so a
   long option or a dragged box can't push the tag column off the card. */
.aha-row > * { min-width: 0; }
.aha-row select { max-width: 100%; }
.aha-text-field label,
.aha-templates > label { display: block; margin: 0.5rem 0 0.3rem; }
.aha-station textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

/* Preview of the fixed sentence and "Learn about this test" the client reads. */
.aha-preview {
  border: 1px dashed var(--stem-color-pearl, #e8e4df);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  background: #fff;
}
.aha-preview__sentence { font-size: 1.05rem; margin: 0 0 0.5rem; }
.aha-preview__about summary { cursor: pointer; font-weight: 600; }
.aha-preview__about p { margin: 0.4rem 0 0; color: #555; }

/* Paired groups side by side (hearing: right ear, left ear) */
.aha-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.aha-pair .aha-group { margin: 0.5rem 0; }
.aha-pair .aha-row { grid-template-columns: minmax(7rem, 1fr) minmax(7rem, 1fr) auto; }
.aha-row--group-tag { background: var(--stem-color-bone, #f6f3ef); padding-left: 0.5rem; padding-right: 0.5rem; border-radius: 6px; }
@media (max-width: 700px) {
  .aha-pair { grid-template-columns: 1fr; }
}

/* Values imported from a vendor report (SHOEBOX), locked until unlocked */
.aha-source { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.aha-source-badge {
  display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 4px;
  background: #e6f2e6; color: #2f5030; margin-left: 0.35rem; vertical-align: middle; font-weight: 600;
}
.aha-locked-note { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* Clinician-only classification and the amendment record */
.aha-internal { border: 1px dashed var(--stem-color-pearl, #e8e4df); border-radius: 8px; padding: 0.5rem 1rem; }
.aha-internal h3 small { font-size: 0.75rem; font-weight: 400; margin-left: 0.5rem; }
.aha-amend { background: var(--stem-color-bone, #f6f3ef); border-radius: 8px; padding: 0.6rem 1rem; }
.aha-versions ol { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.aha-versions li { margin-bottom: 0.4rem; }

/* QA, 9 Oct (ultrasound, BMD, mammogram, vision, overall summary): controls in
   the page font, filling their column, and text boxes that grow with what is
   written instead of truncating it behind a scrollbar. */
.aha-station input,
.aha-station select,
.aha-station textarea { font-family: inherit; font-size: 0.95rem; }
.aha-station textarea { field-sizing: content; min-height: 3.5rem; }
.aha-text-field textarea { min-height: 6rem; }
.aha-row__value textarea,
.aha-row__value select,
.aha-row__value input[type="text"]:not(.aha-input--short):not(.aha-input--unit),
.aha-row__tag select { width: 100%; box-sizing: border-box; }
.aha-action-row__body input,
.aha-action-row__body select { width: 100%; box-sizing: border-box; }

/* The shared heading button is 8px caps; inside a station it is the way out. */
.aha-station .heading-with-button { align-items: center; gap: var(--stem-spacing-md); }
.aha-station .heading-button {
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  padding: 0.65rem 1.25rem;
  background-color: var(--stem-color-ocean);
  color: #fff;
  white-space: nowrap;
}

.aha-shown { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.25rem; font-size: 0.85rem; font-weight: normal; }
.aha-shown input[type="checkbox"] { width: auto; margin: 0; }

/* Assessments page: the day's bookings from the CHR calendar. */
.aha-day { margin: var(--stem-spacing-md, 1rem) 0; padding-bottom: var(--stem-spacing-md, 1rem); border-bottom: 1px solid var(--stem-color-pearl, #e8e4df); }
.aha-day__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.aha-day__head h3 { margin: 0; }
.aha-day__nav { display: flex; gap: 1rem; font-size: 0.9rem; }
body {
  margin-top: 50px;
  font-family: sans-serif;
}

.main-nav {
  position: absolute;
  top: 100px;
  left: 100px;
}



table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  margin-bottom: 20px; /* Added margin to the bottom of tables */
  font-size: 0.9rem;
}

th, td {
  padding: 8px;
}



thead tr {
  background-color: var(--stem-color-ash); /* Applied background color to the entire header row */
}

hr {
  margin-top: 50px;
  margin-bottom: 50px;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 50px;
}

.quick-action-button {

  /* min-width, NOT width. A hard 175px gave a long label nowhere to go, so
     "Email me a calendar invite" wrapped onto several lines and the button
     looked misaligned. A minimum keeps the short quick-action buttons uniform
     while letting a longer label set its own width. */

  min-width: 175px;

}



.user-search-result {

  border: 1px solid #ccc;

  padding: 10px;

  cursor: pointer;

}



.user-search-result:hover {

  background-color: #f0f0f0;

}

.user-select-selected {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-top: 8px;
  font-size: 14px;
}

/* Reporting > Client Lookup filter form */
.lookup-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.lookup-filters label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--stem-text-sm);
}

.lookup-filters label.lookup-check {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.lookup-filters input[type="text"],
.lookup-filters input[type="number"],
.lookup-filters select {
  min-width: 11rem;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

/* Override Duet Date Picker width constraint */
.duet-date__dialog-content {
  /* Was originally roughly 310px */
  max-width: 420px !important; 
  
  /* Optional: Ensure it doesn't overflow small mobile screens */
  width: 100%; 
}

/* Safety check for the table inside */
.duet-date__table {
  min-width: 100%;
}

.duet-date__input {
  background-color: var(--stem-color-ash);
}

:root {
  --duet-color-primary: var(--stem-color-ocean);
  --duet-color-button: #f5f5f5;
  /* --duet-color-surface: var(--stem-color-ash); */
  --duet-color-border: #ddd;
}
.empty-state-container {
  border: 2px dashed #f0f0f0;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  color: #757575;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.flash-message {
  position: relative;
  margin-bottom: 1rem;
}
/* Was `position: absolute` with left/right/z-index but no `top`.
 *
 * In the block-flow layouts (agreement, onboarding) `top: auto` resolved to the
 * real in-flow position and it looked fine. In application.html.erb the parent
 * `.main-content` is a COLUMN FLEX container, and an absolutely-positioned child
 * of a flex container does not get its in-flow static position — per Flexbox
 * §4.1 it is positioned "as if it were the sole flex item", i.e. at the flex
 * container's content-box top. That is the header row, which has an opaque
 * background. So every notice rendered on top of the logo strip at the very top
 * of the page rather than in the row the layout already reserves for it, which
 * is what "flash messages are hidden on the account page" was.
 *
 * `relative`, not `sticky`: sticky would pin it to the top of the scrollport and
 * — with z-index 9999 — paint it over the `sticky; top: 0; z-index: 100` headers
 * in the onboarding and agreement layouts. In flow it simply occupies the row the
 * layout already reserves for it, in every layout, flex or not. Both post-redirect
 * flashes land at scroll-top anyway, since Turbo resets scroll on a visit.
 *
 * Empty container collapses to zero height — no padding or margin here, only on
 * `.flash-message`. z-index is kept so a notice still paints above any card or
 * banner it happens to sit against.
 */
.flash-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  max-width: 100%;
  z-index: 9999;
}
.flash-container-login {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  z-index: 9999;
}

/* Centred text, because the CONTAINER is only centred while the message is
 * short. `.flash-container` is `width: fit-content; margin: auto`, so a brief
 * notice renders as a centred pill — but a long one (the staff booking
 * confirmation names the patient, the date and the time) hits `max-width: 100%`,
 * spans the full width and then reads as left-aligned against every other
 * centred element on the page. Centring the text keeps the two cases looking
 * alike. `.close-flash` is floated right, so it stays put either way.
 */
.flash-message {
  padding: 15px;
  border-radius: 4px;
  color: #fff;
  text-align: center;
}

.flash-message.notice {
  background-color: var(--stem-color-ocean);
  color: var(--stem-color-sky);
}

.flash-message.success {
  background-color: var(--stem-color-ocean);
  color: var(--stem-color-sky);

}

.flash-message.alert {
  background-color: var(--stem-color-sky);
  color: var(--stem-text-primary);
}

.flash-message.error {
  background-color: var(--stem-color-sky);
  color: var(--stem-text-primary);
}

.close-flash {
  float: right;
  margin-left: 15px;
  cursor: pointer;
  font-weight: bold;
}
/* Health Story Layout */

.health-story-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--stem-spacing-md);
  align-items: start;
}

.health-story-grid__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--stem-spacing-md);
}

.health-story-grid__content {
  display: flex;
  flex-direction: column;
  gap: var(--stem-spacing-md);
  /* Grid `1fr` columns default to min-width: auto — when this column holds
     wide intrinsic content (scrollable category tabs, the compose-overview
     auto-fill grid, biomarker card columns), it expands beyond 1fr and
     pushes past the viewport. Locking to 0 keeps the column to its share
     and lets the overflow-x: auto on inner scrollables actually scroll. */
  min-width: 0;
  /* Positioning context for the loading overlay below. */
  position: relative;
}

/* Loading overlay covering the content column while a health-story turbo-frame
   navigates (timeline item or filter tab). Turbo sets [busy] on the frame while
   it fetches; :has() reveals the overlay only during that window. Old content
   stays mounted underneath, so this just dims it until the new content lands. */
.health-story-loading-overlay {
  display: none;
}

.health-story-grid__content:has(turbo-frame#health_story_content[busy]) .health-story-loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  z-index: 5;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: var(--stem-radius-md);
  /* This overlay exists ONLY to dim. Without this it also swallowed every click
   * and tap in the content column for as long as the frame was fetching, because
   * `inset: 0` + `z-index: 5` puts it over the frame's contents — and at 70%
   * white the content stays perfectly readable underneath. That is what a client
   * reported as being able to see their requisition in the Documents list but not
   * being able to open it: the Download link was visible through the overlay and
   * unreachable behind it. Requests to the download route never reached the
   * server at all, which is what identified this rather than anything in the
   * download path itself.
   *
   * Individually each fetch is only ~250ms, so this was invisible in normal use;
   * it bit when the frame was refetching in bursts and the overlay stayed up
   * continuously. See the timeline prefetch note in TimelineItem for that half. */
  pointer-events: none;
}

/* Timeline Items */
.timeline-item {
  display: flex;
  gap: var(--stem-spacing-md);
  padding: var(--stem-spacing-md);
  border-radius: var(--stem-radius-md);
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.timeline-item:hover {
  background-color: var(--stem-color-sky);
  text-decoration: none;
}

.timeline-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--stem-color-ocean);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-item__icon iconify-icon {
  color: var(--stem-color-vanilla);
  font-size: 18px;
}

.timeline-item__content {
  flex: 1;
  min-width: 0;
}

.timeline-item__title {
  font-size: var(--stem-text-md);
  font-weight: var(--stem-font-weight-bold);
  color: var(--stem-color-chocolate);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-item__subtitle {
  font-size: var(--stem-text-sm);
  color: var(--stem-color-driftwood);
  margin: var(--stem-spacing-xxs) 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-item__meta {
  display: flex;
  align-items: center;
  gap: var(--stem-spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--stem-spacing-xs);
}

.timeline-item__date {
  font-size: var(--stem-text-sm);
  color: var(--stem-color-driftwood);
}

.timeline-item__tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--stem-radius-sm);
  background-color: var(--stem-color-ash);
  color: var(--stem-color-espresso);
  text-transform: uppercase;
  font-weight: var(--stem-font-weight-bold);
  letter-spacing: 0.02em;
}

.timeline-item__tag--biomarkers {
  background-color: var(--stem-color-sky);
  color: var(--stem-color-ocean);
}

.timeline-item__tag--optimal {
  background-color: var(--stem-color-green);
  color: var(--stem-color-vanilla);
}

.timeline-item__tag--followup {
  background-color: var(--stem-color-sandstone);
  color: var(--stem-color-chocolate);
}

.timeline-item__tag--upcoming {
  background-color: var(--stem-color-sky);
  color: var(--stem-color-ocean);
}

/* Timeline list container */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: var(--stem-spacing-xs);
}

/* The main Timeline can hold many items. Cap it to the viewport and scroll
   internally so it doesn't stretch the whole page taller than the screen. */
.timeline-list--scrollable {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

/* Empty state for content area */
.health-story-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--stem-spacing-xxl);
  color: var(--stem-color-driftwood);
  text-align: center;
}

.health-story-empty iconify-icon {
  font-size: 48px;
  margin-bottom: var(--stem-spacing-md);
  opacity: 0.5;
}

/* Responsive */
@media (max-width: 768px) {
  .health-story-grid {
    grid-template-columns: 1fr;
  }
}

/* Biomarker Cards */
/* Masonry layout via CSS multi-column. Cards flow top→bottom within a
   column, packed independently, so expanding one card does not push down
   or stretch any other card — there are no rows. */
.biomarker-cards-list {
  column-width: 400px;
  column-gap: var(--stem-spacing-md);
}

.biomarker-cards-list > .biomarker-card {
  /* Prevent the browser from splitting a card across columns. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  /* Bottom spacing replaces the flex `gap` since column layout uses margins. */
  margin-bottom: var(--stem-spacing-md);
  display: inline-block;
  width: 100%;
}

/* Stacked variant keeps the existing "one full-width card per row" behavior. */
.biomarker-cards-list--stacked {
  column-width: auto;
  column-count: 1;
}

.biomarker-cards-list--stacked .biomarker-card {
  max-width: 100%;
  min-width: 100%;
}

.biomarker-card {
  border: 1px solid var(--stem-color-ash);
  border-radius: var(--stem-radius-md);
  padding: var(--stem-spacing-lg) var(--stem-spacing-xl);
  background: #FFFFFF;
}

.biomarker-card--optimal {
  border-left: 4px solid var(--stem-color-sage-deep);
}

.biomarker-card--normal {
  border-left: 4px solid var(--stem-color-sage);
}

.biomarker-card--out-of-range {
  border-left: 4px solid var(--stem-color-warm-sand);
}

.biomarker-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--stem-spacing-sm);
}

.biomarker-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--stem-spacing-sm);
  flex-wrap: wrap;
}

.biomarker-card__name {
  font-size: var(--stem-text-md);
  font-weight: var(--stem-font-weight-bold);
  color: var(--stem-color-driftwood);
}

.biomarker-card__category {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--stem-radius-sm);
  background-color: var(--stem-color-sky);
  color: var(--stem-color-ocean);
  text-transform: uppercase;
  font-weight: var(--stem-font-weight-bold);
  letter-spacing: 0.02em;
}

.biomarker-card__date {
  font-size: var(--stem-text-sm);
  color: var(--stem-color-driftwood);
  white-space: nowrap;
}

.biomarker-card__value-row {
  display: flex;
  align-items: center;
  gap: var(--stem-spacing-md);
  margin-bottom: var(--stem-spacing-sm);
}

.biomarker-card__value {
  display: flex;
  align-items: baseline;
  gap: var(--stem-spacing-xs);
  flex-shrink: 0;
  min-width: 120px;
}

.biomarker-card__number {
  font-size: var(--stem-text-lg);
  font-weight: var(--stem-font-weight-bold);
}

.biomarker-card__number--optimal,
.biomarker-card__number--normal {
  color: var(--stem-color-sage-deep);
}

.biomarker-card__number--out_of_range {
  color: var(--stem-color-warm-sand-dark);
}

.biomarker-card__number--unknown {
  color: var(--stem-color-espresso);
}

.biomarker-card__unit {
  font-size: var(--stem-text-sm);
  color: var(--stem-color-driftwood);
}

.biomarker-card__text-value {
  font-size: var(--stem-text-sm);
  color: var(--stem-color-chocolate);
  white-space: pre-line;
  font-style: italic;
  flex: 1;
  min-width: 0;
}

.biomarker-card__status {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: var(--stem-font-weight-bold);
}

.biomarker-card__status--optimal {
  background-color: rgba(107, 128, 104, 0.15);
  color: var(--stem-color-sage-deep);
  border: 1px solid var(--stem-color-sage-deep);
}

.biomarker-card__status--normal {
  background-color: rgba(156, 175, 136, 0.15);
  color: var(--stem-color-sage-deep);
  border: 1px solid var(--stem-color-sage);
}

.biomarker-card__status--out_of_range {
  background-color: rgba(221, 213, 192, 0.25);
  color: var(--stem-color-warm-sand-dark);
  border: 1px solid var(--stem-color-warm-sand-dark);
}

.biomarker-card__graph-area {
  flex: 1;
  min-width: 0;
}

.biomarker-card__ref-range {
  font-size: var(--stem-text-sm);
  color: var(--stem-color-driftwood);
}

/* Biomarker Range Graph */
.biomarker-graph {
  width: 100%;
  padding: var(--stem-spacing-md) var(--stem-spacing-sm);
}

.biomarker-graph__bar {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background-color: var(--stem-color-warm-sand);
  overflow: visible;
  margin-bottom: 16px;
}

.biomarker-graph__zone {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 6px;
}

.biomarker-graph__zone--optimal {
  background-color: var(--stem-color-sage-deep);
}

.biomarker-graph__zone--normal {
  background-color: var(--stem-color-sage);
}

.biomarker-graph__dot {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid white;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.biomarker-graph__dot--optimal,
.biomarker-graph__dot--normal {
  background-color: var(--stem-color-sage-deep);
  border-radius: 50%;
}

.biomarker-graph__dot--out_of_range {
  background-color: var(--stem-color-warm-sand-dark);
  border-radius: 50%;
}

.biomarker-graph__dot--unknown {
  background-color: var(--stem-color-driftwood);
  border-radius: 50%;
}

/* Biomarker Education Section */
.biomarker-card__details {
  margin-top: var(--stem-spacing-sm);
  border-top: 1px solid var(--stem-color-ash);
  padding-top: var(--stem-spacing-sm);
}

.biomarker-card__summary {
  cursor: pointer;
  font-size: var(--stem-text-sm);
  font-weight: var(--stem-font-weight-bold);
  color: var(--stem-color-ocean);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--stem-spacing-xs);
}

.biomarker-card__summary::-webkit-details-marker {
  display: none;
}

.biomarker-card__summary::before {
  content: "\25B8";
  transition: transform 0.2s ease;
}

details[open] > .biomarker-card__summary::before {
  transform: rotate(90deg);
}

/* Single expandable card */
.biomarker-card__expandable {
  width: 100%;
}

.biomarker-card__click-target {
  cursor: pointer;
  list-style: none;
  display: block;
}

.biomarker-card__click-target::-webkit-details-marker {
  display: none;
}

.biomarker-card__expand-arrow {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--stem-color-driftwood);
  transition: transform 0.2s ease;
}

.biomarker-card__expand-arrow::after {
  content: "\25BC";
}

details[open] > .biomarker-card__click-target .biomarker-card__expand-arrow::after {
  content: "\25B2";
}

.biomarker-card__expanded-content {
  border-top: 1px solid var(--stem-color-ash, #e0e0e0);
  margin-top: var(--stem-spacing-md);
  padding-top: var(--stem-spacing-md);
}

.biomarker-card__education {
  padding: 0 var(--stem-spacing-sm);
}

.biomarker-card__education h4 {
  font-size: var(--stem-text-sm);
  font-weight: var(--stem-font-weight-bold);
  color: var(--stem-color-driftwood);
  margin: var(--stem-spacing-md) 0 var(--stem-spacing-xxs);
}

.biomarker-card__expanded-content > .biomarker-card__education:first-child > h4:first-child {
  margin-top: 0;
}

.biomarker-card__education p {
  font-size: var(--stem-text-sm);
  color: var(--stem-color-chocolate);
  margin: 0 0 var(--stem-spacing-xs);
  line-height: 1.5;
}

/* Biomarker Time Series */
.biomarker-time-series {
  min-width: 400px;
  max-width: 600px;
  flex: 1 1 400px;
  border: 1px solid var(--stem-color-ash);
  border-radius: var(--stem-radius-md);
  padding: var(--stem-spacing-md);
  background: var(--stem-color-vanilla);
}

.biomarker-time-series__header {
  display: flex;
  align-items: baseline;
  gap: var(--stem-spacing-xs);
  margin-bottom: var(--stem-spacing-sm);
}

.biomarker-time-series__name {
  font-size: var(--stem-text-md);
  font-weight: var(--stem-font-weight-bold);
  color: var(--stem-color-chocolate);
}

.biomarker-time-series__unit {
  font-size: var(--stem-text-sm);
  color: var(--stem-color-driftwood);
}

.biomarker-time-series__chart {
  width: 100%;
  height: auto;
}

.biomarker-time-series__zone--optimal {
  fill: rgba(76, 175, 80, 0.15);
}

.biomarker-time-series__zone--normal {
  fill: rgba(76, 175, 80, 0.08);
}

.biomarker-time-series__grid-line {
  stroke: var(--stem-color-ash);
  stroke-width: 0.5;
  stroke-dasharray: 4 3;
}

.biomarker-time-series__line {
  fill: none;
  stroke: var(--stem-color-ocean);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.biomarker-time-series__dot {
  stroke: white;
  stroke-width: 2;
}

.biomarker-time-series__dot--optimal,
.biomarker-time-series__dot--normal {
  fill: var(--stem-color-green, #4CAF50);
}

.biomarker-time-series__dot--out_of_range {
  fill: var(--stem-color-espresso, #40312E);
}

.biomarker-time-series__dot--unknown {
  fill: var(--stem-color-driftwood);
}

.biomarker-time-series__value-label {
  font-size: 10px;
  fill: var(--stem-color-espresso);
  text-anchor: middle;
  font-weight: 600;
}

.biomarker-time-series__y-label {
  font-size: 10px;
  fill: var(--stem-color-driftwood);
  text-anchor: end;
  dominant-baseline: middle;
}

.biomarker-time-series__x-label {
  font-size: 10px;
  fill: var(--stem-color-driftwood);
  text-anchor: middle;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .biomarker-card__value-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .biomarker-card__value {
    min-width: 0;
  }

  .biomarker-card__graph-area {
    width: 100%;
  }

  .biomarker-card__header {
    flex-direction: column;
    gap: var(--stem-spacing-xxs);
  }
}

/* Clinical Report Compose Layout */
.compose-patient-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding: 1rem 1.25rem;
  background: var(--stem-color-snow, #fafafa);
  border-radius: var(--stem-radius-md);
  margin-bottom: 1.5rem;
  border: 1px solid var(--stem-color-cloud, #e0e0e0);
}

.compose-patient-header__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.compose-patient-header__label {
  font-size: 0.7rem;
  color: var(--stem-color-driftwood);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.compose-patient-header__value {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--stem-color-chocolate);
}

.compose-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 1rem;
}

.compose-columns--single {
  grid-template-columns: 1fr;
}

.compose-column--left {
  min-width: 0;
}

.compose-column--left .biomarker-cards-list {
  flex-direction: column;
  gap: 0.75rem;
}

.compose-column--left .biomarker-card {
  max-width: none;
  min-width: 0;
  flex: none;
}

/* Override global h3 border inside compose panels */
.compose-column--left h3,
.compose-column--right h4 {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.75rem;
}

.compose-column--right {
  position: sticky;
  top: 1rem;
  padding: 1.25rem;
  background: var(--stem-color-snow, #fafafa);
  border: 1px solid var(--stem-color-cloud, #e0e0e0);
  border-radius: var(--stem-radius-md);
}

.compose-column--right h4:first-of-type {
  margin-top: 0;
}

.compose-column--right textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--stem-color-cloud, #e0e0e0);
  border-radius: 8px;
  font-family: inherit;
  font-size: inherit;
  resize: vertical;
  min-height: 80px;
}

.compose-column--right label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.compose-nav-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--stem-color-cloud, #e0e0e0);
}

.compose-footer {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--stem-color-cloud, #e0e0e0);
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 900px) {
  .compose-columns {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .compose-column--right {
    position: static;
  }
}

/* Overview tab */
.compose-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.compose-overview-card {
  padding: 1rem;
  border: 1px solid var(--stem-color-cloud, #e0e0e0);
  border-radius: var(--stem-radius-md);
  background: var(--stem-color-vanilla, #fff);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.compose-overview-card:hover {
  border-color: var(--stem-color-ocean);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.compose-overview-card__name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  color: var(--stem-color-chocolate);
}

.compose-overview-card__stats {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.compose-overview-card__ratio {
  font-size: 1.25rem;
  color: var(--stem-color-chocolate);
}

.compose-overview-card__bar {
  height: 6px;
  background: var(--stem-color-cloud, #e0e0e0);
  border-radius: 3px;
  overflow: hidden;
}

.compose-overview-card__bar-fill {
  height: 100%;
  background: var(--stem-color-green);
  border-radius: 3px;
  transition: width 0.3s;
}

.tab-completion-icon {
  font-size: 1em;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  display: inline-block;
  animation: spin 1s linear infinite;
}

.biomarker-graph__scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--stem-color-driftwood);
  margin-top: 2px;
}

.biomarker-graph__label {
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--stem-color-driftwood);
  margin-top: 2px;
  white-space: nowrap;
}

/* Analysis debug console */
.analysis-log-entry {
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.analysis-log-time {
  color: #6a9955;
  margin-right: 8px;
}

.analysis-log-entry:has(.analysis-log-time) {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Text format toolbar */
.text-format-toolbar {
  display: flex;
  gap: 2px;
  margin-bottom: 4px;
}

.text-format-toolbar button {
  background: var(--stem-color-snow, #fafafa);
  border: 1px solid var(--stem-color-cloud, #e0e0e0);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--stem-color-chocolate);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
}

.text-format-toolbar button:hover {
  background: var(--stem-color-ash, #ece8e0);
}

/* Report summary/recommendations display */
.report-content-box {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--stem-color-cloud, #e0e0e0);
  line-height: 1.7;
  font-size: 0.95rem;
}

.report-content-box p {
  margin: 0 0 0.75rem;
}

.report-content-box p:last-child {
  margin-bottom: 0;
}

.report-content-box ul {
  margin: 0 0 0.75rem;
  padding-left: 1.5rem;
}

.report-content-box li {
  margin-bottom: 0.5rem;
}

.text-format-preview-wrapper {
  margin-top: 0.5rem;
}

.text-format-preview-toggle {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--stem-color-driftwood);
  user-select: none;
}

.text-format-preview {
  margin-top: 0.35rem;
  padding: 0.75rem 1rem;
  background: var(--stem-color-vanilla, #fff);
  border: 1px solid var(--stem-color-cloud, #e0e0e0);
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.6;
  min-height: 2rem;
}

.text-format-preview p {
  margin: 0 0 0.5rem;
}

.text-format-preview p:last-child {
  margin-bottom: 0;
}

.text-format-preview ul {
  margin: 0 0 0.5rem;
  padding-left: 1.5rem;
}

.text-format-preview li {
  margin-bottom: 0.25rem;
}

/* Medical History — Sarah's design language on the Health Story V2 ticket.
   The tab MODEL is from the ticket text ("each section can be in its own tab to
   avoid an endless scroll"); the CHROME below is from her screenshots, which
   stack the sections. Keeping tabs preserves both the one-CHR-call design and
   paging per section. */
.hs-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--stem-color-ash);
  background: var(--stem-color-surface);
  color: var(--stem-text-primary);
  font-size: var(--stem-text-sm);
  text-decoration: none;
}
.hs-pill:hover { border-color: var(--stem-color-sandstone); opacity: 1; }
.hs-pill--active {
  background: var(--stem-color-chocolate);
  border-color: var(--stem-color-chocolate);
  color: var(--stem-color-vanilla);
}

/* "8 total" beside the section title. */
.hs-count {
  display: inline-block;
  margin-left: var(--stem-spacing-sm);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--stem-color-ash);
  color: var(--stem-text-secondary);
  font-size: var(--stem-text-sm);
  font-weight: var(--stem-font-weight-regular);
  vertical-align: middle;
}

/* All / Active / Resolved as one segmented control rather than a dropdown. */
.hs-segmented { display: inline-flex; border: 1px solid var(--stem-color-ash); border-radius: 8px; overflow: hidden; }
.hs-segmented a {
  padding: 6px 16px;
  font-size: var(--stem-text-sm);
  color: var(--stem-text-primary);
  text-decoration: none;
  background: var(--stem-color-surface);
  border-right: 1px solid var(--stem-color-ash);
}
.hs-segmented a:last-child { border-right: none; }
.hs-segmented a:hover { background: var(--stem-color-ash); opacity: 1; }
.hs-segmented a[aria-current="true"] { background: var(--stem-color-chocolate); color: var(--stem-color-vanilla); }

/* Status as a pill, so a row reads at a glance. */
.hs-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--stem-text-sm); white-space: nowrap; }
.hs-status--active { background: #E6F4EA; color: #1E7B34; }
.hs-status--past { background: var(--stem-color-ash); color: var(--stem-text-secondary); }

.hs-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--stem-spacing-md);
  margin-top: var(--stem-spacing-md);
  color: var(--stem-text-secondary);
  font-size: var(--stem-text-sm);
}
.hs-pager { display: inline-flex; gap: 6px; }
.hs-pager a, .hs-pager span {
  min-width: 32px;
  padding: 4px 8px;
  text-align: center;
  border: 1px solid var(--stem-color-ash);
  border-radius: 6px;
  text-decoration: none;
  color: var(--stem-text-primary);
}
.hs-pager .hs-pager__current { background: var(--stem-color-chocolate); color: var(--stem-color-vanilla); border-color: var(--stem-color-chocolate); }
.hs-pager .hs-pager__disabled { opacity: 0.4; }

/* Medical History and Medications show five rows of one section on screen, but
   the PDF has to carry every section complete (both Health Story V2 specs say
   so). Each tab renders both: the interactive block and a full, unfiltered one.
   Only one is ever visible — this pair is the switch. */
.hs-print-only {
  display: none;
}

/* Print styles — when "Download PDF" is clicked, only the right content pane prints. */
@media print {
  /* Tell the browser to preserve ALL colors (not just keep-on-paper toner-
     saving grays). Without this, the user's "Save toner / B&W" default in
     Chrome strips backgrounds AND can convert color text to greyscale. */
  html, body, body.printing-health-story {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Print ONLY the report content, kept in NORMAL DOCUMENT FLOW so page-break
     and break-inside rules actually apply. The previous version isolated the
     content with `* { visibility:hidden }` + `#health_story_content { position:
     absolute }` — but Chrome ignores break-inside/page-break inside an
     absolutely-positioned subtree (it still paginates, which is why we got
     multi-page output, but it slices cards/paragraphs mid-content). So instead
     we hide the app chrome with display:none and leave the content in flow. */
  body.printing-health-story .desktop-nav,
  body.printing-health-story .mobile-nav,
  body.printing-health-story .loading-overlay,
  body.printing-health-story .acting-as-banner,
  body.printing-health-story .flash-container,
  body.printing-health-story .main-content > div:first-child,
  body.printing-health-story [data-controller="health-story-filter"] > .stem-card,
  body.printing-health-story .heading-button,
  body.printing-health-story .tabs-nav,
  body.printing-health-story .health-story-grid__sidebar,
  body.printing-health-story .report-back-link,
  body.printing-health-story [class*="intercom"],
  body.printing-health-story [id*="intercom"] {
    display: none !important;
  }
  /* Neutralize the app's full-height flex shell. The layout wraps everything in
     `display:flex; height:100vh` with `.main-content { overflow-y:auto }` — that
     traps the report in one viewport and clips it to a single page. Reset those
     to normal block flow with auto height so the content paginates. */
  html, body.printing-health-story,
  body.printing-health-story > div,
  body.printing-health-story .main-content,
  body.printing-health-story .stem-container,
  body.printing-health-story .health-story-grid {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex-grow: 0 !important;
  }
  body.printing-health-story #health_story_content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The paged, filtered view is replaced by the complete one for the PDF. */
  body.printing-health-story .hs-screen-only {
    display: none !important;
  }
  body.printing-health-story .hs-print-only {
    display: block !important;
  }

  /* Tabbed clinical reports (Biomarkers etc.) keep all but the active tab
     hidden via `.tab-panel { display: none }`. For the PDF we unhide them all
     so the print reads as one continuous report. */
  body.printing-health-story .tab-panel {
    display: block !important;
  }
  /* Start every tab on its own page. The first panel (Overview) stays on
     page 1; every subsequent `.tab-panel` (`.tab-panel + .tab-panel` matches
     the 2nd panel onward) begins a fresh page. */
  body.printing-health-story .tab-panel + .tab-panel {
    break-before: page !important;
    page-break-before: always !important;
  }
  /* Make cards print without heavy shadows / backgrounds */
  body.printing-health-story .stem-card {
    box-shadow: none !important;
    border: none !important;
    background: white !important;
  }

  /* Force every <details> to render fully expanded. Biomarker cards wrap
     the educational review ("What is X?", trend graphs, metadata) inside a
     <details>, which stays collapsed when the user prints — leaving only
     the title/value row visible in the PDF. */
  body.printing-health-story details > *:not(summary) {
    display: block !important;
  }
  body.printing-health-story details summary {
    list-style: none;
  }
  body.printing-health-story .biomarker-card__expand-arrow,
  body.printing-health-story .biomarker-card__summary::before {
    display: none !important;
  }
  body.printing-health-story .biomarker-card__expanded-content,
  body.printing-health-story .biomarker-card__details {
    display: block !important;
  }

  /* Preserve color cues on every printable element (browsers strip
     background colors by default). Applies broadly to the print area so
     biomarker graph bands, status pills, MRI severity badges/dots,
     clinical-report progress bars, and health-plan callout backgrounds
     all keep their meaning — without this "out of range" is
     indistinguishable from "optimal", and MRI "needs attention" looks
     identical to "normal". */
  body.printing-health-story #health_story_content,
  body.printing-health-story #health_story_content * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* The biomarker list is a CSS multi-column container (column-width:400px).
     Chrome does NOT honor break-inside/page-break for PAGE fragmentation inside
     a multi-column formatting context — which is the core reason cards sliced
     mid-paragraph. column-count:1 still leaves it a (1-column) multicol context,
     so fully disable columns (both auto) to get normal block flow where the
     break rules apply. */
  body.printing-health-story .biomarker-cards-list {
    column-width: auto !important;
    column-count: auto !important;
    columns: auto !important;
    display: block !important;
  }

  /* Keep each biomarker card whole when it fits. This lets multiple short
     markers STACK on a single page, while a card that would straddle a page
     boundary moves wholesale to the next page instead of splitting. A card
     taller than a page can't be kept whole — Chrome fragments it anyway, and
     (verified on Chrome 148) the per-paragraph avoids below are still honored,
     so those forced breaks land cleanly between paragraphs, never mid-sentence.
     NOTE: this is safe for individual cards but NOT for the report's outer
     `.stem-card` wrapper (many pages tall) — avoid on that blanks page 1
     (see the wrapper note below). We intentionally do NOT force a page break
     per biomarker anymore; stacking + this avoid is the whole layout. */
  body.printing-health-story .biomarker-card {
    display: block !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Keep section headings glued to the content that follows them so the
     PDF doesn't end a page on a lone title (e.g. "Overall Summary" landing
     at the bottom of page 1 while its summary box flows to page 2). */
  body.printing-health-story h1,
  body.printing-health-story h2,
  body.printing-health-story h3,
  body.printing-health-story h4,
  body.printing-health-story h5,
  body.printing-health-story h6,
  body.printing-health-story .heading {
    break-after: avoid !important;
    page-break-after: avoid !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Keep short sections whole (move to the next page rather than split).
     NOTE: do NOT add the report's outer `.stem-card` wrapper here. The entire
     report is wrapped in a single `.stem-card` many pages tall; break-inside:
     avoid on an element taller than the page makes the browser shove the whole
     block to the NEXT page, leaving the FIRST page blank (the blank-page-1 bug).
     Individual `.biomarker-card`s ARE given avoid above — that's safe and
     intended: they're page-sized or smaller, so they stack/move cleanly, and
     the rare over-tall card fragments at the paragraph avoids below. */
  body.printing-health-story .compose-overview-card,
  body.printing-health-story .compose-patient-header,
  body.printing-health-story .mri-patient-accordion {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* The unbreakable units inside a (possibly very tall) biomarker card: the
     header/value/graph row stays intact, and no individual paragraph, list
     item, or heading-with-its-paragraph is ever split. Breaks then land
     cleanly between Q&A blocks instead of slicing through a sentence. */
  body.printing-health-story .biomarker-card__click-target,
  body.printing-health-story .biomarker-card summary,
  body.printing-health-story .biomarker-card__value-row,
  body.printing-health-story #health_story_content p,
  body.printing-health-story #health_story_content li {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}

/* ============================================================
 * MRI Compose & Show — severity dots, badges, and buttons.
 * ============================================================
 *  - dots used in tab buttons + on individual section headings
 *  - badges shown top-right of each section card
 *  - buttons in the per-section severity row
 *
 * Severity values: normal | minor_finding | needs_attention | unset
 * ------------------------------------------------------------ */
.mri-severity-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--stem-color-driftwood, #b8aea1);
  margin-right: 6px;
  vertical-align: middle;
}
/* Traffic-light scale — green (clear) → amber (minor) → terracotta (attention).
   Normal and minor were previously two shades of green and hard to tell apart. */
.mri-severity-dot--normal          { background: var(--stem-color-sage-deep, #6B8068); }
.mri-severity-dot--minor_finding   { background: #E0A12E; }
.mri-severity-dot--needs_attention { background: #8A4B2A; }

.mri-severity-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--stem-text-sm, 12px);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: #eee8db;
  color: var(--stem-color-driftwood, #847971);
}
/* Badge colors mirror the severity dots: green (normal) → amber (minor) →
   brown (needs attention). Text is a darker shade of each for legibility on
   the tinted background. */
.mri-severity-badge--normal {
  background: rgba(107, 128, 104, 0.15);
  color: var(--stem-color-sage-deep);
  border: 1px solid var(--stem-color-sage-deep);
}
.mri-severity-badge--minor_finding {
  background: rgba(224, 161, 46, 0.18);
  color: #8A5E14;
  border: 1px solid #E0A12E;
}
.mri-severity-badge--needs_attention {
  background: rgba(138, 75, 42, 0.12);
  color: #8A4B2A;
  border: 1px solid #8A4B2A;
}

.mri-severity-row {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mri-severity-btn {
  background: white;
  border: 1px solid #d6d0c5;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: var(--stem-text-sm, 12px);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  display: inline-flex;
  align-items: center;
}
.mri-severity-btn:hover { border-color: #b8aea1; }
.mri-severity-btn.active {
  background: var(--stem-color-pearl-light, #faf6ee);
  border-color: var(--stem-color-driftwood, #847971);
}
.mri-severity-btn--normal.active          { border-color: var(--stem-color-sage-deep); }
.mri-severity-btn--minor_finding.active   { border-color: #E0A12E; }
.mri-severity-btn--needs_attention.active { border-color: #8A4B2A; }

/* Read-only radiologist text panel */
.mri-radiologist-text {
  max-height: 360px;
  overflow-y: auto;
}

/* Plain-language summary textarea inside the MRI compose 2-column grid.
   Mirrors `.compose-column--right textarea` (used by biomarkers compose) so
   the input feels the same across composers. */
.mri-compose-columns textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--stem-color-cloud, #e0e0e0);
  border-radius: 8px;
  font-family: inherit;
  font-size: inherit;
  resize: vertical;
  min-height: 80px;
}

@media (max-width: 768px) {
  .mri-compose-columns {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
 * Patient-facing MRI report — Health Story
 * ============================================================ */

.mri-patient-report {
  display: flex;
  flex-direction: column;
  gap: var(--stem-spacing-md);
}

/* Header card */
.mri-patient-header-card .stem-card-interior {
  padding: var(--stem-spacing-lg);
}
.mri-patient-title {
  font-family: var(--stem-font-headline, "Merriweather", serif);
  font-weight: 300;
  font-size: 1.75rem;
  margin: 0 0 0.5rem;
  color: var(--stem-color-espresso, #3B1C20);
}
.mri-patient-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--stem-spacing-md);
  flex-wrap: wrap;
}
.mri-patient-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mri-patient-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--stem-text-sm, 12px);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.mri-patient-pill--date {
  background: #ede5d6;
  color: #6b5a3c;
}
.mri-patient-followup-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

/* Patient metadata row */
.mri-patient-meta-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--stem-spacing-md);
  margin-top: var(--stem-spacing-lg);
  padding-top: var(--stem-spacing-md);
  border-top: 1px solid var(--stem-color-pearl, #ece6d8);
}
.mri-patient-meta__label {
  display: block;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--stem-color-driftwood, #847971);
  margin-bottom: 0.25rem;
}
.mri-patient-meta__value {
  font-weight: 600;
  color: var(--stem-color-espresso, #3B1C20);
}

/* Section heads + simple/clinical toggle */
.mri-patient-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--stem-spacing-sm);
  gap: var(--stem-spacing-md);
}
.mri-patient-toggle {
  display: inline-flex;
  background: #f1ebde;
  border-radius: 999px;
  padding: 3px;
}
.mri-patient-toggle__btn {
  background: transparent;
  border: 0;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: var(--stem-text-sm, 12px);
  font-weight: 500;
  color: var(--stem-color-driftwood, #847971);
  cursor: pointer;
}
.mri-patient-toggle__btn--active {
  background: white;
  color: var(--stem-color-espresso, #3B1C20);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.mri-patient-content {
  line-height: 1.55;
}

/* Findings section */
.mri-patient-findings-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--stem-spacing-md);
}
.mri-patient-findings-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--stem-spacing-md);
}
@media (max-width: 900px) {
  .mri-patient-findings-grid {
    grid-template-columns: 1fr;
  }
}

/* Body map */
.mri-body-map {
  background: var(--stem-color-pearl-light, #faf6ee);
  border: 1px solid var(--stem-color-pearl, #ece6d8);
  border-radius: 12px;
  padding: var(--stem-spacing-md);
}
.mri-body-map__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--stem-spacing-md);
  gap: 0.5rem;
}
.mri-sex-toggle {
  display: inline-flex;
  background: white;
  border-radius: 999px;
  padding: 3px;
  border: 1px solid var(--stem-color-pearl, #ece6d8);
}
.mri-sex-toggle__btn {
  background: transparent;
  border: 0;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--stem-color-driftwood, #847971);
  cursor: pointer;
}
.mri-sex-toggle__btn--active {
  background: var(--stem-color-espresso, #3B1C20);
  color: white;
}
.mri-body-map__canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 400 / 620;
}
.mri-body-map__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mri-body-map__node {
  position: absolute;
  transform: translate(-50%, -50%);
  background: white;
  border: 1px solid var(--stem-color-pearl, #ece6d8);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.mri-body-map__node:hover {
  border-color: var(--stem-color-driftwood, #847971);
}
.mri-body-map__node--needs_attention {
  background: var(--stem-color-espresso, #3B1C20);
  color: white;
  border-color: var(--stem-color-espresso, #3B1C20);
}
.mri-body-map__node-label {
  line-height: 1;
}
.mri-body-map__legend {
  display: flex;
  gap: 1rem;
  margin-top: var(--stem-spacing-md);
  padding-top: var(--stem-spacing-sm);
  border-top: 1px solid var(--stem-color-pearl, #ece6d8);
  font-size: var(--stem-text-sm, 12px);
  color: var(--stem-color-driftwood, #847971);
}
.mri-body-map__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Accordions */
.mri-patient-accordions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mri-patient-accordion {
  background: white;
  border: 1px solid var(--stem-color-pearl, #ece6d8);
  border-radius: 8px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.mri-patient-accordion[open] {
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.mri-patient-accordion--just-focused {
  border-color: var(--stem-color-espresso, #3B1C20);
}
.mri-patient-accordion__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
}
.mri-patient-accordion__summary::-webkit-details-marker { display: none; }
.mri-patient-accordion__title {
  font-weight: 600;
  color: var(--stem-color-espresso, #3B1C20);
}
.mri-patient-accordion__right {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.mri-patient-accordion__chev {
  transition: transform 0.2s ease;
  color: var(--stem-color-driftwood, #847971);
}
.mri-patient-accordion[open] .mri-patient-accordion__chev {
  transform: rotate(180deg);
}
.mri-patient-accordion__body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--stem-color-pearl, #ece6d8);
}
.mri-patient-accordion__body .mri-patient-section-head {
  margin-top: 0.75rem;
}

/* Disclaimer card */
.mri-patient-disclaimer .stem-card-interior {
  background: #faf6ee;
  border-radius: var(--stem-radius-md, 8px);
}
.mri-patient-disclaimer__inner {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--stem-text-sm, 12px);
  color: var(--stem-color-espresso-light, #6b5a3c);
  line-height: 1.5;
}
.mri-patient-disclaimer__icon {
  font-size: 1.25rem;
  color: var(--stem-color-driftwood, #847971);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   HEALTH PLAN CARDS — shared by the portal plan and the TV deck
   (health_plans/_*_card). Sized in em from a 1rem container so the TV can
   scale the same cards up by changing one font-size.
   --------------------------------------------------------------------------- */
.hp-grid,
.hp-stack {
  font-size: 1rem;
  margin-bottom: 2rem;
}

.hp-grid { display: grid; gap: 1em; }
.hp-grid--goals { grid-template-columns: repeat(auto-fit, minmax(16.25em, 1fr)); }
.hp-grid--team  { grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); }
.hp-stack .hp-card + .hp-card { margin-top: 0.75em; }

.hp-card {
  border: 1px solid var(--stem-color-border, #e5e5e5);
  border-radius: 8px;
  padding: 1em;
  background: #fff;
}

.hp-card--action { border-left: 3px solid var(--stem-color-ocean, #1a73e8); }

.hp-card__head {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.hp-card--action .hp-card__head { gap: 0.75em; }

.hp-card__title { font-size: 0.9em; }
.hp-card--action .hp-card__title { flex: 1; }

.hp-card__body {
  color: #555;
  font-size: 0.9em;
  margin-top: 0.55em;
}

.hp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.85em;
  height: 1.85em;
  border-radius: 50%;
  background: var(--stem-color-espresso, #2a2a2a);
  color: #fff;
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1;
}

.hp-num--muted {
  width: 1.875em;
  height: 1.875em;
  background: #e5e5e5;
  color: #333;
  font-size: 0.8em;
}

.hp-badge {
  padding: 0.17em 0.67em;
  border-radius: 0.33em;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.hp-member { text-align: center; }

.hp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  background: var(--stem-color-espresso, #2a2a2a);
  color: #fff;
  font-weight: 600;
  margin-bottom: 0.5em;
}

.hp-member__name { font-weight: 600; }

.hp-member__title {
  font-size: 0.75em;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hp-member__body {
  font-size: 0.85em;
  color: #555;
  margin-top: 0.6em;
}

/* Expandable variant: the card is a <details>, its head the <summary>. Native
   so it needs no JavaScript (the TV deck loads none). */
.hp-card > summary {
  cursor: pointer;
  list-style: none;
}
.hp-card > summary::-webkit-details-marker { display: none; }

.hp-card > summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.25em;
  border-right: 2px solid var(--stem-color-driftwood, #847971);
  border-bottom: 2px solid var(--stem-color-driftwood, #847971);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.hp-card[open] > summary::after { transform: rotate(-135deg); }

/* The member head stacks vertically, so its chevron sits centred underneath. */
.hp-member > summary { display: flex; flex-direction: column; align-items: center; }
.hp-member > summary::after { margin: 0.3em 0 0; }

/* ---------------------------------------------------------------------------
   ANNUAL HEALTH ASSESSMENT — member report and printed report (health_story/aha)
   Status palette from the AHA designs: sage normal, blue minor, ochre attention.
   --------------------------------------------------------------------------- */
.aha-report, .aha-print {
  --aha-normal-bg: #EEF2EA; --aha-normal-line: #C9D5C1; --aha-normal-ink: #4B5E47; --aha-normal-dot: #4F6B52;
  --aha-minor-bg: #E8EFFA; --aha-minor-line: #A9C0E6; --aha-minor-ink: #3C5A8A; --aha-minor-dot: #5878AE;
  --aha-attn-bg: #FAF1E1; --aha-attn-line: #D9B977; --aha-attn-ink: #8A6A1E; --aha-attn-dot: #A8843F;
  --aha-track: #E8E2DA; --aha-band: #AFC2A6; --aha-line: #E8E2DA; --aha-muted: #847971;
}
.aha-report__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.aha-preview-banner {
  background: var(--aha-attn-bg); border: 1px solid var(--aha-attn-line); border-radius: 6px;
  padding: 0.5rem 0.75rem; margin-bottom: 1rem; font-size: 0.9rem;
}
.aha-muted { color: var(--aha-muted); }

/* Status chips */
.aha-chip {
  display: inline-block; padding: 0.2rem 0.75rem; border-radius: 999px; border: 1px solid;
  font-size: 0.85rem; line-height: 1.4; white-space: nowrap; font-weight: 400;
}
.aha-chip--normal { background: var(--aha-normal-bg); border-color: var(--aha-normal-line); color: var(--aha-normal-ink); }
.aha-chip--minor_finding { background: var(--aha-minor-bg); border-color: var(--aha-minor-line); color: var(--aha-minor-ink); }
.aha-chip--needs_attention { background: var(--aha-attn-bg); border-color: var(--aha-attn-line); color: var(--aha-attn-ink); }
.aha-chip--recorded, .aha-chip--known_finding, .aha-chip--not_assessed, .aha-chip--not_performed, .aha-chip--declined {
  background: #F4F1EC; border-color: var(--aha-line); color: var(--aha-muted);
}

/* Overview: counts, summary, health plan, area tiles */
.aha-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 1.25rem 0; }
.aha-count {
  display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 1rem 0.9rem;
  border: 1px solid var(--aha-line); border-radius: 8px; background: #fff;
}
.aha-count strong { font-size: 1.4rem; font-weight: 400; }
.aha-count span { font-size: 0.8rem; color: var(--aha-muted); }
.aha-overall { margin: 1.5rem 0; }
.aha-overall h3 { font-weight: 400; margin: 1.5rem 0 0.5rem; }
.aha-overall__text { max-width: 46rem; }
.aha-plan { list-style: none; padding: 0; margin: 0.75rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.aha-plan__step {
  display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.9rem 1rem;
  border: 1px solid var(--aha-line); border-radius: 8px; background: #fff;
}
.aha-plan__num {
  flex: none; width: 1.6rem; height: 1.6rem; border: 1px solid var(--stem-color-espresso, #40312E); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem;
}
.aha-plan__title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.aha-plan__title strong { font-weight: 500; }
.aha-plan__cat {
  font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  padding: 0.15rem 0.55rem; border-radius: 999px; background: #ECE8E0; color: var(--stem-color-espresso, #40312E);
}
.aha-plan__step p { margin: 0.35rem 0 0; font-size: 0.9rem; }

.aha-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem; margin: 0.75rem 0 1.5rem; }
.aha-tile {
  position: relative; display: flex; flex-direction: column; gap: 0.2rem; padding: 0.75rem 2rem 0.75rem 0.85rem;
  border: 1px solid var(--aha-line); border-radius: 8px; text-decoration: none; color: inherit; background: #fff;
}
.aha-tile::after { content: "›"; position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--aha-muted); font-size: 1.2rem; }
.aha-tile:hover { border-color: var(--stem-color-sandstone, #C5BEB6); }
.aha-tile__name { font-size: 0.9rem; }
.aha-tile__meta { font-size: 0.75rem; color: var(--aha-muted); }

/* Section page */
.aha-back { display: inline-block; font-size: 0.85rem; color: var(--stem-color-espresso, #40312E); text-decoration: none; margin: 0.25rem 0 0.5rem; }
.aha-section-title { font-family: var(--stem-font-headline); font-size: 2rem; font-weight: 400; padding-bottom: 0.6rem; border-bottom: 1px solid var(--aha-line); margin: 0.25rem 0 1rem; }
.aha-section { margin: 1rem 0 2rem; }

/* Station card / accordion row */
.aha-station { border: 1px solid var(--aha-line); border-radius: 12px; margin: 0.75rem 0; background: #fff; }
.aha-station__head {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem; list-style: none; cursor: pointer;
}
div.aha-station__head { cursor: default; }
.aha-station__head::-webkit-details-marker { display: none; }
.aha-station__title { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.aha-station__title h4 { margin: 0; font-family: var(--stem-font-body); font-weight: 600; font-size: 1.15rem; text-transform: none; letter-spacing: 0; }
.aha-station__chevron { width: 0.55rem; height: 0.55rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-right: 0.3rem; transition: transform 0.15s; }
details.aha-station[open] > summary .aha-station__chevron { transform: rotate(-135deg); }
.aha-station__body { padding: 0 1.25rem 1.25rem; }
.aha-station__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-top: -0.4rem; }
.aha-station__byline { font-size: 0.9rem; color: var(--aha-muted); margin: 0 0 0.5rem; }
.aha-station__text { margin: 0.6rem 0; line-height: 1.6; font-size: 1rem; }
.aha-station__count { color: var(--aha-muted); font-size: 0.9rem; margin: 0.75rem 0 0.5rem; }
.aha-download {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem;
  border: 1px solid var(--aha-line); border-radius: 8px; color: inherit; text-decoration: none; font-size: 0.85rem; background: #fff;
}
.aha-pill-link {
  display: inline-block; padding: 0.35rem 0.9rem; border: 1px solid var(--aha-line); border-radius: 999px;
  color: var(--aha-muted); text-decoration: none; font-size: 0.85rem;
}

/* Exam findings */
.aha-finding { border-radius: 10px; padding: 0.85rem 1rem; margin: 0.6rem 0; background: #F7F5F1; }
.aha-finding--needs_attention { background: var(--aha-attn-bg); }
.aha-finding--minor_finding { background: var(--aha-minor-bg); }
.aha-finding__head { display: flex; justify-content: space-between; gap: 1rem; }
.aha-finding__tag { color: var(--aha-attn-ink); font-size: 0.9rem; }
.aha-finding--minor_finding .aha-finding__tag { color: var(--aha-minor-ink); }
.aha-finding--normal .aha-finding__tag { color: var(--aha-normal-ink); }
.aha-finding__text p { margin: 0.35rem 0 0; }

/* Measures with range bars */
.aha-measures { margin: 0.5rem 0; }
.aha-measures__group { margin: 1rem 0 0.25rem; font-size: 0.95rem; color: var(--aha-ink, #333); }
.aha-measure { border-top: 1px solid var(--aha-line); padding: 0.9rem 0; }
.aha-measure__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.aha-measure__label { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 1rem; color: var(--stem-color-espresso, #40312E); }
.aha-measure__value { text-align: right; display: flex; flex-direction: column; gap: 0.15rem; }
.aha-measure__value strong { font-size: 1.2rem; font-weight: 600; }
.aha-measure__value span { font-size: 0.8rem; color: var(--aha-muted); }
.aha-measure__value .aha-measure__finding { font-size: 0.95rem; color: inherit; max-width: 28rem; }
.aha-bar { position: relative; height: 0.5rem; border-radius: 999px; background: var(--aha-track); margin: 0.75rem 0 0.4rem; }
.aha-bar__band { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--aha-band); }
.aha-bar__dot {
  position: absolute; top: 50%; width: 0.85rem; height: 0.85rem; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--aha-normal-dot); box-shadow: 0 0 0 2px #fff;
}
.aha-bar--minor_finding .aha-bar__dot { background: var(--aha-minor-dot); }
.aha-bar--needs_attention .aha-bar__dot { background: var(--aha-attn-dot); }
.aha-bar--none .aha-bar__dot, .aha-bar--known_finding .aha-bar__dot { background: var(--aha-muted); }

.aha-learn { margin-top: 0.35rem; font-size: 0.85rem; }
.aha-learn summary { cursor: pointer; display: inline; text-decoration: underline; text-underline-offset: 3px; color: var(--stem-color-ocean, #2F3C50); }
.aha-learn p { margin: 0.4rem 0 0; color: #555; }
.aha-about { margin: 0.9rem 0; border-radius: 8px; background: #EEF3FA; }
.aha-about summary { cursor: pointer; padding: 0.7rem 1rem; color: var(--stem-color-ocean, #2F3C50); }
.aha-about p { margin: 0; padding: 0 1rem 0.8rem; font-size: 0.9rem; }
.aha-steps { padding-left: 1.2rem; }
.aha-steps li { margin-bottom: 0.4rem; }
.aha-pending { color: #555; }
.aha-disclaimer { font-size: 0.8rem; color: #555; border-top: 1px solid var(--aha-line); padding-top: 0.5rem; margin-top: 0.75rem; }

/* Card layout (optometry): one card per test */
.aha-card { border: 1px solid var(--aha-line); border-radius: 12px; padding: 1.1rem 1.25rem; margin: 0.9rem 0; background: #fff; }
.aha-card__head { display: flex; align-items: flex-start; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.aha-card__icon { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: #EEF3FA; color: var(--stem-color-ocean, #2F3C50); display: inline-flex; align-items: center; justify-content: center; }
.aha-card__titles { flex: 1; min-width: 12rem; }
.aha-card__title { margin: 0; font-family: var(--stem-font-headline); font-size: 1.35rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.aha-card__subtitle { display: block; margin-top: 0.15rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aha-muted); }
.aha-card__chips { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.aha-chip--score strong { font-weight: 600; }
.aha-eye-label { margin: 0.6rem 0 0.4rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--aha-normal-ink); }
.aha-tiles-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin-bottom: 0.4rem; }
.aha-value-tile { border: 1px solid var(--aha-line); border-radius: 10px; background: #F7F5F1; padding: 0.75rem 0.9rem; }
.aha-value-tile__label { display: block; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aha-muted); margin-bottom: 0.2rem; }
.aha-value-tile strong { font-size: 1.45rem; font-weight: 600; }
.aha-value-tile small { color: var(--aha-muted); }
.aha-about__body { padding: 0 1rem 1rem; }
.aha-eyebrow { margin: 0.6rem 0 0.25rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aha-muted); font-weight: 600; }
.aha-result { margin: 0; padding: 0.7rem 1rem; border-left: 3px solid var(--stem-color-sandstone, #C5BEB6); background: #F7F5F1; border-radius: 0 8px 8px 0; }
.aha-steps-title { margin: 1.4rem 0 0.4rem; font-family: var(--stem-font-headline); font-size: 1.35rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.aha-plan__step--solid { align-items: center; }
.aha-plan__step--solid .aha-plan__num { background: var(--stem-color-ocean, #2F3C50); color: #fff; border-color: var(--stem-color-ocean, #2F3C50); }
.aha-plan__step--solid p { margin: 0; }
.aha-callout { display: flex; gap: 0.9rem; margin: 1.2rem 0 0.4rem; padding: 1rem 1.1rem; border: 1px solid var(--aha-attn-line); border-radius: 10px; background: var(--aha-attn-bg); }
.aha-callout__icon { flex: none; width: 2rem; height: 2rem; border-radius: 8px; background: var(--aha-attn-dot); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-family: Georgia, serif; }
.aha-callout p { margin: 0; font-size: 0.9rem; }
.aha-callout__title { font-weight: 600; letter-spacing: 0.06em; color: var(--aha-attn-ink); margin-bottom: 0.25rem !important; }

/* Tables (lab values in the printed report) */
.aha-table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.9rem; }
.aha-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aha-muted); padding: 0.4rem; }
.aha-table td { border-top: 1px solid var(--aha-line); padding: 0.5rem 0.4rem; vertical-align: top; }
.aha-table td p { margin: 0; }
.aha-lab-category { margin: 1rem 0 0; }

@media (max-width: 600px) {
  .aha-counts { grid-template-columns: 1fr; }
  .aha-measure__row { flex-direction: column; }
  .aha-measure__value { text-align: left; }
}

/* The printed report: paper first. */
.aha-print-body { background: #fff; }
.aha-print { max-width: 820px; margin: 0 auto; padding: 1.5rem; }
.aha-print__toolbar { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.aha-print__header { text-align: center; margin-bottom: 1rem; }
.aha-print__logo { height: 24px; }
.aha-print-footer { margin-top: 2rem; font-size: 0.8rem; }

@media print {
  .aha-print__toolbar { display: none; }
  .aha-print { padding: 0; max-width: none; }
  .aha-station, .aha-measure, .aha-finding, .aha-table tr { break-inside: avoid; }
  .aha-section > h3 { break-after: avoid; }
  .aha-report, .aha-print { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Paired groups side by side (hearing: right ear, left ear), one tag each */
.aha-pair-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.aha-pair-card { margin: 0.4rem 0; }
@media (max-width: 640px) {
  .aha-pair-cards { grid-template-columns: 1fr; }
}
@media print {
  .aha-pair-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Hearing audiogram, one per ear (TV, Health Story, PDF): right red circles, left blue crosses. */
.aha-audiogram { display: block; width: 100%; height: auto; margin-top: 0.4rem; font-family: inherit; }
.aha-audiogram__band { stroke: none; }
.aha-audiogram__band--normal { fill: #FFFFFF; }
.aha-audiogram__band--mild { fill: #E4F1E5; }
.aha-audiogram__band--moderate { fill: #EDF3DE; }
.aha-audiogram__band--moderately_severe { fill: #FBF5DC; }
.aha-audiogram__band--severe { fill: #FBEADF; }
.aha-audiogram__band--profound { fill: #F7DCDC; }
.aha-audiogram__band-label { font-size: 9px; letter-spacing: 0.06em; fill: #6b5b4f; }
.aha-audiogram__grid { stroke: #D9D3CC; stroke-width: 0.5; }
.aha-audiogram__frame { fill: none; stroke: #B8B0A8; stroke-width: 1; }
.aha-audiogram__tick, .aha-audiogram__axis { font-size: 10px; fill: #6b5b4f; }
.aha-audiogram__value { font-size: 14px; font-weight: 600; fill: #40312E; }
.aha-audiogram__line { fill: none; stroke-width: 2; }
.aha-audiogram__mark { stroke-width: 2.5; fill: #FFFFFF; }
.aha-audiogram--right .aha-audiogram__line, .aha-audiogram--right .aha-audiogram__mark { stroke: #C0392B; }
.aha-audiogram--left .aha-audiogram__line, .aha-audiogram--left .aha-audiogram__mark { stroke: #2F5BD8; }
.aha-audiogram__point { cursor: default; }
@media print {
  .aha-audiogram { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Simple | Clinical on the AHA bone density and mammogram (as the MRI report). */
.aha-view-toggle { display: inline-flex; background: #f1ebde; border-radius: 999px; padding: 3px; margin: 0.25rem 0 0.75rem; }
.aha-view-toggle__btn { background: transparent; border: 0; padding: 5px 14px; border-radius: 999px; font-size: var(--stem-text-sm, 12px); font-weight: 500; color: var(--stem-color-driftwood, #847971); cursor: pointer; }
.aha-view-toggle__btn--active { background: white; color: var(--stem-color-espresso, #3B1C20); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.aha-clinical__title { margin: 0.75rem 0 0.25rem; font-size: 0.9rem; }
/*
 * Admin HTML editor (app/javascript/controllers/html_editor_controller.js).
 * Used on the product form for the full description.
 */

.html-editor {
  border: 1px solid var(--stem-color-cloud, #ddd);
  border-radius: var(--stem-radius-sm, 6px);
  background: var(--stem-color-white, #fff);
  margin-top: var(--stem-spacing-md, 12px);
  margin-bottom: var(--stem-spacing-md, 12px);
}

/* An author rule on .input would otherwise beat the browser's [hidden] rule and
   leave both the surface and the textarea on screen at once. */
.html-editor [hidden] {
  display: none !important;
}

.html-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid var(--stem-color-cloud, #ddd);
  background: var(--stem-color-sand, #f7f6f3);
  border-radius: var(--stem-radius-sm, 6px) var(--stem-radius-sm, 6px) 0 0;
}

.html-editor__button,
.html-editor__mode {
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--stem-color-espresso, #33302e);
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
}

.html-editor__button:hover,
.html-editor__mode:hover {
  background: var(--stem-color-white, #fff);
  border-color: var(--stem-color-cloud, #ddd);
}

.html-editor__button--bold { font-weight: 700; }
.html-editor__button--italic { font-style: italic; }

.html-editor__spacer {
  flex: 1 1 auto;
}

.html-editor__mode--active {
  background: var(--stem-color-white, #fff);
  border-color: var(--stem-color-driftwood, #8a8378);
  font-weight: 600;
}

.html-editor__surface {
  min-height: 260px;
  max-height: 620px;
  overflow-y: auto;
  padding: 12px 14px;
  outline: none;
}

.html-editor__surface:focus {
  box-shadow: inset 0 0 0 2px var(--stem-color-ocean, #2b6a7f);
  border-radius: 0 0 var(--stem-radius-sm, 6px) var(--stem-radius-sm, 6px);
}

/* The description renders inside member-facing cards, so keep the editing view
   close to that: normal paragraph rhythm, visible list markers. */
.html-editor__surface p { margin: 0 0 0.75em; }
.html-editor__surface h3,
.html-editor__surface h4,
.html-editor__surface h5 { margin: 0 0 0.5em; }
.html-editor__surface ul,
.html-editor__surface ol { margin: 0 0 0.75em; padding-left: 1.4em; }
.html-editor__surface ul { list-style: disc; }
.html-editor__surface ol { list-style: decimal; }
.html-editor__surface li { margin-bottom: 0.25em; }
.html-editor__surface > *:last-child { margin-bottom: 0; }

.html-editor__source {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0 0 var(--stem-radius-sm, 6px) var(--stem-radius-sm, 6px);
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
}

.html-editor__source:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--stem-color-ocean, #2b6a7f);
}
/* Native <dialog> modal, opened by controllers/modal_controller.js when Turbo
   loads content into the persistent #modal frame.

   Only ::backdrop and the open/closed rules genuinely need to live in CSS — a
   pseudo-element can't be styled inline, and `dialog` is display:none until
   opened. */

dialog.stem-modal {
  padding: 0;
  border: none;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  max-width: 560px;
  width: calc(100% - 2rem);
  max-height: 85vh;
  overflow: auto;
  background: #fff;
}

dialog.stem-modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.stem-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--stem-spacing-md);
  padding: var(--stem-spacing-md);
  border-bottom: 1px solid #eee;
}

.stem-modal__body {
  padding: var(--stem-spacing-md);
}

/* Deliberately a plain button, not the Button component: it's an icon-sized
   affordance in the header, not a page action. */
.stem-modal__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--stem-color-driftwood);
  padding: 0 0.25rem;
}

.stem-modal__close:hover {
  color: #000;
}

/* Confirm dialog — Turbo.setConfirmMethod in application.js builds this in place
   of window.confirm. Inherits dialog.stem-modal for the frame and backdrop;
   only the narrower width and the body layout are specific to it. */
dialog.stem-confirm {
  max-width: 420px;
}

.stem-confirm__body {
  padding: var(--stem-spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--stem-spacing-lg);
}

.stem-confirm__message {
  margin: 0;
  font-size: var(--stem-text-md);
  line-height: 1.5;
  color: var(--stem-text-primary, #291E1C);
}

/* Cancel first, confirm last: the destructive action should not be the one
   under the cursor when the dialog opens. */
.stem-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--stem-spacing-md);
  flex-wrap: wrap;
}

.stem-confirm__actions .stem-btn {
  margin: 0;
}
.mobile-nav {
  display: none;
}

.desktop-nav {
  display: block;
}

.nav-button {
  padding: 10px;
  margin: 5px 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--stem-color-chocolate);
  transition: background-color 0.3s ease;
  flex: 1;
  min-width: 0;
  text-decoration: none;
}

.nav-button:hover {
  background-color: var(--stem-color-espresso);
}

.nav-button-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
}

.nav-button-icon {
  font-size: 32px;
  padding: 5px 0;
  color: var(--stem-color-vanilla);
}

/* Labels wrap onto a second line rather than being clipped mid-word. With
   nowrap + ellipsis, "Health Story" rendered as "Health St" in the mobile tab
   bar — a truncated label a client can't identify. Two balanced lines with a
   tight line-height keeps the bar the same height while staying legible;
   line-clamp is only a backstop for anything longer still. */
.nav-button-label {
  font-size: 0.7rem;
  color: var(--stem-color-vanilla);
  margin-top: 5px;
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
  line-height: 1.1;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.main-content {
  padding-bottom: 70px; /* Adjust based on footer height */
  margin-top: var(--stem-spacing-lg);
}

@media (max-width: 768px) {
  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    display: block;
  }

  .mobile-nav > div:first-child {
    position: sticky;
    top: 60px; /* Main header height */
    left: 0;
    right: 0;
    z-index: 1000;
  }

  .mobile-nav > div:last-of-type {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: white;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px; /* Added horizontal padding */
    border-top: 1px solid #eee;
  }

  .main-content {
    padding-top: 0;
    padding-bottom: 70px; /* Adjust based on footer height */
  }
}
.pharmacy-card {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 5px;
    cursor: pointer;
  }
  
  .pharmacy-card.selected {
    border-color: var(--stem-color-ocean);
    background-color: #f0f8ff;
  }
  
  .pharmacy-name {
    font-weight: bold;
  }
  
  .pharmacy-vicinity {
    color: #666;
  }
/* "Who you're booking with" card on booking links and Book Now. */
.practitioner-card { margin: 0 0 var(--stem-spacing-md, 1rem); }
.practitioner-card__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.practitioner-card__photo { width: 88px; height: 88px; flex: none; object-fit: cover; object-position: center 15%; border-radius: 8px; background: #EEE9E2; }
.practitioner-card__name { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--stem-color-espresso, #40312E); }
.practitioner-card__title { margin: 0.15rem 0 0; font-size: var(--stem-text-sm, 0.9rem); color: var(--stem-color-driftwood, #847971); }
.practitioner-card__bio {
  margin: 0; line-height: 1.6; color: var(--stem-color-driftwood, #847971);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.practitioner-card__toggle { position: absolute; opacity: 0; pointer-events: none; }
.practitioner-card__toggle:checked ~ .practitioner-card__bio { -webkit-line-clamp: unset; display: block; }
.practitioner-card__more { display: inline-block; margin-top: 0.5rem; font-weight: 600; font-size: var(--stem-text-sm, 0.9rem); color: var(--stem-color-espresso, #40312E); text-decoration: underline; cursor: pointer; }
.practitioner-card__more-close { display: none; }
.practitioner-card__toggle:checked ~ .practitioner-card__more .practitioner-card__more-open { display: none; }
.practitioner-card__toggle:checked ~ .practitioner-card__more .practitioner-card__more-close { display: inline; }
.practitioner-card__toggle:focus-visible ~ .practitioner-card__more { outline: 2px solid currentColor; outline-offset: 2px; }
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/**
    * Stem Health Visual Design System CSS
    *
    * This stylesheet is based on the brand guidelines provided in the
    * "Stem Health Visual Design System 250919.pdf" document.
    * It establishes a foundation for typography, color, spacing, and
    * common UI components like cards and buttons.
    *
    * @version 2.0
    * @date October 7, 2025
    */

/* ==========================================================================
    1. ROOT VARIABLES
    ========================================================================== */

:root {
    /* 🎨 BRAND COLORS */
    --stem-color-ash: #ECE8E0;
    --stem-color-vanilla: #FFFCF4;
    --stem-color-chocolate: #291E1C;
    --stem-color-espresso: #40312E;
    --stem-color-driftwood: #847971;
    --stem-color-sandstone: #C5BEB6;

    --stem-color-sky: #CCDFFF; 
    /* Link blue. Nothing in the brand palette reads as a hyperlink — deepsea is
       near black — and the source document these pages follow uses the standard
       document link blue. Measured 6.6:1 on white, 6.4:1 on the vanilla surface
       and 5.4:1 on the ash background — AA at every size on all three. */
    --stem-color-link: #1155CC;
    --stem-color-ocean: #2F3C50; 
    --stem-color-deepsea: #04192A;
    --stem-color-green: #4CAF50; /* Standard green for success operations */
    --stem-color-dark-green: #45a049; /* Darker green for hover states */
    --stem-color-sage: #9CAF88;
    --stem-color-sage-deep: #6B8068;
    --stem-color-warm-sand: #DDD5C0;
    --stem-color-warm-sand-dark: #B8A888;

    --stem-color-surface: var(--stem-color-vanilla);
    --stem-color-background: var(--stem-color-ash);
    --stem-color-border: var(--stem-color-ash);
    --stem-color-white: var(--stem-color-vanilla);
    --stem-color-success: var(--stem-color-green);
    --stem-color-warning: var(--stem-color-ocean);

    /* Text Colors */
    --stem-text-primary: var(--stem-color-chocolate);
    --stem-text-secondary: var(--stem-color-espresso);
    --stem-text-on-dark: var(--stem-color-white);

    --stem-color-header: var(--stem-color-deepsea);

    /* ✒️ TYPOGRAPHY */
    --stem-font-headline: 'Lato', Georgia, serif;
    --stem-font-body: 'Lato', system-ui, -apple-system, sans-serif;
    --stem-font-weight-regular: 400;
    --stem-font-weight-medium: 500;
    --stem-font-weight-bold: 700;

    /* 📐 SPACING & SIZING */
    --stem-spacing-xxs: 0.05rem;  /* 2px */
    --stem-spacing-xs: 0.2rem;  /* 4px */
    --stem-spacing-sm: 0.3rem;   /* 8px */
    --stem-spacing-md: 0.5rem;     /* 16px */
    --stem-spacing-lg: 0.7rem;   /* 24px */
    --stem-spacing-xl: 1.0rem;   /* 40px */
    --stem-spacing-xxl: 1.5rem;    /* 64px */


    /* Text Sizing */
    --stem-text-sm: 12px;
    --stem-text-md: 14px;
    --stem-text-lg: 20px;
    --stem-text-xl: 26px;

    /* Border Radius */
    --stem-radius-sm: 2px;
    --stem-radius-md: 5px;
    --stem-radius-lg: 10px;
    --stem-border-radius: var(--stem-radius-md); /* Generic alias */

    /* Shadows */
    --stem-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); /* Small shadow */
    --stem-shadow: 0 4px 12px rgba(62, 53, 51, 0.08);
    --stem-shadow-lg: 0 8px 24px rgba(62, 53, 51, 0.12);
}

/* ==========================================================================
    3. GLOBAL & RESET STYLES
    ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    margin: 0;
    font-family: var(--stem-font-body);
    font-weight: var(--stem-font-weight-regular);
    font-size: 12px;
    line-height: 1.6;
    color: var(--stem-text-primary);
    background-color: var(--stem-color-background);
    padding: 0;
    height: 100vh;
}

/* ==========================================================================
    4. TYPOGRAPHY
    ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--stem-font-headline);
    font-weight: var(--stem-font-weight-regular);
    line-height: 1.2;
    margin: var(--stem-spacing-sm) 0 var(--stem-spacing-md);
}
.stem-title
{
  font-family: var(--stem-font-headline);
  font-weight: var(--stem-font-weight-regular);
  line-height: 1.2;
  margin: var(--stem-spacing-sm) 0 var(--stem-spacing-md);
}

h1 { font-size: 3.5rem; letter-spacing: 0.1em; text-align: left; margin-bottom: var(--stem-spacing-xl); }
h2 { font-size: 20px; margin-bottom: var(--stem-spacing-sm); color: var(--stem-color-espresso); padding-bottom: var(--stem-spacing-xl); border-bottom: 1px solid var(--stem-color-ash); }
h3 { font-size: 18px; border-bottom: 1px solid var(--stem-color-ash); padding-bottom: var(--stem-spacing-xl); margin-bottom: var(--stem-spacing-lg); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; font-family: var(--stem-font-body); font-weight: var(--stem-font-weight-bold); text-transform: uppercase; letter-spacing: 0.05em; }

p { margin-top: 0; margin-bottom: var(--stem-spacing-md); }
p.lead { font-size: 1.25rem; color: var(--stem-text-secondary); }
a { color: var(--stem-color-deepsea); text-decoration: none; transition: opacity 0.2s ease; }
a:hover { opacity: 0.8; }

/* Links inside clinical copy have to LOOK like links.
   The global anchor colour above is deepsea (#04192A) — near black, and
   indistinguishable from the body text around it, so the parking links on the
   AHA details page read as plain text. QA: "it should remain blue by default".
   Scoped to .product-description (the preparation copy and the directions
   block) rather than changing every anchor in the app unasked. */
.product-description a {
    color: var(--stem-color-link);
    text-decoration: none;
}
.product-description a:hover {
    text-decoration: underline;
    opacity: 1;
}
small { font-size: 0.875rem; color: var(--stem-text-secondary); }
blockquote {
    margin: var(--stem-spacing-lg) 0;
    padding-left: var(--stem-spacing-lg);
    border-left: 3px solid var(--stem-color-pearl);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--stem-text-secondary);
}
ul, ol { padding-left: var(--stem-spacing-lg); }

/* ==========================================================================
    5. COMPONENT STYLES
    ========================================================================== */

/* Card Component */
.stem-card {
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--stem-color-border);
    border-radius: var(--stem-radius-lg);
    padding: var(--stem-spacing-lg);
    /* margin: var(--stem-spacing-lg); */
    /* width: 100%; */
}

.stem-card.stem-form {
  max-width: 600px;
  margin: 0 auto;
}
.stem-card--dark {
    background-color: var(--stem-color-ocean);
    color: var(--stem-text-on-dark);
}
.stem-card--dark h4, .stem-card--dark p { color: var(--stem-text-on-dark); }
.stem-card--accent { border-top: 4px solid var(--stem-color-sandstone); }

/* Button Component */
.stem-btn {
    display: inline-flex; /* Use inline-flex to make the button shrink to fit its content */
    align-items: center; /* Vertically center content */
    justify-content: flex-start; /* Horizontally center content */
    min-height: 2.5rem; /* Ensure a consistent minimum height (e.g., 40px) */
    max-height: 2.5rem;
    font-family: var(--stem-font-body);
    font-weight: var(--stem-font-weight-medium);
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0 var(--stem-spacing-lg); /* Adjust padding as height is now controlled by min-height */
    border-radius: var(--stem-radius-md);
    transition: all 0.2s ease-in-out; 
    text-decoration: none;
    line-height: 1; /* Normalize line height */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.stem-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* Space between icon and text */
}

.stem-btn iconify-icon {
  font-size: 1.2em; /* Adjust icon size relative to text */
}
.stem-btn--has-icon {
    padding-left: var(--stem-spacing-md);
}

.stem-btn span {
    opacity: 0.8;
}

.stem-btn .stem-btn__icon {
    margin-right: var(--stem-spacing-sm);
    opacity: 0.8;
}
.stem-btn:hover { 
    text-decoration: none; 
}
.stem-btn--primary {
    background-color: var(--stem-color-ocean);
    color: var(--stem-color-vanilla);
    border-color: var(--stem-color-ocean);
}
.stem-btn--primary:hover {
    background-color: var(--stem-color-espresso);
    border-color: var(--stem-text-primary);
    color: var(--stem-color-white);
}
.stem-btn--secondary {
    background-color: var(--stem-color-espresso);
    color: var(--stem-color-vanilla);
    border-color: var(--stem-color-espresso);
}
.stem-btn--secondary:hover { 
    background-color: var(--stem-color-ocean);
    border-color: var(--stem-color-border);
    color: var(--stem-color-white);
}
.stem-btn--header {
    background-color: var(--stem-color-ocean);
    color: var(--stem-text-on-dark);
    border-color: var(--stem-color-sky);
    opacity: 0.5;
}
.stem-btn--header:hover { 
    background-color: var(--stem-color-ocean);
    border-color: var(--stem-text-on-dark);
    opacity: 0.9;

}

.stem-btn--light {
    background-color: white;
    color: var(--stem-text-primary);
    border-color: var(--stem-color-ash);
}

.stem-btn--light:hover {
    border-color: var(--stem-color-sandstone);
    color: var(--stem-text-primary);
}

.stem-btn--success {
    background-color: var(--stem-color-success); /* This will be green */
    color: var(--stem-color-white);
    border-color: var(--stem-color-success);
}

.stem-btn--success:hover {
    background-color: var(--stem-color-dark-green);
    border-color: var(--stem-color-dark-green);
    color: var(--stem-color-white);
}

.stem-btn--danger {
    background-color: #dc3545;
    color: var(--stem-color-white);
    border-color: #dc3545;
}

.stem-btn--danger:hover {
    background-color: #a71d2a;
    border-color: #a71d2a;
    color: var(--stem-color-white);
}

.stem-button-flex-item {
    flex: 1 0 150px; /* Ensure a base width and allow growth */
    text-align: center;
}

/* Status List Component */
.status-list { list-style: none; padding: 0; margin: 0; }
.status-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--stem-spacing-md);
    border-radius: var(--stem-radius-md);
    background-color: var(--stem-color-background);
    margin-bottom: var(--stem-spacing-sm);
}
.status-list__item p { margin: 0; font-weight: var(--stem-font-weight-medium); }
.status-list__tag {
    font-size: 0.75rem;
    font-weight: var(--stem-font-weight-bold);
    padding: var(--stem-spacing-xs) var(--stem-spacing-sm);
    border-radius: var(--stem-radius-sm);
    text-transform: uppercase;
}
.status-list__tag--confirmed { background-color: var(--stem-color-success); color: white; }
.status-list__tag--scheduled { background-color: var(--stem-color-warning); color: white; }
.status-list__tag--upcoming { background-color: var(--stem-color-pearl); color: var(--stem-text-primary); }

/* Social Media Card */
.social-card {
    aspect-ratio: 9 / 16;
    border-radius: var(--stem-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--stem-spacing-lg);
    text-align: center;
    box-shadow: var(--stem-shadow-lg);
    position: relative;
}
.social-card h2, .social-card p { color: var(--stem-color-white); }
.social-card--chocolate { background-color: var(--stem-color-chocolate); }
.social-card--blueberry { background-color: var(--stem-color-deepsea); }
.social-card--image {
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
}
.social-card--image .content {
    background-color: rgba(0,0,0,0.5);
    padding: var(--stem-spacing-md);
    border-radius: var(--stem-radius-md);
}

/* ==========================================================================
    6. MOCKUP LAYOUT & UTILITIES
    ========================================================================== */

.stem-container { 
    width: 100%; 
    height: 100%;
    max-width: none; 
    padding: 0 var(--stem-spacing-md);
}

.stem-container-small {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--stem-spacing-md);
}

.stem-container-form {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px; /* Adjusted for smaller size */
    padding: 20px;
    text-align: left;
    flex: 1;
    padding: var(--stem-spacing-md);
}
.stem-container-login {
    width: 450px; /* Adjusted for smaller size */
    padding: 20px;
    text-align: left;
}
.section { margin-bottom: var(--stem-spacing-xxl); }
.grid { display: grid; gap: var(--stem-spacing-lg); }
.grid--2-col { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--4-col { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid--social { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--stem-spacing-lg); }

.color-palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--stem-spacing-lg); }
.color-swatch { border-radius: var(--stem-radius-md); padding: var(--stem-spacing-md); border: 1px solid var(--stem-color-border); background: var(--stem-color-surface); }
.color-swatch .swatch { height: 100px; border-radius: var(--stem-radius-sm); margin-bottom: var(--stem-spacing-sm); border: 1px solid rgba(0,0,0,0.05); }
.color-swatch p { margin: 0; font-weight: var(--stem-font-weight-medium); }
.color-swatch span { font-size: 0.875rem; color: var(--stem-text-secondary); font-family: monospace; }

/* Appointment Component Styles */
.appointment-details-grid {
    display: grid;
    grid-template-columns: auto 1fr; /* Icon column (auto) and text column (1fr) */
    align-items: center;
    gap: 4px; /* Small gap between icon and text */
    font-size: 0.75rem; /* Inherit from parent, but can be overridden */
}

.appointment-icon {
    font-size: 1rem; /* Adjust icon size */
    color: inherit; /* Icon color */
    margin-right: var(--stem-spacing-xs); /* Small margin to the right of the icon */
}

.grid-span-all {
    grid-column: 1 / -1; /* Make these items span all columns */
}

.appointment-item {
    width: 100%; /* Static width for the appointment component */
    position: relative; /* Ensure positioning context for absolute children */
}

/* Its own last row of the grid, aligned with the rows above: positioned
   absolutely it sat on top of a long service name. */
.appointment-duration-wrapper {
    grid-column: 1 / -1;
    order: 1;
    justify-self: start;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--stem-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px; /* Small gap between icon and text */
}

br {
  display: block;
  height: var(--stem-spacing-xs);
}

/* Feature Card Component */
.feature-card {
  display: block;
  position: relative;
  background-color: #FFFFFF;
  border-radius: var(--stem-radius-md);
  overflow: hidden;
  text-decoration: none;
  width: 300px; /* Static width for the feature card */
  height: 150px; /* Add a fixed height */
  transition: background-color 0.2s ease-in-out;
  color: var(--stem-color-ocean);
}

.feature-card--sky {
  background-color: var(--stem-color-sky);
}

.feature-card:hover {
  opacity: 0.9;
}

.feature-card iconify-icon {
  color: inherit;
}

.feature-card__content {
  padding: var(--stem-spacing-xl);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
}

.feature-card__title {
  margin: 10px 0px;
  font-size: 14px;
  font-weight: var(--stem-font-weight-bold);
  color: var(--stem-color-ocean);
}

.feature-card__subtext {
  margin: 0;
  font-size: 12px;
}

.feature-card--full-width {
  width: calc(2 * 300px + var(--stem-spacing-md));
  margin-bottom: var(--stem-spacing-md);
}

.feature-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stem-spacing-md);
  justify-content: flex-start; /* Left-align the flex items */
}

/* Slim Feature Card Component */
.slim-feature-card {
  display: flex;
  align-items: center; /* Re-introduce align-items center for the overall card */
  background-color: #FFFFFF;
  border-radius: var(--stem-radius-md);
  overflow: hidden;
  text-decoration: none;
  width: 100%;
  min-height: 117px; /* Grows when a long title wraps */
  transition: all 0.2s ease-in-out; /* Changed to all for smoother shadow transition */
  color: var(--stem-color-ocean);
  /* box-shadow: var(--stem-shadow-sm); Removed default shadow */
  padding: 20px; /* Increased padding to 20px */
  position: relative;
}

.slim-feature-card:hover {
  /* background-color: var(--stem-color-ash); Removed background hover effect */
  box-shadow: var(--stem-shadow-sm); /* Add shadow on hover */
  text-decoration: none; /* Remove text underlining on hover */
}

.slim-feature-card__main-content {
  display: flex;
  flex-direction: column;
  gap: var(--stem-spacing-md); /* Increased gap between icon and text to 16px */
  flex-grow: 1;
}

.slim-feature-card__icon-container {
  width: 28px; /* Changed from 32px to 28px */
  height: 28px; /* Changed from 32px to 28px */
  border-radius: 50%;
  background-color: var(--stem-color-ocean);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.slim-feature-card__icon-container iconify-icon {
  color: var(--stem-color-white);
  font-size: 16px; /* Adjusted icon font size to fit smaller circle */
}

.slim-feature-card__text-content { /* Renamed from slim-feature-card__content */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 28px; /* Keeps text clear of the arrow icon */
}

.slim-feature-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: var(--stem-font-weight-bold);
  color: var(--stem-color-ocean);
}

.slim-feature-card__subtext {
  margin: 0;
  font-size: 12px;
  color: var(--stem-color-espresso);
}

.slim-feature-card__arrow-container {
  position: absolute;
  right: 20px; /* Adjusted to 20px for padding */
  bottom: 20px; /* Adjusted to 20px for padding */
  top: auto; /* Remove top auto */
  transform: translateY(0); /* Remove transform for bottom positioning */
  font-size: 20px; /* Changed from 24px to 20px */
  color: var(--stem-color-driftwood);
}

.slim-feature-card--disabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 20px;
  border-radius: var(--stem-radius-md);
  border: 1px solid var(--stem-color-cloud);
  background-color: var(--stem-color-cloud);
  opacity: 0.6;
  cursor: not-allowed;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 768px) {
  .feature-cards-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjust to fit static width cards */
  }
}

.stem-card-interior {
  width: 100%;
  padding: var(--stem-spacing-lg);
}

.turbo-progress-bar {
  background-color: var(--stem-color-sky);
}

/* Disabled Button State */
.stem-btn[disabled] {
    background-color: var(--stem-color-driftwood);
    cursor: not-allowed;
    opacity: 0.7;
    color: var(--stem-text-on-dark); /* Ensure text is readable on driftwood */
    border-color: var(--stem-color-driftwood);
}

.stem-btn--disabled {
  background-color: var(--stem-color-driftwood);
  opacity: 0.7;
  color: var(--stem-text-on-dark); /* Ensure text is readable on driftwood */
  border-color: var(--stem-color-driftwood);
}



/* Agreement Page Specific Styles */
.agreement-page-wrapper .stem-container {
    margin-left: auto;
    margin-right: auto;
}

/* Password Toggle Component */
.password-input-wrapper {
  display: flex;
  align-items: center;
}

.password-toggle-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-right: 8px; /* Space between icon and input */
  order: -1; /* Move button to the left */
}

.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
  flex-grow: 1; /* Allow input to take remaining space */
}

.password-toggle-button iconify-icon {
  font-size: 1.5em; /* Make icon larger */
  color: var(--stem-color-espresso); /* Example color, adjust as needed */
  position: relative;
  top: 2px;
}
/* Chat Components - Consolidated */

.chat-window {
    border: 1px solid var(--stem-color-ash); /* Add a light border */
    border-radius: var(--stem-border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    height: 60vh;
    margin: 0 0;
}

.chat-window__header {
    background-color: var(--stem-color-white);
    color: var(--stem-text-primary);
    padding: var(--stem-spacing-md);
    border-bottom: 1px solid var(--stem-color-border);
}

.chat-window__title {
    margin: 0;
    font-size: 1rem;
    font-family: var(--stem-font-body);
    text-transform: uppercase;
    text-align: center;
    font-weight: var(--stem-font-weight-bold);
    color: var(--stem-text-secondary);
}

.chat-window__body {
    padding: var(--stem-spacing-md);
    display: flex;
    flex-direction: column;
    background-color: var(--stem-color-white); /* Clean white background */
    color: var(--stem-text-primary); /* Text color for light bg */
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
}

.chat-window__footer {
    padding: var(--stem-spacing-md);
    border-top: 1px solid var(--stem-color-border);
    background-color: var(--stem-color-surface);
    display: flex;
    flex-wrap: wrap;
    gap: var(--stem-spacing-sm);
    justify-content: flex-start;
    min-height: 50px;
    flex-shrink: 0;
}

.chat-message {
    display: flex;
    margin-bottom: var(--stem-spacing-sm);
    flex-shrink: 0;
    position: relative; /* Added for edit icon positioning */
}

.chat-message__bubble {
    padding: 0.6rem 1rem;
    border-radius: 20px;
    max-width: 80%;
    line-height: 1.4;
    font-size: 0.95rem;
}

.chat-message--left {
    justify-content: flex-start;
}

.chat-message--left .chat-message__bubble {
    background-color: var(--stem-color-ash);
    color: var(--stem-text-primary);
    border-bottom-left-radius: 5px;
}

.chat-message--right {
    justify-content: flex-end;
}

.chat-message--right .chat-message__bubble {
    background-color: var(--stem-color-ocean);
    color: var(--stem-color-white);
    border-bottom-right-radius: 5px;
}

/* Chat Options Buttons (chips) */
.chat-options-btn {
    width: calc(50% - var(--stem-spacing-sm)*4);
    height: 75px; /* Fixed height for two lines of text (adjust as needed) */
    line-height: 1.0; /* Adjust line-height to fit two lines within height */
    overflow: hidden; /* Hide overflowing text */
    padding: 0.8rem 1rem; /* Adjust vertical padding to center text within fixed height */
    min-height: initial;
    font-size: 0.9rem;
    font-weight: var(--stem-font-weight-medium);
    border-radius: var(--stem-border-radius);
    background-color: var(--stem-color-vanilla);
    color: var(--stem-color-ocean);
    border: 1px solid var(--stem-color-ocean);
    text-align: left; /* Keep text left aligned */
    margin: var(--stem-spacing-sm);
}
.chat-options-btn:hover {
    background-color: var(--stem-color-ocean);
    color: var(--stem-color-white);
    border-color: var(--stem-color-ocean);
}

.chat-options-btn.selected {
    background-color: var(--stem-color-ocean);
    color: var(--stem-color-white);
    border-color: var(--stem-color-ocean);
}

.chat-input-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--stem-spacing-sm);
    width: 100%;
}

.desktop-nav-card.stem-card {
    box-shadow: var(--stem-shadow);
}


/* Chat Text Input */
.chat-text-input-container {
  display: flex;
  width: 100%;
}

.chat-text-input {
  flex-grow: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.chat-send-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

[data-triage-target="inputArea"] {
  width: 100%;
}

/* Chat Text Input */
.chat-text-input-container {
  display: flex;
  width: 100%;
}

.chat-text-input {
  flex-grow: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.chat-send-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

[data-triage-target="inputArea"] {
  width: 100%;
}

/* New chat-edit-text-container styles for inside bubble */
.chat-message__bubble {
    position: relative; /* Establish positioning context for absolute children */
    /* original padding, border-radius, etc. retained from existing definition */
}

.chat-edit-text-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85em; /* Increased font size */
    cursor: pointer;
    z-index: 10;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
    background-color: transparent; /* Explicitly no background */
}

.chat-edit-text-container:hover {
    background-color: transparent; /* No background on hover either */
    text-decoration: underline; /* Add underline on hover for interaction */
}

.chat-message--right .chat-message__bubble .chat-edit-text-container {
    right: calc(100% + var(--stem-spacing-md)); /* Moved farther left */
    color: var(--stem-color-chocolate); /* Darker color for visibility */
}

.chat-message--left .chat-message__bubble .chat-edit-text-container {
    left: calc(100% + var(--stem-spacing-md)); /* Moved farther right */
    color: var(--stem-color-chocolate); /* Darker color for visibility */
}

/* Appointment Flow Progress Tracker */
.appointment-flow {
  width: 100%;
  padding: var(--stem-spacing-md);
  background-color: var(--stem-color-surface); /* Using stem-color-surface for consistency */
  border-bottom: 1px solid var(--stem-color-border); /* Using stem-color-border */
  display: flex;
  flex-direction: column;
  gap: var(--stem-spacing-lg);
  align-items: center;
  margin-bottom: var(--stem-spacing-xl);
  box-shadow: var(--stem-shadow-sm); /* Using a small shadow for depth */
  border-radius: var(--stem-border-radius);
}





.appointment-flow__info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--stem-spacing-xxs);
  width: 100%;
}

.appointment-flow__service-name {
  font-size: var(--stem-font-size-lg);
  font-weight: bold;
  color: var(--stem-text-primary); /* Using stem-text-primary */
}

.appointment-flow__appointment-time {
  font-size: var(--stem-font-size-md);
  color: var(--stem-text-secondary); /* Using stem-text-secondary */
}

.agreement-container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.stem-btn--sidebar {
    max-width: 160px;
    background-color: var(--stem-color-chocolate);
    color: var(--stem-color-sandstone);
    border-color: var(--stem-color-chocolate); /* Ensure border matches background */
}

.stem-btn--sidebar:hover,
.stem-btn--sidebar:focus {
    background-color: var(--stem-color-espresso);
    border-color: var(--stem-color-espresso);
    color: var(--stem-color-sandstone);
}

.stem-btn--sidebar--secondary {
    max-width: 160px;
    background-color: var(--stem-color-espresso);
    color: var(--stem-color-sandstone);
    border-color: var(--stem-color-espresso);
}

.stem-btn--sidebar--secondary:hover,
.stem-btn--sidebar--secondary:focus {
    background-color: var(--stem-color-ocean);
    border-color: var(--stem-color-border);
    color: var(--stem-color-white);
}

/* Client Dashboard Grid */
.client-dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 3fr; /* Left rail (Care Team / Progress / Account Setup) + wider main column */
  gap: var(--stem-spacing-md); /* Use existing spacing variable */
  align-items: start; /* Align cards to the top of their grid cells */
}

.client-dashboard-grid__column {
  display: flex;
  flex-direction: column;
  gap: var(--stem-spacing-md);
}

@media (max-width: 1280px) {
  .feature-card--full-width {
    width: 300px;
  }
}

@media (max-width: 768px) { /* Breakpoint for mobile */
  .client-dashboard-grid {
    grid-template-columns: 1fr; /* Single column on mobile */
  }

  .feature-card {
    width: calc(50% - 4px); /* Fit two cards on mobile with a small gap */
  }

  .feature-card--full-width {
    width: calc(50% - 4px);
  }

  .stem-container {
    height: auto;
    padding: 0 8px;
    padding-bottom: 80px;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* auto, not hidden: `hidden` already clips, so anything wider than the viewport
     was unreachable — QA reported being able to scroll up/down but not left/right
     after narrowing the window. `auto` clips identically and adds a scrollbar.
     .stem-container stays hidden so the page itself never shifts sideways. */
  .main-content {
    overflow-x: auto;
  }

  .stem-card {
    max-width: 100%;
    overflow-x: auto;
  }

  .stem-card.stem-form {
    max-width: 100%;
  }
}


/* Care Team Section */
.care-team-header {
  display: flex;
  align-items: flex-start; /* Align avatar and info/buttons to the top */
  margin-bottom: var(--stem-spacing-lg);
}

.care-team-avatar {
    margin-right: var(--stem-spacing-md); /* Add spacing between avatar and info/buttons */
}

.care-team-avatar img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
}

.care-team-actions {
  display: flex;
  flex-direction: column; /* Stack name/title and buttons vertically */
  align-items: flex-start; /* Left-align the text */
  gap: var(--stem-spacing-md); /* Space between info and buttons */
}

.care-team-info {
  text-align: left; /* Ensure text is left-aligned */
}

.care-team-name {
  font-size: 14px;
  font-weight: bold;
  margin: 0;
}

.care-team-title {
  font-size: 14px;
  color: var(--stem-text-secondary);
  margin: 0;
}

.care-team-buttons {
    display: flex;
    gap: var(--stem-spacing-lg); /* Space between the buttons */
    margin-top: var(--stem-spacing-sm); /* Space between title and buttons */
}

.care-team-letters {
  margin-top: var(--stem-spacing-lg);
}

.letter-block {
  margin-top: var(--stem-spacing-md);
  margin-bottom: var(--stem-spacing-md);
  padding: var(--stem-spacing-md);
  border-radius: var(--stem-radius-md);
}

.letter-title {
  font-size: 1.1rem;
  font-weight: bold;
  border-bottom: 1px solid var(--stem-color-ash);
  padding-bottom: var(--stem-spacing-sm);
  margin-bottom: var(--stem-spacing-sm);
}

.letter-content {
  font-size: 12px;
  line-height: 1.5;
}

.triage-layout {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap onto the next line */
  gap: 2rem;
}

.triage-left-column {
  flex: 1; /* Allows the column to grow */
  min-width: 300px; /* Prevents columns from becoming too narrow */
  order: 1; /* Default order for desktop */
}

.triage-right-column {
  flex: 1;
  min-width: 300px;
  order: 2; /* Default order for desktop */
}

@media (max-width: 768px) {
  .triage-layout {
    flex-direction: column;
  }

  .triage-left-column {
    order: 2; /* Chat section appears second on mobile */
  }

  .triage-right-column {
    order: 1; /* "Book Now" section appears first on mobile */
  }
}

@media (max-width: 768px) {
  .mobile-header-content {
    margin-top: 0 !important;
  }
}
.heading-button {
  background-color: var(--stem-color-ash);
  border-radius: var(--stem-radius-md);
  padding: var(--stem-spacing-sm) var(--stem-spacing-md);
  text-transform: uppercase;
  color: var(--stem-color-espresso);
  text-decoration: none;
  font-size: 8px;
  font-weight: var(--stem-font-weight-regular);
}

.heading-with-button {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}


.login-layout {
  display: flex;
  height: 100vh;
}

.stem-container-form {
  flex: 1;
  padding: 20px;
}

.login-image-column {
  flex: 0 0 auto; /* Image column takes only the width needed by its content */
  display: flex;
  justify-content: flex-end; /* Pushes the image to the right */
}


.devise-container {
  flex: 1; /* Allows the column to grow and fill space */
  padding: 20px;
  display: flex;
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  position: relative;
}



.onboarding-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.onboarding-input {
  background-color: transparent;
  border-color: var(--stem-color-sandstone);
}





/* Input Component Styles */
.button-group {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.button-group > * {
  margin-right: 10px;
}

.button-group > *:last-child {
  margin-right: 0;
}

.input-container {
  margin-bottom: 10px;
}

.input-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
}

.input {
  padding: 8px 12px;
  border-radius: 6px;
  border: 2px solid #ddd;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  box-sizing: border-box;
  min-height: 32px;
  width: 100%;
  resize: none;
  overflow: auto;
}

.input-inline {
  width: auto;
}

.input-container-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.checkbox-label {
  margin-left: 10px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Inline links inside checkbox labels (e.g. "I agree to the Terms and
   Conditions", product-specific hosted document name). The global anchor
   style is intentionally subtle for use in cards/buttons, but here the link
   needs to be obviously clickable against the bold label text. */
.checkbox-label a {
  color: var(--stem-color-ocean);
  text-decoration: underline;
}

.checkbox-label a:hover {
  opacity: 0.8;
}

.login-text {
  font-size: 0.9rem;
}

.login-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.login-actions > * {
  flex: 1;
  text-align: center;
}

.chat-skip-btn {
  text-align: center;
}

.fc-scroller {
  overflow-y: hidden !important;
}

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

.fc-daygrid-day-frame {
  padding: 0 !important; /* Remove default padding */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Tabs */
.tabs-container {
  margin-top: var(--stem-spacing-md);
  font-size: var(--stem-text-md)
}

.tabs-nav {
  display: flex;
  gap: var(--stem-spacing-md);
  border-bottom: 1px solid var(--stem-color-pearl);
  margin-bottom: var(--stem-spacing-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  /* A slim scrollbar is deliberate. This row scrolls horizontally when there are
     more tabs than fit — the comms timeline has eleven — and the scrollbar used
     to be hidden outright (scrollbar-width: none), so there was nothing to tell
     anyone the row continued past the edge. Filters simply looked absent. */
  scrollbar-width: thin;
  scrollbar-color: var(--stem-color-sandstone) transparent;
  padding-bottom: 2px;
}

.tabs-nav::-webkit-scrollbar {
  height: 6px;
}

.tabs-nav::-webkit-scrollbar-track {
  background: transparent;
}

.tabs-nav::-webkit-scrollbar-thumb {
  background: var(--stem-color-sandstone);
  border-radius: 3px;
}

.tabs-scroll-wrapper {
  display: flex;
  align-items: stretch;
  position: relative;
}

/* Inline link inside a sentence (e.g. "I agree to the Terms and Conditions").
   Consent checkboxes rendered the link in body colour, so clients could not
   tell it was clickable. */
.inline-text-link {
  color: var(--stem-color-ocean);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.inline-text-link:hover,
.inline-text-link:focus-visible {
  color: var(--stem-color-deepsea);
}

/* Week-over-Week look-back selector on the Operations Report. */
.wow-range-form {
  display: flex;
  align-items: center;
  gap: var(--stem-spacing-sm);
  flex-wrap: wrap;
}

.tabs-scroll-wrapper .tabs-nav--scrollable {
  flex: 1;
  min-width: 0;
}

.tabs-scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.25rem;
  color: var(--stem-color-driftwood);
  font-size: 1.25rem;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.tabs-scroll-arrow:hover {
  opacity: 1;
  color: var(--stem-color-deepsea);
}

/* Hidden when the strip cannot scroll further that way.
   visibility rather than display:none — the arrows keep occupying their column
   so the tab row does not jump sideways by ~28px each time an arrow appears or
   disappears mid-scroll. */
.tabs-scroll-arrow--hidden {
  visibility: hidden;
  pointer-events: none;
}

.tab-button-wrapper {
  border-bottom: 2px solid transparent;
  padding: 0 var(--stem-spacing-sm);
  margin-bottom: -1px;
  text-align: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.tab-button {
  background-color: transparent;
  border: none;
  padding: var(--stem-spacing-sm) 0;
  cursor: pointer;
  font-size: var(--stem-text-md);
  color: var(--stem-color-chocolate);
  transition: all 0.2s ease-in-out;
  text-align: center;
  border-bottom: 2px solid transparent;
}

.tab-button:hover {
  color: var(--stem-color-deepsea);
  border-bottom-color: var(--stem-color-sky);
}

.tab-button.active {
  color: var(--stem-color-deepsea);
  /* font-weight: bold; */
  border-bottom-color: var(--stem-color-deepsea);
}

.tab-button-wrapper.active {
  /* border-bottom-color: var(--stem-color-deepsea); */
}

.tab-panel {
  display: none;
  font-size: var(--stem-text-sm);
  padding: var(--stem-spacing-md) 0;
}

.tab-panel.active {
  display: block;
}

/* Password Validation Styles */
.password-input-wrapper {
  position: relative;
}

.password-toggle-button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--stem-spacing-xs);
  color: var(--stem-color-chocolate); /* Adjust as needed */
}

.password-requirements {
  font-size: var(--stem-font-size-sm);
  margin-top: var(--stem-spacing-sm);
}

.password-requirement-item {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Right-adjust the text */
  margin-bottom: var(--stem-spacing-xxs);
  font-weight: normal; /* Ensure text is not bolded */
}

.password-validation-container {
  position: relative;
}

.password-requirement-icon {
  margin-right: var(--stem-spacing-xxs);
  font-size: var(--stem-font-size-md); /* Adjust icon size */
}

.is-valid {
  color: var(--stem-color-driftwood); /* Blue color for valid */
}

.is-invalid {
  color: var(--stem-color-error); /* Red color for invalid */
}

.hidden {
  display: none !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-clear-button {
    display: none !important;
    -webkit-appearance: none;
}

.tui-calendar-header-info {
    display: none !important;
}


.feature-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--stem-color-ash);
  color: var(--stem-color-chocolate);
  padding: 2px 6px;
  border-radius: var(--stem-radius-md);
  font-size: 10px;
  font-weight: var(--stem-font-weight-bold);
  text-transform: uppercase;
}



/* ==========================================================================
   Component: Stem Progress
   ========================================================================== */
.stem-progress {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 1;
}

.stem-progress__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.stem-progress__step::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: var(--stem-color-sandstone);
    z-index: -1;
}

.stem-progress__step:last-child::before {
    display: none;
}

.stem-progress__indicator {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--stem-color-ash); /* CHANGED */
    border: 2px solid var(--stem-color-sandstone);
    color: var(--stem-color-sandstone);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--stem-font-weight-bold);
    font-size: 14px;
    margin-bottom: var(--stem-spacing-sm);
    transition: all 0.3s ease;
    z-index: 2;
}

.stem-progress__label {
    font-size: 12px;
    font-weight: var(--stem-font-weight-regular);
    color: var(--stem-color-sandstone);
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
    max-width: 120px;
    margin-top: var(--stem-spacing-sm);
}

.stem-progress__step--completed .stem-progress__indicator {
    background-color: var(--stem-color-ocean);
    border-color: var(--stem-color-ocean);
    color: var(--stem-color-vanilla);
}

.stem-progress__step--completed .stem-progress__label {
    color: var(--stem-color-ocean);
}

.stem-progress__step--completed::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: var(--stem-color-ocean);
    z-index: -1;
}

.stem-progress__step:last-child::after {
    display: none;
}

.stem-progress__step--active .stem-progress__indicator {
    background-color: var(--stem-color-ash); /* CHANGED */
    border-color: var(--stem-color-ocean);
    color: var(--stem-color-ocean);
    transform: scale(1.1);
}

.stem-progress__step--active .stem-progress__label {
    color: var(--stem-color-ocean);
    font-weight: 800;
}

.stem-progress__date {
    font-size: 10px;
    color: var(--stem-color-sandstone);
    margin-top: 2px;
}

.stem-progress__step--completed .stem-progress__date {
    color: var(--stem-color-ocean);
}

/* Tracker Mini Component */
.tracker-mini {
    padding: 0.75rem 0;
}

.tracker-mini + .tracker-mini {
    border-top: 1px solid var(--stem-color-background);
}

.tracker-mini__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--stem-color-espresso);
    margin: 0 0 0.5rem 0;
}

.tracker-mini__labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
}

.tracker-mini__step {
    font-size: 0.75rem;
    color: var(--stem-color-espresso);
    font-weight: 500;
}

.tracker-mini__next-step {
    font-size: 0.75rem;
    color: var(--stem-color-sandstone);
    font-weight: 400;
}

.tracker-mini__bar {
    display: flex;
    align-items: center;
    gap: 0;
}

.tracker-mini__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--stem-color-background);
    border: 2px solid var(--stem-color-sandstone);
    flex-shrink: 0;
}

.tracker-mini__dot--completed {
    background-color: var(--stem-color-ocean);
    border-color: var(--stem-color-ocean);
}

.tracker-mini__dot--active {
    background-color: var(--stem-color-vanilla);
    border-color: var(--stem-color-ocean);
    box-shadow: 0 0 0 2px rgba(0, 119, 182, 0.2);
}

.tracker-mini__line {
    flex: 1;
    height: 2px;
    background-color: var(--stem-color-sandstone);
}

.tracker-mini__line--filled {
    background-color: var(--stem-color-ocean);
}

.stem-btn--onboarding-continue {
    justify-content: center;
    text-transform: uppercase;
}

.appointments-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two equal columns for larger screens */
  gap: var(--stem-spacing-md); /* Add spacing between the columns */
}

@media (max-width: 768px) {
  .stem-container-login {
    width: 100%;
  }

  .login-image-column {
    display: none;
  }

  .devise-container {
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .appointments-grid {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }
}
/* ==========================================================================
   PRICE DISPLAY COMPONENTS
   ========================================================================== */

.price-display {
  display: flex;
  align-items: baseline;
  gap: 4px; /* Space between currency, number, and descriptor */
}

.price-currency {
  font-size: 1.2em; /* Slightly larger than descriptor, smaller than number */
  font-weight: normal;
  color: var(--stem-text-primary); /* Use primary text color */
}

.price-large {
  font-size: 2.5em; /* Significantly larger for the main price number */
  font-weight: bold;
  color: var(--stem-text-primary); /* Use primary text color */
}

.price-descriptor {
  font-size: 0.9em; /* Smaller for descriptor text */
  font-weight: normal;
  color: var(--stem-text-secondary); /* Use secondary text color */
}

/* ==========================================================================
   GLOBAL LOADING OVERLAY
   ========================================================================== */

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(236, 232, 224, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.loading-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--stem-color-sandstone);
  border-top-color: var(--stem-color-espresso);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  margin-top: var(--stem-spacing-md);
  font-size: var(--stem-text-md);
  color: var(--stem-color-espresso);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   PURCHASE FLOW CARD HEIGHT
   ========================================================================== */

@media (min-width: 769px) {
  .purchase-flow-card {
    min-height: 75vh;
    display: flex;
    flex-direction: column;
  }

  .purchase-flow-card .stem-card-interior {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
/* ─────────────────────────────────────────────────────────────────────────────
   Book Now cards (Clinic Booking PRD — "Main screen.png").
 
   The PRD's language is WHITE cards with a hairline border on the warm ash
   page, navy for titles, muted grey for body copy, and pale tinted pills.
   Book Now had been painting whole cards in --stem-color-driftwood and
   --stem-color-ocean instead, which is where "ugly" came from — and the ocean
   card was unreadable, since .feature-card__title is itself ocean.
   ───────────────────────────────────────────────────────────────────────────── */

.booking-card {
  display: flex;
  gap: var(--stem-spacing-lg);
  align-items: flex-start;
  background: #FFFFFF;
  border: 1px solid var(--stem-color-pearl, #E4DED4);
  border-radius: 14px;
  /* Not on the --stem-spacing scale: it tops out at 1.5rem and every step is
     too tight for a full-width card, where 8px left the icon against the
     border. Matches the 14px corner radius. */
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.booking-card:hover {
  border-color: var(--stem-color-sandstone);
  box-shadow: 0 2px 10px rgba(41, 30, 28, 0.06);
}

/* Muted, non-interactive: a category with nothing configured yet. */
.booking-card--muted,
.booking-card--muted:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--stem-color-pearl, #E4DED4);
  box-shadow: none;
  cursor: default;
}

.booking-card--muted .booking-card__title,
.booking-card--muted .booking-card__body {
  color: var(--stem-color-driftwood);
}

/* Pale rounded tile the category/service icon sits in. */
.booking-card__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--stem-color-ash);
  color: var(--stem-color-ocean);
  font-size: 20px;
}

.booking-card__main { flex: 1 1 auto; min-width: 0; }

.booking-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: var(--stem-font-weight-bold);
  color: var(--stem-color-ocean);
}

.booking-card__body {
  margin: 4px 0 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--stem-color-driftwood);
}

.booking-card__meta {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--stem-color-driftwood);
}

.booking-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

/* Affordance in the top-right: chevron for "open this", arrow for "go there". */
.booking-card__affordance {
  flex: 0 0 auto;
  align-self: center;
  color: var(--stem-color-driftwood);
  font-size: 18px;
}

/* ── Pills ─────────────────────────────────────────────────────────────────── */

.booking-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.6;
  white-space: nowrap;
}

/* Access — how you get it. Uppercase + tracked, per the mock. */
.booking-pill--access {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--stem-font-weight-bold);
  background: var(--stem-color-sky);
  color: var(--stem-color-ocean);
}

.booking-pill--access-outline {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--stem-font-weight-bold);
  background: transparent;
  border: 1px solid var(--stem-color-sandstone);
  color: var(--stem-color-driftwood);
}

/* Fulfilment — how paying works. */
.booking-pill--fulfilment { background: var(--stem-color-sky); color: var(--stem-color-ocean); }
.booking-pill--prepaid    { background: #FBF0DC; color: #7A5A16; }
.booking-pill--buy-only   { background: var(--stem-color-ash); color: var(--stem-color-driftwood); }

/* Status — "Active", "3 sessions left", "Ready to schedule". */
.booking-pill--status  { background: var(--stem-color-sky); color: var(--stem-color-ocean); }
.booking-pill--ready   { background: #E4F0E4; color: #2F5D34; }

/* Two-up in Region 1, three-up in the catalog — collapsing on narrow screens. */
.booking-grid {
  display: grid;
  gap: var(--stem-spacing-md);
  /* ~3 across on a normal desktop content width, as in the PRD mock; collapses
     to 2 then 1 on narrower viewports. */
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

/* ── Book Now spacing ───────────────────────────────────────────────────────── */

/* Search row. form_with only forwards attributes passed under :html, so a bare
   `style:` was dropped and this row had no gap to the grid below it. */
.booking-search {
  display: flex;
  align-items: center;
  gap: var(--stem-spacing-sm);
  flex-wrap: wrap;
  margin: var(--stem-spacing-sm) 0 var(--stem-spacing-lg);
}

.booking-catalog { margin-top: var(--stem-spacing-md); }

.booking-grid--results { margin-bottom: var(--stem-spacing-lg); }

/* Equal-height cards across a row, as in the PRD mock — grid rows otherwise
   size to each card's own copy and the row looks ragged. */
.booking-grid { align-items: stretch; }
.booking-card { height: 100%; }

/* ── Catalog tile (PRD "Browse Additional Services for Purchase") ─────────────
   A VERTICAL stack, unlike .booking-card's horizontal row: icon top-left with
   the open-affordance top-right, then title, then description, with the pills
   pinned to the bottom edge so they line up across a row regardless of how long
   each blurb is. That bottom alignment is what makes the mock's grid read as a
   grid.

   Padding is in px rather than a spacing token on purpose — the --stem-spacing
   scale is compressed (lg is 0.7rem ≈ 11px despite its comment), which is far
   tighter than the mock's card inset. */
.booking-tile {
  display: flex;
  flex-direction: column;
  min-height: 188px;
  padding: 18px;
  background: #FFFFFF;
  border: 1px solid var(--stem-color-pearl, #E4DED4);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

a.booking-tile:hover {
  border-color: var(--stem-color-sandstone);
  box-shadow: 0 2px 10px rgba(41, 30, 28, 0.06);
}

.booking-tile--muted,
.booking-tile--muted:hover {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  cursor: default;
}

.booking-tile--muted .booking-tile__title,
.booking-tile--muted .booking-tile__body {
  color: var(--stem-color-driftwood);
}

.booking-tile__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--stem-spacing-md);
}

.booking-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--stem-color-ash);
  color: var(--stem-color-ocean);
  font-size: 20px;
  flex: 0 0 auto;
}

.booking-tile__open {
  color: var(--stem-color-driftwood);
  font-size: 16px;
  flex: 0 0 auto;
}

.booking-tile__title {
  margin: 14px 0 0 0;
  font-size: 16px;
  font-weight: var(--stem-font-weight-bold);
  color: var(--stem-color-ocean);
}

/* flex-grow is what pins the tags to the bottom of every tile. */
.booking-tile__body {
  margin: 6px 0 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--stem-color-driftwood);
  flex: 1 1 auto;
}

.booking-tile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   Product description (care-team authored rich text).

   The global h3 rule is a page-section divider — border-bottom, padding-bottom
   xl AND margin-bottom lg. Inside a description that lands as a large gap
   between a heading like "Process" and the list under it, which is what reads
   as "awkward spacing". These headings are structure within a card, not page
   sections, so the divider treatment and the outsized gap both come off.
   ───────────────────────────────────────────────────────────────────────────── */

/* Body copy in a description is PRIMARY text, not secondary.
   It was rendering at a flat #666 — measurably lighter than the heading above
   it (#3E322F) — which read as faded against everything around it. Stated here
   rather than left to inherit so the intent is explicit and a stray grey from a
   parent cannot win. */
.product-description,
.product-description p,
.product-description li,
.product-description strong,
.product-description b,
.product-description em,
.product-description i {
    color: var(--stem-text-primary);
}

/* Headings were left out of the colour rule above, so a sub-heading inside a
   description still inherited the lighter grey while the body under it was
   primary — the same "faded in parts" symptom, one level up. */
.product-description h3,
.product-description h4,
.product-description h5 {
    color: var(--stem-text-primary);
    border-bottom: none;
    padding-bottom: 0;
    margin-top: var(--stem-spacing-md);
    margin-bottom: var(--stem-spacing-xs);
}

.product-description > :first-child {
    margin-top: 0;
}

.product-description p {
    margin-bottom: var(--stem-spacing-sm);
}

/* A heading immediately followed by its list is one unit — no gap between them. */
.product-description h3 + ul,
.product-description h3 + ol,
.product-description h4 + ul,
.product-description h4 + ol,
.product-description h5 + ul,
.product-description h5 + ol,
.product-description p + ul,
.product-description p + ol {
    margin-top: 0;
}

.product-description ul,
.product-description ol {
    margin-top: var(--stem-spacing-xs);
    margin-bottom: var(--stem-spacing-sm);
}

.product-description li {
    margin-bottom: var(--stem-spacing-xs);
}

.product-description li:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   TELEVISION DISPLAY

   The sign-in page's layout is reused wholesale (login-layout, devise-container,
   login-image-column, stem-container-login) so a clinic screen reads as the same
   product a patient signs in to — and keeps matching if sign-in is restyled.
   Only the pairing code is specific to this page: it is read from across a room,
   not from a keyboard.
   --------------------------------------------------------------------------- */
.display-code {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 2rem;
}

/* Tabular figures so digits keep their width between codes. */
.display-code__digit {
  font-size: 4rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--stem-font-weight-medium, 500);
  line-height: 1;
  padding: 0.75rem 1.25rem;
  border-radius: var(--stem-radius-md, 8px);
  background: var(--stem-color-ash);
  color: var(--stem-color-chocolate);
}

.display-lead {
  color: var(--stem-color-driftwood);
  text-align: center;
  margin-bottom: 2rem;
}

/* ---------------------------------------------------------------------------
   TELEVISION — THE REPORT DECK

   A presentation, not a page. One idea per slide, sized so it reads from the
   far side of a consult room, and the deck fills the panel exactly: a TV has
   no scrollbar anyone can reach, so anything below the fold is lost.

   Type is clamped between a vmin-relative size and a floor, because the same
   markup is opened on a laptop to check it before it goes on a wall.
   --------------------------------------------------------------------------- */
.tv-body {
  margin: 0;
  background: var(--stem-color-bone, #f6f3ef);
  color: var(--stem-color-chocolate, #3d2f27);
}

.tv-deck {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 5vmin 7vmin 3vmin;
  box-sizing: border-box;
}

/* The slide owns everything the footer does not. It scrolls only once cards
   are expanded past the panel; the inner's auto margins centre the content
   otherwise, without clipping its top the way justify-content would. */
.tv-slide {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  /* Room for the 6px focus ring, which the scroll box would otherwise clip at
     the left edge; the negative margin keeps content where it was. */
  padding: 0 8px;
  margin: 0 -8px;
}

.tv-slide__inner {
  margin: auto 0;
  width: 100%;
}

.tv-slide--center {
  align-items: center;
  text-align: center;
}

/* Shrink-wrapped so the title page centres as a block; the global h1 rule
   sets text-align: left, so the text is centred explicitly too. */
.tv-slide--center .tv-slide__inner { width: auto; }
.tv-slide--center .tv-slide__title,
.tv-slide--center .tv-slide__lead { text-align: center; }

.tv-slide__logo {
  height: 4vmin;
  min-height: 28px;
  margin-bottom: 4vmin;
  opacity: 0.8;
}

.tv-slide__title {
  font-size: clamp(2.5rem, 7vmin, 6rem);
  font-weight: var(--stem-font-weight-medium, 500);
  line-height: 1.1;
  margin: 0;
}

.tv-slide__heading {
  font-size: clamp(1.75rem, 4.2vmin, 3.5rem);
  font-weight: var(--stem-font-weight-medium, 500);
  line-height: 1.15;
  margin: 0 0 5vmin;
  color: var(--stem-color-driftwood, #8a7a6d);
}

.tv-slide__lead {
  font-size: clamp(1.1rem, 2.4vmin, 2rem);
  color: var(--stem-color-driftwood, #8a7a6d);
  margin: 3vmin 0 0;
}

.tv-prose {
  font-size: clamp(1.4rem, 3.4vmin, 3rem);
  line-height: 1.4;
  margin: 0;
  max-width: 22em;
}

/* The portal's Health Plan cards (health_story.css), scaled for the panel by
   their one em base. */
.tv-slide .hp-grid,
.tv-slide .hp-stack {
  font-size: clamp(1rem, 2.6vmin, 2.25rem);
  margin-bottom: 0;
}

/* A remote moves focus with the arrow keys, so an expandable card's summary
   needs as obvious a ring as the nav buttons. */
.tv-slide summary:focus {
  outline: 3px solid var(--stem-color-ocean, #4a6f7c);
  outline-offset: 3px;
}

.tv-intro {
  margin: -3vmin 0 3vmin;
  font-size: clamp(0.95rem, 2vmin, 1.6rem);
  color: var(--stem-color-driftwood, #8a7a6d);
}
.tv-intro summary { cursor: pointer; }
.tv-intro p {
  margin: 1vmin 0 0;
  max-width: 48em;
  line-height: 1.4;
}

/* ------------------------------------------------------------------ footer */
.tv-deck__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4vmin;
  padding-top: 3vmin;
  border-top: 1px solid var(--stem-color-pearl, #e8e4df);
}

/* Big enough to hit with a remote's focus ring, and to read from the chair. */
.tv-nav {
  font-size: clamp(1rem, 2.2vmin, 1.75rem);
  font-weight: var(--stem-font-weight-medium, 500);
  padding: 1.6vmin 3.5vmin;
  border: 1px solid var(--stem-color-pearl, #e8e4df);
  border-radius: var(--stem-radius-md, 8px);
  background: transparent;
  color: var(--stem-color-chocolate, #3d2f27);
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}

.tv-nav--primary {
  background: var(--stem-color-chocolate, #3d2f27);
  border-color: var(--stem-color-chocolate, #3d2f27);
  color: var(--stem-color-bone, #f6f3ef);
}

.tv-nav.is-disabled {
  opacity: 0.3;
  border-color: transparent;
}

/* A TV remote moves focus with the arrow keys, so the ring has to be obvious
   from across the room — this is the only affordance telling the clinician
   which control they are about to press. */
.tv-nav:focus {
  outline: 3px solid var(--stem-color-ocean, #4a6f7c);
  outline-offset: 3px;
}

.tv-nav-form { margin: 0; }

.tv-deck__progress {
  display: flex;
  gap: 1.5vmin;
}

.tv-dot {
  width: 1.2vmin;
  height: 1.2vmin;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  background: var(--stem-color-pearl, #e8e4df);
}

.tv-dot.is-current { background: var(--stem-color-chocolate, #3d2f27); }

.tv-deck__middle { display: flex; align-items: center; gap: 2.5vmin; }
.tv-nav--section { border-radius: 999px; }
.tv-nav--overview { border-radius: 999px; margin-bottom: 2vmin; }

/* ---------------------------------------------------------------------------
   ALLOWANCE EDITOR

   Search, pick, set an amount. Replaces a grid of number boxes that had to name
   every column by hand — which is how an entitlement ended up granted in the
   database and invisible in the form.
   --------------------------------------------------------------------------- */
.allowance-editor {
  border: 1px solid var(--stem-color-pearl, #e8e4df);
  border-radius: var(--stem-radius-md, 8px);
  padding: var(--stem-spacing-md, 1rem);
}

.allowance-editor__search { position: relative; margin-bottom: var(--stem-spacing-md, 1rem); }

.allowance-editor__search input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--stem-color-pearl, #e8e4df);
  border-radius: var(--stem-radius-sm, 4px);
}

/* Capped and scrollable: the list is short today, but a form that grows its own
   height as you type moves the fields under the cursor. */
.allowance-editor__results {
  margin-top: 0.4rem;
  max-height: 14rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.allowance-editor__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--stem-color-pearl, #e8e4df);
  cursor: pointer;
}

.allowance-editor__option:hover,
.allowance-editor__option:focus { background: var(--stem-color-ash, #f2efec); }

.allowance-editor__option-label { font-weight: var(--stem-font-weight-medium, 500); }

/* What the entitlement actually books. The column name alone never said. */
.allowance-editor__option-meta {
  font-size: 0.8rem;
  color: var(--stem-color-driftwood, #8a7a6d);
}

.allowance-editor__row {
  display: flex;
  align-items: center;
  gap: var(--stem-spacing-md, 1rem);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--stem-color-pearl, #e8e4df);
}

.allowance-editor__row-label { flex: 1; display: flex; flex-direction: column; }
.allowance-editor__row-label small { color: var(--stem-color-driftwood, #8a7a6d); }

.allowance-editor__amount {
  width: 5.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--stem-color-pearl, #e8e4df);
  border-radius: var(--stem-radius-sm, 4px);
}

.allowance-editor__toggle { display: flex; align-items: center; gap: 0.4rem; }

.allowance-editor__remove {
  background: transparent;
  border: 0;
  color: var(--stem-color-clay, #a4503c);
  cursor: pointer;
  padding: 0.3rem 0.5rem;
}

.allowance-editor__none {
  color: var(--stem-color-driftwood, #8a7a6d);
  padding: 0.5rem 0;
  margin: 0;
}

/* Pay-after booking acknowledgement. Nothing is charged at booking, so this is
   the only place the member sees the cancellation terms before they commit. */
.booking-terms {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: var(--stem-spacing-md, 1rem) 0;
  font-size: var(--stem-text-sm);
  color: var(--stem-text-primary);
}

.booking-terms input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   TELEVISION — THE ANNUAL HEALTH ASSESSMENT (displays/aha)
   --------------------------------------------------------------------------- */
.tv-aha {
  --aha-normal-bg: #EEF2EA; --aha-normal-line: #C9D5C1; --aha-normal-ink: #4B5E47; --aha-normal-dot: #4F6B52;
  --aha-minor-bg: #E8EFFA; --aha-minor-line: #A9C0E6; --aha-minor-ink: #3C5A8A; --aha-minor-dot: #5878AE;
  --aha-attn-bg: #FAF1E1; --aha-attn-line: #D9B977; --aha-attn-ink: #8A6A1E; --aha-attn-dot: #A8843F;
  --aha-track: #E8E2DA; --aha-band: #AFC2A6; --aha-line: #E8E2DA; --aha-muted: #847971;
}
.tv-aha-counts { display: flex; justify-content: flex-end; gap: 4vmin; font-size: clamp(1rem, 2.2vmin, 1.8rem); color: var(--stem-color-driftwood, #8a7a6d); margin: -7vmin 0 3vmin; }
.tv-aha-counts strong { font-size: 1.4em; font-weight: 400; margin-right: 0.3em; }
.tv-aha-counts__normal strong { color: var(--aha-normal-ink); }
.tv-aha-counts__minor strong { color: var(--aha-minor-ink); }
.tv-aha-counts__attn strong { color: var(--aha-attn-ink); }
.tv-aha-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(28vmin, 1fr)); gap: 2.5vmin; align-items: start; }
.tv-aha-column { display: flex; flex-direction: column; gap: 1vmin; }
.tv-aha-column__title {
  font-family: var(--stem-font-headline); font-weight: 400; font-size: clamp(1.1rem, 2.8vmin, 2.4rem);
  margin: 0 0 0.6vmin; padding-bottom: 1vmin; border-bottom: 2px solid var(--stem-color-espresso, #40312E);
}
.tv-aha-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(28vmin, 1fr)); gap: 1.5vmin; }
.tv-aha-tile {
  display: flex; flex-direction: column; gap: 0.6vmin; padding: 1.4vmin 1.8vmin;
  background: #F7F5F1; border: 1px solid var(--aha-line, #E8E2DA);
  border-radius: 1vmin; color: inherit; text-decoration: none;
}
.tv-aha-tile:focus { outline: 3px solid var(--stem-color-ocean, #2F3C50); outline-offset: 3px; }
.tv-aha-tile--normal { background: var(--aha-normal-bg); border-color: var(--aha-normal-line); }
.tv-aha-tile--minor_finding, .tv-aha-tile--worth_monitoring { background: var(--aha-minor-bg); border-color: var(--aha-minor-line); }
.tv-aha-tile--needs_attention, .tv-aha-tile--urgent { background: var(--aha-attn-bg); border-color: var(--aha-attn-line); }
.tv-aha-tile__eyebrow {
  display: flex; justify-content: space-between; gap: 1vmin;
  font-size: clamp(0.7rem, 1.5vmin, 1.2rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--aha-muted);
}
.tv-aha-tile--normal .tv-aha-tile__eyebrow { color: var(--aha-normal-ink); }
.tv-aha-tile--minor_finding .tv-aha-tile__eyebrow { color: var(--aha-minor-ink); }
.tv-aha-tile--needs_attention .tv-aha-tile__eyebrow { color: var(--aha-attn-ink); }
.tv-aha-tile__meta { letter-spacing: 0; text-transform: none; color: var(--aha-muted); }
.tv-aha-tile__title { font-size: clamp(1.1rem, 2.6vmin, 2.2rem); font-weight: 400; }
.tv-aha-meta { font-size: clamp(0.9rem, 1.9vmin, 1.6rem); color: var(--stem-color-driftwood, #8a7a6d); }
.tv-aha-chip { font-size: clamp(0.8rem, 1.7vmin, 1.4rem); vertical-align: middle; margin-left: 1vmin; }
.tv-aha-eyebrow { margin: 0; font-size: clamp(0.8rem, 1.7vmin, 1.4rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--aha-muted); }
.tv-aha-eyebrow--normal { color: var(--aha-normal-ink); }
.tv-aha-eyebrow--minor_finding { color: var(--aha-minor-ink); }
.tv-aha-eyebrow--needs_attention { color: var(--aha-attn-ink); }
.tv-aha-station__title { font-family: var(--stem-font-headline); font-size: clamp(1.6rem, 4.2vmin, 3.6rem); font-weight: 400; margin: 0.4vmin 0 1vmin; }
.tv-aha-text { font-size: clamp(1.1rem, 2.6vmin, 2.2rem); line-height: 1.5; max-width: 46em; }
.tv-aha-findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(40vmin, 1fr)); gap: 2vmin; font-size: clamp(1rem, 2.2vmin, 1.9rem); }
.tv-aha-measures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 5vmin; row-gap: 2.4vmin; margin-top: 2vmin; }
.tv-aha-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 5vmin; margin-top: 2vmin; }
.tv-aha-ear { display: flex; flex-direction: column; gap: 2.4vmin; }
.tv-aha-measure__row { display: flex; justify-content: space-between; align-items: baseline; gap: 2vmin; flex-wrap: wrap; }
.tv-aha-measure__label { font-size: clamp(1rem, 2.2vmin, 1.9rem); color: var(--stem-color-espresso, #40312E); }
.tv-aha-measure__value small { font-size: clamp(0.85rem, 1.8vmin, 1.5rem); color: var(--aha-muted); margin-right: 1.5vmin; }
.tv-aha-measure__value strong { font-size: clamp(1.4rem, 3.4vmin, 2.9rem); font-weight: 600; }
.tv-aha .aha-bar { height: 1vmin; margin-top: 1.2vmin; }
.tv-aha .aha-bar__dot { width: 0.6vmin; height: 2.4vmin; border-radius: 2px; box-shadow: none; }
.tv-aha-table { width: 100%; border-collapse: collapse; font-size: clamp(1rem, 2.4vmin, 2rem); margin-top: 2vmin; }
.tv-aha-table th { text-align: left; font-weight: 500; padding: 1vmin 1.5vmin 1vmin 0; }
.tv-aha-table td { padding: 1vmin 1.5vmin; border-top: 1px solid var(--stem-color-pearl, #e8e4df); }
.tv-aha-table__range { color: var(--stem-color-driftwood, #8a7a6d); }
.tv-aha-actions { font-size: clamp(1.2rem, 3vmin, 2.6rem); line-height: 1.5; }
.tv-aha-normal-line { color: var(--aha-normal-ink); }
.tv-aha-steps__eyebrow { letter-spacing: 0.14em; }
.tv-slide__heading--hero { font-family: var(--stem-font-headline); color: var(--stem-color-espresso, #40312E); font-weight: 400; margin-bottom: 3vmin; }
.tv-aha-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stem-color-pearl, #e8e4df); }
.tv-aha-step { display: grid; grid-template-columns: auto 1fr auto; gap: 3vmin; align-items: center; padding: 2.6vmin 0; border-bottom: 1px solid var(--stem-color-pearl, #e8e4df); }
.tv-aha-step__number { display: inline-flex; align-items: center; justify-content: center; width: 7vmin; height: 7vmin; border-radius: 50%; background: var(--stem-color-espresso, #40312E); color: #FFFCF4; font-size: clamp(1.2rem, 3.2vmin, 2.6rem); font-family: var(--stem-font-headline); }
.tv-aha-step__title { margin: 0; font-family: var(--stem-font-headline); font-weight: 400; font-size: clamp(1.4rem, 3.8vmin, 3.2rem); }
.tv-aha-step__detail { margin: 0.8vmin 0 0; font-size: clamp(1rem, 2.4vmin, 2rem); line-height: 1.45; max-width: 40em; }
.tv-aha-step__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1vmin; max-width: 38vmin; }
.tv-aha-step__chip { border: 1px solid var(--stem-color-pearl, #e8e4df); border-radius: 999px; padding: 0.6vmin 1.6vmin; font-size: clamp(0.85rem, 1.9vmin, 1.5rem); background: #fff; }
.tv-aha-impression { background: #F3F0EA; border: 1px solid var(--aha-line); border-radius: 1vmin; padding: 2vmin 2.4vmin; margin: 2vmin 0; max-width: 60em; }
.tv-aha-impression__text { margin: 1vmin 0 0; font-size: clamp(1rem, 2.4vmin, 2rem); line-height: 1.45; }
.tv-aha-lines { list-style: none; padding: 0; margin: 2vmin 0 0; font-size: clamp(1rem, 2.4vmin, 2rem); line-height: 1.6; }
.tv-aha-table tr.is-lowest td { font-weight: 700; }
.tv-aha-report-button__count { color: var(--aha-muted); font-weight: 400; }

/* A member's included session on a product page: what it would cost, crossed
   out, and what they hold. */
.allowance-notice {
  padding: var(--stem-spacing-md);
  background: var(--stem-color-ocean-light, #e3f2fd);
  border-radius: var(--stem-radius-md, 8px);
}

/* Order Imaging: quick picks for the Annual Health Assessment studies. */
.imaging-quick { margin: var(--stem-spacing-md, 1rem) 0; }
.imaging-quick h3 { margin: 0 0 0.5rem; }
.imaging-quick__buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Order Imaging, AHA mode: several studies on one date, a time each. */
.imaging-aha [hidden] { display: none; }
.imaging-aha__studies { border: 1px solid var(--stem-color-border, #e5e7eb); border-radius: 6px; padding: 12px 16px; margin: 16px 0; }
.imaging-aha__studies legend { padding: 0 6px; font-size: var(--stem-text-sm); }
.imaging-aha__study { display: flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0; }
.imaging-aha__meta { color: var(--stem-color-muted, #6b7280); font-size: var(--stem-text-sm); }
.imaging-aha__outcomes { list-style: none; padding: 0; margin: 0 0 16px; }
.imaging-aha__outcome { padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; border: 1px solid; }
.imaging-aha__outcome--booked { background: #d1e7dd; color: #0f5132; border-color: #badbcc; }
.imaging-aha__outcome--failed { background: #f8d7da; color: #842029; border-color: #f5c2c7; }
/* Add to your main stylesheet (e.g., app/assets/stylesheets/triage.css) */

.triage-container {
  display: flex;
  justify-content: center;
  min-height: 80vh;
  background-color: #f8f9fa; /* Light grey background from screenshot */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border-radius: 12px;
}

.triage-card {
  background: white;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 20px; /* Ensure consistent height */
}

.triage-card__header {
  padding: 2rem 2rem 1rem 2rem;
}

.triage-title {
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.triage-subtitle {
  margin-bottom: 1.5rem;
}

.triage-card__body {
  padding: 0 2rem 2rem 2rem;
  flex-grow: 1;
  overflow-y: auto;
}

/* Option List Styling */
.option-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.option-item:hover {
  border-color: #b0b0b0;
  background-color: #fcfcfc;
}

.option-item.selected {
  border-color: #2c3e50; /* Dark Blue */
  background-color: #f0f4f8;
  box-shadow: 0 0 0 1px #2c3e50;
}

/* Radio Circle / Checkbox Square */
.option-icon {
  width: 24px;
  height: 24px;
  border: 2px solid #ccc;
  border-radius: 50%; /* Make square for checkbox via JS class if needed */
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.option-item.selected .option-icon {
  border-color: #2c3e50;
}

.option-item.selected .option-icon::after {
  content: '';
  width: 12px;
  height: 12px;
  background-color: #2c3e50;
  border-radius: 50%;
}

/* Footer Styling */
/* flex-end + an auto margin on Back, NOT space-between.
 *
 * space-between places a SINGLE remaining child at flex-start, so on the steps
 * where Back is hidden (the first question, and anywhere historyStack is empty)
 * the Next button jumped to the left. Pushing Back away with margin-right:auto
 * gives the identical two-button layout while leaving a lone Next on the right. */
.triage-card__footer {
  padding: 1.5rem 2rem;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  background-color: white;
}

.triage-card__footer [data-triage-target="backButton"] {
  margin-right: auto;
}

.btn-outline {
  background: transparent;
  border: 1px solid #ccc;
  color: #333;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.btn-solid {
  background-color: #2c3e50;
  color: white;
  border: none;
  padding: 0.75rem 2.5rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.btn-solid:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.hidden {
  display: none !important;
}

/* Custom classes for review screen and emergency stop - replacing Tailwind */
.review-container-list {
  display: flex;
  flex-direction: column;
  gap: 0px; /* Equivalent to gap-4 */
}

.review-item {
  padding: 8px; /* Equivalent to p-4 */
}

.review-item-title {
  font-weight: 700; /* Equivalent to font-bold */
  margin-bottom: 0.25rem; /* Small margin-bottom */
}

.review-item-answer {

}

.emergency-message-card {
  padding: 1rem; /* p-4 */
  background-color: #fee2e2; /* bg-red-50 */
  color: #991b1b; /* text-red-700 */
  border: 1px solid #fecaca; /* border border-red-200 */
  border-radius: 0.5rem; /* rounded */
}

.emergency-message-card h3 {
  font-weight: 700; /* font-bold */
  font-size: 1.125rem; /* text-lg */
  margin-bottom: 0.5rem; /* mb-2 */
}

/* Triage Layout for book.html.erb */
.triage-layout {
  display: flex;
  gap: 20px; /* Space between columns */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  justify-content: center; /* Center content when wrapped */
}

.triage-left-column {
  flex: 1; /* Take up remaining space */
  min-width: 300px; /* Minimum width before wrapping */
}

.triage-right-column {
  flex: 0 0 350px; /* Fixed width for the right column */
  border: 1px solid var(--stem-color-border); /* from old inline style */
  border-radius: 8px; /* from old inline style */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* from old inline style */
  padding: 20px; /* from old inline style */
}

/* Consent Question Styling */
.consent-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.consent-body {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #444;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.consent-body p {
  margin-bottom: 0.75rem;
}

.consent-body p:last-child {
  margin-bottom: 0;
}

.consent-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.consent-checkbox-label:hover {
  border-color: #b0b0b0;
  background-color: #fcfcfc;
}

.consent-checkbox {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: #2c3e50;
}

.button-container-col {
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding-top: 0px;
}

.button-group-row {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
  .triage-container {
    min-height: auto;
  }

  .triage-card {
    margin: 8px;
  }

  .triage-card__header {
    padding: 1rem 1rem 0.5rem 1rem;
  }

  .triage-card__body {
    padding: 0 1rem 1rem 1rem;
  }

  .triage-card__footer {
    padding: 1rem;
  }

  .triage-layout {
    flex-direction: column;
  }

  .triage-left-column {
    min-width: 0;
    width: 100%;
  }

  .triage-right-column {
    flex: 1 1 auto;
    width: 100%;
  }

  .button-group-row {
    flex-direction: column;
  }

  .fifty-percent-button {
    width: 100% !important;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *






 */