/* Lane B: Analytics (usage, heat maps, social and sponsors) and charts.js. Class names start with .an-.
   No inline styles: sizes that depend on data are SVG attributes or canvas pixels; colours come from the tokens below.

   Chart colours, checked with the dataviz validator against the console's surfaces (white #FFFFFF, dark #0F2119):
   - one series (launches, screens, sponsors): the accent, Deep green #0B6B45 (6.6:1 on white) and Volt on the dark surface;
   - the period before: a recessive grey line;
   - platforms (identity, fixed per platform, never by rank): categorical slots 1 to 3, blue, orange, aqua, which pass every
     all-pairs gate in both modes (aqua sits under 3:1 on white, so every platform chart has a legend or labels and a table);
   - the video funnel (ordered steps): one green ramp, light to dark (Volt dim to bright in dark mode), validated as ordinal;
   - heat: Mahmoud's semantic ramp (blue, green, yellow, red) with its key, and the rage rings in red over a white halo. */

:root {
  --an-main: #0B6B45;
  --an-prev: #8A978F;
  --an-tiktok: #2A78D6;
  --an-instagram: #EB6834;
  --an-snapchat: #1BAF7A;
  --an-step-1: #5FA87E;
  --an-step-2: #2B8556;
  --an-step-3: #0B6B45;
  --an-ghost: rgb(12 34 25 / .16);
  --an-rage: #FF2D55;
  --an-phone-bezel: #0C2219;
}
@media (prefers-color-scheme: dark) {
  :root {
    --an-main: #C6F432;
    --an-prev: #6F8378;
    --an-tiktok: #3987E5;
    --an-instagram: #D95926;
    --an-snapchat: #199E70;
    --an-step-1: #6B8A20;
    --an-step-2: #99BF2A;
    --an-step-3: #C6F432;
    --an-ghost: rgb(234 242 236 / .2);
    --an-phone-bezel: #000000;
  }
}

/* A series' colour, read by every mark that draws it. */
.an-s-main, .an-fill-main { --an-c: var(--an-main); }
.an-s-prev, .an-s-other { --an-c: var(--an-prev); }
.an-s-tiktok { --an-c: var(--an-tiktok); }
.an-s-instagram { --an-c: var(--an-instagram); }
.an-s-snapchat { --an-c: var(--an-snapchat); }
.an-step-1 { --an-c: var(--an-step-1); }
.an-step-2 { --an-c: var(--an-step-2); }
.an-step-3 { --an-c: var(--an-step-3); }

/* ---------- page ---------- */

.an-page { display: grid; gap: var(--s5); }
.an-toolbar { margin-block-end: 0; }
.an-toolbar-start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.an-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.an-updated { font-size: .8125rem; color: var(--ink-muted); }
.an-content { display: grid; gap: var(--s4); transition: opacity var(--dur) var(--ease); }
.an-content.an-is-busy { opacity: .55; pointer-events: none; }
.an-month-field { display: inline-flex; align-items: center; gap: var(--s2); }
.an-month { inline-size: auto; min-block-size: 36px; padding: 6px 12px; font-size: .875rem; }
.an-control-label { font-size: .8125rem; font-weight: 600; color: var(--ink-muted); }

.an-kpis { grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); }
.an-kpi { gap: 6px; }
.an-kpi .an-kpi-value { font-variant-numeric: proportional-nums; }
.an-delta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: .8125rem; font-weight: 700; }
.an-delta-arrow { font-size: .625rem; }
.an-delta-label { font-weight: 500; color: var(--ink-muted); }
.an-delta.is-good { color: var(--success); }
.an-delta.is-bad { color: var(--danger); }
.an-delta.is-flat, .an-delta.is-none { color: var(--ink-muted); font-weight: 500; }

.an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.an-span-2 { grid-column: 1 / -1; }
/* Shorter cards stacked in one column beside a tall one (Usage: the funnel, taps and connections beside Top screens). */
.an-stack { display: grid; gap: var(--s4); align-content: start; min-inline-size: 0; }
.an-nowrap { white-space: nowrap; }

/* ---------- cards ---------- */

.an-card { display: grid; gap: var(--s4); align-content: start; }
.an-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s2) var(--s3); }
.an-card-titles { display: grid; gap: 2px; min-inline-size: 0; flex: 1 1 16rem; }
.an-card-title { font-size: 1rem; }
.an-card-description { font-size: .8125rem; color: var(--ink-muted); }
.an-card-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.an-card-chart, .an-card-table { min-inline-size: 0; }
.an-card .table-wrap { box-shadow: none; border-radius: var(--r-md); }
.an-card .table-wrap.an-table-scroll { max-block-size: 36rem; overflow: auto; overscroll-behavior: contain; }
/* A wide table scrolls sideways on a phone: its first column (the name) keeps room enough to read on two lines at most. */
.an-table-scroll table.data th:first-child, .an-table-scroll table.data td:first-child { min-inline-size: 11rem; }
.an-card table.data th { white-space: normal; vertical-align: bottom; }
.an-card .segmented { padding: 3px; }
.an-card .segment { min-block-size: 30px; padding: 2px 12px; font-size: .8125rem; }
.an-tag { cursor: default; }
.an-notes { list-style: none; padding: var(--s3) 0 0; display: grid; gap: 4px; border-block-start: 1px solid var(--line); font-size: .8125rem; color: var(--ink-muted); }
.an-card > .state { padding-block: var(--s6); }

.an-callout { display: grid; gap: 2px; padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--info-soft); color: var(--on-info-soft); }
.an-callout-title { font-weight: 700; }
.an-callout-body { font-size: .875rem; max-inline-size: 110ch; }

.an-platform { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.an-dot-key { flex: none; inline-size: 10px; block-size: 10px; border-radius: 3px; background: var(--an-c); }
.an-code { margin-inline-start: 6px; font: .75rem/1.4 var(--mono); color: var(--ink-faint); direction: ltr; unicode-bidi: isolate; }
.an-code-plain { display: inline-block; margin: 0; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--ink-muted); }
.an-small { color: var(--ink-muted); cursor: help; text-decoration: underline dotted; text-underline-offset: .2em; white-space: nowrap; }

/* ---------- legend ---------- */

.an-legend { list-style: none; padding: 0; margin-block-end: var(--s2); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: .8125rem; color: var(--ink-muted); }
.an-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.an-legend-key { flex: none; }
.an-swatch { fill: var(--an-c); }

/* ---------- columns over time ---------- */

.an-chart { position: relative; }
.an-chart-canvas { inline-size: 100%; }
.an-chart-svg { display: block; max-inline-size: none; overflow: visible; touch-action: pan-y; }
.an-chart-svg:focus { outline: none; }
.an-chart-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--r-sm); }
.an-gridline { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.an-baseline { stroke: var(--line-strong); stroke-width: 1; shape-rendering: crispEdges; }
.an-axis text { fill: var(--ink-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.an-col { fill: var(--an-c, var(--an-main)); transition: opacity var(--dur) var(--ease); }
.an-col.is-partial { opacity: .5; }
.an-col.an-ghost { fill: var(--an-ghost); }
.an-chart-svg.has-active .an-col:not(.is-active) { opacity: .38; }
.an-chart-svg.has-active .an-col.is-partial.is-active { opacity: .7; }
.an-line { fill: none; stroke: var(--an-c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.an-dot { fill: var(--an-c); stroke: var(--surface); stroke-width: 2; }
.an-crosshair { stroke: var(--ink-faint); stroke-width: 1; shape-rendering: crispEdges; }
.an-hit { fill: transparent; cursor: crosshair; }
.an-tip { pointer-events: none; }
.an-tip-bg { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; filter: drop-shadow(0 6px 16px rgb(12 34 25 / .16)); }
.an-tip-title { fill: var(--ink-muted); font-size: 12px; }
.an-tip-row { font-size: 13px; }
.an-tip-value { fill: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.an-tip-label { fill: var(--ink-muted); font-size: 12px; }
.an-tip .an-tip-key { stroke: var(--an-c); stroke-width: 3; stroke-linecap: round; }

/* ---------- horizontal bars ---------- */

.an-bars { list-style: none; padding: 0; display: grid; gap: 12px; }
.an-bar-row { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto; align-items: center; gap: var(--s3); }
.an-bar-label { display: grid; min-inline-size: 0; }
.an-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 600; }
.an-bar-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; color: var(--ink-muted); }
.an-bar-sub.is-code { font: .75rem/1.4 var(--mono); color: var(--ink-faint); direction: ltr; unicode-bidi: isolate; text-align: start; }
html[dir='rtl'] .an-bar-sub.is-code { text-align: end; }
.an-bar-svg { display: block; inline-size: 100%; }
html[dir='rtl'] .an-bar-svg { transform: scaleX(-1); }
.an-bar-fill { fill: var(--an-c, var(--an-main)); }
.an-ghost { fill: var(--an-ghost); }
.an-bar-value { display: grid; justify-items: end; min-inline-size: 4.5rem; text-align: end; }
.an-bar-number { font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.an-bar-note { font-size: .75rem; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.an-bars.is-ordinal .an-bar-row { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; }
.an-bars-compact { gap: 8px; margin-block-start: var(--s4); padding-block-start: var(--s4); border-block-start: 1px solid var(--line); }
.an-bars-compact .an-bar-row { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; }

/* ---------- heat maps ---------- */

.an-heat-grid { display: grid; grid-template-columns: minmax(272px, 340px) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.an-screens { list-style: none; padding: 0; display: grid; gap: 6px; }
.an-screen {
  display: grid; gap: 6px; inline-size: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); text-align: start; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.an-screen:hover { background: var(--surface-2); }
.an-screen.is-selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--accent-soft); }
.an-screen-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.an-screen-name { font-weight: 700; }
.an-screen-names .an-code { margin: 0; }
.an-screen-flag { padding: 0 8px; border-radius: var(--r-full); background: var(--surface-2); color: var(--ink-muted); font-size: .6875rem; font-weight: 600; }
.an-screen.is-selected .an-screen-flag { background: var(--surface); }
.an-screen-numbers { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: .8125rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.an-screen-rage strong { color: var(--ink); }
.an-screen-bar { block-size: 4px; }
.an-rage-fill { fill: var(--an-rage); }

.an-heat-body { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--s5); align-items: start; }
/* Scrolled into view under the list (one column): clear of the sticky top bar. */
.an-heat-card { scroll-margin-block-start: 84px; }
.an-phone { margin: 0; display: grid; gap: var(--s2); justify-items: center; inline-size: 100%; }
.an-phone-screen {
  position: relative; inline-size: 100%; aspect-ratio: 660 / 1434; overflow: hidden; border: 6px solid var(--an-phone-bezel);
  border-radius: 42px; background: var(--surface); box-shadow: var(--shadow-card);
}
.an-phone-screen.is-grid {
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(100% / 24 - 1px), var(--line-strong) calc(100% / 24 - 1px) calc(100% / 24)),
    repeating-linear-gradient(to right, transparent 0 calc(100% / 12 - 1px), var(--line-strong) calc(100% / 12 - 1px) calc(100% / 12)),
    var(--surface);
}
.an-phone-shot, .an-heat-canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; }
.an-phone-shot { object-fit: cover; opacity: .78; filter: saturate(.5); }
.an-heat-canvas { opacity: .86; }
.an-phone-caption { font-size: .75rem; color: var(--ink-muted); text-align: center; }
.an-heat-side { display: grid; gap: var(--s4); align-content: start; min-inline-size: 0; }
.an-heat-controls { display: grid; gap: var(--s3); }
.an-heat-controls:empty { display: none; }
.an-control { display: grid; gap: 6px; justify-items: start; }
.an-heat-key { display: grid; gap: var(--s2); font-size: .8125rem; color: var(--ink-muted); }
.an-heat-scale, .an-heat-ring { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.an-heat-ramp { flex: none; }
html[dir='rtl'] .an-heat-ramp { transform: scaleX(-1); }
.an-ring { fill: none; stroke: var(--an-rage); stroke-width: 2.5; }
.an-ring-halo { fill: none; stroke: #FFFFFF; stroke-width: 5; }
.an-heat-help { max-inline-size: 52ch; font-size: .8125rem; color: var(--ink-muted); }
.an-rage-spots { display: grid; gap: var(--s2); }
.an-side-title { font-size: .875rem; }
.an-spot-list { list-style: none; padding: 0; display: grid; gap: 6px; }
.an-spot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: .8125rem; }
.an-spot-place { font-weight: 600; }
.an-spot-numbers { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- social ---------- */

.an-reads { display: grid; gap: var(--s4) var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: start; }
.an-read { display: grid; gap: 6px; }
.an-read dt { font-weight: 600; }
.an-read dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.an-read-kind { min-inline-size: 5.5rem; font-size: .75rem; font-weight: 600; color: var(--ink-muted); }
/* A platform's own name of a field or a permission in words, that name beside it in small type (the heat maps' "Home home"), on
   either side in either language and on a line of its own when the column is narrow; in the list of fields, one chip each. */
.an-term { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; max-inline-size: 100%; }
.an-term .an-code { margin: 0; overflow-wrap: break-word; }
.an-term-chip { padding: 1px 8px; border-radius: 6px; background: var(--surface-2); font-size: .8125rem; }

/* ---------- narrower screens ---------- */

@media (max-width: 1180px) {
  .an-grid { grid-template-columns: minmax(0, 1fr); }
  .an-heat-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .an-heat-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .an-phone { inline-size: min(300px, 100%); }
  .an-heat-side { justify-self: stretch; }
  .an-toolbar-end { inline-size: 100%; justify-content: space-between; }
}
@media (max-width: 520px) {
  .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-kpis .tile-value { font-size: 1.5rem; }
  .an-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .an-bars { gap: 14px; }
  .an-bar-row, .an-bars.is-ordinal .an-bar-row, .an-bars-compact .an-bar-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .an-bar-label { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  .an-bar-value { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; column-gap: 6px; }
  .an-bar-row > .an-bar-svg { grid-column: 1 / -1; grid-row: 2; }
  .an-card .table-wrap.an-table-scroll { max-block-size: 70vh; }
  .an-card-tools { inline-size: 100%; }
  .an-phone { inline-size: min(280px, 100%); }
  .an-phone-screen { border-radius: 36px; }
}