/* ─────────────────────────────────────────────────────────────
   CapraSEO — health page (health.html)
   Domain overview cockpit. Reuses .card / .btn / .badge / .tbl
   from main.css + account.css; this file only adds page-specific
   scaffolding, chart wrappers, and animations.
   ───────────────────────────────────────────────────────────── */

/* Reduced motion — drop hover transforms; keep color/opacity transitions */
@media (prefers-reduced-motion: reduce) {
  .kpi-card, .vital,
  .range-pill button, .toggle-pill button {
    transition: none;
  }
  .kpi-card:hover, .vital:hover { transform: none; }
  .range-pill button:active, .toggle-pill button:active { transform: none; }
}

/* Stage-top shell rules (title row, domain tag, actions row) used to live
   here, which is why /agents2/ — the one .stage-top page that does NOT load
   this file — showed its domain on a second line. They are shell, not
   health: they now live in css/main.css beside .stage-title. */

/* Range pill (7d / 30d / 90d / 12m) */
.range-pill {
  display: inline-flex;
  background:
    linear-gradient(180deg, rgba(var(--wash-rgb), 0.02), rgba(0,0,0,0.10)),
    rgba(var(--dk1-rgb),0.55);
  border: 1px solid rgba(var(--wash-rgb), 0.06);
  border-radius: var(--r-chip);
  padding: 3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(var(--wash-rgb), 0.03);
}
.range-pill button {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: 500 11.5px 'Inter', sans-serif;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: var(--r-chip);
  cursor: pointer;
  transition:
    color 200ms cubic-bezier(0.32, 0.72, 0, 1),
    background 200ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.range-pill button:hover { color: var(--text); }
.range-pill button:active { transform: scale(0.98); transition-duration: 80ms; }
.range-pill button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.range-pill button.active {
  background: linear-gradient(180deg, rgba(var(--wash-rgb), 0.10) 0%, rgba(var(--wash-rgb), 0.04) 100%);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.08),
    0 1px 2px rgba(0,0,0,0.30);
}

/* Scroll area — same skeleton as account page.
   flex-shrink: 0 on children is critical: without it, every section
   collapses to fit the container height instead of triggering the
   intended overflow-y scroll. */
.center.center-scroll {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0 36px 48px;
  overflow-y: auto;
  gap: 22px;
}
.center.center-scroll > * { flex-shrink: 0; }

/* ── Hero cockpit ─────────────────────────────────────────── */
.health-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.health-hero::before {
  /* drifting grid */
  content: "";
  position: absolute;
  inset: -20px;
  background-image:
    linear-gradient(rgba(var(--wash-rgb), 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--wash-rgb), 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.55;
  animation: drift 60s linear infinite;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
}
.health-hero::after {
  /* center radial glow */
  content: "";
  position: absolute;
  left: 35%;
  top: 50%;
  width: 700px;
  height: 480px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb),0.07), transparent 70%);
  pointer-events: none;
}
@keyframes drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(32px, 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .health-hero::before { animation: none; }
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: 28px;
  padding: 28px;
  align-items: center;
}

.hero-score {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-score .score-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hero-score .score-chart {
  width: 284px;
  height: 284px;
  position: relative;
  display: grid;
  place-items: center;
  /* breathing glow behind the gauge — no ring overlay, so nothing
     can visually disagree with where ApexCharts draws the arc */
  filter: drop-shadow(0 0 14px rgba(var(--accent-rgb),0.18));
  animation: scorePulse 3.2s ease-in-out infinite;
}
@keyframes scorePulse {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(var(--accent-rgb),0.18)); }
  50%      { filter: drop-shadow(0 0 26px rgba(var(--accent-rgb),0.32)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-score .score-chart { animation: none; }
}
.hero-score .score-verdict {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: -0.005em;
}
.hero-score .score-verdict strong {
  color: var(--positive);
  font-weight: 600;
}

.vitals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.vital {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background:
    linear-gradient(180deg, rgba(var(--wash-rgb), 0.02) 0%, rgba(var(--wash-rgb), 0) 55%),
    var(--panel-2);
  border: 1px solid rgba(var(--wash-rgb), 0.06);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.05),
    inset 0 -1px 0 rgba(0,0,0,0.16);
  transition:
    border-color 200ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 200ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.vital:hover {
  /* secondary surfaces stay flat — the hero score is the only glowing
     element on the page. Hover lifts with border + elevation, no glow. */
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.07),
    inset 0 -1px 0 rgba(0,0,0,0.16),
    0 18px 40px -28px rgba(0,0,0,0.9);
}
.vital .vital-chart { flex-shrink: 0; width: 88px; height: 88px; }
.vital .vital-meta { min-width: 0; }
.vital .vital-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.vital .vital-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.vital .vital-value .unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-2);
  margin-left: 2px;
}
.vital .vital-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* (i) info button + tooltip — explains what each vital actually measures.
   Pure CSS tooltip on hover / keyboard focus; no JS needed. */
.vital-info {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--wash-rgb), 0.12);
  background: rgba(var(--wash-rgb), 0.04);
  color: var(--muted);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  opacity: 0.5;
  transition: opacity 160ms, color 160ms, border-color 160ms, background 160ms;
}
/* No CSS tooltip here. `data-tip` is rendered by ONE owner —
   js/chip-tooltip.js into the fixed .cs-tip element on <body>. A
   `content: attr(data-tip)` pseudo-element renders a SECOND, identical
   tooltip on every page that also loads that script (all of them do), which
   is exactly the "two tooltips on one hover" bug. tools/check-shared-
   constants.sh fails if one reappears. */
.vital-info:hover,
.vital-info:focus-visible {
  color: var(--text-hi);
  border-color: rgba(var(--wash-rgb), 0.28);
  background: rgba(var(--wash-rgb), 0.08);
  opacity: 1;
  outline: none;
}
/* ── Paid keyword opportunities ────────────────────────────── */
.paid-kw-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 18px;
  padding: 0 18px 18px;
}
.paid-kw-grid .tbl td.col-tight,
.paid-kw-grid .tbl th.col-tight {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Backlink portfolio worth ──────────────────────────────── */
.worth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 8px 22px 22px;
}
.worth-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 180px;
  padding: 16px 20px;
  background: var(--accent);
  color: #0b1f12;
  font: 600 14px/1 'Inter', sans-serif;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.18),
    0 6px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.worth-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.22),
    0 8px 22px -8px color-mix(in srgb, var(--accent) 75%, transparent);
}
.worth-cta:active { transform: translateY(0) scale(0.99); transition-duration: 80ms; }
.worth-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.worth-cta svg { flex-shrink: 0; }
.worth-stat {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 16px;
}
.worth-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.worth-stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.worth-stat-value--accent { color: var(--accent-text); }
.worth-stat--loss { border-left-color: var(--danger); }
.worth-stat-value--loss { color: var(--danger); }
.worth-stat-sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
/* Full-width gained-vs-lost value trend, sits above the footnote */
.worth-trend {
  padding: 6px 22px 14px;
  border-top: 1px solid rgba(var(--wash-rgb), 0.06);
}
.worth-trend-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 2px;
}
.worth-trend-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.worth-trend-sub {
  font-size: 12px;
  color: var(--muted);
}
.worth-trend-chart { width: 100%; }
.worth-footnote {
  padding: 12px 22px 18px;
  border-top: 1px solid rgba(var(--wash-rgb), 0.06);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}
@media (max-width: 900px) {
  .worth-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .worth-cta { grid-column: 1 / -1; width: 100%; }
}
.kpi-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.kpi-eyebrow strong {
  display: block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  text-transform: none;
  margin-top: 2px;
}
@media (max-width: 900px) {
  .paid-kw-grid { grid-template-columns: 1fr; }
}

/* ── Empty / unavailable states for live panels ────────────── */
td.empty {
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  text-align: center;
  padding: 18px 8px;
}
.chart-empty {
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  text-align: center;
  padding: 60px 8px;
}

/* Panels with no live data source (fetch failed, or the upstream
   DataForSEO call doesn't return what this panel needs) render at
   30% opacity so the user can immediately see what's real vs what
   isn't. `.panel-unavailable.is-mocked` is the same effect for
   panels that are intentionally mocked (e.g. Marketplace) — kept as
   a distinct class so a later code change can style them differently. */
.panel-unavailable,
.panel-unavailable.is-mocked {
  opacity: 0.3;
  filter: saturate(0.4);
  transition: opacity 200ms ease, filter 200ms ease;
}
.panel-unavailable .btn { pointer-events: none; }

/* ── Pay-to-access locked panels ──────────────────────────────
   A locked panel hasn't been bought for the in-focus domain, so it
   has no usable data. We blur+dim whatever placeholder is underneath
   and float a small card with the feature name and the unlock action.
   The overlay is injected from JS into the panel's section element. */
.panel-locked {
  position: relative;
}
/* Locked = greyed out. A light dim + desaturate over whatever sits
   underneath, with one quiet pill naming the section — no buttons, no
   prices; the single load decision lives in the sticky page gate. */
.panel-locked > .panel-locked-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: inherit;
  /* It's a <button> now — strip the UA chrome and make the whole card
     read as tappable, since that is what a user reaches for on a greyed
     panel. */
  width: 100%;
  border: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease;
  /* Light touch on purpose: underneath is only skeleton or clearly-pilled
     sample data, and the product should read as free-with-an-upgrade, not
     walled off. The pill + slight dim signal "not loaded" clearly enough. */
  background: rgba(var(--dk12-rgb), 0.25);
  backdrop-filter: blur(1.5px) saturate(0.65);
  -webkit-backdrop-filter: blur(1.5px) saturate(0.65);
}
/* The FIGURES inside a locked section stay unreadable regardless of the
   light overlay: the sample preview sells the shape of the report — a
   readable number could be mistaken for the user's own data. Charts keep
   their silhouette; values, deltas, table cells and axis labels smudge. */
.panel-locked .kpi-value,
.panel-locked .kpi-delta,
.panel-locked [data-count],
.panel-locked td,
.panel-locked .geo-chip strong,
.panel-locked .badge,
.panel-locked .apexcharts-yaxis text,
.panel-locked .apexcharts-datalabels text,
.panel-locked .apexcharts-datalabels-group text,
/* The hero's own figures. Its sample numbers must be as unreadable as
   every other locked figure — the point is the SHAPE of a healthy report,
   not the digits. */
.panel-locked [data-vital],
.panel-locked #score-verdict-text,
.panel-locked #score-checked-at,
.panel-locked .apexcharts-text.apexcharts-datalabel-value,
.panel-locked .apexcharts-text.apexcharts-datalabel-label {
  filter: blur(7px);
}
/* The gauges themselves stay legible as shapes — that is the part doing
   the selling. Slightly muted so the pill still wins the eye. */
.panel-locked .score-chart,
.panel-locked .vital-chart { opacity: 0.75; }
.panel-locked-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 15px;
  text-align: center;
  border-radius: var(--r-chip);
  background: rgba(var(--glass-lo-rgb), 0.88);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
/* Hover/press feedback lives on the pill, not the whole overlay — dimming
   an entire card on hover is heavy-handed and fights the sample data
   underneath, which is the part doing the selling. */
.panel-locked > .panel-locked-overlay:hover .panel-locked-pill,
.panel-locked > .panel-locked-overlay:focus-visible .panel-locked-pill {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(var(--glass-lo-rgb), 0.96);
}
.panel-locked > .panel-locked-overlay:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.panel-locked > .panel-locked-overlay:active .panel-locked-pill { transform: scale(0.98); }

/* Line 1 names the section; line 2 is the ask. Splitting them lets the
   pill say what this is AND what tapping costs without becoming a
   paragraph — the price is the question a locked card actually raises. */
.panel-locked-head { display: inline-flex; align-items: center; gap: 7px; }
.panel-locked-buy {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent-text);
}
.panel-locked-buy[hidden] { display: none; }
.panel-locked > .panel-locked-overlay:hover .panel-locked-buy,
.panel-locked > .panel-locked-overlay:focus-visible .panel-locked-buy {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The gate flashes once when an overlay sends you to it, so the jump has
   a visible destination instead of the page just moving under you. */
.page-gate.is-flashing {
  animation: gate-flash 1.4s cubic-bezier(0.4, 0, 0.2, 1) 1;
}
@keyframes gate-flash {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
  35%  { box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-gate.is-flashing { animation: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.30); }
}
/* Icon / action / button bases below are kept for the marketplace item
   page (its in-section unlock card layers .mi-locked overrides on top). */
.panel-locked-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.panel-locked-action { margin-top: 2px; }

.panel-unlock-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, opacity 120ms ease;
}
.panel-unlock-btn:hover { border-color: var(--line-strong, rgba(var(--wash-rgb), 0.22)); }
.panel-unlock-btn[disabled] { opacity: 0.6; cursor: default; }

.panel-get-tokens {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(230, 196, 122, 0.10);
  border: 1px solid rgba(230, 196, 122, 0.35);
  color: var(--gold, var(--gold));
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}
.panel-get-tokens:hover { background: rgba(230, 196, 122, 0.16); }

/* ── Worth card pitch mode (report locked) ─────────────────
   The worth card is deliberately never grey-locked; while the report
   isn't loaded it pitches what the report reveals instead of showing
   four em-dashes. JS (renderWorth in health.js / referring-domains.js)
   toggles .worth-pitch-mode and injects the .worth-pitch checklist. */
.worth-pitch-mode .worth-grid,
.worth-pitch-mode .worth-cta { display: none; }
.worth-pitch {
  display: flex;
  flex-direction: column;
  gap: 11px;
  /* Horizontal padding matches .worth-grid and .worth-footnote, the two
     siblings this block sits between. Without it the checklist had no inset
     of its own and the tick glyphs rendered hard against the card border —
     20px left of the heading they belong under, which read as a broken card
     rather than a list. Padding rather than margin so the gap is part of the
     block and cannot collapse against the neighbouring rules. */
  margin: 0;
  padding: 18px 22px 6px;
}
.worth-pitch-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.worth-pitch-row svg {
  flex: none;
  margin-top: 3px;
  color: var(--accent-text);
}

/* ── Page-level "load the report" gate ────────────────────
   Sticks to the top of the scroll area so the one load decision
   follows the user past the greyed-out sections. The background must
   stay opaque — it floats over content while stuck. */
.page-gate {
  position: sticky;
  top: 10px;
  z-index: 60;
  border: 1px solid rgba(230, 196, 122, 0.30);
  background:
    linear-gradient(180deg, rgba(230, 196, 122, 0.08), rgba(230, 196, 122, 0.04)),
    #131316;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.page-gate-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}
.page-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  color: var(--gold);
  background: rgba(230, 196, 122, 0.10);
  border: 1px solid rgba(230, 196, 122, 0.28);
}
.page-gate-copy { flex: 1 1 auto; min-width: 0; }
.page-gate-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.page-gate-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.page-gate-balance { color: var(--muted); }
/* Live purchase progress — one chip per bundle group, lighting up green
   as the server commits each group's data (polled while the charge runs). */
.page-gate-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.pg-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: var(--r-chip);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(var(--wash-rgb), 0.03);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.pg-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-2, var(--grey-4));
  animation: pg-chip-pulse 1.2s ease-in-out infinite;
}
.pg-chip.done {
  color: var(--cyan-3);
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.08);
}
.pg-chip.done::before {
  background: var(--accent, var(--accent));
  animation: none;
}
@keyframes pg-chip-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.page-gate-balance-line {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
}
.page-gate-shortfall {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold, var(--gold));
}
/* The dollar figure, lifted out of the sentence around it. This is the ONE
   place on the page that carries the price (the locked cards no longer quote
   it — see lockedBuyLabel in js/page-gate.js), so it has to be findable.
   --accent-text, not --accent: the flat accent is a fill colour and doesn't
   hold up as small text on the panel. */
.page-gate-price {
  color: var(--accent-text);
  font-weight: 700;
}
/* "One purchase covers it all" — the four report pages share one bundle;
   without this line each page's identical price reads as per-section. */
.page-gate-bundle-line {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--muted-2);
}
/* Quiet trust-first variant: the user already has free live data on the
   page (GSC covered) — neutral card material, green "live" icon, ghost
   CTA. No gold, no lock, no urgency. */
.page-gate-quiet {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.page-gate-quiet .page-gate-icon {
  color: var(--positive);
  background: rgba(70, 200, 245, 0.08);
  border-color: rgba(70, 200, 245, 0.22);
}
/* The quiet variant used to strip its CTA back to an outline button, on the
   reasoning that a user who already has free Google data shouldn't be sold to.
   It went too far: the card explains a real, priced thing and then offered no
   obvious way to take it. The card stays quiet — no lock, no gold, no balance
   math — and the button alone is loud. */

/* In-progress variant: shown while a purchased async section is still
   being fetched upstream (and after a reload mid-fetch). */
.page-gate-pending {
  border-color: rgba(122, 196, 230, 0.30);
  background: linear-gradient(180deg, rgba(122, 196, 230, 0.08), rgba(122, 196, 230, 0.04));
}
/* Welcome auto-load variant: a brand-new account's first report is
   loading itself against the welcome grant ("on the house") — accent
   green and a spinner instead of the paywall gold + CTA. */
/* .page-gate-onhouse removed with the auto-purchase it styled. */
.page-gate-spinner {
  color: transparent;
  background: transparent;
  border: 3px solid rgba(122, 196, 230, 0.22);
  border-top-color: rgba(122, 196, 230, 0.85);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  margin: 6px;
  animation: page-gate-spin 0.9s linear infinite;
}
@keyframes page-gate-spin { to { transform: rotate(360deg); } }
.page-gate-action { flex: 0 0 auto; }
.page-gate-load {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--cyan-bg);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 120ms ease, opacity 120ms ease;
}
.page-gate-load:hover { filter: brightness(1.06); }
.page-gate-load[disabled] { opacity: 0.6; cursor: default; }
/* "Buy report" — the same green as the load button, because it is the same
   decision at a different balance. It was gold-on-transparent, which read as
   a secondary aside on the one card whose entire job is to be chosen. */
.page-gate-get-tokens {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--cyan-bg);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 120ms ease;
}
.page-gate-get-tokens:hover { filter: brightness(1.06); }
@media (max-width: 640px) {
  .page-gate-inner { flex-wrap: wrap; }
  .page-gate-action { width: 100%; }
  .page-gate-load, .page-gate-get-tokens { width: 100%; justify-content: center; }
  /* Once actually stuck (sentinel in page-gate.js), collapse to two quiet
     lines — title + compact CTA — so the pinned bar stops eating the
     screen while scrolling. Expands again at the top of the page. */
  .page-gate.is-stuck .page-gate-icon,
  .page-gate.is-stuck .page-gate-sub,
  .page-gate.is-stuck .page-gate-balance-line,
  .page-gate.is-stuck .page-gate-shortfall,
  .page-gate.is-stuck .page-gate-bundle-line { display: none; }
  /* Left inset clears the floating hamburger (fixed 38px at left:12px)
     that the pinned bar otherwise slides under. */
  .page-gate.is-stuck .page-gate-inner { padding: 9px 14px 9px 46px; gap: 8px; }
  .page-gate.is-stuck .page-gate-title {
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .page-gate.is-stuck .page-gate-load,
  .page-gate.is-stuck .page-gate-get-tokens {
    padding: 7px 12px;
    font-size: 12px;
  }
}
.page-gate-sentinel {
  height: 1px;
  margin-bottom: -1px;
  pointer-events: none;
  visibility: hidden;
}

/* ── KPI strip ────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.kpi-card {
  position: relative;
  padding: 16px 16px 0;
  background:
    linear-gradient(180deg, rgba(var(--wash-rgb), 0.02) 0%, rgba(var(--wash-rgb), 0) 55%),
    var(--panel);
  border: 1px solid rgba(var(--wash-rgb), 0.06);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.05),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 12px 36px -16px rgba(0,0,0,0.55);
  overflow: hidden;
  transition:
    border-color 200ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 200ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.kpi-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.07),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 18px 40px -22px rgba(0,0,0,0.7);
}
.kpi-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kpi-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--r-chip);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.kpi-delta.up   { color: var(--positive); background: var(--positive-faint); border: 1px solid var(--positive-faint); }
.kpi-delta.down { color: var(--red-1); background: rgba(255,122,122,0.08); border: 1px solid rgba(255,122,122,0.22); }
.kpi-delta.flat { color: var(--muted); background: rgba(var(--wash-rgb), 0.03); border: 1px solid rgba(var(--wash-rgb), 0.06); }
.kpi-spark {
  margin: 6px -16px 0;
  height: 48px;
}
.kpi-spark.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px dashed rgba(var(--wash-rgb), 0.06);
  margin: 10px 0 0;
  height: 38px;
}
.kpi-spark-empty-label {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--muted-2);
  letter-spacing: 0.06em;
}
.kpi-sub {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted-2);
  letter-spacing: 0.01em;
}
body[data-page="usage"] .kpi-card { padding: 16px; }

/* ── Section card (charts, tables) ───────────────────────── */
.section-card {
  /* inherits .card from account.css */
}
.section-card .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.section-card .card-head .head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* "Digg further" — pill link from a dashboard section to its full
   dedicated page. Accent-tinted, arrow nudges on hover. */
.dig-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-chip);
  font: 600 12px 'Inter', sans-serif;
  letter-spacing: 0.01em;
  color: var(--accent-text);
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 180ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.dig-badge svg { transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1); }
.dig-badge:hover {
  background: rgba(var(--accent-rgb), 0.17);
  border-color: rgba(var(--accent-rgb), 0.42);
}
.dig-badge:hover svg { transform: translateX(2px); }
.dig-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* "Ask AI" — sibling of .dig-badge but a filled accent pill, so the AI
   handoff reads as the primary action in the header. Hands the section's
   data to the chat with Project MCP on (see the ASK_AI_TOOLTIP warning). */
.ask-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-chip);
  font: 600 12px 'Inter', sans-serif;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition:
    filter 180ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.ask-badge svg { opacity: 0.9; }
.ask-badge:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ask-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ask-badge[hidden] { display: none; }

/* Toggle pills (organic / paid / branded) — smaller cousin of range-pill */
.toggle-pill {
  display: inline-flex;
  background:
    linear-gradient(180deg, rgba(var(--wash-rgb), 0.02), rgba(0,0,0,0.10)),
    rgba(var(--dk1-rgb),0.55);
  border: 1px solid rgba(var(--wash-rgb), 0.06);
  border-radius: var(--r-chip);
  padding: 3px;
  box-shadow: inset 0 1px 0 rgba(var(--wash-rgb), 0.03);
}
.toggle-pill button {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: 500 11px 'Inter', sans-serif;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: var(--r-chip);
  cursor: pointer;
  transition:
    color 200ms cubic-bezier(0.32, 0.72, 0, 1),
    background 200ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.toggle-pill button:hover { color: var(--text); }
.toggle-pill button:active { transform: scale(0.98); transition-duration: 80ms; }
.toggle-pill button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle-pill button.active {
  background: linear-gradient(180deg, rgba(var(--wash-rgb), 0.10) 0%, rgba(var(--wash-rgb), 0.04) 100%);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.08),
    0 1px 2px rgba(0,0,0,0.30);
}
.toggle-pill button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.toggle-pill button:disabled:hover { color: var(--muted); }

/* The (i) info button is absolutely positioned by default (sits at the
   top-right of a card). When dropped inline in a card-head action row,
   reset that so it flows next to the toggle pills. Bump the default
   opacity up so it's discoverable next to active toggle buttons rather
   than blending into the chrome. The tooltip drops down from the (i)
   as designed. */
.head-actions .vital-info {
  position: relative;
  top: auto;
  right: auto;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Generic in-card chart wrapper — gives every chart the glow */
.chart-wrap {
  position: relative;
  padding: 14px 12px 8px;
}
.chart-wrap.tall { min-height: 280px; }

/* Two-column layout used by rankings, backlinks-profile */
.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0;
}
.split-grid > * + * { border-left: 1px solid var(--line); }

/* ── Index Health (the unique feature) ───────────────────── */
.index-health {
  /* Highlighted feature card: marked by an accent-tinted border, not a
     glow — the hero score remains the only glowing element. */
  border-color: var(--accent-faint);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.03),
    0 18px 40px -28px rgba(0,0,0,0.9);
}
.index-health .card-head h2 { color: var(--cyan-5); }
.index-health .card-head h2::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb),0.7);
  margin-right: 8px;
  vertical-align: middle;
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .index-health .card-head h2::before { animation: none; opacity: 1; }
}

.ih-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
}
.ih-grid > * + * { border-left: 1px solid var(--line); }
.ih-counters {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  gap: 18px;
}
.ih-counter .ih-label {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ih-counter .ih-value {
  margin-top: 4px;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-hi);
}
.ih-counter.alive    .ih-value { color: var(--lt18); }
.ih-counter.dropped  .ih-value { color: var(--red-5); }
.ih-counter.recover  .ih-value { color: var(--gold-3); }
.ih-counter .ih-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

/* ── Backlink profile ────────────────────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
}
.profile-grid > * + * { border-left: 1px solid var(--line); }

.dr-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dr-bar {
  position: relative;
  width: 38px;
  height: 5px;
  border-radius: 3px;
  background: rgba(var(--wash-rgb), 0.06);
  overflow: hidden;
}
.dr-bar > span {
  position: absolute;
  inset: 0;
  width: var(--w, 50%);
  background: linear-gradient(90deg, var(--accent), #7cc9ea);
  border-radius: 3px;
}
.dr-num {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-2);
  min-width: 22px;
  text-align: right;
}

/* ── Reputation ──────────────────────────────────────────── */
.rep-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 0;
}
.rep-grid > * + * { border-left: 1px solid var(--line); }
.rep-grid > * { padding: 22px 24px; }

.rep-eyebrow {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Overall rating column */
.rep-overall { display: flex; flex-direction: column; gap: 6px; }
.rep-stars { display: flex; align-items: center; }
.rep-stars .rep-star-row {
  display: inline-flex;
  gap: 3px;
  filter: drop-shadow(0 0 8px rgba(230,196,122,0.25));
}
.rep-stars .star {
  width: 22px;
  height: 22px;
  fill: var(--gold);
}
/* half-star uses a clip to fill only the left half */
.rep-stars .star.half {
  fill: url(#__halfStarMask) var(--gold);
  clip-path: inset(0 50% 0 0);
}
.rep-stars .rep-star-row > .star.half { position: relative; }
.rep-stars .rep-star-row > .star.half::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23393940'><path d='M12 2l2.39 5.84L20.5 8.6l-4.5 4 1.2 6.3L12 15.9 6.8 18.9 8 12.6l-4.5-4 6.11-.76L12 2z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  clip-path: inset(0 0 0 50%);
  pointer-events: none;
}
.rep-rating {
  font-size: 38px;
  font-weight: 500;
  color: var(--text-hi);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 4px;
}
.rep-rating::after { content: " / 5"; font-size: 16px; color: var(--muted-2); font-weight: 400; }
.rep-count {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.rep-count-sub {
  font-size: 11.5px;
  color: var(--muted-2);
  letter-spacing: 0.04em;
}
.rep-spark {
  margin-top: 14px;
  height: 44px;
}

/* Distribution bars */
.rep-distribution { display: flex; flex-direction: column; }
.rep-bar-row {
  display: grid;
  grid-template-columns: 14px 16px 1fr 38px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.rep-bar-row .rep-stars-label {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.rep-bar-row .rb-icon {
  width: 12px;
  height: 12px;
  fill: var(--gold);
  opacity: 0.7;
}
.rep-bar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: rgba(var(--wash-rgb), 0.05);
  overflow: hidden;
}
.rep-bar > span {
  position: absolute;
  inset: 0;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--gold), var(--gold-3));
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(230,196,122,0.30);
}
.rep-bar-row[data-stars="2"] .rep-bar > span,
.rep-bar-row[data-stars="1"] .rep-bar > span {
  background: linear-gradient(90deg, var(--danger), #ff9b9b);
  box-shadow: 0 0 10px rgba(255,122,122,0.30);
}
.rep-bar-row[data-stars="3"] .rep-bar > span {
  background: linear-gradient(90deg, var(--muted), #b0b0b8);
  box-shadow: none;
}
.rep-pct {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Source breakdown */
.rep-sources { display: flex; flex-direction: column; gap: 8px; }
.rep-source {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(var(--dk1-rgb),0.45);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.rep-source:hover {
  border-color: rgba(var(--wash-rgb), 0.12);
  background: rgba(var(--glass-hi-rgb),0.55);
  transform: translateY(-1px);
}
.rep-source .rs-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
  flex-shrink: 0;
}
.rep-source .rs-logo.google    { background: linear-gradient(135deg, #4285F4, #34A853); }
.rep-source .rs-logo.trustpilot { background: linear-gradient(135deg, #00B67A, #007a52); }
.rep-source .rs-logo.yelp      { background: linear-gradient(135deg, #FF1A1A, #C41200); }
.rep-source .rs-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.rep-source .rs-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.rep-source .rs-meta .rs-rating {
  color: var(--gold);
  font-weight: 500;
}
.rep-source .rs-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── Technical health ────────────────────────────────────── */
.tech-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 0;
}
.tech-grid > * + * { border-left: 1px solid var(--line); }
.tech-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  gap: 8px;
}
.tech-score .tech-chart { width: 180px; height: 180px; }
.tech-score .tech-sub {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.issue-list { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ── "What's healthy" strip — the site-level checks that passed ── */
.tech-passing {
  padding: 12px 14px;
  background: var(--positive-faint);
  border: 1px solid var(--positive-faint);
  border-radius: 10px;
}
.tech-passing-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--positive);
  margin-bottom: 9px;
}
.tech-passing-head svg { flex: none; }
.tech-passing-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pass-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--r-chip);
  font-size: 12px; color: var(--lt19);
  background: rgba(70,200,245,0.10);
  border: 1px solid rgba(70,200,245,0.22);
  cursor: default;
}
.pass-chip svg { flex: none; color: var(--positive); }

.issue-clean {
  padding: 22px 14px; text-align: center;
  font-size: 13px; color: var(--muted);
}

/* ── Expandable issue rows ── */
.issue {
  background: rgba(var(--dk1-rgb),0.45);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.18s ease, background 0.18s ease;
  overflow: hidden;
  min-width: 0;
}
.issue:hover { border-color: rgba(var(--wash-rgb), 0.12); background: rgba(var(--glass-hi-rgb),0.55); }
.issue.open  { border-color: rgba(var(--wash-rgb), 0.14); background: rgba(var(--glass-hi-rgb),0.6); }
.issue-head {
  display: grid;
  grid-template-columns: 22px 1fr auto 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: none; border: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.issue .sev {
  width: 8px; height: 8px; border-radius: 50%;
  margin-left: 6px; box-shadow: 0 0 10px currentColor;
}
.issue.error    .sev { color: var(--danger); background: var(--danger); }
.issue.warning  .sev { color: var(--gold);   background: var(--gold); }
.issue.notice   .sev { color: var(--muted);  background: var(--muted); }
.issue .issue-main { min-width: 0; }
.issue .issue-title { font-size: 13px; color: var(--text-1); font-weight: 500; }
.issue .issue-meta  { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; text-transform: capitalize; }
.issue .issue-count {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1;
  font-size: 14px; font-weight: 600; color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.issue .issue-count-u { font-size: 10px; font-weight: 500; color: var(--muted); text-transform: none; }
.issue-caret { display: inline-flex; color: var(--muted); transition: transform 0.18s ease; }
.issue.open .issue-caret { transform: rotate(180deg); }

.issue-detail {
  padding: 4px 14px 14px 40px;
  display: flex; flex-direction: column; gap: 9px;
  min-width: 0;
}
.idl-row { display: grid; grid-template-columns: 108px 1fr; gap: 12px; align-items: baseline; }
.idl-k {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--muted-2); padding-top: 1px;
}
.idl-v { font-size: 12.5px; color: var(--lt20); line-height: 1.5; }
.issue-ask {
  align-self: flex-start; margin-top: 3px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  color: var(--positive);
  background: rgba(70,200,245,0.10);
  border: 1px solid rgba(70,200,245,0.28);
  transition: background 0.16s ease, border-color 0.16s ease;
}
.issue-ask:hover { background: rgba(70,200,245,0.18); border-color: rgba(70,200,245,0.45); }
.issue-ask svg { flex: none; }

/* ── Drill-down: the actual offending URLs for an issue ── */
.issue-examples { margin-top: 2px; }
.issue-examples-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500; color: var(--muted);
  transition: color 0.15s ease;
}
.issue-examples-toggle:hover { color: var(--lt20); }
.issue-examples-toggle .issue-caret { color: var(--muted); }
.issue-examples-toggle.open .issue-caret { transform: rotate(180deg); }
.issue-examples-list {
  margin-top: 6px; min-width: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(var(--well-rgb), var(--well-a22)); overflow: hidden;
}
.ex-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; min-width: 0;
  font-size: 12px; line-height: 1.3;
  border-top: 1px solid rgba(var(--wash-rgb), 0.04);
}
.ex-row:first-child { border-top: 0; }
.ex-url {
  flex: 0 1 auto; min-width: 0;
  color: #8fd3ee; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-url:hover { text-decoration: underline; }
.ex-arrow { color: var(--muted); flex: none; }
.ex-status {
  flex: none; margin-left: auto;
  font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 1px 6px; border-radius: 5px;
  color: var(--danger); background: rgba(224,75,74,0.12);
}
.ex-note {
  flex: none; color: var(--muted-2); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch;
}
.ex-more { padding: 7px 11px; font-size: 11.5px; color: var(--muted); border-top: 1px solid rgba(var(--wash-rgb), 0.04); }
@media (max-width: 560px) {
  .idl-row { grid-template-columns: 1fr; gap: 2px; }
  .issue-detail { padding-left: 14px; }
}

/* ── Technical: on-demand intro / "Run audit" CTA ──────────── */
/* .tech-grid sets display:grid, which would beat the UA [hidden] rule, so
   the two faces need explicit hide rules. */
.tech-grid[hidden], .tech-intro[hidden] { display: none; }
.tech-intro { padding: 30px 22px 34px; }
.tech-intro-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tech-intro-icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: var(--accent-text);
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  margin-bottom: 14px;
}
.tech-intro-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.tech-intro-sub {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.tech-intro-points {
  margin: 16px 0 4px;
  padding: 0;
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  max-width: 430px;
}
.tech-intro-points li {
  position: relative;
  padding-left: 26px;
  font-size: 13px;
  color: var(--lt21);
}
.tech-intro-points li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tech-intro-btn {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--mint-bg2);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.16s ease;
}
.tech-intro-btn:hover { filter: brightness(1.06); }
.tech-intro-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted-2);
}
.tech-intro-note.is-error { color: var(--gold); }
.tech-intro-inner.is-running { padding: 12px 0; }
.tech-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: techSpin 0.8s linear infinite;
  margin-bottom: 14px;
}
@keyframes techSpin { to { transform: rotate(360deg); } }

/* ── Starting from scratch ───────────────────────────────── */
.getting-started[hidden] { display: none; }
.getting-started { padding: 24px 22px 26px; }
.gs-inner { max-width: 640px; margin: 0 auto; }
.gs-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.gs-icon {
  flex: none;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: var(--accent-text);
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
}
.gs-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.gs-sub {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.gs-steps {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gs-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.gs-step:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.06);
  transform: translateY(-1px);
}
.gs-step-num {
  flex: none;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--mint-bg2);
  font-size: 13px;
  font-weight: 700;
}
.gs-step-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.gs-step-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}
.gs-step-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.gs-step-go {
  flex: none;
  margin-left: auto;
  color: var(--muted-2);
  font-size: 16px;
  transition: color 0.16s ease, transform 0.16s ease;
}
.gs-step:hover .gs-step-go {
  color: var(--accent-text);
  transform: translateX(2px);
}
@media (max-width: 560px) {
  .gs-head { flex-direction: column; gap: 10px; }
}

/* ── Competitors ─────────────────────────────────────────── */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}
.comp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: linear-gradient(180deg, rgba(var(--glass-hi-rgb),0.55), rgba(var(--glass-lo-rgb),0.55));
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.comp-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.8);
}
.comp-card .comp-chart { width: 90px; height: 90px; }
.comp-card .comp-domain {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.comp-source-pill.user {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(var(--accent-rgb), 0.12);
  color: #5fcdf0;
}
.comp-card .comp-stats {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.comp-card .comp-stats span strong {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-transform: none;
  letter-spacing: -0.005em;
  margin-bottom: 1px;
}

/* ── Movers/losers mini-table ────────────────────────────── */
/* ── Position bar — band colours: green = winning,
   gold = striking distance, grey = far back. */
.s-top3   { background: var(--accent); }
.s-4-10   { background: #7cc9ea; }
.s-11-20  { background: var(--gold); }
.s-21-50  { background: var(--muted); }
.s-51-100 { background: var(--muted-2); }

.kw-distrib { padding: 16px 20px; display: flex; flex-direction: column; }
.kw-distrib-head {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}
.kw-bar {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(var(--wash-rgb), 0.04);
}
.kw-seg { display: block; min-width: 2px; }
.kw-seg + .kw-seg { box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.35); }
.kw-bands {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.kw-band {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.kw-band.is-zero { opacity: 0.4; }
.kw-b-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
.kw-b-n {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kw-b-l { font-size: 11.5px; color: var(--muted); }
.kw-distrib-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.kw-distrib-foot strong { color: var(--text); font-weight: 600; }

/* ── Your biggest keywords — concrete, always meaningful from
   one snapshot. Rank pill colour mirrors the position bands. */
.kw-top { padding: 16px 20px; }
.kw-top-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.kw-top-head strong { font-size: 14px; color: var(--text); font-weight: 600; }
.kw-top-head span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.kw-top-list { list-style: none; margin: 0; padding: 0; }
.kw-top-list li {
  display: grid;
  /* 4th track = the movement pill; every renderer emits a .kt-delta (a
     hidden .none placeholder when there is nothing to compare) so the
     volume column lines up across rows. */
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.kw-top-list li:last-child { border-bottom: 0; }
.kt-kw {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kt-pos {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: var(--r-chip);
  font-size: 11.5px;
}
.kt-pos.g { color: var(--accent-text); background: rgba(var(--accent-rgb), 0.12); }
.kt-pos.o { color: var(--gold);   background: rgba(230, 196, 122, 0.14); }
.kt-pos.m { color: var(--muted);  background: rgba(var(--wash-rgb), 0.05); }
.kt-vol {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.kt-vol em { font-style: normal; color: var(--muted-2); font-size: 11px; }

/* Per-keyword movement pill (kwMovePill in health.js). Same color logic
   as .kpi-delta; `.idx` marks DataForSEO's cycle-over-cycle claim (a shade
   quieter than movement between our own pulls); `.none` keeps the grid
   track when there is nothing to compare. */
.kt-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 30px;
  padding: 2px 6px;
  border-radius: var(--r-chip);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kt-delta.up   { color: var(--positive); background: var(--positive-faint); }
.kt-delta.down { color: var(--red-1); background: rgba(255, 122, 122, 0.08); }
.kt-delta.flat { color: var(--muted-3); }
.kt-delta.new  { color: var(--accent-text); background: rgba(var(--accent-rgb), 0.12); font-size: 9.5px; letter-spacing: 0.04em; }
.kt-delta.idx  { opacity: 0.75; }
.kt-delta.none { visibility: hidden; padding: 0; }

/* ── Striking distance — keywords at 11–20, one push from page 1.
   Gold = opportunity (not won yet, not a problem). */
.striking { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.striking-head { display: flex; align-items: center; gap: 18px; }
.striking-n {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.striking-cap { display: flex; flex-direction: column; gap: 4px; }
.striking-cap strong { font-size: 14px; color: var(--text); font-weight: 600; }
.striking-cap span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
/* Phones: the big gold count squeezes the caption into a narrow column —
   stack it above the caption so the copy gets the full width. */
@media (max-width: 640px) {
  .striking-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .striking-n { font-size: 32px; }
}
.striking-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 28px;
}
.striking-list li {
  display: grid;
  /* 4 tracks — see .kw-top-list li: the movement pill always renders. */
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.striking-list .sk-kw {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.striking-list .sk-pos {
  color: var(--gold);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.striking-list .sk-vol {
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.striking-empty,
.striking-loading {
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  padding: 2px;
}

.movers {
  padding: 6px 6px 10px;
  display: flex;
  flex-direction: column;
}
.mover {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.mover:last-child { border-bottom: 0; }
.mover .mv-kw {
  font-size: 13px;
  color: var(--text-1);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mover .mv-kw .mv-meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted-2);
}
.mover .mv-pos {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.mover .mv-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  justify-content: flex-end;
}
.mover .mv-delta.up   { color: var(--positive); }
.mover .mv-delta.down { color: var(--red-1); }

/* ── Section reveal — always visible, JS adds .in for the
   subtle rise animation. The fallback (no JS) shows everything. */
.reveal { opacity: 1; transform: none; }
.reveal.will-rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.will-rise.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal.will-rise { opacity: 1; transform: none; transition: none; }
}

/* ── ApexCharts global tweaks (force glass tooltip) ──────── */
.apexcharts-tooltip.apexcharts-theme-dark {
  background: linear-gradient(180deg, rgba(var(--glass-hi-rgb),0.95), rgba(var(--glass-lo-rgb),0.95)) !important;
  border: 1px solid rgba(var(--wash-rgb), 0.10) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 20px 40px -12px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(var(--wash-rgb), 0.04) !important;
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
}
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
  background: rgba(var(--wash-rgb), 0.04) !important;
  border-bottom: 1px solid rgba(var(--wash-rgb), 0.06) !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  background: rgba(var(--glass-hi-rgb),0.95) !important;
  border-color: rgba(var(--wash-rgb), 0.10) !important;
  color: var(--text) !important;
}
.apexcharts-legend-text { color: var(--muted) !important; font-family: 'Inter', sans-serif !important; }
.apexcharts-text { font-family: 'Inter', sans-serif !important; }

/* ── Last-updated indicator + Fetch-fresh badge ───────────── */
.last-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: var(--r-chip);
  background: rgba(var(--wash-rgb), 0.025);
  border: 1px solid rgba(var(--wash-rgb), 0.05);
}
.last-updated .lu-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18);
}
.last-updated.is-stale .lu-dot { background: var(--gold); box-shadow: 0 0 0 3px rgba(230,196,122,0.18); }
.last-updated.is-loading .lu-dot { background: var(--grey-1); box-shadow: 0 0 0 3px rgba(var(--wash-rgb), 0.08); animation: lu-pulse 1.1s ease-in-out infinite; }
@keyframes lu-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes lu-spin { to { transform: rotate(360deg); } }

.btn-fetch-fresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--cyan-2);
  padding: 6px 11px;
  border-radius: var(--r-chip);
  background: rgba(var(--accent-rgb),0.10);
  border: 1px solid rgba(var(--accent-rgb),0.30);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, opacity 120ms;
}
.btn-fetch-fresh:hover { background: rgba(var(--accent-rgb),0.16); border-color: rgba(var(--accent-rgb),0.45); }
.btn-fetch-fresh:disabled { opacity: 0.55; cursor: progress; }
.btn-fetch-fresh.is-loading svg { animation: lu-spin 0.9s linear infinite; }
/* Gated (locked / out of tokens) — distinct from the loading :disabled state. */
.btn-fetch-fresh.is-gated,
.btn-fetch-fresh.is-gated:hover {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(var(--accent-rgb),0.06);
  border-color: rgba(var(--accent-rgb),0.20);
}
.last-updated.is-empty .lu-dot { background: var(--grey-1); box-shadow: none; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Stack the score gauge above the vitals here, not at 900px. The two-up
     layout needs ~807px of card width (280px gauge + ~443px min-content
     vitals + gap/padding); with the sidebar taking ~260px the content
     column drops below that around a 1155px viewport — so between 900 and
     ~1155px the vitals grid overflowed and .health-hero's overflow:hidden
     clipped the right half of the tiles. */
  .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .split-grid, .ih-grid, .profile-grid, .tech-grid, .rep-grid { grid-template-columns: 1fr; }
  .split-grid > * + *, .ih-grid > * + *, .profile-grid > * + *, .tech-grid > * + *, .rep-grid > * + * {
    border-left: 0; border-top: 1px solid var(--line);
  }
}
@media (max-width: 720px) {
  .center.center-scroll { padding: 0 16px 28px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vitals-grid { grid-template-columns: 1fr; }
  /* Keep the left gap so the page title clears the floating hamburger.
     No flex-wrap here: main.css (≤1000px) keeps the header actions on the
     headline row — by phone width they're compact icons that fit. */
  .stage-top { padding: 14px 16px; padding-left: 60px; gap: 12px; }
}
/* Phone: drop every multi-up grid to a single column and shrink the fixed
   gauges so they fit a ~345px usable width without overflowing. */
@media (max-width: 600px) {
  .kpi-grid,
  .comp-grid,
  .worth-grid { grid-template-columns: 1fr; }
  .hero-score .score-chart { width: 200px; height: 200px; }
  .tech-score .tech-chart { width: 150px; height: 150px; }
  /* Charts should fill, never force horizontal overflow. */
  .chart-wrap { max-width: 100%; }
}

/* ── Core Web Vitals panel ─────────────────────────────────── */
.cwv-body { padding: 18px 20px 20px; }
.cwv-intro p { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; max-width: 620px; }
.cwv-error { color: var(--danger); font-size: 12.5px; margin-top: 10px; }
.cwv-grid { display: flex; flex-direction: column; gap: 10px; }
.cwv-row {
  display: grid;
  grid-template-columns: 130px repeat(3, minmax(90px, 1fr)) minmax(150px, 1.4fr);
  gap: 10px;
  align-items: stretch;
}
.cwv-strategy { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.cwv-s-name { font-weight: 600; font-size: 13.5px; color: var(--text); }
.cwv-s-score { font-size: 12px; color: var(--muted); }
.cwv-s-score span { color: var(--muted-3); }
.cwv-metric {
  border: 1px solid var(--line);
  border-radius: var(--r-control, 13px);
  background: var(--panel-2);
  box-shadow: inset 0 1px 0 0 var(--edge-hi);
  padding: 10px 12px;
  cursor: help;
}
.cwv-m-label { font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted-2); }
.cwv-m-value { font-size: 17px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 2px; }
.cwv-m-verdict { font-size: 11px; margin-top: 2px; color: var(--muted-2); }
.cwv-metric.is-good .cwv-m-verdict { color: #7fe3aa; }
.cwv-metric.is-mid .cwv-m-verdict { color: #d8c79a; }
.cwv-metric.is-bad .cwv-m-verdict { color: var(--danger); }
.cwv-src { font-size: 11.5px; color: var(--muted-2); align-self: center; }
.cwv-foot { font-size: 11.5px; color: var(--muted-3); margin-top: 4px; }
@media (max-width: 760px) {
  .cwv-row { grid-template-columns: repeat(3, 1fr); }
  .cwv-strategy, .cwv-src { grid-column: 1 / -1; }
}

/* AI-suggested competitor — visually distinct from a user-added one so a
   guess never reads as measured SERP overlap. Amber = "unconfirmed". */
.comp-source-pill.ai {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(216, 199, 154, 0.14);
  color: #d8c79a;
  cursor: help;
}

/* ── Competing pages (cannibalisation) ─────────────────────── */
.cannib-body { padding: 6px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.cb-cluster {
  border: 1px solid var(--line);
  border-radius: var(--r-control, 13px);
  background: var(--panel-2);
  box-shadow: inset 0 1px 0 0 var(--edge-hi);
  padding: 14px 16px;
}
.cb-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: baseline; margin-bottom: 10px; }
.cb-topic { font-size: 14px; font-weight: 600; color: var(--text); }
.cb-meta { font-size: 12px; color: var(--muted-2); }
.cb-pages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cb-page {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 92px 118px 74px;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.cb-page.cb-keep { background: rgba(127, 227, 170, 0.06); color: var(--text); }
.cb-tag {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--r-chip); text-align: center;
  background: rgba(var(--wash-rgb), 0.06); color: var(--muted-2);
}
.cb-keep .cb-tag { background: rgba(127, 227, 170, 0.16); color: #7fe3aa; }
.cb-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono, monospace); font-size: 12px; }
.cb-stat { font-variant-numeric: tabular-nums; color: var(--muted-2); text-align: right; }
.cb-more { font-size: 12px; color: var(--muted-3); padding: 4px 8px 0 76px; }
.cb-why { margin-top: 11px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cb-clear { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) {
  .cb-page { grid-template-columns: 54px minmax(0, 1fr); row-gap: 2px; }
  .cb-stat { text-align: left; grid-column: 2; font-size: 11.5px; }
  .cb-more { padding-left: 8px; }
}

/* ── Paid-keywords fold (renderPaidKeywordsFromData) ─────────────
   8 rows by default; the rest opens in place. The button lives in its
   own full-width row so the table needs no wrapper changes. */
#paid-kw-tbody .pk-over { display: none; }
#paid-kw-tbody.is-open .pk-over { display: table-row; }
#paid-kw-tbody .pk-toggle-row td { padding: 10px 0 2px; border: 0; }

/* ── Folds added by the tightening pass (shared .showall-btn look) ── */
#gsc-links-body .gl-over { display: none; }
#gsc-links-body [data-role="gl-tbody"].is-open .gl-over { display: table-row; }
#gsc-links-body .gl-toggle-row td { padding: 10px 0 2px; border: 0; }

#issue-list .issue--over { display: none; }
#issue-list.is-open .issue--over { display: block; }
#issue-list .tech-showall { margin-top: 10px; }

#cannib-body .cb-over { display: none; }
#cannib-body.is-open .cb-over { display: block; }
#cannib-body .cb-showall { margin-top: 12px; }

.comp-overflow {
  align-self: center;
  color: var(--muted-2);
  font-size: 12.5px;
}
.comp-overflow a { color: var(--muted); }

/* ── Mobile vs desktop (GA4) ─────────────────────────────────────
   Deliberately plain: three numbers per device and one sentence. The claim
   is the finding, not the chrome. */
.gad-lead { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--text); }
.gad-rows { display: flex; flex-direction: column; }
.gad-row {
  display: grid;
  grid-template-columns: 1fr auto auto 56px;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.gad-dev { color: var(--text); font-weight: 550; }
.gad-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.gad-cvr {
  text-align: right;
  color: var(--text);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
/* Caveat line only. The Analytics badge moved to the card head 2026-08-21
   when the Google mark landed — one source claim per card, at the top,
   where it is read before the numbers rather than after them. */
.gad-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-2);
}
@media (max-width: 560px) {
  .gad-row { grid-template-columns: 1fr auto; row-gap: 2px; }
  .gad-cvr { grid-column: 2; }
}