/* Pose metrics panel. Everything here lives inside #poseRoot and borrows the
   app's cards, stats, bars and buttons; only the pieces the design system has
   no class for are defined below. Tokens only, so night and day both work.

   One rule shapes the look: a number the camera measured and a number that is
   still a guess must never look the same. Measured is --cool, a guess is
   --dim with a dashed edge, and both carry a word as well as a colour, so it
   reads the same in greyscale and to a colour blind reader. */

.pm{display:grid;gap:14px}

/* ------------------------------------------------------------- sub tabs
   Same shape as the Nutrition and Health tabs on purpose, so the panel reads
   as part of the app rather than a bolt on. */
.pmtabs{display:flex;gap:8px;flex-wrap:wrap}
.pmtabs button{
  padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);
  font:800 10px/1 var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:var(--mute);transition:.16s;
}
.pmtabs button:hover{color:var(--ink);border-color:var(--hot)}
.pmtabs button.on{color:var(--hot);border-color:var(--hot);background:var(--panel)}
.pmtabs button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}

/* --------------------------------------------------------- the top band */
.pmband{display:grid;gap:8px}
.pmband:empty{display:none}
.pmnote{
  padding:10px 12px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);
  font-size:12.5px;line-height:1.5;color:var(--mute);
}
.pmnote.warn{border-color:var(--hot);color:var(--ink);background:rgba(255,90,31,.10)}

/* ------------------------------------------------- where a number came from */
.pmtag{
  display:inline-block;padding:4px 9px;border-radius:999px;border:1px solid currentColor;
  font:800 9px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;
}
.pmtag.measured{color:var(--cool)}
.pmtag.logged{color:var(--grape)}
.pmtag.guess{color:var(--dim);border-style:dashed}

.pmdim{color:var(--mute);font-size:12.5px;line-height:1.6}
.pmdim.small{font-size:11.5px}
.pmfoot{color:var(--dim);font-size:11.5px;line-height:1.6}

.pmhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.pmhead b{font:800 14px/1 var(--mono);color:var(--ink)}
.pmhead .pmdim{font-size:11.5px}
.pmhead-line{font-size:13.5px;line-height:1.6;color:var(--ink);margin-bottom:12px}

/* ------------------------------------------------------------ live bodies */
.pmbody.stale{opacity:.62}
.pmstats{margin-bottom:12px}
.pmreps{display:grid;gap:7px}
.pmrep{
  display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:baseline;
  padding:9px 11px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);
}
.pmrep b{font:800 11px/1 var(--mono);letter-spacing:.8px;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.pmrep .pmscore{font:800 16px/1 var(--mono);color:var(--cool);white-space:nowrap}
.pmrep small{font-size:11.5px;line-height:1.5;color:var(--mute);overflow-wrap:anywhere}
@media(max-width:520px){
  .pmrep{grid-template-columns:auto auto;grid-template-areas:"k s" "d d"}
  .pmrep b{grid-area:k}.pmrep .pmscore{grid-area:s}.pmrep small{grid-area:d}
}

/* ------------------------------------------------------------- live meters */
.pmmeter{margin-bottom:11px}
.pmmeter:last-child{margin-bottom:0}
.pmmeter-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font:600 11px/1 var(--mono);color:var(--mute)}
.pmmeter-h b{font:800 13px/1 var(--mono);color:var(--cool)}
.pmmeter small{display:block;margin-top:5px;font-size:11px;color:var(--dim)}

/* ------------------------------------------------------------ calibration */
.pmsteps{display:grid;gap:12px;margin:14px 0}
.pmstep{padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2)}
.pmstep.done{border-color:var(--good)}
.pmstep-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px}
.pmstep-h b{font:800 13px/1.2 var(--mono);color:var(--ink)}
.pmstep-h span{font:800 11px/1 var(--mono);color:var(--mute);white-space:nowrap}
.pmstep.done .pmstep-h span{color:var(--good)}
.pmstep small{display:block;margin-top:7px;font-size:12px;line-height:1.55;color:var(--mute)}
.pmstep small.pmdim{color:var(--dim);font-size:11.5px}

.pmmark{
  display:grid;gap:9px;padding:11px 12px;margin-bottom:14px;
  border-radius:12px;border:1px solid var(--line);background:var(--panel2);
  font-size:12.5px;line-height:1.55;color:var(--mute);
}
.pmmark-b{display:flex;gap:9px;flex-wrap:wrap}

.pmactions{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}

.pmlist{display:grid;gap:9px;margin:12px 0 14px;list-style:none;padding:0}
.pmlist li{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;line-height:1.5;color:var(--mute)}

/* ---------------------------------------------------------------- fatigue */
.pmdrifts{display:grid;gap:12px;margin-bottom:12px}
.pmdrift{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2)}
.pmdrift.tiring{border-color:var(--hot)}
.pmdrift-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px}
.pmdrift-h b{font:800 12.5px/1.2 var(--mono);color:var(--ink)}
.pmdrift-h span{font:800 11px/1 var(--mono);color:var(--mute);white-space:nowrap}
.pmdrift.tiring .pmdrift-h span{color:var(--hot)}
.pmdrift small{display:block;margin-top:6px;font:600 11px/1.4 var(--mono);color:var(--dim)}
/* Direction is drawn as well as written: down is the tiring way for height
   and depth, up is the tiring way for rest between reps. */
.pmdrift .bar i.down{background:linear-gradient(90deg,var(--hot),var(--hot2))}
.pmdrift .bar i.up{background:linear-gradient(90deg,var(--cool),var(--grape))}
.pmdrift .bar i.flat{background:var(--line)}

/* ------------------------------------------------------------- who is who */
.pmwho{display:grid;grid-template-columns:1fr minmax(0,1.3fr) auto;gap:10px;align-items:center;margin-bottom:10px}
.pmwho-d b{display:block;font:800 12.5px/1.2 var(--mono);color:var(--ink)}
.pmwho-d small{display:block;margin-top:4px;font-size:11px}
.pmwho input{
  width:100%;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font:600 14px/1.2 var(--sans);
}
.pmwho input:focus{outline:2px solid var(--hot);outline-offset:1px}
.pmwho input::placeholder{color:var(--dim)}
@media(max-width:620px){
  .pmwho{grid-template-columns:1fr}
  .pmwho button{justify-self:start}
}