/* Creator Showdown widgets — summary bar, platform charts, top 10 posts.
   Override any of these variables on .cs-widget (or a parent) to match your site. */
.cs-widget {
  --cs-bg: transparent;            /* widget background */
  --cs-card: #ffffff;              /* card background */
  --cs-border: #e4e4e7;            /* card border */
  --cs-fg: #18181b;                /* main text */
  --cs-muted: #71717a;             /* labels, axis text */
  --cs-grid: #ececef;              /* baselines */
  --cs-radius: 0;
  --cs-gap: 16px;
  --cs-font: "Inter Tight", sans-serif;
  --cs-number-font: "Anton", sans-serif;
  /* platform colours (same as the Claude dashboard) */
  --cs-tiktok: #000000;
  --cs-instagram: #FF2CB4;
  --cs-youtube: #FF0000;
  --cs-facebook: #1877F2;
  --cs-other: #1E90FF;

  font-family: var(--cs-font);
  color: var(--cs-fg);
  background: var(--cs-bg);
  box-sizing: border-box;
}
.cs-widget *, .cs-widget *::before, .cs-widget *::after { box-sizing: inherit; }

/* cards */
.cs-card {
  background: var(--cs-card);
  border: 1px solid var(--cs-border);
  border-top: 4px solid hsl(var(--primary));
  border-radius: var(--cs-radius);
  padding: 20px;
  min-width: 0;
}
.cs-card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.cs-note { margin: 0 0 12px; font-size: 13px; color: var(--cs-muted); }
.cs-foot { margin: 10px 0 0; font-size: 12px; color: var(--cs-muted); }
.cs-card h3 { margin-bottom: 12px; }
.cs-widget .cs-card h3 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

/* summary bar */
.cs-summary { display: grid; gap: var(--cs-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.cs-kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; }
.cs-kpi-label { font-size: 13px; color: var(--cs-muted); }
.cs-kpi-value { font-family: var(--cs-number-font); font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* platform analysis: two rows of two */
.cs-platform { display: grid; gap: var(--cs-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .cs-platform { grid-template-columns: minmax(0, 1fr); } }
.cs-chart { position: relative; }
.cs-chart svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--cs-font); }

/* top 10 posts */
.cs-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 14px; font-size: 13px; color: var(--cs-muted); }
.cs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cs-legend i { width: 10px; height: 10px; border-radius: 0; display: inline-block; }
.cs-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cs-top li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-top-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; min-width: 0; }
.cs-top-head a { color: var(--cs-fg); text-decoration: underline; text-decoration-color: var(--cs-border); text-underline-offset: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cs-top-head a:hover { text-decoration-color: currentColor; }
.cs-top-meta { color: var(--cs-muted); white-space: nowrap; flex-shrink: 0; }
.cs-top-row { display: flex; align-items: center; gap: 8px; }
.cs-top-bar { display: block; height: 20px; min-width: 2px; border-radius: 0; }
.cs-top-val { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .cs-top-head { flex-direction: column; gap: 0; } }

/* tooltip */
.cs-tip { position: absolute; pointer-events: none; background: var(--cs-card); border: 1px solid var(--cs-border); border-radius: var(--cs-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 6px 10px; font-size: 12px; white-space: nowrap; z-index: 5; }
.cs-tip b { display: block; font-weight: 400; color: var(--cs-muted); }
.cs-error { font-size: 13px; color: var(--cs-muted); }