/* Build 87.x: OddlyInsights, the surface-agnostic insights view, styled as
   Direction C (Swiss Instrument Panel) from the locked art-direction brief
   oddly-art-direction-2026-06-07.md. A light instrument panel: cream/white
   grounds, a visible hairline grid, oversized monospaced numerals (numbers are
   the hero), a dark navy status band for "what oddly is watching", and a
   dollar-ranked opportunities briefing. Bold navy / teal / gold / cream colour
   fields, gold reserved for premium / attention, red only for genuine loss.
   Full width, dense but ordered, function first: every value stays high
   contrast and legible. All colour via tokens; sparkline/ring accents are set
   inline by insights.js.

   Display face: Space Grotesk, self-hosted as a small latin woff2 subset from
   our own origin (/_shared/fonts), never Google Fonts, so the perf-trimmed
   embedded surface keeps zero third-party font roundtrip. It carries the
   oversized numerals and the store-health verdict (the "numbers are the hero"
   register from the art-direction brief, one system with the landing's serif).
   font-display: swap, so the system mono stack paints first and never blocks. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/_shared/fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/_shared/fonts/space-grotesk-700.woff2") format("woff2");
}

.oi {
  display: block;
  /* Instrument numerals: the self-hosted display face first, a system
     monospaced stack as the zero-roundtrip fallback while it loads. */
  --oi-num: "Space Grotesk", ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --oi-navy: var(--oddly-ink);
}
/* Tabular figures so the self-hosted numerals still align like an instrument. */
.oi-score, .oi-score-max, .oi-kpi-value, .oi-impact-num, .oi-w-count b { font-feature-settings: "tnum" 1; }
/* The store-health verdict carries the display face too (numbers + verdict). */
.oi-hero-label { font-family: var(--oi-num); }
.oi * { box-sizing: border-box; }

/* A. Store-health hero: the score is the hero number, oversized, with a calm
   gauge track. Left-weighted, not a centered column. */
.oi-hero {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--oddly-surface); border: 1px solid var(--oddly-border);
  border-radius: var(--oddly-radius-md); padding: 22px 24px; margin-bottom: 14px;
  box-shadow: var(--oddly-shadow-card);
}
.oi-hero-score { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.oi-score {
  /* Fluid: the hero number scales with the viewport so it is the focal point on
     desktop and never oversized / overflowing on a phone. clamp covers 375 ->
     desktop without a step at a breakpoint. */
  font-family: var(--oi-num); font-size: clamp(48px, 13vw, 76px); line-height: 0.9; font-weight: 600;
  letter-spacing: -0.03em; color: var(--oi-navy);
}
.oi-score-max { font-family: var(--oi-num); font-size: 20px; color: var(--oddly-ink-muted); font-weight: 500; }
.oi-hero-body { flex: 1 1 260px; min-width: 0; }
.oi-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oddly-ink-muted); margin: 0 0 6px; }
.oi-hero-label { font-size: 19px; font-weight: 700; color: var(--oi-navy); margin: 0 0 4px; letter-spacing: -0.01em; }
.oi-hero-hint { font-size: 13px; color: var(--oddly-ink-secondary); margin: 0; line-height: 1.5; }
.oi-hero-gauge { width: 100%; height: 6px; margin-top: 12px; border-radius: var(--oddly-radius-pill); background: var(--oddly-surface-sunken); overflow: hidden; }
.oi-hero-gauge > span { display: block; height: 100%; border-radius: var(--oddly-radius-pill); background: var(--oi-gauge-color, var(--oddly-teal)); }

/* A2. Score decomposition: the hero number is a weighted composite, so the
   components are shown so the number is legible, not a black box. Each row is
   one dimension with its sub-score, banded the same way as the hero. */
.oi-decomp { margin: 0 0 18px; }
.oi-decomp-head { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oddly-ink-muted); margin: 0 0 8px; }
.oi-decomp-cov { font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: var(--oddly-ink-muted); }
.oi-decomp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.oi-dim { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--oddly-border); border-radius: var(--oddly-radius-sm); background: var(--oddly-surface); }
.oi-dim-label { font-size: 14px; font-weight: 600; color: var(--oi-navy); }
.oi-dim-score { font-family: var(--oi-num); font-size: 15px; font-weight: 600; color: var(--oddly-ink-secondary); font-variant-numeric: tabular-nums; }
.oi-dim-detail { grid-column: 1 / -1; font-size: 12px; color: var(--oddly-ink-secondary); line-height: 1.45; }
.oi-dim--healthy .oi-dim-score { color: var(--oddly-teal); }
.oi-dim--watch .oi-dim-score { color: var(--oddly-gold); }
.oi-dim--attention .oi-dim-score { color: #C56B5C; }
.oi-dim--unknown .oi-dim-score { color: var(--oddly-ink-muted); font-size: 12px; font-weight: 500; }

/* A3. Decision digest: the "so what + what to do" glance, directly under the
   focal score and above the KPI tiles. A short ranked, dollar-framed list, no
   chart required to act. Gold left-rule marks it as the decision moment. */
.oi-digest {
  background: var(--oddly-surface); border: 1px solid var(--oddly-border);
  border-left: 3px solid var(--oddly-gold);
  border-radius: var(--oddly-radius-md); padding: 18px 22px; margin-bottom: 14px;
  box-shadow: var(--oddly-shadow-card);
}
.oi-digest-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.oi-digest-title { font-size: 16px; font-weight: 700; color: var(--oddly-ink); margin: 0; letter-spacing: -0.01em; }
.oi-digest-note { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oddly-ink-muted); }
.oi-digest-headline { font-size: 15px; font-weight: 600; color: var(--oddly-ink); margin: 0 0 12px; line-height: 1.5; }
.oi-digest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.oi-digest-item { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: baseline; }
.oi-digest-rank {
  font-family: var(--oi-num); font-size: 13px; font-weight: 600; color: var(--oddly-teal);
  width: 22px; height: 22px; border-radius: var(--oddly-radius-pill);
  background: var(--oddly-surface-sunken); display: inline-flex; align-items: center; justify-content: center;
}
.oi-digest-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oi-digest-item-title { font-size: 14px; font-weight: 600; color: var(--oddly-ink); }
.oi-digest-line { font-size: 13px; color: var(--oddly-ink-secondary); line-height: 1.5; }
.oi-digest-action { align-self: flex-start; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--oddly-teal); }
.oi-digest-action::before { content: "\2192  "; }
.oi-digest-amt { font-family: var(--oi-num); font-size: 15px; font-weight: 600; color: var(--oddly-ink); white-space: nowrap; }

/* B. KPI row: instrument tiles. Big mono numerals, hairline borders, sparklines.
   auto-fit reflows the tiles by available width (4 desktop -> 2 tablet -> 1
   phone) with no per-breakpoint steps and no horizontal overflow. */
.oi-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.oi-kpi {
  background: var(--oddly-surface); border: 1px solid var(--oddly-border);
  border-radius: var(--oddly-radius-md); padding: 14px 16px; min-width: 0;
  display: flex; flex-direction: column; gap: 6px; box-shadow: var(--oddly-shadow-card);
}
.oi-kpi-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oddly-ink-muted); margin: 0; }
.oi-kpi-value { font-family: var(--oi-num); font-size: 26px; font-weight: 600; color: var(--oi-navy); letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.oi-kpi.is-empty .oi-kpi-value { font-family: inherit; font-size: 13px; font-weight: 500; color: var(--oddly-ink-muted); letter-spacing: 0; }
.oi-kpi-spark { height: 30px; margin-top: 2px; }
.oi-spark { width: 100%; height: 30px; display: block; }
.oi-gauge { height: 6px; border-radius: var(--oddly-radius-pill); background: var(--oddly-surface-sunken); overflow: hidden; margin-top: 8px; }
.oi-gauge > span { display: block; height: 100%; border-radius: var(--oddly-radius-pill); background: var(--oddly-teal); }
.oi-gauge.watch > span { background: var(--oddly-gold); }
.oi-gauge.alert > span { background: var(--oddly-danger); }
.oi-kpis-cold {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: var(--oddly-surface); border: 1px solid var(--oddly-border);
  border-radius: var(--oddly-radius-md); padding: 16px; margin-bottom: 14px;
}
.oi-cold-text { font-size: 13px; color: var(--oddly-ink-secondary); }
.oi-cold-cta { font-size: 13px; font-weight: 700; color: var(--oddly-teal); text-decoration: none; border: 1px solid var(--oddly-teal); border-radius: var(--oddly-radius-sm); padding: 6px 12px; }
.oi-cold-cta:hover { background: var(--oddly-teal-wash); }

/* B2. Revenue & orders: the richer read under the KPI strip (store-currency
   dashboarding). A surface panel with a wide revenue trend, a small stat grid,
   and a recent-activity breakdown. Same hairline-instrument register as the KPI
   tiles. Reflows to one column on narrow embedded widths. */
.oi-revord {
  background: var(--oddly-surface); border: 1px solid var(--oddly-border);
  border-radius: var(--oddly-radius-md); padding: 16px; margin-bottom: 14px;
}
.oi-revord-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.oi-revord-title { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oi-navy); margin: 0; }
.oi-revord-note { font-size: 12px; color: var(--oddly-ink-muted); }
.oi-revord-headmeta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oi-revord-windows { display: inline-flex; border: 1px solid var(--oddly-border); border-radius: var(--oddly-radius-pill); overflow: hidden; }
.oi-revord-win { font-family: var(--oi-num); font-size: 12px; font-weight: 600; color: var(--oddly-ink-muted); background: transparent; border: 0; padding: 4px 12px; cursor: pointer; line-height: 1.4; }
.oi-revord-win + .oi-revord-win { border-left: 1px solid var(--oddly-border); }
.oi-revord-win:hover { color: var(--oi-navy); }
.oi-revord-win.is-active { background: var(--oi-navy); color: var(--oddly-canvas); }
.oi-revord-delta { font-family: var(--oi-num); font-size: 12px; font-weight: 600; margin-left: 8px; white-space: nowrap; letter-spacing: 0; }
.oi-revord-delta.oi-d-up { color: var(--oddly-teal); }
.oi-revord-delta.oi-d-down { color: var(--oddly-danger); }
.oi-revord-delta.oi-d-flat { color: var(--oddly-ink-muted); }
.oi-revord-cmpnote { font-size: 12px; color: var(--oddly-ink-muted); margin: 10px 0 0; }
.oi-revord-chart { height: 64px; margin-bottom: 14px; }
.oi-revord-chart .oi-spark { height: 64px; }
.oi-revord-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.oi-revord-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oi-revord-stat-l { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oddly-ink-muted); }
.oi-revord-stat-v { font-family: var(--oi-num); font-size: 20px; font-weight: 600; color: var(--oi-navy); letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.oi-revord-recent { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--oddly-border); }
.oi-revord-recent-h { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oddly-ink-muted); margin: 0 0 8px; }
.oi-revord-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.oi-revord-row { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 12px; font-size: 13px; }
.oi-revord-day { color: var(--oi-navy); font-weight: 600; }
.oi-revord-ord { color: var(--oddly-ink-muted); }
.oi-revord-rev { font-family: var(--oi-num); font-weight: 600; color: var(--oi-navy); letter-spacing: -0.01em; text-align: right; }

/* C. "What oddly is watching": the dark navy status band, the signature
   instrument-panel element. Cream type on navy, gold for upside. */
.oi-watching {
  background: var(--oi-navy); border-radius: var(--oddly-radius-md);
  padding: 14px 18px; margin-bottom: 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
}
.oi-w-monitors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 280px; min-width: 0; }
.oi-w-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oddly-gold); }
.oi-w-chip { font-size: 12px; font-weight: 600; color: var(--oddly-canvas); border: 1px solid rgba(250, 250, 247, 0.22); border-radius: var(--oddly-radius-pill); padding: 3px 10px; }
.oi-w-counts { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.oi-w-count { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: rgba(250, 250, 247, 0.72); white-space: nowrap; display: flex; align-items: baseline; gap: 6px; }
.oi-w-count b { font-family: var(--oi-num); font-size: 18px; font-weight: 600; color: var(--oddly-canvas); letter-spacing: -0.01em; }
.oi-w-count.is-crit b { color: #E8A29A; }
.oi-w-count.is-upside b { color: var(--oddly-gold); }
.oi-w-allclear { font-size: 13px; color: rgba(250, 250, 247, 0.82); }

/* D. Opportunities: a dollar-ranked briefing, not a flat card list. */
.oi-opps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--oi-navy); }
.oi-opps-title { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oi-navy); margin: 0; }
.oi-opps-note { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oddly-ink-muted); }
.oi-card {
  background: var(--oddly-surface); border: 1px solid var(--oddly-border);
  border-left: 3px solid var(--oddly-ink-muted); border-radius: var(--oddly-radius-md);
  padding: 16px 18px; margin-bottom: 10px;
}
.oi-card.sev-urgent { border-left-color: var(--oddly-danger); }
.oi-card.sev-optimize { border-left-color: var(--oddly-gold); }
.oi-card.sev-improve { border-left-color: var(--oddly-teal); }
.oi-card-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.oi-card-titlewrap { flex: 1 1 60%; min-width: 0; }
.oi-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 4px; }
.oi-card.sev-urgent .oi-tag { color: var(--oddly-danger); }
.oi-card.sev-optimize .oi-tag { color: var(--oddly-gold); }
.oi-card.sev-improve .oi-tag { color: var(--oddly-teal); }
.oi-card-title { font-size: 16px; font-weight: 700; color: var(--oi-navy); margin: 0; line-height: 1.3; }
/* The dollar impact is the hero of each row: large, mono, right-aligned. */
.oi-impact { margin-left: auto; text-align: right; flex: 0 0 auto; }
.oi-impact-num { font-family: var(--oi-num); font-size: 20px; font-weight: 600; color: var(--oddly-teal); letter-spacing: -0.02em; display: block; }
.oi-card.sev-urgent .oi-impact-num { color: var(--oddly-danger); }
.oi-impact-cap { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oddly-ink-muted); }
.oi-card-body { font-size: 14px; color: var(--oddly-ink-secondary); line-height: 1.5; margin: 8px 0 0; }
.oi-card-step { font-size: 13px; color: var(--oi-navy); margin: 10px 0 0; line-height: 1.45; }
.oi-step-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oddly-teal); margin-right: 8px; }
.oi-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.oi-btn { min-height: 38px; padding: 8px 16px; border-radius: var(--oddly-radius-sm); font-size: 14px; font-weight: 600; font-family: inherit; border: 1px solid var(--oddly-border-strong); background: var(--oddly-surface); color: var(--oddly-ink-secondary); cursor: pointer; }
.oi-btn:hover { background: var(--oddly-surface-sunken); }
.oi-btn-primary { background: var(--oi-navy); color: var(--oddly-canvas); border-color: var(--oi-navy); }
.oi-btn-primary:hover { background: var(--oddly-teal); border-color: var(--oddly-teal); }
.oi-btn:focus-visible { outline: 2px solid var(--oddly-teal); outline-offset: 2px; }
.oi-btn[disabled] { opacity: 0.5; cursor: default; }
/* The prepared play, opened read-only in Shopify (oddly never writes/executes). */
.oi-play { margin-top: 12px; padding: 12px 14px; background: var(--oddly-teal-wash); border: 1px solid var(--oddly-border); border-radius: var(--oddly-radius-sm); }
.oi-play-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oddly-teal); margin: 0 0 4px; }
.oi-play-step { font-size: 13px; color: var(--oi-navy); margin: 0 0 10px; line-height: 1.45; }
.oi-play-open { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--oddly-canvas); background: var(--oi-navy); border-radius: var(--oddly-radius-sm); padding: 8px 14px; text-decoration: none; }
.oi-play-open:hover { background: var(--oddly-teal); }
.oi-play-note { font-size: 12px; color: var(--oddly-ink-secondary); margin: 0; }
.oi-opps-more { margin-top: 2px; }
.oi-opps-more > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--oddly-teal); padding: 9px 2px; }
.oi-opps-more > summary::-webkit-details-marker { display: none; }
.oi-opps-more > summary::after { content: " +"; }
.oi-opps-more[open] > summary::after { content: ""; }
.oi-opps-more-body { margin-top: 8px; }
.oi-empty {
  background: var(--oddly-surface); border: 1px dashed var(--oddly-border);
  border-radius: var(--oddly-radius-md); padding: 28px 16px; text-align: center;
  color: var(--oddly-ink-secondary); font-size: 14px;
}
.oi-empty-title { font-size: 16px; font-weight: 700; color: var(--oi-navy); margin: 0 0 6px; }
.oi-empty p { margin: 0; }

/* E. First-run states (titan polish, 2026-06-15). A just-connected store reads
   "Reading your store" with a "--" score and $0/0 numbers until the first sync
   lands. These must look like oddly is intentionally at work, not like a broken,
   empty panel. All rules are scoped to the first-run hooks (oi-hero--unknown =
   score not computed yet; oi-kpis-cold.is-importing = numbers still loading), so
   a store with a real score or real KPIs is never touched, and the populated
   instrument is unchanged. */
.oi-hero--unknown .oi-score { color: var(--oddly-ink-muted); }
.oi-hero--unknown .oi-score-max { color: var(--oddly-border-strong); }
/* The gauge becomes a calm indeterminate sweep: the store is being read, not at
   zero health. A teal shimmer slides across the track instead of an empty bar. */
.oi-hero--unknown .oi-hero-gauge > span {
  width: 34% !important;
  background: linear-gradient(90deg, transparent, var(--oddly-teal), transparent);
  animation: oi-reading 1.5s var(--oddly-ease, ease) infinite;
}
@keyframes oi-reading {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}
/* The first-run KPI row reads as in-progress: a teal accent and a soft pulse dot
   so "oddly is reading your store" feels alive, not like a flat empty bar. */
.oi-kpis-cold.is-importing { border-left: 3px solid var(--oddly-teal); }
.oi-kpis-cold.is-importing::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--oddly-teal);
  animation: oi-reading-pulse 1.4s ease-in-out infinite;
}
@keyframes oi-reading-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}
/* Respect reduced-motion: hold a calm, legible static state instead of looping. */
@media (prefers-reduced-motion: reduce) {
  .oi-hero--unknown .oi-hero-gauge > span { animation: none; width: 100% !important; opacity: 0.25; }
  .oi-kpis-cold.is-importing::before { animation: none; }
}

/* Teaching hover: a "?" beside a real metric term that explains, in one plain
   sentence, what the term is and why it matters. Concepts and metrics keep
   their real industry name (oddly teaches in context); actions stay plain and
   carry no hover. Hover or keyboard-focus reveals the note; the term itself is
   focusable and carries the explanation as an aria-label for screen readers. */
.oi-hint { position: relative; display: inline-flex; align-items: center; margin-left: 5px; vertical-align: middle; cursor: help; }
.oi-hint-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--oddly-border-strong); color: var(--oddly-ink-muted);
  font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: 0;
  text-transform: none; font-family: var(--oi-num);
}
.oi-hint:hover .oi-hint-q, .oi-hint:focus .oi-hint-q, .oi-hint:focus-within .oi-hint-q {
  border-color: var(--oddly-teal); color: var(--oddly-teal);
}
.oi-hint-pop {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 230px;
  background: var(--oi-navy); color: var(--oddly-canvas);
  font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: 0;
  text-transform: none; text-align: left;
  padding: 8px 10px; border-radius: var(--oddly-radius-sm); box-shadow: var(--oddly-shadow-card);
  opacity: 0; visibility: hidden; transition: opacity 120ms ease;
  z-index: 30; pointer-events: none;
}
.oi-hint-pop::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--oi-navy);
}
.oi-hint:hover .oi-hint-pop, .oi-hint:focus .oi-hint-pop, .oi-hint:focus-within .oi-hint-pop {
  opacity: 1; visibility: visible;
}
@media (prefers-reduced-motion: reduce) { .oi-hint-pop { transition: none; } }

/* Long unbroken strings (product titles, query terms) must wrap instead of
   forcing horizontal overflow on a narrow phone. */
.oi-hero-label, .oi-hero-hint, .oi-card-title, .oi-card-body, .oi-kpi-value, .oi-empty-title {
  overflow-wrap: break-word;
}
/* Phone / small tablet: the KPI grid (auto-fit) and the hero number (clamp)
   already scale fluidly; these rules tighten spacing and stack the multi-column
   bands so the hero, the watching strip, and each card reflow cleanly at 375 px
   with no crowding and no overflow. The dollar impact moves under the title
   instead of being pushed off the right edge. */
@media (max-width: 600px) {
  .oi-hero { padding: 18px 16px; gap: 14px; }
  .oi-watching { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; }
  .oi-impact { margin-left: 0; text-align: left; }
  .oi-card-titlewrap { flex-basis: 100%; }
  .oi-card { padding: 14px 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .oi-hero-gauge > span, .oi-gauge > span { transition: width var(--oddly-duration, 200ms) var(--oddly-ease, ease); }
}