/* Polaris web components style almost everything; this is only the big
   numbers on the summary cards. Colors are Polaris's text tones. */
.metric-value {
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--p-color-text, #303030);
}
.metric-critical { color: var(--p-color-text-critical, #8e1f0b); }
.metric-warning { color: var(--p-color-text-caution, #4f4700); }
.metric-success { color: var(--p-color-text-success, #014b40); }

/* Space between the scan panel and a section after it (they aren't
   siblings in one s-stack). */
.section-gap { margin-top: 16px; }

/* Product map (scatter). One series; tokens per the dataviz reference palette. */
.product-map {
  --surface-1: #ffffff;
  --text-primary: #303030;
  --text-secondary: #616161;
  --grid: #ebebeb;
  --reference: #8a8a8a;
  --series-1: #2a78d6;
  position: relative;
}
/* Light only: the Shopify admin around the app stays light whatever the OS
   setting, so following prefers-color-scheme would put a dark chart on a
   light card. */
.product-map-scroll { overflow-x: auto; }
.product-map svg { display: block; width: 100%; min-width: 560px; height: auto; font-family: inherit; }
.product-map .grid line { stroke: var(--grid); stroke-width: 1; }
.product-map .axis-label { fill: var(--text-secondary); font-size: 11px; }
.product-map .axis-title { fill: var(--text-secondary); font-size: 12px; }
.product-map .reference line { stroke: var(--reference); stroke-width: 1.5; }
.product-map .quadrant-label text { fill: var(--text-secondary); font-size: 12px; font-weight: 600; }
.product-map .dot { cursor: pointer; outline: none; }
.product-map .dot-hit { fill: transparent; }
.product-map .dot-mark { fill: var(--series-1); stroke: var(--surface-1); stroke-width: 2; }
.product-map .dot.is-active .dot-mark, .product-map .dot:focus-visible .dot-mark { r: 6; }
.product-map-tip {
  position: absolute; pointer-events: none; z-index: 1; max-width: 260px;
  background: var(--surface-1); color: var(--text-primary);
  border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.product-map-tip { display: flex; gap: 10px; align-items: flex-start; }
.product-map-tip[hidden] { display: none; }
.product-map-tip .tip-image { width: 48px; height: 48px; flex: none; object-fit: cover; border-radius: 6px; border: 1px solid var(--grid); }
.product-map-tip .tip-value { font-weight: 650; font-size: 13px; }
.product-map-tip .tip-detail { color: var(--text-secondary); }

/* Public pages (privacy policy). */
.legal { max-width: 720px; margin: 0 auto; padding: 48px 20px 64px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #303030; line-height: 1.6; }
.legal h1 { font-size: 1.75rem; margin: 16px 0 4px; }
.legal h2 { font-size: 1.15rem; margin-top: 32px; }
.legal .muted { color: #616161; margin-top: 0; }
.legal a { color: #005bd3; }