/* ============================================================
   components.css — Robust Health component classes
   Phase 3c-2. Companion to COMPONENTS.md.

   Loads after tokens.css and bootstrap-overrides.css.
   All values reference tokens — no raw hex, no raw px outside the
   spacing scale and explicitly-component-internal sizes.

   Naming: every class starts with .rh- to avoid collisions with
   Bootstrap and any legacy CSS during the transition.

   ============================================================ */


/* ── Type utilities ────────────────────────────────────────── */

.rh-display {
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
  color: var(--ink-1);
}

.rh-title {
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-leading);
  letter-spacing: var(--type-title-tracking);
  color: var(--ink-1);
}

.rh-subtitle {
  font-size: var(--type-subtitle-size);
  font-weight: var(--type-subtitle-weight);
  line-height: var(--type-subtitle-leading);
  letter-spacing: var(--type-subtitle-tracking);
  color: var(--ink-1);
}

.rh-body {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  color: var(--ink-1);
}

.rh-label {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-leading);
  color: var(--ink-1);
}

.rh-meta {
  font-size: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  line-height: var(--type-meta-leading);
  color: var(--ink-3);
}

.rh-stat-label {
  font-size: var(--type-stat-label-size);
  font-weight: var(--type-stat-label-weight);
  line-height: var(--type-stat-label-leading);
  letter-spacing: var(--type-stat-label-tracking);
  color: var(--ink-2);
}


/* ── Cards ─────────────────────────────────────────────────── */

.rh-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.rh-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.rh-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.rh-card-sunken {
  background: var(--sunken);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-4);
}


/* ── Stat card ─────────────────────────────────────────────── */

.rh-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.rh-stat-value {
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}

.rh-stat-value-empty {
  color: var(--ink-3);
}

.rh-stat-unit {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  color: var(--ink-2);
  margin-left: var(--space-2);
}


/* ── Buttons ───────────────────────────────────────────────── */

.rh-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background: var(--kelly);
  color: var(--surface);
  border: 1px solid var(--kelly);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--type-body-size);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-instant) var(--ease-standard);
}

.rh-btn-primary:hover {
  background: var(--kelly-deep);
  border-color: var(--kelly-deep);
}

.rh-btn-primary:active {
  transform: scale(0.97);
}

.rh-btn-primary:disabled {
  background: var(--ink-3);
  border-color: var(--ink-3);
  cursor: not-allowed;
  transform: none;
}

.rh-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--surface);
  color: var(--ink-1);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--type-body-size);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              transform var(--duration-instant) var(--ease-standard);
}

.rh-btn-secondary:hover {
  background: var(--sunken);
}

.rh-btn-secondary:active {
  transform: scale(0.97);
}

.rh-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 12px 16px;
  background: var(--signal-alert-dim);
  color: var(--signal-alert);
  border: 1px solid rgba(154, 45, 45, 0.20);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--type-body-size);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              transform var(--duration-instant) var(--ease-standard);
}

.rh-btn-danger:hover {
  background: rgba(154, 45, 45, 0.18);
}

.rh-btn-danger:active {
  transform: scale(0.97);
}

.rh-btn-text {
  background: none;
  border: none;
  padding: var(--space-2) 0;
  color: var(--kelly);
  font-family: inherit;
  font-size: var(--type-meta-size);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}

.rh-btn-text:hover {
  color: var(--kelly-deep);
}


/* ── Inputs ────────────────────────────────────────────────── */

.rh-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rh-field-label {
  font-size: var(--type-stat-label-size);
  font-weight: var(--type-stat-label-weight);
  letter-spacing: var(--type-stat-label-tracking);
  color: var(--ink-2);
}

.rh-field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.rh-input {
  width: 100%;
  min-height: 48px;
  padding: 14px;
  background: var(--sunken);
  color: var(--ink-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--type-body-size);
  outline: none;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-instant) var(--ease-standard);
}

.rh-input::placeholder {
  color: var(--ink-3);
}

.rh-input:focus,
.rh-input:focus-visible {
  background: var(--surface);
  border-color: var(--kelly);
  box-shadow: var(--shadow-focus);
}

.rh-input:disabled {
  background: var(--sunken);
  color: var(--ink-3);
  cursor: not-allowed;
}

.rh-input-error {
  border-color: var(--signal-alert);
}

.rh-field-hint {
  font-size: var(--type-meta-size);
  color: var(--ink-3);
}

.rh-field-error {
  font-size: var(--type-meta-size);
  color: var(--signal-alert);
}


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

.rh-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.rh-pill-kelly   { background: var(--kelly-dim);          color: var(--kelly); }
.rh-pill-protein { background: var(--macro-protein-dim);  color: var(--macro-protein); }
.rh-pill-carbs   { background: var(--macro-carbs-dim);    color: var(--macro-carbs); }
.rh-pill-fat     { background: var(--macro-fat-dim);      color: var(--macro-fat); }
.rh-pill-success { background: var(--signal-success-dim); color: var(--signal-success); }
.rh-pill-caution { background: var(--signal-caution-dim); color: var(--signal-caution); }
.rh-pill-alert   { background: var(--signal-alert-dim);   color: var(--signal-alert); }
.rh-pill-muted   { background: rgba(118, 116, 104, 0.10); color: var(--ink-2); }


/* ── Macro dot ─────────────────────────────────────────────── */

.rh-macro-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ── Progress track + fill ─────────────────────────────────── */

.rh-track {
  width: 100%;
  height: 6px;
  background: var(--sunken);
  overflow: hidden;
}

.rh-track-thin { height: 3px; }
.rh-track-thick { height: 8px; }

.rh-track > i,
.rh-track > .rh-track-fill {
  display: block;
  height: 100%;
  transition: width var(--duration-page) var(--ease-decelerate),
              background var(--duration-base) var(--ease-standard);
}

.rh-track-fill-kelly   { background: var(--kelly); }
.rh-track-fill-protein { background: var(--macro-protein); }
.rh-track-fill-carbs   { background: var(--macro-carbs); }
.rh-track-fill-fat     { background: var(--macro-fat); }
.rh-track-fill-alert   { background: var(--signal-alert); }

/* Goal-progress tiers — kelly identity by default; under-target opacity steps */
.rh-track-fill-tier-1 { background: rgba(47, 122, 51, 0.40); }
.rh-track-fill-tier-2 { background: rgba(47, 122, 51, 0.60); }
.rh-track-fill-tier-3 { background: rgba(47, 122, 51, 0.80); }
.rh-track-fill-tier-4 { background: var(--kelly); }
.rh-track-fill-tier-5 { background: var(--kelly-deep); }

/* Macro identity overrides — same opacity steps using --macro-* hex literals */
.rh-track-fill-protein.rh-track-fill-tier-1 { background: rgba(176, 115, 48, 0.40); }
.rh-track-fill-protein.rh-track-fill-tier-2 { background: rgba(176, 115, 48, 0.60); }
.rh-track-fill-protein.rh-track-fill-tier-3 { background: rgba(176, 115, 48, 0.80); }
.rh-track-fill-protein.rh-track-fill-tier-4 { background: var(--macro-protein); }
.rh-track-fill-protein.rh-track-fill-tier-5 { background: var(--macro-protein); }

.rh-track-fill-carbs.rh-track-fill-tier-1 { background: rgba(194, 155, 45, 0.40); }
.rh-track-fill-carbs.rh-track-fill-tier-2 { background: rgba(194, 155, 45, 0.60); }
.rh-track-fill-carbs.rh-track-fill-tier-3 { background: rgba(194, 155, 45, 0.80); }
.rh-track-fill-carbs.rh-track-fill-tier-4 { background: var(--macro-carbs); }
.rh-track-fill-carbs.rh-track-fill-tier-5 { background: var(--macro-carbs); }

.rh-track-fill-fat.rh-track-fill-tier-1 { background: rgba(184, 90, 53, 0.40); }
.rh-track-fill-fat.rh-track-fill-tier-2 { background: rgba(184, 90, 53, 0.60); }
.rh-track-fill-fat.rh-track-fill-tier-3 { background: rgba(184, 90, 53, 0.80); }
.rh-track-fill-fat.rh-track-fill-tier-4 { background: var(--macro-fat); }
.rh-track-fill-fat.rh-track-fill-tier-5 { background: var(--macro-fat); }

/* Overage tiers — uniform across all bars, signal palette */
.rh-track-fill-over-1 { background: var(--signal-caution-dim); }
.rh-track-fill-over-2 { background: var(--signal-caution); }
.rh-track-fill-over-3 { background: var(--signal-alert-dim); }
.rh-track-fill-over-4 { background: var(--signal-alert); }


/* ── Stacked macro bar ─────────────────────────────────────── */

.rh-macro-bar {
  display: flex;
  width: 100%;
  height: 8px;
  background: var(--sunken);
  overflow: hidden;
}

.rh-macro-bar > .rh-macro-bar-protein { background: var(--macro-protein); height: 100%; }
.rh-macro-bar > .rh-macro-bar-carbs   { background: var(--macro-carbs);   height: 100%; }
.rh-macro-bar > .rh-macro-bar-fat     { background: var(--macro-fat);     height: 100%; }


/* ── Citation tap target ───────────────────────────────────── */

.rh-cite {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  background: none;
  border: none;
  color: var(--kelly);
  font-family: inherit;
  font-size: var(--type-meta-size);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.rh-cite:hover {
  color: var(--kelly-deep);
}

.rh-cite::after {
  content: '\203A';
  font-size: 14px;
  line-height: 1;
}


/* ── Activity / list rows ──────────────────────────────────── */

.rh-list {
  display: flex;
  flex-direction: column;
}

.rh-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-3) 0;
}

.rh-list-row + .rh-list-row {
  border-top: 1px solid var(--border);
}

.rh-list-row-content {
  flex: 1;
  min-width: 0;
}

.rh-list-row-title {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  color: var(--ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rh-list-row-meta {
  font-size: var(--type-meta-size);
  color: var(--ink-3);
}

.rh-list-row-trailing {
  flex-shrink: 0;
  text-align: right;
}


/* ── Lift checklist row ────────────────────────────────────── */

.rh-lift-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: 10px 0;
}

.rh-lift-row + .rh-lift-row {
  border-top: 1px solid var(--border);
}

.rh-lift-checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-emphasis);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--surface);
  font-size: 11px;
  flex-shrink: 0;
  transition: background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.rh-lift-checkbox.done {
  background: var(--kelly);
  border-color: var(--kelly);
}

.rh-lift-checkbox.current {
  border-color: var(--ink-1);
}

.rh-lift-name {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  color: var(--ink-1);
}

.rh-lift-row .rh-lift-name.done {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.rh-lift-now {
  font-size: 11px;
  font-weight: 500;
  color: var(--kelly);
  letter-spacing: 0.02em;
}


/* ── Empty state ───────────────────────────────────────────── */

.rh-empty {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  background: var(--surface);
  border: 1px dashed var(--border-emphasis);
  border-radius: var(--radius-lg);
}

.rh-empty-title {
  font-size: var(--type-subtitle-size);
  font-weight: var(--type-subtitle-weight);
  color: var(--ink-1);
  margin-bottom: var(--space-2);
}

.rh-empty-body {
  font-size: var(--type-body-size);
  color: var(--ink-2);
  margin-bottom: var(--space-5);
}


/* ── Three-things-to-do checklist (post-onboarding) ────────── */

.rh-checklist {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.rh-checklist-header {
  padding: 14px 16px 12px;
}

.rh-checklist-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}

.rh-checklist-num {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.rh-checklist-label {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  color: var(--ink-1);
}

.rh-checklist-meta {
  font-size: var(--type-meta-size);
  color: var(--ink-3);
}


/* ── Week strip ────────────────────────────────────────────── */

.rh-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.rh-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.rh-week-day-label {
  font-size: var(--type-stat-label-size);
  font-weight: var(--type-stat-label-weight);
  color: var(--ink-3);
}

.rh-week-day-label.today {
  color: var(--ink-1);
}

.rh-week-day-cell {
  width: 100%;
  height: 44px;
  background: var(--sunken);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.rh-week-day-cell.today {
  border-color: var(--border-emphasis);
}

.rh-week-day-cell.done {
  background: var(--kelly-dim);
  border-color: var(--kelly);
}


/* ── App bar ───────────────────────────────────────────────── */

.rh-appbar {
  height: var(--app-bar-height);
  padding: 0 var(--content-padding-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  flex-shrink: 0;
}

.rh-appbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rh-appbar-actions {
  display: flex;
  gap: var(--space-1);
}

.rh-appbar-icon-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--ink-1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-standard);
}

.rh-appbar-icon-btn:hover {
  background: var(--sunken);
}

.rh-appbar-text-action {
  background: none;
  border: none;
  padding: var(--space-2) 0;
  color: var(--kelly);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.rh-appbar-text-action:hover {
  color: var(--kelly-deep);
}

.rh-appbar-title-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}


/* ── Bottom nav ────────────────────────────────────────────── */

.rh-bottomnav {
  height: var(--bottom-nav-height);
  padding-bottom: var(--safe-area-bottom);
  border-top: 1px solid var(--border);
  background: var(--bg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: var(--z-bottom-nav);
  flex-shrink: 0;
}

.rh-bottomnav-tab {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  position: relative;
  min-height: 44px;
  transition: color var(--duration-base) var(--ease-standard);
}

.rh-bottomnav-tab.active {
  color: var(--kelly);
}

.rh-bottomnav-badge {
  position: absolute;
  top: -2px;
  right: calc(50% - 18px);
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  background: var(--signal-alert);
  color: var(--surface);
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
  border-radius: 7px;
  font-variant-numeric: tabular-nums;
}


/* ── Wordmark ──────────────────────────────────────────────── */

.rh-wordmark {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.rh-wordmark-large {
  font-size: 20px;
}


/* ── Bottom sheet ──────────────────────────────────────────── */

.rh-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 24, 0);
  z-index: var(--z-overlay);
  pointer-events: none;
  transition: background var(--duration-base) var(--ease-standard);
}

.rh-sheet-backdrop.open {
  background: rgba(26, 26, 24, 0.42);
  pointer-events: auto;
}

.rh-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--border-emphasis);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  z-index: var(--z-sheet);
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  height: 70vh;
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-emphatic);
  padding-bottom: var(--safe-area-bottom);
}

.rh-sheet.open {
  transform: translateY(0);
}

.rh-sheet.expanded {
  height: 100vh;
  padding-top: var(--safe-area-top);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rh-sheet-grabber {
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
  flex-shrink: 0;
}

.rh-sheet-grabber-bar {
  width: 36px;
  height: 4px;
  background: var(--border-emphasis);
  opacity: 0.5;
  border-radius: 2px;
}

.rh-sheet-header {
  padding: 4px 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.rh-sheet-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.rh-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rh-sheet-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}


/* ── Study card (citation reference) ───────────────────────── */

.rh-study-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.rh-study-card-eyebrow {
  font-size: var(--type-stat-label-size);
  font-weight: var(--type-stat-label-weight);
  letter-spacing: var(--type-stat-label-tracking);
  color: var(--ink-3);
  margin-bottom: 6px;
}

.rh-study-card-title {
  font-size: var(--type-subtitle-size);
  font-weight: var(--type-subtitle-weight);
  line-height: 1.3;
  color: var(--ink-1);
  margin-bottom: var(--space-2);
}

.rh-study-card-meta {
  font-size: var(--type-meta-size);
  color: var(--ink-3);
  margin-bottom: 10px;
}

.rh-study-card-meta strong {
  color: var(--ink-2);
  font-weight: var(--type-meta-weight);
}

.rh-study-card-summary {
  font-size: var(--type-body-size);
  color: var(--ink-2);
  margin-top: 10px;
}

.rh-study-card-footer {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* ── Toast ─────────────────────────────────────────────────── */

.rh-toast-container {
  position: fixed;
  bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + var(--space-4));
  left: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rh-toast {
  background: var(--ink-1);
  color: var(--surface);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: var(--type-body-size);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-base) var(--ease-decelerate),
              transform var(--duration-base) var(--ease-decelerate);
}

.rh-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.rh-toast.leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-base) var(--ease-accelerate),
              transform var(--duration-base) var(--ease-accelerate);
}


/* ── Page shell ────────────────────────────────────────────── */

.rh-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
}

.rh-page-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-5) var(--content-padding-mobile);
}

/* When a page uses .rh-section primitives natively, the section
   handles its own padding — opt out of the transitional padding via
   .rh-page-content--flush. Phase 4 surface tranches add this class
   when they migrate. */
.rh-page-content--flush {
  padding: 0;
}


/* ── Section spacing helpers ───────────────────────────────── */

.rh-section {
  padding: 0 var(--content-padding-mobile);
  margin-bottom: var(--space-6);
}

.rh-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 var(--content-padding-mobile);
  margin-bottom: var(--space-2);
}

.rh-section-stack > * + * {
  margin-top: var(--space-3);
}


/* ── Auth funnel surface ───────────────────────────────────── */

.rh-auth-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  padding: 0 var(--content-padding-desktop);
}

.rh-auth-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: var(--space-16);
}

.rh-auth-footer {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
  text-align: center;
}


/* ── Visually hidden (accessibility) ───────────────────────── */

.rh-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   Study card v7 — Phase 1 infrastructure (May 2026)

   Layout class names match Code Spec 5 renderer output (BEM).
   Category and evidence-tier variants drive visuals via
   data-attribute selectors.

   Design-token mapping notes:
   - This codebase has no Bootstrap-style ramp tokens
     (--c-coral-50, --color-text-info, etc.). Category ramp
     colors are dropped in as literal hexes from the locked
     category-map values.
   - Tier-Strong reuses the existing --signal-success.
     Tier-Limited reuses --signal-caution.
     Tier-Moderate uses literal teal (no equivalent in tokens).
     Tier-Early uses neutral derived from --ink-3 / --sunken.
     Per the locked rule: Moderate must NOT use info-blue —
     info-blue is reserved exclusively for the answer box.
   - Answer-box info color is added as new tokens below
     (--rh-info, --rh-info-bg, --rh-info-border) since no
     equivalent exists in tokens.css.
   - No dark-mode block: tokens.css is light-mode only.
   ============================================================ */

:root {

  /* Category icon tints — literal hexes per the category-map spec */
  --color-category-coral-bg:   #FAECE7;
  --color-category-coral-fg:   #712B13;
  --color-category-pink-bg:    #FBEAF0;
  --color-category-pink-fg:    #72243E;
  --color-category-teal-bg:    #E1F5EE;
  --color-category-teal-fg:    #085041;
  --color-category-purple-bg:  #EEEDFE;
  --color-category-purple-fg:  #3C3489;
  --color-category-gray-bg:    #F1EFE8;
  --color-category-gray-fg:    #444441;

  /* Evidence-tier pill colors. Strong/Limited reuse existing
     signal tokens. Moderate gets literal teal so it cannot
     collide with the info-blue reserved for the answer box.
     Early uses neutral. */
  --color-tier-strong-bg:   var(--signal-success-dim);
  --color-tier-strong-fg:   var(--signal-success);
  --color-tier-moderate-bg: #E1F5EE;
  --color-tier-moderate-fg: #085041;
  --color-tier-limited-bg:  var(--signal-caution-dim);
  --color-tier-limited-fg:  var(--signal-caution);
  --color-tier-early-bg:    var(--sunken);
  --color-tier-early-fg:    var(--ink-2);

  /* Answer-box info color (no equivalent in tokens.css).
     Deep slate-blue chosen to live alongside warm off-white
     surface and avoid colliding with --kelly. */
  --rh-info:        #1E5A8A;
  --rh-info-bg:     #EAF2F8;
  --rh-info-border: #C7DCEC;
}


/* --- Card shell --- */

.rh-study-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}


/* --- Header row --- */

.rh-study-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: 18px;
  border-bottom: 0.5px solid var(--border);
  flex-wrap: wrap;
}

.rh-study-card__topic {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.rh-study-card__topic-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-category-gray-bg);
  color: var(--color-category-gray-fg);
}
.rh-study-card__topic-icon[data-color="coral"]  { background: var(--color-category-coral-bg);  color: var(--color-category-coral-fg); }
.rh-study-card__topic-icon[data-color="pink"]   { background: var(--color-category-pink-bg);   color: var(--color-category-pink-fg); }
.rh-study-card__topic-icon[data-color="teal"]   { background: var(--color-category-teal-bg);   color: var(--color-category-teal-fg); }
.rh-study-card__topic-icon[data-color="purple"] { background: var(--color-category-purple-bg); color: var(--color-category-purple-fg); }
.rh-study-card__topic-icon[data-color="gray"]   { background: var(--color-category-gray-bg);   color: var(--color-category-gray-fg); }

.rh-study-card__topic-icon i {
  font-size: 20px;
}

.rh-study-card__topic-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-1);
  margin: 0;
  line-height: 1.2;
}

.rh-study-card__evidence {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.rh-study-card__tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-tier-early-bg);
  color: var(--color-tier-early-fg);
}
.rh-study-card__tier-pill[data-tier="strong"]   { background: var(--color-tier-strong-bg);   color: var(--color-tier-strong-fg); }
.rh-study-card__tier-pill[data-tier="moderate"] { background: var(--color-tier-moderate-bg); color: var(--color-tier-moderate-fg); }
.rh-study-card__tier-pill[data-tier="limited"]  { background: var(--color-tier-limited-bg);  color: var(--color-tier-limited-fg); }
.rh-study-card__tier-pill[data-tier="early"]    { background: var(--color-tier-early-bg);    color: var(--color-tier-early-fg); }

.rh-study-card__meta {
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rh-study-card__meta:hover {
  color: var(--rh-info);
}


/* --- Title --- */

.rh-study-card__title {
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: 1.35;
  margin: 0 0 26px;
  color: var(--ink-1);
}


/* --- Sections --- */

.rh-study-card__section {
  margin-bottom: var(--space-6);
}

.rh-study-card__section--finding {
  border-top: 0.5px solid var(--border);
  padding-top: var(--space-6);
}

.rh-study-card__section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.rh-study-card__section-prose {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 14px 0 0;
}

.rh-study-card__finding-body {
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink-1);
}


/* --- Stat tiles (context) --- */

.rh-study-card__stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* 3-tile variant when an editor uses 3 context stats */
.rh-study-card__stat-grid:has(.rh-study-card__stat:nth-child(3)) {
  grid-template-columns: repeat(3, 1fr);
}

.rh-study-card__stat {
  background: var(--sunken);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.rh-study-card__stat-label {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 6px;
  font-weight: 500;
}

.rh-study-card__stat-value {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-1);
  line-height: 1.1;
  margin: 0;
}

.rh-study-card__stat-unit {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 400;
  margin-left: 2px;
}


/* --- Answer box --- */

.rh-study-card__answer {
  background: var(--rh-info-bg);
  border: 1px solid var(--rh-info-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}

.rh-study-card__answer-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--rh-info);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.rh-study-card__answer-headline {
  font-size: 32px;
  font-weight: 500;
  color: var(--rh-info);
  line-height: 1.05;
  margin: 0 0 6px;
}

.rh-study-card__answer-unit {
  font-size: 16px;
  color: var(--rh-info);
  font-weight: 400;
  opacity: 0.7;
  margin-left: 4px;
}

.rh-study-card__answer-range {
  font-size: 13px;
  color: var(--rh-info);
  opacity: 0.85;
  margin: 0 0 14px;
}

.rh-study-card__answer-body {
  font-size: 15px;
  color: var(--ink-1);
  line-height: 1.6;
  margin: 0;
}