/* 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 (docs/decisions.md, 7 Oct 2026, "The look",
   (5), as amended). That is this file, and it is the orders shell's frame from 8 Oct. Since 18 Oct
   2026 ("The staging look", (1)) what uses the room on the order page is its cards: each a row on a
   wide screen, its picture or open well beside its words and ask; the page's sentences keep a
   phone's column.

   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
   list of cards is a container of its own too, `offers`, which the customer's card asks about:
   customer-orders.css and offer-card.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 the order page's cards use, a card as a row
   with its picture beside its words. It stops there — the customer's pages are read, and a sentence
   does not want the window's width (the page keeps its sentences at the column's measure). */
@media (min-width: 48rem) {
  .frame-adapt {
    --measure-adapt: 64rem;
  }
}

/* And one step wider on a desktop, for the order page's sake: a card's 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"; the well three fifths of a card's row since 18 Oct). 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;
  }
}