/* System keeps its workflow; only the narrow-screen mosaic toolbar changes. */
@media (max-width: 900px) {
  header:has([aria-label="Qualidade do mosaico"]) {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    padding-top: max(8px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
  }
  header:has([aria-label="Qualidade do mosaico"]) > [role="group"] { margin-left: auto; }
  header:has([aria-label="Qualidade do mosaico"]) > .ml-auto {
    flex: 0 0 100%;
    max-width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  header:has([aria-label="Qualidade do mosaico"]) > .ml-auto > * { flex-shrink: 0; }
  header:has([aria-label="Qualidade do mosaico"]) button,
  header:has([aria-label="Qualidade do mosaico"]) select { min-height: 48px; white-space: nowrap; }
  header:has([aria-label="Qualidade do mosaico"]) select { max-width: 190px; }
  header:has([aria-label="Qualidade do mosaico"]) button { min-width: 48px; }
}