@layer product, responsive;
/* ---- Brew mode on short phones ------------------------------------------------
   /brew-timer/'s own stylesheet (site.css stays under its 90 000-byte cap).
   Below about 740 px of height the ready stage carries the grams, a countdown,
   the grinder line, the cues and (for a cocktail) the age note. The dial keeps
   at least its step buttons' height (brew.css) so the countdown never spills
   onto the grinder line; here the figure and the gaps give up the space the
   Start target needs. Landscape phones keep brew.css's own compact layout. */
@layer product {
  @media (orientation: portrait) and (max-height: 46.25rem), (min-height: 32.01rem) and (max-height: 46.25rem) {
    .brew-mode[open] { gap: .35rem; }
    .brew-target { gap: 0; }
    .brew-figure { font-size: max(4rem, min(30vw, 9rem, 13dvh)); }
    .brew-delta { font-size: 1.1rem; }
    .brew-cues { gap: .25rem; }
    .brew-warning { font-size: .85rem; }
  }
}