/* Reports: one report read several ways — the numbers against the span
   before, over time, by day of the week, and by who or where. */

.report-controls { display: grid; gap: var(--sp-4); margin-block-end: var(--sp-6); }
.report-controls__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.report-controls .field { margin-block-end: 0; }
.report-controls .field__input { inline-size: auto; block-size: var(--control); }
.report-controls__custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4); }
.report-span { color: var(--text-muted); }

.report-scope {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); margin-block-end: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--brand-soft);
}
.report-scope strong { color: var(--brand-text); }

.report { display: grid; gap: var(--sp-7); }
.report h2 { margin: 0 0 var(--sp-4); font-size: var(--fs-title-m); }
.report__pair { display: grid; gap: var(--sp-6); }
@media (min-width: 1100px) { .report__pair { grid-template-columns: 1fr 1fr; align-items: start; } }
.report__panel { padding: var(--sp-6); }
.report__note { margin: 0 0 var(--sp-4); color: var(--text-muted); }

/* The chart's own box. The canvas is taken out of the flow, so it can never
   hold the box wider than the page when the window narrows. */
.report-chart { padding: var(--sp-5); }
.report-chart + .report-chart { margin-block-start: var(--sp-5); }
.chart__stage { position: relative; inline-size: 100%; block-size: 22rem; min-inline-size: 0; overflow: hidden; }
.chart__stage canvas { position: absolute; inset-block-start: 0; inset-inline-start: 0; display: block; }

/* Bars drawn in the page itself: a name, a track, a figure. The figure is
   always written out — a bar's length is never the only way to read it. */
.bars { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.bars__row { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); }
.bars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars__track { block-size: var(--sp-3); border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; }
.bars__fill { display: block; block-size: 100%; inline-size: 0; border-radius: var(--r-pill); background: var(--chart-1); }
.bars__fill--good { background: var(--success); }
.bars__fill--bad { background: var(--danger); }
.bars__row--busiest .bars__label { font-weight: 600; }
.bars__value { min-inline-size: 4.5rem; text-align: end; }
.bars__moved { grid-column: 2 / -1; color: var(--text-muted); font-size: var(--fs-label); }
.bars__moved--good { color: var(--success); }
.bars__moved--bad { color: var(--danger); }

/* A share inside a table cell: the figure, with a thin bar under it. */
.share { display: grid; gap: var(--sp-1); min-inline-size: 6rem; }
.share .bars__track { block-size: var(--sp-2); }

@media print {
  /* A report on paper is the report: no navigation, no controls, and ink on
     white whatever theme the screen was in. */
  :root { color-scheme: light; }
  .shell__nav, .topbar, .toasts, .skip-link, .report-controls, .page__actions, .pager, .report-scope .btn { display: none !important; }
  .shell, .shell__main, .page { display: block; min-block-size: 0; max-inline-size: none; margin: 0; padding: 0; }
  .report__panel, .report-chart, .card { break-inside: avoid; box-shadow: none; }
}