/* The admin pages are made of Polaris components; these rules only cover what Polaris has no component for (the charts, the
   storage bar and their tooltip), with Polaris's own tokens (see the token bridge in admin-page.js). */
body {
  margin: 0;
  background: var(--p-color-bg);
  color: var(--p-color-text);
  font-family: var(--p-font-family-sans);
}

/* Polaris's elements set their own display, which would win over the hidden attribute. */
[hidden] {
  display: none !important;
}

/* Polaris Viz's light theme (Shopify's charts): its first series colours, in order. */
:root {
  --series-1: #13acf0;
  --series-2: #6a42e9;
  --series-3: #597eed;
  --series-4: #d147ac;
}

/* The figure of a large card, as Shopify's analytics cards show it. On the figure itself: Polaris's layout components set their
   own text size on what they hold. */
.card-value {
  color: var(--p-color-text);
  font-size: var(--p-font-size-500);
  font-weight: var(--p-font-weight-semibold);
  line-height: var(--p-font-line-height-500);
}

.card-figure:empty {
  display: none;
}

.sparkline {
  flex: none;
  line-height: 0;
}

.drawn-tooltip {
  position: fixed;
  z-index: 10;
  display: none;
  max-width: 250px;
  padding: var(--p-space-100) var(--p-space-200);
  border-radius: var(--p-border-radius-element);
  background: var(--p-color-bg-surface);
  box-shadow: var(--p-shadow-popover);
  color: var(--p-color-text);
  font-size: var(--p-font-size-325);
  line-height: var(--p-font-line-height-500);
  white-space: pre-line;
  pointer-events: none;
}

.chart {
  width: 100%;
}

.chart svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.chart text {
  fill: var(--p-color-text-secondary);
  font-size: var(--p-font-size-300);
  font-variant-numeric: tabular-nums;
}

.chart .grid-line {
  stroke: var(--p-color-border-secondary);
  stroke-width: 1;
}

.chart .hit {
  fill: transparent;
}

.chart .hit:hover {
  fill: var(--p-color-text);
  fill-opacity: 0.04;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-300);
  margin-top: var(--p-space-200);
}

.swatch {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--p-border-radius-050);
  background: var(--swatch);
}

.storage-bar {
  display: flex;
  gap: var(--p-space-050);
  height: 12px;
}

/* Each bucket keeps a visible share of the bar, even a tiny one beside a huge one: the largest give way, the figures stay exact. */
.storage-bar > div {
  flex: 0 1 auto;
  min-width: var(--p-space-300);
  height: 100%;
  border-radius: var(--p-border-radius-full);
}

/* Lab's poster floats at the centre of the space right of the panel, and stays in view while the panel scrolls. */
.lab-stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-200);
  min-height: 100vh;
}

.lab-preview-column {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* A page drawn 1200 px wide, scaled to the preview's width (lab-page.js), its ratio the format's. */
.lab-preview {
  overflow: hidden;
  box-shadow: var(--p-shadow-300);
}

.lab-preview:empty,
.lab-preview[hidden] {
  display: none;
}