/* HEALTH ON A COMPUTER (Nov 6 2026, key 'fitness'): the view-only page (js/fitness.jsx and its
   charts, js/fitness-charts.jsx). ONE sheet split by hairlines, no separate cards (Shadi: "you
   don't need these bubbles to hold each one, you can have them connected"): every row is a grid
   whose 1px gaps show the line colour behind it. It owns no colours: marks borrow each section's
   own, --wk from workout.css, --kc from calorie.css and --hl-* from health.css, so a number reads
   the same colour here as on the phone tab it is logged from. Words stay in text colours; the
   colour sits on the marks. */

:root {
  /* the summary column and the detail column of the bands */
  --fit-lbl: 272px;
  --fit-detail: 380px;
  /* where a chart's hover card sits, set by js/fitness.jsx (PPFitHover) as you move along it */
  --tip-x: 0px;
  --tip-y: 10px;
}

.pp-fit-note { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; color: var(--text-faint); }
.pp-fit-note .pp-ic { flex: none; }
.pp-fit-note.is-sample { color: var(--hl-low); font-weight: 600; }

/* the viewing controls: how far back, and (preview only) the layout */
.pp-fit-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.pp-fit-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--card-line); }
.pp-fit-seg > span { padding: 0 6px 0 8px; font-size: 12px; color: var(--text-faint); }
.pp-fit-seg button { min-width: 38px; height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pp-fit-seg button:hover { color: var(--text); }
.pp-fit-seg button.is-on { background: var(--surface-3); color: var(--text); box-shadow: inset 0 1px 0 var(--edge-hi-strong); }
.pp-fit-seg button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 1px; }

/* ---------------------------------------------------------------- the sheet */
.pp-fit-sheet {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.pp-fit-sheet.is-loading { min-height: 420px; background: var(--w-bg); }
.pp-fit-now, .pp-fit-band { display: grid; gap: 1px; min-width: 0; }
.pp-fit-cell { background: var(--w-bg); padding: 18px 20px; min-width: 0; }
.pp-fit-cellhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pp-fit-cellhead h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.pp-fit-empty { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-faint); }

/* ---------------------------------------------------------------- the top row: right now */
.pp-fit-now { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pp-fit-now .pp-fit-cell { box-shadow: inset 0 1px 0 var(--edge-hi); }
.pp-fit-kpi { display: flex; flex-direction: column; gap: 6px; }
.pp-fit-kpi-lbl { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.pp-fit-kpi-val { display: flex; align-items: baseline; gap: 6px; min-height: 38px; white-space: nowrap; overflow: hidden; }
.pp-fit-kpi-val b { font-size: 32px; font-weight: 650; line-height: 1.1; letter-spacing: -.02em; color: var(--text); }
.pp-fit-kpi-val span { font-size: 13px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; }
.pp-fit-kpi-val em { font-style: normal; font-size: 18px; font-weight: 500; line-height: 38px; color: var(--text-faint); }
.pp-fit-kpi-viz { height: 30px; display: flex; align-items: center; }
.pp-fit-kpi-foot { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-fit-kpi-foot.is-stale { color: var(--hl-low); }
.pp-fit-kpi-foot .pp-ic { flex: none; }

/* this week, a square a day */
.pp-fit-week7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: 100%; }
.pp-fit-week7 span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; line-height: 1; color: var(--text-faint); }
.pp-fit-week7 i { display: block; width: 100%; max-width: 24px; height: 14px; border-radius: 4px; background: var(--w-card-hi); }
.pp-fit-week7 .is-went i { background: var(--wk); }
.pp-fit-week7 .is-today { color: var(--text); font-weight: 700; }
.pp-fit-week7 .is-today i { box-shadow: 0 0 0 1.5px var(--text-dim); }
.pp-fit-week7 .is-later i { background: none; box-shadow: inset 0 0 0 1px var(--w-card-hi); }

/* an amount against its limit */
.pp-fit-meter { width: 100%; height: 8px; border-radius: 999px; background: var(--w-card-hi); overflow: hidden; }
.pp-fit-meter i { display: block; height: 100%; border-radius: 999px; transition: width .4s var(--ease); }
.pp-fit-meter i.is-kc { background: var(--kc); }
.pp-fit-meter i.is-pro { background: var(--kc-pro); }
.pp-fit-meter i.is-carb { background: var(--kc-carb); }
.pp-fit-meter i.is-fat { background: var(--kc-fat); }
.pp-fit-meter i.is-over { background: var(--kc-over); }
.pp-fit-spark { width: 100%; height: 30px; }
.pp-fit-spark svg { display: block; }

/* ---------------------------------------------------------------- chart marks */
.pp-fit-time { position: relative; width: 100%; }
.pp-fit-time svg { display: block; overflow: visible; }
.pp-fit-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-faint); pointer-events: none; }
.pp-fit-mark { fill: var(--text-faint); }
.pp-fit-mark.is-wk { fill: var(--wk); }
.pp-fit-mark.is-kc { fill: var(--kc); }
.pp-fit-mark.is-over { fill: var(--kc-over); }
.pp-fit-mark.is-pro { fill: var(--kc-pro); }
.pp-fit-mark.is-sleep { fill: var(--hl-sleep); }
.pp-fit-mark.is-steps { fill: var(--text-faint); }
.pp-fit-mark.is-dim { opacity: .38; }
.pp-fit-mark.is-hot { stroke: var(--text); stroke-width: 1; }
.pp-fit-line { fill: none; stroke: var(--text-faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-fit-line.is-heart { stroke: var(--hl-heart); }
.pp-fit-line.is-dim { opacity: .5; }
.pp-fit-dot { fill: var(--text-faint); }
.pp-fit-dot.is-heart { fill: var(--hl-heart); }
.pp-fit-dot.is-end, .pp-fit-dot.is-hot { stroke: var(--w-bg); stroke-width: 2; }
.pp-fit-base { stroke: var(--line-2); stroke-width: 1; }
.pp-fit-ref { stroke: var(--text-faint); stroke-width: 1; opacity: .75; }
.pp-fit-reftxt { fill: var(--text-faint); font-size: 11px; }
.pp-fit-range { fill: var(--hl-good-band); opacity: .55; }
.pp-fit-cross { stroke: var(--text-dim); stroke-width: 1; }

.pp-fit-axis { position: relative; height: 18px; margin-top: 6px; }
.pp-fit-axis span { position: absolute; top: 0; padding-left: 5px; border-left: 1px solid var(--line-2); font-size: 11px; line-height: 14px; color: var(--text-faint); white-space: nowrap; }
.pp-fit-axis span.is-end { right: 0; padding: 0; border: 0; color: var(--text-dim); }

/* gym days as a calendar grid */
.pp-fit-heat { width: 100%; display: flex; justify-content: center; }
.pp-fit-heat svg { display: block; }
.pp-fit-heat-c { fill: var(--w-card-hi); }
.pp-fit-heat-c.is-went { fill: var(--wk); }
.pp-fit-heat-c.is-today { stroke: var(--text-dim); stroke-width: 1.5; }
.pp-fit-heat-c.is-hot { stroke: var(--text); stroke-width: 2; }
.pp-fit-heat-m, .pp-fit-heat-d { fill: var(--text-faint); font-size: 11px; }

/* legend keys: a square for a column, a short line for a line */
.pp-fit-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; }
.pp-fit-keyitem { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.pp-fit-key { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--text-faint); }
.pp-fit-key.is-line { width: 14px; height: 2px; border-radius: 1px; }
.pp-fit-key.is-wk { background: var(--wk); }
.pp-fit-key.is-kc { background: var(--kc); }
.pp-fit-key.is-over { background: var(--kc-over); }
.pp-fit-key.is-pro { background: var(--kc-pro); }
.pp-fit-key.is-sleep { background: var(--hl-sleep); }
.pp-fit-key.is-heart { background: var(--hl-heart); }
.pp-fit-key.is-band { background: var(--hl-good-band); box-shadow: inset 0 0 0 1px var(--hl-good-rim); }
.pp-fit-key.is-carb { background: var(--kc-carb); }
.pp-fit-key.is-fat { background: var(--kc-fat); }
.pp-fit-key.is-deep { background: var(--hl-deep); }
.pp-fit-key.is-rem { background: var(--hl-rem); }
.pp-fit-key.is-light { background: var(--hl-light); }
.pp-fit-key.is-awake { background: var(--hl-awake); }

/* ---------------------------------------------------------------- A: the bands */
.pp-fit-band { grid-template-columns: var(--fit-lbl) minmax(0, 1fr) var(--fit-detail); }
.pp-fit-sum { display: flex; flex-direction: column; gap: 4px; }
.pp-fit-sum-ttl { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--text); }
.pp-fit-band.is-wk .pp-fit-sum-ttl .pp-ic { color: var(--wk); }
.pp-fit-band.is-kc .pp-fit-sum-ttl .pp-ic { color: var(--kc); }
.pp-fit-band.is-hl .pp-fit-sum-ttl .pp-ic { color: var(--hl-heart); }
.pp-fit-big { display: flex; align-items: baseline; gap: 8px; }
.pp-fit-big b { font-size: 44px; font-weight: 650; line-height: 1; letter-spacing: -.03em; color: var(--text); }
.pp-fit-big span { font-size: 14px; color: var(--text-dim); }
.pp-fit-sum-sub { font-size: 12px; color: var(--text-faint); }
.pp-fit-facts { margin: 16px 0 0; }
.pp-fit-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--card-line); font-size: 13px; }
.pp-fit-facts dt { color: var(--text-faint); white-space: nowrap; }
.pp-fit-facts dd { margin: 0; text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.pp-fit-chart { display: flex; flex-direction: column; }
.pp-fit-sublbl { margin: 14px 0 6px; font-size: 11px; color: var(--text-faint); }
.pp-fit-detail { display: flex; flex-direction: column; }

/* the latest details */
.pp-fit-head2 { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.pp-fit-head2 b { font-size: 20px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.pp-fit-head2 span { font-size: 12px; color: var(--text-faint); }
.pp-fit-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--card-line); border-bottom: 1px solid var(--card-line); }
.pp-fit-minis.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.pp-fit-mini { display: flex; flex-direction: column; gap: 3px; padding: 10px 10px 10px 0; min-width: 0; }
.pp-fit-mini + .pp-fit-mini { padding-left: 10px; border-left: 1px solid var(--card-line); }
.pp-fit-mini span { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.pp-fit-mini b { font-size: 17px; font-weight: 650; color: var(--text); white-space: nowrap; }
.pp-fit-mini b small { font-size: 11px; font-weight: 500; color: var(--text-faint); }
.pp-fit-mini em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--text-faint); }
.pp-fit-list { list-style: none; margin: 8px 0 0; padding: 0; }
.pp-fit-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--card-line); font-size: 13px; color: var(--text); }
.pp-fit-list li:first-child { border-top: 0; }
.pp-fit-list li > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-fit-list small { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.pp-fit-list li > b { font-weight: 650; white-space: nowrap; }
.pp-fit-night .pp-hl-hypno { margin-top: 12px; }
.pp-fit-avgday { margin-top: auto; padding-top: 18px; }
.pp-fit-avgday h4 { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.pp-fit-macro { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; margin-bottom: 10px; font-size: 13px; }
.pp-fit-macro span { color: var(--text-dim); }
.pp-fit-macro b { text-align: right; font-weight: 650; color: var(--text); }
.pp-fit-macro b small { font-weight: 500; color: var(--text-faint); }
.pp-fit-macro .pp-fit-meter { grid-column: 1 / -1; height: 6px; }

/* ---------------------------------------------------------------- hover: one day's card */
.pp-fit-hover { position: relative; cursor: crosshair; }
.pp-fit-hover.is-cells { cursor: default; }
.pp-fit-tip {
  position: absolute; top: var(--tip-y); left: var(--tip-x); z-index: 3;
  transform: translateX(16px);
  width: 250px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 5px;
  border-radius: 12px; border: 1px solid var(--glass-line);
  background: var(--glass); box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: 12px; pointer-events: none;
}
.pp-fit-tip.is-left { transform: translateX(calc(-100% - 16px)); }
.pp-fit-tip > b { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.pp-fit-tip span { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-dim); }
.pp-fit-tip em { margin-left: auto; padding-left: 12px; font-style: normal; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); }
.pp-fit-tip-big { margin: 1px 0 0; font-size: 22px; font-weight: 650; letter-spacing: -.01em; line-height: 1.15; color: var(--text); }
.pp-fit-tip-big small { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--text-faint); }
.pp-fit-tip-sub { margin: -2px 0 4px; font-size: 12px; color: var(--text-faint); }
.pp-fit-tip-none { font-size: 13px; color: var(--text-faint); }
.pp-fit-tip-sep { display: block; height: 1px; margin: 3px 0; background: var(--glass-line); }
.pp-fit-tip-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--glass-line); }
.pp-fit-tip-list span { color: var(--text); }
.pp-fit-tip-list span em { color: var(--text-dim); font-weight: 500; }
.pp-fit-tip-list small { font-size: 11px; color: var(--text-faint); }

@media (max-width: 1320px) {
  .pp-fit-now { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-fit-band { grid-template-columns: var(--fit-lbl) minmax(0, 1fr); }
  .pp-fit-band .pp-fit-detail { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .pp-fit-now { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-fit-band { grid-template-columns: minmax(0, 1fr); }
}