/* HET-SKELETPOPPETJE-WORDT-GEDEELD — the DRAWING, moved out of coach.css so the
   member surface can load the same figure. deploy.sh mirrors public/assets/ into
   the coach docroot, so this is one file served from two origins.

   The dividing line: everything that paints the FIGURE lives here; the SCREEN
   around it (.bp-q, .bp-sub, .bp-quick, .bp-chip, .bp-draft, .bp-tag,
   .bp-picked, .bp-view, .bp-stagewrap, .bp-foot, .bp-go, .bp-day*) stays in
   coach.css, because that screen is the coach's.

   Class names are unchanged on purpose: renaming bp- would be a redesign, and
   this was a move. Only existing colour tokens — no fixed hex, so Day and Night
   both come out right. */

/* Joint picker: an anatomical body whose joints are real buttons. The dots are
   absolutely placed in PERCENT of .bp-stage, which holds the SVG's aspect
   ratio — percentages of the screen would walk the buttons off the body the
   moment the phone gets narrower or taller. */
:root { --bp-body: color-mix(in oklab, var(--ink) 10%, var(--surface));
        --bp-edge: color-mix(in oklab, var(--ink) 26%, transparent); }
.bp-stage { position: relative; aspect-ratio: 200 / 440; height: min(52vh, 440px); }
.bp-fig { display: block; width: 100%; height: 100%; }
.bp-mark {
  position: absolute; top: -2px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--muted);
}
.bp-mark--l { right: calc(100% + 8px); }
.bp-mark--r { left: calc(100% + 8px); }
.bp-j {
  position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px;
  border-radius: 50%; border: 2px solid color-mix(in oklab, var(--ink) 30%, transparent);
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  color: var(--on-accent); padding: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
/* 28px of paint, 46px of target: the coach taps this with one hand while the
   other holds the client's leg. */
.bp-j::after { content: ""; position: absolute; inset: -9px; }
/* Hips, knees and ankles sit only ~14% of the figure apart — at the 200px the
   box is wide that is 28px between centres, so a target grown sideways would
   reach over its twin and the coach would tick the wrong leg. Those three grow
   upward and downward only: an unambiguous tap beats a wider one. */
.bp-j--tight::after { inset: -9px 0; }
.bp-j:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bp-j__d { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in oklab, var(--ink) 30%, transparent); }
.bp-j.is-on {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 22%, transparent);
}
/* The back: one element on the midline, deliberately unlike the round L/R
   dots — the course method treats it as a whole, with no sides to confuse.
   The button is the full strip so the coach never has to aim at one bead. */
.bp-spine {
  position: absolute; transform: translate(-50%, 0); width: 18px;
  border: 0; background: transparent; padding: 0; display: block;
}
.bp-spine::after { content: ""; position: absolute; inset: -6px -14px; }
.bp-spine:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bp-spine__b {
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 12px; border-radius: 5px;
  background: color-mix(in oklab, var(--ink) 12%, var(--surface));
  border: 1.5px solid color-mix(in oklab, var(--ink) 34%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
}
.bp-spine.is-on .bp-spine__b {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 24%, transparent), 0 1px 2px rgba(0, 0, 0, .14);
}
.bp-spine__lab {
  position: absolute; left: calc(50% + 20px); transform: translateY(-50%);
  display: none; align-items: center; padding: 5px 10px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.bp-spine__lab.is-on { display: inline-flex; }
.bp-spine__lab::before {
  content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border: 6px solid transparent; border-right-color: var(--accent);
}
/* Turning a joint on and off is a state change, not an animation. There is no
   transition here today; this keeps it that way if one is ever added. */
@media (prefers-reduced-motion: reduce) {
  .bp-j, .bp-j__d, .bp-spine__b, .bp-spine__lab { transition: none; }
}