/* stats: /stats ((misc)/stats/client.tsx), plus uPlot's stylesheet. */
/* The original's pb-16 loses to .wide-shell's padding-block-end
   (globals.css comes later in the cascade), so no bottom padding. */
.stats {
  font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
.stats [hidden] { display: none !important; }
.stats-kicker {
  font-size: .875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}
.stats-title {
  margin-top: .5rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 500;
  letter-spacing: -.025em;
}
.stats-lede {
  margin-top: .75rem;
  max-width: 42rem;
  font-size: .875rem;
  line-height: 1.5rem;
  color: hsl(var(--muted-foreground));
}
@media (min-width: 640px) {
  .stats-title { font-size: 2.25rem; line-height: 2.5rem; }
}

/* MetricStrip */
.stats-metrics {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: .75rem;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--border));
}
@media (min-width: 1024px) {
  .stats-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stats-metric {
  background-color: hsl(var(--background));
  padding: 1.25rem;
}
.stats-metric-value {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) {
  .stats-metric-value { font-size: 1.5rem; line-height: 2rem; }
}
.stats-metric-label {
  margin-top: .5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  line-height: 1rem;
  color: hsl(var(--muted-foreground));
}
.stats-trend {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: rgb(225 29 72);
}
.stats-trend.is-up { color: rgb(5 150 105); }
.dark .stats-trend { color: rgb(251 113 133); }
.dark .stats-trend.is-up { color: rgb(52 211 153); }
.stats .size-3 { width: .75rem; height: .75rem; }
.stats .size-4 { width: 1rem; height: 1rem; }
.stats .size-5 { width: 1.25rem; height: 1.25rem; }

/* Tabs (page and audience dimension) */
.stats-tabs, .stats-dims {
  display: flex;
  border-bottom: 1px solid hsl(var(--border));
}
.stats-tabs { margin-top: 3rem; }
.stats-dims { margin-top: 1.5rem; flex-wrap: wrap; }
.stats-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  line-height: 1.25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  color: hsl(var(--muted-foreground));
}
.stats-dim-tab { padding-left: .75rem; padding-right: .75rem; }
.stats-tab:hover, .stats-tab[aria-selected="true"] { color: hsl(var(--foreground)); }
.stats-tab-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: hsl(var(--foreground));
}
.stats-tab[aria-selected="false"] .stats-tab-line { display: none; }

/* Sections */
.stats-section { padding-top: 2.5rem; }
.stats-h2 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
  letter-spacing: -.025em;
}
.stats-desc {
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.5rem;
  color: hsl(var(--muted-foreground));
}
.stats-h3 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}
.stats-chart { margin-top: 1.5rem; min-height: 260px; }
.stats-chart-empty {
  display: flex;
  height: 260px;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}
.stats-audience { margin-top: 3rem; }

/* DimensionTable */
.stats-table { margin-top: 1.5rem; }
.stats-table-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  border-bottom: 1px solid hsl(var(--border));
  padding-bottom: .75rem;
  font-size: .75rem;
  line-height: 1rem;
  color: hsl(var(--muted-foreground));
}
.stats-table-head span + span { text-align: right; }
.stats-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  align-items: center;
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.stats-table-row:not(:last-child) { border-bottom: 1px solid hsl(var(--border)); }
.stats-table-label { min-width: 0; padding-right: 2rem; }
.stats-table-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: .875rem;
  line-height: 1.25rem;
}
.stats-table-track {
  margin-top: .5rem;
  height: .25rem;
  max-width: 32rem;
  background-color: hsl(var(--muted));
}
.stats-table-track > div { height: 100%; background-color: hsl(var(--foreground) / .45); }
.stats-table-value {
  text-align: right;
  font-size: .875rem;
  line-height: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--muted-foreground));
}
.stats-table-empty {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  text-align: center;
  font-size: .875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}

/* Charts tab */
.stats-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
}
.stats-periods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: .875rem;
  line-height: 1.25rem;
}
.stats-months {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: .5rem;
  font-size: .875rem;
  line-height: 1.25rem;
}
.stats-link { color: hsl(var(--muted-foreground)); }
.stats-link:hover { color: hsl(var(--foreground)); }
.stats-link.is-on {
  color: hsl(var(--foreground));
  text-decoration-line: underline;
  text-underline-offset: 8px;
}
.stats-spin, .stats-loading svg { display: flex; color: hsl(var(--muted-foreground)); }
.stats-spin svg, .stats-loading svg { animation: stats-spin 1s linear infinite; }
@keyframes stats-spin { to { transform: rotate(360deg); } }
.stats-loading {
  display: flex;
  justify-content: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.stats-charts-chart {
  margin-top: 2rem;
  min-height: 260px;
  border-bottom: 1px solid hsl(var(--border));
  padding-bottom: 2.5rem;
}
.stats-bars-grid { display: grid; }
.stats-bars { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.stats-bars:nth-last-child(n+3) { border-bottom: 1px solid hsl(var(--border)); }
@media (min-width: 768px) {
  .stats-bars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-bars:nth-child(odd) { padding-right: 2rem; }
  .stats-bars:nth-child(even) { border-left: 1px solid hsl(var(--border)); padding-left: 2rem; }
}
.stats-bars-empty {
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: .875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}
.stats-bar-rows { margin-top: 1.25rem; }
.stats-bar-row {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(8rem, 2fr) 4rem;
  align-items: center;
  gap: 1rem;
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.stats-bar-row:not(:last-child) { border-bottom: 1px solid hsl(var(--border)); }
.stats-bar-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: .875rem;
  line-height: 1.25rem;
}
.stats-bar-track { height: .375rem; background-color: hsl(var(--muted)); }
.stats-bar-track > div { height: 100%; background-color: hsl(var(--foreground) / .55); }
.stats-bar-value {
  text-align: right;
  font-size: .75rem;
  line-height: 1rem;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--muted-foreground));
}

/* History tab */
.stats-history-grid { margin-top: 2rem; display: grid; }
.stats-history-table { padding-top: 2rem; padding-bottom: 2rem; }
@media (min-width: 768px) {
  .stats-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-history-table:nth-child(odd) { padding-right: 2rem; }
  .stats-history-table:nth-child(even) { border-left: 1px solid hsl(var(--border)); padding-left: 2rem; }
}
.stats-history-empty {
  padding-top: 5rem;
  padding-bottom: 5rem;
  text-align: center;
}
.stats-history-empty-icon {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 1.75rem;
  height: 1.75rem;
  color: hsl(var(--muted-foreground));
}
.stats-history-empty p {
  margin-top: 1rem;
  font-size: .875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}

/* uPlot 1.6.32 (uplot/dist/uPlot.min.css) */
.uplot, .uplot *, .uplot *::before, .uplot *::after { box-sizing: border-box; }
.uplot {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
  width: min-content;
}
.u-title { text-align: center; font-size: 18px; font-weight: bold; }
.u-wrap { position: relative; user-select: none; }
.u-over, .u-under { position: absolute; }
.u-under { overflow: hidden; }
.uplot canvas { display: block; position: relative; width: 100%; height: 100%; }
.u-axis { position: absolute; }
.u-legend { font-size: 14px; margin: auto; text-align: center; }
.u-inline { display: block; }
.u-inline * { display: inline-block; }
.u-inline tr { margin-right: 16px; }
.u-legend th { font-weight: 600; }
.u-legend th > * { vertical-align: middle; display: inline-block; }
.u-legend .u-marker { width: 1em; height: 1em; margin-right: 4px; background-clip: padding-box !important; }
.u-inline.u-live th::after { content: ":"; vertical-align: middle; }
.u-inline:not(.u-live) .u-value { display: none; }
.u-series > * { padding: 4px; }
.u-series th { cursor: pointer; }
.u-legend .u-off > * { opacity: 0.3; }
.u-select { background: rgba(0,0,0,0.07); position: absolute; pointer-events: none; }
.u-cursor-x, .u-cursor-y { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.u-hz .u-cursor-x, .u-vt .u-cursor-y { height: 100%; border-right: 1px dashed #607D8B; }
.u-hz .u-cursor-y, .u-vt .u-cursor-x { width: 100%; border-bottom: 1px dashed #607D8B; }
.u-cursor-pt {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  border: 0 solid;
  pointer-events: none;
  will-change: transform;
  background-clip: padding-box !important;
}
.u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off { display: none; }