/* WHOOP shares the Hub's landscape, typography and warm glass surfaces. */
[data-workspace="health"] .page-heading { margin-bottom: 1.5rem; }
.whoop-dashboard { --metric: #b2dba5; --whoop-muted: #b7bcb3; display: grid; gap: 22px; padding-top: 10px; }
.whoop-dashboard :is(h2,h3,p) { margin-top: 0; }
.whoop-dashboard button { -webkit-tap-highlight-color: transparent; }
.whoop-dashboard .whoop-glass { position: relative; min-width: 0; overflow: hidden; border: 1px solid #e9eed01d; border-top-color: #f0f4dc35; border-radius: 23px; background: linear-gradient(125deg,#52624a29,#202c2499 48%,#18231dc4); box-shadow: inset 0 1px 0 #ffffff06, 0 16px 60px #080d0a1a; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.whoop-toolbar, .whoop-account, .whoop-range-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.whoop-toolbar { justify-content: space-between; gap: 16px; }
.whoop-account { gap: 9px 16px; }
.whoop-account select { max-width: 230px; font-size: .8rem; background: #1b241ca8; border-radius: 9px; padding: .55rem 2rem .55rem .8rem; }
.whoop-connection-state { display: inline-flex; align-items: center; gap: 7px; color: var(--whoop-muted); font-size: .68rem; }
.whoop-connection-state i { width: 5px; height: 5px; border-radius: 50%; background: #a8d2a1; box-shadow: 0 0 10px #a8d2a165; }
.whoop-range { display: inline-flex; background: #101b1369; padding: 4px; border: 1px solid #e2ead81c; border-radius: 11px; }
.whoop-range button { border: 0; border-radius: 7px; font-size: .71rem; padding: .4rem .75rem; color: #a9b3a6; white-space: nowrap; }
.whoop-range button[aria-pressed="true"] { color: #f0ecdf; background: #d9e3ce17; box-shadow: 0 1px 4px #0002; }
.whoop-range-controls input[type="date"] { width: 136px; min-width: 0; padding: .55rem .6rem; font-size: .72rem; background: #14201755; border: 1px solid #dce5d621; border-radius: 9px; }
.whoop-refresh { border: 1px solid #dce5d621; border-radius: 9px; padding: .5rem .8rem; font-size: .85rem; color: #dfdacd; }
.whoop-refresh span { font-size: .71rem; margin-left: .25rem; }
.whoop-loading { margin: -6px 0; font-size: .75rem; color: #d2cfba; }
.whoop-dashboard .eyebrow { font-size: .6rem; letter-spacing: .17em; color: #b6c5ad; margin-bottom: 14px; }
.whoop-dashboard .whoop-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 25px; padding: 35px 38px; background: radial-gradient(ellipse at 78% 20%,#7d947536,transparent 57%),linear-gradient(135deg,#59674b35,#1a291dad); }
.whoop-hero h2 { font-size: clamp(3rem,4.8vw,4.5rem); letter-spacing: -.035em; line-height: .97; margin: 0 0 22px; }
.whoop-hero h2 em { font-weight: 400; color: #dedfc2; }
.whoop-selected-day { color: #e4e5d7; font-size: .82rem; margin-bottom: 10px; }
.whoop-hero-note { color: #b8beb0; font-size: .78rem; line-height: 1.7; margin-bottom: 22px; }
.whoop-sync-note { font-size: .62rem; color: #a3ac9d; display: inline-flex; gap: 12px; align-items: center; }
.whoop-sync-note > span { color: #c0cbb7; }
.whoop-rings { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.whoop-ring { position: relative; width: 31%; max-width: 150px; text-align: center; padding-bottom: 32px; min-width: 0; }
.whoop-ring svg { width: 100%; display: block; overflow: visible; transform: rotate(-90deg); }
.whoop-ring circle { fill: none; stroke-width: 3.5; }
.whoop-ring-track { stroke: #d8e1cb14; }
.whoop-ring .whoop-ring-value { stroke: var(--metric); stroke-linecap: round; filter: drop-shadow(0 0 7px color-mix(in srgb,var(--metric) 22%,transparent)); }
.whoop-ring-label { position: absolute; top: calc((100% - 32px)/2); left: 50%; transform: translate(-50%,-50%); display: grid; }
.whoop-ring-label strong { color: #f0eee1; font: 2.7rem/.95 var(--serif); letter-spacing: -.04em; }
.whoop-ring-label span { color: #aebba5; font-size: .65rem; margin-top: 7px; }
.whoop-ring p { position: absolute; bottom: 0; left: -10px; right: -10px; margin: 0; font-size: .66rem; color: #ccd3c2; white-space: nowrap; }
.whoop-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.whoop-dashboard .whoop-metric { display: block; border-radius: 16px; border: 1px solid #dfead31c; padding: 20px 21px 17px; text-align: left; background: linear-gradient(140deg,#33432d60,#1b271ea6); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px #ffffff05; transition: border-color .2s, background .2s; }
.whoop-dashboard .whoop-metric[aria-pressed="true"] { border-color: color-mix(in srgb,var(--metric) 50%,transparent); background: linear-gradient(135deg,color-mix(in srgb,var(--metric) 10%,#223022ab),#1b271eaa); }
.whoop-dashboard .whoop-metric:hover { border-color: var(--metric); background-color: #35422b44; }
.whoop-metric-title { display: flex; gap: 7px; align-items: center; color: #cbd2c5; font-size: .7rem; }
.whoop-metric-title i { width: 5px; height: 5px; background: var(--metric); border-radius: 50%; }
.whoop-metric-title b { margin-left: auto; color: #9eac97; font-size: .8rem; font-weight: 400; }
.whoop-metric-value { display: flex; align-items: baseline; gap: 8px; font: 2.8rem/1.2 var(--serif); letter-spacing: -.045em; color: #eeeede; margin-top: 12px; }
.whoop-metric-value small { font: .72rem var(--sans); letter-spacing: 0; color: #a7b2a0; }
.whoop-spark { width: 100%; height: 46px; display: block; margin: 11px 0 12px; overflow: visible; }
.whoop-spark path { fill: none; stroke: var(--metric); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.whoop-spark circle { fill: var(--metric); }
.whoop-spark-empty { height: 69px; display: flex; align-items: center; color: #a2ae9b; font-size: .66rem; }
.whoop-metric-note { font-size: .63rem; color: #d6d9cc; }
.whoop-metric-note > span { color: #a0ac97; margin-left: 4px; }
.whoop-trends { padding: 28px 30px 22px; }
.whoop-section-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.whoop-section-top h2 { font-size: 2rem; letter-spacing: -.02em; margin-bottom: 7px; }
.whoop-section-top .eyebrow { margin-bottom: 10px; }
.whoop-heading-unit { font: .8rem var(--sans); color: #aab6a3; letter-spacing: 0; margin-left: 12px; }
.whoop-dashboard .whoop-caption { font-size: .65rem; color: #a5b09d; line-height: 1.6; margin-bottom: 0; }
.whoop-chart-readout { display: grid; text-align: right; min-width: 110px; padding-top: 7px; }
.whoop-chart-readout strong { font: 2.5rem/1.1 var(--serif); color: var(--metric); }
.whoop-chart-readout small { font: .7rem var(--sans); margin-left: 7px; }
.whoop-chart-readout > span { font-size: .65rem; color: #b5bfae; margin-top: 7px; }
.whoop-chart-wrap { margin: 28px -6px 0 -13px; }
.whoop-main-chart { display: block; width: 100%; height: 270px; overflow: visible; cursor: crosshair; touch-action: pan-y; }
.whoop-chart-line { fill: none; stroke: var(--metric); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 5px color-mix(in srgb,var(--metric) 16%,transparent)); }
.whoop-chart-point { fill: var(--metric); opacity: .8; }
.whoop-gridline { stroke: #c2d3b315; stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.whoop-axis-label { font: 11px var(--sans); fill: #b0bbaa; }
.whoop-crosshair { stroke: #d3deca5e; stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.whoop-chart-selected { fill: var(--metric); stroke: #23321f; stroke-width: 3; vector-effect: non-scaling-stroke; }
.whoop-chart-footer { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-top: 4px; border-top: 1px solid #d6e2c916; padding-top: 18px; }
.whoop-explore { display: grid; flex: 1; max-width: 470px; min-width: 0; gap: 8px; }
.whoop-explore > span { display: flex; justify-content: space-between; color: #aeb8a7; font-size: .66rem; }
.whoop-explore b { color: #d3dccc; font-weight: 400; }
.whoop-explore input { cursor: pointer; width: 100%; padding: 0; height: 17px; accent-color: var(--metric); background: transparent; border: 0; }
.whoop-chart-footer > p { font-size: .62rem; color: #a3af9b; margin: 0; line-height: 1.6; text-align: right; }
.whoop-chart-empty { display: grid; align-content: center; justify-items: center; text-align: center; min-height: 250px; }
.whoop-chart-empty > span { font: 4rem var(--serif); color: #b7c6aa; line-height: 1; }
.whoop-chart-empty h3 { font: 1.6rem var(--serif); color: #dce1d1; margin: 14px 0 7px; }
.whoop-chart-empty p { font-size: .76rem; max-width: 380px; }
.whoop-detail-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 20px; }
.whoop-sleep-panel,.whoop-rhythm-panel { padding: 27px 28px; }
.whoop-detail-grid h2 { font-size: 1.8rem; }
.whoop-pill { color: #c5cfbc; font-size: .6rem; padding: 4px 9px; border: 1px solid #d7e4c421; border-radius: 30px; white-space: nowrap; }
.whoop-sleep-total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 19px 0 23px; }
.whoop-sleep-total > strong { font: 2.6rem/1 var(--serif); letter-spacing: -.03em; color: #dedbea; }
.whoop-sleep-total > span { color: #b0b9a6; font-size: .66rem; }
.whoop-sleep-total b { font-weight: 400; padding: 0 4px; }
.whoop-sleep-bar { display: flex; gap: 3px; overflow: hidden; height: 25px; border-radius: 5px; background: #ffffff03; }
.whoop-sleep-bar span { opacity: .9; min-width: 0; }
.whoop-stage-key { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 16px; gap: 8px; }
.whoop-stage-key > div { display: grid; gap: 5px; }
.whoop-stage-key span { display: flex; align-items: center; gap: 6px; font-size: .6rem; color: #aab4a1; }
.whoop-stage-key i { width: 5px; height: 5px; border-radius: 50%; }
.whoop-stage-key strong { font-weight: 400; font-size: .75rem; color: #d3d8c8; }
.whoop-sleep-stats { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 10px; border-top: 1px solid #d6e2c917; margin: 23px 0 18px; padding-top: 19px; }
.whoop-sleep-stats > div { display: grid; gap: 5px; }
.whoop-sleep-stats strong { font: 1.5rem var(--serif); }
.whoop-sleep-stats small { font: .64rem var(--sans); color: #aeb9a4; margin-left: 3px; }
.whoop-sleep-stats span { color: #a3af99; font-size: .58rem; }
.whoop-vitals { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 21px 0 28px; }
.whoop-vitals button { text-align: left; border: 0; border-left: 1px solid #d7e4c426; padding: 0 0 0 13px; }
.whoop-vitals button > span { font-size: .62rem; color: #b0bbaa; display: flex; align-items: center; gap: 10px; }
.whoop-vitals b { font-weight: 400; color: var(--metric); }
.whoop-vitals strong { font: 2.1rem var(--serif); display: block; color: #e1e4d6; margin-top: 6px; }
.whoop-vitals small { font: .65rem var(--sans); color: #a2b19c; }
.whoop-week-heading { display: flex; justify-content: space-between; gap: 10px; font-size: .58rem; color: #a8b59e; margin-bottom: 11px; }
.whoop-week { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; margin-bottom: 21px; }
.whoop-week .whoop-day { display: grid; justify-items: center; gap: 7px; border: 1px solid #bcd6a912; border-radius: 8px; padding: 8px 1px; font-size: .57rem; color: #a6b39d; background: #ffffff03; }
.whoop-day strong { font: 1.25rem var(--serif); }
.whoop-day.green strong { color: #b2dba5; }.whoop-day.amber strong { color: #e2c87d; }.whoop-day.rose strong { color: #dfa4a5; }
.whoop-day[aria-pressed="true"] { border-color: #c9d6ba70; background: #c9d6ba0f; }
.whoop-day small { font-size: .52rem; opacity: .7; }
.whoop-workout-section { padding-top: 13px; }
.whoop-source-link { color: #cdd7ba; font-size: .7rem; margin-top: 23px; white-space: nowrap; }
.whoop-workout-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.whoop-workout { padding: 22px; min-width: 0; border: 1px solid #d3e1c417; border-radius: 15px; background: linear-gradient(140deg,#37432c33,#18251c88); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
.whoop-workout-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .6rem; color: #aebb9f; }
.whoop-workout-icon { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #deccb229; border-radius: 50%; font-size: 1rem; color: #e3c7a8; }
.whoop-workout h3 { font: 1.6rem var(--serif); margin: 15px 0 17px; text-transform: capitalize; overflow-wrap: anywhere; }
.whoop-workout-numbers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-bottom: 17px; }
.whoop-workout-numbers strong { font: 1.65rem var(--serif); color: #e0e1d1; }
.whoop-workout-numbers span { display: block; color: #a4b29a; font: .57rem var(--sans); margin-top: 4px; }
.whoop-zone-bar { display: flex; height: 5px; overflow: hidden; border-radius: 3px; margin-bottom: 9px; }
.whoop-zone-bar span { background: color-mix(in srgb,#94bda0 calc(100% - var(--zone)*18%),#e9b488); }
.whoop-workout .whoop-caption { font-size: .57rem; }
.whoop-more-workouts { margin-top: 20px; }
.whoop-more-workouts summary { color: #c1ceb3; font-size: .74rem; }
.whoop-quiet-empty { padding: 23px 0; font-size: .78rem; color: #b5beac; }
.whoop-values { margin: 0; border-color: #d6e2c91c; }
.whoop-values summary { font-size: .75rem; color: #ccd5c1; }
.whoop-values summary > span { float: right; font-size: .62rem; color: #97a48e; }
.whoop-values table { min-width: 700px; }
.whoop-footer-note { text-align: center; font-size: .6rem; color: #95a28c; line-height: 1.9; margin: 0; }
@media(min-width:1600px) { .whoop-hero { min-height: 325px; }.whoop-ring { max-width: 170px; } }
@media(max-width:1200px) { .whoop-dashboard .whoop-hero { padding: 30px; gap: 14px; }.whoop-rings { gap: 9px; }.whoop-ring-label strong { font-size: 2.2rem; }.whoop-dashboard .whoop-metric { padding: 18px 15px; }.whoop-metric-note > span { display: block; margin-left: 0; }.whoop-detail-grid { grid-template-columns: 1fr; }.whoop-workout { padding: 17px; } }
@media(max-width:900px) { .whoop-dashboard .whoop-hero { grid-template-columns: 1fr; padding: 29px; }.whoop-hero-copy { display: grid; grid-template-columns: 1fr 1fr; column-gap: 15px; }.whoop-hero-copy .eyebrow,.whoop-hero h2 { grid-column: 1; }.whoop-hero h2 { grid-row: 2 / 5; font-size: 3.3rem; margin-bottom: 0; }.whoop-selected-day { grid-column: 2; grid-row: 2; }.whoop-hero-note { grid-column: 2; grid-row: 3; font-size: .7rem; }.whoop-sync-note { grid-column: 2; grid-row: 4; }.whoop-rings { max-width: 430px; width: 100%; justify-self: center; margin-top: 18px; }.whoop-metrics { grid-template-columns: 1fr 1fr; }.whoop-metric-note > span { display: inline; margin-left: 4px; }.whoop-workout-grid { grid-template-columns: 1fr 1fr; }.whoop-chart-footer > p { max-width: 135px; } }
@media(max-width:540px) { .whoop-dashboard { gap: 16px; }.whoop-toolbar { gap: 13px; }.whoop-account { width: 100%; justify-content: space-between; }.whoop-account select { max-width: 172px; }.whoop-connection-state { font-size: .59rem; }.whoop-range-controls { width: 100%; gap: 8px; justify-content: space-between; }.whoop-range button { padding: .4rem .55rem; font-size: .66rem; }.whoop-range-controls input[type="date"] { width: 116px; padding: .5rem .35rem; font-size: .65rem; }.whoop-refresh { padding: .5rem .65rem; }.whoop-refresh span { display: none; }.whoop-dashboard .whoop-hero { padding: 25px 22px; border-radius: 19px; }.whoop-hero-copy { display: block; }.whoop-hero h2 { font-size: 3.65rem; margin-bottom: 18px; }.whoop-hero-note { font-size: .75rem; margin-bottom: 14px; }.whoop-selected-day { font-size: .77rem; }.whoop-rings { margin-top: 13px; }.whoop-ring-label strong { font-size: 2rem; }.whoop-ring-label span { font-size: .55rem; margin-top: 4px; }.whoop-ring p { font-size: .57rem; }.whoop-dashboard .whoop-metric { padding: 16px 15px 13px; border-radius: 13px; }.whoop-metric-value { font-size: 2.6rem; }.whoop-metric-title { font-size: .67rem; }.whoop-metric-note { font-size: .58rem; }.whoop-metric-note > span { display: block; margin-left: 0; }.whoop-trends { padding: 23px 20px 20px; border-radius: 18px; }.whoop-section-top h2 { font-size: 1.8rem; }.whoop-section-top .eyebrow { font-size: .52rem; }.whoop-heading-unit { font-size: .65rem; margin-left: 7px; }.whoop-chart-readout { min-width: 70px; }.whoop-chart-readout strong { font-size: 2rem; }.whoop-chart-readout small { font-size: .62rem; }.whoop-chart-readout > span { font-size: .56rem; }.whoop-chart-wrap { margin: 22px -8px 0 -20px; }.whoop-main-chart { height: 230px; }.whoop-axis-label { font-size: 22px; }.whoop-chart-footer { display: block; }.whoop-chart-footer > p { text-align: left; max-width: none; font-size: .57rem; margin-top: 10px; }.whoop-chart-footer > p br { display: none; }.whoop-sleep-panel,.whoop-rhythm-panel { padding: 23px 20px; }.whoop-detail-grid h2 { font-size: 1.75rem; }.whoop-sleep-stats { grid-template-columns: 1fr 1fr 1.2fr; }.whoop-sleep-stats strong { font-size: 1.35rem; }.whoop-sleep-stats span { font-size: .55rem; }.whoop-sleep-total { gap: 9px; }.whoop-sleep-total > strong { font-size: 2.3rem; }.whoop-vitals { gap: 8px; }.whoop-vitals button { padding-left: 10px; }.whoop-vitals button > span { font-size: .59rem; }.whoop-week { gap: 4px; }.whoop-day strong { font-size: 1.15rem; }.whoop-workout-grid { grid-template-columns: 1fr; }.whoop-workout-section > .whoop-section-top { flex-wrap: wrap; gap: 0; }.whoop-source-link { margin-top: 0; }.whoop-workout { padding: 21px; }.whoop-workout-numbers strong { font-size: 1.9rem; }.whoop-values summary > span { display: block; float: none; margin: 6px 0 0 15px; }.whoop-footer-note { font-size: .55rem; } }
@media(max-width:360px) { .whoop-connection-state { width: 100%; }.whoop-range-controls { gap: 7px; }.whoop-range-controls input[type="date"] { width: 111px; }.whoop-refresh { padding: .4rem; }.whoop-range button { padding: .35rem .4rem; }.whoop-ring p { font-size: .5rem; }.whoop-ring-label strong { font-size: 1.7rem; }.whoop-sleep-stats { gap: 5px; }.whoop-sleep-stats strong { font-size: 1.2rem; } }
@media(prefers-reduced-motion:reduce) { .whoop-dashboard * { transition: none!important; } }
.motion-off .whoop-dashboard * { transition: none!important; }
.whoop-dashboard { grid-template-columns: minmax(0,1fr); min-width: 0; }
.whoop-dashboard > * { min-width: 0; }
.whoop-values .hub-table-scroll { max-width: 100%; overflow-x: auto; }
/* Axis labels stay in HTML so SVG scaling never squeezes their typography. */
.whoop-plot { position: relative; }
.whoop-axis-y { position: absolute; inset: 0 auto 0 0; width: calc(5.333% - 7px); pointer-events: none; }
.whoop-axis-y span { position: absolute; right: 0; transform: translateY(-50%); color: #b0bbaa; font-size: .62rem; line-height: 1; font-variant-numeric: tabular-nums; }
.whoop-axis-x { position: absolute; left: 5.333%; right: 2.889%; bottom: 2.5%; display: flex; justify-content: space-between; gap: 8px; color: #b0bbaa; font-size: .62rem; pointer-events: none; }
@media(max-width:540px) { .whoop-chart-wrap { margin-left: 0; margin-right: 0; }.whoop-axis-y { width: calc(5.333% - 5px); }.whoop-axis-y span,.whoop-axis-x { font-size: .56rem; }.whoop-main-chart { height: 220px; } }

/* Keep the selected day's useful metrics without a promotional hero. */
.whoop-dashboard .whoop-hero.is-action-first{min-height:0;padding:18px 22px;gap:14px 24px;grid-template-columns:minmax(160px,.7fr) minmax(0,1fr)}
.whoop-hero.is-action-first .whoop-hero-copy{display:block}
.whoop-hero.is-action-first h2{font:1.7rem/1.1 var(--serif);margin:0 0 8px}
.whoop-hero.is-action-first .whoop-selected-day{font-size:.78rem;margin:0 0 8px}
.whoop-hero.is-action-first .whoop-rings{gap:10px}
.whoop-hero.is-action-first .whoop-ring{max-width:100px;justify-self:center}
.whoop-hero.is-action-first .whoop-ring-label strong{font-size:1.9rem}
.whoop-hero.is-action-first .whoop-ring p{font-size:.65rem}
@media(max-width:720px){.whoop-dashboard .whoop-hero.is-action-first{padding:16px;grid-template-columns:1fr;gap:14px}.whoop-hero.is-action-first .whoop-rings{width:100%;max-width:420px;margin:0 auto}}

[data-workspace="health"] .health-source-tabs{gap:.5rem;margin:0 0 1rem;padding:0 0 .75rem}
[data-workspace="health"] .health-source-tabs button{min-width:0;padding:.55rem .9rem;font:.8rem var(--sans);min-height:38px}
[data-workspace="health"] .health-source-tabs a{font-size:.75rem}