/* Only what pico does not cover: the charts and a few layout tweaks. */

.narrow { max-width: 30rem; }
.muted { color: var(--pico-muted-color); }
.error { border-left: 4px solid var(--pico-del-color); }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.actions button, .actions [role="button"] { width: auto; margin: 0; }
td.actions button { padding: 0.25rem 0.5rem; font-size: 0.85em; }
.stats article { margin: 0; padding: 0.75rem; text-align: center; }
.stats article p { margin: 0; font-size: 1.4em; }

.chart { margin: 0 0 1.5rem; }
.chart figcaption { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 0.25rem; }
.chart svg { width: 100%; height: auto; font-size: 11px; }
.chart svg text { fill: var(--pico-muted-color); }
.chart .grid { stroke: var(--pico-muted-border-color); stroke-width: 1; }
.chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart .reference { stroke-width: 1.5; stroke-dasharray: 6 4; }
.legend { display: inline-flex; gap: 0.35rem; align-items: center; font-size: 0.85em; }
.chart .swatch { width: 0.8rem; height: 0.8rem; }