/* «Аналитика сайта» (web/site-insights.js): the owner's screen of one site (web/owner-site-insights.js) and the chart and
   «Сейчас на сайте» of the creators' «Аналитика сайтов». The bars are the map's restrained blue (web/traffic.css). */
.osins { display: grid; gap: var(--space-grid, 12px); min-width: 0; }
.sins-card { --sins-accent: 57 135 229; display: grid; gap: 12px; min-width: 0; }
.sins-card, .osins-controls { --muted: #a3a3ad; }
.sins-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.sins-head h2 { margin: 0; font-size: 17px; }
.sins-metrics { flex-wrap: wrap; max-width: 100%; }
.sins-metrics button { flex: 1 1 auto; white-space: nowrap; }
.sins-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.sins-facts > div { display: grid; gap: 1px; min-width: 0; }
.sins-facts span { color: var(--muted); font-size: 12px; }
.sins-facts strong { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sins-facts small { font-size: 12px; }
.sins-chart { display: block; width: 100%; height: auto; overflow: visible; }
.sins-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sins-axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.sins-hit { fill: transparent; }
.sins-bar { fill: rgb(var(--sins-accent) / .62); transition: fill .12s var(--ease); }
.sins-day.is-last .sins-bar { fill: rgb(var(--sins-accent) / .9); }
.sins-day:hover .sins-bar { fill: rgb(var(--sins-accent)); }
.sins-days summary { min-height: 40px; display: flex; align-items: center; color: var(--text-2); font-size: 14px; cursor: pointer; }
.sins-days .table-wrap { max-height: 360px; overflow: auto; }
.sins-days th, .sins-days td { font-variant-numeric: tabular-nums; }
.sins-days td { text-align: right; }
/* «Сейчас на сайте»: three figures, the live one with a slow pulse (none when reduced motion is asked). */
.sins-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.sins-now-item { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-2); min-width: 0; }
.sins-now-item strong { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sins-now-item span:last-child { color: var(--muted); font-size: 12px; }
.sins-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: sins-pulse 2.4s var(--ease) infinite; }
@keyframes sins-pulse { 0% { box-shadow: 0 0 0 0 rgb(90 196 143 / .45); } 70% { box-shadow: 0 0 0 8px rgb(90 196 143 / 0); } 100% { box-shadow: 0 0 0 0 rgb(90 196 143 / 0); } }
@media (prefers-reduced-motion: reduce) { .sins-dot { animation: none; } .sins-bar { transition: none; } }
.sins-online .tmap { padding: 0; border: 0; background: transparent; }
.sins-countries { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sins-countries li { display: inline-flex; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); font-size: 13px; }
.sins-countries strong { font-variant-numeric: tabular-nums; }
/* The owner's screen: the period on top, the figures five to a row when wide. */
.osins-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.osins-controls .field-hint { margin: 0; }
.osins-controls .segmented { flex-wrap: wrap; max-width: 100%; }
.osins-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.osins-kpis small { font-size: 12px; }
.osins-blocks { gap: 20px; }
@media (max-width: 899px) { .osins-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 619px) {
  .osins-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sins-now { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sins-now-item:first-child { grid-column: 1 / -1; }
  .sins-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .sins-metrics button { white-space: normal; line-height: 1.2; }
  .sins-axis { font-size: 13px; }
}