/* ============================================================================
   Framer — repairs for running inside a site shell
   ============================================================================
   Loaded only by the mounting host. The standalone host owns its window and
   needs none of this.

   The app was written as a whole page: `body` painted the dark ground and
   `.shell` claimed 100vh. Both of those are sentinelled out of app.css for the
   mounted build, because an app that styles `body` is styling the HOST's
   document — the exact fault that locked the whole page during the Top Gear
   port. What is left is an app with no ground of its own and no height, so
   this file gives it both.
   ========================================================================= */

/* The ground now lives on .framer in tokens.css, where both hosts get it — the
   standalone one needs it too, because `body` cannot see tokens declared on its
   own descendant. Nothing to repeat here. */
.framer{display:block}

/* HEIGHT IS NOT GUESSED HERE, AND THAT IS DELIBERATE.
   The obvious move is `calc(100vh - chrome)`, and it is how the Top Gear port
   put a table's horizontal scrollbar 102px below the fold: the subtraction has
   to account for everything above the app — page heading, kicker, lede — not
   just the site chrome, and every one of those changes height with the
   viewport and the text. A scrollbar you cannot reach is a control that does
   not exist.

   This app does not need viewport height. Its control column is a long stack of
   fieldsets and its stage holds a fixed-ratio canvas, so content height is the
   honest height. `align-items:stretch` still makes the stage match the column,
   which is the only reason 100vh was there in the first place. */
.framer .shell{min-height:0}

/* The stage's diagonal weave is a full-window backdrop on the standalone host.
   Mounted, it reads as a panel behind the canvas, so it keeps its texture but
   stops pretending to be the page. */
.framer .stage{padding:32px}

@media screen and (max-width:900px){
  .framer .stage{padding:16px}
}