/* Hallmark · shape: app screen · genre: modern-minimal · theme: Rim (deal 2/3, seed web-analytics)
 * nav: top bar with the wordmark, a site switcher, the period and the live count · signature: the visitors line measured in Geist Mono with every time in UTC · states: empty (no visits yet), error, full; live count polls
 * axes: dark/grotesk-sans/warm · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, analytics dashboards share a layout by convention; the hairline instrument look and the honest per-day visitor note set this one apart */
@import url("./tokens.css");
@import url("./base.css");

:root { --topbar: 60px; --control: 36px; }

body { font-variant-numeric: tabular-nums; }
h1 { font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.03em; }
h2 { font-size: var(--text-md); font-weight: 500; letter-spacing: -0.01em; }
a { color: var(--color-ink); text-decoration-color: var(--color-muted-2); }
a:hover { text-decoration-color: var(--color-accent); }
code, pre { font-family: var(--font-outlier); }
.muted { color: var(--color-muted); }
.lead { color: var(--color-ink-2); margin-top: var(--space-2xs); max-width: 70ch; }
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-modal); padding: var(--space-xs) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); }
.skip:focus-visible { top: var(--space-md); }
.tag { display: inline-block; margin-left: var(--space-xs); padding: 0 var(--space-2xs); border: 1px solid var(--color-accent-2); color: var(--color-accent-2); font-size: var(--text-xs); line-height: 1.5; }

/* ---- the instrument bar ---- */
.topbar { position: sticky; top: 0; z-index: var(--z-sticky-nav); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); min-height: var(--topbar); padding: var(--space-xs) var(--gutter); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.wordmark { font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.03em; text-decoration: none; }
.switcher { position: relative; }
.switcher summary { list-style: none; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--control); padding: 0 var(--space-sm); border: 1px solid var(--color-rule); cursor: pointer; font-weight: 500; }
.switcher summary::-webkit-details-marker { display: none; }
.switcher summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: var(--space-2xs); }
.switcher summary:hover { border-color: var(--color-muted-2); }
.switcher summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.switcher__menu { position: absolute; z-index: var(--z-dropdown); top: calc(100% + var(--space-2xs)); left: 0; min-width: 18rem; margin: 0; padding: var(--space-2xs) 0; list-style: none; background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.switcher__menu a { display: block; padding: var(--space-xs) var(--space-md); text-decoration: none; }
.switcher__menu a:hover { background: var(--color-paper-3); }
.switcher__menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--color-accent); }
.periods { display: flex; border: 1px solid var(--color-rule); }
.periods a { display: inline-flex; align-items: center; min-height: var(--control); padding: 0 var(--space-sm); font-size: var(--text-sm); text-decoration: none; color: var(--color-ink-2); border-left: 1px solid var(--color-rule); white-space: nowrap; }
.periods a:first-child { border-left: 0; }
.periods a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.periods a[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-ink); }
.periods a:focus-visible { outline-offset: -2px; }
.livecount { margin-left: auto; display: flex; align-items: baseline; gap: var(--space-xs); }
.livecount__value { font-family: var(--font-outlier); font-size: var(--text-lg); color: var(--color-accent); }
.livecount__label { font-size: var(--text-sm); color: var(--color-muted); }

/* ---- page ---- */
.main { max-width: var(--container); margin-inline: auto; padding: var(--space-xl) var(--gutter) var(--space-2xl); }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-lg); padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.notice { margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-left: 2px solid var(--color-accent-2); background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.measure { display: grid; justify-items: end; gap: var(--space-3xs); }
.measure__value { font-family: var(--font-outlier); font-size: var(--text-3xl); letter-spacing: -0.03em; line-height: 1; }
.measure__unit { font-size: var(--text-sm); color: var(--color-muted); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.chip { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 32px; padding: 0 var(--space-sm); border: 1px solid var(--color-accent); font-size: var(--text-sm); text-decoration: none; }
.chip:hover { background: var(--color-paper-2); }
.chip__x { font-size: var(--text-lg); line-height: 1; color: var(--color-accent); }
.btn { display: inline-flex; align-items: center; min-height: var(--control); padding: 0 var(--space-md); border: 1px solid var(--color-rule); color: var(--color-ink); text-decoration: none; font-weight: 500; }
.btn:hover { border-color: var(--color-muted-2); }
.btn:active { transform: translateY(1px); }

/* measurements: figures in mono, parted by hairlines */
.figures { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 var(--space-xl); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.figure { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-right: 1px solid var(--color-rule); display: grid; gap: var(--space-2xs); align-content: start; }
.figure + .figure { padding-left: var(--space-md); }
.figure:last-child { border-right: 0; }
.figure dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.figure dd { margin: 0; font-family: var(--font-outlier); font-size: var(--text-2xl); letter-spacing: -0.03em; line-height: 1.1; }
.figure__change { font-size: var(--text-xs); color: var(--color-muted); }
.figure__change--good { color: var(--color-success); }
.figure__change--bad { color: var(--color-error); }

/* ---- chart: plot stretched, labels in HTML, crosshair in sightline.js ---- */
.chart { margin: 0; }
.chart__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.chart__title { font-weight: 500; }
.chart__body { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-rows: 280px 28px; }
.chart__y { position: relative; font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); }
.chart__y span { position: absolute; right: var(--space-sm); transform: translateY(-50%); }
.chart__plot { position: relative; outline-offset: 4px; }
.chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart__grid { stroke: var(--color-rule); stroke-width: 1; }
.chart__line { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__area { fill: var(--color-accent); opacity: 0.1; }
.chart__x { position: relative; grid-column: 2; font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); }
.chart__x span { position: absolute; top: var(--space-xs); transform: translateX(-50%); white-space: nowrap; }
.chart__x span:first-child { transform: none; }
.chart__cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-muted-2); pointer-events: none; }
.chart__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-paper); pointer-events: none; }
.chart__tip { position: absolute; top: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: var(--color-paper-2); border: 1px solid var(--color-rule); font-size: var(--text-sm); white-space: nowrap; pointer-events: none; z-index: var(--z-tooltip); }
.chart__tip strong { font-family: var(--font-outlier); font-weight: 400; color: var(--color-ink); }
.tabletwin, .install { margin-top: var(--space-md); font-size: var(--text-sm); }
.tabletwin summary, .install summary { cursor: pointer; color: var(--color-muted); padding-block: var(--space-2xs); }
.tabletwin summary:focus-visible, .install summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.install pre { margin: var(--space-sm) 0 0; padding: var(--space-md); background: var(--color-paper-2); border: 1px solid var(--color-rule); overflow-x: auto; white-space: pre-wrap; }
.install p { margin-top: var(--space-xs); color: var(--color-ink-2); }

.tabs { display: flex; gap: var(--space-md); }
.tabs a { font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; padding-block: var(--space-2xs); border-bottom: 1px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--color-ink); }
.tabs a[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }

/* ---- breakdowns ---- */
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); margin-top: var(--space-2xl); }
.panel { min-width: 0; border-top: 1px solid var(--color-rule); padding-top: var(--space-md); }
.panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.rows { list-style: none; margin: 0; padding: 0; }
.row { position: relative; display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) var(--space-xs); }
.row + .row { border-top: 1px solid var(--color-rule-2); }
.row__bar { position: absolute; left: 0; top: 2px; bottom: 2px; background: color-mix(in oklab, var(--color-accent-2) 16%, transparent); pointer-events: none; }
.row__name { position: relative; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); text-decoration: none; }
a.row__name:hover { text-decoration: underline; }
.row__value { position: relative; font-family: var(--font-outlier); font-size: var(--text-sm); }
.empty { padding: var(--space-md) 0; color: var(--color-muted); font-size: var(--text-sm); }
.privacy { margin-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); max-width: 75ch; }

/* ---- sites overview ---- */
.sites { width: 100%; border-collapse: collapse; }
.sites th, .sites td { text-align: left; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule-2); vertical-align: middle; }
.sites thead th { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); border-bottom-color: var(--color-rule); }
.sites tbody th a { font-weight: 500; text-decoration: none; }
.sites tbody th a:hover { text-decoration: underline; }
.sites__address { display: block; font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); }
.sites .num { text-align: right; font-family: var(--font-outlier); white-space: nowrap; }
.sites thead .num { font-family: var(--font-body); }
.sites__spark { width: 22%; }
.sites__spark svg { width: 100%; height: 24px; display: block; }
.sites__spark polyline { fill: none; stroke: var(--color-accent); stroke-width: 1.5; }
.sites__sample .sites__spark polyline { stroke: var(--color-accent-2); }
.live { color: var(--color-accent); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-top: var(--space-sm); }
.table th, .table td { text-align: left; padding: var(--space-2xs) var(--space-md) var(--space-2xs) 0; border-bottom: 1px solid var(--color-rule-2); }
.table .num { text-align: right; font-family: var(--font-outlier); }

.footer { max-width: var(--container); margin-inline: auto; padding: var(--space-lg) var(--gutter) var(--space-xl); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); border-top: 1px solid var(--color-rule); }
.footer p { max-width: 80ch; }

@media (max-width: 60rem) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure { border-right: 0; border-bottom: 1px solid var(--color-rule-2); padding-left: 0 !important; }
  .panels { grid-template-columns: minmax(0, 1fr); }
  .livecount { margin-left: 0; }
  .sites__spark { display: none; }
  .chart__body { grid-template-rows: 220px 28px; grid-template-columns: 2.75rem minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .periods { width: 100%; }
  .periods a { flex: 1; justify-content: center; padding: 0 var(--space-2xs); }
  .measure { justify-items: start; }
}