/* GC Radar (/gc-radar). Pairs with gc-radar.js.
 * Same conventions as campaign-performance.css: colours come from the theme engine
 * tokens (--te-*), so every preset and dark mode apply. */

.gr {
  --gr-fg: var(--te-foreground, var(--foreground));
  --gr-card: var(--te-card, var(--card));
  --gr-muted: var(--te-muted, var(--muted));
  --gr-muted-fg: var(--te-muted-foreground, var(--muted-foreground));
  --gr-border: var(--te-border, var(--border));
  --gr-brand: var(--te-brand, var(--gc-orange, #e8630c));
  --gr-good: var(--te-success, #16a34a);
  --gr-warn: var(--te-warning, #d97706);
  --gr-info: #2563eb;
  --gr-violet: #7c3aed;
  --gr-radius: var(--te-radius, 0.625rem);
  display: block;
  color: var(--gr-fg);
  font-size: 13px;
  line-height: 1.45;
  padding: 4px 0 48px;
}
.gr * { box-sizing: border-box; }
.gr button { font: inherit; color: inherit; cursor: pointer; }
.gr-content { display: flex; flex-direction: column; gap: 16px; }
.gr-dim { color: var(--gr-muted-fg); }
.gr-note { margin: 0; font-size: 12px; color: var(--gr-muted-fg); }
.gr-empty { margin: 0; padding: 28px 6px; color: var(--gr-muted-fg); font-size: 12.5px; text-align: center; }
.gr-error { margin: 0; padding: 10px 12px; border-radius: calc(var(--gr-radius) - 2px); color: var(--te-destructive, #dc2626); background: color-mix(in srgb, var(--te-destructive, #dc2626) 9%, transparent); font-size: 12.5px; }

/* Head */
.gr-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.gr-head h1 { margin: 6px 0 6px; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.gr-head p { margin: 0; max-width: 760px; color: var(--gr-muted-fg); }
.gr-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gr-brand); }
.gr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--gr-border); border-radius: calc(var(--gr-radius) - 2px); background: var(--gr-card); font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; color: inherit; }
.gr-btn:hover:not(:disabled) { background: var(--gr-muted); }
.gr-btn:disabled { opacity: 0.5; cursor: default; }
.gr-btn--primary { background: var(--gr-brand); border-color: var(--gr-brand); color: #fff; }
.gr-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--gr-brand) 88%, #000); }
.gr-btn--danger { color: var(--te-destructive, #dc2626); border-color: color-mix(in srgb, var(--te-destructive, #dc2626) 35%, transparent); align-self: flex-start; }
.gr-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--te-destructive, #dc2626) 9%, transparent); }
.gr-btn svg { width: 14px; height: 14px; }

/* Share card */
.gr-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.gr-share code { flex: 1 1 260px; min-width: 0; padding: 7px 10px; border: 1px dashed var(--gr-border); border-radius: calc(var(--gr-radius) - 2px); background: var(--gr-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cards and metrics */
.gr-card { background: var(--gr-card); border: 1px solid var(--gr-border); border-radius: calc(var(--gr-radius) + 4px); padding: 16px 18px; min-width: 0; }
.gr-card-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.gr-card-head h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.gr-card-head p { margin: 3px 0 0; font-size: 12px; color: var(--gr-muted-fg); }
.gr-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 12px; }
.gr-metric { background: var(--gr-card); border: 1px solid var(--gr-border); border-radius: calc(var(--gr-radius) + 4px); padding: 14px 16px; min-width: 0; }
.gr-metric span { display: block; font-size: 11.5px; color: var(--gr-muted-fg); font-weight: 600; }
.gr-metric strong { display: block; margin-top: 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gr-metric small { display: block; margin-top: 2px; font-size: 11px; color: var(--gr-muted-fg); }
.gr-bars { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.gr-bar { display: grid; grid-template-columns: 74px minmax(0, 1fr) 28px; align-items: center; gap: 8px; font-size: 11.5px; }
.gr-bar i { display: block; height: 7px; border-radius: 999px; background: var(--gr-brand); min-width: 3px; }
.gr-bar b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .gr-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gr-metric--wide { grid-column: 1 / -1; } }

/* Filters */
.gr-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.gr-filters input, .gr-filters select, .gr-row select, .gr-row textarea { height: 32px; padding: 0 10px; border: 1px solid var(--gr-border); border-radius: calc(var(--gr-radius) - 2px); background: var(--gr-card); color: inherit; font: inherit; font-size: 12.5px; }
.gr-filters input { flex: 1 1 240px; min-width: 0; }
.gr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.gr-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1px solid var(--gr-border); border-radius: 999px; background: var(--gr-card); font-size: 12px; font-weight: 600; }
.gr-chip b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gr-muted-fg); }
.gr-chip[aria-pressed="true"] { background: var(--gr-fg); border-color: var(--gr-fg); color: var(--gr-card); }
.gr-chip[aria-pressed="true"] b { color: inherit; opacity: 0.75; }

/* Feed */
.gr-list { display: flex; flex-direction: column; }
.gr-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) 180px; gap: 8px 18px; padding: 14px 4px; border-top: 1px solid var(--gr-border); align-items: start; }
.gr-row:first-child { border-top: 0; }
.gr-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; font-weight: 700; }
.gr-name a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.gr-name a:hover { text-decoration: underline; }
.gr-link { display: block; margin-top: 3px; font-size: 12px; color: var(--gr-info); text-decoration: none; overflow-wrap: anywhere; }
.gr-link:hover { text-decoration: underline; }
.gr-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 11.5px; color: var(--gr-muted-fg); }
.gr-detail { font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gr-detail p { margin: 0; overflow-wrap: anywhere; }
.gr-detail b { font-weight: 600; color: var(--gr-muted-fg); }
.gr-review { display: flex; flex-direction: column; gap: 6px; }
.gr-review select { width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--gr-border); border-radius: calc(var(--gr-radius) - 2px); background: var(--gr-card); color: inherit; font: inherit; font-size: 12.5px; }
.gr-review textarea { width: 100%; height: 54px; padding: 6px 10px; resize: vertical; }
.gr-review small { font-size: 10.5px; color: var(--gr-muted-fg); }
.gr-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--gr-muted); color: var(--gr-muted-fg); white-space: nowrap; }
.gr-tag--Brand { color: var(--gr-brand); background: color-mix(in srgb, var(--gr-brand) 12%, transparent); }
.gr-tag--Creator { color: var(--gr-violet); background: color-mix(in srgb, var(--gr-violet) 12%, transparent); }
.gr-tag--Trend { color: var(--gr-info); background: color-mix(in srgb, var(--gr-info) 12%, transparent); }
.gr-tag--New { color: var(--gr-warn); background: color-mix(in srgb, var(--gr-warn) 13%, transparent); }
.gr-tag--Assigned { color: var(--gr-violet); background: color-mix(in srgb, var(--gr-violet) 12%, transparent); }
.gr-tag--Contacted { color: var(--gr-info); background: color-mix(in srgb, var(--gr-info) 12%, transparent); }
.gr-tag--In-talks { color: var(--gr-brand); background: color-mix(in srgb, var(--gr-brand) 12%, transparent); }
.gr-tag--Onboarded { color: var(--gr-good); background: color-mix(in srgb, var(--gr-good) 13%, transparent); }
.gr-tag--who { color: var(--gr-fg); background: var(--gr-muted); font-weight: 600; }
.gr-field { display: flex; flex-direction: column; gap: 3px; }
.gr-field > span { font-size: 10.5px; font-weight: 600; color: var(--gr-muted-fg); }
.gr-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--gr-muted-fg); }
@media (max-width: 900px) {
  .gr-row { grid-template-columns: minmax(0, 1fr); }
  .gr-review { flex-direction: row; flex-wrap: wrap; }
  .gr-review .gr-field { flex: 0 0 160px; }
  .gr-review textarea { flex: 1 1 200px; }
}
@media (max-width: 560px) { .gr-metrics { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gr-head h1 { font-size: 21px; } }