/* Analytics engine. From scratch, so it uses the host's --shy-* tokens
   directly (no :root alias block). Every stylesheet loads on every page:
   every class is prefixed anl-. */

.anl-muted { color: var(--shy-text-muted); }

/* The range picker: a segmented row of links in the page header. */
.anl-range {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--shy-border-strong);
  border-radius: var(--shy-radius);
  overflow: hidden;
}
.anl-range__option {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  color: var(--shy-text);
  text-decoration: none;
  border-left: 1px solid var(--shy-border);
}
.anl-range__option:first-child { border-left: none; }
.anl-range__option:hover { background: var(--shy-surface-alt); }
.anl-range__option[aria-current="page"] {
  background: var(--shy-brand);
  color: var(--shy-brand-contrast);
  font-weight: 600;
}

/* One section of the long page. */
.anl-section { margin-bottom: 2rem; }
.anl-section__title { margin: 0 0 0.25rem; font-size: 1.6rem; }
.anl-section__lead { margin: 0 0 1rem; color: var(--shy-text-muted); font-size: 0.9rem; }

/* Stat tiles. */
.anl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.anl-stat {
  background: var(--shy-surface);
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
  padding: 0.85rem 1rem;
}
.anl-stat__label {
  color: var(--shy-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.anl-stat__value {
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 0.15rem 0;
}
.anl-stat__note { color: var(--shy-text-muted); font-size: 0.8rem; }

/* Tables. */
/* position: relative makes the scroller the containing block of anything
   absolutely positioned inside it (.anl-hidden labels in a table head), so
   it scrolls with the table instead of widening the page on a phone. */
.anl-scroll { overflow-x: auto; position: relative; }
.shy-admin .anl-table td:first-child { white-space: nowrap; }
/* A short text label in a figures table ("Setting: no Meta data"): kept on
   one line, or a squeezed last column breaks it a word per line. */
.shy-admin .anl-table td.anl-label { white-space: nowrap; }
.shy-admin .anl-table td.anl-num,
.shy-admin .anl-table th.anl-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.anl-notes { margin: 0.75rem 0 0; padding-left: 1.1rem; font-size: 0.82rem; }
.anl-notes li { margin-bottom: 0.2rem; }

.anl-errors {
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--shy-radius);
  background: var(--shy-danger-tint);
  color: var(--shy-danger);
}
.anl-errors p { margin: 0; }

/* A finding beside the figures it changes (Paid: Meta's leads vs signups). */
.anl-callout {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--shy-warning);
  border-radius: var(--shy-radius);
  background: var(--shy-warning-tint);
  font-size: 0.9rem;
  line-height: 1.45;
}

.anl-subhead {
  margin: 0.5rem 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--shy-text-muted);
}
.anl-small { font-size: 0.82rem; }
.shy-admin .anl-check input[type="checkbox"] { width: auto; }
.shy-admin .anl-check label { display: inline; margin-left: 0.3rem; }
.anl-saved { margin: -0.25rem 0 1rem; font-size: 0.85rem; }

/* Server-rendered SVG charts (Analytics::ColumnChart): marks in the brand
   colour, ink in text tokens, grid one step off the surface. */
.anl-figure { margin: 0 0 1rem; }
/* On a phone the chart keeps a readable size and scrolls sideways. */
.anl-chart-scroll { overflow-x: auto; position: relative; }
.anl-chart { display: block; width: 100%; min-width: 34rem; height: auto; overflow: visible; }
.anl-chart__grid { stroke: var(--shy-border); stroke-width: 1; }
.anl-chart__tick { fill: var(--shy-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.anl-chart__value { fill: var(--shy-text); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.anl-chart__mark { fill: var(--shy-warning); font-size: 13px; font-weight: 700; }
.anl-chart__bar { fill: var(--shy-brand); }
.anl-chart__bar--unusual { fill: url(#anl-hatch-drops); }
.anl-chart__hatch-bg { fill: var(--shy-brand-tint); }
.anl-chart__hatch { stroke: var(--shy-brand); stroke-width: 2.5; }
.anl-chart__hit { fill: transparent; }
.anl-chart__col:hover .anl-chart__hit { fill: var(--shy-surface-alt); }
.anl-chart__line { fill: none; stroke: var(--shy-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.anl-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.5rem; font-size: 0.82rem; color: var(--shy-text-muted); }
.anl-legend__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.anl-legend__swatch { width: 0.8rem; height: 0.8rem; border-radius: 2px; background: var(--shy-brand); }
.anl-legend__swatch--unusual {
  background: repeating-linear-gradient(45deg, var(--shy-brand) 0 2px, var(--shy-brand-tint) 2px 5px);
}
.anl-legend__line { width: 1rem; height: 2px; border-radius: 1px; background: var(--shy-text); }
.anl-legend__notes { flex-basis: 100%; margin: 0; padding-left: 1.1rem; }

/* Storefront tracking: install steps and the code to paste. */
.anl-steps { margin: 0; padding-left: 1.25rem; }
.anl-steps li { margin-bottom: 0.75rem; line-height: 1.5; }
.anl-codeblock { position: relative; }
.anl-codeblock__copy { position: absolute; top: 0.5rem; right: 0.5rem; }
.anl-code {
  margin: 0;
  padding: 0.75rem 1rem;
  max-height: 28rem;
  overflow: auto;
  background: var(--shy-surface-alt);
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre;
}
.anl-codeblock .anl-code { padding-top: 3rem; }
.anl-code--line { margin: 0.5rem 0; max-height: none; white-space: pre-wrap; word-break: break-all; }

/* Customers & list: notes straight under a row of tiles, and a long weekly
   table that scrolls inside its card. */
.anl-notes--tight { margin: -0.5rem 0 1rem; }
.anl-scroll--tall { max-height: 30rem; overflow-y: auto; }
.shy-admin .anl-table th.anl-group { text-align: center; }

/* The colorway leaderboard (Analytics 09): one board per weight, folded. */
.anl-board-weight { margin-top: 0.75rem; }
.anl-board-weight > summary { cursor: pointer; font-weight: 600; padding: 0.25rem 0; }
.anl-board-weight[open] > summary { margin-bottom: 0.25rem; }
.anl-board-window { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--shy-text-muted); }

/* The weight comparison (Analytics 08). */
.anl-weight-flag { margin: 0 0 1rem; }
.anl-flag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  border-radius: var(--shy-radius);
  background: var(--shy-warning-tint);
  color: var(--shy-warning);
  font-size: 0.75rem;
  font-weight: 600;
}
.shy-admin .anl-table tr.anl-weight-colorway th { font-weight: 600; text-align: left; background: var(--shy-surface-alt); }
.anl-split { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.shy-admin .anl-split input[type="number"] { width: 7rem; }

/* Visitors needed (Analytics 10) */
.anl-calc-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 1rem; }
.shy-admin .anl-calc-form .field { flex: 0 1 12rem; }
.shy-admin .anl-calc-form .actions { margin: 0 0 1rem; }
.anl-calc-answer { margin: 0.25rem 0 0.75rem; padding: 0.6rem 0.8rem; border-radius: var(--shy-radius); background: var(--shy-brand-tint); color: var(--shy-text); }
.anl-calc-answer strong { font-size: 1.15rem; }
.anl-calc-fit { margin: 0; color: var(--shy-text-muted); font-variant-numeric: tabular-nums; }

/* The drop funnel (Analytics 12): a bar per step, its share of visitors. */
.anl-funnel__barcell { width: 40%; min-width: 6rem; }
.anl-funnel__bar { display: block; height: 0.7rem; border-radius: 0 3px 3px 0; background: var(--shy-brand); }
.anl-funnel__conversion { margin: 0.75rem 0 0; }
.anl-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Channels and visitor sources (Analytics 13). */
.anl-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; margin: 0; }
.anl-facts dt { color: var(--shy-text-muted); font-size: 0.85rem; }
.anl-facts dd { margin: 0; }
@media (max-width: 40rem) {
  .anl-facts { grid-template-columns: 1fr; gap: 0.1rem; }
  .anl-facts dd { margin-bottom: 0.5rem; }
}
.anl-sources__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.5rem 1.5rem; }
.anl-sources__dimension { min-width: 0; }
.shy-admin .anl-table td.anl-sources__value { white-space: normal; overflow-wrap: anywhere; }
.anl-sources__more { margin-top: 0.35rem; font-size: 0.9rem; }
.anl-sources__more summary { cursor: pointer; color: var(--shy-text-muted); }

/* Paid (Analytics 15) */
.anl-bad { color: var(--shy-danger); }
.anl-steps .anl-code { margin: 0.4rem 0; max-height: none; }