/* ==========================================================================
   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 {
  /* Surfaces and ink are site tokens (core/css/tokens.css) and switch with
     the theme; the two series colours are data. */
  --ue-card: rgb(var(--pe-surface));
  --ue-line: rgb(var(--pe-line) / .1);
  --ue-line-strong: rgb(var(--pe-line) / .18);
  --ue-ink-head: rgb(var(--pe-ink));
  --ue-ink: rgb(var(--pe-ink));
  --ue-ink-2: rgb(var(--pe-ink-2));
  --ue-ink-3: rgb(var(--pe-ink-3));
  --ue-raw: #12b3a6;
  --ue-trend: #e15761;
  --ue-shadow: 0 1px 2px rgb(var(--pe-chrome) / .04), 0 8px 24px -20px rgb(var(--pe-chrome) / .25);
  font-family: var(--pe-font);
}

.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: 11px;
  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: 11px;
  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: var(--pe-font);
  font-size: 11px;
  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: var(--ue-card); 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: 11px; 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: rgb(var(--pe-surface));
  border: 1px solid rgb(var(--pe-line) / .16);
  border-radius: 10px;
  box-shadow: 0 12px 32px -12px rgb(var(--pe-chrome) / .25);
  padding: 9px 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgb(var(--pe-ink));
  font-family: var(--pe-font);
}
#ungd-tooltip .tt-title { font-weight: 400; margin-bottom: 2px; }
#ungd-tooltip .tt-mono { font-size: 11px; opacity: 0.75; }