/* BAB-0076: the header of the app pages stays ONE row on a laptop. The editor, Face, Sounds, Moves and Behaviour share the same header (the logo, Pick it / Test it / Get it,
   the places, a status chip, Sign in) and each page's own sheet styles it; this file only decides what steps aside when the window is narrow, the same way on every page:
   under 1500 px the step numbers go (the order is the order), under 1250 px the status chip is trimmed to one line. Loaded last. A phone has its own header (phone.css). */
@media (min-width: 901px) and (max-width: 1500px) {
  .top .steps .step .n { display: none; }
  .top .steps .stepbtn, .top .steps .step a { gap: 0; }
}
@media (min-width: 901px) and (max-width: 1250px) {
  .top .chip { min-width: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top #est .l2 { display: none; }          /* the editor's cost line is in its cost card; the chip keeps the pieces and the weight */
}
@media (min-width: 901px) and (max-width: 1120px) {
  .top .brand span { display: none; }       /* the logo is the link home */
  .top .chip { max-width: 120px; }
  .top .ftabs .step, .top .ftabs .step a { padding-left: 8px; padding-right: 8px; }
  .top .ftabs .step a { margin: 0 -8px; }
  .top .ftabs { gap: 4px; }
}