/* ============================================================
   EasySpine  |  Patient Care Portal
   Consumes shared tokens from packages/design/tokens.css.
   ============================================================ */

/* ---- Theme overrides ---- */

body[data-theme="rust"] {
  --accent:       #a0522d;
  --accent-soft:  rgba(160, 82, 45, 0.12);
  --accent-ink:   #804023;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  color: var(--ink);
  background:
    radial-gradient(circle at top left, var(--accent-soft), transparent 34%),
    radial-gradient(circle at bottom right, var(--accent-soft), transparent 30%),
    var(--bg);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; color: inherit; }

/* ---- Demo banner (app-level, gated by DEMO_FALLBACK_ENABLED) ---- */
.demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  padding: 6px 16px;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-align: center;
  letter-spacing: 0.3px;
}
.demo-banner ~ * { margin-top: 32px; }

/* ============================================================
   SHELLS
   ============================================================ */

.patient-shell {
  max-width: 1480px;
  margin: 0 auto;
  padding: var(--gap-lg);
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 420px);
  gap: var(--gap-lg);
  align-items: stretch;
}

.auth-hero, .auth-panel, .card {
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
}

.auth-hero {
  border-radius: var(--radius-xl);
  padding: var(--gap-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at top left, var(--accent-soft), transparent 32%),
    var(--surface);
}

.auth-panel {
  border-radius: var(--radius-xl);
  padding: var(--gap-lg);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* ---- Brand ---- */

.brand-row, .topbar {
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  align-items: center;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
}

.brand-lockup strong,
.brand-lockup span,
.brand-lockup div { display: block; }

.brand-lockup span:last-child,
.utility-links a,
.topbar-actions a,
.topbar-actions span { color: var(--muted); }

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-xs);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-ink) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.utility-links, .topbar-actions, .hero-meta, .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  align-items: center;
}

/* ---- Typography ---- */

.auth-copy h1, .hero-card h1, .empty-state h1 {
  margin: 0;
  font-size: clamp(2.3rem, 4vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.auth-copy p, .hero-card p, .rail-header p,
.section-head p, .care-card p, .checklist-item p,
.empty-state p, .credential-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.auth-copy {
  display: grid;
  gap: var(--gap);
  max-width: 720px;
}

/* ---- Feature strip ---- */

.feature-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-sm);
}

.feature-strip div, .stat-card, .care-card,
.checklist-item, .credential-card, .episode-button {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.feature-strip div {
  padding: var(--gap);
  display: grid;
  gap: 4px;
}

.feature-strip span, .stat-card span,
.care-card p, .checklist-item span,
.trend-row span, .episode-button span,
.episode-button small, .panel-header p,
.form-message { color: var(--muted); }

.eyebrow {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
}

/* ---- Section heads ---- */

.panel-header, .rail-header, .section-head, .hero-card {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-md);
}

.panel-header, .rail-header, .section-head {
  align-items: flex-start;
}

.panel-header, .rail-header { flex-direction: column; justify-content: flex-start; }

.section-head > div, .hero-card > div:first-child {
  display: grid;
  gap: var(--gap-xs);
}

.rail-header { gap: var(--gap-sm); }

.panel-header h2, .section-head h2, .rail-header h2 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: -0.03em;
}

/* ---- Forms ---- */

.auth-form, .checkin-form, .episode-list,
.checklist-list, .trend-list {
  display: grid;
  gap: var(--gap-md);
}

.auth-form label, .checkin-form label {
  display: grid;
  gap: var(--gap-xs);
}

.auth-form span, .checkin-form span, .checkbox-field span {
  font-size: 0.95rem;
  font-weight: 600;
}

input, select, textarea {
  width: 100%;
  padding: var(--input-padding);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--ink);
  font-size: var(--input-font-size);
  transition: border-color var(--ease), box-shadow var(--ease);
}

input:focus, select:focus, textarea:focus {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--accent);
  outline-offset: -2px;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
}

.checkbox-field input { width: 18px; height: 18px; margin: 0; }

/* ---- Buttons ---- */

.primary-button, .secondary-button, .episode-button {
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.primary-button, .secondary-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: var(--btn-min-height);
  padding: 0 var(--gap);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--weight-semibold);
}

.primary-button {
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-ink) 100%);
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.16);
}

.secondary-button {
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--surface);
}

.primary-button:hover, .secondary-button:hover, .episode-button:hover {
  transform: translateY(-1px);
}

.primary-button:disabled { opacity: 0.66; cursor: wait; }

.credential-card {
  padding: var(--gap);
  display: grid;
  gap: var(--gap-xs);
}

.demo-actions {
  display: grid;
  gap: var(--gap-sm);
}

/* ---- Pills / chips ---- */

.status-pill, .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 var(--gap-sm);
  border-radius: var(--radius-pill);
  font-size: 0.84rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--surface);
}

.status-pill.online  { color: var(--success); background: var(--success-soft); }
.status-pill.offline { color: var(--warning); background: var(--warning-soft); }
.chip                { color: var(--muted); background: var(--surface-muted); }

.form-message { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.form-message.error { color: var(--danger); }

/* ============================================================
   PORTAL LAYOUT
   ============================================================ */

.portal-shell {
  display: grid;
  gap: var(--gap-lg);
}

.portal-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--gap-lg);
  align-items: start;
}

.card {
  border-radius: var(--radius-xl);
  padding: var(--gap-lg);
}

.episode-rail {
  position: sticky;
  top: var(--gap-lg);
  display: grid;
  gap: var(--gap);
}

.episode-button {
  width: 100%;
  padding: var(--gap-md);
  text-align: left;
  display: grid;
  gap: 4px;
}

.episode-button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.08);
}

.portal-main, .content-grid, .care-grid {
  display: grid;
  gap: var(--gap);
}

/* ---- Hero card ---- */

.hero-card { align-items: center; padding: var(--gap-lg); }

.hero-meta { margin-top: var(--gap); }

.hero-meta span {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-muted);
}

.hero-side {
  min-width: 140px;
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
}

.hero-side strong {
  font-size: 2.6rem;
  letter-spacing: -0.06em;
  color: var(--accent-ink);
}

/* ---- Stats grid ---- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-md);
}

.stat-card {
  padding: var(--gap);
  display: grid;
  gap: 4px;
}

.stat-card strong {
  font-size: 1.8rem;
  letter-spacing: -0.05em;
}

.stat-card small { color: var(--muted); }

/* ---- Content grid — asymmetric for primary action emphasis ---- */

.content-grid {
  grid-template-columns: 1.3fr 0.7fr;
}

.care-grid {
  grid-template-columns: 1fr;
}

.care-card, .checklist-item {
  padding: var(--gap);
  display: grid;
  gap: var(--gap-xs);
}

.checklist-item > div:first-child {
  display: grid;
  gap: 2px;
}

.checklist-item[data-emphasis="action"] {
  border-color: rgba(185, 77, 72, 0.22);
  background: var(--danger-soft);
}

.checklist-item[data-emphasis="complete"] {
  border-color: rgba(47, 125, 86, 0.18);
  background: var(--success-soft);
}

.checklist-item[data-emphasis="upcoming"] {
  border-color: rgba(192, 106, 27, 0.18);
  background: var(--warning-soft);
}

/* ---- Check-in form ---- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
}

/* ---- Trend rows ---- */

.trend-row {
  display: grid;
  gap: var(--gap-xs);
  padding-bottom: var(--gap-sm);
  border-bottom: 1px solid var(--line);
}

.trend-row:last-child { padding-bottom: 0; border-bottom: 0; }
.trend-row strong { display: block; margin-bottom: 2px; }

.trend-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}

.trend-bar-track {
  height: 8px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--line);
}

.trend-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, #77c5b8 100%);
}

.empty-state {
  display: grid;
  gap: var(--gap-sm);
  place-items: center;
  text-align: center;
  padding: var(--gap-xl) var(--gap-lg);
}
.empty-state__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-wash, var(--accent-soft));
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  margin-bottom: var(--gap-sm);
}
.empty-state h1 {
  font-size: 1.5rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  margin: 0;
}
.empty-state p {
  max-width: 420px;
  line-height: var(--leading-normal);
}

code {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  background: var(--surface-muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet — stack portal layout but keep episode rail sticky */
@media (max-width: 1320px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1120px) {
  .portal-layout,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .episode-rail {
    position: static;
  }

  .episode-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
  }

  .episode-button {
    flex: 0 1 auto;
  }
}

@media (max-width: 1080px) {
  .feature-strip,
  .stats-grid,
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-side {
    justify-items: start;
    text-align: left;
  }

  .gait-charts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .patient-shell { padding: var(--gap-md); }

  .feature-strip, .stats-grid, .care-grid, .form-grid {
    grid-template-columns: 1fr;
  }

  .brand-row, .topbar, .panel-header, .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .auth-hero, .auth-panel, .card {
    border-radius: var(--radius-lg);
    padding: var(--gap);
  }

  .auth-copy h1, .hero-card h1, .empty-state h1 {
    font-size: 2rem;
  }
}

/* ---- Toast Notifications ---- */

.toast-container {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  max-width: 380px;
}

.toast-visible { opacity: 1; transform: translateY(0); }
.toast-error   { background: #dc2626; }
.toast-success { background: #059669; }
.toast-info    { background: #1e40af; }

/* ============================================================
   GUIDED PROM QUESTIONNAIRE
   ============================================================ */

/* ---- List view: instrument cards ---- */

.prom-list {
  display: grid;
  gap: var(--gap-sm);
}

.prom-list-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.prom-list-card:hover {
  border-color: rgba(15, 118, 110, 0.28);
  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.08);
  transform: translateY(-1px);
}

.prom-list-card--done {
  background: var(--success-soft);
  border-color: rgba(47, 125, 86, 0.18);
}

.prom-list-card__info {
  display: grid;
  gap: 2px;
}

.prom-list-card__info strong {
  font-size: 1rem;
}

.prom-list-card__meta {
  font-size: 0.84rem;
  color: var(--muted);
}

.prom-list-card__reason {
  font-size: 0.8rem;
  color: var(--accent-ink);
  font-style: italic;
}

.prom-badge {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
  white-space: nowrap;
}

.prom-badge--done {
  color: #166534;
  background: rgba(34, 197, 94, 0.15);
}

/* ---- Questionnaire view ---- */

.prom-questionnaire-view,
.prom-summary-view {
  display: grid;
  gap: var(--gap-sm);
}

.prom-questionnaire-header {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.prom-questionnaire-header > div {
  display: flex;
  align-items: baseline;
  gap: var(--gap-sm);
}

.prom-progress-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}

.prom-progress-bar__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #77c5b8);
  transition: width 300ms ease;
}

/* ---- Shared questionnaire item cards (from prom-renderer.js) ---- */

.prom-card {
  padding: var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  margin-bottom: var(--gap-sm);
  transition: border-color 200ms ease;
}

.prom-card.completed {
  border-color: rgba(47, 125, 86, 0.22);
  background: var(--success-soft);
}

.choice-group {
  display: grid;
  gap: 6px;
  margin-top: var(--gap-xs);
}

.choice-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.choice-item:hover {
  border-color: rgba(15, 118, 110, 0.22);
  background: var(--accent-soft);
}

.choice-item.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.choice-item input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---- Slider PROM ---- */

.prom-slider-input {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--line);
  outline: none;
  padding: 0;
  border: 0;
}

.prom-slider-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.prom-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-ink));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.prom-slider-input::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-ink));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

/* ---- Summary card ---- */

.prom-summary-card {
  text-align: center;
}

.prom-interpretation {
  margin-top: var(--gap-xs);
}

/* ============================================================
   GAIT & HEALTHKIT STYLES
   ============================================================ */

/* ---- Source badges ---- */
.stat-source {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  margin-left: 6px;
  vertical-align: middle;
}

.stat-source--hk {
  background: rgba(255, 45, 85, 0.12);
  color: #ff2d55;
}

.stat-source--manual {
  background: var(--surface-muted);
  color: var(--muted);
}

/* ---- Gait trend card ---- */
.gait-trend-card {
  overflow: hidden;
}

.gait-alerts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--gap);
}

.gait-alert {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.gait-alert--urgent-triage {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
  border-left: 3px solid #ef4444;
}

.gait-alert--routine-message {
  background: rgba(245, 158, 11, 0.08);
  color: #b45309;
  border-left: 3px solid #f59e0b;
}

.gait-alert--next-visit-follow-up {
  background: rgba(59, 130, 246, 0.08);
  color: #1d4ed8;
  border-left: 3px solid #3b82f6;
}

.gait-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.gait-chart {
  padding: var(--gap-sm);
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.gait-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 0.85rem;
}

.gait-chart-header strong {
  font-size: 1.1rem;
  color: var(--accent);
}

.gait-sparkline {
  width: 100%;
  height: 44px;
}

.gait-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gait-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--gap-xs);
  padding: 6px 8px;
  font-size: 0.82rem;
  border-radius: 4px;
}

.gait-table-row:nth-child(odd) {
  background: var(--surface-muted);
}

.chip--green {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.chip--orange {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

@media (max-width: 640px) {
  .gait-charts {
    grid-template-columns: 1fr;
  }
}

/* ── Wound Photo Upload ─────────────────────────────────────── */

.wound-photo-upload {
  display: flex;
  flex-direction: column;
  gap: 4px;
  grid-column: 1 / -1;
}

.wound-photo-upload input[type="file"] {
  padding: 8px;
  border: 2px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  cursor: pointer;
}

.wound-photo-upload input[type="file"]:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.wound-photo-upload small {
  color: var(--muted);
  font-size: 0.78rem;
}

/* ── Medication Tracking ────────────────────────────────────── */

.medication-section {
  margin-bottom: 16px;
}

.taper-progress {
  padding: 12px 16px;
  margin-bottom: 12px;
  background: var(--surface-muted);
  border-radius: 10px;
  border: 1px solid var(--line);
}

.taper-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.taper-bar-bg {
  height: 8px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
  margin-bottom: 6px;
}

.taper-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width 0.3s;
}

.taper-progress small {
  color: var(--muted);
  font-size: 0.78rem;
}

.medication-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.medication-card {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.medication-card[data-category="opioid"] {
  border-left: 3px solid #f59e0b;
}

.medication-card[data-category="nsaid"] {
  border-left: 3px solid #22c55e;
}

.medication-card[data-category="muscle-relaxant"] {
  border-left: 3px solid #8b5cf6;
}

.medication-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.medication-card-header strong {
  font-size: 0.95rem;
}

.med-category {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--surface-muted);
  padding: 2px 6px;
  border-radius: 100px;
}

.medication-card-detail {
  display: flex;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.medication-card-actions {
  display: flex;
  gap: 8px;
}

.med-btn {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.med-btn:focus-visible,
.bottom-nav-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.med-btn--taken:hover {
  background: #dcfce7;
  border-color: #22c55e;
  color: #16a34a;
}

.med-btn--skipped:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #d97706;
}

/* ---- Bottom Tab Navigation ---- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: none;
  background: var(--surface);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
  padding: 6px 0 env(safe-area-inset-bottom, 8px);
}
.bottom-nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px 4px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.2s;
}
.bottom-nav-tab svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bottom-nav-tab.active {
  color: var(--accent);
}
.bottom-nav-tab.active svg {
  stroke: var(--accent);
}

.portal-shell { padding-bottom: 0; }

/* Mobile bottom nav */
@media (max-width: 780px) {
  .bottom-nav {
    display: flex;
  }

  .portal-shell {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  /* Keep toasts above the bottom nav */
  .toast-container {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   Redesign v2 — Today tab (Phase 2a)
   Hero check-in (pre) + thank-you/summary/next action (post)
   Quieter milestones + trajectory below.
   ============================================================ */

.today-tab {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.today-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-md);
  padding: 0;
}
.today-header__ring {
  flex: 0 0 auto;
  color: var(--muted);
}
.today-header__ring svg {
  display: block;
}
.today-header__pathway {
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  color: var(--accent-ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.today-header h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  font-weight: var(--w-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--ink);
}
.today-header__meta {
  display: inline-flex;
  gap: 8px;
  color: var(--muted);
  font-size: var(--t-caption);
  margin: 0;
}
@media (max-width: 640px) {
  .today-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---------- Hero (pre-submit) ---------- */

.today-hero {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-ink) 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--gap-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.today-hero::after {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.today-hero__copy { position: relative; z-index: 1; }
.today-hero__eyebrow {
  color: rgba(255, 255, 255, 0.8) !important;
}
.today-hero__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin: 6px 0 4px;
}
.today-hero__sub {
  font-size: var(--t-body);
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.today-hero__form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  position: relative;
  z-index: 1;
}

.today-pain {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-md);
  padding: var(--gap);
}
.today-pain__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--gap-sm);
}
.today-pain__head label {
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.today-pain__value {
  font-size: 1.5rem;
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.today-pain__value-max {
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  opacity: 0.7;
  margin-left: 2px;
}
.today-pain input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--r-pill);
  outline: none;
  margin: 6px 0;
}
.today-pain input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  cursor: grab;
}
.today-pain input[type="range"]::-moz-range-thumb {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  cursor: grab;
}
.today-pain__scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
  margin-top: 6px;
}

.today-details {
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.08);
  transition: background var(--ease, 0.2s);
}
.today-details[open] { background: rgba(255, 255, 255, 0.12); }
.today-details summary {
  list-style: none;
  cursor: pointer;
  padding: var(--gap-sm) var(--gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  color: rgba(255, 255, 255, 0.9);
  user-select: none;
}
.today-details summary::-webkit-details-marker { display: none; }
.today-details__chev {
  transition: transform var(--ease, 0.2s);
}
.today-details[open] .today-details__chev { transform: rotate(180deg); }
.today-details__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-sm);
  padding: 0 var(--gap) var(--gap-sm);
}
.today-details__grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
}
.today-details__grid input,
.today-details__grid select {
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font: inherit;
  font-size: var(--t-body);
  min-height: 40px;
}
.today-details__grid input:focus,
.today-details__grid select:focus {
  outline: 2px solid #fff;
  outline-offset: -1px;
}
.today-details__checkbox {
  grid-column: 1 / -1;
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  padding: 6px 0;
}
.today-details__checkbox input { min-height: auto; }
.today-details textarea {
  width: 100%;
  margin: 0 var(--gap) var(--gap);
  width: calc(100% - var(--gap) * 2);
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font: inherit;
  font-size: var(--t-body);
  resize: vertical;
  box-sizing: border-box;
}
.today-details .wound-photo-upload {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 var(--gap) var(--gap-sm);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--t-caption);
}

.today-hero__submit {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  background: #fff;
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--r-md);
  font-size: var(--t-emph);
  font-weight: var(--w-semibold);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform var(--ease, 0.15s), opacity var(--ease, 0.15s);
}
.today-hero__submit:hover:not([disabled]) { opacity: 0.95; }
.today-hero__submit:active { transform: scale(0.98); }
.today-hero__submit[disabled] { opacity: 0.6; cursor: not-allowed; }

.today-hero__message {
  color: rgba(255, 255, 255, 0.95) !important;
  text-align: center;
}

/* ---------- Thanks / summary / next action (post-submit) ---------- */

.today-thanks {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--gap-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.today-thanks__check {
  width: 64px; height: 64px;
  border-radius: 50%;
  margin: 0 auto var(--gap-sm);
  background: var(--success-soft, rgba(6, 118, 71, 0.10));
  color: var(--success, #067647);
  display: grid; place-items: center;
}
.today-thanks__title {
  font-size: var(--t-title);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.today-thanks__sub {
  color: var(--muted);
  font-size: var(--t-body);
  margin: 4px 0 0;
}

.today-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.today-summary__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.today-summary__label {
  font-size: var(--t-caption);
  color: var(--muted);
  font-weight: var(--w-semibold);
}
.today-summary__value {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.today-summary__unit {
  font-size: var(--t-emph);
  color: var(--muted);
  font-weight: var(--w-regular);
}
.today-summary__trend { font-size: var(--t-caption); font-weight: var(--w-semibold); }
.trend--good    { color: var(--success, #067647); }
.trend--warn    { color: var(--warning, #b54708); }
.trend--neutral { color: var(--muted); }

.today-next {
  background: linear-gradient(135deg, var(--surface), var(--accent-wash, rgba(15, 118, 110, 0.06)));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--gap-lg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.today-next__head .eyebrow { color: var(--accent-ink); }
.today-next__title {
  font-size: var(--t-emph);
  font-weight: var(--w-semibold);
  letter-spacing: -0.005em;
  margin: 2px 0 0;
}
.today-next__meta {
  color: var(--muted);
  font-size: var(--t-caption);
  margin: 0;
}
.today-next__cta {
  align-self: flex-start;
  margin-top: var(--gap-sm);
  min-height: 44px;
  padding: 10px 20px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--t-body);
  font-weight: var(--w-semibold);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--ease, 0.15s), transform var(--ease, 0.15s);
}
.today-next__cta:hover { background: var(--accent-ink); }
.today-next__cta:active { transform: scale(0.98); }

.today-quiet {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

@media (max-width: 600px) {
  .today-summary { grid-template-columns: 1fr; }
  .today-details__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Redesign v2 — Bottom nav refresh (Phase 2b)
   Top indicator bar, 48pt tap targets, non-uppercase labels.
   ============================================================ */

.bottom-nav {
  padding: 8px 0 env(safe-area-inset-bottom, 10px);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
}

.bottom-nav-tab {
  position: relative;
  min-height: 52px;
  padding: 10px 4px 6px;
  gap: 2px;
  font-size: 11px;
  font-weight: var(--w-semibold);
  text-transform: none;
  letter-spacing: 0.01em;
}
.bottom-nav-tab svg { width: 24px; height: 24px; }
.bottom-nav-tab::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 3px;
  border-radius: 0 0 var(--r-pill) var(--r-pill);
  background: transparent;
  transform: translateX(-50%);
  transition: background var(--ease, 0.18s);
}
.bottom-nav-tab.active::before { background: var(--accent); }
.bottom-nav-tab.active { color: var(--accent-ink); }
.bottom-nav-tab.active svg { stroke: var(--accent-ink); }


/* ============================================================
   Redesign v2 — PROM takeover (Phase 2c)
   Full-screen one-question-at-a-time flow, iOS survey style.
   ============================================================ */

.prom-takeover {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 640px;
  margin: 0 auto;
  background: var(--canvas, var(--bg));
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.prom-takeover__head {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--gap-sm) var(--gap);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.prom-takeover__close,
.prom-takeover__save {
  min-height: 40px;
  min-width: 44px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.prom-takeover__close { justify-self: start; }
.prom-takeover__save  { justify-self: end; color: var(--accent-ink); }
.prom-takeover__close:hover,
.prom-takeover__save:hover { background: var(--surface-muted); color: var(--ink); }
.prom-takeover__meta {
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.prom-takeover__meta strong {
  font-size: var(--t-body);
  font-weight: var(--w-semibold);
  color: var(--ink);
  letter-spacing: -0.005em;
}
.prom-takeover__meta span {
  font-size: var(--t-caption);
  color: var(--muted);
}

.prom-takeover__progress {
  display: flex;
  gap: 4px;
  padding: var(--gap-sm) var(--gap);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.prom-progress-step {
  flex: 1;
  height: 4px;
  background: var(--surface-muted);
  border-radius: var(--r-pill);
}
.prom-progress-step.is-answered { background: var(--accent-wash, rgba(15, 118, 110, 0.22)); }
.prom-progress-step.is-current {
  background: linear-gradient(90deg, var(--accent) 40%, var(--surface-muted) 40%);
}
.prom-progress-step.is-answered.is-current { background: var(--accent); }

.prom-takeover__body {
  padding: var(--gap-lg) var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  overflow-y: auto;
}

.prom-takeover__eyebrow {
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  color: var(--accent-ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.prom-takeover__question {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  color: var(--ink);
  margin: 4px 0 0;
}
.prom-takeover__instruction {
  font-size: var(--t-body);
  color: var(--muted);
  margin: 0;
  line-height: var(--leading-normal);
}

.prom-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--gap-sm);
}
.prom-option {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  min-height: 60px;
  width: 100%;
  padding: var(--gap-sm) var(--gap);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: border-color var(--ease, 0.15s), background var(--ease, 0.15s), box-shadow var(--ease, 0.15s);
}
.prom-option:hover { border-color: var(--line-strong); }
.prom-option.is-selected {
  border-color: var(--accent);
  background: var(--accent-wash, rgba(15, 118, 110, 0.06));
  box-shadow: 0 0 0 3px var(--accent-wash, rgba(15, 118, 110, 0.06));
}

.prom-option__radio {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  flex-shrink: 0;
  display: grid; place-items: center;
  transition: all var(--ease, 0.15s);
}
.prom-option__radio::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity var(--ease, 0.15s);
}
.prom-option.is-selected .prom-option__radio {
  border-color: var(--accent);
  background: var(--accent);
}
.prom-option.is-selected .prom-option__radio::after { opacity: 1; }

.prom-option__label {
  flex: 1;
  font-size: var(--t-body);
  font-weight: var(--w-semibold);
  letter-spacing: -0.005em;
  line-height: var(--leading-normal);
}
.prom-option__score {
  font-size: var(--t-caption);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-regular);
}

.prom-takeover__footer {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gap-sm);
  padding: var(--gap) var(--gap) calc(var(--gap) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.prom-takeover__nav-btn {
  min-height: 48px;
  padding: 0 var(--gap);
  background: var(--surface-muted, #fafafa);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--t-body);
  font-weight: var(--w-semibold);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--ease, 0.15s), opacity var(--ease, 0.15s);
}
.prom-takeover__nav-btn:hover:not([disabled]) { background: var(--surface); }
.prom-takeover__nav-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.prom-takeover__nav-btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.prom-takeover__nav-btn--primary:hover:not([disabled]) { background: var(--accent-ink); }

.prom-takeover__message {
  padding: var(--gap-sm) var(--gap);
  color: var(--muted);
  text-align: center;
  margin: 0;
}

.prom-takeover__slider-host {
  min-height: 200px;
  padding: var(--gap-sm) 0;
}

/* ============================================================
   Redesign v2 — Medication rows + taper bar (Phase 2d)
   ============================================================ */

.meds {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.meds__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap-sm) var(--gap);
  border-bottom: 1px solid var(--line);
}
.meds__head .eyebrow {
  margin: 0;
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  color: var(--subtle, #86868b);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip--muted {
  background: var(--surface-muted);
  color: var(--muted);
  border: 1px solid var(--line);
}

.med-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.med-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: var(--gap);
  padding: 14px var(--gap);
  border-bottom: 1px solid var(--line);
  min-height: 64px;
  transition: background var(--ease, 0.15s);
}
.med-row:last-child { border-bottom: 0; }
.med-row:hover { background: var(--surface-muted); }

.med-row__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--muted);
  justify-self: center;
}
.med-row__dot--opioid          { background: var(--warning, #b54708); }
.med-row__dot--nsaid           { background: var(--accent); }
.med-row__dot--muscle-relaxant { background: #7c3aed; }
.med-row__dot--anticoagulant   { background: var(--danger, #b94d48); }
.med-row__dot--other           { background: var(--muted); }

.med-row__main { min-width: 0; }
.med-row__title {
  font-size: var(--t-body);
  font-weight: var(--w-semibold);
  letter-spacing: -0.005em;
  color: var(--ink);
}
.med-row__meta {
  font-size: var(--t-caption);
  color: var(--muted);
  margin-top: 1px;
}
.med-row__actions {
  display: flex;
  gap: 6px;
}
.med-row__btn {
  min-height: 32px;
  padding: 6px 12px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  cursor: pointer;
  transition: background var(--ease, 0.15s);
}
.med-row__btn:hover { background: var(--accent-ink); }
.med-row__btn--skip {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line-strong);
}
.med-row__btn--skip:hover { background: var(--surface-muted); color: var(--ink); }

.taper {
  padding: var(--gap) var(--gap);
  border-top: 1px solid var(--line);
  background: var(--surface-muted);
}
.taper__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-sm);
  flex-wrap: wrap;
}
.taper__label {
  font-size: var(--t-caption);
  color: var(--muted);
  font-weight: var(--w-semibold);
}
.taper__target { font-size: var(--t-caption); color: var(--muted); }
.taper__bar {
  height: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.taper__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success, #067647), var(--accent));
  border-radius: var(--r-pill);
  transition: width 0.5s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.taper__note {
  margin: var(--gap-sm) 0 0;
  font-size: var(--t-caption);
  color: var(--ink);
  line-height: var(--leading-normal);
}

/* ============================================================
   Redesign v2 — Care plan as prose (Phase 2d)
   Replaces bordered cards with a breathable prose list.
   ============================================================ */

.care-plan-item {
  padding: var(--gap-sm) 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.care-plan-item:last-child { border-bottom: 0; }
.care-plan-item__title {
  font-size: var(--t-body);
  font-weight: var(--w-semibold);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 4px;
}
.care-plan-item__body {
  font-size: var(--t-body);
  color: var(--ink);
  line-height: var(--leading-normal);
  margin: 0;
}

/* Prefer stacked care cards inside a single parent card so they read as prose */
.care-grid {
  display: block;
}


/* ============================================================
   Phase 4 polish — dark-mode + reduced-motion + focus rings
   ============================================================ */

/* ---- 1. Fix bottom nav hardcoded white bg for dark mode ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Nav frosted glass needs a dark base, not white */
    & .bottom-nav {
      background: rgba(28, 28, 30, 0.88);
    }
    & .today-details input,
    & .today-details select,
    & .today-details textarea {
      /* The hero has a dark accent background; these fields stay
         light-surface for readability, so override the hardcoded
         white to a slightly warmer near-white in dark mode. */
      background: rgba(245, 245, 247, 0.95);
    }
  }
}
/* Explicit theme="dark" override for users who pin the theme */
:root[data-theme="dark"] .bottom-nav {
  background: rgba(28, 28, 30, 0.88);
}
:root[data-theme="dark"] .today-details input,
:root[data-theme="dark"] .today-details select,
:root[data-theme="dark"] .today-details textarea {
  background: rgba(245, 245, 247, 0.95);
}

/* ---- 2. Reduced-motion guards for new Phase 2 animations ---- */
@media (prefers-reduced-motion: reduce) {
  .taper__fill { transition: none; }
  .today-details__chev { transition: none; }
  .prom-takeover__nav-btn,
  .today-hero__submit,
  .today-next__cta,
  .med-row__btn,
  .prom-option,
  .prom-option__radio,
  .prom-option__radio::after {
    transition: none;
  }
  .today-hero__submit:active,
  .today-next__cta:active,
  .prom-takeover__nav-btn:active,
  .med-row__btn:active {
    transform: none;
  }
}

/* ---- 3. :focus-visible rings on Phase 2 interactive primitives ---- */
.today-hero__submit:focus-visible,
.today-next__cta:focus-visible,
.med-row__btn:focus-visible,
.prom-takeover__nav-btn:focus-visible,
.prom-takeover__close:focus-visible,
.prom-takeover__save:focus-visible,
.prom-option:focus-visible,
.bottom-nav-tab:focus-visible,
.today-details summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm, 12px);
}

/* Selected prom-option should have a visible focus ring distinct from its accent border */
.prom-option.is-selected:focus-visible {
  outline-offset: 4px;
}


/* ============================================================
   Redesign v2 — Progress tab wrapper (Phase 4 polish)
   Mirrors Today's page header, collapses section chrome.
   ============================================================ */

.progress-tab {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.progress-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.progress-header__pathway {
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  color: var(--accent-ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.progress-header h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  font-weight: var(--w-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--ink);
}
.progress-header__meta {
  display: inline-flex;
  gap: 8px;
  color: var(--muted);
  font-size: var(--t-caption);
  margin: 0;
}

.progress-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, var(--radius-lg));
  padding: var(--gap);
  box-shadow: var(--shadow-sm);
}
.progress-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-sm);
}
.progress-section__head .eyebrow {
  margin: 0;
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  color: var(--subtle, #86868b);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: none;
  padding: 0;
  color: var(--muted);
}
.progress-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

/* Reduce the chunky card-on-card feeling from the old trend-list */
.progress-section .trend-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.progress-section .trend-row:last-child { border-bottom: 0; }


/* Care tab uses the same header + section pattern as Progress */
.care-tab {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}


/* ============================================================
   Phase 4 polish — Profile tab
   ============================================================ */

.profile-tab {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.profile-identity {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--gap);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, var(--radius-lg));
  box-shadow: var(--shadow-sm);
}
.profile-identity__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-wash, var(--accent-soft));
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-weight: var(--w-semibold, 600);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.profile-identity__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.profile-identity__info strong {
  font-weight: var(--w-semibold, 600);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-identity__info span {
  font-size: var(--t-caption);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.profile-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.profile-list__row:last-child { border-bottom: 0; }
.profile-list__row > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.profile-list__row strong {
  font-weight: var(--w-semibold, 600);
  font-size: var(--t-body, 0.92rem);
  color: var(--ink);
  letter-spacing: -0.005em;
}
.profile-list__row span {
  font-size: var(--t-caption, 0.82rem);
  color: var(--muted);
  line-height: var(--leading-normal, 1.5);
}
.profile-list__trailing {
  font-size: var(--t-caption, 0.82rem);
  font-weight: var(--w-semibold, 600);
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.profile-list__trailing--muted { color: var(--muted); font-weight: var(--w-regular, 400); }

/* Gentle demo chip variant for the Preview pill in profile-identity */
.chip--amber-soft {
  background: var(--warning-soft, rgba(192, 106, 27, 0.10));
  color: var(--warning, #c06a1b);
  border-color: transparent;
}


/* ============================================================
   Auth v2 — Apple-style single-column sign-in
   Shared shape across patient portal and clinician planner.
   ============================================================ */

.auth-v2 {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--gap-lg, 28px);
  padding: var(--gap-lg, 28px) var(--gap, 20px);
  background:
    radial-gradient(circle at 10% -10%, var(--accent-soft, rgba(15, 118, 110, 0.12)), transparent 45%),
    radial-gradient(circle at 110% 110%, var(--accent-soft, rgba(15, 118, 110, 0.10)), transparent 50%),
    var(--bg);
  box-sizing: border-box;
}

.auth-v2__brand {
  display: flex;
  justify-content: center;
}
.auth-v2__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -0.01em;
}
.auth-v2__logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-ink) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  font-weight: var(--weight-semibold, 600);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.auth-v2__logo-text {
  font-size: 1.1rem;
}

.auth-v2__card {
  width: min(440px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 44px);
  background: var(--surface-strong, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 20px);
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.12), 0 6px 16px rgba(15, 23, 42, 0.06);
  align-self: center;
}

.auth-v2__title {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}
.auth-v2__sub {
  margin: 10px 0 28px;
  font-size: var(--text-base, 15px);
  line-height: 1.5;
  color: var(--muted);
}

.auth-v2__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-v2__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-v2__field span {
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-semibold, 600);
  color: var(--muted);
  letter-spacing: 0.01em;
}
.auth-v2__field input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-size: var(--text-md, 16px);
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm, 12px);
  transition: border-color 160ms var(--ease-default, ease), box-shadow 160ms var(--ease-default, ease);
  box-sizing: border-box;
}
.auth-v2__field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(15, 118, 110, 0.18));
}
.auth-v2__field input::placeholder { color: var(--subtle, #86868b); }

.auth-v2__msg {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm, 12px);
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-semibold, 600);
}
.auth-v2__msg--error {
  background: var(--danger-soft, rgba(185, 77, 72, 0.10));
  color: var(--danger, #b94d48);
}

.auth-v2__submit {
  width: 100%;
  min-height: 52px;
  margin-top: 6px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-sm, 12px);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: var(--text-md, 16px);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.18);
  transition: background 160ms var(--ease-default, ease), transform 100ms var(--ease-default, ease);
}
.auth-v2__submit:hover:not([disabled]) { background: var(--accent-ink); }
.auth-v2__submit:active:not([disabled]) { transform: scale(0.98); }
.auth-v2__submit[disabled] { opacity: 0.55; cursor: not-allowed; }

.auth-v2__hint {
  margin: 4px 0 0;
  font-size: var(--text-sm, 13px);
  color: var(--muted);
  text-align: center;
}

.auth-v2__divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--gap-sm, 12px);
  align-items: center;
  margin: 24px 0 16px;
  color: var(--subtle, #86868b);
  font-size: var(--text-sm, 13px);
}
.auth-v2__divider::before,
.auth-v2__divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.auth-v2__demo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-v2__demo-btn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  min-height: 60px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 12px);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms var(--ease-default, ease), background 160ms var(--ease-default, ease), transform 100ms var(--ease-default, ease);
}
.auth-v2__demo-btn:hover { border-color: var(--line-strong); background: var(--surface-muted); }
.auth-v2__demo-btn:active { transform: scale(0.99); }
.auth-v2__demo-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.auth-v2__demo-btn--single { margin-top: 4px; }

.auth-v2__demo-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft, rgba(15, 118, 110, 0.12));
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-semibold, 600);
  flex-shrink: 0;
}
.auth-v2__demo-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.auth-v2__demo-label strong {
  font-size: var(--text-base, 15px);
  font-weight: var(--weight-semibold, 600);
  color: var(--ink);
  letter-spacing: -0.005em;
}
.auth-v2__demo-label small {
  font-size: var(--text-sm, 13px);
  color: var(--muted);
}
.auth-v2__demo-arrow {
  color: var(--subtle, #86868b);
  font-size: 1.2rem;
  line-height: 1;
}

.auth-v2__footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  font-size: var(--text-sm, 13px);
  color: var(--muted);
}
.auth-v2__footer a {
  color: var(--muted);
  transition: color 160ms var(--ease-default, ease);
}
.auth-v2__footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 480px) {
  .auth-v2 { padding: var(--gap, 20px) var(--gap-sm, 12px); }
  .auth-v2__card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-v2__submit,
  .auth-v2__demo-btn,
  .auth-v2__field input { transition: none; }
  .auth-v2__submit:active,
  .auth-v2__demo-btn:active { transform: none; }
}


/* ============================================================
   Phase 5 polish — Patient wound-photo upload affordance
   Replaces the raw <input type="file"> with a dropzone-style
   card (camera icon + two-line copy + action chip). Click
   anywhere on the card to open the picker / camera.
   ============================================================ */

.wound-upload {
  margin-top: 2px;
}
.wound-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wound-upload__drop {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--gap-sm);
  padding: 12px 14px;
  min-height: 68px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  border: 1.5px dashed rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  cursor: pointer;
  transition: background 160ms var(--ease-default, ease),
              border-color 160ms var(--ease-default, ease),
              transform 100ms var(--ease-default, ease);
}
.wound-upload__drop:hover {
  background: #fff;
  border-color: var(--accent);
}
.wound-upload__drop:active { transform: scale(0.99); }
.wound-upload__input:focus-visible + .wound-upload__drop {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wound-upload__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
  flex-shrink: 0;
}

.wound-upload__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wound-upload__title {
  font-size: 0.92rem;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wound-upload__hint {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.wound-upload__action {
  padding: 6px 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.wound-upload--has-file .wound-upload__drop {
  border-style: solid;
  border-color: var(--accent);
  background: #fff;
}
.wound-upload--has-file .wound-upload__icon {
  background: var(--success-soft, rgba(47, 125, 86, 0.12));
  color: var(--success, #2f7d56);
}

@media (prefers-reduced-motion: reduce) {
  .wound-upload__drop { transition: none; }
  .wound-upload__drop:active { transform: none; }
}


/* ============================================================
   Phase 5 polish — Toast notifications
   Swap hardcoded hex colors for dark-mode-aware tokens, tighten
   radius + shadow to match Phase 2 primitives, respect
   prefers-reduced-motion, add a subtle backdrop saturation.
   ============================================================ */

.toast {
  padding: 12px 16px;
  border-radius: var(--radius-sm, 12px);
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -0.005em;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22),
              0 3px 10px rgba(15, 23, 42, 0.10);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}

/* Token-driven color variants — inherit dark-mode values */
.toast-error   { background: var(--danger, #dc2626); color: #fff; }
.toast-success { background: var(--success, #059669); color: #fff; }
.toast-info    { background: var(--accent-ink, #0b5f5f); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; transform: none; }
}

/* ============================================================
   HIPAA self-service data export card
   Lives inside .profile-tab (mobile) and .care-tab (desktop).
   Reuses .progress-section for the outer frame and .primary-button
   for the CTA — only export-specific modifiers live below.
   ============================================================ */

.patient-export__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm, 12px);
  padding-top: 4px;
}

.patient-export__title {
  font-size: 1.05rem;
  font-weight: var(--w-semibold, 600);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.patient-export__copy {
  font-size: var(--t-body, 0.92rem);
  color: var(--muted);
  line-height: var(--leading-normal, 1.5);
  margin: 0;
  max-width: 60ch;
}

.patient-export__button {
  align-self: flex-start;
  min-width: 0;
}

.patient-export__button[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.patient-export__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-caption, 0.82rem);
  margin: 4px 0 0;
  color: var(--muted);
}

.patient-export__status--error {
  color: var(--danger, #dc2626);
}

.patient-export__status--success {
  color: var(--success, #059669);
}

.patient-export__spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--line, rgba(15, 23, 42, 0.18));
  border-top-color: var(--accent, currentColor);
  animation: patient-export-spin 0.8s linear infinite;
  flex-shrink: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .patient-export__spinner { animation-duration: 2s; }
}

.patient-export__deletion-wrap {
  margin: 8px 0 0;
  font-size: var(--t-caption, 0.82rem);
}

.patient-export__deletion {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.patient-export__deletion:hover {
  color: var(--ink);
}


/* ============================================================
   Two-factor authentication — patient portal
   - .patient-mfa-card            → Profile-tab panel (muted / enrolled)
   - .patient-mfa-modal*          → enrollment modal (QR, secret, code)
   - .patient-mfa-code-input      → shared 6-digit input (modal + challenge)
   - .patient-mfa-challenge-*     → sign-in challenge screen on .auth-v2 shell
   ============================================================ */

.patient-mfa-card {
  border-radius: var(--radius-lg, 18px);
}

.patient-mfa-card__chip {
  color: var(--success, #059669);
  background: var(--success-soft, rgba(5, 150, 105, 0.12));
  border-color: transparent;
}

.patient-mfa-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm, 12px);
  padding-top: 4px;
}

.patient-mfa-card__title {
  font-size: var(--t-subhead, 1.05rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.patient-mfa-card__copy {
  font-size: var(--t-body, 0.92rem);
  color: var(--muted);
  line-height: var(--leading-normal, 1.5);
  margin: 0;
  max-width: 60ch;
}

.patient-mfa-card__button {
  align-self: flex-start;
  min-width: 0;
}

.patient-mfa-card--enrolled {
  background:
    linear-gradient(to right, var(--success-soft, rgba(5, 150, 105, 0.08)), transparent 40%),
    var(--surface);
  border-left: 3px solid var(--success, #059669);
}

.patient-mfa-card__factors {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.patient-mfa-card__factor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 12px);
  background: var(--surface-muted, var(--surface));
  font-size: var(--t-body, 0.92rem);
}

.patient-mfa-card__factor strong {
  color: var(--ink);
  font-weight: var(--weight-semibold, 600);
}

.patient-mfa-card__factor small {
  color: var(--muted);
  font-size: var(--t-caption, 0.82rem);
}

.patient-mfa-card__remove {
  flex-shrink: 0;
}

/* --- Modal --- */

.patient-mfa-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 1000;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: patient-mfa-modal-fade 160ms ease-out;
}

@keyframes patient-mfa-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.patient-mfa-modal {
  background: var(--surface);
  border-radius: var(--radius-lg, 18px);
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.22);
  border: 1px solid var(--line);
  animation: patient-mfa-modal-rise 180ms ease-out;
}

@keyframes patient-mfa-modal-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.patient-mfa-modal__hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--line);
}

.patient-mfa-modal__eyebrow {
  display: block;
  font-size: var(--t-caption, 0.78rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink, var(--accent));
  margin-bottom: 4px;
}

.patient-mfa-modal__hdr h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: var(--weight-semibold, 600);
  color: var(--ink);
  letter-spacing: -0.01em;
}

.patient-mfa-modal__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-muted, var(--surface));
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 160ms var(--ease-default, ease), color 160ms var(--ease-default, ease);
}

.patient-mfa-modal__close:hover:not([disabled]) {
  background: var(--line);
  color: var(--ink);
}

.patient-mfa-modal__close[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.patient-mfa-modal__body {
  padding: 18px 22px;
  overflow-y: auto;
  display: grid;
  gap: 14px;
}

.patient-mfa-modal__ftr {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-muted, var(--surface));
}

.patient-mfa-modal__hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-body, 0.92rem);
  line-height: var(--leading-normal, 1.5);
}

.patient-mfa-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.patient-mfa-modal__label {
  font-size: var(--t-caption, 0.82rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--muted);
  letter-spacing: 0.01em;
}

.patient-mfa-modal__error {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm, 12px);
  font-size: var(--t-caption, 0.88rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--danger, #b94d48);
  background: var(--danger-soft, rgba(185, 77, 72, 0.10));
}

/* --- QR code --- */

.patient-mfa-qr-wrap {
  display: grid;
  place-items: center;
  padding: 10px;
  background: var(--surface-muted, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 14px);
}

.patient-mfa-qr-wrap--empty {
  gap: 10px;
  min-height: 200px;
  color: var(--muted);
  font-size: var(--t-body, 0.92rem);
}

.patient-mfa-qr-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line, rgba(15, 23, 42, 0.18));
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: patient-mfa-spin 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .patient-mfa-qr-spinner { animation-duration: 2.4s; }
  .patient-mfa-modal-backdrop,
  .patient-mfa-modal { animation: none; }
}

.patient-mfa-qr {
  display: block;
  max-width: 208px;
  width: 100%;
  height: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 12px);
}

.patient-mfa-secret {
  display: block;
  font-family: var(--font-mono, 'SF Mono', 'Menlo', monospace);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 12px);
  background: var(--surface-muted, var(--surface));
  color: var(--ink);
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
  cursor: text;
}

/* --- Shared 6-digit input (enrollment modal + sign-in challenge) --- */

.patient-mfa-code-input {
  font: inherit;
  font-size: 1.35rem;
  font-weight: var(--weight-semibold, 600);
  text-align: center;
  letter-spacing: 0.35em;
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong, var(--line));
  border-radius: var(--radius-sm, 12px);
  background: var(--surface);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: border-color 160ms var(--ease-default, ease), box-shadow 160ms var(--ease-default, ease);
}

.patient-mfa-code-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(15, 118, 110, 0.18));
}

.patient-mfa-code-input[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- Modal "done" state --- */

.patient-mfa-done {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px 0 8px;
}

.patient-mfa-done__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--success-soft, rgba(5, 150, 105, 0.15));
  color: var(--success, #059669);
  font-size: 1.4rem;
  font-weight: var(--weight-semibold, 600);
  line-height: 1;
}

.patient-mfa-done h4 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: var(--weight-semibold, 600);
  color: var(--ink);
}

.patient-mfa-done p {
  margin: 0;
  font-size: var(--t-body, 0.92rem);
  color: var(--muted);
  max-width: 340px;
  line-height: var(--leading-normal, 1.5);
}

/* --- Sign-in challenge — reuses the .auth-v2 shell --- */

.patient-mfa-challenge-hint {
  margin: -4px 0 0;
  font-size: var(--t-caption, 0.82rem);
  color: var(--muted);
  text-align: center;
}

.patient-mfa-challenge-cancel {
  appearance: none;
  background: none;
  border: none;
  padding: 6px;
  margin-top: 2px;
  font: inherit;
  font-size: var(--t-caption, 0.88rem);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  align-self: center;
}

.patient-mfa-challenge-cancel:hover:not([disabled]) {
  color: var(--ink);
}

.patient-mfa-challenge-cancel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.patient-mfa-challenge-cancel[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}