/* Use the blog's fonts, colors, and thin rules; keep the dashboard in a readable column. */
.analytics-page { max-width: 1050px; margin-inline: auto; }
#analytics { font-family: var(--sans-serif-font); line-height: 1.6; }
#analytics p { margin: 0; }
#analytics .analytics-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1.5rem; margin: 1rem 0 1.75rem; font-size: 0.7rem; color: var(--meta-color); }
.analytics-meta span[aria-hidden] { margin-inline: 0.3rem; }
.analytics-muted { color: var(--meta-color); }
#analytics .analytics-totals { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0 0 1.5rem; border-bottom: 0.5px solid var(--divider-color); }
.analytics-totals > div + div { border-inline-start: 0.5px solid var(--divider-color); padding-inline-start: 2rem; }
.analytics-totals dt { font-size: 0.7rem; color: var(--meta-color); }
.analytics-totals dd { margin: 0.3rem 0 0; font-size: 1.8rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.analytics-section { padding-block: 1.5rem; border-bottom: 0.5px solid var(--divider-color); }
.analytics-section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.9rem; }
#analytics h2 { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.5; }
.analytics-section-heading > span { font-size: 0.65rem; }
.analytics-ranges { display: flex; gap: 1rem; font-size: 0.65rem; }
.analytics-ranges button { appearance: none; padding: 0 0 0.15rem; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--meta-color); font: inherit; cursor: pointer; line-height: 1.6; }
.analytics-ranges button[aria-pressed="true"] { color: var(--primary-color); border-bottom-color: currentColor; }
.analytics-ranges button:hover { color: var(--primary-color); }
.analytics-ranges button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; }
#analytics .analytics-chart { display: block; width: 100%; margin: 0; }
.analytics-chart svg { display: block; width: 100%; height: 190px; overflow: visible; }
.analytics-chart text { fill: var(--meta-color); font: 11px var(--sans-serif-font); }
.analytics-chart .grid { stroke: var(--divider-color); stroke-width: 0.5; }
.analytics-chart .trend { fill: none; stroke: var(--primary-color); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.analytics-chart .area { fill: var(--primary-color); opacity: 0.06; }
.analytics-chart .point { fill: var(--primary-color); }
#analytics .analytics-chart figcaption { color: var(--meta-color); font: 0.65rem/1.6 var(--sans-serif-font); text-align: left; margin-top: 0.4rem; }
#analytics .analytics-daily-data { margin-top: 0.5rem; font-size: 0.65rem; color: var(--meta-color); }
#analytics summary { cursor: pointer; }
.analytics-table { overflow-x: auto; }
#analytics table { width: 100%; margin: 0; border-collapse: collapse; border-radius: 0; table-layout: fixed; font-size: 0.75rem; }
#analytics thead, #analytics tbody, #analytics tr { background: transparent; color: inherit; }
#analytics th, #analytics td { padding: 0.65rem 0; background: transparent; border: 0; border-bottom: 0.5px solid var(--divider-color); text-align: left; }
#analytics th { color: var(--meta-color); font-size: 0.6rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; }
#analytics tr:last-child td { border-bottom: 0; }
#analytics th:last-child, #analytics td:last-child { width: 4rem; text-align: right; font-variant-numeric: tabular-nums; }
#analytics #analytics-popular-empty { font-size: 0.75rem; padding-block: 0.5rem; }
#analytics .analytics-about { margin-top: 1rem; color: var(--meta-color); font-size: 0.65rem; }
#analytics .analytics-about p { margin-top: 0.6rem; max-width: 46rem; }
#analytics [hidden] { display: none; }
@media (max-width: 600px) {
  .analytics-totals > div + div { padding-inline-start: 0.75rem; }
  .analytics-totals dt { font-size: 0.6rem; }
  .analytics-totals dd { font-size: 1.5rem; }
  .analytics-ranges { gap: 0.75rem; }
  .analytics-chart svg { height: 170px; }
}