.health-dialog { width: min(620px, calc(100% - 24px)); max-height: 90dvh; padding: 22px; border: 1px solid #36505b; border-radius: 22px; background: #0c1821; color: #eef6f7; overflow-y: auto; }
.health-dialog::backdrop { background: rgb(0 0 0 / 75%); }
.health-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.health-dialog h2 { margin: 6px 0 18px; font-size: 26px; }
.health-dialog h3 { margin:24px 0 10px; }
.health-dialog button, .health-dialog summary, .health-dialog label { min-height:48px; }
.health-actions { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.health-actions button { flex:1; }
.health-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:12px; margin:20px 0; }
.health-card,.health-session { border:1px solid #304750; background:#10232d; border-radius:16px; padding:16px; }
.health-card strong { display:block; font-size:26px; margin:8px 0; color:#abefc2; }
.health-card small,.health-note,.health-session small { color:#bccbd0; line-height:1.5; }
.health-session { margin-bottom:10px; }
.health-session strong,.health-session span,.health-session small { display:block; margin-bottom:6px; }
.health-session p { font-size:14px; }
.health-dialog details { margin:18px 0; }
.health-dialog label { display:flex; align-items:center; gap:12px; }
.health-dialog input[type=checkbox] { width:22px; height:22px; }
.health-dialog [role=status] { line-height:1.5; min-height:48px; }
.health-dialog button:disabled { opacity:.55; }
.health-dialog .health-close { min-width:48px; font-size:24px; background:transparent; color:inherit; border:0; }
.primary-nav #healthButton { margin-left:auto; }
@media(max-width:420px) { .primary-nav { gap:8px; } .topbar-action { padding:10px; min-width:48px; } .brand-copy small { display:none; } .health-dialog { padding:16px; } }


/* Shared health surfaces: cards, SVG charts and a single detail dialog. */
.health-dialog { box-sizing:border-box; width:min(620px,calc(100% - 24px)); max-height:calc(100dvh - 24px); margin:auto; padding:0 20px 20px; overscroll-behaviour:contain; }
.health-dialog > header { position:sticky; top:0; z-index:2; background:#0c1821; padding:16px 0 8px; }
.health-dialog header > div { min-width:0; }
.health-dialog h2 { margin:4px 0 8px; }
.health-dialog .health-close { display:grid; place-items:center; width:48px; height:48px; border:1px solid #36505b; border-radius:14px; }
.health-dialog header form { flex-shrink:0; }
.health-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
button.health-card { min-width:0; text-align:left; color:#eef6f7; cursor:pointer; font:inherit; transition:border-color .15s; }
.health-card:hover { border-color:var(--metric-colour); }
.health-card:focus-visible,.health-dialog button:focus-visible,.home-health button:focus-visible { outline:3px solid #d2eeff; outline-offset:3px; }
.health-card-heading { display:flex; align-items:center; gap:8px; font-size:13px; }
.health-card-heading svg { width:22px; height:22px; flex-shrink:0; color:var(--metric-colour); }
.health-card-heading > span { margin-left:auto; }
.health-card strong { color:var(--metric-colour); font-size:clamp(20px,5vw,28px); overflow-wrap:anywhere; line-height:1.2; }
.health-card small { display:block; font-size:12px; margin-top:6px; }
.health-overview-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.health-overview-heading h2 { font-size:18px; margin:0; }
.health-overview-heading button { min-height:48px; background:transparent; color:#a9dfff; border:0; font:inherit; }
.home-health { margin:20px auto; width:100%; max-width:42rem; }
.home-health[hidden] { display:none; }
.home-health .health-cards { margin:8px 0; }
.home-health .health-card { padding:12px; }
.home-health .health-note { font-size:12px; }
.health-range { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0; }
.health-range button { min-height:48px; border:1px solid #36505b; border-radius:12px; background:#132530; color:#d2e1e6; font:inherit; }
.health-range [aria-pressed=true] { background:#b0e3f3; color:#09202c; font-weight:750; }
.health-detail-summary { padding:18px; background:#10232d; border:1px solid #304750; border-radius:16px; }
.health-detail-summary > strong { display:block; color:var(--metric-colour); font-size:36px; margin:8px 0; }
.health-detail-summary p { color:#bccbd0; margin:6px 0; font-size:13px; }
.health-chart { display:block; width:100%; height:auto; margin:16px 0; overflow:visible; }
.health-chart text { fill:#bccbd0; font-size:11px; }
.health-empty { padding:24px 12px; color:#bccbd0; line-height:1.5; }
.health-values { list-style:none; padding:0; }
.health-values li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:12px 0; border-bottom:1px solid #304750; font-size:14px; }
.health-customise-row { display:grid; grid-template-columns:minmax(0,1fr) 48px 48px; gap:8px; align-items:center; margin:8px 0; }
.health-customise-row label { min-width:0; font-size:14px; }
.health-customise-row button { width:48px; height:48px; background:#132530; color:#e2eff4; border:1px solid #36505b; border-radius:12px; font-size:22px; }
.health-dialog summary { display:flex; align-items:center; cursor:pointer; }
.health-actions button { min-width:0; white-space:normal; }
@media(max-width:360px) { .health-dialog {padding-inline:12px;} .health-card {padding:12px;} .health-card-heading {gap:4px;font-size:12px;} }
@media(max-width:320px) { .health-cards {grid-template-columns:minmax(0,1fr);} }
@media(prefers-reduced-motion:reduce) { .health-card {transition:none;} }