/* ============================================================
   AI Domain Components (v4.7.0)
   Ported from clickup-ai-hub theme. Uses shared aih- design tokens.
   ============================================================ */

/* ── PROMPT COPY BLOCK ─────────────────────────────────────── */

.c-code-block {
  position: relative;
  background: var(--aih-color-dark, #1A1A1A);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 16px;
}
.c-code-block pre {
  font-family: var(--aih-font-mono, 'Sometype Mono', monospace);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.c-code-block .c-var {
  color: #A78BFA;
  font-style: normal;
}
.c-code-block__copy {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 6px 14px;
  font-family: var(--aih-font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms;
}
.c-code-block__copy:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}
.c-code-block__copy.is-copied {
  color: #30A46C;
  border-color: rgba(48, 164, 108, 0.3);
}

/* ── KEY INSIGHT CALLOUT ───────────────────────────────────── */

.c-callout--insight {
  background: var(--aih-color-bg, #FAFAFA);
  border: none;
  border-left: 3px solid #202020;
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
}
.c-callout--insight .c-callout__label {
  font-family: var(--aih-font-mono, 'Sometype Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--aih-color-purple, #6647F0);
  margin-bottom: 6px;
}

/* ── STAT CARDS ────────────────────────────────────────────── */

.c-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.c-stats-card {
  background: #ffffff;
  border: 1px solid var(--aih-color-border, #E8E8E8);
  border-radius: 14px;
  padding: 18px;
}
.c-stats-card__value {
  font-family: var(--aih-font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
  color: var(--aih-color-dark, #1A1A1A);
}
.c-stats-card__value--green { color: #30A46C; }
.c-stats-card__value--orange { color: #D45A00; }
.c-stats-card__desc {
  font-family: var(--aih-font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: var(--aih-color-dark, #1A1A1A);
  line-height: 1.4;
  margin-bottom: 6px;
}
.c-stats-card__source {
  font-family: var(--aih-font-mono, 'Sometype Mono', monospace);
  font-size: 11px;
  color: var(--aih-color-text-muted, #737373);
  margin-bottom: 10px;
}
.c-stats-card__copy {
  background: #ffffff;
  border: 1px solid var(--aih-color-border, #E8E8E8);
  border-radius: 6px;
  padding: 4px 12px;
  font-family: var(--aih-font-body, 'Inter', sans-serif);
  font-size: 12px;
  color: var(--aih-color-text-muted, #737373);
  cursor: pointer;
  transition: all 150ms;
}
.c-stats-card__copy:hover {
  border-color: #d0d0d0;
  color: var(--aih-color-dark, #1A1A1A);
}
.c-stats-card__copy.is-copied {
  color: #30A46C;
}

/* ── RESPONSIVE ────────────────────────────────────────────── */

@media (max-width: 768px) {
  .c-stats-grid { grid-template-columns: 1fr; }
  .c-code-block { padding: 16px; }
  .c-code-block__copy { position: static; display: block; margin-top: 12px; width: 100%; text-align: center; }
}