/* Daily Life Doc, round 11: the block Exercise (docs/build/r11/PLAN.md 2.6; js/docs/doc-exercise.js,
   doc-exercise-run.js, doc-exercise-flat.js, doc-figure.js). The figure is the hero: one softly tinted stage with the
   3D person (or the flat drawing while three.js loads and when WebGL is missing), one quiet word on it ("Hold 7")
   and one quiet Front / Side; under it Start, Slower and "1 of 12"; then the steps, the one being done tinted and
   filling as it runs. The --dx-* colours are read by the 3D figure from the block (light and dark). Tokens and the
   shared type scale only. */

.dx { --dx-skin: #E8BD98; --dx-top: #8CB0A2; --dx-legs: #56637B; --dx-hair: #5B4537; --dx-glow: #EE9A4D;
  --dx-mat: #D3E2DA; --dx-stool: #D9C3A4; display: grid; gap: 10px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dx { --dx-skin: #D9A882; --dx-top: #6F978B; --dx-legs: #7E8CA7; --dx-hair: #3E3029;
    --dx-glow: #E9A262; --dx-mat: #344F47; --dx-stool: #6B5A45; }
}
:root[data-theme="dark"] .dx { --dx-skin: #D9A882; --dx-top: #6F978B; --dx-legs: #7E8CA7; --dx-hair: #3E3029;
  --dx-glow: #E9A262; --dx-mat: #344F47; --dx-stool: #6B5A45; }

.dx > .dk-h { margin-bottom: 0; }
.dx-sum { margin: -8px 0 0; font-size: var(--t-sm); color: var(--ink3); }
/* "Drag to turn": faint in the stage's corner until the first drag. */
.dx-hint { position: absolute; z-index: 1; right: 8px; bottom: 8px; padding: 2px 9px; border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); font-size: var(--t-xs); font-weight: 500;
  color: var(--ink3); pointer-events: none; transition: opacity 600ms ease; }
.dx-hint.is-gone { opacity: 0; }

/* The stage: its height follows its width (the camera's own shape per pose), so nothing jumps when the figure loads. */
.dx-stage { position: relative; aspect-ratio: 1.6; border-radius: 18px; overflow: hidden; touch-action: pan-y;
  cursor: grab; user-select: none; -webkit-user-select: none;
  background: radial-gradient(120% 95% at 50% 12%, color-mix(in srgb, var(--today-bg) 42%, var(--surface)), color-mix(in srgb, var(--soft) 45%, var(--surface))); }
.dx-stage:active { cursor: grabbing; }
.dx-stage.dx-standing { aspect-ratio: 0.9; }
.dx-stage.dx-seated { aspect-ratio: 1.2; }
.is-still .dx-stage, .dx-stage.is-flat { cursor: default; }
.dx-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0;
  transition: opacity 480ms ease; }
.dx-stage.has-3d canvas { opacity: 1; }
.dx-flat { position: absolute; inset: 0; transition: opacity 480ms ease; }
.dx-flat .dxf { position: absolute; left: 8%; top: 8%; width: 84%; height: 84%; }
.dx-stage.has-3d .dx-flat { opacity: 0; }
.dx-stage.is-flat .dxf { position: absolute; left: 8%; top: 8%; width: 84%; height: 84%; }

/* The step's word with its hold count, and Front / Side, on the stage. */
.dx-say, .dx-view { position: absolute; z-index: 1; background: color-mix(in srgb, var(--surface) 84%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dx-view { top: 6px; right: 6px; min-width: 64px; min-height: 36px; padding: 0 12px; border-radius: 18px;
  font-size: var(--t-xs); font-weight: 600; color: var(--ink2); transition: transform var(--m-press) var(--ease-out); }
.dx-view:active { transform: scale(.95); }
.dx-say { top: 6px; left: 6px; max-width: calc(100% - 90px); overflow: hidden; text-overflow: ellipsis; padding: 6px 14px; border-radius: 18px; white-space: nowrap;
  font-size: var(--t-s); font-weight: 600; line-height: 24px; color: var(--ink); pointer-events: none; min-height: 36px; box-sizing: border-box;
  animation: dd-fade 220ms ease both; }
.dx-say b { margin-left: 4px; font-size: var(--t-l); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Start / Pause / Resume / Next step / Done and Slower. */
.dx-bar { display: flex; align-items: center; gap: 8px; }
.dx-go { min-width: 112px; }
/* FR2 (REVIEW 3): under the pointer the button keeps the theme's own ink (the app's --ink-hover is the default navy,
   so Pause turned navy while the pointer rested on it after Start). */
@media (hover: hover) and (pointer: fine) {
  .dx-go.btn.ink:not([disabled]):hover { background-color: color-mix(in srgb, var(--ink) 88%, var(--on-ink)); }
}
/* Slower sits on the document's white sheet: tinted, so it reads as a button. */
.dx-slow { background: var(--soft); }
/* Slower turned on is tinted, never the main button's dark fill (WALK-2 fault 25: two equal dark buttons side by side). */
.dx-slow[aria-pressed="true"] { background: var(--today-bg); color: var(--today-d); }
.dx-rep { margin-left: auto; font-size: var(--t-sm); font-weight: 600; color: var(--ink2); white-space: nowrap; }
/* Done keeps the main button's own colours (readable in light, dark and every theme; WALK-2 fault 1: a green fill
   lost to the hover colour and left dark words on a dark button) and stands out by its tick. */
.dx-go.dx-done-btn::before { content: '✓'; margin-right: 6px; font-weight: 700; }

/* The steps: the one being done is tinted and fills from the left while it runs. */
.dx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dx-steps li { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 24px 1fr auto;
  gap: 10px; align-items: start; min-height: 44px; padding: 10px; border-radius: 14px; cursor: pointer;
  transition: background-color var(--m-step) ease; -webkit-tap-highlight-color: transparent; }
.dx-steps li > i { position: absolute; inset: 0; z-index: -1; background: var(--today-bg); opacity: .5;
  transform: scaleX(0); transform-origin: left center; }
.dx-steps li.on { background: color-mix(in srgb, var(--today-bg) 38%, transparent); }
.dx-steps li:focus-visible { outline: 2px solid var(--today); outline-offset: -2px; }
.dx-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--soft);
  font-size: var(--t-xs); font-weight: 700; color: var(--ink2); transition: background-color var(--m-step) ease, color var(--m-step) ease; }
.dx-steps li.on .dx-n { background: var(--today); color: #FFFFFF; }
.dx-steps span { min-width: 0; }
.dx-steps span b { display: block; font-size: var(--t-s); font-weight: 600; line-height: 1.4; color: var(--ink); }
.dx-steps em { display: block; margin-top: 2px; font-style: normal; font-size: var(--t-sm); line-height: 1.45; color: var(--ink2); overflow-wrap: anywhere; }
.dx-steps small { padding-top: 2px; font-size: var(--t-sm); color: var(--ink3); white-space: nowrap; }
.is-still .dx-steps li { cursor: default; }

.dx-done { font-size: var(--t-xs); color: var(--ink3); }
.dx-again { justify-self: start; }
.dx-why { margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--care-d); }

/* The flat drawing (the same person as the 3D figure, from the side). */
.dxf { display: block; width: 100%; height: 100%; overflow: visible; }
.dxf polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dxf .dxf-leg { stroke: var(--dx-legs); }
.dxf .dxf-top, .dxf .dxf-arm { stroke: var(--dx-top); }
.dxf .dxf-skin { stroke: var(--dx-skin); }
.dxf .dxf-head { fill: var(--dx-skin); }
.dxf .dxf-mat { fill: var(--dx-mat); }
.dxf .dxf-stool { fill: var(--dx-stool); }
.dxf .dxf-rest { opacity: .24; }
.dxf .dxf-far { opacity: .78; }

/* The editor's Exercise row: the small drawing beside the steps as chips. */
.dx-chips { --dx-skin: #E8BD98; --dx-top: #8CB0A2; --dx-legs: #56637B; --dx-mat: #D3E2DA; --dx-stool: #D9C3A4;
  display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; }
.dx-mini { aspect-ratio: 1.6; padding: 6px; border-radius: 12px; background: color-mix(in srgb, var(--soft) 60%, var(--surface)); }
.dx-chiprow { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.dx-chip { padding: 3px 9px; border-radius: 10px; background: var(--soft); font-size: var(--t-xs); line-height: 18px; color: var(--ink2); }
.dx-chip small { color: var(--ink3); }

@media (prefers-reduced-motion: reduce) {
  .dx-stage canvas, .dx-flat, .dx-hint { transition: none; }
  .dx-say { animation: none; }
}