/* ga.css — Google Analytics (web/ga.js): only what is the page's own. The shared
   parts (hero, switch, panels, rows, tables, charts, skeletons, error card, motion) are the kit:
   web/ea-ui.css. The look is the Cloudflare page's: near-black glass, mint = people, everything else
   neutral grey-white; GA's brand amber is only the mark in the title. No accent line on any card edge.
   Text ≥ 11 px; every control has a 44 px hit area. */

/* ---------- header ---------- */
.ga2 .ga-top { padding: 8px 0 12px; }
.ga2 .ga-top__mark { width: 20px; height: 22px; }
.ga2 .ea-top__sub.is-failed { color: var(--ea-bad); }

/* ---------- hero: people now, the 30 minute bars ---------- */
.ga-hero__side-v { font-family: var(--ea-font-num); font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: -0.035em; }
.ga-hero__side-k { margin-top: 6px; font-size: 12px; color: var(--ea-ink-3); }
.ga2 .ga-minutes { margin-top: 16px; height: 66px; }
.ga-minutes__axis { display: flex; justify-content: space-between; margin-top: 4px; min-height: 15px; font-size: 11px; color: var(--ea-ink-4); }
.ga2 .ea-hero.is-dim .ga-minutes svg,
.ga2 .ea-hero.is-dim .ga-minutes__axis { opacity: 0.55; }
.ga-minutes--down { display: grid; place-items: center; padding: 0 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); text-align: center; }
.ga-minutes--down p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ea-ink-2); }
.ga-hero__msg { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--ea-ink-2); }
.ga-hero__msg[hidden] { display: none; }
.ga-hero__side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; align-self: stretch; text-align: right; }
.ga-hero__more {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding: 5px 10px 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ea-line);
    font-size: 12px;
    font-weight: 600;
    color: var(--ea-ink-2);
}
.ga-hero__more::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.ga-hero__more[hidden] { display: none; }
.ga-sk-side { width: 64px; height: 50px; border-radius: 10px; }
.ga-sk-minutes { height: 66px; margin-top: 16px; border-radius: 10px; }
/* once per open: the hero rises, its bars grow */
.ga2 .ea-hero.is-enter { animation: eaRise 0.45s var(--ea-ease) both; }
.ga2 .ea-hero.is-enter .ea-col rect:not(.ea-hit) { transform-box: fill-box; transform-origin: center bottom; animation: eaGrowY 0.6s var(--ea-ease) both; animation-delay: calc(0.15s + var(--k, 0) * 14ms); }

/* ---------- the visits card: the period switch and its four numbers ---------- */
.ga2 #ga2-period { margin-top: 14px; }
.ga-period__switch { margin-top: 14px; }
.ga-period__when { display: grid; justify-items: center; gap: 2px; margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--ea-ink-3); white-space: nowrap; }
.ga-period__when b { font-size: 13px; font-weight: 650; color: var(--ea-ink-2); }
.ga-period__when span { min-height: 16px; }
.ga-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.ga-kpi { min-width: 0; padding: 12px; border-radius: var(--ea-r-tile); background: rgba(255, 255, 255, 0.04); }
.ga-kpi__k { font-size: 12px; color: var(--ea-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-kpi__v { margin-top: 4px; font-family: var(--ea-font-num); font-size: 28px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.ga-kpi__v .ea-num { font-family: inherit; }
/* fixed heights (the change, then what it was): another period never changes the card's size */
.ga-kpi__s { display: block; margin-top: 8px; }
.ga-kpi__d { display: flex; align-items: center; height: 20px; }
.ga-kpi__was { display: block; height: 16px; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--ea-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-kpi__was[hidden] { display: block; visibility: hidden; }
.ga-kpi__was .ea-num { color: var(--ea-ink-2); font-weight: 600; }
.ga-period--sk .ga-kpi { height: 112px; }

/* ---------- rows ---------- */
.ga-share { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--ea-ink-3); }
.ga2 .ga-row--rank .ea-row__name { display: flex; align-items: baseline; gap: 8px; white-space: normal; }
.ga-rank { width: 18px; flex-shrink: 0; text-align: right; font-size: 12px; font-weight: 700; color: var(--ea-ink-4); }
.ga-path { min-width: 0; overflow-wrap: anywhere; }
.ga2 .ga-row--wrap .ea-row__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.3; }
.ga2 .ga-row--muted { opacity: 0.6; }
.ga2 .ga-row--note2 .ea-row__note { white-space: normal; line-height: 1.4; }
.ga-none { color: var(--ea-ink-4); }
.ga2 .ga-rates { grid-template-columns: minmax(0, 1fr); }
.ga2 .ga-rates .ea-kv__k { font-size: 13px; }
.ga-lead-sm { font-size: 28px; }

/* ---------- tables: by day, by month, by hour ---------- */
.ga2 .ga-table { margin-top: 10px; }
.ga2 .ga-more .ga-table, .ga2 .ea-more__in > .ga-table { margin-top: 2px; }
.ga2 .ga-trow { --cols: 78px minmax(0, 1fr) 64px 62px; padding: 6px 2px; }
.ga2 .ga-trow--h { --cols: 52px minmax(0, 1fr) 72px; }
.ga-date { font-size: 13px; font-weight: 600; color: var(--ea-ink-2); white-space: nowrap; }
.ga-date small { display: block; font-size: 11px; font-weight: 500; line-height: 1.2; color: var(--ea-ink-3); }
/* weekends keep their own colour, softened (decisions rule 5) */
.ga-date.is-weekend, .ga2 .ea-cap__when.is-weekend { color: #f9a8d4; }
.ga2 .ea-col-mark.ga-mark-wk { fill: rgba(249, 168, 212, 0.75); }
.ga2 .ea-axis-lbl.ga-mark-wk { fill: rgba(249, 168, 212, 0.75); }
.ga-t2 { font-size: 12px; color: var(--ea-ink-2); text-align: right; white-space: nowrap; }
/* the running month: an outline, never a solid "drop" */
.ga2 .ga-trow.is-partial .ea-table__bar { overflow: visible; }
.ga2 .ga-trow.is-partial .ea-table__bar span { background: none; box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.75); }
.ga2 .ga-trow.is-partial .ea-table__val { color: var(--ea-ink-2); }
.ga2 .ea-cap { grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); }