/* Shared workspace rhythm. Keep compact table actions and print layouts separate. */
@media screen {
  :root { --space-control: 8px; --space-group: 16px; --space-section: 24px; }
  main .heading { flex-wrap: wrap; gap: var(--space-group) var(--space-section); }
  main .heading > div:first-child { min-width: 0; flex: 1 1 320px; }
  main .heading > .actions { flex: 0 1 auto; max-width: 100%; }
  main :is(.actions, .formactions) { align-items: center; gap: var(--space-control) 12px; flex-wrap: wrap; }
  /* Action rows outside a card need their own boundary before the next section. */
  main :is(.actions + .panel, .actions + .report-controls, .actions + .filters, .actions + .heading) { margin-top: var(--space-section); }
  main .panel + .actions { margin-bottom: var(--space-section); }
  main :is(.formgrid, .expense-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-section) var(--space-group); }
  main :is(.field, .formgrid > div, .expense-grid > div, .report-date-field) { min-width: 0; }
  main :is(.formgrid, .expense-grid) :is(input, select, textarea) { max-width: 100%; }
  main .formactions { margin-top: var(--space-section); }
  main .formactions > .button { min-height: 44px; }
  main .sectionhead { flex-wrap: wrap; gap: var(--space-control) var(--space-group); }
  main .filters { flex-wrap: wrap; gap: 12px var(--space-group); }
  main .filters :is(.button, button, input:not([type=hidden]), select) { min-height: 44px; }
  main .filters > :is(input, select) { min-width: 0; }
  main :is(.actions, .formactions) > form { margin: 0; }
  main :is(.actions, .formactions) > .button { max-width: 100%; white-space: normal; text-align: center; }
  main :is(.actions, .formactions) .help { margin: 0; }
}
@media screen and (max-width: 700px) {
  /* Legacy mobile navigation wraps flex items. A column menu must scroll
     vertically instead of wrapping its remaining links into extra columns. */
  .design-preview .design-rail nav {
    flex-wrap: nowrap;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
  }
  .design-preview .design-rail .nav-title {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  main .heading > div:first-child { flex-basis: auto; }
  main :is(.formgrid, .expense-grid) { grid-template-columns: minmax(0, 1fr); }
  main :is(.formgrid, .expense-grid) > :is(.full, .wide) { grid-column: 1 / -1; }
}