/*
 * Copyright (c) 2026 by Gabriele Proietti Mattia <pm.gabriele@gmail.com>.
 *
 * All Rights Reserved.
 */

/*
 * What the statistics and the export adds on top of styles.css, written with the tokens of design-system.css and never
 * with values of its own. The tests read this file with the others: a rule written twice anywhere,
 * a token used and not defined, a design system token written again, all fail.
 */

.stats__periods { margin-bottom: var(--space-1); }
.stats__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.stats__line { font-weight: var(--fw-medium); }
.stats__list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.stats__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.stats__name { flex: 1 1 8em; min-width: 0; overflow-wrap: anywhere; font-weight: var(--fw-medium); }
.stats__meta { font-size: var(--fs-body-sm); color: var(--text-muted); }
.stats__row--split .bar { flex: 1 1 100%; }

.bar { width: 100%; height: var(--space-2); border-radius: var(--radius-lg); background: var(--state-ok-soft); overflow: hidden; }

/* the bar is as wide as its track and drawn at the exact share of it that motion.js sets as a
   scale, so that it grows in from the left and the browser does not lay the page out for it */
.bar__fill {
  width: 100%;
  height: 100%;
  background: var(--danger);
  transform: scaleX(0);
  transform-origin: left center;
  animation: grow var(--dur-slow) var(--ease-out) both;
}

a.button[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }

a.button { text-decoration: none; }