/* sonarruler.com: the guide's figures, in the article column. home.css comes first for the plates, the phone frame's
 * colours and the STEADY pill; page.css for the column and the captions. guide.js draws the canvases. */

.prose__body .gfig { margin: 1.7em 0 1.9em; }
.gfig > figcaption { margin-top: 14px; }

/* Two plates side by side, stacked once each would be narrower than a room and its strip can use. */
.gfig__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.gfig__panel { --d-radius: 22px; padding-top: 14px; }
.prose__body .gfig__name {
  margin: 0 16px 2px;
  font: 600 0.75rem/1.3 var(--sr-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--d-ink2);
}
.gfig__room { display: block; width: 100%; height: 288px; }

/* Which echo moves? The moves as chips (the home's table of contents), the canvas, and what the move just showed. */
.gfig__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.gfig__chip {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--d-wash);
  color: var(--d-ink);
  font: 600 0.9375rem/1.2 var(--sr-font);
  cursor: pointer;
  transition: background-color var(--sr-dur-press, 0.12s) ease-out, color var(--sr-dur-press, 0.12s) ease-out;
}
@media (hover: hover) { .gfig__chip:hover { background: #E8DCC4; } }
.gfig__chip[aria-pressed="true"] { background: var(--sr-graphite); color: var(--sr-tape); }
.gfig__moves { --d-radius: 22px; }
.gfig__stage { display: block; width: 100%; height: 400px; }
.prose__body .gfig__say {
  margin: 14px 0 0;
  font-weight: 600;
  line-height: 1.45;
}

/* The real clip: the home's phone frame alone. Its screen is the app's own colour until the clip shows. */
.gfig__phone { max-width: 460px; margin: 0 auto; }
.gfig__phone .sr-device__screen { background: var(--sr-lw-top); }
.prose__body .gfig__phone video { max-width: none; border-radius: 0; }
.gfig--clip > figcaption { text-align: center; }

/* A tabletop scene from the app's first run. */
.gfig__table { --d-radius: 22px; height: 280px; }

@media (max-width: 600px) {
  .gfig__pair { grid-template-columns: minmax(0, 1fr); }
  .gfig__table { height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .gfig__chip { transition: none; }
}