/* The downloads page. Colour and type tokens come from /styles.css. Everything
   sits on the dark panel colour, which sets its own light tokens so it reads the
   same at any depth, as the support matrix table does. */
.downloads__panel { margin-top: 8px; margin-bottom: 8px; }
.downloads__sheet {
  --ink: #eaf6fa; --ink-muted: rgba(234, 246, 250, 0.72); --ink-faint: rgba(234, 246, 250, 0.68);
  --cyan: #8fdcec; --cyan-dim: rgba(143, 220, 236, 0.55); --line: rgba(234, 246, 250, 0.16);
  color: var(--ink); background: var(--panel); border-radius: 12px; padding: clamp(20px, 4vw, 36px);
}
.downloads h1 { margin: 0 0 12px; }
.downloads__total {
  margin: 0; font-size: clamp(38px, 6vw, 56px); line-height: 1.1; font-weight: 600;
  letter-spacing: -0.02em; color: var(--cyan); font-variant-numeric: tabular-nums;
}
.downloads__label { margin: 4px 0 24px; color: var(--ink-muted); }

.downloads__boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.downloads__box, .downloads__trend { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.downloads__sheet h2 {
  margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.downloads__list { list-style: none; margin: 0; padding: 0; }
.downloads__list li { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; color: var(--ink-muted); }
.downloads__list b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

.downloads__trend { margin-top: 16px; }
.downloads__trend--empty {
  border-style: dashed; border-color: var(--cyan-dim); padding: 26px 16px;
  text-align: center; color: var(--ink-muted);
}
.downloads__trend p { margin: 0; }
.downloads__chart { display: block; width: 100%; height: auto; }
.downloads__chart polyline {
  fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.downloads__axis { display: flex; justify-content: space-between; gap: 16px; margin-top: 6px; font-size: 12px; color: var(--ink-faint); }

.downloads__note { margin: 14px 0 0; font-size: 14px; color: var(--ink-muted); }
.downloads__note + .downloads__note { margin-top: 2px; }
.downloads__unavailable { margin: 0; color: var(--ink-muted); }