// _user-profile.scss — User profile page (.prof-*, .collab-*, .rank-* prefixes)

// ── Phase 1: provenance identity profile ─────────────────────────────────────

// ── Provenance badge strip ────────────────────────────────────────────────────
.prof-badge-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
  @media (max-width: 1000px) { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 640px)  { grid-template-columns: repeat(2, 1fr); }
}

// Stats bar (inline row in hero)
.prof-stats-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.prof-stat       { display: inline-flex; align-items: center; gap: 4px; strong { color: var(--text-primary); font-weight: 600; } }
.prof-stat-dot   { color: var(--border-default); }
.prof-stat--health-good { color: var(--color-success); strong { color: var(--color-success); } }
.prof-stat--health-fair { color: var(--color-warning); strong { color: var(--color-warning); } }
.prof-stat--health-poor { color: var(--color-danger);  strong { color: var(--color-danger);  } }

// Identity type badge + derived note
.prof-type-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 4px; border: 1px solid transparent;
  &--human  { background: rgba(56,189,248,0.12); color: #38bdf8; border-color: rgba(56,189,248,0.25); }
  &--agent  { background: rgba(167,139,250,0.12); color: var(--color-accent); border-color: rgba(167,139,250,0.25); }
  &--org    { background: rgba(251,191,36,0.12);  color: #fbbf24; border-color: rgba(251,191,36,0.25); }
}
.prof-derived-note {
  font-size: 10px; color: var(--text-muted); padding: 2px 6px;
  border: 1px dashed var(--border-subtle); border-radius: 4px;
}

// ── Repo card grid ────────────────────────────────────────────────────────────
.prof-repo-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
  @media (max-width: 680px) { grid-template-columns: 1fr; }
}
.prof-repo-card {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  --card-accent: var(--color-accent);
  &:hover {
    border-color: var(--card-accent); transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  }
}
.prof-repo-card__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.prof-repo-card__name {
  font-size: 13px; font-weight: 700; color: var(--color-accent);
  word-break: break-all; line-height: 1.3;
}
.prof-repo-card__badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.prof-repo-card__desc {
  font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prof-repo-card__footer {
  display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted);
  flex-wrap: wrap; margin-top: auto; padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}
.prof-repo-card__agent-commits { color: var(--color-accent-alt, #a78bfa); font-weight: 600; }

// ── Agent Fleet strip ─────────────────────────────────────────────────────────
.prof-fleet-strip {
  display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-1);
  scrollbar-width: thin; scrollbar-color: var(--border-default) transparent;
}
.prof-fleet-card {
  flex-shrink: 0; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); min-width: 220px; max-width: 280px;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  &:hover {
    border-color: var(--border-strong); transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }
}
.prof-fleet-card__avatar {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent); display: flex; align-items: center; justify-content: center;
}
.prof-fleet-card__body { flex: 1; min-width: 0; }
.prof-fleet-card__name {
  font-size: 12px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prof-fleet-card__model { font-size: 11px; color: var(--color-accent); margin-top: 1px; }
.prof-fleet-card__stats {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  font-size: 11px; color: var(--text-muted); flex-shrink: 0;
}
.prof-fleet-card__stat { display: flex; align-items: center; gap: 3px; }

// ── Symbol / File Footprint table ─────────────────────────────────────────────
.prof-footprint-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.prof-footprint-th {
  text-align: left; font-size: 10px; font-weight: 600; font-family: var(--font-mono);
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;
  padding: 6px 8px; border-bottom: 1px solid var(--border-default);
  &--num { text-align: right; }
}
.prof-footprint-row {
  border-bottom: 1px solid var(--border-subtle);
  &:last-child { border-bottom: none; }
  &:hover { background: var(--bg-overlay); }
}
.prof-footprint-td {
  padding: 7px 8px; vertical-align: middle;
  &--num { text-align: right; }
  &--date { white-space: nowrap; color: var(--text-muted); font-size: 11px; }
}
.prof-footprint-name {
  font-weight: 600; color: var(--color-accent); font-family: var(--font-mono);
  font-size: 12px; display: block; text-decoration: none;
  &:hover { text-decoration: underline; }
}
.prof-footprint-path {
  font-size: 10px; color: var(--text-muted); font-family: var(--font-mono);
  display: block; margin-top: 1px;
}
.prof-footprint-repo {
  font-size: 11px; color: var(--color-accent); text-decoration: none;
  font-family: var(--font-mono);
  &:hover { text-decoration: underline; }
}
.prof-footprint-count {
  font-weight: 700; color: var(--text-primary); font-family: var(--font-mono);
}
.prof-footprint-op {
  display: inline-block; font-size: 9px; font-weight: 700;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 5px; border-radius: 3px; margin-right: 5px;
  &--add     { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
  &--modify  { background: color-mix(in srgb, var(--color-accent) 15%, transparent);  color: var(--color-accent); }
  &--patch   { background: color-mix(in srgb, var(--color-accent) 15%, transparent);  color: var(--color-accent); }
  &--delete  { background: color-mix(in srgb, var(--color-danger) 15%, transparent);  color: var(--color-danger); }
  &--rename  { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
}

.prof-repo-private {
  font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: var(--bg-overlay); color: var(--text-muted); border: 1px solid var(--border-subtle);
}
.prof-repo-health {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600;
  &--good { color: var(--color-success); }
  &--fair { color: var(--color-warning); }
  &--poor { color: var(--color-danger);  }
}
.prof-meta-sep { color: var(--border-default); }

// Provenance chip on activity rows
.prof-prov-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
  &--human { background: var(--bg-overlay); color: var(--text-muted); }
  &--agent { background: rgba(167,139,250,0.12); color: var(--color-accent); }
}

// Activity icon variants
.prof-activity-icon {
  &--commit  { color: var(--text-muted); }
  &--proposal { color: var(--color-success); }
  &--issue   { color: var(--color-warning); }
  &--tag     { color: var(--color-accent); }
  &--branch  { color: var(--text-muted); }
  &--session { color: #2dd4bf; }
}

// ── Phase 2: heatmap ─────────────────────────────────────────────────────────

// Color tokens — human uses accent blue-green, agent uses purple
:root {
  --hm-empty:   var(--bg-inset);
  --hm-human-1: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --hm-human-2: color-mix(in srgb, var(--color-accent) 50%, transparent);
  --hm-human-3: color-mix(in srgb, var(--color-accent) 85%, transparent);
  --hm-agent-1: color-mix(in srgb, #a78bfa 20%, transparent);
  --hm-agent-2: color-mix(in srgb, #a78bfa 50%, transparent);
  --hm-agent-3: color-mix(in srgb, #a78bfa 85%, transparent);
  --hm-mixed-1: color-mix(in srgb, #60a5fa 20%, transparent);
  --hm-mixed-2: color-mix(in srgb, #60a5fa 50%, transparent);
  --hm-mixed-3: color-mix(in srgb, #60a5fa 85%, transparent);
}

.prof-heatmap-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.prof-heatmap-wrap {
  display: flex;
  gap: 6px;
}
.prof-heatmap-days {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 22px; // align with cells (below month label row)
  flex-shrink: 0;
}
.prof-heatmap-daylbl {
  font-size: 9px;
  color: var(--text-muted);
  height: 12px;
  line-height: 12px;
  width: 22px;
  text-align: right;
  white-space: nowrap;
}
.prof-heatmap-grid-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.prof-heatmap-months {
  position: relative;
  height: 18px;
  flex-shrink: 0;
}
.prof-heatmap-month {
  position: absolute;
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  top: 0;
  transform: translateX(-50%);
}
.prof-heatmap-cols {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.prof-heatmap-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

// Cell coloring — human (default), agent-only, mixed
.prof-heatmap-cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  flex-shrink: 0;
  cursor: default;
  transition: opacity 0.1s, transform 0.1s;
  &:hover { transform: scale(1.4); opacity: 0.9; }

  &[data-intensity="0"] { background: var(--hm-empty); }
  &[data-intensity="1"] { background: var(--hm-human-1); }
  &[data-intensity="2"] { background: var(--hm-human-2); }
  &[data-intensity="3"] { background: var(--hm-human-3); }

  &--agent {
    &[data-intensity="1"] { background: var(--hm-agent-1); }
    &[data-intensity="2"] { background: var(--hm-agent-2); }
    &[data-intensity="3"] { background: var(--hm-agent-3); }
  }
  &--mixed {
    &[data-intensity="1"] { background: var(--hm-mixed-1); }
    &[data-intensity="2"] { background: var(--hm-mixed-2); }
    &[data-intensity="3"] { background: var(--hm-mixed-3); }
  }
}

.prof-heatmap-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
  strong { color: var(--text-primary); }
}
.prof-hm-stat-dot { color: var(--border-default); }

// Tab nav as links (SSR — no JS tab switching)
.prof-tab-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px;
  border: none; background: none; cursor: pointer; color: var(--text-muted);
  border-bottom: 2px solid transparent; font-size: 13px; white-space: nowrap; flex-shrink: 0;
  text-decoration: none;
  transition: color var(--transition-fast); &:hover { color: var(--text-primary); }
  &--active { color: var(--text-primary); border-bottom-color: var(--color-accent); font-weight: 600; }
}

/* =========================================================================
   Forks page
   ========================================================================= */
#fork-canvas { width: 100%; overflow-x: auto; background: var(--bg-base); border: 1px solid var(--border-default); border-radius: 8px; padding: 16px; min-height: 220px; }
.fork-svg { display: block; overflow: visible; }
.fork-node-label { font-family: var(--font-mono); font-size: 11px; fill: var(--text-primary); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.fork-node-sub { font-size: 10px; fill: var(--text-muted); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.legend-swatch { display: inline-block; width: 28px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
#fork-detail { margin-top: 16px; display: none; }
.fork-card { background: var(--bg-overlay); border: 1px solid var(--border-default); border-radius: 8px; padding: 16px 20px; }
.fork-card-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
.fork-card-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.fork-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.stats-bar { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); }
.stat       { display: flex; align-items: center; gap: 4px; }
.stat-count { font-weight: 600; color: var(--text-primary); }
.fork-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 16px; }
.fork-table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-default); color: var(--text-muted); font-weight: 500; font-size: 12px; }
.fork-table td { padding: 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; }
.fork-table tr:last-child td { border-bottom: none; }
.fork-table tr:hover td { background: rgba(255,255,255,0.03); }
.avatar-badge { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-overlay); border: 1px solid var(--border-default); align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-muted); vertical-align: middle; margin-right: 6px; }


/* =========================================================================
   User profile page  (.prof-* prefix)
   ========================================================================= */

// ── Page shell ────────────────────────────────────────────────────────────────
.prof-page { min-height: 100vh; }
.prof-body {
  max-width: 1200px; margin: 0 auto;
  padding: var(--space-5) var(--space-6) var(--space-10);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.prof-section { display: flex; flex-direction: column; gap: var(--space-3); }
.prof-section-header { display: flex; align-items: center; gap: var(--space-3); justify-content: space-between; }
.prof-section-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0; }
.prof-section-meta { font-size: 12px; color: var(--text-muted); }
.prof-loading { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; padding: var(--space-4); }
.prof-error { color: var(--color-danger); padding: var(--space-4); font-size: 13px; }
.prof-tab-empty { color: var(--text-muted); text-align: center; padding: var(--space-6); font-size: 13px; }
.prof-tab-error { color: var(--color-danger); padding: var(--space-4); font-size: 13px; }

// ── Hero — full-bleed dark gradient, MCP/domains/issue style ──────────────────
.prof-hero {
  position: relative;
  border-bottom: 1px solid var(--border-default);
  overflow: hidden;
  &--human { background: linear-gradient(135deg, #0d1117 0%, #0f1923 55%, #0d1117 100%); }
  &--agent { background: linear-gradient(135deg, #0d1117 0%, #110f1f 55%, #0d1117 100%); }
  &--org   { background: linear-gradient(135deg, #0d1117 0%, #161205 55%, #0d1117 100%); }
}

.prof-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  &--human {
    background:
      radial-gradient(ellipse 60% 80% at 78% 40%, rgba(56,189,248,0.08) 0%, transparent 65%),
      radial-gradient(ellipse 35% 55% at 8% 75%,  rgba(167,139,250,0.05) 0%, transparent 60%);
  }
  &--agent {
    background:
      radial-gradient(ellipse 60% 80% at 78% 40%, rgba(167,139,250,0.10) 0%, transparent 65%),
      radial-gradient(ellipse 35% 55% at 8% 75%,  rgba(56,189,248,0.05) 0%, transparent 60%);
  }
  &--org {
    background:
      radial-gradient(ellipse 60% 80% at 78% 40%, rgba(251,191,36,0.09) 0%, transparent 65%),
      radial-gradient(ellipse 35% 55% at 8% 75%,  rgba(52,211,153,0.05) 0%, transparent 60%);
  }
}

// Inner row: left body + right stat pills
.prof-hero-inner {
  position: relative;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-6) var(--space-5);
  max-width: 1200px; margin: 0 auto;
  @media (max-width: 768px) { flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-4) var(--space-4); }
}

.prof-hero-left { flex: 1; min-width: 0; max-width: 600px; }

// Eyebrow: type badge · @handle · verified
.prof-hero-eyebrow {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3); flex-wrap: wrap;
}
.prof-hero-handle {
  font-size: 12px; font-family: var(--font-mono); color: var(--text-muted);
}
.prof-hero-verified {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--color-success);
  svg { flex-shrink: 0; }
}

// Large display name
.prof-display-name {
  font-size: clamp(24px, 3.5vw, 36px); font-weight: 800;
  line-height: 1.15; letter-spacing: -0.02em;
  margin: 0 0 var(--space-2); color: var(--text-primary);
}

// Bio
.prof-bio {
  font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 var(--space-3);
  &--muted { color: var(--text-muted); }
}

.prof-link { color: var(--color-accent); text-decoration: none; &:hover { text-decoration: underline; } }

// Meta items (location / social / website)
.prof-meta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.prof-meta-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-muted);
  a { color: var(--text-secondary); text-decoration: none; &:hover { color: var(--text-primary); } }
}

// Right stat pills (stacked column, like dm/mcp)
.prof-hero-right {
  display: flex; flex-direction: column; gap: var(--space-2); flex-shrink: 0;
  @media (max-width: 768px) { flex-direction: row; flex-wrap: wrap; }
}
.prof-stat-pill {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 9px 14px; min-width: 130px;
  @media (max-width: 768px) { min-width: 0; }
}
.prof-stat-pill__num {
  font-family: var(--font-mono); font-size: 18px; font-weight: 700;
  color: var(--text-primary); line-height: 1;
}
.prof-stat-pill__label {
  font-size: 11px; font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}

// Bottom strip: AVAX / trust chain / treasury + key metadata
.prof-hero-strip {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.06);
  max-width: 1200px; margin: 0 auto;
  font-size: 12px;
}
.prof-strip-item { display: flex; align-items: center; gap: 6px; }
.prof-strip-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
}
.prof-strip-val { font-size: 11px; color: var(--color-accent); font-family: var(--font-mono); }
.prof-strip-sep { color: var(--border-default); }
.prof-strip-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 4px;
  background: rgba(255,255,255,0.04); color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.08);
}

// Repo chips — inside hero, below strip, dark bg
.prof-projects {
  position: relative;
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: var(--space-3) var(--space-6) var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.04);
  max-width: 1200px; margin: 0 auto;
}
.prof-project-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
  padding: 4px 10px; border-radius: 20px; text-decoration: none;
  background: rgba(255,255,255,0.04); color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  &:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.07); }
}
.prof-project-chip__icon { display: flex; align-items: center; }


// Capabilities
.prof-caps-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.prof-cap {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-family: var(--font-mono); padding: 3px 10px; border-radius: 4px;
  &--granted { background: rgba(52,211,153,0.12); color: var(--color-success); border: 1px solid rgba(52,211,153,0.2); }
}
.prof-caps-meta {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 12px; color: var(--text-muted); margin-top: var(--space-2);
  strong { color: var(--text-primary); }
}
.prof-caps-meta__sep { color: var(--border-default); }

// Activity canvas (multi-domain heatmap)
.prof-canvas {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto;
}
.prof-canvas__row {
  display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2);
  &:last-of-type { margin-bottom: 0; }
}
.prof-canvas__label { display: flex; align-items: center; gap: 8px; min-width: 80px; }
.prof-canvas__domain-name {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; font-family: var(--font-mono);
  &--code  { color: #34d399; }
  &--midi  { color: #a78bfa; }
  &--audio { color: #fbbf24; }
}
.prof-canvas__total { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); }
.prof-canvas__grid { display: flex; gap: 2px; }
.prof-canvas__col { display: flex; flex-direction: column; gap: 2px; }
.prof-canvas__cell {
  width: 10px; height: 10px; border-radius: 1px; flex-shrink: 0;
  &[data-intensity="0"] { background: var(--bg-inset); }
  &--code  {
    &[data-intensity="1"] { background: rgba(52,211,153,0.25); }
    &[data-intensity="2"] { background: rgba(52,211,153,0.55); }
    &[data-intensity="3"] { background: rgba(52,211,153,0.85); }
    &[data-intensity="4"] { background: #34d399; }
  }
  &--midi  {
    &[data-intensity="1"] { background: rgba(167,139,250,0.25); }
    &[data-intensity="2"] { background: rgba(167,139,250,0.55); }
    &[data-intensity="3"] { background: rgba(167,139,250,0.85); }
    &[data-intensity="4"] { background: #a78bfa; }
  }
  &--audio {
    &[data-intensity="1"] { background: rgba(251,191,36,0.25); }
    &[data-intensity="2"] { background: rgba(251,191,36,0.55); }
    &[data-intensity="3"] { background: rgba(251,191,36,0.85); }
    &[data-intensity="4"] { background: #fbbf24; }
  }
}
.prof-canvas__peak { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; }
.prof-canvas__legend { display: flex; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; }
.prof-canvas__legend-item { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }

// Attestations
.prof-attestations {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  @media (max-width: 600px) { grid-template-columns: 1fr; }
}
.prof-attest-col { display: flex; flex-direction: column; gap: var(--space-1); }
.prof-attest-col__header {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle);
}
.prof-attest-row { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--text-secondary); padding: 4px 0; }
.prof-attest-claim { color: var(--text-muted); font-style: italic; }
.prof-attest-age { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.prof-attest-empty { font-size: 12px; color: var(--text-muted); font-style: italic; padding: var(--space-2) 0; }

// Provenance chain
.prof-provenance { display: flex; flex-direction: column; gap: var(--space-1); }
.prof-prov-node { display: flex; flex-direction: column; gap: 2px; }
.prof-prov-node__indent {
  display: flex; align-items: center; gap: var(--space-2);
  padding-left: calc(var(--prof-indent, 0) * 20px);
}
.prof-prov-connector { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }
.prof-prov-icon { color: var(--text-muted); display: flex; align-items: center; }
.prof-prov-handle { font-weight: 600; color: var(--color-accent); font-size: 13px; text-decoration: none; &:hover { text-decoration: underline; } }
.prof-prov-root-label {
  font-size: 10px; color: var(--text-muted);
  background: var(--bg-overlay); border: 1px solid var(--border-subtle);
  padding: 1px 6px; border-radius: 4px;
}
.prof-prov-annotation { font-size: 11px; color: var(--text-muted); font-style: italic; }

// Fleet container
.prof-fleet { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-1); }
.prof-fleet-card__sep { color: var(--border-default); }

// Heatmap legend swatches (avoids inline styles)
.prof-heatmap-swatch--human { background: var(--hm-human-3); }
.prof-heatmap-swatch--agent { background: var(--hm-agent-3); }
.prof-hm-stat-sep { color: var(--border-default); }

// Repo card tags wrapper
.prof-repo-tags { display: flex; flex-wrap: wrap; gap: 4px; }

// Footprint simple list
.prof-footprint { display: flex; flex-direction: column; }
.prof-footprint__item {
  display: flex; align-items: center; gap: var(--space-3); padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle); font-size: 12px;
  &:last-child { border-bottom: none; }
}
.prof-footprint__repo { color: var(--color-accent); text-decoration: none; font-family: var(--font-mono); font-size: 11px; &:hover { text-decoration: underline; } }
.prof-footprint__sym { flex: 1; font-family: var(--font-mono); color: var(--text-primary); font-size: 11px; }
.prof-footprint__changes { color: var(--text-muted); font-size: 11px; white-space: nowrap; }

// Activity feed
.prof-activity { display: flex; flex-direction: column; }
.prof-evt {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 10px 0; border-bottom: 1px solid var(--border-subtle);
  &:last-child { border-bottom: none; }
  &--commit   .prof-evt__icon { color: var(--text-muted); }
  &--proposal .prof-evt__icon { color: var(--color-success); }
  &--issue    .prof-evt__icon { color: var(--color-warning); }
  &--release  .prof-evt__icon { color: var(--color-accent); }
}
.prof-evt__icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-overlay); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; color: var(--text-muted);
}
.prof-evt__body { flex: 1; min-width: 0; }
.prof-evt__title {
  font-size: 13px; color: var(--text-primary); display: block; margin-bottom: 3px;
  a { color: var(--color-accent); text-decoration: none; &:hover { text-decoration: underline; } }
}
.prof-evt__meta { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.prof-evt__agent { color: var(--color-accent); }

// Load more
.prof-load-more { display: flex; justify-content: center; padding: var(--space-4) 0; }
.prof-load-more__btn {
  padding: 8px 24px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); background: var(--bg-surface);
  color: var(--text-secondary); font-size: 13px; text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
  &:hover { border-color: var(--border-strong); color: var(--text-primary); }
}

// Org roster
.prof-roster { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.prof-roster-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  th {
    text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--border-default);
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-surface);
  }
  td { padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: var(--bg-overlay); }
}
.prof-roster-identity { display: flex; align-items: center; gap: var(--space-2); }
.prof-roster-role { font-size: 11px; color: var(--text-muted); background: var(--bg-overlay); padding: 2px 8px; border-radius: 10px; }
.prof-roster-weight { font-size: 13px; color: var(--text-primary); font-family: var(--font-mono); }
.prof-avatar--xs {
  width: 28px; height: 28px; font-size: 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; flex-shrink: 0; text-transform: uppercase;
}

// Section header shorthand (pid compat)
.prof-section-hd { display: flex; align-items: center; gap: var(--space-3); justify-content: space-between; flex-wrap: wrap; }

// ── Domain stats bar ──────────────────────────────────────────────────────────
.prof-domain-bar { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.prof-dstat-card {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); border-left: 3px solid var(--dstat-color);
  transition: transform 0.15s; &:hover { transform: translateY(-1px); }
}
.prof-dstat-icon {
  font-size: 22px; width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--dstat-color) 12%, transparent); border-radius: var(--radius-sm);
}
.prof-dstat-body { flex: 1; min-width: 0; }
.prof-dstat-name { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.prof-dstat-label { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.prof-dstat-scoped { font-size: 10px; font-family: var(--font-mono); color: var(--text-muted); background: var(--bg-overlay); padding: 1px 6px; border-radius: 4px; }
.prof-dstat-nums { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; strong { color: var(--text-primary); } }
.prof-dstat-dot { color: var(--border-default); }
.prof-dstat-pct { color: var(--dstat-color); }
.prof-dstat-bar-track { height: 4px; background: var(--border-subtle); border-radius: 2px; overflow: hidden; }
.prof-dstat-bar { height: 100%; border-radius: 2px; transition: width 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

// ── Multi-domain heatmap ──────────────────────────────────────────────────────
.prof-heatmap-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4); }
.prof-heatmap-months { position: relative; height: 18px; margin-left: 28px; margin-bottom: 4px; }
.prof-heatmap-month { position: absolute; font-size: 10px; color: var(--text-muted); white-space: nowrap; transform: translateX(-50%); }
.prof-heatmap-grid { display: flex; gap: 3px; overflow-x: auto; }
.prof-heatmap-days { display: flex; flex-direction: column; gap: 2px; margin-right: 4px; flex-shrink: 0; padding-top: 2px; }
.prof-heatmap-daylbl { font-size: 9px; color: var(--text-muted); height: 12px; line-height: 12px; width: 22px; text-align: right; }
.prof-heatmap-cols { display: flex; gap: 2px; }
.prof-heatmap-col { display: flex; flex-direction: column; gap: 2px; }
.prof-heatmap-cell {
  width: 12px; height: 12px; border-radius: 2px; cursor: help; flex-shrink: 0;
  transition: transform 0.1s, opacity 0.1s; &:hover { transform: scale(1.4); opacity: 0.9; }
}
.prof-heatmap-stats {
  display: flex; align-items: center; gap: 8px; margin-top: var(--space-3);
  font-size: 11px; color: var(--text-muted); flex-wrap: wrap; strong { color: var(--text-primary); }
}
.prof-hm-stat-dot { color: var(--border-default); }
.prof-heatmap-legend { display: flex; gap: 12px; flex-wrap: wrap; }
.prof-heatmap-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); }
.prof-heatmap-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

// ── Pinned repos ──────────────────────────────────────────────────────────────
.prof-pinned-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  @media (max-width: 900px) { grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 600px) { grid-template-columns: 1fr; }
}
.prof-pinned-card {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  &:hover {
    border-color: var(--card-accent); transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    .prof-pinned-view-arrow { transform: translateX(3px); opacity: 1; }
  }
}
.prof-pinned-card__header { display: flex; align-items: center; justify-content: space-between; }
.prof-pinned-domain-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; font-family: var(--font-mono);
  padding: 2px 8px; border-radius: 4px; border: 1px solid transparent;
}
.prof-pinned-card__body { flex: 1; }
.prof-pinned-name { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.prof-pinned-desc { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prof-pinned-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.prof-repo-tag { font-size: 10px; padding: 2px 7px; border-radius: 10px; background: var(--bg-overlay); color: var(--text-muted); border: 1px solid var(--border-subtle); }
.prof-pinned-card__footer { display: flex; align-items: center; gap: var(--space-3); font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); margin-top: auto; }
.prof-pinned-stat { display: inline-flex; align-items: center; gap: 3px; }
.prof-pinned-view-arrow { margin-left: auto; color: var(--card-accent); font-size: 14px; opacity: 0.4; transition: transform 0.15s, opacity 0.15s; }

// ── Achievements ──────────────────────────────────────────────────────────────
.prof-achievements-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
  @media (max-width: 800px) { grid-template-columns: repeat(2, 1fr); }
}
.prof-badge {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4);
  border-radius: var(--radius-md); border: 1px solid var(--border-default);
  background: var(--bg-surface); position: relative; transition: border-color 0.15s, transform 0.15s;
  &--earned { border-color: var(--badge-color); background: color-mix(in srgb, var(--badge-color) 6%, var(--bg-surface)); &:hover { transform: translateY(-1px); } }
  &--locked { opacity: 0.45; }
}
.prof-badge__icon {
  font-size: 22px; width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--badge-color) 12%, transparent); border-radius: var(--radius-sm);
  .prof-badge--locked & { filter: grayscale(1); }
}
.prof-badge__body { flex: 1; min-width: 0; }
.prof-badge__name { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.prof-badge__desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.prof-badge__check { position: absolute; top: 8px; right: 8px; color: var(--badge-color); font-size: 12px; font-weight: 700; }
.prof-badge__lock { position: absolute; top: 8px; right: 8px; font-size: 11px; opacity: 0.5; }

// ── Tabs ──────────────────────────────────────────────────────────────────────
.prof-tabs-section { gap: 0; }
.prof-tab-nav { display: flex; border-bottom: 1px solid var(--border-default); gap: 0; margin-bottom: var(--space-4); overflow-x: auto; }
.prof-tab-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px;
  border: none; background: none; cursor: pointer; color: var(--text-muted);
  border-bottom: 2px solid transparent; font-size: 13px; white-space: nowrap; flex-shrink: 0;
  transition: color var(--transition-fast); &:hover { color: var(--text-primary); }
  &--active { color: var(--text-primary); border-bottom-color: var(--color-accent); font-weight: 600; }
}
.prof-tab-count { font-size: 10px; background: var(--bg-overlay); color: var(--text-muted); border-radius: 10px; padding: 1px 6px; font-family: var(--font-mono); }
.prof-tab-content { min-height: 200px; }


// ── Social tabs ───────────────────────────────────────────────────────────────
.prof-social-row-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); &:last-child { border-bottom: none; } }
.prof-social-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #fff; flex-shrink: 0; text-decoration: none; }
.prof-social-info { flex: 1; min-width: 0; }
.prof-social-name { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; &:hover { color: var(--color-accent); } }
.prof-social-handle { font-size: 12px; color: var(--text-muted); margin-left: 6px; }
.prof-social-bio { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; }

// ── Activity tab ──────────────────────────────────────────────────────────────
.prof-activity-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--border-subtle); &:last-child { border-bottom: none; } }
.prof-activity-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-overlay); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; color: var(--text-muted); }
.prof-activity-body { flex: 1; min-width: 0; }
.prof-activity-desc { font-size: 13px; color: var(--text-primary); display: block; }
.prof-activity-meta { font-size: 11px; color: var(--text-muted); a { color: var(--color-accent); text-decoration: none; &:hover { text-decoration: underline; } } }
.prof-pager { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; justify-content: center; }
.prof-pager-label { font-size: 12px; color: var(--text-muted); }

/* =========================================================================
   Commit Graph page  (Canvas2D renderer)
   ========================================================================= */
.graph-layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 0;
  align-items: start;
  @media (max-width: 768px) { grid-template-columns: 1fr; }
}
.graph-main {
  border-right: 1px solid var(--border-subtle);
  padding-right: var(--space-4);
  min-width: 0;
}
.graph-viewport-card {
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-base);
  border: 1px solid var(--border-subtle);
  background: var(--bg-base);
}
.graph-legend-bar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  min-height: 38px;
  &--types {
    background: rgba(0,0,0,0.12);
    min-height: 34px;
    padding: var(--space-1) var(--space-4);
  }
}
.graph-legend-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; flex-shrink: 0; }
.graph-legend-items { display: flex; gap: 10px; flex-wrap: wrap; }
.graph-legend-branch { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
.graph-legend-type {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono);
}
.graph-legend-type-count { color: var(--text-muted); font-size: 10px; }
.graph-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.graph-legend-sep { color: var(--text-muted); margin-left: auto; display: flex; gap: var(--space-4); font-size: 10px; flex-shrink: 0; }
.graph-legend-sep span { display: inline-flex; align-items: center; gap: 4px; }
.graph-legend-sep--right { margin-left: auto; }
.graph-viewport {
  position: relative;
  height: calc(100vh - 300px);
  min-height: 480px;
  background: var(--bg-base);
  overflow: hidden;
}
.graph-canvas {
  display: block;
  position: absolute; top: 0; left: 0;
  cursor: grab;
  &:active { cursor: grabbing; }
}
.graph-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; color: var(--text-muted); font-size: 14px;
}
.graph-empty {
  padding: 60px; text-align: center; color: var(--text-muted); font-size: 14px;
}
// Minimap
.dag-minimap {
  position: absolute; bottom: 8px; right: 8px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s;
  &:hover { opacity: 1; }
}
.graph-controls {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  min-height: 44px;
}
.graph-ctrl-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px; cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  &:hover { color: var(--text-primary); border-color: var(--border-muted); background: var(--bg-surface); }
}
.graph-zoom-label {
  font-size: 11px; font-family: var(--font-mono);
  color: var(--text-muted); min-width: 36px; text-align: center;
}
.graph-search-wrap {
  position: relative; display: flex; align-items: center; margin-left: var(--space-2);
}
.graph-search-icon {
  position: absolute; left: 8px; color: var(--text-muted); pointer-events: none;
}
.graph-search-input {
  background: var(--bg-overlay); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 4px 8px 4px 28px;
  font-size: 12px; color: var(--text-primary); width: 200px;
  transition: border-color var(--transition-fast), width var(--transition-fast);
  &::placeholder { color: var(--text-muted); }
  &:focus { outline: none; border-color: var(--color-accent); width: 260px; }
}
.graph-search-count {
  position: absolute; right: 6px; font-size: 10px; color: var(--text-muted);
  pointer-events: none; font-family: var(--font-mono);
}
.graph-hint { font-size: 10px; color: var(--text-muted); margin-left: auto; }
.graph-sidebar {
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--header-height);
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}
.graph-sidebar-section {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  &:last-child { border-bottom: none; }
}

/* Commit popover */
.dag-popover {
  display: none;
  position: fixed;
  z-index: 500;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-width: 320px;
  max-width: 460px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
  box-shadow: var(--shadow-xl);
  pointer-events: none;
}
.dag-pop-sha {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-accent-link);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.dag-pop-sha-badge {
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}
.dag-pop-branch {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  margin-left: auto;
}
.dag-pop-type {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-mono);
  margin-right: 4px;
}
.dag-pop-type-feat   { background: rgba(63,185,80,0.15);  color: var(--dim-rhythmic); }
.dag-pop-type-fix    { background: rgba(248,81,73,0.15);  color: var(--dim-dynamic); }
.dag-pop-type-refactor{background: rgba(188,140,255,0.15);color: var(--dim-melodic); }
.dag-pop-type-init   { background: rgba(56,139,253,0.15); color: var(--dim-harmonic); }
.dag-pop-type-chore  { background: rgba(139,148,158,0.12);color: var(--text-muted); }
.dag-pop-msg {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  word-break: break-word;
  line-height: 1.5;
}
.dag-pop-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.dag-pop-author-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-overlay);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}
.dag-pop-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}
.dag-pop-session { font-size: 11px; color: #2dd4bf; margin-top: var(--space-2); }
.dag-pop-nav { font-size: 11px; color: var(--color-accent); margin-top: var(--space-2); opacity: 0.7; }
.dag-pop-time { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }

/* Muse enrichment row inside popover */
.dag-pop-muse {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}
.pop-muse-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: 10px; font-weight: var(--font-weight-semibold);
  font-family: var(--font-mono); border: 1px solid transparent;
}
.pop-muse-agent   { background: rgba(167,139,250,0.18); color: #a78bfa; border-color: rgba(167,139,250,0.3); }
.pop-muse-breaking{ background: rgba(248,113,113,0.18); color: #f87171; border-color: rgba(248,113,113,0.3); }
.pop-sym-stats { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-family: var(--font-mono); }
.pop-sym-add   { color: #34d399; }
.pop-sym-del   { color: #f87171; }

/* Sidebar panels */
.branch-legend-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 5px 0;
  font-size: 12px; color: var(--text-secondary);
  border-top: 1px solid var(--border-subtle);
  &:first-of-type { border-top: none; }
}
.branch-legend-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-secondary); }
.branch-legend-pill { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sidebar-branch-list { padding: var(--space-1) 0; }
.sidebar-contributor-list { padding: var(--space-1) 0; }
.branch-legend-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.contributor-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 0;
  border-top: 1px solid var(--border-subtle);
  &:first-of-type { border-top: none; }
}
.contributor-avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}
.contributor-name  { font-size: 12px; color: var(--text-secondary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contributor-count { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); flex-shrink: 0; }
.contributor-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--bg-overlay);
  margin: 2px 0 0;
  overflow: hidden;
}
.contributor-bar-fill { height: 100%; border-radius: 2px; }



// ── Responsive ────────────────────────────────────────────────────────────────

@media (max-width: 768px) {
  .prof-layout {
    grid-template-columns: 1fr;
  }

  .prof-sidebar {
    display: none;
  }

  .prof-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .prof-avatar {
    width: 56px;
    height: 56px;
  }

  .prof-stats-row {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .prof-pinned-grid {
    grid-template-columns: 1fr;
  }

  .collab-grid {
    grid-template-columns: 1fr;
  }

  .rank-card {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .prof-username {
    font-size: 18px;
  }

  .prof-bio {
    font-size: 13px;
  }

  .prof-stat-value {
    font-size: 16px;
  }

  .rank-badge {
    font-size: 11px;
    padding: 2px 6px;
  }

  .prof-repo-card {
    padding: var(--space-2);
  }
}