/* Signs and banners: what the walkthrough has beyond the posters walkthrough's pieces (assets/posters.css, loaded first)
   and the shared prints styles (assets/prints.css). Phone first. docs/SIGNAGE.md. */
.hp-signs__top { display: grid; gap: 1.25rem; width: 100%; }
/* One centered column at every width (STYLE.md: a control centered over what it controls): the name, the control, its
   sentence; posters' two-column rows would set each control at a different offset. */
.hp-posters__every .hp-signs__top .hp-posters__every-row { display: grid; grid-template-columns: 1fr; gap: 0.5rem; justify-items: center; }
.hp-posters__every .hp-signs__top .hp-posters__every-row .hp-prints__hint { grid-column: 1; max-width: 40rem; text-align: center; }
.hp-signs__stand { text-align: center; }
/* The choices hold up to three words each: they wrap inside their track rather than squeeze. */
.hp-prints__paper .hp-signs__top .hp-prints__segment { display: inline-flex; flex-wrap: wrap; justify-content: center; border-radius: 24px; max-width: 100%; }
.hp-prints__paper .hp-signs__top .hp-prints__segment-item { flex: 0 0 auto; min-width: 0; padding: 0 0.85rem; }
/* Four signs do not fit one track on a phone: two by two, the same pills. */
@media (max-width: 560px) {
  .hp-prints__paper .hp-signs__top .hp-prints__segment.hp-signs__kinds { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .hp-prints__paper .hp-signs__top .hp-signs__kinds .hp-prints__segment-item { padding: 0 0.5rem; }
}
@media (max-width: 400px) { .hp-prints__paper .hp-signs__top .hp-prints__segment-item { padding: 0 0.7rem; font-size: 0.9rem; } }
/* What goes on the sign, drawn over the sheet in its own inches: hems, grommets, pockets, slits, the stake's legs. */
.hp-signs__marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
/* The stakes in the order box: the word over its count. */
.hp-signs__stakes .hp-prints__stepper { margin-top: 0.35rem; }