/* Analytics: Factory Stats (js/pages/analytics.js, js/stats-charts.js), and the charts, cards and
   states the Monetization and Query pages share (css/money.css, css/sql.css add their own). Only
   css/tokens.css's custom properties, so a new theme reaches the page by itself.

   Series colours (--stats-series-1..5): one fixed lightness and chroma per theme on the tokens'
   hues (blue, orange, teal, violet, yellow), in that order. Checked with the dataviz skill's
   validator (scripts/validate_palette.js) against the light surface (#ffffff) and the dark ones
   (#30302d, and a near-black #1a1a19): lightness band, chroma floor, adjacent-pair colour-blind
   separation (worst ΔE 8.1 light, 8.6 dark) and normal vision (≥ 21), ≥ 3:1 against the surface.
   A chart takes them in order and never past 5: more groups fold into "Other", drawn in ink
   (--stats-series-other). Magnitude (the retention grid) is one hue, slot 1, mixed into the
   surface. Text is always ink, never a series colour. */

.st-page {
  --stats-series-1: oklch(0.6 0.15 var(--hue-blue, 248));
  --stats-series-2: oklch(0.6 0.15 var(--hue-orange, 52));
  --stats-series-3: oklch(0.6 0.15 var(--hue-teal, 192));
  --stats-series-4: oklch(0.6 0.15 var(--hue-violet, 308));
  --stats-series-5: oklch(0.6 0.15 var(--hue-yellow, 102));
  --stats-series-other: var(--ink-4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .st-page {
    --stats-series-1: oklch(0.64 0.15 var(--hue-blue, 248));
    --stats-series-2: oklch(0.64 0.15 var(--hue-orange, 52));
    --stats-series-3: oklch(0.64 0.15 var(--hue-teal, 192));
    --stats-series-4: oklch(0.64 0.15 var(--hue-violet, 308));
    --stats-series-5: oklch(0.64 0.15 var(--hue-yellow, 102));
  }
}
:root[data-theme='dark'] .st-page {
  --stats-series-1: oklch(0.64 0.15 var(--hue-blue, 248));
  --stats-series-2: oklch(0.64 0.15 var(--hue-orange, 52));
  --stats-series-3: oklch(0.64 0.15 var(--hue-teal, 192));
  --stats-series-4: oklch(0.64 0.15 var(--hue-violet, 308));
  --stats-series-5: oklch(0.64 0.15 var(--hue-yellow, 102));
}
.sc-0 { --c: var(--stats-series-other); }
.sc-1 { --c: var(--stats-series-1); }
.sc-2 { --c: var(--stats-series-2); }
.sc-3 { --c: var(--stats-series-3); }
.sc-4 { --c: var(--stats-series-4); }
.sc-5 { --c: var(--stats-series-5); }

/* ---------------------------------------------------------------- the frame */
.st-head {
  align-items: flex-end;
}
.st-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.st-sub > span + span::before {
  content: '·';
  margin: 0 8px;
  color: var(--ink-4);
}
.st-sub b {
  color: var(--ink-2);
  font-weight: 600;
}
.st-tabs {
  display: flex;
  width: max-content;
  margin-bottom: 20px;
}
.st-pane,
.st-grid,
.st-card,
.st-pane .is-stale,
.st-page .is-stale {
  transition: opacity var(--t-med) var(--ease);
}
.st-page .is-stale {
  opacity: 0.55;
}
.st-section + .st-section {
  margin-top: 32px;
}
/* the Stats bar (every sub-tab but Leaderboards): the range and the build on the left, when the
   numbers are from on the right; notes about the window under it */
.st-statsbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: -6px 0 16px;
}
.st-bar-l {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.st-bar-updated {
  margin-left: auto;
}
.st-updated {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.st-bar-notes:empty {
  display: none;
}
.st-bar-notes .st-note .btn {
  margin-left: auto;
  flex: none;
}
.st-loading-l {
  margin-bottom: 12px;
}
/* the range: presets and custom dates */
.st-range .st-range-custom {
  gap: 5px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-range .st-range-custom > .i {
  flex: none;
  color: var(--ink-3);
}
/* the build picker: a chip that opens the builds */
.st-buildpick {
  gap: 6px;
  max-width: 260px;
  height: 32px;
  padding: 0 10px;
}
.st-buildpick > .i {
  flex: none;
  color: var(--ink-3);
}
.st-buildpick.is-on {
  color: var(--ink);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--ink-4);
}
.st-builds-dialog {
  width: min(560px, 100%);
}
.st-builds .dialog-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.st-bmodes {
  display: flex;
  flex-wrap: wrap;
  width: max-content;
  max-width: 100%;
}
.st-blist {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: min(52dvh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -4px;
  padding: 0 4px;
}
.st-bgroup-t {
  margin-bottom: 4px;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--ink-3);
}
details.st-bgroup > summary {
  cursor: pointer;
  list-style: none;
}
details.st-bgroup > summary::-webkit-details-marker {
  display: none;
}
details.st-bgroup > summary .st-bgroup-t::after {
  content: ' · show';
  font-weight: 400;
  color: var(--ink-4);
}
details.st-bgroup[open] > summary .st-bgroup-t::after {
  content: ' · hide';
}
.st-brow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'pick name n' 'pick meta n';
  align-items: center;
  gap: 1px 10px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: var(--r-3);
  cursor: pointer;
}
.st-brow:hover {
  background: var(--surface-2);
}
.st-brow.is-on {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2, var(--line));
}
.st-brow.is-off {
  cursor: default;
  opacity: 0.5;
}
.st-brow > input {
  grid-area: pick;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink);
}
.st-brow-t {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.st-brow-m {
  grid-area: meta;
}
.st-brow-n {
  grid-area: n;
  color: var(--ink-2);
}
.st-brow-skel {
  height: 44px;
  border-radius: var(--r-3);
}
.st-bmsg:empty {
  display: none;
}
/* a card's tags: a window that isn't the page's ("Last 2 days", "This week"), or which build it shows */
.st-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 8px;
  vertical-align: 1px;
}
.st-tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line);
}
.st-tag.is-build {
  color: var(--ink-2);
  background: var(--surface-2);
  box-shadow: none;
}
/* two builds side by side: a pair of cards on one row (one above the other on a phone) */
.st-vs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: inherit;
  gap: 14px;
  min-width: 0;
}
.st-vs > .card {
  min-width: 0;
}
.st-vs-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.st-vs-l {
  margin: -4px 0 12px;
}
.st-ev-vs {
  padding: 10px 16px 0;
}
/* a chart the Stats agent pinned to the dashboard: its frame, the width the card says */
.st-artifact {
  min-width: 0;
}
.st-artifact > .artifact {
  height: 100%;
  margin: 0;
}
/* the schema's adjustments, folded */
details.st-problems {
  display: block;
}
details.st-problems > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
details.st-problems ul {
  margin: 8px 0 0 25px;
}
.st-dates-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.st-dates .dialog-body {
  padding-bottom: 10px;
}

/* the dashboard's segment bar and comparison */
.st-dashbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 20px;
  padding: 10px 12px;
  border-radius: var(--r-4);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.st-dashbar-l {
  color: var(--ink-3);
  font-weight: 500;
}
.st-segs {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 30px;
}
.st-segskel {
  height: 30px;
  border-radius: 999px;
}
.st-segpick {
  position: relative;
  gap: 5px;
  max-width: 240px;
  padding-right: 9px;
  cursor: pointer;
}
.st-segpick > .i {
  flex: none;
  color: var(--ink-4);
}
.st-segpick.is-on {
  color: var(--ink);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--ink-4);
}
.st-segpick.is-on > .i {
  color: var(--ink-2);
}
/* the native select covers the chip: the phone's own picker, the keyboard's own list */
.st-segpick-sel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.st-segpick:has(.st-segpick-sel:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 3px var(--focus-soft);
}
.st-segclear {
  color: var(--ink-3);
}
.st-cmp {
  margin-left: auto;
}
.st-cmp[aria-pressed='true'],
.st-prev[aria-pressed='true'] {
  color: var(--bg);
  background: var(--ink);
  box-shadow: none;
}

.st-section .section-head {
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------- tiles */
.st-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.st-tile {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 13px 15px 12px;
}
.st-tile-l {
  font-size: var(--fs-13);
  color: var(--ink-3);
}
.st-tile-v {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans);
  font-size: var(--fs-24);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.st-tile-h {
  font-size: var(--fs-12);
  color: var(--ink-3);
}
.st-spark {
  display: block;
  width: 100%;
  height: 26px;
  margin-top: 6px;
  overflow: visible;
}
.st-spark-l {
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.st-spark-a {
  fill: var(--ink);
  opacity: 0.04;
}

/* ---------------------------------------------------------------- cards on a 3-column grid */
.st-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.st-span-2 {
  grid-column: span 2;
}
.st-span-3 {
  grid-column: 1 / -1;
}
.st-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px 16px;
}
.st-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
}
.st-card-tt {
  min-width: 0;
}
.st-card-t {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink);
}
.st-card-sub {
  margin-top: 2px;
  font-size: var(--fs-12);
  color: var(--ink-3);
  text-wrap: pretty;
}
.st-card-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.st-card-body {
  min-width: 0;
}
.st-mini-seg button {
  height: 24px;
  padding: 0 8px;
  font-size: var(--fs-12);
}
.st-tbtn[aria-pressed='true'] {
  background: var(--surface-3);
}
.st-kpi {
  display: grid;
  align-self: start;
  align-content: start;
  gap: 4px;
}
.st-kpi-v {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.st-delta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-12);
  color: var(--ink-2);
}
.st-delta .num {
  font-weight: 600;
}
.st-kpi-v.is-none {
  color: var(--ink-4);
}
.st-kpi-hint {
  margin-top: 2px;
  font-size: var(--fs-12);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-kpi-hint.mono {
  font-size: 11.5px;
}
.st-subhead {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--ink-2);
}
/* one arrow, turned for down: the direction, in ink (the schema doesn't say which way is good) */
.st-delta.is-down .i {
  rotate: 180deg;
}
.st-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.st-facts > div {
  display: grid;
  gap: 1px;
}
.st-facts dt {
  font-size: var(--fs-12);
  color: var(--ink-3);
}
.st-facts dd {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink);
}

/* ---------------------------------------------------------------- SVG charts */
.st-plot {
  position: relative;
  width: 100%;
  min-width: 0;
  touch-action: pan-y;
  border-radius: var(--r-2);
}
.st-svg {
  display: block;
  overflow: visible;
}
.st-svg text {
  font-family: var(--font-sans);
}
.st-gl {
  stroke: var(--line);
}
.st-base {
  stroke: var(--line-2);
}
.st-tick {
  fill: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.st-line {
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.st-line.is-part {
  opacity: 0.4;
}
/* the stretch before, under a comparison: the same colour, dashed and lighter */
.st-line.is-prev {
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0.5;
}
.st-col.is-on .st-bar {
  opacity: 0.72;
}
.st-area {
  fill: var(--c);
  opacity: 0.1;
}
.st-dot {
  fill: var(--c);
  stroke: var(--surface);
  stroke-width: 2;
}
.st-cross {
  stroke: var(--ink-4);
}
.st-none {
  fill: var(--ink-3);
  font-size: 13px;
}
.st-bar {
  fill: var(--c);
  transition: opacity var(--t-fast) var(--ease);
}
.st-bar.is-on {
  opacity: 0.72;
}
.st-hit {
  fill: transparent;
  outline: none;
}
.st-hit:focus-visible {
  stroke: var(--focus);
  stroke-width: 2;
}
.st-mark {
  stroke: var(--ink-2);
  stroke-width: 1;
}
.st-mark-t {
  fill: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.st-tip {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 3px;
  min-width: 96px;
  padding: 7px 10px;
  border-radius: var(--r-2);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-12);
  white-space: nowrap;
  pointer-events: none;
}
.st-tip-t {
  color: var(--ink-3);
}
.st-tip-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.st-tip-row b {
  color: var(--ink);
  font-weight: 650;
}
.st-tip-row span {
  color: var(--ink-3);
}
.st-tip-row .st-tip-prev {
  margin-left: 2px;
  color: var(--ink-4);
}
.st-tip-row.is-total {
  padding-top: 3px;
  box-shadow: inset 0 1px 0 var(--line);
}
.st-key {
  flex: none;
  display: inline-block;
  background: var(--c);
}
.st-key.is-line {
  width: 12px;
  height: 2px;
  border-radius: 2px;
}
.st-key.is-block {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.st-key.is-dash {
  width: 14px;
  height: 0;
  border-top: 2px dashed var(--ink-3);
  background: none;
}
.st-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 8px;
  font-size: var(--fs-12);
  color: var(--ink-2);
}
.st-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.st-legend.is-share {
  margin: 10px 0 0;
}
.st-legend.is-share b {
  font-weight: 600;
  color: var(--ink);
}

/* ---------------------------------------------------------------- horizontal bars */
/* one grid for every row (subgrid), so the bars share one scale and one width */
.st-hbars {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(64px, 34%) minmax(0, 1fr) auto;
  gap: 9px 10px;
}
.st-hbar {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  font-size: var(--fs-13);
}
.st-hbar-l {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
}
.st-hbar-track {
  height: 10px;
  border-radius: 0 4px 4px 0;
  background: var(--surface-2);
  overflow: hidden;
}
.st-hbar-track i {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--c);
}
.st-hbar:hover .st-hbar-track i {
  opacity: 0.8;
}
.st-hbar-v {
  color: var(--ink);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.st-hbar-v small {
  margin-left: 6px;
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--ink-3);
}
.st-hbars.is-mono .st-hbar-l {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ---------------------------------------------------------------- shares of one whole */
.st-sharebar-track {
  display: flex;
  gap: 2px;
  height: 12px;
  overflow: hidden;
  border-radius: 4px;
}
.st-sharebar-track i {
  display: block;
  min-width: 3px;
  height: 100%;
  background: var(--c);
}
.st-exit-how {
  margin-top: 16px;
  padding-top: 12px;
  box-shadow: inset 0 1px 0 var(--line);
}
.st-exit-how .st-subhead {
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------- funnels */
.st-fsum {
  margin-bottom: 8px;
}
.st-fsum b {
  font-size: var(--fs-17);
  font-weight: 600;
  color: var(--ink);
}
.st-fsteps {
  list-style: none;
  display: grid;
}
.st-fstep {
  display: grid;
  gap: 6px;
  padding: 4px 0;
}
.st-fhead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
}
.st-fnum {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
}
.st-ft {
  min-width: 0;
  color: var(--ink-2);
}
.st-fhead b {
  color: var(--ink);
  font-weight: 600;
}
.st-fconv {
  min-width: 3.4em;
  text-align: right;
  color: var(--ink-3);
}
.st-ftrack {
  height: 20px;
  border-radius: 0 4px 4px 0;
  background: var(--surface-2);
  overflow: hidden;
}
.st-ftrack i {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--c);
}
.st-fdrop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 2px 0 2px 28px;
  font-size: var(--fs-12);
  color: var(--ink-2);
}
.st-fdrop .i {
  color: var(--ink-4);
}
.st-fdrop.is-optional {
  color: var(--ink-3);
}
.st-fstep.is-optional .st-ftrack i {
  background: repeating-linear-gradient(-45deg, var(--c) 0 5px, color-mix(in oklch, var(--c) 55%, transparent) 5px 9px);
}
.st-ft {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.st-ftag {
  padding: 1px 6px;
  border-radius: var(--r-1);
  background: var(--surface-2);
  font-size: var(--fs-11);
  font-weight: 500;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- an A/B test */
.st-xsplit {
  margin-bottom: 4px;
  color: var(--ink-3);
}
.st-xsplit b {
  color: var(--ink);
  font-weight: 600;
}
.st-xm + .st-xm {
  margin-top: 14px;
  padding-top: 12px;
  box-shadow: inset 0 1px 0 var(--line);
}
.st-xm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-bottom: 8px;
}
.st-xrows {
  display: grid;
  grid-template-columns: minmax(96px, 180px) minmax(0, 1fr) auto minmax(118px, auto);
  gap: 8px 14px;
  align-items: center;
}
.st-xrow {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  font-size: var(--fs-13);
}
.st-xg {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  min-width: 0;
}
.st-xg b {
  font-weight: 600;
  color: var(--ink);
}
.st-xtag {
  font-size: var(--fs-11);
  color: var(--ink-3);
}
.st-xn {
  flex-basis: 100%;
  font-size: var(--fs-12);
  color: var(--ink-4);
}
.st-xtrack {
  position: relative;
  height: 22px;
  border-radius: 4px;
  background: var(--surface-2);
}
.st-xtrack i {
  position: absolute;
  display: block;
}
.st-xctl {
  top: -3px;
  bottom: -3px;
  width: 0;
  border-left: 1.5px dashed var(--ink-3);
}
.st-xci {
  top: 8px;
  height: 6px;
  min-width: 2px;
  border-radius: 3px;
  background: var(--c);
  opacity: 0.45;
}
.st-xdot {
  top: 5px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2px var(--surface);
}
.st-xv {
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.st-xd {
  display: grid;
  justify-items: end;
  gap: 1px;
  font-size: var(--fs-12);
  text-align: right;
}
.st-xd b {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--ink-2);
}
/* a difference that holds (p < 0.05): green when up, red when down */
.st-xd.is-up b {
  color: var(--success-ink);
}
.st-xd.is-down b {
  color: var(--danger-ink);
}
.st-xfoot {
  margin-top: 10px;
}

/* ---------------------------------------------------------------- the cohort grid */
.st-heat-wrap {
  max-width: 100%;
  overflow-x: auto;
}
.st-heat {
  border-collapse: separate;
  border-spacing: 2px;
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}
.st-heat th {
  padding: 4px 6px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
}
.st-heat .r {
  text-align: right;
}
.st-hl {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  background: var(--surface);
}
.st-heat td {
  padding: 6px 6px;
  white-space: nowrap;
}
.st-hc {
  min-width: 44px;
  border-radius: 4px;
  text-align: center;
  color: var(--ink);
  background: color-mix(in oklch, var(--stats-series-1) var(--p, 0%), var(--surface));
}
.st-hc.is-none {
  background: none;
}
/* a period still going (today, this week): its share so far, faded */
.st-hc.is-part {
  color: var(--ink-3);
  background: none;
  box-shadow: inset 0 0 0 1px var(--line);
}
.st-heat .is-avg th,
.st-heat .is-avg td {
  font-weight: 650;
  color: var(--ink);
}
.st-heat .is-avg th {
  padding-top: 8px;
}

/* ---------------------------------------------------------------- tables, boards, events */
.st-table-wrap {
  max-height: 420px;
  overflow: auto;
  border-radius: var(--r-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.st-table-wrap.is-board {
  max-height: none;
}
.st-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.st-table td {
  font-variant-numeric: tabular-nums;
}
.st-who {
  min-width: 0;
}
.st-who-in {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  max-width: 320px;
  min-width: 0;
}
.st-uid {
  font-size: 11px;
}
.st-rank {
  color: var(--ink-3);
}
.st-rank.is-top {
  color: var(--ink);
  font-weight: 650;
}
.st-board {
  list-style: none;
  display: grid;
}
.st-board li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--fs-13);
}
.st-board li + li {
  box-shadow: inset 0 1px 0 var(--line);
}
.st-board b {
  color: var(--ink);
  font-weight: 600;
}
.st-boards {
  margin-bottom: 14px;
}
.st-lb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 10px;
}
.st-lb-when {
  color: var(--ink);
  font-weight: 600;
}
/* Previous period: a toggle beside the period choice (pressed: as Compare, above). */
/* A keyed board's key, above its table. */
.st-lb-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin-bottom: 12px;
}
.st-lb-key {
  flex: 0 1 260px;
}
.st-lb-keys .select,
.st-lb-keys .input {
  height: 34px;
}
.st-lb-keycount {
  flex: 1 1 100%;
}
.st-pager {
  justify-content: flex-end;
  margin-top: 12px;
}
.st-link {
  padding: 0;
  color: var(--ink);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
.st-link:hover {
  text-decoration-color: var(--ink-3);
}
.st-events {
  gap: 0;
  padding: 4px 0;
}
.st-evlist {
  list-style: none;
}
.st-ev {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 96px 104px;
  align-items: center;
  gap: 6px 14px;
  padding: 11px 16px;
  font-size: var(--fs-13);
}
.st-ev .r {
  text-align: right;
}
.st-evlist .st-ev {
  box-shadow: inset 0 1px 0 var(--line);
}
.st-ev-head {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--ink-3);
}
.st-ev-n {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}
.st-ev-props {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.st-prop {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: var(--r-2);
  background: var(--surface-2);
  font-size: var(--fs-12);
  color: var(--ink-2);
}
.st-prop i {
  font-style: normal;
  color: var(--ink-3);
}
.st-prop .trunc {
  max-width: 180px;
}

/* ---------------------------------------------------------------- forms */
.st-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.st-field {
  flex: 1 1 150px;
  min-width: 0;
}
.st-field.is-wide {
  flex: 2 1 230px;
}
.st-form .select,
.st-form .input {
  height: 36px;
}
.st-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.st-filter-row > .select,
.st-filter-row > .input {
  flex: 1 1 110px;
  width: auto;
}
.st-form-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-left: auto;
}
.st-ex-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 10px;
  font-size: var(--fs-13);
  color: var(--ink-3);
}
.st-ex-sum > b {
  font-size: var(--fs-20);
  font-weight: 600;
  color: var(--ink);
}
.st-builder {
  display: grid;
  align-items: start;
}
.st-bsteps {
  list-style: none;
  display: grid;
  gap: 8px;
}
.st-bstep {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  max-width: 520px;
}
.st-builder .st-form-acts {
  margin-left: 0;
}
.st-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
  color: var(--ink-3);
}
.st-inline .select {
  width: auto;
}

/* ---------------------------------------------------------------- states */
.st-err {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r-3);
  background: var(--surface-2);
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.st-err > .i {
  margin-top: 2px;
  color: oklch(var(--tone-ink-l) var(--tone-ink-c) var(--hue-red));
}
.st-err b {
  display: block;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.st-err code {
  display: inline-block;
  margin-top: 3px;
  font-size: var(--fs-12);
  color: var(--ink-3);
}
.st-err-line {
  margin-bottom: 8px;
  font-size: var(--fs-13);
  color: oklch(var(--tone-ink-l) var(--tone-ink-c) var(--hue-red));
}
.st-note {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: var(--r-3);
  background: var(--surface-2);
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.st-note > .i {
  margin-top: 1px;
  color: var(--ink-3);
}
.st-note b {
  color: var(--ink);
  font-weight: 600;
}
.st-note ul {
  margin-top: 4px;
  padding-left: 18px;
}
.st-note p {
  margin-top: 2px;
}
.st-note.is-line {
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 9px 12px;
  font-size: var(--fs-12);
  color: var(--ink-3);
  background: none;
  box-shadow: inset 0 0 0 1px var(--line);
}
.st-note.is-warn {
  background: oklch(var(--tone-dot-l) var(--tone-dot-c) var(--hue-amber) / var(--tone-fill-a));
  margin-bottom: 12px;
}
.st-note.is-warn > .i {
  color: var(--warning-ink);
}
.st-board-more {
  margin-top: 10px;
}
.st-foot {
  margin-top: 18px;
}
.st-empty-line {
  padding: 6px 0;
  font-size: var(--fs-13);
  color: var(--ink-3);
}
.st-setup {
  justify-content: center;
}
.st-waiting {
  display: grid;
  gap: 14px;
}
.st-expect {
  display: grid;
  gap: 8px;
  max-width: 34rem;
  margin: 6px auto 16px;
  padding-left: 20px;
  text-align: left;
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.st-expect b {
  color: var(--ink);
  font-weight: 600;
}
.st-record {
  gap: 14px;
}
.st-secrets {
  list-style: none;
  display: grid;
  gap: 8px;
}
.st-secrets li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.st-manual ol {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding-left: 20px;
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.st-skel {
  min-height: 12px;
  border-radius: var(--r-2);
  background: var(--surface-2);
  animation: st-pulse 1.4s var(--ease) infinite;
}
.st-skel-t {
  width: 40%;
  height: 14px;
}
.st-skel-l {
  width: 60%;
  height: 12px;
}
.st-skel-v {
  width: 45%;
  height: 26px;
  margin-top: 6px;
}
.st-skel-tabs {
  width: min(560px, 100%);
  height: 36px;
  margin-bottom: 20px;
  border-radius: var(--r-3);
}
@keyframes st-pulse {
  50% {
    opacity: 0.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .st-skel {
    animation: none;
  }
  .st-page .is-stale,
  .st-bar {
    transition: none;
  }
}
@media (pointer: coarse) {
  .st-segpick,
  .st-segskel {
    height: 36px;
  }
  .st-mini-seg button {
    height: 32px;
  }
}

/* ---------------------------------------------------------------- the Stats agent's chat
   beside the page from 1360 px (a drawer below that), as the Thumbnails tab's: the rail scrolls on
   its own under the game header, its composer at its foot */
.st-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.st-layout.has-rail {
  grid-template-columns: minmax(0, 1fr) var(--rail-w, 400px);
}
.st-layout > .st-page {
  min-width: 0;
}
.st-rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.st-layout.has-rail > .st-rail {
  position: sticky;
  top: 113px; /* under the game header, as the chat page's panel */
  align-self: start;
  height: calc(100dvh - 113px);
  box-shadow: inset 1px 0 0 var(--line);
  background: var(--bg);
}
.st-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px 10px 16px;
  box-shadow: inset 0 -1px 0 var(--line);
}
.st-chat-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.st-chat-title .i {
  width: 17px;
  height: 17px;
  color: var(--ink-3);
}
.st-chat-close {
  margin-left: auto;
}
.st-rail .chat-col.is-contained {
  flex: 1;
  min-height: 0;
}
.sheet.st-chat-sheet {
  width: min(460px, 100%);
}
.sheet.st-chat-sheet .st-rail {
  flex: 1;
  min-height: 0;
}
.st-fab {
  position: fixed;
  right: calc(16px + var(--safe-r));
  bottom: calc(16px + var(--safe-b));
  z-index: 18;
  height: 40px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: var(--overlay);
  box-shadow: var(--shadow-pop);
}
.st-fab:hover {
  background: var(--surface-3);
}
.st-fab-dot:empty {
  display: none;
}
.st-layout.has-rail > .st-fab {
  display: none;
}
.st-layout:not(.has-rail) > .st-page {
  padding-bottom: 96px; /* room above the pill */
}
@media (max-width: 720px) {
  .sheet.st-chat-sheet {
    height: 88dvh;
  }
  .sheet.st-chat-sheet .composer-dock {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------------------------------------------------------- narrower */
@media (max-width: 1100px) {
  .st-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .st-span-2 {
    grid-column: 1 / -1;
  }
}
@media (max-width: 680px) {
  /* a phone: every card full width but the kpis, two to a row */
  .st-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .st-grid > * {
    grid-column: 1 / -1;
  }
  .st-grid > .st-kpi {
    grid-column: auto;
  }
  .st-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .st-tile-v {
    font-size: var(--fs-20);
  }
  .st-kpi-v {
    font-size: var(--fs-24);
  }
  .st-card {
    padding: 12px 14px 14px;
  }
  .st-statsbar .st-range {
    width: 100%;
  }
  .st-statsbar .st-range button {
    flex: 1 0 auto;
    justify-content: center;
    padding: 0 8px;
  }
  .st-statsbar .st-range .st-range-custom > .i {
    display: none;
  }
  .st-buildpick {
    flex: 1 1 auto;
    max-width: none;
    height: 36px;
  }
  .st-bar-updated {
    margin-left: 0;
  }
  .st-vs {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .st-tags {
    margin-left: 6px;
  }
  /* the segment chips scroll inside their row; the comparison sits under them */
  .st-dashbar {
    padding: 10px;
  }
  .st-dashbar-l {
    display: none;
  }
  .st-segs {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: -2px;
    padding: 2px;
  }
  .st-segs::-webkit-scrollbar {
    display: none;
  }
  .st-segpick {
    flex: none;
  }
  .st-dates-row {
    grid-template-columns: 1fr;
  }
  /* an A/B test's row: the group and its numbers, the plot under them */
  .st-xrows {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px 12px;
  }
  .st-xrow {
    padding-bottom: 6px;
  }
  .st-xtrack {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .st-hide-sm,
  .st-uid {
    display: none;
  }
  .st-ev {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 10px 14px;
  }
  .st-ev > :nth-child(4) {
    display: none;
  }
  .st-form-acts {
    margin-left: 0;
  }
}