/* Gretel elevation — local only (do not break Gretel; push it)
   Spectrum Development 2025 + Brand Architecture Core Four
   Midnight #002139 · Electric #0a7dff · Spectrum Sans · squircles · triangle connectivity */

:root {
  /* Modular spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Squircle-ish radii (Gretel continuous corners) */
  --r-squircle-sm: 14px;
  --r-squircle: 22px;
  --r-squircle-lg: 28px;
  --r: var(--r-squircle-sm);

  /* Type hierarchy */
  --type-kicker: 0.6875rem;
  --type-body: 0.875rem;
  --type-title: 1.125rem;
  --type-display: 1.5rem;
  --tracking-kicker: 0.14em;

  /* Active squircle border (live imagery in borders) */
  --gretel-frame: 1.5px solid rgba(10, 125, 255, 0.55);
  --gretel-frame-hot: 1.5px solid rgba(10, 125, 255, 0.9);
  --gretel-frame-glow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 24px rgba(10, 125, 255, 0.22);
}

/* Stronger Spectrum Sans hierarchy */
body {
  font-size: var(--type-body);
  font-variation-settings: "wght" 400;
}

.product-kicker {
  font-size: var(--type-kicker);
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: rgba(213, 213, 213, 0.72);
}

.product-mark {
  font-size: var(--type-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
}

.count-on {
  font-size: var(--type-title);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.count-on-sub {
  font-size: var(--type-kicker);
  font-weight: 500;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.media-rail-title,
.exec-takeaways-title,
.sentiment-title,
.bp-title,
.section-title {
  font-size: var(--type-title);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* LIVE pill — triangle connectivity motif (Gretel: triangle = connectivity)
   Use ::after so we don't fight styles.css sheen ::before (opacity:0). */
.live-pill {
  position: relative;
  overflow: visible;
  border-radius: 999px;
  border: 1px solid rgba(10, 125, 255, 0.55);
  background: linear-gradient(180deg, rgba(10, 125, 255, 0.28), rgba(0, 33, 57, 0.55));
  padding-left: 26px;
  gap: 6px;
}

.live-pill::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -5px;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent #4da3ff;
  filter: drop-shadow(0 0 6px rgba(10, 125, 255, 0.7));
  opacity: 1;
  z-index: 2;
  pointer-events: none;
}

.live-dot {
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  animation: none !important;
  box-shadow: none !important;
}

/* Modular cards / KPI / rails — squircles */
.signal-strip .kpi,
.kpi-card,
.card,
.exec-takeaways,
.sentiment-panel,
.bp-panel,
.media-rail,
.feed-card {
  border-radius: var(--r-squircle) !important;
}

/* People talking — live imagery in active squircle borders */
.media-card {
  border-radius: var(--r-squircle) !important;
  border: var(--gretel-frame) !important;
  background: rgba(0, 16, 28, 0.92) !important;
  box-shadow: var(--gretel-frame-glow) !important;
  overflow: hidden;
}

.media-card:hover,
.media-card:focus-visible {
  border: var(--gretel-frame-hot) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 28px rgba(10, 125, 255, 0.35) !important;
}

.media-thumb {
  border-radius: calc(var(--r-squircle) - 2px) calc(var(--r-squircle) - 2px) 0 0;
  /* soft squircle clip feel */
  clip-path: inset(0 round calc(var(--r-squircle) - 2px) calc(var(--r-squircle) - 2px) 0 0);
}

.media-thumb img {
  border-radius: inherit;
}

/* Connectivity triangle mark on first People talking card (editorial, sparse) */
.media-rail-track .media-card:first-child .media-thumb::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 14px 14px;
  border-color: transparent transparent rgba(10, 125, 255, 0.85) transparent;
  filter: drop-shadow(0 0 8px rgba(10, 125, 255, 0.45));
  pointer-events: none;
  z-index: 2;
}

/* Blue + white modular accent — thin white hairline inside Electric */
.media-rail,
.exec-takeaways,
.sentiment-section,
.brand-pulse {
  border: 1px solid rgba(10, 125, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Section kickers — Core Four editorial density */
.media-rail-sub,
.section-sub,
.exec-takeaways-sub {
  font-size: var(--type-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(213, 213, 213, 0.65);
}

/* Topbar: cleaner modular lockup */
.topbar {
  border-bottom: 1px solid rgba(10, 125, 255, 0.18);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.brand-logo {
  border-radius: var(--r-squircle-sm);
}

/* Feed cards modular */
.card {
  border: 1px solid rgba(213, 213, 213, 0.12) !important;
  background: linear-gradient(180deg, rgba(0, 33, 57, 0.55), rgba(0, 16, 24, 0.92)) !important;
}

.card:hover {
  border-color: rgba(10, 125, 255, 0.35) !important;
}

/* Reduce AI-slop glow spam — keep Electric intentional */
body {
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(10, 125, 255, 0.1), transparent 55%),
    linear-gradient(180deg, #001018 0%, #000c14 50%, #001018 100%),
    var(--bg) !important;
}