body[data-page="health"] {
  overflow-x: clip;
  touch-action: pan-y pinch-zoom;
  background:
    radial-gradient(circle at 8% 0%, rgba(217, 107, 59, 0.1), transparent 25%),
    radial-gradient(circle at 92% 8%, rgba(94, 122, 102, 0.12), transparent 24%),
    linear-gradient(180deg, #fffaf4 0%, #f4efe5 100%);
}

body[data-page="health"] .app-shell,
body[data-page="health"] .health-page,
body[data-page="health"] .health-page > *,
body[data-page="health"] .panel,
body[data-page="health"] section,
body[data-page="health"] article {
  min-width: 0;
  max-width: 100%;
}

.health-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
  width: min(760px, calc(100% - 0.75rem));
  overflow-x: clip;
}

.health-copy-en { display: inline; }
.health-copy-cs { display: none; }
html[lang^="cs"] .health-copy-en { display: none; }
html[lang^="cs"] .health-copy-cs { display: inline; }

/* Compact connection header */
.health-hero-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 0.7rem;
  border: 0;
  border-radius: 18px;
  color: #fffdf9;
  background: linear-gradient(135deg, #233127, #415747);
  box-shadow: 0 10px 24px rgba(35, 49, 39, 0.14);
  contain: inline-size;
}

.health-hero-panel::after {
  content: "";
  position: absolute;
  width: 9rem;
  height: 9rem;
  right: -3rem;
  top: -4.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 107, 59, 0.42), rgba(217, 107, 59, 0));
  pointer-events: none;
}

.health-hero-copy,
.health-hero-actions,
.health-hero-status {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.health-hero-copy .eyebrow,
.health-hero-copy .panel-note,
.health-assistant-link {
  display: none;
}

.health-hero-copy h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  line-height: 1;
}

.health-hero-actions {
  display: grid;
  justify-items: end;
  gap: 0.25rem;
}

.health-hero-actions .button-row {
  display: flex;
  width: auto;
}

.health-hero-actions #syncOuraButton,
.health-hero-actions #connectOuraButton {
  min-width: 6.25rem;
  min-height: 2.2rem;
  padding: 0.42rem 0.62rem;
  white-space: nowrap;
  font-size: 0.76rem;
}

.health-connection-strip {
  display: flex;
  justify-content: flex-end;
  max-width: 10.5rem;
  overflow: hidden;
}

.health-connection-item,
.health-connection-message {
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 0.68rem;
  line-height: 1.15;
  white-space: nowrap;
}

.health-connection-item span { color: rgba(255,255,255,.62); }
.health-connection-item:nth-child(2),
.health-connection-item:nth-child(3) { display: none; }

.health-connected-dot::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.28rem;
  border-radius: 50%;
  background: #77d795;
  box-shadow: 0 0 0 3px rgba(119,215,149,.12);
}

.health-hero-status.status {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0.15rem 0 0;
  padding: 0.58rem 0.65rem;
  border-radius: 11px;
  font-size: 0.76rem;
  line-height: 1.3;
  font-weight: 800;
}

.health-hero-status.status[data-tone="success"] { color:#153d28; background:#effcf3; border:1px solid #b8dfc5; }
.health-hero-status.status[data-tone="info"] { color:#16374a; background:#edf8ff; border:1px solid #b9dceb; }
.health-hero-status.status[data-tone="danger"] { color:#6d2522; background:#fff1ef; border:1px solid #efc1bd; }

/* Action first: one small heading + one recommendation card */
.health-coach-priority {
  padding: 0.72rem;
  border-radius: 18px;
  border-color: rgba(217,107,59,.16);
  background:
    radial-gradient(circle at 100% 0%, rgba(217,107,59,.16), transparent 35%),
    linear-gradient(145deg, #fffdf9, #fbf2e8);
  box-shadow: 0 10px 26px rgba(60,36,12,.09);
  contain: inline-size;
}

.health-coach-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}

.health-coach-heading > div { min-width: 0; }
.health-coach-heading .panel-note { display: none; }
.health-coach-heading .eyebrow { font-size: 0.65rem; }

.health-coach-heading h2 {
  margin: 0.05rem 0 0;
  font-family: var(--font-heading);
  font-size: 1.42rem;
  line-height: 1;
  overflow-wrap: anywhere;
}

.health-coach-heading .btn {
  flex: 0 0 auto;
  min-height: 2.15rem;
  padding: 0.38rem 0.55rem;
  color: var(--accent-deep);
  background: rgba(217,107,59,.1);
  border: 1px solid rgba(217,107,59,.16);
  font-size: 0.7rem;
}

.health-coach-card {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.75rem;
  border-radius: 14px;
  color: #fffdf9;
  background: #233127;
  box-shadow: 0 8px 20px rgba(35,49,39,.14);
  overflow: hidden;
}

.health-coach-card .eyebrow {
  margin: 0;
  color: #f3b184;
  font-size: 0.62rem;
}

.health-coach-card h3 {
  margin: 0;
  color: #fffdf9;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.health-coach-card > p:not(.eyebrow) {
  margin: 0;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.health-coach-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.12rem 0 0;
  padding: 0;
  list-style: none;
}

.health-coach-evidence li {
  max-width: 100%;
  padding: 0.28rem 0.42rem;
  border-radius: 999px;
  color: rgba(255,255,255,.84);
  background: rgba(255,255,255,.1);
  font-size: 0.64rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.health-coach-status.status {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  font-size: 0.73rem;
}

.health-coach-status[data-tone="success"] { display: none; }

/* Today at a glance: fixed grid, never horizontal scrolling */
.health-summary-section { min-width: 0; padding: 0.08rem 0; }

.health-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.health-section-heading h2 {
  margin: 0.08rem 0 0;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  line-height: 1;
}

.health-section-heading .panel-note {
  margin: 0;
  max-width: 48%;
  text-align: right;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.2;
}

.health-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  overflow: visible;
}

.health-stat-card {
  min-width: 0;
  min-height: 5.2rem;
  display: flex;
  flex-direction: column;
  padding: 0.58rem;
  border-radius: 14px;
  background: rgba(255,253,249,.94);
  border: 1px solid rgba(35,49,39,.08);
  box-shadow: 0 7px 18px rgba(60,36,12,.06);
  overflow: hidden;
}

.health-stat-card span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15;
}

.health-stat-card strong {
  margin-top: auto;
  font-family: var(--font-heading);
  font-size: 1.65rem;
  line-height: 1;
}

.health-stat-card strong .health-stat-unit {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 800;
}

.health-stat-card > small {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.15;
}

/* Trends are progressive disclosure on mobile */
.health-trends-details,
.health-daily-details {
  overflow: hidden;
  padding: 0;
  border-radius: 18px;
}

.health-trends-details > summary,
.health-daily-details > summary {
  list-style: none;
  cursor: pointer;
}

.health-trends-details > summary::-webkit-details-marker,
.health-daily-details > summary::-webkit-details-marker { display: none; }

.health-trends-summary,
.health-daily-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-height: 4rem;
  padding: 0.7rem 0.78rem;
}

.health-trends-summary h2,
.health-daily-summary h2 {
  margin: 0.08rem 0 0;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  line-height: 1.05;
}

.health-trends-summary-hint,
.health-daily-summary-hint {
  flex: 0 0 auto;
  color: var(--sage);
  font-size: 0.74rem;
  font-weight: 800;
}

.health-trends-details[open] > .health-trends-summary,
.health-daily-details[open] > .health-daily-summary {
  border-bottom: 1px solid var(--line);
}

.health-trends-body {
  display: grid;
  gap: 0.55rem;
  padding: 0.6rem;
  min-width: 0;
}

.health-filter-panel {
  display: grid;
  gap: 0.45rem;
  padding: 0.62rem;
  border-radius: 14px;
  box-shadow: none;
}

.health-filter-copy h2 { display: none; }
.health-filter-copy .eyebrow { font-size: 0.66rem; }

.health-quick-range {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0.35rem;
}

.health-quick-range .btn {
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.38rem 0.2rem;
  font-size: 0.72rem;
}

.health-range-details {
  border-top: 1px solid rgba(35,49,39,.08);
  padding-top: 0.38rem;
}

.health-range-details summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.9rem;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  font-size: 0.76rem;
  font-weight: 800;
}

.health-range-details summary::-webkit-details-marker { display:none; }
.health-range-details summary::before { content:"+"; color:var(--sage); }
.health-range-details[open] summary::before { content:"−"; }

.health-filter-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0.45rem;
  align-items: end;
  padding-top: 0.45rem;
}

.health-filter-form .field { gap: 0.25rem; min-width: 0; }
.health-filter-form .field span { font-size: 0.72rem; }
.health-filter-form input { min-width: 0; width:100%; min-height:2.6rem; padding:.5rem .55rem; }
.health-filter-form .btn { grid-column:1 / -1; min-height:2.5rem; }

.health-charts-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 0.55rem;
  min-width: 0;
}

.health-chart-wide { grid-column: auto; }

.health-chart-card,
.health-insights-panel {
  min-width: 0;
  width: 100%;
  padding: 0.68rem;
  border-radius: 14px;
  box-shadow: none;
}

.health-chart-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:.45rem;
  min-width:0;
  margin-bottom:.4rem;
}

.health-chart-heading > div { min-width:0; }
.health-chart-heading h2 { margin:.08rem 0 0; font-size:1.15rem; line-height:1.05; overflow-wrap:anywhere; }
.health-chart-heading .eyebrow { font-size:.62rem; }

.chart-legend {
  flex:0 1 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.25rem .4rem;
  color:var(--muted);
  font-size:.62rem;
  font-weight:700;
}

.chart-legend span { display:inline-flex; align-items:center; gap:.22rem; }
.chart-legend i { width:.5rem; height:.5rem; border-radius:50%; background:var(--legend-color); }

.health-chart,
.health-chart-empty {
  width:100%;
  min-width:0;
  min-height:9.2rem;
  overflow:hidden;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.25));
  border:1px solid rgba(35,49,39,.06);
}

.health-chart-svg {
  display:block;
  width:100%;
  max-width:100%;
  height:9.2rem;
  overflow:hidden;
}

.health-chart-empty { display:grid; place-items:center; padding:.75rem; color:var(--muted); text-align:center; font-size:.78rem; }
.chart-grid-line { stroke:rgba(35,49,39,.08); stroke-width:1; vector-effect:non-scaling-stroke; }
.chart-axis-label { fill:#778179; font-family:var(--font-body); font-size:12px; }
.chart-line { vector-effect:non-scaling-stroke; filter:drop-shadow(0 2px 3px rgba(35,49,39,.08)); }
.chart-dot { vector-effect:non-scaling-stroke; stroke:#fff; stroke-width:1.5; }

.health-insights-panel .panel-heading { margin-bottom:.45rem; }
.health-insight-card { position:relative; padding:.65rem .65rem .65rem .8rem; overflow:hidden; }
.health-insight-card::before { content:""; position:absolute; left:0; top:.15rem; bottom:.15rem; width:3px; border-radius:99px; background:linear-gradient(var(--accent),var(--sage)); }
.health-insight-card .panel-note { overflow-wrap:anywhere; }
#correlationWarning { margin-bottom:0; font-size:.72rem; line-height:1.3; }

.health-daily-details #healthDailyList { padding:0 .75rem .35rem; }
.health-daily-row { display:grid; gap:.45rem; padding:.65rem 0; border-bottom:1px solid var(--line); min-width:0; }
.health-daily-row:last-child { border-bottom:0; }
.health-daily-date,
.health-daily-energy,
.health-daily-recovery { display:grid; gap:.16rem; min-width:0; }
.health-daily-date span,
.health-daily-recovery span,
.health-daily-energy span { color:var(--muted); font-size:.72rem; }
.health-daily-energy { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; }
.health-daily-energy span { display:grid; gap:.06rem; }
.health-daily-energy strong { color:var(--ink); overflow-wrap:anywhere; }
.daily-balance-negative strong { color:var(--sage); }
.daily-balance-positive strong { color:var(--accent-deep); }

@media (min-width: 980px) {
  body[data-page="health"] { overflow-x: visible; touch-action:auto; }

  .health-page {
    width:min(1240px, calc(100% - 2rem));
    gap:1rem;
  }

  .health-hero-panel {
    grid-template-columns:minmax(0,1.25fr) minmax(20rem,.75fr);
    padding:1.15rem;
    border-radius:24px;
  }

  .health-hero-copy .eyebrow,
  .health-hero-copy .panel-note { display:block; }
  .health-hero-copy h1 { margin:.25rem 0 .4rem; font-size:2.7rem; }
  .health-assistant-link { display:inline-flex; }
  .health-hero-actions { justify-items:stretch; }
  .health-hero-actions .button-row { width:100%; }
  .health-hero-actions #syncOuraButton,
  .health-hero-actions #connectOuraButton { flex:1 1 auto; }
  .health-connection-strip { max-width:none; overflow:visible; display:grid; gap:.35rem; }
  .health-connection-item:nth-child(2),
  .health-connection-item:nth-child(3) { display:inline-flex; }

  .health-coach-priority { padding:1rem 1.1rem; }
  .health-coach-heading .panel-note { display:block; margin:.28rem 0 0; font-size:.82rem; }
  .health-coach-heading h2 { font-size:1.8rem; }
  .health-coach-card { padding:.95rem 1rem; }
  .health-coach-card h3 { font-size:1.8rem; }
  .health-coach-card > p:not(.eyebrow) { font-size:1rem; }

  .health-stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
  .health-stat-card { min-height:7.6rem; padding:.85rem; }
  .health-stat-card strong { font-size:2.2rem; }

  .health-trends-details,
  .health-daily-details { border-radius:24px; }
  .health-trends-summary,
  .health-daily-summary { min-height:4.6rem; padding:.9rem 1rem; }
  .health-trends-summary h2,
  .health-daily-summary h2 { font-size:1.45rem; }
  .health-trends-body { padding:.85rem; gap:.85rem; }
  .health-filter-panel { grid-template-columns:auto minmax(20rem,1fr) auto; align-items:center; padding:.85rem; }
  .health-filter-copy h2 { display:block; margin:.12rem 0 0; font-family:var(--font-heading); font-size:1.45rem; }
  .health-range-details { border-top:0; padding-top:0; }
  .health-filter-form { grid-template-columns:10rem 10rem auto; justify-content:end; }
  .health-filter-form .btn { grid-column:auto; }
  .health-charts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }
  .health-chart-wide { grid-column:1 / -1; }
  .health-chart-card,
  .health-insights-panel { padding:.9rem; border-radius:18px; }
  .health-chart,
  .health-chart-empty { min-height:13rem; }
  .health-chart-svg { height:13rem; }
  .health-daily-row { grid-template-columns:1fr 1.6fr 1.1fr; align-items:center; gap:.65rem; padding:.8rem 0; }
}

@media (max-width: 979px) {
  .health-page {
    width: min(100% - 1rem, 54rem);
    gap: 0.75rem;
  }

  .health-hero-panel,
  .health-coach-priority {
    padding: 0.85rem;
  }

  .health-hero-actions #syncOuraButton,
  .health-hero-actions #connectOuraButton,
  .health-coach-heading .btn,
  .health-quick-range .btn,
  .health-range-details summary,
  .health-filter-form .btn {
    min-height: 2.75rem;
  }

  .health-coach-heading .btn,
  .health-quick-range .btn {
    font-size: 0.76rem;
  }

  .health-trends-summary,
  .health-daily-summary {
    min-height: 4.25rem;
  }

  .health-stat-card {
    min-height: 6rem;
    padding: 0.7rem;
  }
}