/* =====================================================================
   HEALTH (Nov 6 2026), Heart and Sleep from the Fitbit, from the tracker's Health tab.
   Its own colours live in the :root block below (tools/lint-ui.js allows raw colours
   there only); every rule after it uses tokens. Classes start pp-.
   ===================================================================== */
:root {
  --hl-heart: #FF7A88;
  --hl-heart-glow: rgba(236, 106, 120, 0.55);
  --hl-heart-line: rgba(236, 106, 120, 0.18);
  --hl-heart-well: rgba(0, 0, 0, 0.22);
  --hl-sleep: #A9BBFF;
  --hl-sleep-deep: #3B4FA7;
  --hl-sleep-glow: rgba(123, 159, 221, 0.35);
  --hl-deep: #5D7BFF;
  --hl-rem: #A06CFF;
  --hl-light: #4DB1D6;
  --hl-awake: #CF7D8E;
  --hl-good: #7BD88F;
  --hl-good-band: rgba(123, 216, 143, 0.2);
  --hl-good-rim: rgba(123, 216, 143, 0.32);
  --hl-low: #E8B765;
  --hl-high: #9AB0FF;
  --hl-mark-rim: rgba(8, 10, 20, 0.5);
  --hl-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 46' preserveAspectRatio='none'%3E%3Cpolyline points='0,23 55,23 62,19 69,23 78,23 82,9 87,37 92,16 98,23 150,23' fill='none' stroke='%23EC6A78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pp-hl { padding-bottom: 48px; }
.pp-hl-view { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.pp-tkh-stat.is-hl b { color: var(--hl-sleep); }
.pp-hl-stale { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; color: var(--hl-low); }
.pp-hl-stale i { width: 7px; height: 7px; border-radius: 50%; background: var(--hl-low); }

.pp-hl-card {
  background: var(--surface-2); border: 1px solid var(--card-line); border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 var(--edge-hi), var(--shadow-card); padding: 16px; min-width: 0;
}
.pp-hl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.pp-hl-ttl { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.pp-hl-ttl small { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-faint); }
.pp-hl-foot { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-faint); }
.pp-hl-empty { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 40px 20px; color: var(--text-dim); }
.pp-hl-empty .pp-ic { color: var(--hl-heart); }
.pp-hl-empty b { color: var(--text); font-size: 16px; }

/* ---- vitals ---- */
.pp-hl-vital { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--w-line); }
.pp-hl-vital:last-child { border-bottom: 0; }
.pp-hl-vi { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--w-card); color: var(--hl-heart); }
.pp-hl-view.is-sleep .pp-hl-vi { color: var(--hl-sleep); }
.pp-hl-vmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-hl-vlabel { font-size: 13px; color: var(--text-dim); }
.pp-hl-vval { font-size: 20px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.pp-hl-vval small { font-size: 12px; font-weight: 500; color: var(--text-faint); }
.pp-hl-vval em { font-style: normal; font-size: 14px; font-weight: 500; color: var(--text-faint); }
.pp-hl-vsub { font-size: 12px; color: var(--text-faint); }

/* ---- heartbeat ---- */
.pp-hl-ecg { border-radius: var(--radius); padding: 16px 18px 18px; background: var(--surface-2); border: 1px solid var(--hl-heart-line); box-shadow: inset 0 1px 0 var(--edge-hi), var(--shadow-card); }
.pp-hl-ecg-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.pp-hl-ecg-read { display: flex; align-items: center; gap: 14px; }
.pp-hl-heart { color: var(--hl-heart); display: inline-flex; filter: drop-shadow(0 0 9px var(--hl-heart-glow)); animation: pp-hl-beat 1.1s ease-in-out infinite; transform-origin: center; }
.pp-hl-heart .pp-ic { fill: var(--hl-heart); }
.pp-hl-heart.is-still { animation: none; }
.pp-hl-ecg-num { display: flex; flex-direction: column; }
.pp-hl-ecg-num b { font-size: 44px; font-weight: 700; line-height: .95; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.pp-hl-ecg-num span { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.pp-hl-refresh { gap: 7px; }
.pp-hl-strip { position: relative; height: 54px; border-radius: 12px; overflow: hidden; background: var(--hl-heart-well); box-shadow: inset 0 0 0 1px var(--hl-heart-line); }
.pp-hl-wave {
  position: absolute; inset: 0; background-image: var(--hl-wave); background-repeat: repeat-x; background-size: 150px 100%; background-position: 0 50%;
  filter: drop-shadow(0 0 5px var(--hl-heart-glow)); animation: pp-hl-scroll .9s linear infinite;
}
.pp-hl-wave.is-still { animation: none; }
@keyframes pp-hl-scroll { from { background-position-x: 0; } to { background-position-x: -150px; } }
@keyframes pp-hl-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.22); } 28% { transform: scale(1); } 42% { transform: scale(1.12); } 56% { transform: scale(1); } }

/* ---- recent days ---- */
.pp-hl-table { display: flex; flex-direction: column; }
.pp-hl-row { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--w-line); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); }
.pp-hl-row span:not(:first-child) { text-align: right; }
.pp-hl-row.is-head { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.pp-hl-row:last-child { border-bottom: 0; }

/* ---- sleep ring and stages ---- */
.pp-hl-sleepcard { display: flex; flex-direction: column; align-items: center; }
.pp-hl-sleepcard .pp-hl-ttl { align-self: stretch; }
.pp-hl-ring { position: relative; width: 190px; height: 190px; margin: 4px auto 12px; }
.pp-hl-ring svg { width: 100%; height: 100%; filter: drop-shadow(0 0 8px var(--hl-sleep-glow)); }
.pp-hl-ring-track { fill: none; stroke: var(--w-line); stroke-width: 12; }
.pp-hl-ring-prog { fill: none; stroke: var(--hl-sleep); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .5s var(--ease); }
.pp-hl-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pp-hl-ring-in b { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.pp-hl-ring-in span { font-size: 12px; color: var(--text-faint); }
.pp-hl-stages { align-self: stretch; }
.pp-hl-stbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; }
.pp-hl-stbar span { display: block; height: 100%; }
.pp-hl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.pp-hl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pp-hl-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.pp-hl-legend.is-wide { justify-content: center; }
:is(.pp-hl-stbar, .pp-hl-legend, .pp-hl-hypno) .is-deep { background: var(--hl-deep); fill: var(--hl-deep); }
:is(.pp-hl-stbar, .pp-hl-legend, .pp-hl-hypno) .is-rem { background: var(--hl-rem); fill: var(--hl-rem); }
:is(.pp-hl-stbar, .pp-hl-legend, .pp-hl-hypno) .is-light { background: var(--hl-light); fill: var(--hl-light); }
:is(.pp-hl-stbar, .pp-hl-legend, .pp-hl-hypno) .is-awake { background: var(--hl-awake); fill: var(--hl-awake); }

/* ---- the night ---- */
.pp-hl-hypno-plot { position: relative; height: 170px; }
.pp-hl-hypno-plot svg { width: 100%; height: 150px; display: block; }
.pp-hl-lane { stroke: var(--w-line); stroke-width: 1; }
.pp-hl-block { opacity: .92; }
.pp-hl-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; }
.pp-hl-ticks span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.pp-hl-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--text-dim); }

/* ---- quality rows ---- */
.pp-hl-bench { padding: 11px 0; border-bottom: 1px solid var(--w-line); }
.pp-hl-bench:last-child { border-bottom: 0; }
.pp-hl-bench-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 13px; color: var(--text-dim); }
.pp-hl-bench-top b { font-size: 15px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.pp-hl-bench-top em { font-style: normal; font-size: 11px; font-weight: 700; margin-left: 7px; text-transform: uppercase; letter-spacing: .04em; }
.pp-hl-bench-top em.is-good { color: var(--hl-good); }
.pp-hl-bench-top em.is-low { color: var(--hl-low); }
.pp-hl-bench-top em.is-high { color: var(--hl-high); }
.pp-hl-bench-top em.is-na { color: var(--text-faint); }
.pp-hl-bench-track { position: relative; height: 8px; border-radius: 5px; background: var(--w-line); }
.pp-hl-bench-band { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--hl-good-band); box-shadow: inset 0 0 0 1px var(--hl-good-rim); }
.pp-hl-bench-mark { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--hl-mark-rim); }
.pp-hl-bench-mark.is-good { background: var(--hl-good); }
.pp-hl-bench-mark.is-low { background: var(--hl-low); }
.pp-hl-bench-mark.is-high { background: var(--hl-high); }
.pp-hl-bench-scale { position: relative; height: 14px; margin-top: 5px; }
.pp-hl-bench-scale span { position: absolute; top: 0; font-size: 10px; color: var(--text-faint); white-space: nowrap; }

/* ---- last 7 nights ---- */
.pp-hl-nights { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; align-items: end; height: 180px; padding-top: 6px; }
.pp-hl-night { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.pp-hl-night-bar { width: 100%; max-width: 46px; flex: 1; display: flex; align-items: flex-end; background: var(--w-card); border-radius: 8px; overflow: hidden; }
.pp-hl-night-bar i { display: block; width: 100%; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--hl-sleep), var(--hl-sleep-deep)); transition: height .4s var(--ease); }
.pp-hl-night b { font-size: 12px; font-weight: 650; color: var(--text); white-space: nowrap; }
.pp-hl-night span { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); }

/* ---- Home widget ---- */
.pp-whealth { display: flex; flex-direction: column; height: 100%; }
.pp-whealth-row { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; }
.pp-whealth-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-whealth-row b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.pp-whealth-row span:first-child b { color: var(--hl-sleep); }
.pp-whealth-row small { font-size: 12px; color: var(--text-faint); }

@media (max-width: 760px) {
  .pp-hl-view { margin-top: 14px; gap: 12px; }
  .pp-hl-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pp-hl-card { padding: 14px; }
  .pp-hl-ecg { padding: 14px; }
  .pp-hl-ecg-num b { font-size: 38px; }
  .pp-hl-refresh { width: 100%; justify-content: center; }
  .pp-hl-row { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); font-size: 13px; gap: 4px; }
  .pp-hl-nights { gap: 6px; height: 160px; }
  .pp-hl-night b { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-hl-heart, .pp-hl-wave { animation: none; }
}