/* Native Performance report (test) (public/tools/reporting-native-performance.html).
   Page layout only; every component is a ds-* class from design-system.css,
   every value a token. Borders separate, nothing at rest has a shadow. */
.npr-hero { padding: var(--s-6) 0 var(--s-4); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--s-5); }
.npr-title { margin-top: var(--s-2); }
.npr-lede { margin-top: var(--s-2); max-width: 64ch; }
.npr-wrap, .npr-app, .npr-body, .npr-cols { display: grid; gap: var(--s-4); }
.npr-wrap { padding-bottom: var(--s-12); }
.npr-skel { height: var(--s-20); }
.npr-controls, .npr-custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.npr-controls .ds-select, .npr-custom .ds-input, .npr-custom .ds-btn, .npr-back, .npr-pager .ds-btn, .npr-toolbar .ds-input { min-height: 44px; }
.npr-controls .ds-select { min-width: 240px; max-width: 100%; }
.npr-custom .ds-error { flex-basis: 100%; margin: 0; }
.npr-flags > summary.ds-card-head { min-height: 44px; cursor: pointer; }
.npr-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.npr-kpi { min-width: 0; }
.npr-kpi-hero { grid-column: 1 / -1; }
.npr-tone-accent { border-top: 3px solid var(--accent); }
.npr-tone-ok { border-top: 3px solid var(--success); }
.npr-tone-warn { border-top: 3px solid var(--warn); }
.npr-sub, .npr-kpi .npr-notyet { margin-top: var(--s-1); font-size: var(--text-xs); color: var(--ink-3); }
.npr-sub-est { color: var(--warn-ink); font-weight: 600; }
.npr-notyet { color: var(--ink-3); font-style: italic; font-size: var(--text-sm); }
.npr-card-body { gap: 0; }
.npr-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.npr-line:last-of-type { border-bottom: 0; }
.npr-line > :last-child { white-space: nowrap; text-align: right; }
.npr-line-sub { color: var(--ink-3); font-size: var(--text-xs); }
.npr-card-body .ds-help { margin: var(--s-2) 0 0; }
.npr-nopm { margin: 0; font-size: var(--text-sm); }
.npr-list { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-1); font-size: var(--text-sm); color: var(--ink-2); }
.npr-flag-list { list-style: none; padding-left: 0; }
.npr-flag-list li { padding: var(--s-2) var(--s-3); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.npr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.npr-toolbar .ds-input { max-width: 320px; }
.npr-card-body .ds-table-wrap { margin-top: var(--s-2); }
.npr-pager { margin-top: var(--s-3); flex-wrap: wrap; }
@media (min-width: 720px) {
  .npr-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .npr-kpi-hero { grid-column: span 2; }
  .npr-cols { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (min-width: 1024px) {
  .npr-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .npr-kpi-hero { grid-column: span 1; }
}
@media (max-width: 640px) { .npr-line > :last-child { white-space: normal; } }