/* Competitor scorecard banner — heaven-health.com top of page.
   Data: /api/competitors/scorecard (re-checked daily by the competitor watch). */

.cmp {
  /* The banner's own palette. It sits on pages with different (and dark-mode)
     tokens — /de /es /fr /ja use seo-page.css, which turns --ink near-white in
     dark mode — so it must never inherit text colours from the page. */
  --ink: #1F2A44;
  --ink-body: #3D4A66;
  --ink-mute: #5A6680;
  --ink-faint: #5A6680;
  --surface: #FFFFFF;
  --surface-2: #F6F9FD;
  --bg2: #EEF3FA;
  --gold: #B68A2E;
  --gold-deep: #8C6A22;
  --gold-light: #FFE8A8;
  --border-gold: rgba(182,138,46,0.30);
  --border-soft: rgba(168,201,238,0.40);
  --win:      #2F7A55;
  --win-bg:   #E6F3EC;
  --behind:   #A2433A;
  --behind-bg:#FBEBE8;
  --level:    #5A6680;
  --level-bg: #F1F4F9;

  position: relative; z-index: 4;
  margin: 0 clamp(16px, 5vw, 56px) 8px;
  border: 1px solid var(--border-gold, rgba(182,138,46,0.30));
  border-radius: 20px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 30px rgba(31,42,68,0.06);
  color: var(--ink, #1F2A44);
  font-family: 'Nunito', sans-serif;
}
.cmp[hidden] { display: none; }
/* Reserve the strip's height before the scorecard arrives so the hero below
   never jumps (CLS). Collapses only if the fetch fails. */
.cmp[aria-busy="true"] { min-height: 110px; }
/* Measured strip heights per language (audit R2-17): longer chrome wraps more. */
:lang(de) .cmp[aria-busy="true"], :lang(fr) .cmp[aria-busy="true"], :lang(ja) .cmp[aria-busy="true"] { min-height: 123px; }
:lang(es) .cmp[aria-busy="true"] { min-height: 141px; }
.cmp[aria-busy="true"]::after {
  content: ''; position: absolute; inset: 22px 18px auto 18px; height: 26px; border-radius: 13px;
  background: linear-gradient(90deg, var(--bg2, #EEF3FA), var(--surface-2, #F6F9FD), var(--bg2, #EEF3FA));
  background-size: 200% 100%; animation: cmp-shimmer 1.4s linear infinite;
}
@keyframes cmp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.cmp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── The strip ───────────────────────────────────────── */
.cmp-strip {
  display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap;
  width: 100%;
  padding: 14px 18px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  border-radius: 20px;
}
.cmp-strip:focus-visible, .cmp-scroll:focus-visible, .cmp-src:focus-visible { outline: 3px solid var(--gold-deep, #8C6A22); outline-offset: 2px; }

.cmp-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Space Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep, #8C6A22);
  white-space: nowrap;
}
.cmp-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--win);
  box-shadow: 0 0 0 0 rgba(47,122,85,0.5);
  animation: cmp-pulse 2.4s ease-out infinite;
}
.cmp-dot.stale { background: var(--ink-faint, #5A6680); animation: none; }
@keyframes cmp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,122,85,0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(47,122,85,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,122,85,0); }
}

.cmp-title {
  flex: 1 1 260px; min-width: 0;
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 17px; line-height: 1.3; color: var(--ink, #1F2A44);
}
.cmp-title small {
  display: block; margin-top: 2px;
  font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--ink-mute, #5A6680);
}

.cmp-tally { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-pill {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.cmp-pill b { font-size: 16px; font-variant-numeric: tabular-nums; color: inherit; }
/* Pages style strong/b globally (seo-page.css: color: var(--ink)); keep ours. */
.cmp strong, .cmp b { color: inherit; }
.cmp .cmp-behind-note li b { color: var(--ink); }
.cmp .cmp-intro strong { color: var(--ink); }
.cmp-pill.lead   { color: var(--win);    background: var(--win-bg); }
.cmp-pill.level  { color: var(--level);  background: var(--level-bg); }
.cmp-pill.behind { color: var(--behind); background: var(--behind-bg); }

.cmp-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Space Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep, #8C6A22);
  white-space: nowrap;
}
.cmp-toggle svg { transition: transform .25s ease; }
.cmp[data-open="true"] .cmp-toggle svg { transform: rotate(180deg); }

/* ── The panel ───────────────────────────────────────── */
.cmp-panel { padding: 0 18px 18px; }
.cmp-panel[hidden] { display: none; }

.cmp-intro {
  margin: 2px 0 14px; max-width: 820px;
  font-size: 14px; color: var(--ink-body, #3D4A66);
}
.cmp-behind-note {
  margin: 0 0 14px; padding: 10px 14px;
  border-left: 3px solid var(--behind); border-radius: 0 10px 10px 0;
  background: var(--behind-bg); color: var(--ink, #1F2A44);
  font-size: 14px;
}
.cmp-behind-note strong { color: var(--behind); }
.cmp-behind-note ul { margin: 6px 0 0; padding-left: 18px; columns: 2 320px; column-gap: 28px; }
.cmp-behind-note li { margin: 2px 0; break-inside: avoid; color: var(--ink-body, #3D4A66); }
.cmp-behind-note li b { color: var(--ink, #1F2A44); }

.cmp-changes:empty { display: none; }
.cmp-changes {
  margin: 0 0 14px; padding: 10px 14px;
  border-left: 3px solid var(--gold, #B68A2E); border-radius: 0 10px 10px 0;
  background: rgba(255,232,168,0.25); font-size: 14px; color: var(--ink, #1F2A44);
}
.cmp-changes ul { margin: 6px 0 0; padding-left: 18px; }
.cmp-changes li { margin: 2px 0; color: var(--ink-body, #3D4A66); }
.cmp-changes p { margin: 4px 0 0; color: var(--ink-mute, #5A6680); }
.cmp-when { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--gold-deep, #8C6A22); margin-right: 4px; }

.cmp-scroll {
  /* Scrolling both ways inside the box lets the header row and the area
     column stay pinned — sticky can't pin to the page from inside an
     overflow container. */
  overflow: auto; -webkit-overflow-scrolling: touch;
  max-height: min(78vh, 900px);
  border: 1px solid var(--border-soft, rgba(168,201,238,0.40)); border-radius: 14px;
  background: var(--surface, #FFFFFF);
}
.cmp-table {
  border-collapse: separate; border-spacing: 0;
  width: 100%; min-width: 980px;
  font-size: 13px;
}
.cmp-table th, .cmp-table td {
  padding: 10px 10px; vertical-align: top; text-align: left;
  border-bottom: 1px solid var(--border-soft, rgba(168,201,238,0.40));
}
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: 0; }
.cmp-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2, #F6F9FD);
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute, #5A6680);
  white-space: nowrap;
}
.cmp-table thead th .cmp-rec {
  display: block; margin-top: 4px;
  font-family: 'Nunito', sans-serif; font-size: 11px; letter-spacing: 0;
  text-transform: none; color: var(--ink-mute, #5A6680);
}
.cmp-area {
  position: sticky; left: 0; z-index: 1;
  min-width: 170px; max-width: 200px;
  background: var(--surface, #FFFFFF);
  font-weight: 700; color: var(--ink, #1F2A44);
}
thead .cmp-area { z-index: 3; background: var(--surface-2, #F6F9FD); }
.cmp-area .cmp-field {
  display: table; margin-top: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
}
.cmp-field.lead       { color: var(--win);    background: var(--win-bg); }
.cmp-field.level      { color: var(--level);  background: var(--level-bg); }
.cmp-field.behind     { color: var(--behind); background: var(--behind-bg); }
.cmp-field.rechecking { color: var(--ink-mute, #5A6680); background: var(--level-bg); }
.cmp-field.joint      { color: var(--win);    background: var(--win-bg); }
.cmp-caveat { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; line-height: 1.35; color: var(--ink-mute, #5A6680); }

.cmp-us {
  min-width: 140px;
  background: linear-gradient(180deg, rgba(255,232,168,0.35), rgba(255,232,168,0.18));
  font-weight: 700;
}
thead .cmp-us { color: var(--gold-deep, #8C6A22); background: rgba(255,232,168,0.55); }

.cmp-cell { min-width: 108px; color: var(--ink-body, #3D4A66); }
.cmp-cell .v { display: block; }
.cmp-cell .mark {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
}
.cmp-cell.win    .mark { color: var(--win);    background: var(--win-bg); }
.cmp-cell.level  .mark { color: var(--level);  background: var(--level-bg); }
.cmp-cell.behind .mark { color: var(--behind); background: var(--behind-bg); }
.cmp-cell.rechecking { color: var(--ink-mute, #5A6680); font-style: italic; }

.cmp-note { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; color: var(--ink-mute, #5A6680); }
.cmp-src {
  display: block; margin-top: 4px;
  font-size: 11px; color: var(--gold-deep, #8C6A22); text-decoration: none;
  border-bottom: 1px dotted var(--border-gold, rgba(182,138,46,0.30));
}
.cmp-src:hover { color: var(--gold, #B68A2E); }

.cmp-legend {
  display: flex; gap: 8px 18px; flex-wrap: wrap;
  margin: 12px 2px 0; font-size: 12px; color: var(--ink-mute, #5A6680);
}
.cmp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; border: 1px solid; }
.cmp-legend i.win    { background: var(--win-bg);    border-color: var(--win); }
.cmp-legend i.level  { background: var(--level-bg);  border-color: var(--level); }
.cmp-legend i.behind { background: var(--behind-bg); border-color: var(--behind); }

.cmp-method {
  margin: 12px 2px 0; max-width: 900px;
  font-size: 12px; line-height: 1.5; color: var(--ink-mute, #5A6680);
}

@media (max-width: 640px) {
  .cmp { margin: 0 16px 8px; border-radius: 16px; }
  .cmp-strip { padding: 12px 14px; gap: 10px 14px; }
  .cmp-title { font-size: 15.5px; flex-basis: 100%; }
  .cmp-panel { padding: 0 12px 14px; }
  .cmp-pill { padding: 5px 10px; font-size: 12px; }
  .cmp-pill b { font-size: 15px; }
  .cmp-area { min-width: 104px; max-width: 120px; }
  .cmp-us { min-width: 112px; }
  .cmp[aria-busy="true"], :lang(de) .cmp[aria-busy="true"], :lang(fr) .cmp[aria-busy="true"],
  :lang(ja) .cmp[aria-busy="true"], :lang(es) .cmp[aria-busy="true"] { min-height: 241px; }
}
@media (max-width: 360px) {
  /* Only the area column stays pinned on the narrowest phones, so a
     competitor column is always visible beside ours. */
  .cmp-area { min-width: 88px; max-width: 96px; font-size: 12px; }
  .cmp-live { white-space: normal; letter-spacing: 0.08em; }
  .cmp-us { min-width: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-dot { animation: none; }
  .cmp[aria-busy="true"]::after { animation: none; }
  .cmp-toggle svg { transition: none; }
}