/* Moderation reports example: the layout the design system does not provide yet.
   Each rule is a candidate for promotion (whiteboard/planning/reference-reports.md). */

/* The page heading, with when the data was updated and Refresh (a .ds-btn-group) at its right end. */
.reports-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-space-tight) var(--ds-space-block);
}
.reports-heading > h1 { margin: 0; }
.reports-updated { margin-inline-start: auto; }

/* A text button at the end of a sentence: no box of its own, on the text's line. */
.ds-btn.reports-inline { min-width: 0; min-height: 0; padding: 0 0.15em; font-size: inherit; vertical-align: baseline; }

/* The page has two sections, which the container spaces apart: the heading
   with its description, then the main content with the controls that act on it.
   The controls sit a block above what they act on; a row's heading sits tight
   to its cards; rows are a section apart. */
.reports-view { display: grid; gap: var(--ds-space-tight); }
.reports-main { display: grid; gap: var(--ds-space-block); }
.reports-view > :is(h1, h2, p, nav) { margin: 0; }
.reports-main > * { margin: 0; }
.reports-rows { display: grid; gap: var(--ds-space-section); }
.reports-row > h2 { margin: 0 0 var(--ds-space-tight); }

/* The subject filter at the right end of the second row. */
.reports-subnav-split > .ds-filter-bar { margin-inline-start: auto; }

/* Buttons that only work with JavaScript. */
html:not(.js) .reports-js-only { display: none; }