/* By the Numbers (/numbers/): dashboard tiles, sparklines and the series chart. Colours come from the site tokens,
   which html[data-fs-theme="dark"] redefines in site.css, so no dark block is needed here. */

.cvn-group{ margin:28px 0 8px; }
.cvn-group-title{ font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cv-ink-2); margin:0 0 12px; padding-bottom:6px; border-bottom:2px solid var(--cv-line); }
.cvn-tiles{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.cvn-tile{ display:grid; gap:4px; align-content:start; padding:14px 16px 12px; background:var(--cv-surface); border:1px solid var(--cv-line); border-radius:var(--cv-radius); color:var(--cv-ink); text-decoration:none; min-width:0; }
.cvn-tile:hover, .cvn-tile:focus-visible{ border-color:var(--cv-blue); box-shadow:0 0 0 1px var(--cv-blue); text-decoration:none; }
.cvn-tile-label{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cv-ink-3); }
.cvn-tile-value{ font-size:26px; line-height:1.15; font-weight:700; color:var(--cv-ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.cvn-tile-go{ font-size:20px; color:var(--cv-blue); }
.cvn-tile-when{ font-size:13px; color:var(--cv-ink-3); }
.cvn-tile-sub{ font-size:13px; color:var(--cv-ink-2); line-height:1.35; }

.cvn-spark{ display:block; width:100%; height:48px; margin:6px 0 2px; overflow:visible; }
.cvn-spark .cvn-line{ stroke-width:1.6; vector-effect:non-scaling-stroke; }
.cvn-spark .cvn-zero{ vector-effect:non-scaling-stroke; }

.cvn-line{ fill:none; stroke:var(--cv-blue); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.cvn-dot{ fill:var(--cv-blue); stroke:var(--cv-surface); stroke-width:1.5; }
.cvn-zero{ stroke:var(--cv-ink-3); stroke-width:1; stroke-dasharray:3 3; }
.cvn-grid{ stroke:var(--cv-line); stroke-width:1; }
.cvn-grid.cvn-zero{ stroke:var(--cv-ink-3); }
.cvn-axis, .cvn-tick{ stroke:var(--cv-line-2); stroke-width:1; }
.cvn-ylab, .cvn-xlab{ fill:var(--cv-ink-3); font-size:12px; font-variant-numeric:tabular-nums; }
.cvn-ylab{ text-anchor:end; }
.cvn-xlab{ text-anchor:middle; }
.cvn-cross{ stroke:var(--cv-ink-3); stroke-width:1; }
.cvn-hover[hidden]{ display:none; }

.cvn-chartcard{ margin:20px 0; }
.cvn-chart{ margin:0; }
.cvn-chart[hidden]{ display:none; }
.cvn-chart svg{ display:block; width:100%; height:auto; touch-action:pan-y; }
.cvn-readout{ min-height:1.4em; font-size:14px; color:var(--cv-ink-2); font-variant-numeric:tabular-nums; }
.cvn-range{ display:flex; gap:6px; margin:0 0 10px; }
.cvn-range-btn{ font:inherit; font-size:13px; padding:4px 12px; border:1px solid var(--cv-line-2); border-radius:999px; background:var(--cv-surface); color:var(--cv-ink-2); cursor:pointer; }
.cvn-range-btn.is-active{ background:var(--cv-blue-soft); border-color:var(--cv-blue); color:var(--cv-ink); font-weight:600; }

.cvn-others{ list-style:none; margin:0; padding:0; display:grid; gap:6px 18px; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); font-size:14.5px; }

@media (max-width:600px){
  .cvn-tiles{ grid-template-columns:minmax(0, 1fr); }
  .cvn-tile-value{ font-size:22px; }
  .cvn-ylab, .cvn-xlab{ font-size:24px; }
}