diff --git a/.gitignore b/.gitignore
index 04a3164..119759b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -61,3 +61,4 @@ web/src/padelnomics/static/css/output.css
 
 # Generated report PDFs (built locally via make report-pdf, not committed)
 data/content/reports/_build/
+_serving_meta.json
diff --git a/scratch/lineage-ux-prototype.html b/scratch/lineage-ux-prototype.html
new file mode 100644
index 0000000..5a7d612
--- /dev/null
+++ b/scratch/lineage-ux-prototype.html
@@ -0,0 +1,860 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Lineage UX Prototype</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  :root {
+    --green-bg: #F0FDF4; --green-border: #BBF7D0; --green-accent: #16A34A;
+    --green-fill: #DCFCE7; --green-text: #14532D;
+    --blue-bg: #EFF6FF; --blue-border: #BFDBFE; --blue-accent: #1D4ED8;
+    --blue-fill: #DBEAFE; --blue-text: #1E3A8A;
+    --amber-bg: #FFFBEB; --amber-border: #FDE68A; --amber-accent: #D97706;
+    --amber-fill: #FEF3C7; --amber-text: #78350F;
+    --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0;
+    --slate-400: #94A3B8; --slate-500: #64748B; --slate-700: #334155;
+    --slate-800: #1E293B; --slate-900: #0F172A;
+    --panel-w: 340px;
+    --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+    --font-mono: 'DM Mono', ui-monospace, monospace;
+  }
+
+  body {
+    font-family: var(--font-sans);
+    background: var(--slate-50);
+    color: var(--slate-800);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* ── Page shell ── */
+  .page-header {
+    background: white;
+    border-bottom: 1px solid var(--slate-200);
+    padding: 0.75rem 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+  .page-header h1 { font-size: 0.875rem; font-weight: 600; color: var(--slate-800); }
+  .badge {
+    font-size: 0.6875rem; font-weight: 500; padding: 2px 7px;
+    border-radius: 99px; background: var(--slate-100); color: var(--slate-500);
+    letter-spacing: 0.02em;
+  }
+  .hint {
+    font-size: 0.75rem; color: var(--slate-400); margin-left: auto;
+  }
+
+  .workspace {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+  }
+
+  /* ── DAG canvas ── */
+  .canvas-wrap {
+    flex: 1;
+    overflow: auto;
+    padding: 1.5rem;
+    transition: margin-right 0.22s cubic-bezier(0.4,0,0.2,1);
+  }
+  .canvas-wrap.panel-open { margin-right: var(--panel-w); }
+
+  .card {
+    background: white;
+    border: 1px solid var(--slate-200);
+    border-radius: 10px;
+    overflow: hidden;
+  }
+  .card-header {
+    padding: 0.75rem 1rem;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    border-bottom: 1px solid var(--slate-100);
+    color: var(--slate-700);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .svg-wrap { padding: 1rem 0.75rem 0.75rem; overflow-x: auto; }
+
+  /* ── Lineage SVG node/edge states ── */
+  .lineage-node { cursor: pointer; }
+  .lineage-node rect:first-child { transition: filter 0.1s; }
+  .lineage-node:hover rect:first-child { filter: brightness(0.93); }
+  .lineage-node.selected rect:first-child { filter: brightness(0.88); }
+  .lineage-edge { transition: stroke 0.12s, stroke-width 0.12s, opacity 0.12s; }
+  .lineage-edge.hi { stroke: #1D4ED8 !important; stroke-width: 2 !important; opacity: 1 !important; }
+  .lineage-edge.dim { opacity: 0.1; }
+
+  /* ── Hover tooltip ── */
+  #tooltip {
+    position: fixed;
+    z-index: 100;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.1s;
+    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12));
+  }
+  #tooltip.visible { opacity: 1; }
+  .tt-box {
+    background: var(--slate-900);
+    color: white;
+    border-radius: 8px;
+    padding: 10px 12px;
+    min-width: 200px;
+    max-width: 260px;
+  }
+  .tt-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 8px;
+    padding-bottom: 7px;
+    border-bottom: 1px solid rgba(255,255,255,0.08);
+  }
+  .tt-name {
+    font-family: var(--font-mono);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    color: white;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .tt-layer {
+    font-size: 0.5625rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    padding: 2px 6px;
+    border-radius: 4px;
+    flex-shrink: 0;
+    text-transform: uppercase;
+  }
+  .tt-layer.staging  { background: rgba(22,163,74,0.25); color: #86EFAC; }
+  .tt-layer.foundation { background: rgba(29,78,216,0.3); color: #93C5FD; }
+  .tt-layer.serving  { background: rgba(217,119,6,0.25); color: #FCD34D; }
+
+  .tt-row {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    padding: 2px 0;
+    font-size: 0.6875rem;
+  }
+  .tt-col { font-family: var(--font-mono); color: #CBD5E1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  .tt-type { font-family: var(--font-mono); color: #64748B; font-size: 0.625rem; flex-shrink: 0; }
+  .tt-more { font-size: 0.625rem; color: #64748B; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,0.06); }
+
+  /* ── Detail panel ── */
+  #detail-panel {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: var(--panel-w);
+    background: white;
+    border-left: 1px solid var(--slate-200);
+    display: flex;
+    flex-direction: column;
+    transform: translateX(100%);
+    transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
+    z-index: 50;
+    overflow: hidden;
+  }
+  #detail-panel.open { transform: translateX(0); }
+
+  .panel-top {
+    padding: 0.875rem 1rem;
+    border-bottom: 1px solid var(--slate-100);
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    flex-shrink: 0;
+  }
+  .panel-title-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .panel-model-name {
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--slate-800);
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .panel-close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--slate-400);
+    padding: 2px;
+    border-radius: 4px;
+    line-height: 1;
+    font-size: 1rem;
+    transition: color 0.1s, background 0.1s;
+  }
+  .panel-close:hover { color: var(--slate-700); background: var(--slate-100); }
+
+  .panel-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.6875rem;
+    color: var(--slate-500);
+  }
+  .meta-chip {
+    padding: 2px 7px;
+    border-radius: 99px;
+    font-size: 0.625rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+  .meta-chip.staging  { background: var(--green-fill); color: var(--green-text); border: 1px solid var(--green-border); }
+  .meta-chip.foundation { background: var(--blue-fill); color: var(--blue-text); border: 1px solid var(--blue-border); }
+  .meta-chip.serving  { background: var(--amber-fill); color: var(--amber-text); border: 1px solid var(--amber-border); }
+
+  .panel-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+  }
+
+  .panel-section {
+    border-bottom: 1px solid var(--slate-100);
+    padding: 0.75rem 1rem;
+  }
+  .panel-section:last-child { border-bottom: none; }
+  .section-label {
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--slate-400);
+    margin-bottom: 0.5rem;
+  }
+
+  /* Schema table */
+  .schema-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.6875rem;
+  }
+  .schema-table th {
+    text-align: left;
+    font-weight: 600;
+    color: var(--slate-500);
+    padding: 0 0 0.375rem;
+    font-size: 0.625rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+  .schema-table td {
+    padding: 3px 0;
+    vertical-align: middle;
+  }
+  .schema-table tr + tr td { border-top: 1px solid var(--slate-100); }
+  .col-name { font-family: var(--font-mono); color: var(--slate-800); font-weight: 500; }
+  .col-type { font-family: var(--font-mono); color: var(--slate-400); font-size: 0.625rem; }
+  .col-null { font-size: 0.5625rem; color: var(--slate-300); text-align: right; }
+  .col-null.yes { color: var(--amber-accent); }
+
+  /* Row count */
+  .stat-row {
+    display: flex;
+    align-items: baseline;
+    gap: 0.375rem;
+  }
+  .stat-val {
+    font-family: var(--font-mono);
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--slate-800);
+  }
+  .stat-unit { font-size: 0.6875rem; color: var(--slate-500); }
+
+  /* Dep lists */
+  .dep-list { display: flex; flex-direction: column; gap: 3px; }
+  .dep-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 7px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.1s;
+    font-family: var(--font-mono);
+    font-size: 0.6875rem;
+    color: var(--slate-700);
+  }
+  .dep-item:hover { background: var(--slate-50); }
+  .dep-dot {
+    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
+  }
+  .dep-dot.staging  { background: var(--green-accent); }
+  .dep-dot.foundation { background: var(--blue-accent); }
+  .dep-dot.serving  { background: var(--amber-accent); }
+
+  .empty-state { color: var(--slate-400); font-size: 0.6875rem; font-style: italic; }
+
+  /* ── "Click to explore" annotation ── */
+  .interaction-hint {
+    font-size: 0.6875rem; color: var(--slate-400);
+    display: flex; align-items: center; gap: 4px;
+  }
+  .kbd {
+    display: inline-flex; align-items: center; justify-content: center;
+    background: var(--slate-100); border: 1px solid var(--slate-200);
+    border-radius: 3px; padding: 1px 5px;
+    font-family: var(--font-mono); font-size: 0.5625rem;
+    color: var(--slate-600); line-height: 1.4;
+  }
+</style>
+</head>
+<body>
+
+<div class="page-header">
+  <h1>Data Lineage</h1>
+  <span class="badge">26 models</span>
+  <span class="badge">staging → foundation → serving</span>
+  <span class="hint interaction-hint">
+    hover to preview schema &nbsp;·&nbsp; click to inspect
+  </span>
+</div>
+
+<div class="workspace">
+  <div class="canvas-wrap" id="canvas-wrap">
+    <div class="card">
+      <div class="svg-wrap" id="svg-wrap">
+        <!-- SVG injected by JS below -->
+      </div>
+    </div>
+  </div>
+
+  <!-- Detail panel -->
+  <div id="detail-panel">
+    <div class="panel-top">
+      <div class="panel-title-row">
+        <span class="panel-model-name" id="panel-model-name">—</span>
+        <button class="panel-close" id="panel-close" title="Close">✕</button>
+      </div>
+      <div class="panel-meta">
+        <span class="meta-chip" id="panel-layer-chip">—</span>
+        <span id="panel-materialization">view</span>
+      </div>
+    </div>
+    <div class="panel-body" id="panel-body">
+      <!-- injected by JS -->
+    </div>
+  </div>
+</div>
+
+<!-- Floating tooltip -->
+<div id="tooltip">
+  <div class="tt-box" id="tt-box"></div>
+</div>
+
+<script>
+// ── Mock data (would come from DuckDB DESCRIBE in production) ──────────────
+const SCHEMA = {
+  stg_padel_courts: {
+    layer: 'staging', materialization: 'view',
+    rows: null,
+    columns: [
+      { name: 'court_id',      type: 'VARCHAR',   nullable: false },
+      { name: 'name',          type: 'VARCHAR',   nullable: true  },
+      { name: 'lat',           type: 'DOUBLE',    nullable: true  },
+      { name: 'lon',           type: 'DOUBLE',    nullable: true  },
+      { name: 'country_code',  type: 'VARCHAR',   nullable: true  },
+      { name: 'source_file',   type: 'VARCHAR',   nullable: false },
+      { name: 'extracted_at',  type: 'TIMESTAMP', nullable: false },
+    ],
+  },
+  stg_playtomic_venues: {
+    layer: 'staging', materialization: 'view', rows: null,
+    columns: [
+      { name: 'tenant_id',     type: 'VARCHAR',   nullable: false },
+      { name: 'name',          type: 'VARCHAR',   nullable: true  },
+      { name: 'city',          type: 'VARCHAR',   nullable: true  },
+      { name: 'country_code',  type: 'VARCHAR',   nullable: true  },
+      { name: 'lat',           type: 'DOUBLE',    nullable: true  },
+      { name: 'lon',           type: 'DOUBLE',    nullable: true  },
+      { name: 'sport_ids',     type: 'VARCHAR[]', nullable: true  },
+    ],
+  },
+  stg_playtomic_resources: {
+    layer: 'staging', materialization: 'view', rows: null,
+    columns: [
+      { name: 'resource_id',   type: 'VARCHAR', nullable: false },
+      { name: 'tenant_id',     type: 'VARCHAR', nullable: false },
+      { name: 'name',          type: 'VARCHAR', nullable: true  },
+      { name: 'sport_id',      type: 'VARCHAR', nullable: true  },
+    ],
+  },
+  stg_playtomic_availability: {
+    layer: 'staging', materialization: 'view', rows: null,
+    columns: [
+      { name: 'slot_id',       type: 'VARCHAR',   nullable: false },
+      { name: 'tenant_id',     type: 'VARCHAR',   nullable: false },
+      { name: 'resource_id',   type: 'VARCHAR',   nullable: false },
+      { name: 'start_at',      type: 'TIMESTAMP', nullable: false },
+      { name: 'duration_min',  type: 'INTEGER',   nullable: false },
+      { name: 'price_cents',   type: 'INTEGER',   nullable: true  },
+      { name: 'currency',      type: 'VARCHAR',   nullable: true  },
+    ],
+  },
+  stg_population: {
+    layer: 'staging', materialization: 'view', rows: null,
+    columns: [
+      { name: 'city_code',  type: 'VARCHAR', nullable: false },
+      { name: 'city_name',  type: 'VARCHAR', nullable: true  },
+      { name: 'population', type: 'INTEGER', nullable: true  },
+      { name: 'year',       type: 'INTEGER', nullable: false },
+    ],
+  },
+  dim_venues: {
+    layer: 'foundation', materialization: 'table', rows: 4821,
+    columns: [
+      { name: 'venue_hk',       type: 'VARCHAR',   nullable: false },
+      { name: 'tenant_id',      type: 'VARCHAR',   nullable: true  },
+      { name: 'overpass_id',    type: 'VARCHAR',   nullable: true  },
+      { name: 'name',           type: 'VARCHAR',   nullable: true  },
+      { name: 'country_code',   type: 'VARCHAR',   nullable: true  },
+      { name: 'city',           type: 'VARCHAR',   nullable: true  },
+      { name: 'lat',            type: 'DOUBLE',    nullable: true  },
+      { name: 'lon',            type: 'DOUBLE',    nullable: true  },
+      { name: 'court_count',    type: 'INTEGER',   nullable: true  },
+      { name: 'has_playtomic',  type: 'BOOLEAN',   nullable: false },
+      { name: 'loaded_at',      type: 'TIMESTAMP', nullable: false },
+    ],
+  },
+  dim_cities: {
+    layer: 'foundation', materialization: 'table', rows: 1203,
+    columns: [
+      { name: 'city_hk',        type: 'VARCHAR',   nullable: false },
+      { name: 'city_name',      type: 'VARCHAR',   nullable: false },
+      { name: 'country_code',   type: 'VARCHAR',   nullable: false },
+      { name: 'population',     type: 'INTEGER',   nullable: true  },
+      { name: 'nuts2_code',     type: 'VARCHAR',   nullable: true  },
+      { name: 'income_eur',     type: 'DOUBLE',    nullable: true  },
+      { name: 'venue_count',    type: 'INTEGER',   nullable: false },
+      { name: 'lat',            type: 'DOUBLE',    nullable: true  },
+      { name: 'lon',            type: 'DOUBLE',    nullable: true  },
+    ],
+  },
+  dim_venue_capacity: {
+    layer: 'foundation', materialization: 'table', rows: 4812,
+    columns: [
+      { name: 'tenant_id',      type: 'VARCHAR', nullable: false },
+      { name: 'court_count',    type: 'INTEGER', nullable: false },
+      { name: 'open_hours_wday',type: 'DOUBLE',  nullable: true  },
+      { name: 'open_hours_wend',type: 'DOUBLE',  nullable: true  },
+    ],
+  },
+  fct_daily_availability: {
+    layer: 'foundation', materialization: 'table', rows: 382104,
+    columns: [
+      { name: 'date',           type: 'DATE',    nullable: false },
+      { name: 'tenant_id',      type: 'VARCHAR', nullable: false },
+      { name: 'resource_id',    type: 'VARCHAR', nullable: false },
+      { name: 'slots_total',    type: 'INTEGER', nullable: false },
+      { name: 'slots_booked',   type: 'INTEGER', nullable: false },
+      { name: 'occupancy_rate', type: 'DOUBLE',  nullable: true  },
+      { name: 'avg_price_eur',  type: 'DOUBLE',  nullable: true  },
+    ],
+  },
+  venue_pricing_benchmarks: {
+    layer: 'serving', materialization: 'table', rows: 4201,
+    columns: [
+      { name: 'tenant_id',       type: 'VARCHAR', nullable: false },
+      { name: 'p25_price_eur',   type: 'DOUBLE',  nullable: true  },
+      { name: 'p50_price_eur',   type: 'DOUBLE',  nullable: true  },
+      { name: 'p75_price_eur',   type: 'DOUBLE',  nullable: true  },
+      { name: 'peak_price_eur',  type: 'DOUBLE',  nullable: true  },
+      { name: 'avg_occupancy',   type: 'DOUBLE',  nullable: true  },
+      { name: 'sample_days',     type: 'INTEGER', nullable: false },
+    ],
+  },
+  city_market_profile: {
+    layer: 'serving', materialization: 'table', rows: 987,
+    columns: [
+      { name: 'city_hk',         type: 'VARCHAR', nullable: false },
+      { name: 'city_name',       type: 'VARCHAR', nullable: false },
+      { name: 'country_code',    type: 'VARCHAR', nullable: false },
+      { name: 'venue_count',     type: 'INTEGER', nullable: false },
+      { name: 'avg_price_eur',   type: 'DOUBLE',  nullable: true  },
+      { name: 'median_occ_rate', type: 'DOUBLE',  nullable: true  },
+      { name: 'population',      type: 'INTEGER', nullable: true  },
+      { name: 'income_eur',      type: 'DOUBLE',  nullable: true  },
+      { name: 'opportunity_score',type:'DOUBLE',  nullable: true  },
+    ],
+  },
+  pseo_city_costs_de: {
+    layer: 'serving', materialization: 'table', rows: 847,
+    columns: [
+      { name: 'city_slug',       type: 'VARCHAR', nullable: false },
+      { name: 'city_name_de',    type: 'VARCHAR', nullable: true  },
+      { name: 'avg_build_cost',  type: 'DOUBLE',  nullable: true  },
+      { name: 'land_cost_m2',    type: 'DOUBLE',  nullable: true  },
+      { name: 'venue_count',     type: 'INTEGER', nullable: false },
+      { name: 'opportunity_score',type:'DOUBLE',  nullable: true  },
+    ],
+  },
+};
+
+// fallback for models not in mock
+function getSchema(model) {
+  if (SCHEMA[model]) return SCHEMA[model];
+  const layer = model.startsWith('stg_') ? 'staging'
+              : (model.startsWith('dim_') || model.startsWith('fct_')) ? 'foundation'
+              : 'serving';
+  return { layer, materialization: 'view', rows: null,
+    columns: [
+      { name: 'id',         type: 'VARCHAR',   nullable: false },
+      { name: 'created_at', type: 'TIMESTAMP', nullable: false },
+    ]
+  };
+}
+
+// ── DAG definition ────────────────────────────────────────────────────────
+const DAG = {
+  stg_padel_courts: [],
+  stg_playtomic_venues: [],
+  stg_playtomic_resources: [],
+  stg_playtomic_opening_hours: [],
+  stg_playtomic_availability: [],
+  stg_population: [],
+  stg_population_usa: [],
+  stg_population_uk: [],
+  stg_population_geonames: [],
+  stg_income: [],
+  stg_income_usa: [],
+  stg_city_labels: [],
+  stg_nuts2_boundaries: [],
+  stg_regional_income: [],
+  stg_tennis_courts: [],
+  dim_venues: ['stg_playtomic_venues','stg_playtomic_resources','stg_padel_courts'],
+  dim_cities: ['dim_venues','stg_income','stg_city_labels','stg_population','stg_population_usa','stg_population_uk','stg_population_geonames'],
+  dim_locations: ['stg_population_geonames','stg_income','stg_nuts2_boundaries','stg_regional_income','stg_income_usa','stg_padel_courts','stg_tennis_courts'],
+  dim_venue_capacity: ['stg_playtomic_venues','stg_playtomic_resources','stg_playtomic_opening_hours'],
+  fct_availability_slot: ['stg_playtomic_availability'],
+  fct_daily_availability: ['fct_availability_slot','dim_venue_capacity'],
+  venue_pricing_benchmarks: ['fct_daily_availability'],
+  city_market_profile: ['dim_cities','venue_pricing_benchmarks'],
+  planner_defaults: ['venue_pricing_benchmarks','city_market_profile'],
+  location_opportunity_profile: ['dim_locations'],
+  pseo_city_costs_de: ['city_market_profile','planner_defaults','location_opportunity_profile'],
+  pseo_city_pricing: ['venue_pricing_benchmarks','city_market_profile'],
+  pseo_country_overview: ['pseo_city_costs_de'],
+};
+
+// Compute downstream map
+const DOWNSTREAM = {};
+Object.keys(DAG).forEach(n => DOWNSTREAM[n] = []);
+Object.entries(DAG).forEach(([name, deps]) => {
+  deps.forEach(dep => {
+    if (!DOWNSTREAM[dep]) DOWNSTREAM[dep] = [];
+    DOWNSTREAM[dep].push(name);
+  });
+});
+
+function classifyLayer(name) {
+  if (name.startsWith('stg_')) return 'staging';
+  if (name.startsWith('dim_') || name.startsWith('fct_')) return 'foundation';
+  return 'serving';
+}
+
+// ── SVG rendering (mirrors Python logic) ─────────────────────────────────
+const COLORS = {
+  staging:    { bg:'#F0FDF4', border:'#BBF7D0', accent:'#16A34A', fill:'#DCFCE7', text:'#14532D' },
+  foundation: { bg:'#EFF6FF', border:'#BFDBFE', accent:'#1D4ED8', fill:'#DBEAFE', text:'#1E3A8A' },
+  serving:    { bg:'#FFFBEB', border:'#FDE68A', accent:'#D97706', fill:'#FEF3C7', text:'#78350F' },
+};
+const LANE_ORDER = ['staging','foundation','serving'];
+const LANE_LABELS = { staging:'STAGING', foundation:'FOUNDATION', serving:'SERVING' };
+
+function buildSVG() {
+  const CW = 7.4, PAD_H = 10, NH = 26, VGAP = 10, PAD_TOP = 52, PAD_BOT = 24;
+  const INNER_W = 210, LANE_GAP = 40, LANE_PAD_L = 16;
+
+  // downstream counts
+  const dnCount = {};
+  Object.keys(DAG).forEach(n => dnCount[n] = 0);
+  Object.values(DAG).forEach(deps => deps.forEach(d => dnCount[d] = (dnCount[d]||0)+1));
+
+  const layers = { staging:[], foundation:[], serving:[] };
+  Object.keys(DAG).forEach(n => layers[classifyLayer(n)].push(n));
+  LANE_ORDER.forEach(l => layers[l].sort((a,b) => (dnCount[b]||0)-(dnCount[a]||0)||a.localeCompare(b)));
+
+  const nodeW = n => Math.max(n.length * CW + PAD_H*2, 80);
+
+  const laneX = {};
+  let xc = 0;
+  LANE_ORDER.forEach(l => { laneX[l] = xc; xc += INNER_W + LANE_PAD_L*2 + LANE_GAP; });
+
+  const pos = {};
+  const laneH = {};
+  LANE_ORDER.forEach(l => {
+    let y = PAD_TOP;
+    layers[l].forEach(n => { pos[n] = [laneX[l]+LANE_PAD_L, y]; y += NH+VGAP; });
+    laneH[l] = y + PAD_BOT - VGAP;
+  });
+
+  const W = xc - LANE_GAP;
+  const H = Math.max(...Object.values(laneH));
+
+  let parts = [];
+
+  parts.push(`<defs>
+    <marker id="arr" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
+      <path d="M0,0 L0,6 L6,3 z" fill="#CBD5E1"/>
+    </marker>
+    <marker id="arr-hi" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
+      <path d="M0,0 L0,6 L6,3 z" fill="#1D4ED8"/>
+    </marker>
+  </defs>`);
+
+  LANE_ORDER.forEach(l => {
+    const c = COLORS[l], lx = laneX[l], lw = INNER_W+LANE_PAD_L*2, lh = laneH[l];
+    parts.push(`<rect x="${lx}" y="0" width="${lw}" height="${lh}" rx="10" fill="${c.bg}" stroke="${c.border}" stroke-width="1"/>`);
+    parts.push(`<text x="${lx+lw/2}" y="28" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="10" font-weight="700" letter-spacing="1.5" fill="${c.accent}">${LANE_LABELS[l]}</text>`);
+    parts.push(`<line x1="${lx+12}" y1="36" x2="${lx+lw-12}" y2="36" stroke="${c.border}" stroke-width="1"/>`);
+  });
+
+  // Edges
+  Object.entries(DAG).forEach(([name, deps]) => {
+    const [tx, ty] = pos[name];
+    const tgt_cx = tx, tgt_cy = ty + NH/2;
+    deps.forEach(dep => {
+      if (!pos[dep]) return;
+      const [sx, sy] = pos[dep];
+      const sw = nodeW(dep);
+      const src_cx = sx+sw, src_cy = sy+NH/2;
+      const cpx1 = src_cx+(tgt_cx-src_cx)*0.45;
+      const cpx2 = tgt_cx-(tgt_cx-src_cx)*0.45;
+      parts.push(`<path class="lineage-edge" data-from="${dep}" data-to="${name}" d="M${src_cx},${src_cy} C${cpx1},${src_cy} ${cpx2},${tgt_cy} ${tgt_cx},${tgt_cy}" fill="none" stroke="#CBD5E1" stroke-width="1" marker-end="url(#arr)"/>`);
+    });
+  });
+
+  // Nodes
+  Object.keys(DAG).forEach(name => {
+    const l = classifyLayer(name);
+    const c = COLORS[l];
+    const [rx, ry] = pos[name];
+    const rw = nodeW(name);
+    const tx = rx+PAD_H, ty = ry+NH/2+4;
+    parts.push(`<g class="lineage-node" data-model="${name}" tabindex="0" role="button" aria-label="${name}">
+      <rect x="${rx}" y="${ry}" width="${rw}" height="${NH}" rx="5" fill="${c.fill}" stroke="${c.border}" stroke-width="1"/>
+      <rect x="${rx}" y="${ry}" width="3" height="${NH}" rx="5" fill="${c.accent}"/>
+      <text x="${tx}" y="${ty}" font-family="'DM Mono',monospace" font-size="11" fill="${c.text}">${name}</text>
+    </g>`);
+  });
+
+  return `<svg class="lineage-svg" viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:auto;min-width:${Math.ceil(W)}px">${parts.join('\n')}</svg>`;
+}
+
+// ── Inject SVG ────────────────────────────────────────────────────────────
+document.getElementById('svg-wrap').innerHTML = buildSVG();
+
+// ── Tooltip logic ─────────────────────────────────────────────────────────
+const tooltip = document.getElementById('tooltip');
+const ttBox = document.getElementById('tt-box');
+const PREVIEW_COUNT = 4;
+
+function showTooltip(model, x, y) {
+  const s = getSchema(model);
+  const preview = s.columns.slice(0, PREVIEW_COUNT);
+  const extra = s.columns.length - PREVIEW_COUNT;
+  const layerClass = s.layer;
+
+  ttBox.innerHTML = `
+    <div class="tt-header">
+      <span class="tt-name">${model}</span>
+      <span class="tt-layer ${layerClass}">${s.layer}</span>
+    </div>
+    ${preview.map(c => `
+      <div class="tt-row">
+        <span class="tt-col">${c.name}</span>
+        <span class="tt-type">${c.type}</span>
+      </div>
+    `).join('')}
+    ${extra > 0 ? `<div class="tt-more">+${extra} more column${extra===1?'':'s'} — click to view all</div>` : ''}
+    ${extra <= 0 && s.columns.length > 0 ? `<div class="tt-more" style="color:#94A3B8;font-style:italic">click to inspect</div>` : ''}
+  `;
+
+  // Position: prefer right of cursor, flip if near right edge
+  const W = tooltip.offsetWidth || 260, H = tooltip.offsetHeight || 120;
+  const vw = window.innerWidth, vh = window.innerHeight;
+  let left = x + 14, top = y - 10;
+  if (left + W > vw - 12) left = x - W - 14;
+  if (top + H > vh - 12) top = vh - H - 12;
+  tooltip.style.left = left + 'px';
+  tooltip.style.top  = top + 'px';
+  tooltip.classList.add('visible');
+}
+
+function hideTooltip() {
+  tooltip.classList.remove('visible');
+}
+
+// ── Panel logic ───────────────────────────────────────────────────────────
+const panel = document.getElementById('detail-panel');
+const canvasWrap = document.getElementById('canvas-wrap');
+const panelModelName = document.getElementById('panel-model-name');
+const panelLayerChip = document.getElementById('panel-layer-chip');
+const panelMat = document.getElementById('panel-materialization');
+const panelBody = document.getElementById('panel-body');
+
+let activeModel = null;
+
+function fmt(n) {
+  return n == null ? '—' : n.toLocaleString();
+}
+
+function openPanel(model) {
+  activeModel = model;
+  const s = getSchema(model);
+  panelModelName.textContent = model;
+  panelLayerChip.textContent = s.layer;
+  panelLayerChip.className = 'meta-chip ' + s.layer;
+  panelMat.textContent = s.materialization;
+
+  const ups = DAG[model] || [];
+  const downs = DOWNSTREAM[model] || [];
+
+  panelBody.innerHTML = `
+    <div class="panel-section">
+      <div class="section-label">Row count</div>
+      <div class="stat-row">
+        <span class="stat-val">${fmt(s.rows)}</span>
+        ${s.rows != null ? '<span class="stat-unit">rows</span>' : ''}
+      </div>
+      ${s.rows == null ? '<div class="empty-state" style="margin-top:2px">staging views have no row count</div>' : ''}
+    </div>
+
+    <div class="panel-section">
+      <div class="section-label">Schema · ${s.columns.length} columns</div>
+      <table class="schema-table">
+        <thead>
+          <tr>
+            <th>column</th>
+            <th>type</th>
+            <th style="text-align:right">nullable</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${s.columns.map(c => `
+            <tr>
+              <td class="col-name">${c.name}</td>
+              <td class="col-type">${c.type}</td>
+              <td class="col-null ${c.nullable?'yes':''}">${c.nullable?'null':'—'}</td>
+            </tr>
+          `).join('')}
+        </tbody>
+      </table>
+    </div>
+
+    <div class="panel-section">
+      <div class="section-label">Upstream · ${ups.length}</div>
+      ${ups.length ? `<div class="dep-list">${ups.map(d => `
+        <div class="dep-item" data-model="${d}" onclick="openPanel('${d}')">
+          <span class="dep-dot ${classifyLayer(d)}"></span>${d}
+        </div>
+      `).join('')}</div>` : '<div class="empty-state">no upstream dependencies</div>'}
+    </div>
+
+    <div class="panel-section">
+      <div class="section-label">Downstream · ${downs.length}</div>
+      ${downs.length ? `<div class="dep-list">${downs.map(d => `
+        <div class="dep-item" data-model="${d}" onclick="openPanel('${d}')">
+          <span class="dep-dot ${classifyLayer(d)}"></span>${d}
+        </div>
+      `).join('')}</div>` : '<div class="empty-state">nothing depends on this model</div>'}
+    </div>
+  `;
+
+  panel.classList.add('open');
+  canvasWrap.classList.add('panel-open');
+
+  // Highlight selected node
+  document.querySelectorAll('.lineage-node').forEach(n => {
+    n.classList.toggle('selected', n.dataset.model === model);
+  });
+}
+
+function closePanel() {
+  panel.classList.remove('open');
+  canvasWrap.classList.remove('panel-open');
+  document.querySelectorAll('.lineage-node').forEach(n => n.classList.remove('selected'));
+  activeModel = null;
+}
+
+document.getElementById('panel-close').addEventListener('click', closePanel);
+
+// ── Wire up SVG nodes ─────────────────────────────────────────────────────
+const svg = document.querySelector('.lineage-svg');
+const nodes = svg.querySelectorAll('.lineage-node');
+const edges = svg.querySelectorAll('.lineage-edge');
+
+nodes.forEach(g => {
+  const model = g.dataset.model;
+
+  g.addEventListener('mouseenter', e => {
+    // Highlight edges
+    edges.forEach(edge => {
+      if (edge.dataset.from === model || edge.dataset.to === model) {
+        edge.classList.add('hi');
+        edge.classList.remove('dim');
+        edge.setAttribute('marker-end', 'url(#arr-hi)');
+      } else {
+        edge.classList.add('dim');
+        edge.classList.remove('hi');
+      }
+    });
+    showTooltip(model, e.clientX, e.clientY);
+  });
+
+  g.addEventListener('mousemove', e => {
+    showTooltip(model, e.clientX, e.clientY);
+  });
+
+  g.addEventListener('mouseleave', () => {
+    edges.forEach(e => {
+      e.classList.remove('hi', 'dim');
+      e.setAttribute('marker-end', 'url(#arr)');
+    });
+    hideTooltip();
+  });
+
+  g.addEventListener('click', () => {
+    hideTooltip();
+    if (activeModel === model) {
+      closePanel();
+    } else {
+      openPanel(model);
+    }
+  });
+});
+
+// Close panel on Escape
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') closePanel();
+});
+</script>
+</body>
+</html>
