/* The reports page (reports/*): where its controls sit. The report itself is
   the kit's — section cards, chart cards, tables in flush cards, tabs. */
@layer components {
  /* The report's period: the presets as segmented tabs and a from–to form,
     on one line, wrapping when narrow. */
  .report-controls {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    justify-content: space-between;
  }

  .report-controls__range {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}