/* ─────────────────────────────────────────────────────────────────────────
   The exercise database - Trainer PT's library of demonstrations.

   It is the Our Family wall wearing a different picture: the tiles, the search
   bar and the view that opens over the page are .fam-* and .ip-* from
   family.css and people.css, loaded before this file, and nothing here
   restyles them. Only .ex-* lives here, plus the one thing family.css could
   not know about - an opened item that is a video rather than a photograph.

   The page is GENERATED by make-exercises.py at
   /projects/trainer-pt/exercise-database/; edit the script, not the page.

   No colour is invented below. Every value is a token from the site palette.
   ───────────────────────────────────────────────────────────────────────── */

.ex-head{ max-width:62ch; margin:0 0 clamp(18px,2.4vw,28px); }
.ex-head h1{ margin:clamp(14px,2vw,22px) 0 .4em; }

/* The opened demonstration. The animations are square, 1080x1080, so this is
   family.css's photograph rule for a 1:1 picture: as large as the viewport
   allows less the padding and the caption bar, and never wider than 900px - a
   person standing in a square frame does not need to be bigger than that, and
   larger only means more of the empty studio floor. */
.fam-view video{
  display:block;
  width:min(
    calc(100vw - (var(--fam-pad) * 2)),
    calc(100vh - (var(--fam-pad) * 2) - var(--fam-chrome)),
    900px);
  height:auto; aspect-ratio:1/1;
  border:1px solid var(--hairline); border-radius:6px; background:var(--surface);
}
@supports (height:100dvh){
  /* The same against the viewport iOS Safari actually gives the page - see the
     matching note on .fam-view img in family.css. */
  .fam-view video{
    width:min(
      calc(100vw - (var(--fam-pad) * 2)),
      calc(100dvh - (var(--fam-pad) * 2) - var(--fam-chrome)),
      900px);
  }
}

/* The category block on a tile can hold two parts ("Legs & Glutes, Core"), so
   it is allowed to wrap rather than run off the edge of a narrow tile. */
.ex-item .fam-meta b{ max-width:100%; white-space:normal; }

/* An exercise not animated yet: a plain black square in the tile's place, so
   the wall is the whole library now and fills in as each one is made (Ashley,
   22 Oct 2026). Not a link, so it does not lift or turn gold on hover. */
.ex-blank{ display:block; aspect-ratio:1/1; background:var(--canvas); }
.ex-todo{ cursor:default; }
.ex-todo:hover{ transform:none; border-color:var(--hairline); }

/* Preference and Current Weight, a quiet third line under the name. */
.ex-facts{ display:block; margin-top:3px; font-style:normal; color:var(--secondary); font-size:11px; }
.ex-facts:empty{ display:none; }

/* Six controls now. Let the bar wrap rather than squeeze them. */
#exercises .ip-bar{ flex-wrap:wrap; }

/* The number and body part, in the tile's top-left corner - Ashley, 22 Oct
   2026. The same gold block as .fam-meta b (family.css), lifted out of the
   caption so the caption is just the name and the facts. */
.ex-badge{
  position:absolute; top:10px; left:10px; z-index:1;
  max-width:calc(100% - 20px);
  background:var(--gold); color:var(--canvas);
  font-family:var(--text); font-size:13px; font-weight:700; letter-spacing:.01em; line-height:1.35;
  padding:3px 8px; border-radius:4px;
}