/* analytics.alexb.solutions: app classes on top of Quiet, tokens only. One file for the sign-in page and the dashboard,
   because the CSP allows no inline style. Layout ported from the claude.ai/design consult of 1 Nov 2026 (Overview /
   Pages / People, the email-prompt sheet read across before and after the change, a person's pages in their row). */
.an-sprite { display: none; }

/* sign-in page */
.an-signin { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-6); max-width: 480px; }
.an-signin .ds-card { display: flex; flex-direction: column; gap: var(--space-4); }
.an-wide { width: 100%; justify-content: center; }
.an-err { color: var(--bad); margin: 0; }

/* top bar status, right of the title */
.an-status { flex: none; max-width: 52%; padding-right: var(--space-3); font-size: var(--text-xs); line-height: 16px; color: var(--text-2); text-align: right; }
.an-status.is-bad { color: var(--bad); }

/* hero */
.an-hero-row { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--space-2); }
.an-hero-row > .ds-hero { margin: 0; }
.an-hero-l { font-size: var(--text-l); line-height: 24px; color: var(--text); }
.an-line { margin: var(--space-2) 0 0; font-size: var(--text-s); line-height: 20px; color: var(--text); }
.ds-kpi > .ds-delta { display: flex; }

/* tiles: three across on a phone, so the words wrap rather than cut off */
#o-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#o-tiles .ds-tile { text-align: left; color: var(--text); }
#o-tiles .ds-tile-l, #o-tiles .ds-delta, #o-tiles .ds-tile-v { white-space: normal; overflow: visible; text-overflow: clip; }
#o-tiles .ds-tile.is-key { box-shadow: inset 0 0 0 1px var(--accent); }

/* chart */
.an-days { height: 180px; }
.an-change { margin: var(--space-2) 0 0; display: flex; align-items: center; gap: var(--space-2); }
.an-change::before { content: ""; width: 0; height: 14px; border-left: 1px dashed var(--text-3); }

/* rows with a share bar: a source, a page, a time band */
.an-row { align-items: flex-start; flex-wrap: wrap; row-gap: var(--space-2); }
.an-row .ds-row-main { gap: 2px; }
.an-row .ds-row-end { align-self: flex-start; line-height: 22px; }
.an-row > .an-bar { flex-basis: 100%; }
.an-bar { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); line-height: 16px; color: var(--text-3); }
.an-bar > .ds-rank-track { flex: 1; max-width: 70%; height: 6px; border-radius: 3px; }
.an-bar > .ds-rank-track > .ds-rank-fill { border-radius: 3px; }
.an-sub { margin: var(--space-4) 0 0; }
.an-sub[hidden] { display: none; }

/* people */
.an-people-head { margin-top: var(--space-5); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.an-person { align-items: flex-start; }
.an-person .ds-row-main { gap: 2px; }
.an-person .ds-row-main > span { color: var(--text-2); }
.an-person .ds-row-end { align-self: center; }
.an-looked { display: flex; gap: var(--space-2); margin-top: var(--space-1); color: var(--text); font-size: var(--text-s); line-height: 20px; }
.an-looked > i { font-style: normal; color: var(--text-3); flex: none; }
.ds-row-main > .an-email { color: var(--text); }
.an-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.an-note-row { font-size: var(--text-s); color: var(--text-2); }

/* person sheet: back to the list it was opened from, facts, then the visit timeline */
.an-back { gap: var(--space-1); margin: 0 0 var(--space-2) calc(-1 * var(--space-3)); }
.an-facts { margin: 0 0 var(--space-3); color: var(--text-2); font-size: var(--text-s); line-height: 20px; }
.an-facts > span { display: block; }
.an-visit { margin: var(--space-5) 0 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.an-tl { list-style: none; margin: 0; padding: 0; }
.an-tl > li { display: grid; grid-template-columns: 44px 12px minmax(0, 1fr); column-gap: var(--space-3); align-items: start;
  min-height: 44px; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.an-tl .an-t { font-size: var(--text-xs); line-height: 20px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.an-tl .an-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--text-2); justify-self: center; }
.an-tl .is-moment .an-dot { border-radius: 1px; transform: rotate(45deg); background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.an-tl .is-key .an-dot { box-shadow: inset 0 0 0 1.5px var(--accent); }
.an-tl .an-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.an-tl .an-what > b { font-weight: 500; font-size: var(--text-s); line-height: 20px; }
.an-tl .an-what > span { font-size: var(--text-xs); line-height: 16px; color: var(--text-3); }
.an-tl .is-moment .an-what > b { font-weight: 400; color: var(--text-2); }
.an-tl .is-key .an-what > b { color: var(--accent); }
.an-tl .an-dur { font-size: var(--text-xs); color: var(--text-3); }

/* email-prompt sheet: before and after the change, read across */
.an-funnel { margin-top: var(--space-4); }
.an-funnel th small { display: block; font-weight: 400; color: var(--text-3); }
.an-funnel th + th { padding-left: var(--space-3); }
.an-funnel td:first-child { padding-right: var(--space-3); }
.an-funnel .is-in { padding-left: var(--space-4); color: var(--text-2); }
.an-funnel .num { white-space: nowrap; }
.an-split { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.an-split-bar { display: flex; gap: 2px; height: 16px; border-radius: 4px; overflow: hidden; }
.an-split-bar > span { display: block; height: 100%; }
.an-split-bar > .is-signed { background: var(--chart-1); }
.an-split-bar > .is-left { background: var(--chart-muted); }
.an-split-legend { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-xs); line-height: 16px; color: var(--text-2); }
.an-note { margin: var(--space-4) 0 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); color: var(--text-2); }
.an-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 var(--space-2); }

/* More sheet */
.an-wrap { flex-wrap: wrap; }
.an-theme { flex-basis: 100%; margin-top: var(--space-1); }
.an-signout { margin: 0; }