/* ==========================================================================
   PROJECT VISUALIZATIONS
   Styles for charts, tiles and tables that js/project-viz.js draws into
   [data-viz] placeholders in a project's prose. Loaded by
   portfolio_detail.html only when a project uses them. Built on tokens.css.
   ========================================================================== */

/* ── Layout helpers authors can use in the markdown ───────────────────── */
.pv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.pv-grid > .pv-block { margin: 0; }

/* ── Blocks and cards ─────────────────────────────────────────────────── */
.pv-block { margin: var(--space-5) 0; min-width: 0; }
.pv-card {
  background: var(--paper-pure);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.pv-card__title {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--ink-900);
  margin: 0 0 var(--space-1) !important;
}
.pv-card__note {
  font-family: var(--font-body);
  font-size: var(--text-sm) !important;
  line-height: var(--leading-normal) !important;
  color: var(--ink-500);
  margin: 0 0 var(--space-4) !important;
}
.pv-body { position: relative; min-height: 2rem; }
.pv-body--map { aspect-ratio: auto; }
.pv-body svg { display: block; width: 100%; height: auto; overflow: visible; max-height: 560px; }
.pv-body text { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-500); }
.pv-body .pv-val { fill: var(--ink-900); }
.pv-body .domain { stroke: var(--ink-200); }
.pv-body .tick line { stroke: var(--ink-100); }
.pv-error {
  display: flex; align-items: center; justify-content: center;
  min-height: 8rem;
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-300);
}

/* ── Headline tiles ───────────────────────────────────────────────────── */
.pv-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: var(--space-4);
}
.pv-kpi {
  background: var(--paper-pure);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.pv-kpi p { margin: 0 !important; }
.pv-kpi__label { font-family: var(--font-body); font-size: var(--text-sm) !important; color: var(--ink-500); line-height: var(--leading-snug) !important; }
.pv-kpi__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl) !important;
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
  line-height: 1.2 !important;
  color: var(--data-900);
  margin: var(--space-2) 0 !important;
}
.pv-kpi__sub { font-family: var(--font-mono); font-size: var(--text-xs) !important; color: var(--ink-300); line-height: var(--leading-snug) !important; }

/* ── Legend ───────────────────────────────────────────────────────────── */
.pv-legend {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-500);
}
.pv-legend .pv-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.pv-legend .pv-ramp { display: inline-block; width: 90px; height: 8px; border-radius: var(--radius-pill); margin: 0 6px; vertical-align: middle; }

/* ── Tooltip ──────────────────────────────────────────────────────────── */
.pv-tip {
  position: absolute; z-index: 1080; pointer-events: none;
  max-width: 260px;
  background: var(--paper-pure);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-snug);
  color: var(--ink-700);
}
.pv-tip strong { color: var(--ink-900); }
.pv-tip__head { display: block; color: var(--ink-300); font-size: var(--text-xs); margin-bottom: 2px; }

/* ── Tables ───────────────────────────────────────────────────────────
   Selectors carry .pv-block so they outrank the project page's own prose
   table styles (uppercase headers, left alignment, heavy rules). */
.pv-block .pv-table-wrap { max-height: 470px; overflow: auto; margin: 0; }
.pv-block .pv-table-wrap--tall { max-height: 560px; }
.pv-block .pv-table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.pv-block .pv-table th {
  position: sticky; top: 0;
  background: var(--paper-pure);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide); text-transform: none; color: var(--ink-300);
  text-align: right; white-space: nowrap;
  padding: var(--space-2);
  border: 0;
  border-bottom: 1px solid var(--ink-100);
}
.pv-block .pv-table td {
  font-size: var(--text-sm);
  text-align: right; white-space: nowrap;
  padding: var(--space-2);
  border: 0;
  border-bottom: 1px solid var(--ink-50);
  background: transparent;
}
.pv-block .pv-table th:first-child, .pv-block .pv-table td:first-child { text-align: left; }
.pv-block .pv-bar-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.pv-block .pv-bar-cell i { display: inline-block; height: 8px; border-radius: var(--radius-pill); background: var(--data-700); }