/* ==========================================================================
   UNGD Linguistic Evolution — inline chart embed styles.
   Scoped under .ungd-embed so this can load directly on the project detail
   page (alongside the site's own Tailwind/Space Mono setup) without leaking
   :root variables or html/body rules the standalone viewer needs — see
   style.css for that full-page variant, used by ungd_viewer.html.
   ========================================================================== */

.ungd-embed {
  --ue-card: #ffffff;
  --ue-line: rgba(0, 0, 0, 0.07);
  --ue-line-strong: rgba(0, 0, 0, 0.12);
  --ue-ink-head: #0f172a;
  --ue-ink: #1e293b;
  --ue-ink-2: #64748b;
  --ue-ink-3: #94a3b8;
  --ue-raw: #12b3a6;
  --ue-trend: #e15761;
  --ue-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -20px rgba(15, 23, 42, 0.25);
  font-family: 'Space Mono', 'Courier New', monospace;
}

.dark .ungd-embed {
  --ue-card: rgba(255, 255, 255, 0.03);
  --ue-line: rgba(255, 255, 255, 0.08);
  --ue-line-strong: rgba(255, 255, 255, 0.14);
  --ue-ink-head: #ffffff;
  --ue-ink: #e2e8f0;
  --ue-ink-2: #94a3b8;
  --ue-ink-3: #64748b;
}

.ungd-embed .chart-card {
  margin-top: 20px;
  padding: 18px 18px 8px;
  background: var(--ue-card);
  border: 1px solid var(--ue-line);
  border-radius: 16px;
  box-shadow: var(--ue-shadow);
  box-sizing: border-box;
}
.ungd-embed .chart-card:first-child { margin-top: 0; }

.ungd-embed .chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 2px;
}
.ungd-embed .chart-code {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ue-raw);
  margin-right: 8px;
}
.ungd-embed .chart-title {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ue-ink-head);
  letter-spacing: 0.02em;
}
.ungd-embed .chart-desc {
  font-size: 10.5px;
  color: var(--ue-ink-3);
  margin: 2px 0 6px;
  line-height: 1.5;
}

.ungd-embed .chart-svg-wrap { position: relative; }
.ungd-embed .chart-svg-wrap svg { display: block; width: 100%; }

.ungd-embed .chart-line-raw { fill: none; stroke: var(--ue-raw); stroke-width: 1.3; stroke-linecap: round; opacity: 0.55; }
.ungd-embed .chart-line-trend { fill: none; stroke: var(--ue-trend); stroke-width: 1.8; stroke-linecap: round; }
.ungd-embed .chart-axis path, .ungd-embed .chart-axis line { stroke: var(--ue-line-strong); }
.ungd-embed .chart-axis text {
  font-family: 'Space Mono', 'Courier New', monospace;
  font-size: 8.5px;
  fill: var(--ue-ink-3);
}
.ungd-embed .chart-hover-line { stroke: var(--ue-line-strong); stroke-width: 1; stroke-dasharray: 2 2; }
.ungd-embed .chart-hover-dot { fill: var(--ue-trend); stroke: #ffffff; stroke-width: 1.2; }

.ungd-embed .chart-legend { display: flex; gap: 16px; padding: 6px 0 12px; }
.ungd-embed .chart-legend-item { display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: var(--ue-ink-3); letter-spacing: 0.05em; }
.ungd-embed .chart-legend-swatch { width: 12px; height: 2px; border-radius: 1px; display: inline-block; }

#ungd-tooltip {
  position: fixed;
  display: none;
  pointer-events: none;
  z-index: 50;
  max-width: 260px;
  background: var(--ue-card, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.25);
  padding: 9px 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #1e293b;
  font-family: 'Space Mono', 'Courier New', monospace;
}
.dark #ungd-tooltip { background: #0f172a; color: #e2e8f0; border-color: rgba(255,255,255,.14); }
#ungd-tooltip .tt-title { font-weight: 400; margin-bottom: 2px; }
.dark #ungd-tooltip .tt-title { color: #ffffff; }
#ungd-tooltip .tt-mono { font-size: 10px; opacity: 0.75; }