@layer components {
  .report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }
  .report-toolbar-controls {
    display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
    gap: var(--spacing-md); margin-left: auto;
  }
  .report-grouping { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm); }
  .report-grouping-options { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
  .report-grouping > span { color: var(--color-text-muted); font-size: 0.875rem; }
  .report-date-grouping { position: relative; font-size: 0.8125rem; }
  .report-date-grouping > summary { min-height: 36px; gap: 0.5rem; }
  .report-date-basis > summary { min-width: 155px; }
  .report-date-basis > summary .date-range-chevron { margin-left: auto; }
  .report-date-grouping[open] > summary { border-color: var(--color-gray-400); }
  .report-date-grouping[open] .date-range-chevron { transform: rotate(180deg); }
  .report-date-grouping-label { color: var(--color-text-muted); }
  .report-date-grouping-menu {
    position: absolute; z-index: 30; right: 0; top: calc(100% + 0.5rem);
    width: 208px; padding: 0.375rem; background: white;
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgb(15 23 42 / 14%), var(--shadow-sm);
  }
  .report-date-grouping-menu .report-grouping { display: block; }
  .report-date-grouping-menu button {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 0.5rem 0.625rem; border: 0; border-radius: var(--radius-md);
    background: none; color: var(--color-text); font: inherit; text-align: left; cursor: pointer;
  }
  .report-date-grouping-menu button:hover,
  .report-date-grouping-menu button[aria-pressed="true"] { background: var(--color-gray-100); }
  .report-date-grouping-menu small { display: block; margin-top: 0.125rem; color: var(--color-text-muted); font-size: 0.6875rem; }
  .report-date-grouping :focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
  .report-date-basis-control { display: flex; align-items: center; gap: 0.375rem; }
  .report-help { position: relative; display: flex; }
  .report-help-trigger {
    display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text-muted); cursor: help;
  }
  .report-help-trigger:hover { background: var(--color-gray-100); color: var(--color-text); }
  .report-help-trigger:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
  .report-help-tooltip {
    position: absolute; z-index: 40; right: 0; top: 100%;
    width: min(320px, calc(100vw - 4rem)); padding: 0.75rem;
    background: var(--color-text); color: white; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); font-size: 0.75rem; line-height: 1.6;
  }
  .report-chart { margin-bottom: var(--spacing-lg); }
  .report-chart h2 { font-size: 1.5rem; }
  .report-plot { margin-top: var(--spacing-lg); }
  .report-table-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); margin: var(--spacing-lg) 0 var(--spacing-sm); }
  .report-table-heading h2 { font-size: 1rem; font-weight: 600; }
  .stat-card > .report-table-heading { margin-top: 0; }
  .report-table-controls { margin-bottom: var(--spacing-md); }
  .report-table caption { text-align: left; font-weight: 600; margin-bottom: var(--spacing-sm); }
  .report-table-scroll { overflow-x: auto; }
  .report-table th:not(:first-child), .report-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
  .report-table .report-proportion { background-color: rgb(calc(255 - 200 * var(--report-proportion)) calc(255 - 200 * var(--report-proportion)) calc(255 - 200 * var(--report-proportion))); color: black; }
  .report-table .report-proportion-dark { color: white; }
}