/* stats page — writing-by-the-numbers */

.stats-status { font-size: 12px; margin-top: 10px; }

/* ── Headline stat tiles ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.stat {
  border: 1px dashed var(--line-strong);
  background: var(--card);
  padding: 16px 16px 14px;
}
.stat-n { font-size: 24px; font-weight: 600; color: var(--fg); line-height: 1.2; }
.stat-k {
  margin-top: 6px; font-size: 10px; color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* ── Writing-activity heatmap ──
   Cell intensity is driven by the day's total read-time and coloured from the
   active theme accent (mixed toward the card surface), so the calendar tracks
   whatever palette/mode is active — forest, dracula, nord, etc. */
/* align-items: stretch makes the day-of-week gutter match the cell grid's
   height, so the weekday labels stay aligned even as the (square) cells grow. */
.cal-wrap { display: flex; gap: 0; align-items: stretch; }
/* Fixed day-of-week gutter — sits OUTSIDE the scroller so Mon/Wed/Fri stay
   visible while the weeks scroll horizontally on narrow screens (matches
   GitHub). The pad offsets the labels down past the month-label row; the
   weekday rows then flex to the same height as the cell rows beside them. */
.cal-gutter { flex-shrink: 0; display: flex; flex-direction: column; }
.cal-gutter-pad { height: 11px; margin-bottom: 5px; flex-shrink: 0; }
.cal-weekdays { flex: 1; display: flex; flex-direction: column; gap: 3px; width: 32px; }
.cal-weekdays span { flex: 1; display: flex; align-items: center; font-size: 9px; color: var(--dim); }

.cal-scroll { overflow-x: auto; flex: 1; min-width: 0; }
.cal-months {
  display: flex; gap: 3px; height: 11px; line-height: 11px; margin-bottom: 5px;
  font-size: 9px; color: var(--dim); letter-spacing: 0.04em;
}
/* Columns (and their month labels) flex to fill the full width as equal-width
   tracks; min-width keeps a floor so they don't shrink below 11px on narrow
   screens — there the grid overflows and .cal-scroll scrolls instead. */
.cal-month { flex: 1 1 0; min-width: 11px; white-space: nowrap; overflow: visible; }
.cal-cols { display: flex; gap: 3px; }
.cal-col { flex: 1 1 0; min-width: 11px; display: flex; flex-direction: column; gap: 3px; }
.cal-cell {
  width: 11px; height: 11px; flex: 0 0 11px;
  border-radius: 2px; background: var(--line);
}
/* Grid cells fill their column width and stay square (the base 11px above is
   kept for the fixed-size legend swatches). */
.cal-col .cal-cell { width: 100%; height: auto; aspect-ratio: 1; flex: none; }
.cal-cell[data-l="0"] { background: var(--line); }
.cal-cell[data-l="1"] { background: color-mix(in srgb, var(--accent) 30%, var(--card)); }
.cal-cell[data-l="2"] { background: color-mix(in srgb, var(--accent) 55%, var(--card)); }
.cal-cell[data-l="3"] { background: color-mix(in srgb, var(--accent) 80%, var(--card)); }
.cal-cell[data-l="4"] { background: var(--accent); }
.cal-future { background: transparent; }

/* Echo marker — a centred accent dot ringed in the page bg so it reads on any
   cell shade (from empty to full-accent). Marks days that have a short note. */
.cal-cell[data-echo] { position: relative; }
.cal-cell[data-echo]::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 1.5px var(--accent);
}
.cal-echo-key { display: inline-flex; align-items: center; gap: 4px; color: var(--dim); }
.cal-echo-key .cal-cell { cursor: default; }

/* Mobile-only scroll affordance — JS (site.js) reveals it while the calendar
   overflows and the reader is still at the recent (right) edge. */
.cal-hint { font-size: 11px; margin-top: 8px; }

.cal-legend {
  display: flex; align-items: center; gap: 4px;
  margin-top: 12px; font-size: 11px;
}
.cal-legend .cal-cell { cursor: default; }
.cal-note { margin-left: 12px; }

/* ── Posts per year ── */
.year-rows { display: flex; flex-direction: column; gap: 8px; }
.year-row { display: grid; grid-template-columns: 48px 1fr 32px; gap: 12px; align-items: center; font-size: 13px; }
.year-y { color: var(--accent); }
.year-bar { height: 10px; background: var(--line); border-radius: 2px; overflow: hidden; }
.year-fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.year-n { color: var(--dim); text-align: right; font-size: 12px; }

/* ── Top tags ── */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud .chip.tag {
  cursor: pointer; text-decoration: none; border-style: solid;
  transition: border-color .15s, color .15s, transform .15s;
}
.tag-cloud .chip.tag:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.chip-n { color: var(--dim); opacity: 0.75; margin-left: 2px; }

@media (max-width: 600px) {
  .stat-n { font-size: 21px; }
}