/* ---------- Charts in the thread (02b-charts.js) ---------- */

/* Christian's charts sit in the flow like his replies: left side, no bubble, up to 560px wide. */
.chart-msg {
  margin: 12px 0 16px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.thread > .chart-msg {
  max-width: min(560px, var(--col));
  margin-left: max(0px, calc((100% - var(--col)) / 2));
  margin-right: auto;
}
.stamp + .chart-msg { margin-top: 2px; }

.viz { position: relative; }
.viz-title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.viz-sub { margin-top: 3px; font-size: 0.9375rem; line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere; }

.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 0.8125rem; font-weight: 500; color: var(--text-2); }
.viz-key { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.viz-key i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.viz-key i.line { width: 14px; height: 3px; border-radius: 2px; }

.viz-plot { position: relative; margin-top: 16px; border-radius: 12px; outline: none; touch-action: pan-y; cursor: default; }
.viz-plot:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent); }

/* The app's global svg rule strokes everything; charts paint only what they mean to. */
.viz-svg { display: block; overflow: visible; fill: currentColor; stroke: none; }
.viz-grid { stroke: var(--border); stroke-width: 1; }
.viz-zero { stroke: #d2d2d7; stroke-width: 1; }
.viz-ytick { font-size: 11px; font-weight: 500; fill: var(--text-3); font-variant-numeric: tabular-nums; }
.viz-xtick { font-size: 11px; font-weight: 500; fill: var(--text-2); }

.viz-col path { transition: opacity 0.2s ease; }
.viz-col.dim path { opacity: 0.3; }

.viz-stroke { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.viz-dot {
  stroke: var(--bg);
  stroke-width: 4;
  paint-order: stroke;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.viz-dot.on { transform: scale(1); }
.viz-guide { stroke: #c7c7cc; stroke-width: 1; opacity: 0; transition: opacity 0.15s ease; }
.viz-guide.on { opacity: 1; }
.viz-hot { stroke: var(--bg); stroke-width: 5; paint-order: stroke; opacity: 0; }
.viz-hot.on { opacity: 1; }
.viz-halo { opacity: 0; transition: opacity 0.15s ease; }
.viz-halo.on { opacity: 0.16; }

/* Value pill over the chart. */
.viz-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 12px;
  background: var(--text);
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(16, 17, 19, 0.18);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.viz-tip.on { opacity: 1; }
.viz-tip b { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.viz-tip span { color: rgba(255, 255, 255, 0.64); font-weight: 500; }
.viz-tip.multi { flex-direction: column; align-items: stretch; gap: 3px; padding: 8px 12px 9px; }
.viz-tip-head { margin-bottom: 1px; font-weight: 500; color: rgba(255, 255, 255, 0.64); }
.viz-tip-row { display: flex; align-items: center; gap: 8px; }
.viz-tip-row i { flex: none; width: 10px; height: 3px; border-radius: 2px; }
.viz-tip-row b { font-size: 0.875rem; }
.viz-tip-row span { overflow: hidden; text-overflow: ellipsis; max-width: 160px; }

/* Donut: ring on the left, legend rows on the right (stacked on narrow screens). */
.viz-plot.viz-pie { display: flex; align-items: center; gap: 12px; touch-action: manipulation; }
.viz-plot.viz-pie.stacked { flex-direction: column; align-items: stretch; gap: 10px; }
.viz-donut { position: relative; flex: none; margin: 0 auto; }
.viz-slice {
  cursor: pointer;
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.viz-slice.dim { opacity: 0.25; }
.viz-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.viz-center > * { max-width: var(--hole, 90px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-center-top { font-size: 0.75rem; font-weight: 500; color: var(--text-2); }
.viz-center-val { font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); }
.viz-center-sub { margin-top: 1px; font-size: 0.75rem; font-weight: 500; color: var(--text-2); }

.viz-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.viz-plot.viz-pie:not(.stacked) .viz-rows { max-width: 300px; }
.viz-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.3;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.viz-row.dim { opacity: 0.4; }
.viz-row.on { background: var(--muted); opacity: 1; }
.viz-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.viz-sq { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.viz-row-name {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--text-2);
}
.viz-row-pct { flex: none; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.viz-foot { margin-top: 12px; font-size: 0.8125rem; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.viz-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--pill);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
  vertical-align: 1px;
}

/* The numbers as a table, for screen readers only. */
.viz-sr {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (hover: hover) {
  .viz-row:hover { background: var(--muted); }
}

@media (prefers-reduced-motion: reduce) {
  .viz-dot, .viz-slice, .viz-tip, .viz-col path, .viz-row { transition: none; }
}