:root {
  --bg: #0b0f19;
  --bg-2: #0e1422;
  --card: rgba(255, 255, 255, 0.032);
  --card-hover: rgba(255, 255, 255, 0.055);
  --border: rgba(255, 255, 255, 0.07);
  --text: #e7ecf5;
  --text-dim: #8a94a8;
  --text-faint: #5a6376;
  --oura-1: #8b7cf6;
  --oura-2: #22d3ee;
  --garmin-1: #34d399;
  --garmin-2: #a3e635;
  --warn-1: #fb923c;
  --warn-2: #f87171;
  --gold: #fbbf24;
  --radius: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  background-image:
    radial-gradient(1000px 600px at 85% -10%, rgba(139, 124, 246, 0.09), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, rgba(34, 211, 238, 0.06), transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  min-height: 100vh;
}

.app { display: flex; min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────── */
.sidebar {
  width: 220px;
  min-width: 220px;
  padding: 28px 16px 20px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: rgba(11, 15, 25, 0.7);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  height: 100vh;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.3px;
  margin-bottom: 36px;
  padding-left: 10px;
  /* the logo is a link back to the homepage — it must look like the logo, not a link */
  color: inherit;
  text-decoration: none;
}
.logo:visited { color: inherit; }
.logo b { font-weight: 700; }
/* Parent-brand lockup: stacked under the wordmark, deliberately quiet so it reads as
   attribution rather than competing with the product name. */
.logo-word { display: block; line-height: 1.15; white-space: nowrap; }
.logo-by {
  display: block;
  font-size: 9px; font-style: normal; font-weight: 600;
  letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--text-faint); margin-top: 3px;
}
.logo-ring {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(var(--oura-1), var(--oura-2), var(--garmin-1), var(--oura-1)) border-box;
  filter: drop-shadow(0 0 6px rgba(139, 124, 246, 0.5));
}

nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.18s;
}
.nav-item svg { width: 18px; height: 18px; fill: currentColor; opacity: 0.85; }
.nav-item:hover { color: var(--text); background: var(--card); }
.nav-item.active {
  color: var(--text);
  background: linear-gradient(90deg, rgba(139, 124, 246, 0.16), rgba(34, 211, 238, 0.07));
  box-shadow: inset 0 0 0 1px rgba(139, 124, 246, 0.25);
}

.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 6px; }
.legend { display: flex; align-items: center; gap: 6px; color: var(--text-faint); font-size: 11px; }
.sync-status { font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.btn-ghost {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  transition: all 0.18s;
}
.btn-ghost:hover { color: var(--text); background: var(--card-hover); }

/* ── Badges ──────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}
.badge-O { background: rgba(139, 124, 246, 0.18); color: #a99df8; }
.badge-G { background: rgba(52, 211, 153, 0.15); color: #4ade9d; }
.badge-I { background: rgba(34, 211, 238, 0.13); color: #4cd9ec; }
.badge-E, .badge-C { background: rgba(251, 191, 36, 0.13); color: #f5c94f; }
/* Apple Health — a hub rather than a device, so a neutral grey rather than a
   brand colour: the number came via the phone, from something else. */
.badge-A { background: rgba(226, 232, 240, 0.14); color: #cbd5e1; }
.badge-S { background: rgba(148, 163, 184, 0.15); color: #a8b4c6; }
.badge-M { background: rgba(139, 124, 246, 0.15); color: #a99df8; }
.badge-D { background: rgba(148, 163, 184, 0.12); color: #8a94a8; }

/* ── Main / views ────────────────────────────────── */
.main { flex: 1; padding: 32px 36px 60px; max-width: 1400px; margin: 0 auto; width: 100%; min-width: 0; }
.view { display: none; animation: fadein 0.25s ease; }
.view.active { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

.page-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 10px; }
.dash-nav { display: flex; align-items: center; gap: 8px; }
.dash-nav .btn-ghost { font-size: 15px; padding: 8px 14px; }
.dash-nav .btn-ghost:disabled { opacity: 0.35; cursor: default; }
.dash-nav input[type="date"] { color-scheme: dark; }

.info-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  cursor: pointer;
  margin-left: 5px;
  vertical-align: middle;
}
.info-dot:hover { color: var(--text); border-color: var(--oura-1); }

.chart-toggle { display: flex; gap: 4px; }
.chart-toggle button {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-faint);
  width: 30px; height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.chart-toggle button.active { color: #fff; border-color: rgba(139, 124, 246, 0.5); background: rgba(139, 124, 246, 0.22); }

textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  resize: vertical;
  width: 100%;
  min-height: 76px;
}
textarea:focus { border-color: rgba(139, 124, 246, 0.5); }

/* ── Demo mode ───────────────────────────────────── */
.demo-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(139, 124, 246, 0.18), rgba(34, 211, 238, 0.12));
  border-bottom: 1px solid rgba(139, 124, 246, 0.3);
  backdrop-filter: blur(14px);
  font-size: 12px;
}
.demo-tag {
  font-weight: 800; font-size: 10px; letter-spacing: 1px;
  background: var(--oura-1); color: #0b0f19;
  padding: 3px 8px; border-radius: 5px;
}
.demo-copy { color: var(--text-dim); }
.demo-switch { display: flex; gap: 4px; margin-left: auto; }
.demo-switch button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 5px 12px; border-radius: 999px;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.demo-switch button:hover { color: var(--text); }
.demo-switch button.active {
  color: #fff; background: rgba(139, 124, 246, 0.4);
  border-color: rgba(139, 124, 246, 0.6);
}
.demo-cta {
  background: var(--oura-1); color: #fff; text-decoration: none;
  padding: 5px 14px; border-radius: 999px; font-weight: 600; font-size: 11.5px;
}
.demo-back { color: var(--text-dim); text-decoration: none; font-size: 11.5px; }
.demo-back:hover { color: var(--text); }
body.has-demo-bar .app { min-height: calc(100vh - 40px); }
body.has-demo-bar .sidebar { height: auto; min-height: calc(100vh - 40px); top: 40px; }

#demo-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--bg-2); border: 1px solid rgba(139, 124, 246, 0.4);
  color: var(--text); padding: 12px 20px; border-radius: 12px;
  font-size: 13px; z-index: 100; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
#demo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 700px) {
  .demo-copy { display: none; }
  .demo-switch { margin-left: 0; }
  /* touch-sized controls in the demo bar */
  .demo-bar { padding: 8px 12px; gap: 8px; }
  .demo-switch button { min-height: 38px; padding: 8px 12px; }
  .demo-cta { min-height: 38px; display: inline-flex; align-items: center; padding: 8px 14px; }
  .demo-back { min-height: 38px; display: inline-flex; align-items: center; padding: 8px 4px; }
}

/* Collapsible detail — keeps citations and method notes available without
   letting them dominate the page (closed by default, especially on mobile). */
.disclosure { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.disclosure > summary {
  cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 600; color: var(--text-faint);
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; min-height: 32px;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before {
  content: '›'; display: inline-block; transition: transform 0.18s;
  font-size: 15px; line-height: 1;
}
.disclosure[open] > summary::before { transform: rotate(90deg); }
.disclosure > summary:hover { color: var(--text-dim); }
.disclosure-body { padding-top: 10px; }

.soon-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(251, 191, 36, 0.15);
  color: #f5c94f;
  margin-left: 4px;
}
.nav-item.soon { opacity: 0.75; }

/* ── Coach chat ─────────────────────────────────── */
.coach-layout { display: grid; grid-template-columns: 250px 1fr; gap: 16px; align-items: start; }
.coach-list { padding: 10px; max-height: 70vh; overflow-y: auto; }
.coach-chat-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  transition: background 0.15s;
}
.coach-chat-item:hover { background: var(--card-hover); }
.coach-chat-item.active { background: rgba(139, 124, 246, 0.14); box-shadow: inset 0 0 0 1px rgba(139, 124, 246, 0.3); }
.coach-panel { display: flex; flex-direction: column; height: 70vh; padding: 16px; }
.coach-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 6px; }
.coach-msg { display: flex; }
.coach-msg.user { justify-content: flex-end; }
.coach-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.6;
}
.coach-msg.user .coach-bubble { background: linear-gradient(135deg, rgba(139, 124, 246, 0.28), rgba(109, 94, 240, 0.22)); border: 1px solid rgba(139, 124, 246, 0.3); }
.coach-msg.assistant .coach-bubble { background: var(--card); border: 1px solid var(--border); }
.coach-inputrow { display: flex; gap: 10px; margin-top: 12px; align-items: flex-end; }
/* send becomes stop while a reply streams */
.btn-primary.is-stop {
  background: rgba(248, 113, 113, 0.16);
  border-color: rgba(248, 113, 113, 0.45);
  color: var(--warn-2);
}
.coach-inputrow textarea { flex: 1; }
.coach-thinking { color: var(--text-faint); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@media (max-width: 860px) { .coach-layout { grid-template-columns: 1fr; } .coach-list { max-height: 200px; } }

.chip-planned { background: rgba(251, 191, 36, 0.15); color: #f5c94f; border: 1px dashed rgba(251, 191, 36, 0.35); }
.chip-note { background: rgba(148, 163, 184, 0.14); color: #a8b4c6; }
.cal-cell.future { opacity: 0.85; }
.page-title { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; }
.page-sub { color: var(--text-dim); font-size: 13px; }

/* ── Cards ───────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(14px);
}

/* ── Rings row ───────────────────────────────────── */
.rings-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
.ring-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 14px 16px;
  text-align: center;
  transition: all 0.2s;
  backdrop-filter: blur(14px);
}
.ring-card:hover { background: var(--card-hover); transform: translateY(-2px); }
.ring-svg { display: block; margin: 0 auto 10px; }
.ring-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.ring-sub { font-size: 11px; color: var(--text-faint); margin-top: 4px; }

/* ── Glance grid ─────────────────────────────────── */
.section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-faint);
  margin: 26px 0 14px;
}
.glance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.glance-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px 12px;
  cursor: grab;
  transition: all 0.2s;
  backdrop-filter: blur(14px);
  position: relative;
}
.glance-card:hover { background: var(--card-hover); }
.glance-card.dragging { opacity: 0.4; }
.glance-card.dragover { box-shadow: inset 0 0 0 2px var(--oura-1); }
.glance-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.glance-label { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.glance-value { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
.glance-value small { font-size: 13px; font-weight: 500; color: var(--text-dim); margin-left: 3px; }
.glance-delta { font-size: 11px; margin-top: 2px; }
.delta-up { color: var(--garmin-1); }
.delta-down { color: var(--warn-2); }
.delta-flat { color: var(--text-faint); }
.sparkline { margin-top: 8px; width: 100%; height: 34px; }
.sparkline polyline { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sparkline .spark-fill { opacity: 0.12; stroke: none; }

/* ── Charts ──────────────────────────────────────── */
.chart-card { margin-bottom: 18px; }
.chart-wrap { position: relative; height: 320px; }
.chart-wrap.tall { height: 380px; }
.range-btns, .metric-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.range-btn, .chip {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
}
.range-btn:hover, .chip:hover { color: var(--text); }
.range-btn.active, .chip.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(139, 124, 246, 0.35), rgba(34, 211, 238, 0.25));
  border-color: rgba(139, 124, 246, 0.5);
}

/* ── Activities ──────────────────────────────────── */
.activity-list { display: flex; flex-direction: column; gap: 10px; }
.month-label { font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 18px 0 4px; }
.activity-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.18s;
}
.activity-row:hover { background: var(--card-hover); transform: translateX(3px); }
.act-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.15), rgba(163, 230, 53, 0.08));
  border: 1px solid rgba(52, 211, 153, 0.2);
  flex-shrink: 0;
}
.act-main { flex: 1; min-width: 0; }
.act-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.act-stats { display: flex; gap: 22px; align-items: center; }
.act-stat { text-align: right; min-width: 60px; }
.act-stat b { display: block; font-size: 14px; font-weight: 700; }
.act-stat span { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; }

/* Activity detail modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 15, 0.75);
  backdrop-filter: blur(6px);
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  animation: fadein 0.2s;
}
.modal {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 22px;
  max-width: 860px;
  width: 100%;
  padding: 28px;
  position: relative;
}
.modal-close {
  position: absolute;
  /* centre the glyph explicitly rather than leaning on the button default, which
     any inherited padding can knock off-centre */
  display: flex; align-items: center; justify-content: center; padding: 0;
  top: 18px; right: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 32px; height: 32px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
}
.modal-close:hover { color: var(--text); }
/* page behind a modal must not scroll — the lock class is toggled from ui.js */
body.modal-open { overflow: hidden; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.stat-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  position: relative;
  /* uniform tiles: tallest label in the row no longer decides each tile's own
     height — every tile gets the two-line budget and aligns its value the same */
  min-height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stat-tile span { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.6px; display: block; padding-right: 26px; }
/* The source badge sits in the tile's corner rather than wrapping the label. Its
   inset has to track the tile's own padding or it reads as misaligned against the
   label beside it: right = the tile's padding-right, top = centred on the label's
   first line (padding-top + half the 12px line box, less half the 16px badge). */
.stat-tile span .badge { position: absolute; top: 10px; right: 14px; }
.stat-tile b { font-size: 17px; font-weight: 700; }

.zone-bars { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.zone-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.zone-bar-row .zlabel { width: 26px; color: var(--text-dim); font-weight: 600; }
.zone-bar-row .ztime { width: 52px; text-align: right; color: var(--text-dim); }
.zone-track { flex: 1; height: 14px; background: rgba(255, 255, 255, 0.04); border-radius: 7px; overflow: hidden; }
.zone-fill { height: 100%; border-radius: 7px; }

table.laps { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
table.laps th { text-align: right; color: var(--text-faint); font-weight: 600; padding: 6px 10px; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
table.laps td { text-align: right; padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
table.laps th:first-child, table.laps td:first-child { text-align: left; }

/* ── Calendar ────────────────────────────────────── */
.cal-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.cal-title { font-size: 18px; font-weight: 700; min-width: 170px; text-align: center; }
/* minmax(0,1fr) stops long chip text from stretching columns and misshaping the grid */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal-dow { text-align: center; font-size: 11px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; padding-bottom: 6px; }
.cal-cell {
  min-height: 92px;
  min-width: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-cell:hover { background: var(--card-hover); }
.cal-cell.other { opacity: 0.32; }
.cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--oura-1); }
.cal-daynum { font-size: 12px; font-weight: 600; color: var(--text-dim); display: flex; align-items: center; gap: 5px; }
.readiness-dot { width: 7px; height: 7px; border-radius: 50%; }
.cal-chip {
  font-size: 10px;
  padding: 2.5px 7px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  max-width: 100%;
  flex-shrink: 0;
}
.chip-activity { background: rgba(52, 211, 153, 0.14); color: #5ee0a8; }
.chip-event { background: rgba(139, 124, 246, 0.16); color: #a99df8; }

/* ── Targets ─────────────────────────────────────── */
/* Hypnogram — Oura-style stage bands. One row per stage, one block per 5-minute
   epoch, positioned by time across the night. */
.hypno-rows { display: flex; flex-direction: column; gap: 3px; }
.hypno-row { display: flex; align-items: center; gap: 10px; }
.hypno-label {
  flex: 0 0 44px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; text-align: right;
}
.hypno-track {
  position: relative; flex: 1; height: 26px;
  background: rgba(255, 255, 255, 0.03); border-radius: 5px; overflow: hidden;
}
.hypno-block { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.hypno-axis {
  position: relative; height: 16px; margin-left: 54px; margin-top: 6px;
  font-size: 9px; color: var(--text-faint);
}
.hypno-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* Metrics this setup can't supply: dimmed rather than removed, so the gap is visible
   and the badge shows which device would fill it. */
.chip-locked { opacity: 0.42; border-style: dashed; }
.chip-locked:hover { opacity: 0.7; }
.chip-lock { margin-right: 5px; font-size: 10px; filter: grayscale(1); }

/* Source key under the sidebar logo. Badges are the app's core vocabulary, so the
   legend sits where the eye lands first rather than at the bottom of the rail. */
.legend-key {
  display: block; width: 100%; text-align: left; cursor: pointer;
  margin: 0 0 18px; padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  border-radius: 12px; font-family: inherit;
}
.legend-key:hover { background: var(--card-hover); border-color: rgba(139, 124, 246, 0.35); }
.legend-key-title {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px;
}
.legend-key-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 4px; }
.legend-key-row > span {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-dim); white-space: nowrap;
}
.legend-key-row .badge { margin: 0; }

/* Guided connect steps on the Setup page */
.setup-steps { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 18px; }
.setup-step {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: rgba(255, 255, 255, 0.025); font-size: 13px; line-height: 1.65;
  color: var(--text-dim);
}
.setup-step b { color: var(--text); }
.step-n {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(139, 124, 246, 0.18); color: var(--oura-1);
  font-size: 12px; font-weight: 700; margin-top: 1px;
}
.step-link {
  display: inline-block; margin: 6px 8px 0 0; padding: 5px 12px;
  border: 1px solid rgba(139, 124, 246, 0.4); border-radius: 999px;
  color: var(--oura-1); text-decoration: none; font-size: 12px; font-weight: 600;
}
.step-link:hover { background: rgba(139, 124, 246, 0.12); }

/* ── Share modal ── */
.share-preview {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  display: flex; justify-content: center;
  max-height: 46vh; overflow: hidden;
}
/* the canvas is full-resolution (1080px wide); scale it down for preview only */
.share-preview canvas { max-width: 100%; max-height: 42vh; height: auto; border-radius: 8px; display: block; }
.share-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.share-seg { display: inline-flex; gap: 4px; }
.share-seg button {
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 12px; font-weight: 600; font-family: inherit;
}
.share-seg button.active {
  color: #fff; background: rgba(139, 124, 246, 0.28); border-color: rgba(139, 124, 246, 0.55);
}
.share-actions { display: flex; gap: 8px; margin-top: 14px; }
.share-actions .btn-primary { flex: 1; padding: 11px; }

/* Mobile-only metric dropdown; desktop uses the chip strip */
.metric-select-wrap { display: none; margin-bottom: 14px; }
.metric-select-wrap select { width: 100%; font-size: 15px; padding: 11px 12px; }

/* Same session recorded by two devices */
.dupe-chip {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px; vertical-align: middle;
  background: rgba(212, 166, 72, 0.14); border: 1px solid rgba(212, 166, 72, 0.4);
  color: var(--gold); white-space: nowrap; cursor: help;
}

/* Apple Health push-URL block */
.apple-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.lbl-mini { display: block; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.token-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.token-row input {
  flex: 1; min-width: 220px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--text-dim);
}
@media (max-width: 700px) { .token-row input { min-width: 100%; } }

/* Side-by-side "what each device actually gives you" comparison */
.src-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.src-col { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.src-col-head { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.src-col ul { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }
.src-col li b { color: var(--oura-1); font-weight: 600; }
.src-col li.src-missing { color: var(--text-faint); list-style: none; margin-left: -16px; }
.src-col li.src-missing::before { content: '✕ '; color: var(--warn-2); }
@media (max-width: 700px) { .src-compare { grid-template-columns: 1fr; } }

/* "Measured by …" provenance line at the top of a ring explainer */
.src-line {
  font-size: 13px; line-height: 1.6; color: var(--text-dim);
  background: rgba(139, 124, 246, 0.09);
  border: 1px solid rgba(139, 124, 246, 0.22);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 16px;
}
.src-line b { color: var(--text); }
/* the same line, in amber, when the number came from the fallback device rather
   than the one the user put first — a nudge, not an error */
.src-fallback {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.25);
  margin-top: -8px;
}

/* Sleep glance modal: proportional stage bar + legend */
.sleep-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.sleep-bar i { display: block; height: 100%; }
.sleep-legend { display: grid; gap: 6px; margin-top: 12px; }
.sleep-legend-row { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 10px; font-size: 13px; }
.sleep-legend-row i { width: 10px; height: 10px; border-radius: 3px; }
.sleep-legend-row .sl-name { color: var(--text); }
.sleep-legend-row .sl-time { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.sleep-legend-row .sl-pct { color: var(--text-faint); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* Bloods entry: numeric fields as a responsive grid, checkboxes as one aligned
   row — inline pairs inside a form-field column never lined up */
.bloods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.bloods-grid input { width: 100%; }
.check-row { display: flex; gap: 18px; flex-wrap: wrap; }
.check-row label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.check-row input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--oura-1); margin: 0; }

/* Health page age cards */
.age-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }

/* Range + shape controls live with the chart they act on */
.chart-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

/* ── Compare mode ───────────────────────────────────────────────────────── */
.compare-btn.active { border-color: rgba(139, 124, 246, 0.55); background: rgba(139, 124, 246, 0.16); color: var(--oura-1); }
.compare-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cmp-tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.cmp-tag i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cmp-tag b { color: var(--text-faint); font-weight: 700; }
.cmp-tag:hover b { color: var(--warn-2); }
/* picked chips carry their series colour; capped ones say "not until you drop one" */
.chip-picked { background: var(--card-hover); }
.chip-capped { opacity: 0.4; }

.corr-list { display: flex; flex-direction: column; gap: 12px; }
.corr-row {
  display: grid; grid-template-columns: minmax(0, 1.5fr) 90px auto; align-items: center;
  gap: 6px 12px; grid-template-areas: "pair bar r" "meta meta meta";
}
.corr-pair { grid-area: pair; font-size: 13px; font-weight: 600; min-width: 0; }
.corr-bar { grid-area: bar; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.corr-bar i { display: block; height: 100%; border-radius: 999px; }
.corr-r { grid-area: r; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.corr-meta { grid-area: meta; font-size: 11.5px; color: var(--text-faint); }
.corr-none { grid-area: r; font-size: 11.5px; color: var(--text-faint); }

/* Activity share row */
.share-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.share-btn {
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--border);
  color: var(--text); font-size: 12px; font-weight: 600; font-family: inherit;
}
.share-btn:hover { border-color: rgba(139, 124, 246, 0.45); background: var(--card-hover); }

/* In a page header the share control sits among ghost buttons and date pickers,
   where a plain outline disappears. A tint of the brand accent is enough to read
   as the one action in the row without competing with the page title. */
.dash-nav .share-btn {
  min-height: 34px; padding: 6px 14px;
  border-color: rgba(139, 124, 246, 0.42);
  background: rgba(139, 124, 246, 0.13);
  color: var(--oura-1);
}
.dash-nav .share-btn:hover { background: rgba(139, 124, 246, 0.22); border-color: rgba(139, 124, 246, 0.65); }
/* Activity modal: the image card is the point, the text links are secondary */
.share-row .share-btn[data-share="image"] {
  border-color: rgba(139, 124, 246, 0.42); background: rgba(139, 124, 246, 0.13); color: var(--oura-1);
}

.cmp-up { color: var(--garmin-1); font-weight: 600; }
.cmp-down { color: var(--warn-2); font-weight: 600; }

/* Compact dashboard strip — pills only, so it reads at a glance without crowding the rings */
.target-strip { margin-bottom: 18px; padding: 14px 16px; }
.tpill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tpill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font-size: 12px; line-height: 1.2;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--border);
  color: var(--text-dim); white-space: nowrap;
}
.tpill b { color: var(--text); font-variant-numeric: tabular-nums; }
.tpill.met { border-color: rgba(52, 211, 153, 0.4); color: var(--text); }
.tpill.met b { color: var(--garmin-1); }
.tpill-link { font-size: 11.5px; color: var(--text-faint); text-decoration: none; }
.tpill-link:hover { color: var(--oura-1); }

.target-list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.target-row {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
}
.target-info { width: 230px; min-width: 160px; }
.target-info b { display: block; font-size: 14px; }
.target-info span { font-size: 11px; color: var(--text-faint); }
.target-track { flex: 1; height: 10px; background: rgba(255, 255, 255, 0.05); border-radius: 5px; overflow: hidden; }
.target-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--oura-1), var(--oura-2)); transition: width 0.6s ease; }
.target-fill.met { background: linear-gradient(90deg, var(--garmin-1), var(--garmin-2)); }
.target-pct { width: 110px; text-align: right; font-size: 13px; font-weight: 600; }
.target-del { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 15px; padding: 4px; }
.target-del:hover { color: var(--warn-2); }

.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-field input, .form-field select { max-width: 100%; }
/* desktop sizing hints; on mobile every field goes full-width instead */
.ff-wide input { width: 200px; }
.ff-narrow input, .ff-narrow select { width: 100px; }
.form-field label { font-size: 11px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
input, select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
input:focus, select:focus { border-color: rgba(139, 124, 246, 0.5); }
select option { background: var(--bg-2); }
.btn-primary {
  background: linear-gradient(90deg, var(--oura-1), #6d5ef0);
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: filter 0.15s;
}
.btn-primary:hover { filter: brightness(1.15); }

.empty-note { color: var(--text-faint); font-size: 13px; padding: 30px; text-align: center; }
.note-inline { font-size: 11px; color: var(--text-faint); }

/* ── Responsive ──────────────────────────────────── */
/* ── Mobile: drawer navigation ────────────────────── */
.mobile-bar { display: none; }
.drawer-btn {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.drawer-btn svg { width: 22px; height: 22px; fill: currentColor; }

@media (max-width: 860px) {
  .app { flex-direction: column; }

  /* The drawer is already dense on a phone; the ⓘ button below carries the same detail */
  .legend-key { display: none; }

  /* Sleep page: the score ring and stage panel sit side by side on desktop, but the
     fixed-width first column squeezes the second one off-screen on a phone. */
  .sleep-grid { grid-template-columns: 1fr !important; }
  /* Contributor bars use a 150px label + 110px value, which won't fit at 375px */
  .contrib-label { width: 92px !important; font-size: 11px !important; }
  .contrib-val { width: 74px !important; }

  .mobile-bar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 45;
    padding: 8px 12px;
    padding-top: calc(8px + env(safe-area-inset-top));
    background: rgba(11, 15, 25, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
  }
  .mobile-bar .logo { margin: 0; font-size: 15px; }
  /* the top bar also carries the hamburger and the current view name — the parent
     brand stays in the drawer, where there is room for it */
  .mobile-bar .logo-by { display: none; }
  .mobile-view {
    margin-left: auto; font-size: 12px; font-weight: 600;
    color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.6px;
  }

  /* the sidebar becomes an off-canvas drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 254px; max-width: 82vw; height: 100dvh;
    flex-direction: column; align-items: stretch;
    padding: 20px 14px;
    padding-top: calc(20px + env(safe-area-inset-top));
    transform: translateX(-102%);
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    border-right: 1px solid var(--border);
    background: var(--bg-2);
  }
  body.drawer-open .sidebar { transform: translateX(0); }
  .drawer-scrim {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(5, 8, 15, 0.6); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity 0.24s;
  }
  body.drawer-open .drawer-scrim { opacity: 1; }
  nav { flex-direction: column; gap: 3px; }
  .nav-item { padding: 12px 14px; min-height: 46px; }
  .sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }

  .main {
    /* 60px here read as a black band under the last card on a phone, since the
       home-indicator inset stacks on top of it. 20px + the inset is enough. */
    padding: 16px 14px 20px;
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .act-stats { display: none; }

  /* comfortable touch targets */
  .btn-ghost, .btn-primary, .range-btn, .chip { min-height: 40px; padding-top: 9px; padding-bottom: 9px; }
  .chart-toggle button { width: 40px; height: 40px; }
  input, select, textarea { min-height: 42px; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
  /* The sheet scrolls internally; the page behind is locked (body.modal-open)
     so sliding a long modal no longer drags the background around. Slightly
     inset so it reads as a sheet rather than a second page. */
  .modal { padding: 20px 16px; border-radius: 18px; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; }
  .modal-backdrop { padding: 22px 12px; overflow-y: hidden; align-items: center; }
  /* comfortable thumb target */
  .modal-close { width: 42px; height: 42px; font-size: 19px; top: 12px; right: 12px; }
  /* ...which needs its own space: the bigger button was landing on the activity
     header's source badge. Reserve the corner rather than let content run under it.
     Excluding the close button itself is load-bearing — it is the modal's first
     <button>, so :first-of-type matched it too and gave a 42px-wide box 46px of
     right padding, shoving the ✕ off its own centre. That was the misshapen X. */
  .modal > *:first-of-type:not(.modal-close) { padding-right: 46px; }

  /* rings become compact squares — five across two rows instead of huge circles */
  .rings-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
  .ring-card { padding: 10px 6px 8px; border-radius: 14px; }
  .ring-card .ring-svg { width: 62px; height: 62px; margin-bottom: 4px; }
  .ring-label { font-size: 9.5px; letter-spacing: 0.3px; gap: 3px; }
  .ring-label .badge { width: 13px; height: 13px; font-size: 7.5px; border-radius: 4px; }
  .ring-sub { display: none; }

  .glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .glance-card { padding: 11px 12px 9px; }
  .glance-value { font-size: 21px; }
  .glance-label { font-size: 11px; }
  .glance-delta { font-size: 10px; }

  /* tighter type so more fits without scrolling */
  .page-title { font-size: 19px; }
  .page-sub { font-size: 12px; }
  .section-title { font-size: 11px; margin: 18px 0 10px; }
  #insight-morning .insight-body, #insight-evening .insight-body,
  #mo-text, .card [style*="font-size:13.5px"] { font-size: 12.5px !important; line-height: 1.55 !important; }
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .stat-tile { padding: 9px 11px; }
  .stat-tile b { font-size: 15px; }
  /* tighter padding here, so the badge inset and the label's reserved corner have
     to come in with it — otherwise the icons sit proud of the label's right edge */
  .stat-tile span .badge { top: 7px; right: 11px; }
  .stat-tile span { padding-right: 22px; }
  .cal-cell { min-height: 64px; padding: 5px; }
  .chart-wrap { height: 240px; }
  .chart-wrap.tall { height: 280px; }

  /* Compare on a phone: three lines need more height than one, and the correlation
     rows drop the fixed bar column so the pair name gets the full width. */
  .chart-wrap.tall.comparing { height: 320px; }
  .corr-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pair r" "bar bar" "meta meta"; gap: 5px 10px; }
  .corr-bar { width: 100%; }
  .compare-bar { gap: 6px; }
  .cmp-tag { font-size: 11.5px; padding: 5px 9px; }

  /* demo bar sits above the mobile bar */
  body.has-demo-bar .mobile-bar { top: 0; }
  .demo-bar { position: static; }

  /* declutter: methodology and citation blocks are desktop-only */
  .disclosure { display: none; }

  /* mobile is line-only (metrics.js forces line), so the shape toggle goes too */
  .chart-toggle { display: none; }

  /* Health age cards: two squares per row instead of a long single column */
  .age-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .age-grid .card { padding: 14px 12px; }

  /* The metric picker was ~700px tall as a wrapped grid, then a horizontal
     scroller that hid how many metrics existed. A grouped native dropdown shows
     the whole catalogue in one tap, with the platform's own scrolling. */
  .metric-btns { display: none; }
  .metric-select-wrap { display: block; }

  /* Forms (Targets, Bloods): stack fields full-width — fixed desktop widths
     clipped dropdown text and misaligned the row at phone sizes */
  .form-row { flex-direction: column; align-items: stretch; }
  .form-field { width: 100%; }
  .form-field input, .form-field select,
  .ff-wide input, .ff-narrow input, .ff-narrow select { width: 100%; }
  .form-row .btn-primary { width: 100%; margin-top: 4px; }
  .bloods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-row { gap: 12px 18px; }
}

/* Standalone (installed to the home screen): pad for the status bar and home indicator */
@media (display-mode: standalone) {
  .sidebar { padding-top: calc(10px + env(safe-area-inset-top)); }
  .demo-bar { padding-top: calc(8px + env(safe-area-inset-top)); }
}

/* ── Oura day activity ────────────────────────────────────────────────────────
   The 5-minute intensity strip and the time-breakdown bar. Both are proportional
   bars over a whole day, so they share a shape: the reader compares widths, not
   values, and the legend carries the numbers. */
.act-strip {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  margin: 8px 0 6px;
}
.act-strip i { display: block; height: 100%; }
.act-strip-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 11px; color: var(--text-faint);
}
.act-strip-legend span { display: inline-flex; align-items: center; gap: 5px; }
.act-strip-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
/* Not worn is drawn as a hatched gap rather than a colour — the ring was off, so
   there is no reading to shade. Same rule the charts use for a missing day. */
.act-nonwear {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 3px, transparent 3px 6px);
  border: 1px solid var(--border);
}

/* ── Daytime stress panel ─────────────────────────────────────────────────────
   Not a ring, deliberately. Oura publishes no stress score — it publishes two
   durations — so a ring here would have to show a number we invented, which is
   the one thing this product is supposed not to do. These are Oura's minutes. */
.stress-panel { margin-bottom: 18px; }
.stress-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.stress-verdict { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.stress-resilience { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.stress-resilience b { color: var(--text); text-transform: capitalize; }
.stress-bar {
  display: flex; height: 20px; border-radius: 6px; overflow: hidden;
  background: rgba(255, 255, 255, 0.04); margin-bottom: 8px;
}
.stress-bar i { display: block; height: 100%; }
.stress-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 12px; color: var(--text-dim); margin-bottom: 8px;
}
.stress-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stress-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* The other device's badge on a grouped session. Not a warning — both recordings
   are real and both are kept; this says which devices saw it, and the tooltip
   carries what the other one measured. Totals count the session once. */
.dupe-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; padding: 1px 6px 1px 5px; border-radius: 999px;
  vertical-align: middle; cursor: help;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-faint);
}