/* ==========================================================================
   APPLE HEALTH CARDS & SURFACES (v1.2 §2.3)
   ========================================================================== */
.card, .apple-card {
  background: var(--apple-card);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--card-border);
  transition: box-shadow 0.2s ease;
}
.card.card-link:hover, .card.interactive:hover, .apple-card:hover {
  box-shadow: var(--card-shadow-hover);
}
.card-header, .apple-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.card-header h2, .card-header h3, .apple-card-header h2, .apple-card-header h3 {
  font-size: 18px;
  font-weight: 650;
  color: var(--text-primary);
}
.card-header .sub {
  font-size: 13.5px;
  color: var(--text-secondary);
  font-weight: 450;
}
.card-header .action-link {
  font-size: 14px;
}

/* ==========================================================================
   VITALS WIDGET TILES & TELEMETRY (v1.2 §4.1.4)
   ========================================================================== */
.vitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.vital-tile, .stat-card {
  background: var(--apple-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  padding: 20px;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  min-height: 120px;
}
.vital-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.vital-title, .stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.vital-value, .stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.vital-unit, .stat-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: 3px;
}
.vital-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 6px;
}

/* ==========================================================================
   PILLS & STATUS BADGES (v1.2 §2.1, §4.2, §5)
   ========================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 600;
  background: #EFEFF2;
  color: var(--text-secondary);
}
.pill.indigo, .pill.blue {
  background: var(--apple-indigo-bg);
  color: var(--apple-indigo-text);
}
.pill.emerald, .pill.green {
  background: var(--apple-emerald-bg);
  color: var(--apple-emerald-text);
}
.pill.amber, .pill.yellow {
  background: var(--apple-amber-bg);
  color: var(--apple-amber-text);
}
.pill.crimson, .pill.red {
  background: var(--apple-crimson-bg);
  color: var(--apple-crimson-text);
}
.pill.neutral, .pill.gray {
  background: #EBEBED;
  color: var(--text-secondary);
}

/* Clinical Triage Badges (derived only from alert_level §1.2.6) */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.status-badge.status-emerald, .status-badge.green {
  background: var(--apple-emerald-bg);
  color: var(--apple-emerald-text);
}
.status-badge.status-amber, .status-badge.yellow {
  background: var(--apple-amber-bg);
  color: var(--apple-amber-text);
}
.status-badge.status-crimson, .status-badge.red {
  background: var(--apple-crimson-bg);
  color: var(--apple-crimson-text);
}
.status-badge.gray {
  background: #EBEBED;
  color: var(--text-secondary);
}

/* Alert Banner (§4.1.3) */
.alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  border: 1px solid transparent;
}
.alert-banner.crimson {
  background: var(--apple-crimson-bg);
  border-color: rgba(255, 59, 48, 0.25);
  color: var(--apple-crimson-text);
}
.alert-banner.amber {
  background: var(--apple-amber-bg);
  border-color: rgba(255, 149, 0, 0.25);
  color: var(--apple-amber-text);
}
.alert-icon { font-size: 19px; line-height: 1; flex-shrink: 0; }
.alert-content { flex: 1; font-size: 14px; }
.alert-content strong { display: block; font-size: 15px; margin-bottom: 2px; }

/* ==========================================================================
   FORMS & ACCESSIBLE INPUTS (v1.2 §2.4: 44px floor, 48px preferred)
   ========================================================================== */
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.form-group .hint, .hint {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 5px;
}
.form-control {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  font-size: 15px;
  background: var(--apple-card);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
  border-color: var(--apple-blue);
  box-shadow: var(--focus);
}
.form-control::placeholder { color: var(--text-quaternary); }
textarea.form-control { resize: vertical; min-height: 100px; }
.form-control[type="file"] { padding: 10px; }

.form-slider-pair {
  display: flex;
  align-items: center;
  gap: 16px;
}
.form-slider {
  flex: 1;
  accent-color: var(--apple-blue);
  cursor: pointer;
  min-height: 44px;
}
.form-number-input {
  width: 90px;
  text-align: center;
}

/* Buttons */
.btn {
  min-height: 44px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--apple-card);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.btn:hover { background: var(--hover); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--apple-blue);
  border-color: var(--apple-blue);
  color: var(--brand-on-primary);
  box-shadow: 0 2px 6px rgba(0, 113, 227, 0.25);
}
.btn-primary:hover {
  background: var(--apple-blue-hover);
  border-color: var(--apple-blue-hover);
  color: var(--brand-on-primary);
}
.btn-outline, .btn-secondary {
  background: var(--apple-card);
  color: var(--text-primary);
  border-color: var(--control-border);
}
.btn-outline:hover, .btn-secondary:hover {
  background: var(--hover);
}
.btn-danger {
  background: var(--apple-crimson-bg);
  border-color: rgba(255, 59, 48, 0.2);
  color: var(--apple-crimson-text);
}
.btn-danger:hover {
  background: #FFDCDA;
}
.btn-sm {
  min-height: 44px;
  padding: 6px 14px;
  font-size: 13px;
}
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ==========================================================================
   TABLES & TABS
   ========================================================================== */
.table-wrap { overflow-x: auto; position: relative; } /* relative: keeps abs .sr-only cells inside the scroller (FR-PFX-10) */
/* Same scroller under the other name three views use (plans, concierge). It was
   never defined, so on a phone their tables were clipped by the card. */
.table-responsive { overflow-x: auto; position: relative; }
table, .apple-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  /* FR-PFX-10: what a patient reads in a table is body text, so it meets the
     16px floor. Dense clinician-facing grids (.doctor-vitals-table) declare
     their own size and are unaffected. Column headings stay 12px labels. */
  font-size: var(--font-body-min, 16px);
}
table th, .apple-table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 650;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--card-border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
table td, .apple-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--card-border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}
table tr:last-child td, .apple-table tr:last-child td { border-bottom: none; }
table tr:hover td, .apple-table tr:hover td { background-color: #FAFAFC; }

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  background: #EBEBEF;
  padding: 4px;
  border-radius: var(--radius-full);
  width: max-content;
  max-width: 100%;
}
.tabs .tab {
  min-height: 44px;
  padding: 8px 16px;
  font-weight: 550;
  font-size: 13.5px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-full);
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: all 0.15s ease;
}
.tabs .tab:hover { color: var(--text-primary); }
.tabs .tab.active, .tabs .tab[aria-current="page"] {
  color: var(--text-primary);
  background: #FFFFFF;
  font-weight: 650;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Row "Manage" column: a quick-status control and an Edit link on one line.
   Everything here still obeys the §2.4 44px floor — this is the narrowest
   column in the app and the easiest place to shrink a control below it. */
.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.row-actions form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.row-actions .form-control {
  width: auto;
  min-width: 118px;
  font-size: 13.5px;
  padding: 8px 10px;
}
.row-actions .btn { white-space: nowrap; }

/* ==========================================================================
   ALERTS, PROGRESS BAR, FLASH NOTICES
   ========================================================================== */
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--card-border-subtle);
}
.alert-item:last-child { border-bottom: none; }
.alert-item .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.alert-item .dot.green { background: var(--apple-emerald); }
.alert-item .dot.yellow { background: var(--apple-amber); }
.alert-item .dot.red { background: var(--apple-crimson); }
.alert-item .title { font-weight: 650; font-size: 14.5px; }
.alert-item .desc { font-size: 13.5px; color: var(--text-secondary); margin-top: 2px; }
.alert-item .meta { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }

.progress-bar {
  height: 8px;
  background: #E5E5EA;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 8px;
}
.progress-bar .fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--apple-blue), var(--apple-emerald));
  transition: width .4s ease;
}

.flash {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
}
.flash-success {
  background: var(--apple-emerald-bg);
  color: var(--apple-emerald-text);
  border-color: rgba(52, 199, 89, 0.25);
}
.flash-info {
  background: var(--apple-blue-subtle);
  color: var(--apple-blue-text);
  border-color: rgba(0, 113, 227, 0.2);
}
.flash-warning {
  background: var(--apple-amber-bg);
  color: var(--apple-amber-text);
  border-color: rgba(255, 149, 0, 0.25);
}
.flash-error {
  background: var(--apple-crimson-bg);
  color: var(--apple-crimson-text);
  border-color: rgba(255, 59, 48, 0.25);
}

.alert {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.alert-info {
  background: var(--apple-blue-subtle);
  color: var(--apple-blue-text);
  border-color: rgba(0, 113, 227, 0.2);
}
.alert a { font-weight: 700; color: inherit; }

.typeahead { position: relative; }
.typeahead-results:not(:empty) {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 200;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  box-shadow: var(--shadow-overlay);
}
.typeahead .ta-item {
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--card-border-subtle);
  background: #FFFFFF;
  cursor: pointer;
  font-size: 14.5px;
  text-align: left;
  color: var(--text-primary);
}
.typeahead .ta-item:last-child { border-bottom: 0; }
.typeahead .ta-item:hover, .typeahead .ta-item:focus {
  background: var(--apple-blue-subtle);
  outline: 0;
}
.typeahead .ta-item small {
  display: block;
  color: var(--text-secondary);
  margin-top: 2px;
}

.empty-state {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-secondary);
}
.disclaimer {
  padding: 16px 18px;
  background: #F0F4F8;
  border-left: 4px solid var(--apple-blue);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
}
.eyebrow {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .75px;
  text-transform: uppercase;
  color: var(--apple-blue-text);
  margin-bottom: 6px;
}

/* ==========================================================================
   DOCTOR VIEW & TIMELINE
   ========================================================================== */
.doctor-view-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  background: var(--text-primary);
  color: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 26px 30px;
  margin-bottom: 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.doctor-view-banner strong { display: block; font-size: 24px; font-weight: 700; }
.doctor-view-banner span { display: block; color: #A1A1A6; font-size: 13.5px; margin-top: 3px; }
.clinical-list { list-style: none; display: grid; gap: 10px; }
.clinical-list li { border-bottom: 1px solid var(--card-border-subtle); padding-bottom: 10px; }
.clinical-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.clinical-list strong, .clinical-list span { display: block; }
.clinical-list span, .empty-note { color: var(--text-secondary); font-size: 13.5px; margin-top: 2px; }

.timeline-month { margin-top: 24px; }
.timeline-month-label {
  font-size: 13px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-tertiary);
  padding-bottom: 12px;
}
.timeline-events, .timeline-stream { display: flex; flex-direction: column; gap: 12px; position: relative; }
.timeline-event {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--apple-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: var(--card-shadow);
}
.timeline-date { width: 90px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.timeline-icon, .timeline-node {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--apple-blue-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--apple-blue-text);
  font-size: 15px;
}
.timeline-node.indigo { background: var(--apple-indigo-bg); color: var(--apple-indigo); }
.timeline-node.emerald { background: var(--apple-emerald-bg); color: var(--apple-emerald); }
.timeline-node.amber { background: var(--apple-amber-bg); color: var(--apple-amber); }
.timeline-body { flex: 1; min-width: 220px; }
.timeline-title { font-size: 15.5px; font-weight: 600; color: var(--text-primary); }
.timeline-summary { font-size: 13.5px; color: var(--text-secondary); margin-top: 2px; }

/* ==========================================================================
   AUTH & LANDING LAYOUT (v1.2 §4.11)
   ========================================================================== */
.auth-body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--apple-canvas);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* Ambient organic lighting */
.auth-body::before {
  content: '';
  position: fixed;
  top: -15%;
  left: 10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.05) 0%, rgba(52, 199, 89, 0.04) 45%, transparent 70%);
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
}

.auth-body::after {
  content: '';
  position: fixed;
  bottom: -10%;
  right: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(88, 86, 214, 0.04) 0%, rgba(50, 173, 230, 0.03) 50%, transparent 70%);
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
}

/* ── Top Header Bar ────────────────────────────────────────── */
.top-header {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1360px;
  margin: 0 auto;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #0071E3 0%, #34C759 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.28);
  flex-shrink: 0;
}

.brand-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.brand-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 1px;
}

.header-security-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--card-border);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 550;
  color: var(--text-secondary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.header-security-pill svg {
  color: var(--apple-emerald);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ── Main Hero Container (Split Layout) ────────────────────── */
.main-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 32px 48px;
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.hero-split {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 64px;
  align-items: center;
  width: 100%;
}

/* ── Left Column: Value Proposition & Trust ────────────────── */
.hero-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--apple-blue-subtle);
  /* Text blue, not the brand blue: #0071E3 on this tint is 4.2:1 at 13px,
     under WCAG AA's 4.5:1 (axe, 2026-10-08). #0058B6 is 6.1:1. */
  color: var(--apple-blue-text);
  border: 1px solid rgba(0, 113, 227, 0.15);
  padding: 7px 16px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  width: fit-content;
}

.hero-headline {
  font-size: 42px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.hero-headline span {
  background: linear-gradient(135deg, #0071E3 0%, #34C759 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-description {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.55;
  font-weight: 400;
  max-width: 520px;
}

/* Feature List Cards */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.feature-item:hover {
  background: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 113, 227, 0.2);
}

.feature-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-icon.blue   { background: var(--apple-blue-subtle); color: var(--apple-blue-text); }
.feature-icon.green  { background: var(--apple-emerald-bg); color: var(--apple-emerald); }
.feature-icon.indigo { background: var(--apple-indigo-bg); color: var(--apple-indigo); }

.feature-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.2;
}

.feature-text h3 {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.feature-text p {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.45;
}

/* Privacy Banner */
.privacy-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-primary);
  padding: 14px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--card-border);
  width: fit-content;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  line-height: 1.45;
}

.privacy-callout svg {
  width: 18px;
  height: 18px;
  color: var(--apple-emerald);
  flex-shrink: 0;
}

/* ── Right Column: Apple-Sleek Auth Card ───────────────────── */
.auth-card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.auth-card {
  background: var(--apple-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 0 20px 48px rgba(0, 0, 0, 0.06);
  padding: 40px 36px 36px;
  width: 100%;
  max-width: 440px;
  position: relative;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  animation: cardIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.card-header {
  text-align: center;
  margin-bottom: 24px;
}

.card-badge-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--apple-blue-subtle);
  color: var(--apple-blue-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.card-badge-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.2;
}

.card-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  margin-bottom: 6px;
}

.card-subtitle {
  font-size: 13.5px;
  color: var(--text-tertiary);
  line-height: 1.45;
}

/* Form Fields */
.form-group {
  margin-bottom: 18px;
  text-align: left;
}

.form-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 7px;
  letter-spacing: -0.01em;
}

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

.input-icon {
  position: absolute;
  left: 14px;
  color: var(--text-quaternary);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-icon svg {
  width: 17px;
  height: 17px;
}

.form-input {
  width: 100%;
  padding: 13px 14px 13px 42px;
  background: #F5F5F7;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 15px;
  color: var(--text-primary);
  outline: none;
  transition: all 0.15s ease;
}

.form-input:focus {
  background: #FFFFFF;
  border-color: var(--apple-blue);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

.form-input::placeholder {
  color: #A1A1A6;
  font-size: 14px;
}

.info-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  background: #F2F2F7;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 22px;
  line-height: 1.45;
  text-align: left;
}

.info-box svg {
  width: 17px;
  height: 17px;
  color: var(--apple-blue-text);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Apple Pill Buttons */
.btn-submit {
  width: 100%;
  padding: 13px 20px;
  background: var(--apple-blue);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.3);
  transition: all 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
  text-decoration: none;
}

.btn-submit:hover {
  background: var(--apple-blue-hover);
  box-shadow: 0 6px 18px rgba(0, 113, 227, 0.4);
  transform: translateY(-1px);
  color: #FFFFFF;
}

.btn-submit:active {
  transform: scale(0.98);
}

.card-footer {
  text-align: center;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--card-border-subtle);
  font-size: 13px;
  color: var(--text-secondary);
}

.card-footer a {
  color: var(--apple-blue-text);
  font-weight: 600;
  text-decoration: none;
}

.card-footer a:hover {
  text-decoration: underline;
}

/* 6-Box OTP Presentation (v1.2 §4.11) */
.otp-grid {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 20px 0;
}
.otp-box {
  width: 44px;
  height: 52px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-mono);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  outline: none;
}
.otp-box:focus {
  border-color: var(--apple-blue);
  box-shadow: var(--focus);
}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer, .public-footer {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 32px 32px 40px;
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.footer-links, .public-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.footer-links a, .public-footer a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.12s;
}

.footer-links a:hover, .public-footer a:hover {
  color: var(--apple-blue-text);
  text-decoration: underline;
}

.footer-disclaimer, .public-footer p {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.6;
  max-width: 880px;
  font-weight: 400;
  margin: 0;
}

/* Signed-in footer (FR-LGL-06): same links, quieter, inside the content column. */
.site-footer.app-footer { margin-top: 32px; padding: 16px 0 8px; max-width: none; gap: 8px; align-items: stretch; text-align: left; }
.site-footer.app-footer .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.site-footer.app-footer .footer-brand { margin: 0; font-size: 13px; color: var(--text-tertiary); }
.site-footer.app-footer .footer-links { font-size: 13.5px; gap: 4px 18px; justify-content: flex-end; }
.site-footer.app-footer .footer-disclaimer { max-width: none; font-size: 12.5px; }
.footer-tools { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; }
.site-footer.app-footer .footer-tools { justify-content: space-between; }
.footer-report { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--apple-blue-text); font-weight: 600; text-decoration: none; }
.footer-report:hover { text-decoration: underline; }
.footer-lang { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.footer-lang-opt { padding: 2px 10px; border-radius: var(--radius-full); border: 1px solid var(--card-border); color: var(--text-tertiary); cursor: not-allowed; }
.footer-lang-opt.is-current { border-color: var(--apple-blue); background: var(--apple-blue-subtle); color: var(--apple-blue-text); font-weight: 600; cursor: default; }
.footer-lang-note { font-size: 12px; color: var(--text-tertiary); }
@media (max-width: 640px) {
  .site-footer.app-footer .footer-tools { flex-direction: column; align-items: flex-start; }
  .footer-report { min-height: 44px; }
  .site-footer.app-footer .footer-row { flex-direction: column-reverse; align-items: flex-start; }
  .site-footer.app-footer .footer-links { justify-content: flex-start; }
  .site-footer.app-footer .footer-links a { min-height: 44px; }
}
.footer-links a { min-height: 24px; display: inline-flex; align-items: center; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-content {
    text-align: center;
    align-items: center;
  }
  .hero-headline {
    font-size: 32px;
  }
  .hero-description {
    font-size: 15px;
  }
  .feature-list {
    width: 100%;
    max-width: 480px;
  }
  .feature-item {
    text-align: left;
  }
  .privacy-callout {
    margin: 0 auto;
  }
  .top-header {
    padding: 16px 20px;
  }
  .main-wrapper {
    padding: 16px 20px 36px;
  }
}

.page-greeting {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--text-primary);
  line-height: 1.2;
}
.subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.doctor-overview { margin-bottom: 16px; }
.doctor-grid { align-items: start; }

/* ==========================================================================
   DOCTOR VIEW — consultation layout (FR-CLI-22/23/24)
   ========================================================================== */
.doctor-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.doctor-fact { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-top: 2px; }
.doctor-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.doctor-ice a { color: var(--apple-blue-text); text-decoration: none; }
.doctor-ice a:hover { text-decoration: underline; }

/* Identity on the left, scan pass on the right; the pass drops below the
   details once there is no room for two columns. */
.doctor-identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.doctor-scanpass { display: grid; gap: 12px; justify-items: center; max-width: 300px; }
.scanpass-item { margin: 0; display: grid; gap: 6px; justify-items: center; }
.scanpass-item svg { display: block; max-width: 100%; height: auto; }
.scanpass-item figcaption,
.scanpass-note { font-size: 11.5px; color: var(--text-tertiary); text-align: center; line-height: 1.45; }
.scanpass-note { max-width: 280px; }

@media (max-width: 900px) {
  .doctor-identity { grid-template-columns: minmax(0, 1fr); }
  .doctor-scanpass { max-width: none; }
}

/* The banner is a flex row of "who you are viewing" and two buttons. Below
   this width the two buttons alone are wider than the phone, so the row has to
   wrap rather than push the page sideways. */
@media (max-width: 620px) {
  .doctor-view-banner { flex-wrap: wrap; padding: 20px; }
  .doctor-banner-actions { width: 100%; }
  .doctor-banner-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Drug allergies get a standing band because they are the entry a prescriber
   must not miss. The emphasis is on the allergen being *recorded*, not on how
   severe it is — S1 records no severity grade, so none is implied here. */
.doctor-safety .allergy-band {
  background: var(--apple-crimson-bg);
  border: 1px solid var(--apple-crimson);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.allergy-band-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--apple-crimson-text);
  margin-bottom: 8px;
}
.allergy-band-list { list-style: none; display: grid; gap: 8px; }
.allergy-band-list strong { display: block; font-size: 16px; color: var(--apple-crimson-text); }
.allergy-band-list span { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 1px; }

.doctor-alerts { display: grid; gap: 8px; }
.doctor-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--apple-canvas);
}
.doctor-alert-red { background: var(--apple-crimson-bg); }
.doctor-alert-yellow { background: var(--apple-amber-bg); }
.doctor-alert strong { display: block; font-size: 14px; color: var(--text-primary); }
.doctor-alert span { display: block; font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }

.vitals-trend { margin: 0 0 14px; }
.vitals-trend svg { display: block; width: 100%; height: 90px; }
.vitals-trend figcaption { font-size: 11.5px; color: var(--text-tertiary); margin-top: 4px; }

.doctor-table-scroll { overflow-x: auto; }
.doctor-vitals-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doctor-vitals-table th,
.doctor-vitals-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-border-subtle);
  white-space: nowrap;
}
.doctor-vitals-table thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.doctor-vitals-table tbody tr:last-child th,
.doctor-vitals-table tbody tr:last-child td { border-bottom: 0; }
.doctor-vitals-table .in-range { color: var(--apple-emerald-text); }
.doctor-vitals-table .out-of-range { color: var(--apple-crimson-text); font-weight: 600; }
.doctor-vitals-table .range-note {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.lab-panel {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.lab-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.lab-panel-head strong { font-size: 15px; }
.lab-panel-head span { font-size: 12.5px; color: var(--text-tertiary); }
.lab-values {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 16px;
}
.lab-values li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px dotted var(--card-border);
  padding-bottom: 4px;
}
.lab-name { font-size: 13px; color: var(--text-secondary); }
.lab-value { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.lab-values li.abnormal .lab-value { color: var(--apple-crimson-text); }
.lab-unit { font-weight: 400; font-size: 11.5px; color: var(--text-tertiary); margin-left: 3px; }

/* ==========================================================================
   SECTION 2: STRUCTURED MEDICAL BACKGROUND (SURGICAL & FAMILY HISTORY)
   ========================================================================== */
.section2-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.add-box-panel {
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border: 1px dashed rgba(0, 0, 0, 0.15);
}
.add-box-panel.green-tint {
  background: var(--apple-emerald-bg);
  border-color: rgba(52, 199, 89, 0.4);
}
.add-box-panel.blue-tint {
  background: var(--apple-blue-subtle);
  border-color: rgba(0, 113, 227, 0.35);
}
.chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip-btn {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chip-btn:hover {
  background: #F8F9FA;
  border-color: rgba(0, 0, 0, 0.25);
}
.chip-btn.active {
  background: var(--apple-blue);
  color: white;
  border-color: var(--apple-blue);
}
.chip-btn.condition-chip.selected {
  background: var(--apple-indigo);
  color: white;
  border-color: var(--apple-indigo);
}
.chips-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
  padding: 6px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.chips-tray .chip-btn {
  font-size: 11px;
  padding: 3px 8px;
}
.search-indicator {
  position: absolute;
  right: 12px;
  top: 10px;
  color: var(--text-tertiary);
  pointer-events: none;
  font-size: 13px;
}
.typeahead-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 4px;
}
.typeahead-option {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.typeahead-option:hover {
  background: var(--apple-blue-subtle);
}
.typeahead-custom {
  padding: 8px 12px;
  background: #F8FAFC;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--apple-blue-text);
  font-weight: 600;
  font-size: 12px;
}
.typeahead-custom:hover {
  background: var(--apple-blue-subtle);
}
.entry-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.entry-card-item {
  background: white;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.entry-card-item .item-title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.entry-card-item .btn-remove {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 13px;
}
.entry-card-item .btn-remove:hover {
  color: var(--apple-crimson);
  background: var(--apple-crimson-bg);
}
.section-divider {
  border: 0;
  border-top: 1px solid var(--card-border-subtle);
}

/* ==========================================================================
   INTELLIGENT ALLERGY BUILDER & QUICK PICKS
   ========================================================================== */
.allergen-quick-picks {
  margin-top: 10px;
  padding: 12px;
  background: var(--apple-canvas, #F5F5F7);
  border: 1px solid var(--card-border-subtle, rgba(0,0,0,0.06));
  border-radius: var(--radius-md, 12px);
  transition: all 0.2s ease;
}
.allergen-tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.allergen-tray-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary, #565659);
  display: flex;
  align-items: center;
  gap: 6px;
}
.allergen-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.allergy-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full, 9999px);
  font-size: 12.5px;
  font-weight: 500;
  background: #FFFFFF;
  color: var(--text-primary, #1D1D1F);
  border: 1px solid var(--card-border, rgba(0,0,0,0.1));
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.allergy-chip:hover {
  background: var(--apple-blue-subtle, #EBF4FD);
  border-color: var(--apple-blue, #0071E3);
  color: var(--apple-blue-text, #0058B6);
  transform: translateY(-1px);
}
.allergy-chip.active {
  background: var(--apple-blue, #0071E3);
  border-color: var(--apple-blue, #0071E3);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 113, 227, 0.25);
}
.allergy-chip-cat {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 2px;
}

/* Reaction tags helper */
.allergy-reactions-helper {
  margin-top: 6px;
  margin-bottom: 12px;
}
.allergy-reactions-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary, #86868B);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.allergy-reaction-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.reaction-chip {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-full, 9999px);
  background: #FFFFFF;
  color: var(--text-secondary, #565659);
  border: 1px dashed var(--card-border, rgba(0,0,0,0.15));
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.reaction-chip:hover {
  border-style: solid;
  border-color: var(--apple-amber, #FF9500);
  color: var(--apple-amber-text, #9E5C00);
  background: var(--apple-amber-bg, #FFF4E5);
}
.reaction-chip.active {
  background: var(--apple-amber-bg, #FFF4E5);
  border-style: solid;
  border-color: var(--apple-amber, #FF9500);
  color: var(--apple-amber-text, #9E5C00);
  font-weight: 600;
}
.reaction-chip.severe:hover, .reaction-chip.severe.active {
  background: var(--apple-crimson-bg, #FFEBEA);
  border-color: var(--apple-crimson, #FF3B30);
  color: var(--apple-crimson-text, #B81810);
}

/* ==========================================================================
   SYMPTOM DIARY REDESIGN ENHANCEMENTS (Quick-picks, Date presets, Reminders)
   ========================================================================== */
.symptom-quick-picks {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--apple-canvas, #F5F5F7);
  border: 1px solid var(--card-border-subtle, rgba(0,0,0,0.06));
  border-radius: var(--radius-md, 12px);
}
.symptom-tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.symptom-tray-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary, #565659);
  display: flex;
  align-items: center;
  gap: 6px;
}
.symptom-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.symptom-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--radius-full, 9999px);
  font-size: 13px;
  font-weight: 500;
  background: #FFFFFF;
  color: var(--text-primary, #1D1D1F);
  border: 1px solid var(--card-border, rgba(0,0,0,0.12));
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.symptom-chip:hover {
  background: var(--apple-blue-subtle, #EBF4FD);
  border-color: var(--apple-blue, #0071E3);
  color: var(--apple-blue-text, #0058B6);
  transform: translateY(-1px);
}
.symptom-chip.active {
  background: var(--apple-blue, #0071E3);
  border-color: var(--apple-blue, #0071E3);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3);
}

/* Date & Time helper styles */
.date-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.date-preset-btn, .time-preset-btn {
  padding: 5px 12px;
  border-radius: var(--radius-full, 9999px);
  font-size: 12.5px;
  font-weight: 500;
  background: var(--apple-canvas, #F5F5F7);
  border: 1px solid var(--card-border, rgba(0,0,0,0.1));
  color: var(--text-secondary, #565659);
  cursor: pointer;
  transition: all 0.15s ease;
}
.date-preset-btn:hover, .time-preset-btn:hover {
  background: #EBEBED;
  color: var(--text-primary, #1D1D1F);
}
.date-preset-btn.active, .time-preset-btn.active {
  background: var(--apple-blue, #0071E3);
  border-color: var(--apple-blue, #0071E3);
  color: #FFFFFF;
}

.time-expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--apple-blue-text, #0058B6);
  cursor: pointer;
  margin-top: 6px;
  user-select: none;
}
.time-expand-toggle:hover {
  text-decoration: underline;
}

.time-expand-panel {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--apple-canvas, #F5F5F7);
  border-radius: var(--radius-sm, 8px);
  border: 1px dashed var(--card-border, rgba(0,0,0,0.12));
}

/* Check-in reminder card */
.reminder-card-box {
  padding: 14px;
  background: var(--apple-canvas, #F5F5F7);
  border: 1px solid var(--card-border-subtle, rgba(0,0,0,0.08));
  border-radius: var(--radius-md, 12px);
  margin-bottom: 18px;
  transition: all 0.2s ease;
}
.reminder-card-box.active {
  background: #F0F7FF;
  border-color: rgba(0, 113, 227, 0.25);
}
.reminder-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.reminder-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.reminder-pill-btn {
  padding: 4px 11px;
  border-radius: var(--radius-full, 9999px);
  font-size: 12px;
  font-weight: 500;
  background: #FFFFFF;
  border: 1px solid var(--card-border, rgba(0,0,0,0.12));
  color: var(--text-secondary, #565659);
  cursor: pointer;
  transition: all 0.15s ease;
}
.reminder-pill-btn:hover {
  background: #F5F5F7;
  color: var(--text-primary, #1D1D1F);
}
.reminder-pill-btn.active {
  background: var(--apple-blue, #0071E3);
  border-color: var(--apple-blue, #0071E3);
  color: #FFFFFF;
}

/* Episode card & filter styling */
.episode-filter-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--card-border-subtle, rgba(0,0,0,0.06));
}
.episode-filter-btn {
  padding: 4px 12px;
  border-radius: var(--radius-full, 9999px);
  font-size: 12px;
  font-weight: 600;
  background: var(--apple-canvas, #F5F5F7);
  border: 1px solid transparent;
  color: var(--text-secondary, #565659);
  cursor: pointer;
  transition: all 0.15s ease;
}
.episode-filter-btn:hover {
  background: #EBEBED;
  color: var(--text-primary, #1D1D1F);
}
.episode-filter-btn.active {
  background: var(--text-primary, #1D1D1F);
  color: #FFFFFF;
}

.episode-card-item {
  padding: 16px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--card-border-subtle, rgba(0,0,0,0.06));
  background: #FFFFFF;
  margin-bottom: 10px;
  transition: all 0.2s ease;
}
.episode-card-item:hover {
  border-color: rgba(0, 113, 227, 0.3);
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

/* Soft-tinted info callout banner */
.info-callout-soft {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #F0F6FC;
  border: 1px solid rgba(0, 113, 227, 0.15);
  border-radius: var(--radius-md, 12px);
  font-size: 13px;
  color: var(--apple-blue-text);
  margin-bottom: 16px;
}
.info-callout-soft i {
  font-size: 16px;
  color: var(--apple-blue-text, #0058B6);
  flex-shrink: 0;
}

/* The Concerns page used to carry its own .concern-filter-*, .concern-chip and
   .concern-quick-picks rules. It was the only sub-module that had been
   redesigned, so those names had no counterpart on the other five pages and
   nothing to converge on. They are now the shared .filter-bar / .pick-chip /
   .quick-tray in the My Health kit at the end of this file. */

/* ==========================================================================
   PRINT STYLESHEET (v1.2 §6.1)
   ========================================================================== */
@media print {
  .apple-header, .nav-capsule, .sidebar, .sidebar-overlay, .mobile-nav, .no-print, .topbar {
    display: none !important;
  }
  .main { height: auto !important; overflow: visible !important; }
  .content { padding: 0 !important; }
  .card, .apple-card { box-shadow: none !important; break-inside: avoid; border: 1px solid #CCC !important; }
  .timeline-event, .timeline-node { box-shadow: none !important; break-inside: avoid; }

  /* Doctor View banner is screen chrome (.no-print) and is hidden above, so §6.1's dark-banner
     inversion is unnecessary: patient identity prints from the .doctor-overview card instead.
     Any dark surface that DOES print must invert here. */
  .doctor-overview { border: 1px solid #000 !important; }
  .doctor-grid { grid-template-columns: 1fr 1fr !important; }
  .apple-header, .btn, .btn-apple-doctor { display: none !important; }

  /* The scan pass is the reason a clinic prints this sheet at all, so the
     barcodes must survive the page. Browsers strip background graphics by
     default but SVG <rect> fills are foreground, so the symbols print without
     asking the user to enable background printing. Keep the quiet zones: a
     barcode cropped to its bars will not scan. */
  .doctor-identity { grid-template-columns: minmax(0, 1fr) auto !important; }
  .doctor-scanpass { break-inside: avoid; }

  /* Size the symbols in millimetres, not pixels. A scanner cares about the
     physical width of one module, and a percentage width would let a narrow
     print box shrink the QR until a phone camera can no longer resolve it.
     36mm across a 57-module symbol leaves each module ~0.63mm, comfortably
     above the ~0.4mm most cameras manage on a laser print. */
  .scanpass-item svg { max-width: none !important; }
  .doctor-scanpass figure:first-of-type svg { width: 58mm !important; height: auto !important; }
  .doctor-scanpass figure:last-of-type svg { width: 36mm !important; height: auto !important; }
  .doctor-safety .allergy-band {
    border: 2px solid #000 !important;
    background: #FFF !important;
  }
  .allergy-band-label, .allergy-band-list strong { color: #000 !important; }
  .doctor-vitals-table .out-of-range { color: #000 !important; text-decoration: underline; }
  .doctor-vitals-table .in-range { color: #000 !important; }
  .lab-values li.abnormal .lab-value { color: #000 !important; text-decoration: underline; }
  .doctor-alert { background: #FFF !important; border: 1px solid #000 !important; }
  .lab-panel, .doctor-vitals-table { break-inside: avoid; }
  a[href]::after { content: ""; }

  /* Health Summary (FR-DEM-38) paper header and footer.
     Both blocks carry an inline display:none so they never reach the screen,
     and an inline style beats a stylesheet rule — so the print override has to
     be !important or the printed sheet loses its patient identification and its
     verification notice. That notice is the reason the footer exists; a printed
     clinical document must not leave the app unlabelled. */
  .print-header-only { display: flex !important; justify-content: space-between; align-items: flex-end; }
  .print-footer-only { display: block !important; }

  /* The print page box measures roughly 700px, which trips the 760px mobile
     breakpoint in layout.css and collapses every card grid to one column. On
     paper that doubles the page count for no benefit, so restore two columns. */
  .grid-2, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}

/* ==========================================================================
   Institution picker (app/Views/components/facility_select.php)

   Lives in components.css, not a module stylesheet, because Investigations,
   Imaging and any later module render the same component. The old per-module
   versions styled this row two different ways — one inline, one via
   .custom-site-input-row in imaging.css.
   ========================================================================== */
.facility-custom-row {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--apple-canvas);
  border: 1px dashed var(--apple-blue);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Module 7 calculators (FR-CAL-01..08)
   ========================================================================== */

.calc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.unit-toggle {
  display: inline-flex;
  background: var(--canvas);
  border: 1px solid var(--control-border);
  border-radius: 999px;
  padding: 3px;
}
.unit-opt {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.unit-opt.active {
  background: var(--apple-blue);
  color: #fff;
}
.unit-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 16px;
  align-items: start;
}
.calc-card[hidden] { display: none; }

.unit-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.calc-result {
  background: var(--canvas);
  border: 1px solid var(--card-border-subtle);
  border-radius: 12px;
  padding: 14px;
  margin: 14px 0;
}
.calc-result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.calc-result-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.calc-result-value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.calc-result-unit {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.calc-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.calc-demographics {
  color: var(--text-tertiary);
  margin: 0 0 4px;
}
.calc-blocked {
  background: var(--apple-amber-bg);
  color: var(--apple-amber-text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  margin: 12px 0 0;
}

/* Band meter: the needle sits over a fixed colour scale, so a result's
   position is readable without reading the number. */
.calc-meter {
  position: relative;
  height: 8px;
  margin-top: 12px;
}
.calc-meter-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.calc-meter-bar.bmi {
  background: linear-gradient(90deg,
    var(--apple-blue) 0%, var(--apple-blue) 22%,
    var(--apple-emerald) 30%, var(--apple-emerald) 52%,
    var(--apple-amber) 60%, var(--apple-amber) 78%,
    var(--apple-crimson) 86%, var(--apple-crimson) 100%);
}
.calc-meter-bar.whtr {
  background: linear-gradient(90deg,
    var(--apple-emerald) 0%, var(--apple-emerald) 45%,
    var(--apple-amber) 55%, var(--apple-amber) 72%,
    var(--apple-crimson) 82%, var(--apple-crimson) 100%);
}
.calc-meter-bar.egfr {
  background: linear-gradient(90deg,
    var(--apple-crimson) 0%, var(--apple-crimson) 16%,
    var(--apple-amber) 28%, var(--apple-amber) 58%,
    var(--apple-emerald) 68%, var(--apple-emerald) 100%);
}
.calc-meter-bar.findrisc {
  background: linear-gradient(90deg,
    var(--apple-emerald) 0%, var(--apple-emerald) 42%,
    var(--apple-amber) 46%, var(--apple-amber) 76%,
    var(--apple-crimson) 82%, var(--apple-crimson) 100%);
}
.calc-meter-bar.cvd {
  background: linear-gradient(90deg,
    var(--apple-emerald) 0%, var(--apple-emerald) 20%,
    var(--apple-amber) 25%, var(--apple-amber) 65%,
    var(--apple-crimson) 75%, var(--apple-crimson) 100%);
}
.calc-meter-needle {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 3px;
  height: 16px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--text-primary);
  box-shadow: 0 0 0 2px var(--apple-card);
  transition: left 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .calc-meter-needle { transition: none; }
}

/* --- Module 8 Predictors UI Elements --- */
.pred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.pred-card-hub {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--radius-lg, 16px);
  padding: 24px;
  border: 1px solid var(--border-subtle, #e3e9e6);
  background: var(--apple-card, #ffffff);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.pred-card-hub h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.pred-gauge-wrapper {
  position: relative;
  text-align: center;
  padding: 20px 0 10px 0;
}
.pred-dial-svg {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: inline-block;
}
.pop-comparison-box {
  background: var(--apple-canvas, #f5f5f7);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}
.pop-bar-track {
  position: relative;
  height: 12px;
  background: #e2e8f0;
  border-radius: 6px;
  margin: 18px 0 10px 0;
}
.pop-marker {
  position: absolute;
  top: -8px;
  width: 4px;
  height: 28px;
  border-radius: 2px;
  transform: translateX(-50%);
}
.pop-marker.patient {
  background: var(--apple-blue, #0071E3);
  z-index: 2;
}
.pop-marker.population {
  background: #64748b;
  z-index: 1;
}
.pred-rec-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}
.pred-rec-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--apple-canvas, #f8fafc);
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  border-left: 3px solid var(--apple-blue, #0071E3);
}
.pred-rec-item.green { border-left-color: var(--apple-emerald); }
.pred-rec-item.yellow { border-left-color: var(--apple-amber); }
.pred-rec-item.red { border-left-color: var(--apple-crimson); }
.pred-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 24px;
}
.pred-disclaimer i {
  font-size: 16px;
  margin-top: 2px;
  color: #d97706;
}

/* ==========================================================================
   TREATMENT & MEDICATION INTELLIGENT UI
   ========================================================================== */
.quickpick-tray {
  margin-bottom: 16px;
  background: var(--apple-canvas, #F5F5F7);
  padding: 12px 14px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--card-border-subtle, rgba(0,0,0,0.05));
}
.quickpick-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #565659);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.quick-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFFFFF;
  border: 1px solid var(--card-border, rgba(0,0,0,0.1));
  border-radius: var(--radius-full, 9999px);
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #565659);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.quick-pill:hover, .quick-pill.active {
  background: var(--apple-blue-subtle, #EBF4FD);
  border-color: var(--apple-blue, #0071E3);
  color: var(--apple-blue-text, #0058B6);
  font-weight: 600;
  transform: translateY(-1px);
}

.brand-suggestions-tray {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--apple-canvas, #F5F5F7);
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--card-border-subtle, rgba(0,0,0,0.04));
  display: none;
}
.brand-suggestions-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary, #86868B);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.brand-chips-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.brand-chip-btn {
  background: #FFFFFF;
  border: 1px solid rgba(0, 113, 227, 0.2);
  border-radius: var(--radius-full, 9999px);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--apple-blue-text);
  cursor: pointer;
  transition: all 0.15s ease;
}
.brand-chip-btn:hover, .brand-chip-btn.active {
  background: var(--apple-blue, #0071E3);
  color: #FFFFFF;
  border-color: var(--apple-blue, #0071E3);
  box-shadow: 0 2px 6px rgba(0, 113, 227, 0.25);
}

.duration-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.duration-chip {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--card-border-subtle, rgba(0,0,0,0.05));
  border-radius: var(--radius-full, 9999px);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary, #565659);
  cursor: pointer;
  transition: all 0.15s ease;
}
.duration-chip:hover {
  background: var(--apple-blue-subtle, #EBF4FD);
  color: var(--apple-blue-text, #0058B6);
  border-color: rgba(0, 113, 227, 0.3);
}
.duration-chip.active {
  background: var(--apple-blue, #0071E3);
  color: #FFFFFF;
  font-weight: 600;
  border-color: var(--apple-blue, #0071E3);
}

.med-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}
.brand-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--apple-blue-text, #0058B6);
  background: var(--apple-blue-subtle, #EBF4FD);
  padding: 1px 7px;
  border-radius: var(--radius-full, 9999px);
}
.med-meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.route-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}
.schedule-main {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 12.5px;
}
.schedule-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
/* Correct and Stop sit side by side where there is room and stack where there
   is not. Without the wrap the pair overflows the card in the two-column
   layout, and the primary actions end up behind a horizontal scroll. */
.med-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ==========================================================================
   NON-PHARMACOLOGICAL & LIFESTYLE THERAPY UI
   ========================================================================== */
.category-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 600px) {
  .category-selector-grid { grid-template-columns: repeat(2, 1fr); }
}
.category-card-btn {
  background: var(--apple-canvas, #F5F5F7);
  border: 1.5px solid var(--card-border-subtle, rgba(0,0,0,0.05));
  border-radius: var(--radius-md, 12px);
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.category-card-btn:hover {
  background: #FFFFFF;
  border-color: var(--apple-blue, #0071E3);
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.1);
  transform: translateY(-2px);
}
.category-card-btn.active {
  background: #FFFFFF;
  border-color: var(--apple-blue, #0071E3);
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.18);
  outline: 2px solid var(--apple-blue, #0071E3);
}
.category-icon {
  font-size: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.category-card-btn:nth-child(1) .category-icon { background: var(--apple-emerald-bg, #E8F8EE); color: var(--apple-emerald-text, #137734); }
.category-card-btn:nth-child(2) .category-icon { background: var(--apple-blue-subtle, #EBF4FD); color: var(--apple-blue-text); }
.category-card-btn:nth-child(3) .category-icon { background: var(--apple-purple-bg, #F8F0FE); color: var(--apple-purple-text, #702496); }
.category-card-btn:nth-child(4) .category-icon { background: var(--apple-indigo-bg, #EFEFFD); color: var(--apple-indigo-text, #3634A3); }
.category-card-btn:nth-child(5) .category-icon { background: var(--apple-amber-bg, #FFF4E5); color: var(--apple-amber-text, #9E5C00); }
.category-card-btn:nth-child(6) .category-icon { background: var(--apple-teal-bg, #E8F7FA); color: var(--apple-teal-text, #0E6B7C); }
.category-card-btn:nth-child(7) .category-icon { background: rgba(0,0,0,0.06); color: var(--text-primary); }

.category-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.custom-category-box {
  background: var(--apple-canvas, #F5F5F7);
  border: 1px solid var(--card-border, rgba(0,0,0,0.1));
  border-radius: var(--radius-md, 12px);
  padding: 10px 14px;
  margin-bottom: 16px;
  display: none;
}

.presets-tray {
  background: var(--apple-canvas, #F5F5F7);
  border-radius: var(--radius-md, 12px);
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--card-border-subtle, rgba(0,0,0,0.05));
}
.presets-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #565659);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.presets-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.preset-chip {
  background: #FFFFFF;
  border: 1px solid var(--card-border, rgba(0,0,0,0.1));
  border-radius: var(--radius-full, 9999px);
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.preset-chip:hover, .preset-chip.active {
  background: var(--apple-blue, #0071E3);
  border-color: var(--apple-blue, #0071E3);
  color: #FFFFFF;
  font-weight: 600;
  transform: translateY(-1px);
}

.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
}
.cat-diet { background: var(--apple-emerald-bg, #E8F8EE); color: var(--apple-emerald-text, #137734); }
.cat-exercise { background: var(--apple-blue-subtle, #EBF4FD); color: var(--apple-blue-text); }
.cat-physio { background: var(--apple-purple-bg, #F8F0FE); color: var(--apple-purple-text, #702496); }
.cat-wellness { background: var(--apple-indigo-bg, #EFEFFD); color: var(--apple-indigo-text, #3634A3); }
.cat-ayurveda { background: var(--apple-amber-bg, #FFF4E5); color: var(--apple-amber-text, #9E5C00); }
.cat-device { background: var(--apple-teal-bg, #E8F7FA); color: var(--apple-teal-text, #0E6B7C); }
.cat-custom { background: rgba(0,0,0,0.06); color: var(--text-primary); }

.freq-chip-btn {
  background: var(--apple-canvas, #F5F5F7);
  border: 1px solid var(--card-border-subtle, rgba(0,0,0,0.06));
  border-radius: var(--radius-full, 9999px);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary, #565659);
  cursor: pointer;
  transition: all 0.15s;
}
.freq-chip-btn:hover, .freq-chip-btn.active {
  background: var(--apple-blue-subtle, #EBF4FD);
  color: var(--apple-blue-text, #0058B6);
  border-color: rgba(0, 113, 227, 0.4);
  font-weight: 600;
}

.provider-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-secondary, #565659);
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
}

/* Non-pharmacological list: pieces the markup used with no rule behind them. */
.item-meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
/* Edit and Complete stack rather than pushing the table into a scroll, the
   same way .med-actions does on the medications list. */
.np-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ==========================================================================
   MY HEALTH — UNIFIED CLINICAL KIT

   One set of classes for all six Clinical Records sub-modules (Vitals,
   Conditions, Allergies, Concerns, Procedures, Lifestyle). Before this, each
   sub-module that had been redesigned invented its own names for the same
   thing — .concern-filter-btn on one page, .allergen-tray-header on another —
   so the pages drifted apart visually as each was built in turn. Everything
   below is shared by all six; a genuinely module-specific rule belongs in that
   module's own block further up, not here.
   ========================================================================== */

/* --- Module KPI strip ---------------------------------------------------- */
.mh-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .mh-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mh-metrics { grid-template-columns: 1fr; } }

.mh-metric {
  background: var(--apple-card);
  border: 1px solid var(--card-border, rgba(0,0,0,0.08));
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.mh-metric-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: 0 0 auto;
  background: var(--apple-blue-subtle);
  color: var(--apple-blue-text);
}
/* The -text value, never the base token: PHR-REF-UI-ICON-2026-01 pairs each
   family's base colour with its own subtle background, and for emerald, amber,
   teal and slate that combination is between 2.0:1 and 3.0:1 — under the 3:1
   the reference's own §1.1 asks for. Same hue, same meaning, legible. */
.mh-metric-icon.emerald { background: var(--apple-emerald-bg); color: var(--apple-emerald-text); }
.mh-metric-icon.amber   { background: var(--apple-amber-bg);   color: var(--apple-amber-text); }
.mh-metric-icon.crimson { background: var(--apple-crimson-bg); color: var(--apple-crimson-text); }
.mh-metric-icon.indigo  { background: var(--apple-indigo-bg);  color: var(--apple-indigo-text); }
.mh-metric-icon.purple  { background: var(--apple-purple-bg);  color: var(--apple-purple-text); }
.mh-metric-icon.teal    { background: var(--apple-teal-bg);    color: var(--apple-teal-text); }
.mh-metric-icon.pink    { background: var(--apple-pink-bg);    color: var(--apple-pink-text); }
.mh-metric-icon.slate   { background: var(--apple-slate-bg);   color: var(--apple-slate-text); }

.mh-metric-value {
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -0.4px;
  line-height: 1.15;
  color: var(--text-primary);
}
.mh-metric-value.sm { font-size: 14.5px; letter-spacing: -0.1px; }
.mh-metric-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* --- Filter pills (row filtering) ---------------------------------------- */
.filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.filter-btn {
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  background: var(--apple-canvas);
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.filter-btn:hover { background: #EBEBED; color: var(--text-primary); }
.filter-btn.active { background: var(--text-primary); color: #FFFFFF; }

/* Free-text row search, for the lists long enough that pills alone stop being
   enough to find a record. */
.filter-search {
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
  font-family: var(--font-sans);
  border: 1px solid var(--card-border, rgba(0,0,0,0.08));
  border-radius: var(--radius-sm);
  background: #FAFAFB;
  margin-bottom: 12px;
}
.filter-search:focus {
  outline: none;
  border-color: var(--apple-blue);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

/* Shown when a pill or search leaves nothing visible. Without it the emptied
   table body reads as "you have no records at all". */
.mh-no-matches {
  padding: 22px 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* --- Quick-pick tray ------------------------------------------------------ */
.quick-tray {
  margin-bottom: 16px;
  padding: 14px;
  background: var(--apple-canvas);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-sm);
}
.tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.tray-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tray-note { font-size: 11px; color: var(--text-tertiary); }
.chip-group { display: flex; flex-wrap: wrap; gap: 7px; }

.pick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  background: #FFFFFF;
  color: var(--text-primary);
  border: 1px solid var(--card-border, rgba(0,0,0,0.08));
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  user-select: none;
  text-align: left;
}
.pick-chip:hover {
  background: var(--apple-blue-subtle);
  border-color: var(--apple-blue);
  color: var(--apple-blue-text);
}
.pick-chip.active {
  background: var(--apple-blue);
  border-color: var(--apple-blue);
  color: #FFFFFF;
}
.pick-chip-meta {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.pick-chip.active .pick-chip-meta { color: #FFFFFF; opacity: .82; }
.pick-chip:hover .pick-chip-meta { color: inherit; opacity: .82; }

/* --- Segmented pill selector that drives a hidden <select> ---------------- */
/* The select stays in the DOM and stays the control that submits, so the field
   still works with JavaScript off and the server-side validation is unchanged. */
.pill-select {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pill-select-btn {
  flex: 1 1 0;
  min-width: 92px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--card-border, rgba(0,0,0,0.08));
  background: #FFFFFF;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pill-select-btn i { font-size: 15px; }
.pill-select-btn:hover { border-color: var(--apple-blue); color: var(--text-primary); }
.pill-select-btn.active {
  border-color: var(--apple-blue);
  background: var(--apple-blue-subtle);
  color: var(--apple-blue-text);
}
/* The select this group drives is clipped once the pills take over, so the
   browser's own validation outline lands somewhere invisible. */
.pill-select.is-invalid .pill-select-btn {
  border-color: var(--apple-crimson);
  color: var(--apple-crimson-text);
}

/* --- Inline status lifecycle select (FR-CLI-12) --------------------------- */
.status-select-inline {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 26px 5px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--card-border, rgba(0,0,0,0.08));
  background-color: #FFFFFF;
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 9px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.status-select-inline:focus {
  outline: none;
  border-color: var(--apple-blue);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}
.status-select-inline.is-active     { background-color: var(--apple-crimson-bg); color: var(--apple-crimson-text); }
.status-select-inline.is-controlled { background-color: var(--apple-emerald-bg); color: var(--apple-emerald-text); }
.status-select-inline.is-resolved   { background-color: #F0F0F2; color: var(--text-secondary); }
.status-select-inline.is-ongoing    { background-color: var(--apple-amber-bg); color: var(--apple-amber-text); }

/* --- Record type / category pills in list rows ---------------------------- */
.type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  background: #F0F0F2;
  color: var(--text-secondary);
}
.type-pill i { font-size: 11px; }
.type-pill.drug        { background: var(--apple-crimson-bg); color: var(--apple-crimson-text); }
.type-pill.food        { background: var(--apple-amber-bg);   color: var(--apple-amber-text); }
.type-pill.environment { background: var(--apple-emerald-bg); color: var(--apple-emerald-text); }
.type-pill.blue        { background: var(--apple-blue-subtle); color: var(--apple-blue-text); }
.type-pill.indigo      { background: var(--apple-indigo-bg);  color: var(--apple-indigo-text); }
.type-pill.emerald     { background: var(--apple-emerald-bg); color: var(--apple-emerald-text); }
.type-pill.amber       { background: var(--apple-amber-bg);   color: var(--apple-amber-text); }
.type-pill.crimson     { background: var(--apple-crimson-bg); color: var(--apple-crimson-text); }
.type-pill.purple      { background: var(--apple-purple-bg);  color: var(--apple-purple-text); }
.type-pill.teal        { background: var(--apple-teal-bg);    color: var(--apple-teal-text); }
.type-pill.pink        { background: var(--apple-pink-bg);    color: var(--apple-pink-text); }
.type-pill.slate       { background: var(--apple-slate-bg);   color: var(--apple-slate-text); }

/* --- Derived-value preview (the calculator engine, shown before saving) ---
   Advisory only. Every value here is recomputed server-side on save; what the
   browser shows is never what gets stored. */
.derived-box {
  background: var(--apple-indigo-bg);
  border: 1px solid rgba(88, 86, 214, 0.18);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.derived-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--apple-indigo-text);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
}
.derived-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.derived-cell {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}
.derived-label { font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); }
.derived-value {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-top: 2px;
  color: var(--text-primary);
}
/* Single-line variant: the lifestyle questionnaire compiles its answers into
   one sentence rather than a grid of numbers. */
.derived-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-tertiary);
}
.derived-line strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--apple-indigo-text);
}

/* --- Safety callout (MRI hardware, anaphylaxis) --------------------------- */
.safety-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 16px;
  background: var(--apple-amber-bg);
  color: var(--apple-amber-text);
  border: 1px solid rgba(255, 149, 0, 0.25);
}
.safety-alert i { margin-top: 2px; flex: 0 0 auto; }
.safety-alert.critical {
  background: var(--apple-crimson-bg);
  color: var(--apple-crimson-text);
  border-color: rgba(255, 59, 48, 0.28);
}
.safety-alert.info {
  background: var(--apple-blue-subtle);
  color: var(--apple-blue-text);
  border-color: rgba(0, 113, 227, 0.22);
}
.safety-alert[hidden] { display: none; }

/* --- Shared empty state --------------------------------------------------- */
.mh-empty {
  padding: 28px 12px;
  text-align: center;
}
.mh-empty i {
  font-size: 30px;
  color: var(--text-quaternary);
  display: block;
  margin-bottom: 10px;
}
.mh-empty p { color: var(--text-secondary); font-size: 13.5px; }
.mh-empty .hint { margin-top: 4px; }

/* Full-width primary submit. All six add-forms end with the same 44px target,
   so they stop looking like six separate products. */
.btn-block {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
}

/* A button label inside a record list reads as its own line, not as three
   stacked words. .table-wrap already scrolls horizontally, so a wide row costs
   a scroll rather than a broken label. */
.table-wrap .btn { white-space: nowrap; }

/* --- Medication Patient Guide Drawer (FR-MED-01, FR-MED-02, FR-UX-17) ----- */
.med-guide-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}
.med-guide-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.med-guide-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 520px;
  background: var(--apple-card, #FFFFFF);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  z-index: 1001;
  transform: translateX(100%);
  /* translateX alone only moves the drawer off-screen: its close button and its
     leaflet link stay in the tab order, so a keyboard user tabs into controls
     they cannot see. visibility takes them out and is still animatable. */
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  display: flex;
  flex-direction: column;
}
.med-guide-drawer.open {
  transform: translateX(0);
  visibility: visible;
}

.med-guide-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: 2;
}
.med-guide-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 6px 0 2px;
  line-height: 1.25;
}
.med-guide-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.med-guide-close {
  background: var(--apple-canvas, #F5F5F7);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.med-guide-close:hover {
  background: #E5E5EA;
  color: var(--text-primary);
}

.med-guide-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}
.med-guide-card {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
  background: #FFFFFF;
}
.med-guide-card.canvas-bg {
  background: var(--apple-canvas, #F5F5F7);
}
.med-guide-card.warning-bg {
  background: var(--apple-crimson-bg, #FFEBEA);
  border-color: rgba(255, 59, 48, 0.25);
}
.med-guide-card.highlight-bg {
  background: var(--apple-blue-subtle, #EBF4FD);
  border-color: rgba(0, 113, 227, 0.2);
}
.med-guide-card.maintenance-bg {
  background: var(--apple-amber-bg, #FFF4E5);
  border-color: rgba(255, 149, 0, 0.25);
}
.med-guide-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}
.med-guide-card.warning-bg .med-guide-label {
  color: var(--apple-crimson-text, #B81810);
}
.med-guide-card.maintenance-bg .med-guide-label {
  color: var(--apple-amber-text, #9E5C00);
}
.med-guide-card.highlight-bg .med-guide-label {
  color: var(--apple-blue-text, #0058B6);
}
.med-guide-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0;
}
.med-guide-card.warning-bg .med-guide-text {
  color: #5C0B07;
  font-weight: 500;
}

.med-guide-monograph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.med-guide-monograph-meta {
  flex: 1;
}
.med-guide-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
  background: var(--apple-canvas, #F5F5F7);
}
.med-guide-disclaimer {
  font-size: 11.5px;
  color: var(--text-tertiary);
  text-align: center;
  font-style: italic;
  line-height: 1.4;
  margin-top: 8px;
}


/* --- Unified Health Pack feed (Module 13, FR-HPK-05 / FR-HPK-08) ----------- */
.hpk-feed { display:flex; flex-direction:column; gap:18px; margin-bottom:24px; }
.hpk-tier-label { font-size:11px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase;
                  color:var(--text-tertiary); display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.hpk-tier-label .n { width:17px; height:17px; border-radius:50%; background:var(--apple-canvas);
                     color:var(--text-secondary); font-size:10px; display:inline-flex;
                     align-items:center; justify-content:center; font-weight:700; }
.hpk-items { display:flex; flex-direction:column; gap:8px; }
.hpk-item { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px;
            border:1px solid var(--card-border); background:var(--apple-card); }
.hpk-item .hpk-ico { width:32px; height:32px; border-radius:8px; flex-shrink:0; display:flex;
                     align-items:center; justify-content:center; font-size:13px;
                     background:var(--apple-canvas); color:var(--text-secondary); }
.hpk-item .hpk-body { flex:1; min-width:0; }
.hpk-item .hpk-ttl { font-size:13.5px; font-weight:600; color:var(--text-primary); }
.hpk-item .hpk-ttl .hpk-target { font-weight:500; color:var(--text-secondary); font-size:12px; }
.hpk-item .hpk-meta { font-size:11.5px; color:var(--text-secondary); margin-top:2px;
                      display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.hpk-item .hpk-act { flex-shrink:0; }
.hpk-item.hpk-safety { border-color:rgba(255,59,48,0.30); background:rgba(255,59,48,0.035); }
.hpk-item.hpk-safety .hpk-ico { background:rgba(255,59,48,0.12); color:#D70015; }
.hpk-item.hpk-overdue { border-color:rgba(255,149,0,0.35); background:rgba(255,149,0,0.04); }
.hpk-item.hpk-overdue .hpk-ico { background:rgba(255,149,0,0.14); color:#9E5C00; }
.hpk-item.hpk-merged { border-color:rgba(0,113,227,0.35); background:rgba(0,113,227,0.03); }
.hpk-item.hpk-merged .hpk-ico { background:rgba(0,113,227,0.12); color:var(--apple-blue-text); }
.hpk-packtag { font-size:10px; font-weight:600; padding:1.5px 7px; border-radius:9px; white-space:nowrap;
               background:var(--apple-canvas); color:var(--text-secondary); border:1px solid var(--card-border); }
.hpk-packtag.is-primary { background:rgba(0,113,227,0.10); color:var(--apple-blue-text); border-color:rgba(0,113,227,0.25); }
.hpk-lock { font-size:10px; color:#D70015; font-weight:600; }
.hpk-dot { color:var(--text-tertiary); }
.hpk-more > summary { font-size:12px; color:var(--apple-blue-text); font-weight:600; cursor:pointer;
                      padding:4px 2px; list-style:none; }
.hpk-more > summary::-webkit-details-marker { display:none; }
.hpk-more[open] > summary { margin-bottom:8px; }
@media (max-width: 560px) {
  .hpk-item { flex-wrap:wrap; }
  .hpk-item .hpk-act { width:100%; }
  .hpk-item .hpk-act .btn { width:100%; }
}

/* ==========================================================================
   MODULE 16 -- PATIENT-FRIENDLY EXPERIENCE COMPONENT LAYER (FR-PFX)

   Additive. Every selector below is namespaced `pfx-`, and no delivered view
   used that prefix when this section was added, so adding it changed no page.
   These are the building blocks the per-page revamp uses AFTER the owner
   approves docs/PHR_Patient_Friendly_Experience_Spec_v0_1.md. Until then the
   rules here are inert by construction rather than by discipline.

   Three constraints this layer holds to, from the spec:

     - 16px type floor for anything a patient reads (FR-PFX-10). The one
       exception is `.pfx-dual-clinical`, the secondary clinical name, at
       14px: it is deliberately subordinate and is never the only copy of
       that information on screen.
     - 48px minimum tap target on every interactive element (FR-PFX-06).
     - Colour never carries meaning alone (FR-PFX-04). Each status renders a
       word AND a shape AND a colour. Measured ratios are recorded in
       base.css; the base fills are 2.2:1 on white, which is why no status is
       ever drawn as a bare coloured dot on a card background.

   No JavaScript. Disclosure is native <details>/<summary>, which is keyboard
   accessible, works before app.js has loaded, and asks nothing of a CSP that
   forbids inline script.
   ========================================================================== */

/* --- FR-PFX-03 dual naming: patient term prominent, clinical term secondary */
.pfx-dual { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pfx-dual-friendly {
  font-size: 17px; font-weight: 650; line-height: 1.3;
  color: var(--text-primary); overflow-wrap: anywhere;
}
.pfx-dual-clinical {
  font-size: 14px; font-weight: 500; line-height: 1.4;
  color: var(--text-tertiary); overflow-wrap: anywhere;
}
.pfx-dual-code {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; letter-spacing: -0.01em; color: var(--text-tertiary);
}

/* --- FR-PFX-04 plain-language result status ------------------------------- */
.pfx-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-full);
  font-size: 16px; font-weight: 600; line-height: 1.25;
  min-height: 40px; max-width: 100%;
}
.pfx-status::before {
  flex: 0 0 auto; width: 1em; height: 1em; font-size: 15px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
/* The glyph is the redundant, non-colour channel. Four distinct shapes. */
.pfx-status-expected  { color: var(--status-expected-text);  background: var(--status-expected-bg); }
.pfx-status-expected::before  { content: "\2713"; }   /* check */
.pfx-status-slight    { color: var(--status-slight-text);    background: var(--status-slight-bg); }
.pfx-status-slight::before    { content: "\25B2"; }   /* triangle */
.pfx-status-attention { color: var(--status-attention-text); background: var(--status-attention-bg); }
.pfx-status-attention::before { content: "\0021"; }   /* exclamation */
.pfx-status-unknown   { color: var(--status-unknown-text);   background: var(--status-unknown-bg); }
.pfx-status-unknown::before   { content: "\003F"; }   /* question */

/* --- FR-PFX-04 range gauge: where this value sits, as a picture ------------ */
.pfx-gauge { margin: 14px 0 4px; }
.pfx-gauge-track {
  position: relative; height: 12px; border-radius: var(--radius-full);
  background: var(--status-unknown-bg);
  border: 1px solid var(--card-border);
}
/* The expected band is a filled span inside the track, not the whole track,
   so a value outside it is visibly outside *something* rather than merely a
   different colour. Width and offset are set with an inline style attribute
   on the element: style-src allows 'unsafe-inline', script-src does not. */
.pfx-gauge-band {
  position: absolute; top: 0; bottom: 0;
  background: var(--status-expected-bg);
  border-left: 2px solid var(--status-expected-mark);
  border-right: 2px solid var(--status-expected-mark);
}
.pfx-gauge-marker {
  position: absolute; top: 50%; width: 18px; height: 18px;
  margin-left: -9px; transform: translateY(-50%);
  border-radius: 50%; background: var(--apple-card);
  border: 4px solid var(--status-unknown-mark);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.pfx-gauge-expected  .pfx-gauge-marker { border-color: var(--status-expected-mark); }
.pfx-gauge-slight    .pfx-gauge-marker { border-color: var(--status-slight-mark); }
.pfx-gauge-attention .pfx-gauge-marker { border-color: var(--status-attention-mark); }
.pfx-gauge-scale {
  display: flex; justify-content: space-between;
  margin-top: 8px; font-size: 14px; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* --- FR-PFX-08 three-tier progressive disclosure -------------------------- */
.pfx-disclose { margin-top: 12px; border-top: 1px solid var(--card-border-subtle); }
.pfx-disclose > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--tap-target-min);
  padding: 12px 2px; cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--apple-blue-text);
  list-style: none;
}
.pfx-disclose > summary::-webkit-details-marker { display: none; }
.pfx-disclose > summary::after {
  content: "\25BE"; margin-left: auto; font-size: 14px;
  transition: transform 0.15s ease;
}
.pfx-disclose[open] > summary::after { transform: rotate(180deg); }
.pfx-disclose > summary:focus-visible {
  outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm);
}
.pfx-disclose-body { padding: 4px 2px 14px; font-size: 16px; line-height: 1.55; }

/* --- FR-PFX-08 "tip" variant (V2 why-we-ask trigger, 2026-10-16) ----------
   A dotted-underlined label with an info glyph; the panel floats under the
   label when open. Still native <details>: it opens by tap, Enter or Space,
   never by hover, so it works on the phones most patients use. pfx.js adds
   light dismiss (outside click, Escape) as an enhancement only. */
.pfx-disclose-tip {
  position: relative; display: inline-block; margin: 0; border-top: 0;
  vertical-align: baseline; max-width: 100%;
}
.pfx-disclose-tip > summary {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 0 2px;
  font-size: inherit; font-weight: 600; color: var(--text-secondary);
  text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.pfx-disclose-tip > summary::after { content: none; }
.pfx-disclose-tip > summary > i { font-size: 14px; color: var(--apple-blue-text); }
.pfx-disclose-tip[open] > summary { color: var(--apple-blue-text); text-decoration-style: solid; }
.pfx-disclose-tip > .pfx-disclose-body {
  position: absolute; z-index: 40; left: 0; top: calc(100% + 4px);
  width: max-content; min-width: 240px; max-width: min(360px, calc(100vw - 32px));
  padding: 12px 14px;
  background: var(--apple-card); border: 1px solid var(--card-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-overlay);
  font-size: 15px; line-height: 1.5; font-weight: 400; color: var(--text-primary);
}
.pfx-disclose-tip.is-end > .pfx-disclose-body { left: auto; right: 0; }
@media (max-width: 560px) {
  /* A floating panel clips inside a card on a phone; flow it in place instead. */
  .pfx-disclose-tip { display: block; }
  .pfx-disclose-tip > .pfx-disclose-body {
    position: static; width: auto; min-width: 0; max-width: none;
    margin-top: 6px; box-shadow: none;
  }
}
@media print { .pfx-disclose-tip { display: none; } }

/* 'info' variant: the same tip reduced to an icon beside a field label or a
   heading. The panel is positioned against the field (.form-group is the
   containing block) and drops in just under the label, so it never clips at
   the icon's edge of the card and needs no per-field alignment. The 44px hit
   area is a pseudo-element, so the icon does not push the label row apart. */
.form-group, .radio-chips-group { position: relative; }
.pfx-disclose-tip.is-icon { position: static; display: inline-block; vertical-align: middle; }
.pfx-disclose-tip.is-icon > summary {
  position: relative; justify-content: center;
  width: 24px; height: 24px; min-height: 0; padding: 0; margin-left: 2px;
  border-radius: 50%; text-decoration: none; color: var(--apple-blue-text);
}
.pfx-disclose-tip.is-icon > summary::before { content: ""; position: absolute; inset: -10px; }
.pfx-disclose-tip.is-icon > summary > i { font-size: 15px; opacity: .75; }
.pfx-disclose-tip.is-icon > summary:hover > i,
.pfx-disclose-tip.is-icon[open] > summary > i { opacity: 1; }
.pfx-disclose-tip.is-icon > .pfx-disclose-body {
  left: 0; top: auto; margin-top: 6px;
  min-width: 0; width: max-content; max-width: min(360px, 100%);
  font-size: 14px;
}
@media (max-width: 560px) {
  .pfx-disclose-tip.is-icon { display: inline-block; }
  .pfx-disclose-tip.is-icon > .pfx-disclose-body {
    position: absolute; width: auto; right: 0; max-width: none; box-shadow: var(--shadow-overlay);
  }
}
.field-head { display: flex; align-items: center; margin-bottom: 6px; }
.form-group .field-head > label { margin-bottom: 0; }
.radio-chips-group.has-tip > legend { float: left; }
.radio-chips-group.has-tip > .pfx-disclose-tip { margin: -2px 0 6px; }
.radio-chips-group.has-tip > .radio-chips { clear: left; }

/* --- FR-PFX-05 empty states: what happened, why it matters, what to do ----- */
.pfx-empty { text-align: center; padding: 32px 20px; }
.pfx-empty-icon { font-size: 30px; color: var(--text-quaternary); margin-bottom: 12px; }
.pfx-empty-title { font-size: 19px; font-weight: 650; color: var(--text-primary); margin-bottom: 6px; }
.pfx-empty-why {
  font-size: 16px; line-height: 1.55; color: var(--text-secondary);
  max-width: 46ch; margin: 0 auto 18px;
}
.pfx-empty .btn { min-height: var(--tap-target-min); font-size: 16px; }

/* --- FR-PFX-06 guided flows: one decision per step ------------------------- */
.pfx-step-progress {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 18px; font-size: 15px; font-weight: 600;
  color: var(--text-secondary);
}
.pfx-step-dots { display: flex; gap: 6px; margin-left: auto; }
.pfx-step-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--status-unknown-mark); opacity: 0.35;
}
.pfx-step-dot.is-done    { opacity: 1; background: var(--status-expected-mark); }
.pfx-step-dot.is-current { opacity: 1; background: var(--apple-blue); }
.pfx-step-question {
  font-size: 22px; font-weight: 650; line-height: 1.3;
  color: var(--text-primary); margin-bottom: 6px;
}
.pfx-step-help {
  font-size: 16px; line-height: 1.55;
  color: var(--text-secondary); margin-bottom: 20px;
}

/* Large answer targets. The whole row is the target, not a small control
   inside it -- this is the size the Symptom Diary already uses inline for its
   severity and red-flag radios (min-height 44-64px), lifted into a class. */
.pfx-choices { display: grid; gap: 12px; }
.pfx-choice {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 64px; padding: 14px 18px;
  text-align: left; cursor: pointer;
  font-size: 17px; font-weight: 600; line-height: 1.35;
  color: var(--text-primary);
  background: var(--apple-card);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-md);
}
.pfx-choice:hover { border-color: var(--apple-blue); background: var(--apple-blue-subtle); }
.pfx-choice:focus-visible { outline: none; box-shadow: var(--focus); }
.pfx-choice[aria-pressed="true"],
.pfx-choice.is-selected { border-color: var(--apple-blue); background: var(--apple-blue-subtle); }
.pfx-choice-icon {
  flex: 0 0 auto; width: 30px; text-align: center;
  font-size: 22px; color: var(--apple-blue-text);
}
.pfx-choice-sub {
  display: block; font-size: 15px; font-weight: 500;
  color: var(--text-secondary); margin-top: 2px;
}

/* Step navigation. Back stays reachable; Continue is the primary action. */
.pfx-step-nav { display: flex; gap: 12px; margin-top: 24px; }
.pfx-step-nav .btn { min-height: var(--tap-target-min); font-size: 17px; flex: 1 1 auto; }
.pfx-step-nav .pfx-step-back { flex: 0 0 auto; }

@media (max-width: 560px) {
  .pfx-step-question { font-size: 20px; }
  .pfx-step-nav { flex-direction: column-reverse; }
  .pfx-step-nav .btn { width: 100%; }
}

/* --- FR-PFX-08 summary-first card ------------------------------------------
   Tier 1 is ordinary markup, never a <details>: see the note in
   app/Views/components/pfx_summary_card.php for why that rule is enforced in
   the component rather than left to the caller. The rules below therefore
   style a headline that is always visible, with two disclosures beneath it. */
.pfx-summary {
  padding: 16px 0;
  border-bottom: 1px solid var(--card-border-subtle);
}
.pfx-summary:last-child { border-bottom: 0; }
.pfx-summary-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.pfx-summary-headings { min-width: 0; flex: 1 1 200px; }
.pfx-summary-title {
  font-size: 17px; font-weight: 600; line-height: 1.35;
  color: var(--text-primary); margin: 0;
}
.pfx-summary-status {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end;
}
.pfx-summary-meta { font-size: 14px; color: var(--text-tertiary); }
.pfx-summary-explain {
  font-size: 16px; line-height: 1.55;
  color: var(--text-secondary); margin: 0 0 10px;
}
/* The "attention" tier opens its Tier 2 panel, so the card also carries a
   quiet left edge: a second, non-colour cue that it is not routine. */
.pfx-summary-attention {
  border-left: 3px solid var(--status-attention-mark);
  padding-left: 12px;
}

/* --- Calm alert card (V2 Calm Clinical, 2026-10-16) ------------------------
   app/Views/components/calm_alert.php. White surface, 4px left accent. The
   triage colour is the bar, the eyebrow word and the icon tile together
   (FR-PFX-04: word and shape and colour); the body stays --text-primary on
   white, so several alerts read as a list to work through, not a red wall.
   Tone comes only from stored alert_level / evaluated result status. */
.calm-alert {
  display: flex; gap: 14px; padding: 14px 16px 14px 18px;
  background: var(--apple-card); border: 1px solid var(--card-border);
  border-left: 4px solid var(--status-unknown-mark);
  border-radius: var(--radius-lg); box-shadow: var(--card-shadow);
}
.calm-alert-crimson { border-left-color: var(--status-attention-mark); }
.calm-alert-amber   { border-left-color: var(--status-slight-mark); }
.calm-alert-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; font-size: 18px;
  background: var(--status-unknown-bg); color: var(--status-unknown-text);
}
.calm-alert-crimson .calm-alert-icon { background: var(--status-attention-bg); color: var(--status-attention-text); }
.calm-alert-amber   .calm-alert-icon { background: var(--status-slight-bg);    color: var(--status-slight-text); }
.calm-alert-body { flex: 1 1 auto; min-width: 0; }
.calm-alert-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.calm-alert-kind { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--status-unknown-text); }
.calm-alert-crimson .calm-alert-kind { color: var(--status-attention-text); }
.calm-alert-amber   .calm-alert-kind { color: var(--status-slight-text); }
.calm-alert-badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--apple-slate-bg); color: var(--text-secondary); font-size: 12px; font-weight: 600;
}
.calm-alert-when { margin-left: auto; font-size: 12px; color: var(--text-secondary); }
.calm-alert-title { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.calm-alert-text  { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--text-primary); overflow-wrap: anywhere; }
.calm-alert-list  { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.calm-alert-list li + li { margin-top: 2px; }
.calm-alert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.calm-alert-actions .btn { min-height: 44px; }
.calm-alert-tel .tabular { font-weight: 700; }
@media (max-width: 560px) {
  .calm-alert { gap: 10px; padding: 12px 12px 12px 14px; }
  .calm-alert-icon { width: 30px; height: 30px; font-size: 15px; }
  .calm-alert-when { margin-left: 0; width: 100%; }
}
@media print {
  .calm-alert {
    box-shadow: none; break-inside: avoid; border-color: #CCCCCC; border-left-width: 4px;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .calm-alert-actions { display: none; }
}

/* --- Passive record-context restatement (FR-UX-02) -------------------------
   Deliberately calm. It states a fact; it is not an alert. A banner styled
   like a warning on every page teaches people to stop reading banners, and the
   alert vocabulary belongs to AlertService. It contains no control, because
   the header selector stays the single point of profile change. */
.pfx-context-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin: 0 0 16px;
  border: 1px solid var(--card-border-subtle);
  border-radius: 10px;
  background: var(--apple-blue-subtle);
  font-size: 16px; line-height: 1.4;
  color: var(--text-primary);
}
.pfx-context-banner.is-self { background: transparent; }
.pfx-context-banner > i { color: var(--apple-blue-text); font-size: 15px; flex: 0 0 auto; }
.pfx-context-text { min-width: 0; }
.pfx-context-text .pfx-dual-clinical { display: inline; margin-left: 6px; }

@media (max-width: 560px) {
  .pfx-summary-head { flex-direction: column; }
  .pfx-summary-status { justify-content: flex-start; }
}

/* ==========================================================================
   MODULE 16 -- LANE-8B: hub (FR-PFX-07), guided flows (FR-PFX-06),
   onboarding and contextual help (FR-PFX-09), revamp baseline (FR-PFX-10).

   Additive, namespaced `pfx-`, same three constraints as the layer above:
   16px floor, 48px targets, colour never alone. Loaded after layout.css, so
   the FR-PFX-10 baseline rules at the end deliberately override the
   lead-owned layout/base values they name, rather than editing those files.
   ========================================================================== */

/* --- FR-PFX-07: "What should I do today?" ---------------------------------- */
.pfx-hub {
  background: var(--apple-card); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px;
}
.pfx-hub-title { font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0 0 4px; color: var(--text-primary); }
.pfx-hub-sub   { font-size: 16px; color: var(--text-secondary); margin: 0 0 16px; line-height: 1.5; }
.pfx-hub-tier  { margin-top: 18px; }
.pfx-hub-tier-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--text-secondary);
  text-transform: none; margin-bottom: 10px;
}
.pfx-hub-tier-label::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--status-unknown-mark);
}
.pfx-hub-tier-now   .pfx-hub-tier-label { color: var(--status-attention-text); }
.pfx-hub-tier-now   .pfx-hub-tier-label::before { background: var(--status-attention-mark); border-radius: 2px; }
.pfx-hub-tier-check .pfx-hub-tier-label { color: var(--status-slight-text); }
.pfx-hub-tier-check .pfx-hub-tier-label::before { background: var(--status-slight-mark); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pfx-hub-tier-today .pfx-hub-tier-label::before { background: var(--apple-blue); }
.pfx-hub-tier-later .pfx-hub-tier-label::before { background: var(--status-expected-mark); }
.pfx-hub-items { display: grid; gap: 10px; }
.pfx-hub-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--card-border-subtle); background: var(--apple-canvas);
  font-size: 16px; line-height: 1.5; color: var(--text-primary);
}
.pfx-hub-item-now   { background: var(--status-attention-bg); border-color: var(--status-attention-mark); }
.pfx-hub-item-check { background: var(--status-slight-bg); }
.pfx-hub-item-icon  { flex: 0 0 auto; width: 26px; text-align: center; font-size: 20px; margin-top: 2px; }
.pfx-hub-item-now   .pfx-hub-item-icon { color: var(--status-attention-text); }
/* On the attention tint the tertiary grey is 4.4:1 (axe, 2026-10-08); the
   secondary grey keeps the label and its date readable at AA. */
.pfx-hub-item-now   .pfx-hub-item-kind,
.pfx-hub-item-now   .pfx-hub-item-meta { color: var(--text-secondary); }
.pfx-hub-item-check .pfx-hub-item-icon { color: var(--status-slight-text); }
.pfx-hub-item-body  { flex: 1 1 auto; min-width: 0; }
.pfx-hub-item-kind  { display: block; font-size: 14px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 2px; }
.pfx-hub-item-text  { margin: 0; overflow-wrap: anywhere; }
.pfx-hub-item-meta  { font-size: 14px; color: var(--text-tertiary); margin-top: 4px; font-variant-numeric: tabular-nums; }
.pfx-hub-item-act   { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pfx-hub-item-act .btn { min-height: var(--tap-target-min); font-size: 16px; }
.pfx-hub-limits {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--card-border-subtle);
  font-size: 15px; line-height: 1.5; color: var(--text-secondary);
}
.pfx-hub-limits p { margin: 0 0 6px; }
.pfx-hub-limits strong { color: var(--text-primary); font-weight: 600; }
.pfx-hub-links { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 12px; font-size: 16px; font-weight: 600; }
.pfx-hub-links a { min-height: var(--tap-target-min); display: inline-flex; align-items: center; }
.pfx-hub-section-title { font-size: 20px; font-weight: 700; margin: 24px 0 12px; color: var(--text-primary); }
.pfx-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pfx-quick {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
  min-height: 72px; padding: 12px 14px; text-decoration: none;
  background: var(--apple-card); border: 1px solid var(--card-border); border-radius: var(--radius-md);
  font-size: 16px; font-weight: 600; color: var(--text-primary); line-height: 1.3;
}
.pfx-quick:hover, .pfx-quick:focus-visible { border-color: var(--apple-blue); background: var(--apple-blue-subtle); outline: none; }
.pfx-quick i { color: var(--apple-blue-text); font-size: 18px; }
.pfx-quick-reason { display: block; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.pfx-hub-how { margin-top: 8px; border-top: 0; }
.pfx-hub-how > summary { font-size: 20px; font-weight: 700; color: var(--text-primary); padding: 14px 0; }
.pfx-hub-how > .pfx-disclose-body { padding-top: 12px; }

/* --- FR-PFX-06: guided-flow pages ------------------------------------------- */
/* Apple Health redesign: each guided flow (and the tour) sits in a design card.
   The large type and 72px number fields stay: these flows exist for the
   low-ICT case (FR-PFX-06), so compact density does not apply here. */
.pfx-flow {
  max-width: 640px; margin: 0 auto; padding: 24px;
  background: var(--apple-card); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); box-shadow: var(--card-shadow);
}
@media (max-width: 600px) { .pfx-flow { padding: 18px 16px; } }
.pfx-flow-error { margin-bottom: 16px; font-size: 16px; }
.pfx-flow-context { font-size: 17px; color: var(--text-secondary); margin: 0 0 14px; }
.pfx-flow-alt { margin-top: 22px; text-align: center; font-size: 16px; }
.pfx-flow-alt a { display: inline-flex; align-items: center; min-height: var(--tap-target-min); padding: 0 8px; }
.pfx-choice-text { flex: 1 1 auto; min-width: 0; }
.pfx-choice-link { text-decoration: none; }
.pfx-choice-go { flex: 0 0 auto; font-size: 20px; color: var(--text-tertiary); }
.pfx-big-field { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 4px; }
.pfx-big-number {
  width: 100%; max-width: 240px; min-height: 72px;
  font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center;
  padding: 8px 12px; border: 2px solid var(--card-border); border-radius: var(--radius-md);
  background: var(--apple-card); color: var(--text-primary);
}
.pfx-big-number:focus { outline: none; border-color: var(--apple-blue); box-shadow: var(--focus); }
.pfx-big-number-sm { max-width: 160px; font-size: 28px; min-height: 56px; }
.pfx-big-unit { font-size: 20px; font-weight: 600; color: var(--text-secondary); }
.pfx-bp-pair { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; }
.pfx-bp-part { display: flex; flex-direction: column; gap: 6px; flex: 0 1 160px; }
.pfx-bp-part label { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.pfx-bp-part .pfx-big-number { max-width: 160px; }
.pfx-bp-slash { font-size: 40px; font-weight: 300; line-height: 72px; color: var(--text-tertiary); }
.pfx-bp-pair .pfx-big-unit { line-height: 72px; }
#flow-location > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pfx-or-type { margin-top: 18px; }
.pfx-chip-tray { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pfx-chip {
  display: inline-flex; align-items: center; min-height: var(--tap-target-min);
  padding: 8px 16px; border-radius: var(--radius-full);
  font-size: 16px; font-weight: 600; cursor: pointer;
  background: var(--apple-card); color: var(--text-primary); border: 1px solid var(--card-border);
}
.pfx-chip:hover, .pfx-chip:focus-visible { border-color: var(--apple-blue); background: var(--apple-blue-subtle); outline: none; }
.pfx-search { position: relative; margin-top: 6px; }
.pfx-search label { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.pfx-search-input { min-height: var(--tap-target-min); font-size: 17px; }
.pfx-search-results {
  position: absolute; left: 0; right: 0; z-index: 20; margin-top: 4px;
  background: var(--apple-card); border: 1px solid var(--card-border); border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); overflow: hidden;
}
.pfx-search-results[hidden] { display: none; }
.pfx-search-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; min-height: var(--tap-target-min); padding: 10px 14px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--card-border-subtle); cursor: pointer;
  font-size: 16px; color: var(--text-primary);
}
.pfx-search-item:last-child { border-bottom: 0; }
.pfx-search-item:hover, .pfx-search-item:focus-visible { background: var(--apple-blue-subtle); outline: none; }
.pfx-search-meta { font-size: 14px; color: var(--text-tertiary); }
.pfx-checks { display: grid; gap: 8px; margin-bottom: 16px; }
.pfx-check {
  display: flex; align-items: center; gap: 14px; min-height: var(--tap-target-min);
  padding: 10px 14px; border: 1px solid var(--card-border); border-radius: var(--radius-md);
  background: var(--apple-card); font-size: 16px; cursor: pointer;
}
.pfx-check input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--apple-blue); }
.pfx-check:has(input:checked) { border-color: var(--apple-blue); background: var(--apple-blue-subtle); }
.pfx-review { border: 1px solid var(--card-border-subtle); border-radius: var(--radius-md); margin: 4px 0 16px; overflow: hidden; }
.pfx-review-row {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 12px 14px; font-size: 16px; border-bottom: 1px solid var(--card-border-subtle);
}
.pfx-review-row:last-child { border-bottom: 0; }
.pfx-review-row span { color: var(--text-secondary); }
.pfx-review-row strong { text-align: right; overflow-wrap: anywhere; }
.pfx-panel { display: grid; gap: 12px; margin: 4px 0 8px; }
.pfx-panel-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--card-border-subtle); border-radius: var(--radius-md);
  background: var(--apple-card);
}
.pfx-panel-label { margin: 0; cursor: pointer; }
.pfx-panel-value, .pfx-panel-row select { min-height: var(--tap-target-min); font-size: 18px; font-variant-numeric: tabular-nums; text-align: center; }
.pfx-file-label { display: block; font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.pfx-file { min-height: var(--tap-target-min); padding: 10px; font-size: 16px; }
@media (max-width: 560px) {
  .pfx-panel-row { grid-template-columns: 1fr; }
  .pfx-panel-value, .pfx-panel-row select { text-align: left; }
}

/* --- Health basics journey (/setup) ---------------------------------------- */
.setup-flow .btn-lg { min-height: 52px; padding: 0 22px; font-size: 17px; }
.setup-flow form { margin: 0; }
.setup-flow fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.setup-flow legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.setup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; }
.setup-flow > .btn { margin: 4px 8px 4px 0; }
.setup-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) { .setup-row { grid-template-columns: 1fr; } }
.setup-age { max-width: 140px; }
.setup-add { margin: 10px 0 14px; }
.setup-recorded-label { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.setup-recorded { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.setup-recorded li {
  padding: 6px 12px; border-radius: var(--radius-full); font-size: 15px; font-weight: 600;
  background: var(--apple-blue-subtle); color: var(--text-primary);
}
.setup-blood .pfx-chip { min-width: 72px; justify-content: center; }
.pfx-chip.is-selected { border-color: var(--apple-blue); background: var(--apple-blue); color: #fff; }
.setup-inline { margin-top: 10px; }
.setup-link {
  background: none; border: 0; padding: 0 4px; min-height: var(--tap-target-min);
  color: var(--apple-blue); font-size: 15px; font-weight: 600; cursor: pointer;
}
.setup-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--card-border-subtle);
}
.setup-later { font-size: 15px; color: var(--text-secondary); }
.setup-summary { list-style: none; padding: 0; margin: 0 0 20px; border: 1px solid var(--card-border-subtle); border-radius: var(--radius-md); }
.setup-summary li {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: 16px;
  border-bottom: 1px solid var(--card-border-subtle);
}
.setup-summary li:last-child { border-bottom: 0; }
.setup-summary li > span:first-child { width: 22px; text-align: center; color: var(--text-tertiary); font-weight: 700; }
.setup-summary li.is-done > span:first-child { color: var(--apple-green, #34c759); }
.setup-summary-label { flex: 1 1 auto; }

/* --- FR-PFX-09: onboarding banner, tour, contextual help -------------------- */
.pfx-onboarding-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--apple-blue-subtle); border: 1px solid var(--card-border-subtle); border-radius: var(--radius-md);
  font-size: 16px; line-height: 1.45;
}
.pfx-onboarding-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.pfx-onboarding-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pfx-onboarding-actions .btn { min-height: var(--tap-target-min); font-size: 16px; }
.pfx-tour-title { font-size: 26px; font-weight: 700; margin: 0 0 8px; }
.pfx-tour-body { font-size: 17px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 18px; }
.pfx-tour-steps { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 14px; }
.pfx-tour-step {
  display: flex; gap: 14px; padding: 16px; border: 1px solid var(--card-border);
  border-radius: var(--radius-md); background: var(--apple-card);
}
.pfx-tour-n {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: var(--apple-blue); color: #fff; font-weight: 700; font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pfx-tour-text { min-width: 0; flex: 1 1 auto; }
.pfx-tour-text h3 { font-size: 19px; margin: 4px 0 6px; }
.pfx-tour-frame, .pfx-tour-authored { font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
.pfx-tour-frame { color: var(--text-secondary); }
.pfx-tour-text .btn { min-height: var(--tap-target-min); font-size: 16px; }
.pfx-tour-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pfx-tour-actions .btn { min-height: var(--tap-target-min); font-size: 16px; }
.pfx-page-help { margin-top: 28px; border-top: 1px solid var(--card-border-subtle); }
.pfx-page-help > summary { color: var(--text-secondary); }
.pfx-help-line { margin: 0 0 10px; font-size: 16px; line-height: 1.55; }
.pfx-why-ask { margin-top: 4px; }
.pfx-why-ask > summary { font-weight: 600; font-size: 16px; }
.pfx-help-tour { margin-top: 12px; }
/* The details.sidebar-more rules that lived here were removed with the
   "Every day"/"More" grouping: FR-PFX-10's four pillars (sidebar.php,
   .sidebar-pillar below) replaced the collapsible More section outright. */

/* --- FR-PFX-10: the revamp baseline (specification 5.8) ---------------------
   These are the measured defects, fixed at the class, not per page:
   `body` declared no font-size; 162 of 190 declarations were below 16px;
   the diary's chips and pills were 4-6px of padding. Everything a patient
   taps becomes at least 44px, everything a patient reads at least 16px in
   the shell. The mobile gutter the spec asks for is 16px; layout.css sets
   12px, and this later-loading rule is where the 16px lives. */
body { font-size: 16px; }
.btn, .btn-sm, .btn-outline, .btn-secondary, .btn-primary { min-height: 44px; }
.form-control, .form-group input:not([type="checkbox"]):not([type="radio"]), .form-group select, .form-group textarea {
  min-height: var(--tap-target-min); font-size: 16px;
}
.form-group label { font-size: 16px; }
.hint { font-size: 15px; }
.symptom-chip, .reminder-pill-btn, .episode-filter-btn, .date-preset-btn, .time-preset-btn,
.quick-pill, .cat-chip, .preset-pill {
  min-height: 44px; font-size: 15px; padding-left: 14px; padding-right: 14px;
}
.quick-add-menu a { min-height: 44px; display: flex; align-items: center; font-size: 16px; }
.sidebar-nav a, .sidebar-utilities a, .sidebar-logout { min-height: 44px; font-size: 16px; }
@media (max-width: 760px) {
  .content { padding-left: 16px; padding-right: 16px; }
  .mobile-nav a, .mobile-nav button { font-size: 12px; }
  .pfx-hub { padding: 16px; }
  .pfx-hub-title { font-size: 22px; }
  .pfx-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- FR-PFX-10 (cont.): four-pillar sidebar, primary-action targets,
   readability floors, and the stacked-card table collapse ---------------- */

/* Four-pillar sidebar grouping (sidebar.php). Links keep every .sidebar-nav a
   rule; each pillar reproduces the 3px rhythm the flat list had, and pillars
   sit one clear step apart. */
.sidebar-pillar { display: flex; flex-direction: column; gap: 3px; }
.sidebar-pillar + .sidebar-pillar { margin-top: 12px; }

/* Primary actions get the 48px target; 44px stays the floor for the rest. */
.btn-primary { min-height: var(--tap-target-min); }

/* Readability floors below the 16px body size: secondary descriptions no
   smaller than 14px, micro-metadata no smaller than 11.5px. Floors only --
   nothing here redesigns a component. */
.clinical-list span, .empty-note, .timeline-summary, .alert-item .desc { font-size: 14px; }
.alert-content { font-size: 16px; }
.alert-content strong { font-size: 16px; }
.allergy-chip-cat, .pick-chip-meta, .derived-label, .hpk-packtag, .hpk-lock,
.hpk-tier-label .n, .tray-note { font-size: 11.5px; }

/* FR-PFX-10: no horizontal-scroll tables on phones. Every consumer of
   components/data_table.php emits table.responsive with data-label on each
   cell, so the collapse lives here and every consumer inherits it: below
   760px each row becomes a stacked label/value card. The column headings are
   hidden visually only -- the data-label repeats them per value -- and the
   empty-state cell (the one td without data-label) renders as a plain block.
   Tables without .responsive (e.g. the clinician-facing vitals grid) keep
   their .table-wrap scroll. */
@media (max-width: 760px) {
  .table-wrap:has(> table.responsive) { overflow-x: visible; }
  table.responsive, table.responsive tbody,
  table.responsive tr, table.responsive td { display: block; width: 100%; }
  table.responsive thead {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  table.responsive tr {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    background: var(--apple-card);
    padding: 4px 14px;
    margin-bottom: 12px;
  }
  table.responsive tr:last-child { margin-bottom: 0; }
  /* The row-hover tint is a desktop-table affordance; on a card it reads as
     a state change. */
  table.responsive tr:hover td { background: transparent; }
  table.responsive td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--card-border-subtle);
    text-align: right;
  }
  table.responsive tr > td { border-bottom: 1px solid var(--card-border-subtle); }
  table.responsive tr > td:last-child { border-bottom: 0; }
  table.responsive td[data-label]::before {
    content: attr(data-label);
    flex: 0 1 auto;
    text-align: left;
    font-size: 12px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-tertiary);
  }
  table.responsive td:not([data-label]) { justify-content: flex-start; text-align: left; }
}
/* ==========================================================================
   FR-PFX-10 layout baseline (LANE-16, 2026-10-07)
   A 44px floor for the targets the 375px / 1280px sweep of every patient page
   found under it, and the two page grids that overflowed a phone. Height
   only: no colour, wording or value changes, and no control is hidden.
   ========================================================================== */
.chip-btn, .filter-btn, .pick-chip, .allergy-chip, .duration-chip,
.reaction-chip, .rel-chip-btn, .preset-chip, .freq-chip-btn, .protocol-pill,
.site-chip, .laterality-btn, .unit-opt, .symptom-chip, .reminder-pill-btn,
.episode-filter-btn {
  min-height: 44px;
}
a.pill, button.pill { display: inline-flex; align-items: center; min-height: 44px; }
.action-link { display: inline-flex; align-items: center; min-height: 44px; }
.footer-links a, .pfx-help-tour a { display: inline-flex; align-items: center; min-height: 44px; }
.brand-group { min-height: 44px; min-width: 44px; }
.sidebar-brand { min-height: 44px; }
.time-expand-toggle { display: inline-flex; align-items: center; min-height: 44px; }
summary.text-small { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
/* A checkbox or radio wrapped in a block or flex label: the label is the
   target, so give it the height. An inline label is unaffected. */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 44px; }
label.text-small:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; }

/* The selector capsule is the target; the <select> now fills it. */
.profile-switcher-capsule { padding-top: 0; padding-bottom: 0; }
.profile-switcher-select { min-height: 44px; }

/* Concierge quota cards: two columns on a wide screen, one on a phone (the
   inline 2fr 1fr grid pushed the page to 435px at 375). */
.concierge-quota-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 760px) {
  .concierge-quota-grid { grid-template-columns: minmax(0, 1fr); }
  /* Family & dependants filter (app/Modules/Demographics/Views/dependents.php
     is outside this lane, so this overrides its inline <style> by
     specificity): wrap rather than run 382px wide. */
  body .family-seg-control { display: flex; flex-wrap: wrap; max-width: 100%; border-radius: var(--radius-lg); }
}
body .family-seg-btn { min-height: 44px; }

/* FR-PFX-10 (LANE-16), second pass after re-measuring: widths as well as
   heights, form fields, and the remaining link lists. */
.btn-sm { min-width: 44px; }
.chip-btn { min-width: 44px; text-align: center; }
a.pill, button.pill { min-width: 44px; justify-content: center; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-width: 44px; }
.form-control, .input-control, .filter-search, .status-select-inline { min-height: 44px; }
summary { min-height: 44px; }
.qa-item label[for] { display: flex; align-items: center; min-height: 44px; }
.public-footer a, .legal-related a, .legal-toc a { display: inline-flex; align-items: center; min-height: 44px; }
/* Article and Health Pack titles that are links to the same page as the
   card's own "Read" link: a block-level target of full height. */
a[href^="/for-you/article"]:not(.action-link):not(.btn),
a[href^="/health-packs/view"]:not(.action-link):not(.btn) { display: block; min-height: 44px; }
.information-list > li > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
/* Honeypot (#contact-ref) and visually hidden radios are not targets; the
   quick-action checkbox is labelled by a 44px label[for] row (above). */
.settings-tab-btn { display: inline-flex; align-items: center; min-height: 44px; }

/* --- Radio chips (components/radio_chips.php): a short list answered with one tap --- */
.radio-chips-group { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.radio-chips-group > legend { display: block; padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.radio-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.radio-chip { position: relative; cursor: pointer; }
.radio-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.radio-chip span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-full);
  background: #FFFFFF; border: 1px solid var(--control-border, var(--card-border)); color: var(--text-primary);
  font-size: 14px; font-weight: 500; transition: background .12s, border-color .12s, color .12s;
}
.radio-chip:hover span { background: var(--apple-canvas); }
.radio-chip input:checked + span { background: var(--apple-blue); border-color: var(--apple-blue); color: #FFFFFF; font-weight: 600; }
.radio-chip input:focus-visible + span { outline: 2px solid var(--apple-blue); outline-offset: 2px; }
.radio-chips-sm .radio-chip span { min-height: 32px; padding: 0 12px; font-size: 13px; }
/* A chip is a <label> inside .form-group, so it inherits the field label's
   block display and 6px bottom margin; with the 44px tap floor that left a
   26px hole under every row of pills. Centre the pill in its tap area instead
   and let the tap area itself be the row spacing. */
.radio-chips .radio-chip { display: inline-flex; align-items: center; margin: 0; }
.radio-chips-sm { row-gap: 0; }
.radio-chips-group > legend { font-size: 16px; color: var(--text-secondary); }

/* FR-PFX-09 spotlight tour (tour.js). Four panes dim the page around the
   highlighted control so the control itself stays clickable. */
.tour-root { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
.tour-pane { position: fixed; background: rgba(15, 23, 42, 0.62); pointer-events: auto; transition: all 0.28s ease; }
.tour-ring {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--apple-blue, #0a6fd6);
  pointer-events: none;
  transition: all 0.28s ease;
  animation: tour-pulse 1.8s ease-out infinite;
}
@keyframes tour-pulse {
  0%   { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--apple-blue, #0a6fd6), 0 0 0 6px rgba(10, 111, 214, 0.45); }
  100% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--apple-blue, #0a6fd6), 0 0 0 22px rgba(10, 111, 214, 0); }
}
.tour-card {
  position: fixed;
  width: min(380px, calc(100vw - 24px));
  background: var(--apple-card, #fff);
  color: var(--text-primary, #0f172a);
  border-radius: 20px;
  padding: 20px 20px 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  pointer-events: auto;
  transition: left 0.28s ease, top 0.28s ease;
}
.tour-card.is-centred { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 24px)); text-align: center; }
.tour-card.is-docked-bottom { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; }
.tour-card.is-docked-top { left: 12px; right: 12px; top: 12px; width: auto; }
.tour-card.is-entering { animation: tour-in 0.24s ease-out; }
.tour-card.is-centred.is-entering { animation: tour-in-centred 0.24s ease-out; }
@keyframes tour-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes tour-in-centred { from { opacity: 0; scale: 0.96; } to { opacity: 1; scale: 1; } }
.tour-count { margin: 0 0 4px; font-size: 0.875rem; font-weight: 600; color: var(--apple-blue-text, #0a5cb3); }
.tour-title { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.3; outline: none; }
.tour-body p { margin: 0 0 8px; font-size: 1rem; line-height: 1.55; color: var(--text-secondary, #334155); }
.tour-hint { margin: 4px 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--apple-blue-soft, #e8f1fc); font-size: 1rem; font-weight: 600; color: var(--apple-blue-text, #0a5cb3); }
.tour-dots { display: flex; gap: 6px; margin: 12px 0; }
.tour-card.is-centred .tour-dots { justify-content: center; }
.tour-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--card-border, #cbd5e1); transition: all 0.2s ease; }
.tour-dot.is-done { background: var(--apple-blue, #0a6fd6); opacity: 0.45; }
.tour-dot.is-current { width: 22px; background: var(--apple-blue, #0a6fd6); }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tour-nav { display: flex; gap: 8px; margin-left: auto; }
.tour-nav .btn, .tour-skip { min-height: 48px; font-size: 1rem; }
.tour-nav .btn.is-quiet { background: transparent; color: var(--apple-blue-text, #0a5cb3); border: 1px solid var(--card-border, #cbd5e1); }
.tour-skip { background: none; border: 0; padding: 0 4px; color: var(--text-secondary, #475569); text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .tour-pane, .tour-ring, .tour-card { transition: none; }
  .tour-ring, .tour-card.is-entering, .tour-card.is-centred.is-entering { animation: none; }
}

/* FR-PFX-04/08 results table (components/result_table.php): one line per
   result, interpretation behind a filled arrow. */
.rt { display: grid; gap: 0; border: 1px solid var(--card-border, #e2e8f0); border-radius: 12px; overflow: hidden; background: var(--apple-card, #fff); }
.rt-head, .rt-line {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.1fr) 28px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}
.rt-head { background: var(--apple-canvas, #f5f7fa); font-size: 0.875rem; font-weight: 600; color: var(--text-secondary, #475569); }
.rt-row + .rt-row, .rt-head + .rt-row { border-top: 1px solid var(--card-border, #e2e8f0); }
.rt-line { min-height: 48px; font-size: 1rem; list-style: none; }
summary.rt-line { cursor: pointer; }
summary.rt-line::-webkit-details-marker { display: none; }
summary.rt-line:hover { background: var(--apple-canvas, #f5f7fa); }
summary.rt-line:focus-visible { outline: 3px solid var(--apple-blue, #0a6fd6); outline-offset: -3px; }
.rt-name { color: var(--text-primary, #0f172a); overflow-wrap: anywhere; }
.rt-value strong { font-weight: 700; }
.rt-unit { color: var(--text-secondary, #475569); font-size: 0.9375rem; }
.rt-status .pfx-status { white-space: nowrap; }
.rt-toggle { justify-self: end; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--text-secondary, #475569); transition: transform 0.18s ease; }
.rt-row[open] .rt-toggle { transform: rotate(90deg); }
.rt-detail { padding: 4px 14px 14px; background: var(--apple-canvas, #f8fafc); }
.rt-explain { margin: 8px 0; font-size: 1rem; line-height: 1.5; color: var(--text-secondary, #334155); }
.rt-clinical { margin: 0 0 8px; font-size: 0.9375rem; color: var(--text-secondary, #475569); }
.rt-more { display: block; padding: 12px 14px; border-top: 1px solid var(--card-border, #e2e8f0); font-weight: 600; min-height: 48px; }
@media (max-width: 520px) {
  .rt-head { display: none; }
  .rt-line { grid-template-columns: minmax(0, 1fr) auto 20px; grid-template-areas: "name name toggle" "value status toggle"; row-gap: 4px; }
  .rt-name { grid-area: name; font-weight: 600; }
  .rt-value { grid-area: value; }
  .rt-status { grid-area: status; justify-self: end; }
  .rt-toggle { grid-area: toggle; }
}
@media (prefers-reduced-motion: reduce) { .rt-toggle { transition: none; } }