.visitor-counter {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding-inline-start: var(--s3);
  border-inline-start: var(--line) solid var(--rule);
  color: var(--ink-soft);
  font: 700 var(--text-meta) / 1 var(--font-meta);
  white-space: nowrap;
}

.visitor-counter output {
  color: var(--accent);
  font: 900 var(--text-meta) / 1 var(--font-meta);
  font-variant-numeric: tabular-nums;
}

.visitor-counter[data-state="error"] output {
  color: var(--danger);
  font-weight: 700;
}

.visitor-statistics-panel .section-title {
  align-items: start;
}

.visitor-statistics-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: var(--line) solid var(--rule);
  border-inline-start: var(--line) solid var(--rule);
}

.visitor-statistics-metrics article {
  min-inline-size: 0;
  padding: var(--s4);
  border-inline-end: var(--line) solid var(--rule);
  border-block-end: var(--line) solid var(--rule);
}

.visitor-statistics-metrics span,
.visitor-statistics-metrics small {
  display: block;
  color: var(--ink-soft);
}

.visitor-statistics-metrics strong {
  display: block;
  margin-block: var(--s2);
  color: var(--ink);
  font: 900 var(--text-stat) / 1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.visitor-statistics-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-block-start: var(--s6);
}

.visitor-monthly-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-block-start: var(--s6);
}

.visitor-monthly-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.visitor-monthly-table caption {
  text-align: start;
  margin-block: var(--s3);
  color: var(--ink-soft);
}

.visitor-monthly-table th,
.visitor-monthly-table td {
  padding: var(--s3);
  border-block-end: var(--line) solid var(--rule);
  text-align: start;
}

.visitor-monthly-table td,
.visitor-monthly-table thead th:last-child {
  text-align: end;
}

#visitor-history-note {
  color: var(--ink-soft);
  line-height: 1.7;
}

.visitor-statistics-actions .form-status {
  flex: 1 1 100%;
  margin: 0;
}

@media (max-width: 800px) {
  .visitor-statistics-panel .section-title {
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .utility-summary {
    flex-wrap: wrap;
    gap: var(--s2);
    padding-block: var(--s2);
  }

  .visitor-statistics-metrics {
    grid-template-columns: 1fr;
  }

  .visitor-statistics-panel .section-title {
    display: grid;
  }
}