/* Раздел «Здоровье» (WHOOP). Цвета — роли; наборы проверены валидатором палитр (dataviz)
   на фонах карточек дашборда: светлая #ffffff, тёмная #172033. Текст всегда в цветах текста, не данных. */
.wh {
  --wh-accent: #2563eb; --wh-s2: #eb6834; --wh-track: rgba(37, 99, 235, .14); --wh-axis: #c3cad8;
  /* уровни (зелёный → жёлтый → оранжевый → красный) проверены validate_palette.js: все пары различимы
     и при обычном, и при цветовом зрении; цвет всегда идёт с подписью уровня */
  --wh-good: #0fa27d; --wh-warn: #f3c614; --wh-serious: #f07c1e; --wh-crit: #c22a2a; --wh-neutral: #9aa3b5;
  --wh-s-deep: #2563eb; --wh-s-rem: #eb6834; --wh-s-light: #1baf7a; --wh-s-awake: #eda100;
  --wh-z1: #86b6ef; --wh-z2: #5598e7; --wh-z3: #2a78d6; --wh-z4: #1c5cab; --wh-z5: #104281;
  --wh-up: #006300; --wh-down: #c0392b; --wh-pos: #2563eb; --wh-neg: #e34948;
}
:root[data-theme="dark"] .wh {
  --wh-good: #14a38a; --wh-warn: #f6d428; --wh-serious: #f4882a; --wh-crit: #e92048;
  --wh-accent: #3987e5; --wh-s2: #d95926; --wh-track: rgba(57, 135, 229, .22); --wh-axis: #3a4767; --wh-neutral: #5d6b88;
  --wh-s-deep: #3987e5; --wh-s-rem: #d95926; --wh-s-light: #199e70; --wh-s-awake: #c98500;
  --wh-z1: #184f95; --wh-z2: #256abf; --wh-z3: #3987e5; --wh-z4: #6da7ec; --wh-z5: #9ec5f4;
  --wh-up: #0ca30c; --wh-down: #f87171; --wh-pos: #3987e5; --wh-neg: #e66767;
}
.wh { transition: opacity .2s; }
.wh.wh-busy { opacity: .6; }
.wh .h3 { margin: 0; }
.wh button { font: inherit; color: inherit; }
.wh-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; }
.wh-small { font-size: 12.5px; margin: 8px 0 0; }
.wh-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px 2px 6px; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.wh-status .icon-btn { flex: none; }
.wh-note .btn { margin-top: 10px; }
.wh-head { margin: 4px 0 -6px; }

/* пульс сейчас */
.wh-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 10px; margin-top: 0; padding: 12px 12px 12px 16px; }
.wh-nowh { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; font-weight: 600; padding-top: 4px; }
.wh-nowh .i { width: 18px; height: 18px; color: var(--wh-neutral); }
.wh-now.fresh .wh-nowh .i { color: var(--wh-crit); animation: wh-beat var(--beat, 1s) ease-in-out infinite; }
.wh-now > .icon-btn { grid-column: 2; grid-row: 1 / 3; background: var(--bg); box-shadow: none; }
.wh-nowv { display: flex; align-items: baseline; gap: 6px; font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.wh-nowv small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.wh-now:not(.fresh) .wh-nowv { color: var(--muted); }
.wh-nows { grid-column: 1 / -1; color: var(--muted); font-size: 13px; margin-top: 2px; }
.wh-nowwarn { grid-column: 1 / -1; margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--wh-warn) 18%, transparent); font-size: 13.5px; line-height: 1.4; }
@keyframes wh-beat { 0%, 45%, 100% { transform: scale(1); } 12% { transform: scale(1.2); } 26% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .wh-now.fresh .wh-nowh .i { animation: none; } }

/* навигация по дням */
.wh-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--card); border-radius: 18px; padding: 6px; box-shadow: var(--shadow); }
.wh-nav .icon-btn[disabled] { opacity: .35; }
.wh-fwd svg { transform: rotate(180deg); }
.wh-navd { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.wh-navd b { font-size: 15.5px; }
.wh-src { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 1px 8px; }
.wh-src.own { color: var(--wh-accent); }
.wh-link { display: block; margin: 6px auto 0; border: 0; background: none; color: var(--blue); font-size: 13.5px; padding: 4px 8px; }

/* кольца */
.wh-hero { padding: 14px 8px 14px; }
/* middle column never narrower than «Восстановление ›» on one line; rings top-aligned (a button centres its content) */
.wh-meters { display: grid; grid-template-columns: 1fr minmax(min-content, 1fr) 1fr; align-items: start; gap: 2px; }
.wh-meter { border: 0; background: none; padding: 4px 2px; text-align: center; min-width: 0; border-radius: 16px; cursor: pointer; }
.wh-meter[tabindex="-1"] { cursor: default; }
.wh-meter[data-go]:active { background: var(--bg); }
.wh-ring { position: relative; width: min(100%, 100px, 26vw); aspect-ratio: 1; margin: 0 auto 6px; }
@media (max-width: 349px) { .wh-meters .wh-ring { width: min(100%, 21vw); } } /* very narrow: side columns are ~21vw */
.wh-meter.big { display: block; margin: 0 auto 10px; }
.wh-meter.big .wh-ring { width: 170px; }
.wh-meter.big .wh-rc { font-size: 40px; }
.wh-meter.big .wh-ml { font-size: 15px; }
.wh-ring svg { width: 100%; height: 100%; display: block; }
.wh-ring circle { fill: none; stroke-width: 12; }
.wh .lv-4 { --ring: var(--wh-good); } .wh .lv-3 { --ring: var(--wh-warn); } .wh .lv-2 { --ring: var(--wh-serious); } .wh .lv-1 { --ring: var(--wh-crit); }
.wh-trk { stroke: color-mix(in srgb, var(--ring, var(--wh-accent)) 18%, transparent); }
.wh-val { stroke: var(--ring, var(--wh-accent)); stroke-linecap: round; }
.wh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: var(--ring); }
.wh-rc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.wh-rc small { font-size: .55em; font-weight: 600; margin-left: 1px; }
.wh-ml { font-weight: 600; font-size: clamp(13px, 3.6vw, 14px); white-space: nowrap; }
.wh-ms { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.wh-meter.lv-none .wh-trk { stroke: var(--line); }
[class^="wh-dot-"] { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.wh-dot-g { background: var(--wh-good); } .wh-dot-y { background: var(--wh-warn); } .wh-dot-r { background: var(--wh-crit); }

/* активности */
.wh-act { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px; width: 100%; border: 0; background: var(--bg); border-radius: 14px; padding: 8px; margin-top: 8px; text-align: left; cursor: pointer; }
.wh-actv { display: inline-grid; place-items: center; min-width: 46px; height: 30px; padding: 0 6px; border-radius: 9px; background: var(--wh-accent); color: #fff; font-weight: 700; font-size: 14px; box-sizing: border-box; }
.wh-actv.sleep { background: #6b8fb3; }
.wh-actn { font-weight: 600; }
.wh-actt { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* плитки показателей */
.wh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.wh-tile { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; border: 0; background: var(--card); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow); min-width: 0; cursor: pointer; }
.wh-tl { color: var(--muted); font-size: 13px; }
.wh-tv { font-size: 23px; font-weight: 700; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.wh-tv small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.wh-ta { font-size: 12.5px; color: var(--muted); }
.wh-ar { font-style: normal; font-size: 11px; color: var(--muted); }
.wh-ar.good { color: var(--wh-up); } .wh-ar.bad { color: var(--wh-down); }
@media (min-width: 560px) { .wh-tiles { grid-template-columns: repeat(4, 1fr); } }

/* составляющие на страницах */
.wh-big { padding-top: 18px; }
.wh-cr { display: grid; grid-template-columns: minmax(0, 1fr) 70px 48px 82px; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.wh-cn { min-width: 0; }
.wh-cbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.wh-cbar i { display: block; height: 100%; border-radius: 3px; }
.wh-cr b { text-align: right; font-variant-numeric: tabular-nums; }
.wh-cr em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.wh .wh-ok, .wh .lvl-ok { background: var(--wh-good); } .wh .wh-mid, .wh .lvl-mid { background: var(--wh-warn); } .wh .wh-low, .wh .lvl-low { background: var(--wh-serious); }
.wh-lvls { margin-top: 8px; }
.wh-cv { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; width: 100%; border: 0; border-top: 1px solid var(--line); background: none; padding: 10px 0; text-align: left; cursor: pointer; }
.wh-cv span { grid-row: 1 / 3; align-self: center; font-size: 14px; }
.wh-cv b { justify-self: end; font-size: 18px; display: flex; align-items: baseline; gap: 4px; }
.wh-cv b small { font-size: 12px; font-weight: 500; color: var(--muted); }
.wh-cv em { justify-self: end; font-style: normal; color: var(--muted); font-size: 12px; }
.wh-strtext { margin: 12px 0 0; font-size: 14px; line-height: 1.45; }

/* сон */
.wh-big2 { font-size: 28px; font-weight: 700; margin: 8px 0 2px; display: flex; align-items: baseline; gap: 8px; }
.wh-sts { margin-top: 12px; }
.wh-st { margin-top: 10px; font-size: 14px; }
.wh-st em { font-style: normal; color: var(--muted); font-size: 12.5px; margin-left: 4px; }
.wh-st b { font-variant-numeric: tabular-nums; }
.wh-stbar { position: relative; height: 10px; border-radius: 5px; background: var(--line); margin-top: 4px; overflow: hidden; }
.wh-stbar i { position: absolute; left: 0; top: 2px; bottom: 2px; border-radius: 3px; }
.wh-typ { position: absolute; top: 0; bottom: 0; background: var(--wh-neutral); opacity: .45; }
.wh-typk { display: inline-block; width: 18px; height: 8px; border-radius: 3px; background: var(--wh-neutral); opacity: .45; vertical-align: 0; margin-right: 4px; }
.wh-restor { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.wh-restor .wh-k { margin-right: 3px; }
.wh-restor b { white-space: nowrap; }
.wh-need { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 8px; }
.wh-need div { background: var(--bg); border-radius: 12px; padding: 8px 10px; }
.wh-need span { display: block; font-size: 12.5px; color: var(--muted); }
.wh-need b { font-size: 20px; }
.wh-needl { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.wh-needl li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); }
.wh-stack { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; margin: 12px 0 8px; }
.wh-stack i { display: block; min-width: 2px; }
.wh-stack .rec-g { background: var(--wh-good); } .wh-stack .rec-y { background: var(--wh-warn); } .wh-stack .rec-r { background: var(--wh-crit); }
.wh .st-deep { background: var(--wh-s-deep); fill: var(--wh-s-deep); }
.wh .st-rem { background: var(--wh-s-rem); fill: var(--wh-s-rem); }
.wh .st-light { background: var(--wh-s-light); fill: var(--wh-s-light); }
.wh .st-awake { background: var(--wh-s-awake); fill: var(--wh-s-awake); }
.wh-k { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.wh-kl { height: 3px; width: 14px; border-radius: 2px; background: var(--wh-accent); vertical-align: 3px; }
.wh-kl.need { background: var(--wh-s2); }
.wh-hs { transition: opacity .15s; }
.wh-hs.dim, .wh-bar.dim, g.dim { opacity: .35; }
.wh-link { stroke: var(--wh-axis); stroke-width: 1; }
.wh-lane { font-size: 11px; }

/* тренды */
.wh-filter { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 10px; }
.wh-filter .h2 { margin: 0; }
.wh-filter .seg { margin: 0; flex: 1; }
.wh-filter .seg button { padding: 8px 6px; white-space: nowrap; font-size: 14px; }
.wh-mini + .wh-mini { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.wh-mt { display: block; border: 0; background: none; padding: 0; margin: 10px 0 4px; font-weight: 600; font-size: 14px; text-align: left; cursor: pointer; }
.wh-mini > .wh-mt { margin-top: 0; }
.wh-keys { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted); }
.wh-keys li { display: inline-flex; align-items: center; }
.wh-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: none; }
.wh-chips::-webkit-scrollbar { display: none; }
.wh-chips .chip { flex: none; white-space: nowrap; }
.wh-tlab { color: var(--muted); font-size: 13.5px; }
.wh-tavg { font-size: 34px; font-weight: 700; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0; }
.wh-tavg small { font-size: 15px; font-weight: 500; color: var(--muted); }
.wh-tdel { font-size: 13px; font-weight: 600; color: var(--muted); }
.wh-tdel.good { color: var(--wh-up); } .wh-tdel.bad { color: var(--wh-down); }
.wh-ins { font-size: 14px; line-height: 1.45; margin: 10px 0; }
.wh-bandk { display: inline-block; width: 18px; height: 8px; border-radius: 2px; background: var(--wh-accent); opacity: .14; margin-right: 4px; }
.wh-tblbtn { margin-top: 14px; width: 100%; }
.wh-table { overflow-x: auto; margin-top: 10px; max-height: 360px; overflow-y: auto; }
.wh-table table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.wh-table th, .wh-table td { padding: 6px 6px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.wh-table th:first-child, .wh-table td:first-child { text-align: left; }
.wh-table th { color: var(--muted); font-weight: 600; }

/* привычки */
.wh-hab { padding: 10px 0; border-top: 1px solid var(--line); }
.wh-hab:first-of-type { border-top: 0; }
.wh-habd { font-weight: 700; font-variant-numeric: tabular-nums; }
.wh-habd.wh-neg { color: var(--wh-down); } .wh-habd.wh-pos { color: var(--wh-up); }
.wh-habbar { position: relative; height: 8px; margin: 6px 0 4px; background: var(--line); border-radius: 4px; }
.wh-habbar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--wh-axis); }
.wh-habbar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.wh-habbar i.wh-pos { background: var(--wh-pos); } .wh-habbar i.wh-neg { background: var(--wh-neg); }
.wh-habt { font-size: 12.5px; }

/* графики */
.wh-chart { width: 100%; }
.wh-svg { display: block; touch-action: pan-y; outline: none; border-radius: 6px; }
.wh-svg:focus-visible { box-shadow: 0 0 0 2px var(--wh-accent); }
.wh-grid { stroke: var(--line); stroke-width: 1; }
.wh-base { stroke: var(--wh-axis); stroke-width: 1; }
.wh-ax { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.wh-bar { fill: var(--wh-accent); transition: opacity .15s; }
.wh-bar.rec-g { fill: var(--wh-good); } .wh-bar.rec-y { fill: var(--wh-warn); } .wh-bar.rec-r { fill: var(--wh-crit); }
.wh-sbar.z1 { fill: var(--wh-z1); } .wh-sbar.z2 { fill: var(--wh-z2); } .wh-sbar.z3 { fill: var(--wh-z3); } .wh-sbar.z4 { fill: var(--wh-z4); } .wh-sbar.z5 { fill: var(--wh-z5); }
.wh-line { fill: none; stroke: var(--wh-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wh-line.need { stroke: var(--wh-s2); }
.wh-pt { fill: var(--wh-accent); } .wh-pt.need { fill: var(--wh-s2); }
.wh-band { fill: var(--wh-accent); opacity: .12; }
.wh-ref { stroke: var(--wh-axis); stroke-width: 1; }
.wh-refl { font-size: 10px; }
.wh-end { fill: var(--wh-accent); stroke: var(--card); stroke-width: 2; }
.wh-endl { fill: var(--text); font-size: 12px; font-weight: 600; }
.wh-cross { stroke: var(--wh-axis); stroke-width: 1; }
.wh-fdot { fill: var(--wh-accent); stroke: var(--card); stroke-width: 2; }
.wh-nodata { margin: 6px 0; }
/* пульс за сутки: сетка заметнее обычной, часовые линии — пунктиром */
.wh-hgrid { stroke: var(--wh-axis); stroke-width: 1; opacity: .7; }
.wh-hgrid.hour { stroke: var(--line); opacity: 1; stroke-dasharray: 2 3; }
.wh-hrl { stroke-width: 1.8; }
.wh-hrband { fill: var(--wh-accent); opacity: .16; }
.wh-hband.sleep { fill: var(--wh-s-deep); opacity: .1; }
.wh-hband.act { fill: var(--wh-s2); opacity: .14; }
.wh-hbl { font-size: 10px; }
.wh-nowl { stroke: var(--wh-crit); stroke-width: 1; stroke-dasharray: 3 3; }
.wh-nowt { fill: var(--wh-crit); font-weight: 600; }
.wh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 6px; }
.wh-stats div { background: var(--bg); border-radius: 12px; padding: 6px 10px; }
.wh-stats span { display: block; font-size: 12px; color: var(--muted); }
.wh-stats b { font-size: 18px; }

/* тренировки */
.wh-wk { padding: 10px 0; border-top: 1px solid var(--line); }
.wh-wk:first-of-type { border-top: 0; }
.wh-wk .wh-actv { height: 24px; min-width: 38px; font-size: 13px; margin-right: 6px; }
.wh-wk .muted { font-size: 13.5px; margin-top: 4px; }
.wh .wh-wkdel { border: 0; background: none; color: var(--bad); font-size: 13.5px; padding: 6px 0 0; cursor: pointer; }
.wh .wh-wkdel.armed { font-weight: 700; }
.wh-wkadd { margin-top: 12px; }
.wh-wkform { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.wh-wkform label { display: grid; gap: 4px; font-size: 13.5px; color: var(--muted); flex: 1; min-width: 0; }
.wh-wkform input { border: 1.5px solid var(--line); background: var(--card); color: var(--text); border-radius: 14px; padding: 10px 12px; font-size: 16px; outline: none; width: 100%; box-sizing: border-box; }
.wh-wkform input:focus { border-color: var(--blue); }
.wh-wkrow { display: flex; gap: 10px; }
.wh-wkrow .btn { flex: 1; }
.wh-wkerr { color: var(--bad); margin: 0; font-size: 13.5px; }
.wh-zones { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 8px; background: var(--line); }
.wh-zones i { display: block; }
.wh .z1 { background: var(--wh-z1); } .wh .z2 { background: var(--wh-z2); } .wh .z3 { background: var(--wh-z3); } .wh .z4 { background: var(--wh-z4); } .wh .z5 { background: var(--wh-z5); }
.wh-foot { font-size: 12.5px; margin: 14px 4px 0; line-height: 1.45; }

/* подсказка — одна на страницу, вне раздела */
.wh-tip { position: fixed; z-index: 50; pointer-events: none; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 7px 10px; box-shadow: 0 8px 24px rgba(15, 25, 60, .18); font-size: 13px; max-width: 240px; }
.wh-tip div { display: flex; flex-direction: column; }
.wh-tip div + div { margin-top: 4px; }
.wh-tip b { font-size: 15px; }
.wh-tip span { color: var(--muted); font-size: 12.5px; }
:root[data-theme="dark"] .wh-wkform input { color-scheme: dark; }
:root[data-theme="dark"] .wh-wkadd { color: #c7d7ff; }