/* ===========================================================================
   HRV — visual styles
   ---------------------------------------------------------------------------
   Two visual modes:
   - Setup / Summary / History / Detail views: dark grey theme, readable text,
     standard card layout.
   - Session view: pure black background, breathing circle dominant, optional
     overlays (HR/time/stats/chart). "Clean mode" hides every overlay so only
     the pacer remains.
   =========================================================================== */

:root {
  --bg: #0e0f12;
  --bg-card: #181a1f;
  --bg-card-hover: #1f2229;
  --fg: #e8e9ec;
  --fg-muted: #8a8f99;
  --accent: #6fa8ff;
  --accent-strong: #4a8aff;
  --danger: #ff6b6b;
  --success: #5dd39e;
  --border: #2a2d35;
  /* --pacer-size is both the diameter of the fixed outline ring AND the
     base size of the inner breath circle. The inner circle scales 0..1
     between fully exhaled (invisible) and fully inhaled (filling the
     ring). Clamps to viewport on narrow screens. */
  --pacer-size: min(320px, 70vmin);
}

* { box-sizing: border-box; }
/* HTML's `hidden` attribute must always win over our `display: flex/inline-block`
   class rules — otherwise toggling .hidden via JS silently does nothing. */
[hidden] { display: none !important; }

/* --- Accessibility helpers ------------------------------------------------ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: 0; left: 0; z-index: 1000;
  transform: translateY(-110%);
  padding: 10px 16px; background: var(--accent); color: #0c1119;
  font-weight: 600; border-radius: 0 0 8px 0;
  transition: transform 150ms ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }
input { font-family: inherit; }

/* ---- View switching ---- */
.view { display: none; min-height: 100vh; }
.view.active { display: block; }
#session-view.active { display: flex; flex-direction: column; }

header {
  padding: 48px 32px 16px;
  max-width: 720px;
  margin: 0 auto;
}
header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tagline { color: var(--fg-muted); margin: 4px 0 0; }

/* ---- Cards ---- */
.card {
  max-width: 720px;
  margin: 16px auto;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.card h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.card h3 small {
  display: block;
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 400;
}

.auth-section {
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.auth-guest, .auth-user {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  min-width: 0;
}
.auth-warn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffd089;
}
.auth-warn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(255, 168, 77, 0.18);
  color: #ffa84d;
  border: 1px solid rgba(255, 168, 77, 0.45);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.btn-sm { padding: 6px 12px; font-size: 13px; }
#auth-email { font-weight: 500; }
.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: inherit;
  padding: 4px 8px;
  border-radius: 4px;
}
.link-btn:hover { background: rgba(111, 168, 255, 0.1); text-decoration: underline; }
/* For non-CTA link-buttons (e.g. Sign out) — don't compete with Upgrade. */
.link-btn-muted { color: var(--fg-muted); }
.link-btn-muted:hover { background: rgba(255, 255, 255, 0.05); color: var(--fg); }
.auth-form { display: flex; flex-direction: column; gap: 8px; }
.auth-form input {
  padding: 9px 12px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}
.auth-form input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 4px; }
.auth-tab {
  flex: 1;
  background: var(--bg);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.auth-tab.active { background: var(--bg-card-hover); color: var(--fg); border-color: var(--accent); }
.auth-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.auth-error {
  color: var(--danger);
  font-size: 13px;
  padding: 8px 10px;
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 6px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.row:last-child { border-bottom: none; }
.row label { color: var(--fg-muted); }
/* Allows a label + a one-line "why" hint to stack on the left side of a row. */
.row-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-label small { font-size: 12px; line-height: 1.4; }
.actions-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.start-hint { font-size: 12px; }

.device-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.muted { color: var(--fg-muted); }

.duration-row { display: flex; align-items: center; gap: 6px; }
.duration-row input {
  width: 80px;
  padding: 8px 10px;
  text-align: right;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 16px;
}
.duration-row input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.unit { color: var(--fg-muted); font-size: 14px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
/* Constrain the summary view's bottom action row to the same column width as
   the cards above it; the row otherwise hugs the viewport edge. */
.summary-actions {
  max-width: 720px;
  margin: 16px auto;
  padding: 0 24px;
}
.summary-actions .row.actions { border-bottom: none; padding: 0; }

/* ---- Buttons ---- */
.btn {
  padding: 10px 16px;
  background: var(--bg-card-hover);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.btn:hover:not(:disabled) { background: #262932; border-color: #383b45; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary {
  background: var(--accent);
  color: #0c1119;
  border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-secondary { /* default */ }
.btn-danger-outline { color: var(--danger); border-color: rgba(255, 107, 107, 0.4); }
.btn-danger-outline:hover:not(:disabled) { background: rgba(255, 107, 107, 0.1); }
/* Armed delete: filled red so the user sees the next click commits. */
.btn-danger-outline.armed {
  background: var(--danger);
  color: #1a0a0a;
  border-color: var(--danger);
}
.btn-danger-outline.armed:hover:not(:disabled) { background: #ff4f4f; }

.btn-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  transition: background 120ms ease;
}
.btn-icon:hover { background: rgba(255, 255, 255, 0.12); }
.btn-icon.btn-danger { color: var(--danger); }

.hint {
  max-width: 720px;
  margin: 16px auto;
  padding: 0 8px;
  color: var(--fg-muted);
  font-size: 13px;
  text-align: center;
}
.hint em { color: var(--fg); font-style: normal; font-weight: 500; }

.bt-banner {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 12px 16px;
  background: rgba(255, 107, 107, 0.10);
  border: 1px solid rgba(255, 107, 107, 0.45);
  border-radius: 8px;
  color: #ffb8b8;
  font-size: 13px;
  line-height: 1.5;
}
.bt-banner strong { color: var(--fg); font-weight: 600; display: block; margin-bottom: 2px; }
.bt-banner em { color: var(--danger); font-style: normal; font-weight: 600; }

/* ===========================================================================
   SESSION VIEW — pure black, pacer-centric
   =========================================================================== */
#session-view {
  background: #000;
  color: #f0f0f0;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}

.pacer-wrap {
  /* True centre of the session view: no padding-bottom hack. The HR-trace
     overlay and controls below are position:absolute and float over the
     pacer when they overlap on short viewports — the pacer is the focal
     element and stays dead-centre. */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Container the same size as the outer ring. The inner breath circle
   scales 0..1 *inside* this box, so it visibly grows from nothing to
   filling the ring exactly. */
.pacer-stack {
  position: relative;
  width: var(--pacer-size);
  height: var(--pacer-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pacer-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pacer-ring-track {
  fill: none;
  stroke-width: 1.2;
  /* The ring is the user's reference for the max breath size, so make it
     clearly visible — it was nearly invisible before because it doubled
     as a background track for an animated fill that's now gone. */
  stroke: rgba(255, 255, 255, 0.22);
}

.pacer-circle {
  width: var(--pacer-size);
  height: var(--pacer-size);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5b8dff 0%, #3a6bd9 55%, #1f3f8a 100%);
  box-shadow: 0 0 80px rgba(91, 141, 255, 0.4), inset 0 0 40px rgba(255, 255, 255, 0.1);
  /* Starts collapsed (invisible). Driven 0..1 by Pacer's eased progress;
     1 = fully inhaled, exactly filling the outer ring. */
  transform: scale(0);
  transition: transform 50ms linear;
  will-change: transform;
}

.pacer-label {
  margin-top: 32px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 300;
  min-height: 1.5em;
}

/* ---- Session overlays ---- */
.session-overlay {
  position: absolute;
  z-index: 2;
  transition: opacity 200ms ease;
}
.session-overlay.top {
  top: 24px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.session-overlay.bottom-chart {
  bottom: 80px; left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 720px);
  pointer-events: none;
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  padding: 0 4px;
}
.chart-title { font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.chart-axis { font-variant-numeric: tabular-nums; }

.session-overlay.session-controls {
  bottom: 24px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
}
.btn-stop {
  background: rgba(255, 107, 107, 0.12);
  color: var(--danger);
  border-color: rgba(255, 107, 107, 0.35);
}
.btn-stop:hover { background: rgba(255, 107, 107, 0.2); border-color: var(--danger); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }
.kbd {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", monospace;
  color: rgba(255, 255, 255, 0.65);
}
/* On touch-only devices there's no keyboard, so a "C" hint is just noise. */
@media (hover: none) {
  .kbd { display: none; }
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  color: rgba(255, 255, 255, 0.85);
}
.stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.stat span:nth-child(2) {
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.stat .unit { font-size: 11px; margin-left: 4px; color: rgba(255, 255, 255, 0.4); }

#hr-chart {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  /* width: 100% so the canvas fills the parent (which is already capped at
     min(90vw, 720px)). max-width: 90vw alone let the canvas's intrinsic
     800px width win at larger viewports, pushing the right edge past the
     header. */
  width: 100%;
  display: block;
}

/* ---- Clean mode: hide stats + chart, keep controls findable ---- */
#session-view[data-clean="true"] .session-overlay.top,
#session-view[data-clean="true"] .session-overlay.bottom-chart,
#calibration-view[data-clean="true"] .calibration-overlay.top,
#calibration-view[data-clean="true"] .calibration-progress {
  opacity: 0;
  pointer-events: none;
}
#session-view[data-clean="true"] .pacer-label,
#calibration-view[data-clean="true"] .pacer-label { opacity: 0.2; }
/* Controls stay reachable but recede until hovered */
#session-view[data-clean="true"] .session-overlay.session-controls,
#calibration-view[data-clean="true"] .calibration-overlay.session-controls { opacity: 0.25; }
#session-view[data-clean="true"] .session-overlay.session-controls:hover,
#calibration-view[data-clean="true"] .calibration-overlay.session-controls:hover { opacity: 1; }

/* ===========================================================================
   SUMMARY + HISTORY + DETAIL
   =========================================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}
.stat-cell {
  display: flex;
  flex-direction: column;
  /* Match the padding on .stat-cell.locked so locked + unlocked cells line
     up vertically. Unlocked cells just don't show the border/background. */
  padding: 8px;
}
.stat-cell .stat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.stat-cell .stat-value {
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.stat-cell .stat-unit { font-size: 12px; color: var(--fg-muted); margin-left: 4px; }

/* Inline info icon: a 14px circle with a lowercase "i". Sits inside a
   flex .stat-label which centres it vertically with the surrounding text. */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
  font-style: italic;
  font-family: ui-serif, "Georgia", serif;
  font-weight: 500;
  cursor: help;
  user-select: none;
  text-transform: none;
  letter-spacing: 0;
  /* Drop the letter-spacing inherited from .stat-label so the "i" doesn't
     get pushed off-centre inside the circle. */
}
.info-icon:hover, .info-icon:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}
.history-stat .info-icon {
  width: 12px;
  height: 12px;
  font-size: 8px;
}

.stat-cell.locked {
  /* No negative margin — that made adjacent locked cells' golden borders
     overlap (grid gap is 16px, the old -12px margin ate 24px of it).
     box-shadow inset draws the border inside the cell so it never spills
     into the gap, and the full 16px stays as breathing room between cells. */
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 168, 77, 0.30);
  background: linear-gradient(180deg, rgba(255, 168, 77, 0.04), rgba(255, 168, 77, 0.01));
  padding: 8px;
  cursor: pointer;
  transition: background 120ms ease, box-shadow 120ms ease;
}
.stat-cell.locked:hover,
.stat-cell.locked:focus-visible {
  background: linear-gradient(180deg, rgba(255, 168, 77, 0.10), rgba(255, 168, 77, 0.03));
  box-shadow: inset 0 0 0 1px rgba(255, 168, 77, 0.55);
  outline: none;
}
.stat-cell.locked .stat-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffd089;
  font-size: 18px;
  font-weight: 500;
}
.stat-cell.locked .stat-locked-text {
  letter-spacing: 0.02em;
}
.lock-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: -2px;
  color: #ffa84d;
}
.premium-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 7px;
  background: linear-gradient(135deg, #ffa84d, #ffc875);
  color: #1a1410;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: 2px;
}
.auth-user-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.premium-cta { border-color: rgba(111, 168, 255, 0.35); background: linear-gradient(180deg, var(--bg-card), rgba(111, 168, 255, 0.04)); }
.premium-cta h3 { color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 16px; }
.premium-cta p { margin: 4px 0 4px; font-size: 14px; line-height: 1.5; }
.premium-cta .premium-price { color: var(--fg-muted); margin-bottom: 16px; }
.premium-cta .premium-price strong { color: var(--fg); font-weight: 600; }

.save-cta {
  border-color: rgba(255, 168, 77, 0.4);
  background: linear-gradient(180deg, var(--bg-card), rgba(255, 168, 77, 0.05));
}
.save-cta h3 { color: #ffd089; text-transform: none; letter-spacing: 0; font-size: 16px; }
.save-cta p { margin: 4px 0 16px; font-size: 14px; line-height: 1.5; color: var(--fg); }
.save-cta-form { display: flex; flex-direction: column; gap: 8px; }
.save-cta-form input {
  padding: 9px 12px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}
.save-cta-form input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.save-cta-form .row.actions { padding: 4px 0 0; border-bottom: none; }

.history-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 32px 16px;
}
.history-header h1 { margin: 0; font-size: 28px; }
.history-header > div { display: flex; flex-wrap: wrap; gap: 8px; }

.history-list { max-width: 720px; margin: 16px auto; padding: 0 16px; }
.history-item {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.history-item:hover { background: var(--bg-card-hover); }
.history-item .when { font-weight: 500; }
.history-item .small { font-size: 12px; color: var(--fg-muted); }
.history-item .num { font-variant-numeric: tabular-nums; font-weight: 500; }
.history-stat.locked { cursor: pointer; }
.history-stat.locked .num { color: #ffa84d; }
.history-stat.locked:hover .num { color: #ffd089; }
.history-stat.locked .lock-icon { vertical-align: -1px; }
.history-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--fg-muted);
}
.history-empty p { margin: 0 0 8px; }
.history-empty p.small { font-size: 13px; }
.history-empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}

#detail-chart, #detail-rsa-chart, #summary-chart {
  width: 100%;
  height: auto;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* ---- Toast ---- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 18px;
  background: rgba(20, 22, 28, 0.95);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 1000;
}
.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.error { border-color: rgba(255, 107, 107, 0.5); color: var(--danger); }

/* Info-icon tooltip: anchored near the icon the user pointed at / tapped.
   Positioned by JS via inline `left` / `top` (in viewport coords). */
.info-tooltip {
  position: fixed;
  z-index: 1100;
  max-width: 260px;
  padding: 8px 10px;
  background: rgba(20, 22, 28, 0.97);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.info-tooltip.visible { opacity: 1; transform: translateY(0); }
.info-tooltip::after {
  content: '';
  position: absolute;
  left: var(--arrow-x, 50%);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  transform: translateX(-50%);
}
.info-tooltip.above::after {
  top: 100%;
  border-top-color: rgba(20, 22, 28, 0.97);
}
.info-tooltip.below::after {
  bottom: 100%;
  border-bottom-color: rgba(20, 22, 28, 0.97);
}

/* ===========================================================================
   BREATHING-RATE ROW + RF CALIBRATION
   ===========================================================================
   Setup view's "Breathing rate" row mirrors the locked-stat treatment for the
   premium-gated "Find my resonance" button: golden border + lock icon, click →
   openUpgradePath(). When premium, the button is plain and primary-ish; when
   the user has a cached RF, the rate-display shows it with a "Reset" link. */
.rate-row-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rate-display {
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.rate-display .unit { font-size: 12px; margin-left: 2px; }
.rate-calibrate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* The button toggles between two visual states via [data-premium]:
   - "locked": amber border + amber text + lock icon, matches stat-cell.locked
   - "unlocked": plain secondary button with a small ✦ icon */
.rate-calibrate-btn[data-premium="locked"] {
  background: linear-gradient(180deg, rgba(255, 168, 77, 0.04), rgba(255, 168, 77, 0.01));
  color: #ffd089;
  border-color: rgba(255, 168, 77, 0.45);
}
.rate-calibrate-btn[data-premium="locked"]:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(255, 168, 77, 0.10), rgba(255, 168, 77, 0.03));
  border-color: rgba(255, 168, 77, 0.75);
}
.rate-calibrate-btn[data-premium="locked"] .rate-calibrate-icon::before {
  /* Reuse the same padlock-style cue as locked stat cells. */
  content: "🔒";
  display: inline-block;
  font-size: 11px;
  margin-right: 2px;
}
.rate-calibrate-btn[data-premium="unlocked"] .rate-calibrate-icon::before {
  /* A small four-point star reads as "auto-detect / smart" without inventing
     an icon system. Distinct from the lock so the gated → unlocked transition
     is visually obvious. */
  content: "✦";
  color: var(--accent);
  font-size: 13px;
  margin-right: 2px;
}

/* ---- Calibration view ----
   Reuses the session view's pure-black, pacer-centric layout — the breathing
   rhythm is still the only thing the user should focus on. The progress bar
   at top replaces "time left" since the trial-by-trial structure matters
   more than the absolute clock. */
#calibration-view {
  background: #000;
  color: #f0f0f0;
  position: relative;
  overflow: hidden;
}
#calibration-view.active { display: flex; flex-direction: column; min-height: 100vh; }

.calibration-overlay {
  position: absolute;
  z-index: 2;
  transition: opacity 200ms ease;
}
.calibration-progress { transition: opacity 200ms ease; }
.calibration-overlay.top {
  top: 60px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.calibration-overlay.session-controls {
  bottom: 24px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
}
.calibration-progress {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(80vw, 480px);
  text-align: center;
}
.cal-progress-bar {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.cal-progress-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--accent), #ffd089);
  transition: width 200ms linear;
}
.cal-progress-label {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- Calibration result view ---- */
.cal-result-card {
  text-align: center;
  padding: 32px 24px;
  border-color: rgba(255, 168, 77, 0.30);
  background: linear-gradient(180deg, var(--bg-card), rgba(255, 168, 77, 0.04));
}
.cal-result-rate {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 12px;
}
.cal-result-rate-num {
  font-size: 56px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #ffd089;
  letter-spacing: -0.02em;
}
.cal-result-rate-unit {
  font-size: 13px;
  color: var(--fg-muted);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.cal-result-blurb {
  margin: 0 0 8px;
  color: var(--fg);
  font-size: 14px;
}
.cal-result-warning {
  margin: 12px auto 0;
  max-width: 480px;
  padding: 10px 14px;
  background: rgba(255, 168, 77, 0.08);
  border: 1px solid rgba(255, 168, 77, 0.35);
  border-radius: 6px;
  color: #ffd089;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}
#cal-result-chart {
  width: 100%;
  height: auto;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* ---- Small screens ---- */
@media (max-width: 600px) {
  header, .history-header { padding: 32px 16px 8px; }
  .card { margin: 12px 16px; padding: 16px; }
  .session-overlay.top, .calibration-overlay.top { gap: 24px; }
  .calibration-overlay.top { top: 80px; }
  .stat span:nth-child(2) { font-size: 18px; }
  .cal-result-rate-num { font-size: 44px; }
  /* On phones, drop the entire HR-trace overlay (header + canvas). Hiding
     only the canvas leaves a ghost header that reads like a broken chart. */
  .session-overlay.bottom-chart { display: none; }
  .summary-actions { padding: 0 16px; }
  .history-item {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}