/* app.js parses the colour tokens it colours the charts with as six-digit hex. */
:root {
    color-scheme: light dark;
    --font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --accent: #2f9bf9;
    --heat: #1660b8;
    --ink: #0e1a2b;
    --muted: #5a6a7e;
    --background: #eef3f8;
    --surface: #ffffff;
    --line: #dbe3ec;
    --tooltip: #0e1a2b;
    --tooltip-ink: #f8f6f7;
    --down: #cc3d32;
    --skeleton: #e1e8f0;
    --skeleton-shine: #f3f6fa;
    --band-top: #222832;
    --band-bottom: #070f1a;
    --band-ink: #f8f6f7;
    --band-muted: #97a5b8;
    --band-line: rgba(248, 246, 247, 0.12);
    --band-raised: #283142;
    --band-up: #5fd39b;
    --band-down: #ff8a7f;
    --radius-small: 8px;
    --radius: 14px;
    --radius-large: 22px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 40px;
    --page: 1160px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e7edf4;
        --heat: #2f9bf9;
        --muted: #8d9cb0;
        --background: #050b15;
        --surface: #0d1724;
        --line: #1c2939;
        --tooltip: #e7edf4;
        --tooltip-ink: #0e1a2b;
        --down: #ff7b6f;
        --skeleton: #142030;
        --skeleton-shine: #1c2b3e;
        --band-top: #14171c;
        --band-bottom: #020814;
        --band-raised: #1b222d;
    }
}

* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 var(--font); color: var(--ink); background: var(--background); -webkit-font-smoothing: antialiased; }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
.page { max-width: var(--page); margin: 0 auto; padding: 0 var(--space-4); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-5); border: 1px solid var(--line); border-radius: 999px; font: 600 15px var(--font); color: var(--ink); background: var(--surface); cursor: pointer; }
.button:hover { border-color: var(--muted); }
.button.quiet { min-height: 36px; padding: 0 var(--space-4); font-size: 14px; color: var(--band-ink); border-color: var(--band-line); background: transparent; }
.button.quiet:hover { border-color: var(--band-muted); }
.button.google { width: 100%; color: #1f1f1f; background: #ffffff; border-color: #747775; }

.gate { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: var(--space-4); background: linear-gradient(160deg, var(--band-top), var(--band-bottom)); }
.card { display: grid; justify-items: center; gap: var(--space-4); width: 100%; max-width: 380px; padding: var(--space-6) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-large); text-align: center; background: var(--surface); box-shadow: 0 24px 60px rgba(2, 8, 20, 0.45); }
.card img { border-radius: 16px; }
.card h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.card p { max-width: 32ch; color: var(--muted); }
.card strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.card .button { margin-top: var(--space-2); }
.error { font-size: 14px; color: var(--down); }

.band { color: var(--band-ink); background: linear-gradient(170deg, var(--band-top), var(--band-bottom)); border-bottom: 1px solid var(--band-line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; }
.brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; }
.brand img { border-radius: 7px; box-shadow: 0 0 0 1px var(--band-line); }
.account { display: flex; align-items: center; gap: var(--space-3); min-width: 0; font-size: 14px; color: var(--band-muted); }
#account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#window { margin-top: var(--space-6); font-size: clamp(34px, 7vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
#updated { margin-top: var(--space-2); color: var(--band-muted); }

#tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--space-6) 0 var(--space-5); border-top: 1px solid var(--band-line); }
.tile { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--space-5) var(--space-5) var(--space-4); }
.tile + .tile { border-left: 1px solid var(--band-line); }
.tile:first-child { padding-left: 0; }
.tile h2 { font-size: 14px; font-weight: 500; }
.tile h2 button { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0; border: 0; font: inherit; color: var(--band-muted); background: none; cursor: help; text-align: left; }
.tile h2 button::after { content: "?"; display: grid; place-items: center; width: 16px; height: 16px; flex: none; border: 1px solid var(--band-line); border-radius: 50%; font-size: 11px; font-weight: 600; }
.tile .value { margin-top: var(--space-2); font-size: clamp(28px, 4vw, 38px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.tile .value.empty { font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--band-muted); }
.tile .change { margin-top: var(--space-1); font-size: 13px; color: var(--band-muted); }
.tile .change.up { color: var(--band-up); }
.tile .change.down { color: var(--band-down); }
.tile .sparkline { position: relative; height: 44px; margin-top: auto; padding-top: var(--space-3); }
.tile .definition { position: absolute; top: 54px; right: var(--space-5); left: var(--space-5); z-index: 1; padding: var(--space-3) var(--space-4); border: 1px solid var(--band-line); border-radius: 10px; font-size: 14px; line-height: 1.45; color: var(--band-ink); background: var(--band-raised); box-shadow: 0 16px 40px rgba(2, 8, 20, 0.55); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 140ms, transform 140ms; }
.tile:first-child .definition { left: 0; }
.tile:has([aria-expanded="true"], h2 button:focus-visible) .definition { opacity: 1; transform: none; }
@media (hover: hover) { .tile:has(h2:hover) .definition { opacity: 1; transform: none; } }

.graphs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding-top: var(--space-5); padding-bottom: var(--space-6); }
.graph { display: flex; flex-direction: column; min-width: 0; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.graph.wide { grid-column: 1 / -1; }
.graph h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.graph p { max-width: 70ch; margin-top: var(--space-1); font-size: 14px; color: var(--muted); }
.chart { position: relative; flex: 1 0 auto; height: 280px; margin-top: var(--space-4); }
.graph.wide .chart { height: 320px; }

.chart.cohorts { flex: none; height: auto; min-height: 280px; overflow-x: auto; }
.cohorts table { width: 100%; border-spacing: 3px; margin: 0 -3px; font-size: 13px; }
.cohorts th { padding: 0 var(--space-2) var(--space-1); font-weight: 500; color: var(--muted); text-align: right; white-space: nowrap; }
.cohorts th:first-child, .cohorts th[scope="row"] { padding-left: 0; text-align: left; }
.cohorts th[scope="row"] { padding-bottom: 0; color: var(--ink); }
.cohorts .size { padding-right: var(--space-3); color: var(--muted); text-align: right; }
.cohorts .share, .cohorts .open { height: 30px; padding: 0 var(--space-2); border-radius: 6px; text-align: right; }
.cohorts .open { border: 1px dashed var(--line); }

.skeleton, #dashboard[aria-busy="true"] .chart::after { border-radius: var(--radius-small); color: transparent; background: linear-gradient(90deg, var(--skeleton) 30%, var(--skeleton-shine) 50%, var(--skeleton) 70%) 0 0 / 300% 100%; animation: shimmer 1.6s linear infinite; }
#dashboard[aria-busy="true"] .chart::after { content: ""; position: absolute; inset: 0; }
.band .skeleton { --skeleton: rgba(248, 246, 247, 0.07); --skeleton-shine: rgba(248, 246, 247, 0.14); }
.tile .skeleton { display: block; height: 14px; }
.tile .skeleton.label { width: 60%; }
.tile .skeleton.value { width: 45%; height: 36px; margin: var(--space-3) 0 var(--space-5); }
.tile .skeleton.spark { height: 32px; margin-top: auto; }
@keyframes shimmer { to { background-position: -300% 0; } }
@media (prefers-reduced-motion: reduce) {
    .skeleton, #dashboard[aria-busy="true"] .chart::after { animation: none; }
    .tile .definition { transform: none; }
}

@media (max-width: 900px) {
    #tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tile:nth-child(odd) { padding-left: 0; border-left: 0; }
    .tile:nth-child(n + 3) { border-top: 1px solid var(--band-line); }
    .tile:nth-child(odd) .definition { left: 0; }
}

@media (max-width: 640px) {
    #account-email { display: none; }
    #window { margin-top: var(--space-5); }
    .tile { padding: var(--space-4) var(--space-3) var(--space-3); }
    .tile:nth-child(even) { padding-right: 0; }
    .tile .definition { top: 46px; right: var(--space-3); left: var(--space-3); }
    .tile:nth-child(even) .definition { right: 0; }
    .graphs { grid-template-columns: minmax(0, 1fr); }
    .graph { padding: var(--space-4); }
    .chart, .graph.wide .chart { height: 240px; }
    .chart.cohorts { min-height: 240px; }
    .cohorts table { font-size: 12px; }
    .cohorts .unit { display: none; }
    .cohorts th, .cohorts .size, .cohorts .share, .cohorts .open { padding-right: var(--space-1); padding-left: var(--space-1); }
}