/* Form finding: the figure on a dark rounded plate (base.css's .plate), the words to its left on a
   wide screen and over it on a narrow one. js/form.js sizes the plate in the room the words leave,
   draws the blank on the canvas over it, and sets the figure's label and the live readout in the
   plate's foot. */
/* The run's length lives here rather than on the section, so reduced motion can take it away: there
   the page shows the finished frame, and a still frame pinned for a screen is only a wait. 170vh
   keeps the Engineering chapter to the page's length budget: the three grids share about half a
   screen of scroll, which is enough because the blank is drawn on the way in, before the pin. */
.form { --len: 170vh; }
@media (prefers-reduced-motion: reduce) { .form { --len: 100vh; } }
.form .stage { background: var(--ground); }
/* The nav's Engineering link lands a section 72px short of its top (base.css's scroll-padding-top),
   which for a pinned scene is short of its pin: a band of the dive's hatch stood over the plate and
   its label sat on the window's foot. The nav tucks away on the way down, so the scene lands on its
   pin, as #sun does. */
#form { scroll-margin-top: -72px; }
/* The plate stands under the canvas, which is cleared each frame, so the page's own .plate is what
   the drawing lies on. It waits unseen until the script has sized it and it arrives. */
.form-plate { position: absolute; left: 0; top: 0; z-index: 0; opacity: 0; pointer-events: none; }
.form-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.form-copy { position: relative; z-index: 2; height: 100%; padding-top: 32px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; pointer-events: none; }
/* As wide as their longest line, so the plate can be framed in the room the words leave. */
.form-copy > * { width: max-content; max-width: 100%; }
.form-copy h2 { font-size: clamp(36px, min(5.4vw, 9vh), 84px); }
/* The result waits in its place from the start, so the headline never moves when it arrives. The
   scroll sets its opacity, and once it has been said it stays, like the drawing above it. */
.form-result { width: auto; max-width: min(380px, 100%); margin-top: clamp(18px, 3.6vh, 34px); font-size: clamp(20px, min(2vw, 3.8vh), 30px); opacity: 0; }
/* Short lines under the headline's three: the setting in two, then the app's own word on the shape. */
.form-result b, .form-result span { display: block; white-space: nowrap; }
/* The figure's label and the readout share one line in the plate's foot, the title left and the
   solver's live figures right, the way a drawing letters a view and its notes. */
.form-read, .form-fig { position: absolute; z-index: 2; top: 0; margin: 0; white-space: nowrap; pointer-events: none; }
.form-fig { left: 0; opacity: 0; }
.form-read { right: 0; opacity: 0; font-variant-numeric: tabular-nums; }
.form-read i { font-style: normal; color: var(--snow-faint); opacity: 0.7; padding: 0 0.35em; }

/* Stacked only when the window is narrow and not much wider than tall: a short landscape window
   under 900 wide still has more room beside the words than under them. js/form.js asks the same
   question with the same query (TALL), so the plate and the words never disagree about it. */
@media (max-width: 900px) and (max-aspect-ratio: 5/4), (max-width: 640px) {
  .form-copy { justify-content: flex-start; padding-top: 88px; }
  .form-copy h2 { font-size: clamp(34px, min(8vw, 7vh), 64px); }
  .form-result { font-size: 19px; margin-top: 14px; max-width: 100%; }
  .form-result b, .form-result span { display: inline; }
}
@media (max-width: 900px) and (max-aspect-ratio: 5/4) and (max-height: 700px), (max-width: 640px) and (max-height: 700px) {
  .form-copy { padding-top: 64px; }
}