/* The customer's frame: phone first, and wider where there is room.

   `base.css` had two frames, a phone-width column centred on anything wider and `frame-wide` (HQ's,
   across the window). Reed's look at the preview on 7 Oct found the third missing: the customer's
   site forcing a phone column on a desktop, when what the pages want is to
   be drawn for a phone and then to use a wider screen — the grid of letters and the well side by
   side, a sheet wider (docs/decisions.md, 7 Oct 2026, "The look", as amended). That is this file,
   and it is the orders shell's frame from 8 Oct.

   It is a frame and not a page's rule, so it lives in the component set beside base.css rather than
   in a page crate's stylesheet; it is its own file rather than a rule in base.css only because
   base.css was another builder's on the night it was written, and it folds into base.css's frame
   section whenever that is convenient.

   The page inside it decides what to do with the room; `.frame-adapt .page` is a container, so a
   page's own rules ask about the room they are in rather than about the window (the order page's
   two widths, customer-orders.css). */
.frame-adapt {
  width: 100%;
  max-width: calc(var(--measure-adapt) + 2 * var(--shell-inset));
  margin: 0 auto;
}

.frame-adapt .page {
  container-type: inline-size;
  container-name: page;
}

/* A phone, and anything narrower than the column: the column's measure is the one the pages were
   drawn at, and nothing stretches. */
.frame-adapt {
  --measure-adapt: var(--measure-column);
}

/* A tablet or a laptop: the shell grows to a measure two of the page's columns fit in, which is
   what the order page's grid and well need side by side. It stops there — the customer's pages are
   read, and a sentence does not want the window's width. */
@media (min-width: 48rem) {
  .frame-adapt {
    --measure-adapt: 64rem;
  }
}

/* And one step wider on a desktop, for the order page's sake: its well is a garment in three
   dimensions and the room it has is the whole of how large that garment is drawn (Reed, 8 Oct 2026,
   "widen everything"). Nothing else on the site grows with it — the list keeps its own 48rem
   measure and the sign-in card its 22.5rem — so this is the order page using a big screen and not
   a sentence running to the window's width. */
@media (min-width: 80rem) {
  .frame-adapt {
    --measure-adapt: 72rem;
  }
}