/* The three moving figures in "What's inside".
 *
 * Loads after `tokens.css`, `base.css` and `sections.css` and composes them.
 * There is almost nothing here, and that is deliberate: everything a figure
 * *looks* like is drawn by `figures.js` out of the same custom properties this
 * file resolves. What this file owns is exactly three things a canvas cannot
 * decide for itself.
 *
 * 1. **The reserved box.** Every canvas gets an explicit height, so the space is
 *    held from the first paint and nothing on the page moves when the module
 *    runs. The heights are not ratios — these are text figures, and the amount
 *    of room a sentence needs is a number of lines, not a fraction of a width.
 *
 * 2. **The type scale.** The canvas element's own `font-size` is the figure's
 *    base size, read back by the JS. Putting it here means the figures are
 *    typeset by the same clamped modular scale as the prose beside them, and
 *    that the one breakpoint where the type has to get *larger* — the narrow
 *    layout, where a figure simplifies rather than shrinks — is a media query
 *    sitting with all the other media queries instead of a constant in a script.
 *
 * 3. **The caption.** A real `<figcaption>`, visible, because a figure that only
 *    means something while it is moving means nothing to a reader with images
 *    off, a reader who cannot see it, or a reader who scrolled past it in a
 *    second. The long description that goes with it is in the markup.
 *
 * The breakpoints below are min-width against the viewport and each one is the
 * width at which the layout above it stops fitting the longest real string in
 * it. They are matched pairwise by `matchMedia` in `figures.js`, so the height
 * this file reserves and the layout the script draws can never disagree.
 */

/* ================================================================== *
 * 1. The figure and its caption
 * ================================================================== */

.fig {
  display: grid;
  gap: var(--s-s);
  margin: 0;
  /* A grid item's default `min-width: auto` is the width of its widest
   * unbreakable content. The canvas has none, but the figure sits in the same
   * grids the file specimen does, and without this a future sibling could push
   * the page sideways at 320px. */
  min-width: 0;
}

.fig__canvas {
  display: block;
  width: 100%;
  /* Read back by `figures.js` as the figure's base type size. `--step-0` is the
   * body step: at 320px it resolves to 16px, which is what makes the narrow
   * layouts legible without the script knowing anything about viewports. */
  font-size: var(--step-0);
}

.fig__caption {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-quiet);
  text-wrap: pretty;
  max-width: 62ch;
}

/* ================================================================== *
 * 2. One sentence, three destinations
 *
 * Below 700px the figure drops the middle destination and stacks the two ends
 * of the register range at body size — fewer destinations and larger type, which
 * is the only honest way to make a three-column comparison work at 320px.
 * Shrinking all three would have produced three columns four words wide.
 *
 * The stacked box is the tall one because two windows one above the other is
 * genuinely taller than three side by side; it is not a squeezed version of the
 * same drawing.
 * ================================================================== */

.fig__canvas--registers {
  height: 640px;
}

@media (min-width: 700px) {
  .fig__canvas--registers {
    height: 400px;
    /* One step down, because three columns of the app's own long sentences at
     * body size stop being three columns and start being three paragraphs. */
    font-size: var(--step--1);
  }
}

@media (min-width: 900px) {
  .fig__canvas--registers {
    height: 340px;
  }
}

/* ================================================================== *
 * 3. Speak one language, write another
 *
 * 640px is `sections.css`'s own breakpoint for this block, and it is where the
 * two controls — "Listen in" and "Write in" — stop fitting side by side. Below
 * it they stack, which is why the box is taller there and not shorter.
 * ================================================================== */

.fig__canvas--lang {
  height: 260px;
}

@media (min-width: 640px) {
  .fig__canvas--lang {
    /* Two lines of the longer sentence plus the two controls. The well fills
     * this box whatever the sentence does, so the number is a promise about the
     * worst case rather than a guess at the usual one. */
    height: 220px;
    font-size: var(--step--1);
  }
}

/* The composed still is a different drawing, not a frozen frame: it shows the
 * Portuguese *and* the English, because one frame of a transformation shows
 * only one of them and this figure's whole claim is the pair. Two blocks need
 * more room than one, and the stylesheet is the only place that can know that
 * before the canvas is measured. */
@media (prefers-reduced-motion: reduce) {
  .fig__canvas--lang {
    height: 360px;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 640px) {
  .fig__canvas--lang {
    height: 260px;
  }
}

/* ================================================================== *
 * 4. The dictionary
 *
 * 900px is `sections.css`'s breakpoint for `.block--words`: it is where this
 * half stops being the full page column and becomes 1.1 of two. Below it the
 * panel of entries moves under the sentence rather than beside it, and the type
 * goes up a step with the room.
 * ================================================================== */

.fig__canvas--dictionary {
  height: 360px;
}

@media (min-width: 600px) {
  .fig__canvas--dictionary {
    height: 320px;
  }
}

@media (min-width: 900px) {
  .fig__canvas--dictionary {
    height: 250px;
    font-size: var(--step--1);
  }
}