// ─────────────────────────────────────────────────────────────────────────────
// Page: Profile
// File: src/scss/pages/_profile.scss
//
// Structural layout only — zero colors, zero raw values.
// Colors and visual styles live in components/ and patterns/.
// ─────────────────────────────────────────────────────────────────────────────

// ── Page shell ────────────────────────────────────────────────────────────────
.profile-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); }

// ── Hero layout (visual rules in patterns/_surfaces.scss) ─────────────────────
.hero-inner__left  { flex: 1; min-width: 0; max-width: 600px; }

// The global .meta-item definition in _components.scss uses flex-direction:column
// for stat/label grids. Override it here so the hero's location/website items
// render as inline icon + text rows, not stacked columns.
.hero-inner__left .meta-item {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.hero-inner__right {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  flex-shrink: 0; margin-left: auto; align-self: flex-start;
  @media (max-width: 768px) { margin-left: 0; }
  @media (max-width: 480px) { grid-template-columns: 1fr; }
}
.profile-projects { position: relative; display: flex; gap: 8px; flex-wrap: wrap; padding: var(--space-3) 0 var(--space-4); max-width: 1200px; margin: 0 auto; }

// ── Section layout ─────────────────────────────────────────────────────────────
.profile-section          { display: flex; flex-direction: column; gap: var(--space-3); }
.profile-section__header  { display: flex; align-items: center; gap: var(--space-3); justify-content: space-between; flex-wrap: wrap; }
.profile-section__meta    { font-size: var(--text-sm); color: var(--text-muted); }

// ── Grids ─────────────────────────────────────────────────────────────────────
.repo-grid        { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); @media (max-width: 680px) { grid-template-columns: 1fr; } }
.attestation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); @media (max-width: 600px) { grid-template-columns: 1fr; } }

// ── Capabilities ──────────────────────────────────────────────────────────────
.caps-grid  { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.caps-meta  { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; margin-top: var(--space-2); strong { color: var(--text-primary); } }
.caps-meta__sep { color: var(--text-muted); }

// ── Activity canvas — heatmap tokens ──────────────────────────────────────────
: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, var(--color-purple) 20%, transparent);
  --hm-agent-2: color-mix(in srgb, var(--color-purple) 50%, transparent);
  --hm-agent-3: color-mix(in srgb, var(--color-purple) 85%, transparent);
}

.activity-canvas                { padding-top: var(--space-2); }
.activity-canvas__row           { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); &:last-of-type { margin-bottom: 0; } }
.activity-canvas__label         { display: flex; align-items: center; gap: 8px; min-width: 90px; flex-shrink: 0; }
.activity-canvas__domain-name   { font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-semibold); color: var(--text-secondary); }
.activity-canvas__total         { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.activity-canvas__grid          { display: flex; flex: 1; gap: 2px; }
.activity-canvas__col           { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.activity-canvas__cell          { width: 100%; height: 10px; border-radius: 2px; position: relative; cursor: default; background: var(--canvas-0); }
.activity-canvas__legend        { display: flex; align-items: center; gap: 4px; margin-top: var(--space-3); }
.activity-canvas__legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; background: var(--canvas-0); }
.activity-canvas__legend-label  { font-size: 10px; color: var(--text-muted); }

// Per-domain intensity coloring — mix with --canvas-0 (not transparent) so cells are always opaque
@mixin canvas-domain($color) {
  &[data-intensity="1"] { background: color-mix(in srgb, #{$color} 25%, var(--canvas-0)); }
  &[data-intensity="2"] { background: color-mix(in srgb, #{$color} 50%, var(--canvas-0)); }
  &[data-intensity="3"] { background: color-mix(in srgb, #{$color} 75%, var(--canvas-0)); }
  &[data-intensity="4"] { background: #{$color}; }
}

.activity-canvas__cell--code    { @include canvas-domain(var(--domain-code));    }
.activity-canvas__cell--midi    { @include canvas-domain(var(--domain-midi));    }
.activity-canvas__cell--mist    { @include canvas-domain(var(--domain-mist));    }
.activity-canvas__cell--agent   { @include canvas-domain(var(--domain-agent));   }
.activity-canvas__cell--audio   { @include canvas-domain(var(--color-warning));  }
.activity-canvas__cell--generic { @include canvas-domain(var(--domain-generic)); }

// Legend swatches mirror domain colors
.activity-canvas__legend-swatch[data-intensity="1"] { background: color-mix(in srgb, var(--domain-code) 25%, var(--canvas-0)); }
.activity-canvas__legend-swatch[data-intensity="2"] { background: color-mix(in srgb, var(--domain-code) 50%, var(--canvas-0)); }
.activity-canvas__legend-swatch[data-intensity="3"] { background: color-mix(in srgb, var(--domain-code) 75%, var(--canvas-0)); }
.activity-canvas__legend-swatch[data-intensity="4"] { background: var(--domain-code); }

// ── Repo card ─────────────────────────────────────────────────────────────────
.repo-card          { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--bg-surface); text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s, background 0.15s; &:hover { transform: translateY(-2px); border-color: var(--border-default); background: var(--bg-elevated); } }
.repo-card__header  { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.repo-card__name    { font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-primary); font-family: var(--font-mono); }
.repo-card__badges  { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.repo-card__desc    { font-size: 12px; margin: 0; line-height: 1.4; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.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); svg { opacity: 0.6; } }
.repo-tags          { display: flex; flex-wrap: wrap; gap: 4px; }

// ── Agent fleet ───────────────────────────────────────────────────────────────
.agent-fleet {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.fleet-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 168px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;

  &:hover {
    transform: translateY(-2px);
    border-color: var(--border-default);
    background: var(--bg-elevated);
  }
}

.fleet-card__sigil {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-1);
}

.fleet-card__sigil-placeholder {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-base);
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-purple) 10%, transparent);
  color: var(--color-purple);
}

.fleet-card__identity {
  min-width: 0;
}

.fleet-card__name {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fleet-card__model {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
}

.fleet-card__domains {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: var(--space-1);
}

.fleet-card__domain-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);

  &--code    { background: var(--domain-code);    }
  &--midi    { background: var(--domain-midi);    }
  &--mist    { background: var(--domain-mist);    }
  &--agent   { background: var(--domain-agent);   }
  &--audio   { background: var(--color-warning);  }
  &--generic { background: var(--domain-generic); }
}

.fleet-card__stats {
  display: flex;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.fleet-card__stat-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fleet-card__stat-val {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.fleet-card__stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fleet-card__times {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--text-muted);

  strong { color: var(--text-secondary); font-weight: var(--weight-medium); }
}

.fleet-card__time-row {
  display: block;
}

.fleet-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-1);
}

.fleet-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-base);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;

  &:hover { background: var(--bg-overlay); color: var(--text-primary); }

  &--disabled {
    color: var(--text-muted);
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
  }
}

.fleet-pagination__count {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-muted);
  padding: 0 var(--space-2);
  min-width: 5ch;
  text-align: center;
}


// ── Activity feed ─────────────────────────────────────────────────────────────
.activity-feed          { display: flex; flex-direction: column; }
.activity-event         { 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; } }
.activity-event__icon   { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bg-overlay); color: var(--text-muted); }
.activity-event__body   { flex: 1; min-width: 0; }
.activity-event__title  { font-size: 13px; display: block; margin-bottom: 3px; a { color: var(--text-primary); text-decoration: none; &:hover { text-decoration: underline; } } }
.activity-event__meta   { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.activity-event__agent  { color: var(--color-purple); }
.load-more              { display: flex; justify-content: center; padding: var(--space-4) 0; }

// ── Tab nav (wraps .tab-btn from _nav.scss) ───────────────────────────────────
.tab-nav { display: flex; gap: 0; overflow-x: auto; }

// ── Attestations ──────────────────────────────────────────────────────────────

// Two-column frame (Received | Given)
.attest-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
  @media (max-width: 680px) { grid-template-columns: 1fr; }
}

.attest-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.attest-col__label {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

// Each claim type IS its own card
.attest-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}


// Card header: pill + desc stacked
.attest-group__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-1);
}

// Pill — category-colored inline badge
.attest-group__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 3px 10px 3px 7px;
  background: var(--bg-overlay);
  color: var(--text-secondary);
  align-self: flex-start;

  svg { flex-shrink: 0; }
}

.attest-group__count {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  background: color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 10px;
  padding: 0 5px;
  line-height: 1.7;
}

// Per-category pill tint + icon color
.attest-group--identity .attest-group__pill { background: color-mix(in srgb, var(--color-accent) 12%, var(--bg-overlay)); color: var(--color-accent); }
.attest-group--trust    .attest-group__pill { background: color-mix(in srgb, var(--color-success, #4ade80) 12%, var(--bg-overlay)); color: var(--color-success, #4ade80); }
.attest-group--collab   .attest-group__pill { background: color-mix(in srgb, var(--color-warning) 12%, var(--bg-overlay)); color: var(--color-warning); }
.attest-group--code     .attest-group__pill { background: color-mix(in srgb, var(--color-purple) 12%, var(--bg-overlay)); color: var(--color-purple); }
.attest-group--music    .attest-group__pill { background: color-mix(in srgb, var(--color-accent) 12%, var(--bg-overlay)); color: var(--color-accent); }
.attest-group--skill    .attest-group__pill { background: color-mix(in srgb, var(--color-warning) 12%, var(--bg-overlay)); color: var(--color-warning); }

// Description line
.attest-group__desc {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}

.attest-group__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-2);
}

// ── Full attestation record ───────────────────────────────────────────────────

.attest-record {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 8px;
  border-radius: var(--radius-base);
  background: var(--bg-inset);
  transition: background 0.12s;
  &:hover { background: color-mix(in srgb, var(--bg-overlay) 80%, var(--bg-inset)); }
}

.attest-record__who {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

// What was attested — scope_ref for repo/commit claims
.attest-record__what {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 8px;
  border-radius: var(--radius-base);
  background: color-mix(in srgb, var(--color-purple) 6%, var(--bg-inset));
  border: 1px solid color-mix(in srgb, var(--color-purple) 20%, transparent);
}

.attest-record__what-label {
  font-size: 9px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-purple);
  flex-shrink: 0;
}

.attest-record__what-ref {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  word-break: break-all;
  line-height: 1.4;
}

// Extra claim fields (anything in the JSON beyond "type")
.attest-record__claim-extras {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.attest-record__extra-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 6px;
  align-items: baseline;
}

.attest-record__extra-key {
  font-size: 9px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.attest-record__extra-val {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

// Data grid: key | value
.attest-record__data {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding-top: 7px;
  border-top: 1px solid var(--border-subtle);
}

.attest-record__row {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: baseline;
  gap: 6px;
}

.attest-record__key {
  font-size: 9px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.6;
  padding-top: 1px;
}

.attest-record__val {
  font-size: 11px;
  font-family: var(--font-mono);
  word-break: break-all;
  line-height: 1.5;
  color: var(--text-muted);
}

// Spectral coloring per field type
.attest-record__val--id {
  color: color-mix(in srgb, var(--color-accent) 70%, var(--text-muted));
}
.attest-record__val--sig {
  color: color-mix(in srgb, var(--color-purple) 80%, var(--text-muted));
}
.attest-record__val--key {
  color: color-mix(in srgb, var(--color-success, #4ade80) 70%, var(--text-muted));
}
.attest-record__val--scope {
  color: var(--text-muted);
  font-size: 10px;
}
.attest-record__ref {
  color: var(--text-secondary);
  font-style: normal;
}

// Sigil avatar + handle link
.attest-person {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
}

.attest-sigil {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
}

.attest-handle {
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  .attest-person:hover & { text-decoration: underline; }
}

.attest-item__right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.attest-scope-badge {
  font-size: 9px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-overlay);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.attest-age {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.attest-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: var(--space-2) 0;
  font-style: italic;
}

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

// ── Roster ────────────────────────────────────────────────────────────────────
.roster          { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-default); }
.roster-table    {
  width: 100%; border-collapse: collapse; font-size: 13px;
  th { text-align: left; padding: 10px 16px; font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--bg-surface); border-bottom: 1px solid var(--border-default); }
  td { padding: 10px 16px; vertical-align: middle; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
  tr:last-child td { border-bottom: none; }
}
.roster-identity { display: flex; align-items: center; gap: var(--space-2); }
.roster-weight   { font-size: 13px; font-family: var(--font-mono); color: var(--text-secondary); }
.roster-role     { font-size: 12px; color: var(--text-muted); }

// ── DAG / commit graph (used on repo commit graph page) ───────────────────────
.graph-layout         { display: grid; grid-template-columns: 1fr 200px; gap: 0; align-items: start; @media (max-width: 768px) { grid-template-columns: 1fr; } }
.graph-main           { padding-right: var(--space-4); min-width: 0; }
.graph-viewport-card  { overflow: hidden; padding: 0; border-radius: var(--radius-base); }
.graph-legend-bar     { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-4); min-height: 38px; &--types { min-height: 34px; padding: var(--space-1) var(--space-4); } }
.graph-legend-items   { display: flex; gap: 10px; flex-wrap: wrap; }
.graph-legend-branch  { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.graph-legend-type    { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-family: var(--font-mono); }
.graph-legend-dot     { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.graph-legend-sep     { margin-left: auto; display: flex; gap: var(--space-4); font-size: 10px; flex-shrink: 0; span { display: inline-flex; align-items: center; gap: 4px; } }
.graph-viewport       { position: relative; height: calc(100vh - 300px); min-height: 480px; 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; font-size: 14px; }
.graph-empty          { padding: 60px; text-align: center; font-size: 14px; }
.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); min-height: 44px; }
.graph-ctrl-btn       { display: inline-flex; align-items: center; gap: 4px; 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); }
.graph-zoom-label     { font-size: 11px; font-family: var(--font-mono); 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; pointer-events: none; }
.graph-search-input   { border-radius: var(--radius-sm); padding: 4px 8px 4px 28px; font-size: 12px; width: 200px; transition: border-color var(--transition-fast), width var(--transition-fast); &:focus { outline: none; width: 260px; } }
.graph-search-count   { position: absolute; right: 6px; font-size: 10px; pointer-events: none; font-family: var(--font-mono); }
.graph-hint           { font-size: 10px; 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; &:last-child { border-bottom: none; } }

.dag-popover          { display: none; position: fixed; z-index: 500; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); min-width: 320px; max-width: 460px; pointer-events: none; }
.dag-pop-sha          { font-family: var(--font-mono); font-size: 12px; margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.dag-pop-sha-badge    { 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(--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(--weight-semibold); font-family: var(--font-mono); margin-right: 4px; }
.dag-pop-msg          { font-size: 14px; margin-bottom: var(--space-2); word-break: break-word; line-height: 1.5; }
.dag-pop-meta         { font-size: 12px; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.dag-pop-author-chip  { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-full); padding: 2px 8px; font-size: 11px; font-weight: var(--weight-medium); }
.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(--weight-bold); flex-shrink: 0; text-transform: uppercase; }
.dag-pop-muse         { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: var(--space-2); padding-top: var(--space-2); }
.pop-muse-badge       { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 10px; font-weight: var(--weight-semibold); font-family: var(--font-mono); }
.pop-sym-stats        { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-family: var(--font-mono); }

.branch-legend-item   { display: flex; align-items: center; gap: var(--space-2); padding: 5px 0; font-size: 12px; &:first-of-type { border-top: none; } }
.branch-legend-name   { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.branch-legend-pill   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.branch-legend-count  { margin-left: auto; font-size: 10px; font-family: var(--font-mono); }
.sidebar-branch-list      { padding: var(--space-1) 0; }
.sidebar-contributor-list { padding: var(--space-1) 0; }
.contributor-item     { display: flex; align-items: center; gap: var(--space-2); padding: 5px 0; &: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(--weight-bold); flex-shrink: 0; text-transform: uppercase; }
.contributor-name     { font-size: 12px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contributor-count    { font-size: 11px; font-family: var(--font-mono); flex-shrink: 0; }
.contributor-bar      { height: 3px; border-radius: 2px; margin: 2px 0 0; overflow: hidden; }
.contributor-bar-fill { height: 100%; border-radius: 2px; }

// ── Responsive ────────────────────────────────────────────────────────────────
@media (max-width: 768px) {
  .hero-inner__left { max-width: 100%; }
}
@media (max-width: 480px) {
  .profile-body { padding: var(--space-4) var(--space-3) var(--space-8); }
}