/* SCF Sale Calendar, the analytics board inside the Market view.

   The room: paper, not the Market wash, so Board and Reading read as two rooms behind one head. Cards are
   not boxes. Each is a ruled section on linen with one rule above it, twenty pixels of padding, no border
   and no shadow, set on a twelve column grid whose gaps are ground. The hero band is the one surface that
   breaks the grid: it runs edge to edge on ink, carries the Data Field behind the numeral, and is the only
   thing on the board that moves once the cards have landed.

   Every colour is a token from `tokens.css`, a `color-mix` of one, or the two channel colours the calendar
   already declares as `--ch-meta` and `--ch-google` with the contract values behind them as a fallback. The
   hero's two colours are declared here on bare scope with their light values and redefined under the dark
   selectors, so nothing is defined only inside a media query. Only `transform` and `opacity` animate, every
   motion has its reduced motion counterpart at the foot of this file, and hover motion is gated to a fine
   pointer. */

.ax-root {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.ax {
  /* the measure */
  --ax-edge: 32px;
  --ax-gap-x: 24px;
  --ax-gap-y: 28px;
  --ax-pad: 20px;

  /* the hero band: ink under paper in light, paper under ink in dark. The lifted good and bad colours
     exist because the state tokens are drawn for a light ground and would sink into ink. */
  --ax-hero-bg: var(--ink);
  --ax-hero-fg: var(--paper);
  --ax-hero-muted: var(--ghost);
  --ax-hero-rule: color-mix(in srgb, var(--paper) 18%, transparent);
  --ax-good-on-ink: color-mix(in srgb, var(--good) 55%, var(--paper));
  --ax-bad-on-ink: color-mix(in srgb, var(--bad) 60%, var(--paper));

  --ax-rule-soft: color-mix(in srgb, var(--rule) 70%, transparent);

  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-family: var(--f-ui);
  color: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ax {
    --ax-hero-bg: color-mix(in srgb, var(--paper) 55%, black);
    --ax-hero-fg: var(--ink);
    --ax-hero-muted: var(--muted);
    --ax-hero-rule: color-mix(in srgb, var(--ink) 16%, transparent);
    --ax-good-on-ink: var(--good);
    --ax-bad-on-ink: var(--bad);
  }
}
:root[data-theme="dark"] .ax {
  --ax-hero-bg: color-mix(in srgb, var(--paper) 55%, black);
  --ax-hero-fg: var(--ink);
  --ax-hero-muted: var(--muted);
  --ax-hero-rule: color-mix(in srgb, var(--ink) 16%, transparent);
  --ax-good-on-ink: var(--good);
  --ax-bad-on-ink: var(--bad);
}

/* ===========================================================================
   1. Type roles. Eyebrow, heading, figure, subheading, copy: each differs from the one above in at least
      two of font, size, weight, tracking and colour. The hero numeral is the only text above 22 pixels.
   =========================================================================== */
.ax-eyebrow {
  margin: 0;
  font: 700 10.5px/1.2 var(--f-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ax-h {
  margin: 4px 0 0;
  font: 700 18px/1.2 var(--f-display);
  letter-spacing: -.012em;
  color: var(--ink);
}
.ax-fig {
  margin: 6px 0 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 10px;
  font: 800 22px/1.05 var(--f-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
  color: var(--ink);
}
.ax-sub {
  margin: 5px 0 0;
  font: 500 13px/1.4 var(--f-ui);
  letter-spacing: 0;
  color: var(--ink-2);
}
.ax-copy {
  margin: 12px 0 0;
  font: 400 12.5px/1.5 var(--f-ui);
  color: var(--muted);
  max-width: 62ch;
}
.ax-empty {
  margin: 0;
  font: 500 14px/1.4 var(--f-ui);
  color: var(--ink-2);
}
.ax-nil {
  font: 500 .92em/1 var(--f-ui);
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
}
.ax-delta {
  display: inline-flex;
  align-items: center;
  font: 700 12px/1.2 var(--f-ui);
  letter-spacing: .01em;
  white-space: nowrap;
}
.ax-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===========================================================================
   2. The head. Period button, compare select, the resolved window, the as of line and refresh. It is not
      positioned on purpose: the picker measures the button against the board root.
   =========================================================================== */
.ax-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 18px var(--ax-edge) 16px;
  border-bottom: 1px solid var(--rule);
}
.ax-head-id { flex: 1 1 360px; min-width: 0; }
.ax-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.ax-period { padding-left: 12px; padding-right: 10px; gap: 8px; }
.ax-period-label { font-weight: 700; font-family: var(--f-display); letter-spacing: -.005em; }
.ax-period .ax-caret { width: 14px; height: 14px; color: var(--muted); }
.ax-compare-wrap { display: inline-flex; }
.ax-compare { width: auto; height: 36px; padding-left: 12px; }
.ax-window {
  margin: 8px 0 0;
  font: 500 12.5px/1.5 var(--f-ui);
  color: var(--ink-2);
}
.ax-window-cmp { margin-left: 10px; color: var(--muted); }
.ax-head-side { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.ax-asof {
  margin: 0;
  font: 400 12.5px/1.4 var(--f-ui);
  color: var(--muted);
}
.ax-notes-wrap:empty { display: none; }
.ax-notes {
  list-style: none;
  margin: 0;
  padding: 10px var(--ax-edge) 0;
}
.ax-notes li {
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--warn);
  font: 400 12.5px/1.5 var(--f-ui);
  color: var(--ink-2);
  max-width: 78ch;
}
.ax-notes li + li { margin-top: 6px; }

/* ===========================================================================
   3. The period picker. Anchored to the button, origin at the button's top left, enters at scale(.97) and
      opacity 0 over 180 milliseconds, no travel when opened from the keyboard. Below 600 pixels it becomes
      a bottom sheet.
   =========================================================================== */
.ax-pop {
  position: absolute;
  left: var(--ax-pop-left, var(--ax-edge));
  top: var(--ax-pop-top, 72px);
  z-index: 24;
  width: min(760px, calc(100% - var(--ax-edge) * 2));
  padding: 18px 20px 16px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--ink);
  transform-origin: top left;
  transform: scale(.97);
  opacity: 0;
  transition: transform 180ms var(--ease), opacity 180ms var(--ease);
}
.ax-pop.is-open { transform: none; opacity: 1; }
.ax-pop.is-instant { transition: none; }
.ax-pop-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr);
  gap: 20px 28px;
  align-items: start;
}
.ax-pop-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}
.ax-pop-group-label {
  margin: 0 0 6px;
  font: 700 10px/1.2 var(--f-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ax-pop-list { display: flex; flex-direction: column; gap: 2px; }
.ax-preset {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font: 500 13px/1.3 var(--f-ui);
  color: var(--ink-2);
  transition: transform 120ms var(--ease);
}
.ax-preset[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.ax-preset:active { transform: scale(.98); }
.ax-pop-side { display: flex; flex-direction: column; gap: 10px; }
.ax-pop-label {
  margin: 8px 0 0;
  font: 700 10px/1.2 var(--f-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ax-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 13px/1.3 var(--f-ui);
  color: var(--ink);
}
.ax-check input { width: 16px; height: 16px; accent-color: var(--accent-strong); margin: 0; }
.ax-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ax-pill {
  padding: 6px 12px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  font: 500 12.5px/1.2 var(--f-ui);
  color: var(--ink-2);
  transition: transform 120ms var(--ease);
}
.ax-pill[aria-checked="true"] { background: var(--ink); color: var(--linen); border-color: var(--ink); }
.ax-pill:active { transform: scale(.97); }
.ax-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ax-custom .input { width: auto; flex: 1 1 130px; height: 36px; }
.ax-custom-to { font: 500 12.5px/1 var(--f-ui); color: var(--muted); }
.ax-pop-err { margin: 0; font: 500 12.5px/1.4 var(--f-ui); color: var(--bad); }
.ax-pop-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}
.ax-pop-window { margin: 0; font: 700 13.5px/1.3 var(--f-display); letter-spacing: -.005em; color: var(--ink); }
.ax-pop-cmp { margin: 0; font: 400 12.5px/1.3 var(--f-ui); color: var(--muted); }

/* ===========================================================================
   4. The hero band. Full bleed, ink, the Data Field behind, the numeral in front. The only dark surface.
   =========================================================================== */
.ax-hero {
  position: relative;
  /* Never shrinks. overflow hidden zeroes a flex item's automatic minimum height, and .ax is a column
     flex box, so without this the band collapsed to its padding at desktop widths. */
  flex: 0 0 auto;
  overflow: hidden;
  isolation: isolate;
  padding: 40px var(--ax-edge) 36px;
  background: var(--ax-hero-bg);
  color: var(--ax-hero-fg);
  /* the delta chips inside the band take the lifted state colours */
  --good: var(--ax-good-on-ink);
  --bad: var(--ax-bad-on-ink);
}
.ax-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ax-scene canvas { display: block; width: 100%; height: 100%; }
/* When Three.js could not load, a still gradient of the same two accents stands in for the field. */
.ax-scene.is-flat {
  background:
    radial-gradient(60% 80% at 78% 30%, color-mix(in srgb, var(--accent-strong) 28%, transparent), transparent 70%),
    radial-gradient(50% 70% at 20% 90%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
}
.ax-hero-body { position: relative; z-index: 1; }
.ax-hero .ax-eyebrow, .ax-hero-k { color: var(--ax-hero-muted); }
.ax-hero-eyebrow { margin: 0; }
.ax-hero-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-top: 6px;
}

/* The three second read. The only text on the board above 22 pixels, by a factor of four or more. */
.ax-num {
  margin: 0;
  font: 800 clamp(52px, 7vw, 96px)/.95 var(--f-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  color: var(--ax-hero-fg);
  overflow-wrap: anywhere;
}
.ax-num .ax-nil { font-size: .38em; letter-spacing: -.01em; color: var(--ax-hero-muted); }
.ax-hero-delta .ax-delta { font-size: 14px; }
.ax-hero-period {
  margin: 12px 0 0;
  font: 500 13.5px/1.4 var(--f-ui);
  color: var(--ax-hero-muted);
}
.ax-hero-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px 20px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--ax-hero-rule);
}
.ax-hero-fig { min-width: 0; }
.ax-hero-k {
  margin: 0;
  font: 700 10px/1.2 var(--f-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ax-hero-v {
  margin: 6px 0 4px;
  font: 700 21px/1.05 var(--f-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
  color: var(--ax-hero-fg);
  white-space: nowrap;
}
.ax-hero-v .ax-nil { font-size: 13px; color: var(--ax-hero-muted); }
.ax-hero .skel { background: var(--ax-hero-rule); }
.ax-skel-num { display: block; height: clamp(48px, 6.4vw, 88px); width: min(420px, 60%); margin-top: 10px; }

/* ===========================================================================
   5. The grid and a card. Twelve columns; a card spans `--span`. A ruled section on linen, no box.
   =========================================================================== */
.ax-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ax-gap-y) var(--ax-gap-x);
  padding: var(--ax-gap-y) var(--ax-edge) 72px;
}
.ax-grid .ax-card {
  grid-column: span var(--span, 12);
  min-width: 0;
  padding: var(--ax-pad);
  border-top: 1px solid var(--rule-2);
  background: var(--linen);
}
.ax-card.is-in {
  animation: ax-in 160ms var(--ease) both;
  animation-delay: var(--ax-delay, 0ms);
}
@keyframes ax-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.ax-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ax-card-id { min-width: 0; flex: 1 1 200px; }
.ax-tools { display: flex; gap: 4px; flex: 0 0 auto; }
.ax-tools .btn-ghost { color: var(--muted); }
.ax-tools .btn-ghost[aria-pressed="true"] { color: var(--ink); background: var(--linen-2); }
.ax-body { min-width: 0; }
.ax-quiet { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ax-quiet .ax-copy { margin: 0; }
.ax-link { text-decoration: none; }
.ax-chips { margin: -4px 0 14px; flex-wrap: wrap; }
.ax-read { display: inline-block; min-height: 1.4em; }

/* Charts. The SVG fills the card and never sets its own colour: series colours come from the tokens the
   chart file reads, axes from the rule tokens. The table the Table toggle reveals replaces the picture. */
.ax-chart { position: relative; }
.ax-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ax-chart [role="img"] { display: block; }
.ax-card.is-table .ax-chart [role="img"] { display: none; }
/* The current month is unfinished, so it is drawn lighter: the chart lays a transparent hit band over
   every bucket after the bars, and the last band takes a wash of the card ground so the bar under it
   reads at about half strength. The presentation attribute on the rect yields to this rule. */
.ax-months .ax-chart .ch-hits [data-idx]:last-of-type { fill: var(--linen); opacity: .5; }

.ax-chart .ch-table, .ax-table {
  width: 100%;
  border-collapse: collapse;
  font: 500 12.5px/1.35 var(--f-ui);
  color: var(--ink-2);
}
.ax-chart .ch-table th, .ax-chart .ch-table td, .ax-table th, .ax-table td {
  padding: 8px 10px 8px 0;
  text-align: left;
  border-bottom: 1px solid var(--ax-rule-soft);
  vertical-align: top;
}
.ax-chart .ch-table th, .ax-table th {
  font: 700 10px/1.2 var(--f-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--rule-2);
  white-space: nowrap;
}
.ax-chart .ch-table td { font-variant-numeric: tabular-nums; }
.ax-chart .ch-table td:not(:first-child), .ax-chart .ch-table th:not(:first-child) { text-align: right; }

/* Legend: text in text tokens, colour only on the swatch. */
.ax-legend {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font: 500 12px/1.3 var(--f-ui);
  color: var(--ink-2);
}
.ax-legend li { display: inline-flex; align-items: center; gap: 7px; }
.ax-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--ghost);
}
.ax-legend-swatch.is-strong { background: var(--accent-strong); }
.ax-legend-swatch.is-soft { background: var(--accent); }
.ax-legend-line {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px solid var(--accent-strong);
}
.ax-legend-line.is-dashed { border-top: 2px dashed var(--ghost); }
.ax-legend-share { color: var(--muted); }

/* ===========================================================================
   6. The ledger row list: label, proportion bar, figure, second figure. One hue, the numbers stay text.
   =========================================================================== */
.ax-ledger { list-style: none; margin: 0; padding: 0; }
.ax-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px auto auto;
  align-items: center;
  gap: 0 14px;
  padding: 8px 0;
  border-top: 1px solid var(--ax-rule-soft);
}
.ax-row:first-child { border-top: 0; padding-top: 2px; }
.ax-row-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  font: 500 13px/1.35 var(--f-ui);
  color: var(--ink);
}
.ax-row-bar, .ax-pair-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--linen-2);
  overflow: hidden;
}
.ax-row-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--accent-strong);
  transform-origin: left center;
}
.ax-row-v {
  font: 700 13px/1.3 var(--f-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.ax-row-2 {
  font: 500 12px/1.3 var(--f-ui);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  min-width: 64px;
}
.ax-row-2-k { color: var(--muted); }

/* Two bars per row for last click against first click. */
.ax-pair { grid-template-columns: minmax(0, 1fr) 130px auto auto; }
.ax-pair-bars { display: flex; flex-direction: column; gap: 3px; }
.ax-pair-bar { height: 5px; }
.ax-pair-bar.is-soft .ax-row-fill { background: var(--accent); }

/* The share bar. */
.ax-share {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--linen-2);
  margin: 6px 0 0;
}
.ax-share-seg { display: block; flex: 0 1 0; min-width: 2px; }
.ax-share-eyebrow { margin-top: 16px; }
.ax-share + .ax-legend { margin-bottom: 14px; }

/* ===========================================================================
   7. The total sales breakdown ledger. The total row is display 700 above a two pixel rule.
   =========================================================================== */
.ax-bd { list-style: none; margin: 0; padding: 0; }
.ax-bd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 0 14px;
  padding: 9px 0;
  border-top: 1px solid var(--ax-rule-soft);
}
.ax-bd-row:first-child { border-top: 0; padding-top: 2px; }
.ax-bd-k { font: 500 13px/1.35 var(--f-ui); color: var(--ink-2); }
.ax-bd-v {
  font: 500 13px/1.3 var(--f-ui);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.ax-bd-row .ax-delta { justify-self: end; min-width: 72px; justify-content: flex-end; }
.ax-bd-row.is-total { margin-top: 6px; padding-top: 12px; border-top: 2px solid var(--rule-2); }
.ax-bd-row.is-total .ax-bd-k { font: 700 14px/1.3 var(--f-display); color: var(--ink); }
.ax-bd-row.is-total .ax-bd-v { font: 700 18px/1.1 var(--f-display); letter-spacing: -.02em; }

/* ===========================================================================
   8. The ads cards. Measured figures first, then the claimed trio in its own bordered cluster under the
      platform's name with the caveat beneath it. A campaigns table sortable by any column. A creatives grid.
   =========================================================================== */
.ax-ads-totals {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: 18px 28px;
  align-items: start;
  margin-bottom: 18px;
}
.ax-ads-measured {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 14px 18px;
}
.ax-ads-fig { min-width: 0; }
.ax-ads-k {
  margin: 0;
  font: 700 10px/1.2 var(--f-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.ax-ads-v {
  margin: 5px 0 0;
  font: 700 19px/1.1 var(--f-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--ink);
  white-space: nowrap;
}
.ax-ads-v .ax-nil { font-size: 12.5px; }
.ax-ads-claim {
  padding: 12px 14px 12px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
}
.ax-claim-eyebrow { color: var(--ink-2); }
.ax-ads-claim-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 8px;
}
.ax-ads-claim .ax-ads-v { font-size: 17px; }
.ax-caveat {
  margin: 10px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--warn);
  font: 400 12px/1.45 var(--f-ui);
  color: var(--ink-2);
  max-width: 48ch;
}

.ax-table-wrap { overflow-x: auto; margin: 0 calc(var(--ax-pad) * -1); padding: 0 var(--ax-pad); }
.ax-table { min-width: 720px; }
.ax-table th.is-num, .ax-table td.is-num { text-align: right; }
.ax-table td.is-text { color: var(--ink); max-width: 260px; overflow-wrap: anywhere; }
.ax-table td.is-claim, .ax-table th.is-claim { background: color-mix(in srgb, var(--warn-soft) 55%, transparent); }
.ax-table td.is-claim:first-of-type, .ax-table th.is-claim:first-of-type { padding-left: 10px; }
.ax-table-groups th { font-size: 9.5px; color: var(--ink-2); border-bottom-color: var(--ax-rule-soft); }
.ax-table-groups th.is-claim { color: var(--warn); }
.ax-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  white-space: nowrap;
}
.ax-table th[aria-sort="ascending"] .ax-sort, .ax-table th[aria-sort="descending"] .ax-sort { color: var(--ink); }
.ax-sort-ic { width: 12px; height: 12px; }
.ax-table tbody tr:last-child td { border-bottom: 0; }

.ax-cre-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 22px 0 12px;
}
.ax-cre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 18px 16px;
}
.ax-cre { min-width: 0; }
.ax-cre-thumb {
  position: relative;
  aspect-ratio: 1;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--linen-2);
}
.ax-cre-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ax-cre-flat {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 12px;
  overflow: hidden;
}
.ax-cre.has-img .ax-cre-flat { display: none; }
.ax-cre-headline {
  margin: 0;
  font: 700 13px/1.25 var(--f-display);
  letter-spacing: -.01em;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ax-cre-host { margin: 2px 0 0; font: 500 11px/1.3 var(--f-ui); color: var(--muted); overflow-wrap: anywhere; }
.ax-cre-name {
  margin: 8px 0 0;
  font: 700 12.5px/1.3 var(--f-display);
  color: var(--ink);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
}
.ax-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font: 700 9.5px/1.5 var(--f-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.ax-cre-camp { margin: 2px 0 0; font: 400 11.5px/1.35 var(--f-ui); color: var(--muted); overflow-wrap: anywhere; }
.ax-cre-figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin: 8px 0 0;
}
.ax-cre-figs div { min-width: 0; }
.ax-cre-figs dt { font: 700 9.5px/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ax-cre-figs dd {
  margin: 2px 0 0;
  font: 700 13px/1.2 var(--f-display);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.ax-cre-figs dd .ax-nil { font-size: 11px; }
.ax-cre-figs .is-claim { padding-left: 8px; border-left: 2px solid var(--warn); }

/* ===========================================================================
   9. Skeletons. Blocks in the card's own shape, nothing moving.
   =========================================================================== */
.ax-card .skel { background: var(--linen-2); }
.ax-skel-eyebrow { display: block; height: 9px; width: 96px; }
.ax-skel-head { display: block; height: 18px; width: min(240px, 70%); margin-top: 8px; }
.ax-skel-line { display: block; height: 12px; width: min(320px, 60%); margin-top: 12px; }
.ax-skel-chart { display: block; height: 220px; width: 100%; }
.ax-skel-row { display: block; height: 14px; width: 100%; }
.ax-skel-row + .ax-skel-row { margin-top: 14px; }
.ax-skel-table { display: block; height: 180px; width: 100%; margin-top: 16px; }
.ax-skel-fig { display: block; height: 20px; width: 80%; margin-top: 8px; }

/* ===========================================================================
   10. Hover, gated to a fine pointer. Colour only, no travel.
   =========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .ax-preset:not([aria-pressed="true"]):hover { background: var(--linen-2); color: var(--ink); }
  .ax-pill:not([aria-checked="true"]):hover { border-color: var(--ink); color: var(--ink); }
  .ax-sort:hover { color: var(--ink); }
  .ax-tools .btn-ghost:hover { color: var(--ink); }
  .ax-period:hover { background: var(--linen-2); }
}

/* ===========================================================================
   11. Width. Spans fold in two steps, the hero numeral steps down, the picker becomes a sheet.
   =========================================================================== */
@media (max-width: 1199.98px) {
  .ax-grid .ax-card { grid-column: span 6; }
  .ax-grid .ax-meta, .ax-grid .ax-google, .ax-grid .ax-sales { grid-column: span 12; }
  .ax-hero-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ax-ads-totals { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023.98px) {
  .ax-root { min-height: 0; }
}
@media (max-width: 760px) {
  .ax { --ax-edge: 16px; --ax-gap-y: 20px; --ax-gap-x: 16px; --ax-pad: 16px; }
  .ax-grid .ax-card { grid-column: span 12; }
  .ax-hero { padding: 28px var(--ax-edge) 26px; }
  .ax-num { font-size: clamp(40px, 11.5vw, 56px); }
  .ax-hero-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
  .ax-hero-v { font-size: 19px; }
  .ax-head { padding: 14px var(--ax-edge) 14px; }
  .ax-head-side { width: 100%; justify-content: space-between; }
  .ax-row { grid-template-columns: minmax(0, 1fr) 70px auto; }
  .ax-row-2 { grid-column: 1 / -1; text-align: left; min-width: 0; margin-top: 2px; }
  .ax-pair { grid-template-columns: minmax(0, 1fr) 90px auto; }
  .ax-ads-claim-row { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
  .ax-cre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .ax-tools .btn-ghost span { display: none; }
  .ax-tools .btn-ghost { width: 30px; padding: 0; justify-content: center; }
}
@media (max-width: 600px) {
  .ax-pop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: 86vh;
    overflow-y: auto;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 0;
    transform-origin: bottom center;
    transform: translateY(14px);
  }
  .ax-pop.is-open { transform: none; }
  .ax-pop-cols { grid-template-columns: minmax(0, 1fr); }
  .ax-pop-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ===========================================================================
   12. Reduced motion. The cards keep their opacity and drop the travel, the picker fades with no scale,
       the pulse stops, and the button presses stop moving.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ax-card.is-in { animation-name: ax-in-still; animation-duration: 120ms; }
  .ax-pop { transform: none; transition: opacity 150ms var(--ease); }
  .ax-pop.is-open { transform: none; }
  .ax-preset:active, .ax-pill:active { transform: none; }
  .ax .is-loading { animation: none; opacity: .7; }
}
@keyframes ax-in-still {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* wave 6, vibe
   The eyebrow and KPI labels step onto the type ladder, the picker lifts, the pressed preset and pill
   become plates. The hero band itself is untouched; the field is its texture. Delete this block to revert. */
.ax-eyebrow { letter-spacing: .22em; }
.ax-hero-k,
.ax-ads-k { letter-spacing: .22em; }
.ax-pop { box-shadow: var(--shadow-pop); }
.ax-preset[aria-pressed="true"],
.ax-pill[aria-checked="true"] { box-shadow: inset 0 1px 0 var(--band-hi); }

/* wave 7, the globe
   The sessions by location card widens to eight columns from 1200px and splits into the globe on the left
   and the ledger on the right; below 1200px the card keeps the fold's six columns and the globe stacks
   above the ledger. The globe host is a square paper plate on the linen card, the one instrument on this
   board that is not the hero field; is-flat hides it and the ledger takes the full width. Every colour is
   a token. Delete this block and the mount call in analytics.js to revert. */
.ax-loc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 28px;
  align-items: start;
}
.ax-globe {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 220px;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
  overflow: hidden;
}
.ax-globe canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
}
.ax-globe.is-dragging canvas { cursor: grabbing; }
.ax-globe.is-flat { display: none; }
.ax-loc:has(.ax-globe.is-flat) { grid-template-columns: minmax(0, 1fr); }
.ax-loc .ax-ledger { min-width: 0; }
@media (min-width: 1200px) {
  .ax-grid .ax-locations { grid-column: span 8; }
  .ax-loc { grid-template-columns: minmax(0, 3fr) minmax(236px, 2fr); align-items: stretch; }
  .ax-loc:has(.ax-globe.is-flat) { grid-template-columns: minmax(0, 1fr); }
  /* the plate takes the ledger's height, so the sphere sits in a portrait window with room for the arcs */
  .ax-globe { aspect-ratio: auto; height: 100%; min-height: 360px; }
  /* the ledger column is narrow, so a row is the place on one line and its visitors on the next, the
     same shape the ledger already takes on a phone */
  .ax-loc .ax-row { grid-template-columns: minmax(0, 1fr) 64px auto; gap: 0 12px; }
  .ax-loc .ax-row-2 { grid-column: 1 / -1; text-align: left; min-width: 0; margin-top: 2px; }
}
@media (max-width: 760px) {
  .ax-globe { aspect-ratio: 1 / 1; min-height: 0; }
}

/* wave 7, the look
   The globe loses its plate: no rule, no radius and no second ground, so the sphere sits on the card the
   way the field sits in the hero band and the room above and below it is the card, not a box. The grab
   cursor is set by the module and only over the sphere. The ledger beside the globe takes the two line row
   at every width, so a place is never cut to one word in the fold, and under 1200px the stacked globe is a
   square so the arcs between the south east cities still read. Delete this block with the one above it. */
.ax-globe {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  aspect-ratio: 1 / 1;
  min-height: 0;
}
.ax-globe canvas { cursor: default; }
.ax-loc .ax-row { grid-template-columns: minmax(0, 1fr) 56px auto; gap: 0 10px; }
.ax-loc .ax-row-2 { grid-column: 1 / -1; text-align: left; min-width: 0; margin-top: 2px; }
@media (min-width: 1200px) {
  .ax-globe { aspect-ratio: auto; height: 100%; min-height: 360px; }
  /* the ledger floor is the width the longest short name needs beside a 56px bar, so a place is whole
     from 1200px up; at 1440 the column is wider than the floor and nothing moves */
  .ax-loc { grid-template-columns: minmax(0, 3fr) minmax(244px, 2fr); }
}