src/scss/pages/_profile.scss · gabriel/musehub

1

// ─────────────────────────────────────────────────────────────────────────────

2

// Page: Profile

3

// File: src/scss/pages/_profile.scss

4

//

5

// Structural layout only — zero colors, zero raw values.

6

// Colors and visual styles live in components/ and patterns/.

7

// ─────────────────────────────────────────────────────────────────────────────

8

9

// ── Page shell ────────────────────────────────────────────────────────────────

10

.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); }

11

12

// ── Hero layout (visual rules in patterns/_surfaces.scss) ─────────────────────

13

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

14

15

// The global .meta-item definition in _components.scss uses flex-direction:column

16

// for stat/label grids. Override it here so the hero's location/website items

17

// render as inline icon + text rows, not stacked columns.

18

.hero-inner__left .meta-item {

19

display: inline-flex;

flex-direction: row;

align-items: center;

gap: 5px;

font-size: var(--text-sm);

24

color: var(--text-muted);

25

}

26

.hero-inner__right {

27

display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);

28

flex-shrink: 0; margin-left: auto; align-self: flex-start;

29

@media (max-width: 768px) { margin-left: 0; }

30

@media (max-width: 480px) { grid-template-columns: 1fr; }

31

}

32

.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; }

33

34

// ── Section layout ─────────────────────────────────────────────────────────────

35

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

36

.profile-section__header { display: flex; align-items: center; gap: var(--space-3); justify-content: space-between; flex-wrap: wrap; }

37

.profile-section__meta { font-size: var(--text-sm); color: var(--text-muted); }

38

39

// ── Grids ─────────────────────────────────────────────────────────────────────

40

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

41

.attestation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); @media (max-width: 600px) { grid-template-columns: 1fr; } }

42

43

// ── Capabilities ──────────────────────────────────────────────────────────────

44

.caps-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }

45

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

46

.caps-meta__sep { color: var(--text-muted); }

47

48

// ── Activity canvas — heatmap tokens ──────────────────────────────────────────

49

:root {

50

--hm-empty: var(--bg-inset);

51

--hm-human-1: color-mix(in srgb, var(--color-accent) 20%, transparent);

52

--hm-human-2: color-mix(in srgb, var(--color-accent) 50%, transparent);

53

--hm-human-3: color-mix(in srgb, var(--color-accent) 85%, transparent);

54

--hm-agent-1: color-mix(in srgb, var(--color-purple) 20%, transparent);

55

--hm-agent-2: color-mix(in srgb, var(--color-purple) 50%, transparent);

56

--hm-agent-3: color-mix(in srgb, var(--color-purple) 85%, transparent);

57

}

58

59

.activity-canvas { padding-top: var(--space-2); }

60

.activity-canvas__row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); &:last-of-type { margin-bottom: 0; } }

61

.activity-canvas__label { display: flex; align-items: center; gap: 8px; min-width: 90px; flex-shrink: 0; }

62

.activity-canvas__domain-name { font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-semibold); color: var(--text-secondary); }

63

.activity-canvas__total { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }

64

.activity-canvas__grid { display: flex; flex: 1; gap: 2px; }

65

.activity-canvas__col { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

66

.activity-canvas__cell { width: 100%; height: 10px; border-radius: 2px; position: relative; cursor: default; background: var(--canvas-0); }

67

.activity-canvas__legend { display: flex; align-items: center; gap: 4px; margin-top: var(--space-3); }

68

.activity-canvas__legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; background: var(--canvas-0); }

69

.activity-canvas__legend-label { font-size: 10px; color: var(--text-muted); }

70

71

// Per-domain intensity coloring — mix with --canvas-0 (not transparent) so cells are always opaque

72

@mixin canvas-domain($color) {

73

&[data-intensity="1"] { background: color-mix(in srgb, #{$color} 25%, var(--canvas-0)); }

74

&[data-intensity="2"] { background: color-mix(in srgb, #{$color} 50%, var(--canvas-0)); }

75

&[data-intensity="3"] { background: color-mix(in srgb, #{$color} 75%, var(--canvas-0)); }

76

&[data-intensity="4"] { background: #{$color}; }

77

}

78

79

.activity-canvas__cell--code { @include canvas-domain(var(--domain-code)); }

80

.activity-canvas__cell--midi { @include canvas-domain(var(--domain-midi)); }

81

.activity-canvas__cell--mist { @include canvas-domain(var(--domain-mist)); }

82

.activity-canvas__cell--agent { @include canvas-domain(var(--domain-agent)); }

83

.activity-canvas__cell--audio { @include canvas-domain(var(--color-warning)); }

84

.activity-canvas__cell--generic { @include canvas-domain(var(--domain-generic)); }

85

86

// Legend swatches mirror domain colors

87

.activity-canvas__legend-swatch[data-intensity="1"] { background: color-mix(in srgb, var(--domain-code) 25%, var(--canvas-0)); }

88

.activity-canvas__legend-swatch[data-intensity="2"] { background: color-mix(in srgb, var(--domain-code) 50%, var(--canvas-0)); }

89

.activity-canvas__legend-swatch[data-intensity="3"] { background: color-mix(in srgb, var(--domain-code) 75%, var(--canvas-0)); }

90

.activity-canvas__legend-swatch[data-intensity="4"] { background: var(--domain-code); }

91

92

// ── Repo card ─────────────────────────────────────────────────────────────────

93

.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); } }

94

.repo-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }

95

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

96

.repo-card__badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

97

.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; }

98

.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; } }

99

.repo-tags { display: flex; flex-wrap: wrap; gap: 4px; }

100

101

// ── Agent fleet ───────────────────────────────────────────────────────────────

.agent-fleet {

display: flex;

flex-wrap: wrap;

gap: var(--space-3);

}

.fleet-card {

display: flex;

flex-direction: column;

111

gap: var(--space-2);

112

width: 168px;

113

padding: var(--space-4);

114

border-radius: var(--radius-md);

115

border: 1px solid var(--border-subtle);

116

background: var(--bg-surface);

117

text-decoration: none;

118

color: inherit;

119

transition: border-color 0.15s, transform 0.15s, background 0.15s;

120

121

&:hover {

122

transform: translateY(-2px);

123

border-color: var(--border-default);

124

background: var(--bg-elevated);

}

}

.fleet-card__sigil {

width: 56px;

height: 56px;

margin-bottom: var(--space-1);

132

}

133

134

.fleet-card__sigil-placeholder {

135

width: 56px;

136

height: 56px;

137

border-radius: var(--radius-base);

138

display: flex;

139

align-items: center;

140

justify-content: center;

141

background: color-mix(in srgb, var(--color-purple) 10%, transparent);

142

color: var(--color-purple);

143

}

144

145

.fleet-card__identity {

min-width: 0;

}

.fleet-card__name {

font-size: 13px;

font-weight: var(--weight-semibold);

152

color: var(--text-primary);

153

white-space: nowrap;

154

overflow: hidden;

155

text-overflow: ellipsis;

}

.fleet-card__model {

font-size: 11px;

color: var(--text-muted);

161

font-family: var(--font-mono);

margin-top: 2px;

}

.fleet-card__domains {

display: flex;

gap: 5px;

flex-wrap: wrap;

margin-top: var(--space-1);

170

}

171

172

.fleet-card__domain-dot {

width: 8px;

height: 8px;

border-radius: 50%;

background: var(--text-muted);

177

178

&--code { background: var(--domain-code); }

179

&--midi { background: var(--domain-midi); }

180

&--mist { background: var(--domain-mist); }

181

&--agent { background: var(--domain-agent); }

182

&--audio { background: var(--color-warning); }

183

&--generic { background: var(--domain-generic); }

}

.fleet-card__stats {

display: flex;

gap: var(--space-3);

margin-top: auto;

padding-top: var(--space-2);

191

border-top: 1px solid var(--border-subtle);

192

}

193

194

.fleet-card__stat-row {

195

display: flex;

196

flex-direction: column;

gap: 1px;

}

.fleet-card__stat-val {

201

font-size: 13px;

202

font-weight: var(--weight-semibold);

203

color: var(--text-primary);

204

font-family: var(--font-mono);

205

}

206

207

.fleet-card__stat-label {

208

font-size: 10px;

209

color: var(--text-muted);

210

text-transform: uppercase;

211

letter-spacing: 0.04em;

}

.fleet-card__times {

display: flex;

flex-direction: column;

217

gap: 2px;

218

font-size: 11px;

219

color: var(--text-muted);

220

221

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

222

}

223

224

.fleet-card__time-row {

display: block;

}

.fleet-pagination {

display: flex;

align-items: center;

justify-content: center;

232

gap: var(--space-2);

233

padding: var(--space-3) 0 var(--space-1);

234

}

235

236

.fleet-pagination__btn {

237

display: inline-flex;

238

align-items: center;

239

justify-content: center;

240

width: 28px;

241

height: 28px;

242

border-radius: var(--radius-base);

243

color: var(--text-secondary);

244

text-decoration: none;

245

transition: color 0.15s, background 0.15s;

246

247

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

248

249

&--disabled {

250

color: var(--text-muted);

251

opacity: 0.35;

252

cursor: default;

253

pointer-events: none;

}

}

.fleet-pagination__count {

258

font-size: var(--text-xs);

259

font-family: var(--font-mono);

260

color: var(--text-muted);

261

padding: 0 var(--space-2);

min-width: 5ch;

text-align: center;

}

// ── Activity feed ─────────────────────────────────────────────────────────────

268

.activity-feed { display: flex; flex-direction: column; }

269

.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; } }

270

.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); }

271

.activity-event__body { flex: 1; min-width: 0; }

272

.activity-event__title { font-size: 13px; display: block; margin-bottom: 3px; a { color: var(--text-primary); text-decoration: none; &:hover { text-decoration: underline; } } }

273

.activity-event__meta { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

274

.activity-event__agent { color: var(--color-purple); }

275

.load-more { display: flex; justify-content: center; padding: var(--space-4) 0; }

276

277

// ── Tab nav (wraps .tab-btn from _nav.scss) ───────────────────────────────────

278

.tab-nav { display: flex; gap: 0; overflow-x: auto; }

279

280

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

281

282

// Two-column frame (Received | Given)

283

.attest-cols {

284

display: grid;

285

grid-template-columns: 1fr 1fr;

286

gap: var(--space-5);

287

align-items: start;

288

@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);

300

text-transform: uppercase;

301

letter-spacing: 0.07em;

302

color: var(--text-muted);

303

}

304

305

// Each claim type IS its own card

306

.attest-group {

307

display: flex;

308

flex-direction: column;

309

gap: var(--space-2);

310

padding: var(--space-3) var(--space-3) var(--space-2);

311

border-radius: var(--radius-md);

312

border: 1px solid var(--border-subtle);

313

background: var(--bg-surface);

}

// Card header: pill + desc stacked

318

.attest-group__header {

319

display: flex;

320

flex-direction: column;

321

gap: 4px;

322

margin-bottom: var(--space-1);

323

}

324

325

// Pill — category-colored inline badge

326

.attest-group__pill {

327

display: inline-flex;

align-items: center;

gap: 5px;

font-size: 11px;

font-weight: var(--weight-semibold);

332

letter-spacing: 0.04em;

333

text-transform: uppercase;

334

border-radius: 20px;

335

padding: 3px 10px 3px 7px;

336

background: var(--bg-overlay);

337

color: var(--text-secondary);

338

align-self: flex-start;

339

340

svg { flex-shrink: 0; }

341

}

342

343

.attest-group__count {

344

font-size: 10px;

345

font-weight: var(--weight-semibold);

346

background: color-mix(in srgb, currentColor 18%, transparent);

border-radius: 10px;

padding: 0 5px;

line-height: 1.7;

}

// Per-category pill tint + icon color

353

.attest-group--identity .attest-group__pill { background: color-mix(in srgb, var(--color-accent) 12%, var(--bg-overlay)); color: var(--color-accent); }

354

.attest-group--trust .attest-group__pill { background: color-mix(in srgb, var(--color-success, #4ade80) 12%, var(--bg-overlay)); color: var(--color-success, #4ade80); }

355

.attest-group--collab .attest-group__pill { background: color-mix(in srgb, var(--color-warning) 12%, var(--bg-overlay)); color: var(--color-warning); }

356

.attest-group--code .attest-group__pill { background: color-mix(in srgb, var(--color-purple) 12%, var(--bg-overlay)); color: var(--color-purple); }

357

.attest-group--music .attest-group__pill { background: color-mix(in srgb, var(--color-accent) 12%, var(--bg-overlay)); color: var(--color-accent); }

358

.attest-group--skill .attest-group__pill { background: color-mix(in srgb, var(--color-warning) 12%, var(--bg-overlay)); color: var(--color-warning); }

359

360

// Description line

361

.attest-group__desc {

362

font-size: 11px;

363

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;

375

gap: 3px;

376

border-top: 1px solid var(--border-subtle);

377

padding-top: var(--space-2);

378

}

379

380

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

.attest-record {

display: flex;

flex-direction: column;

385

gap: 8px;

386

padding: 10px 10px 8px;

387

border-radius: var(--radius-base);

388

background: var(--bg-inset);

389

transition: background 0.12s;

390

&:hover { background: color-mix(in srgb, var(--bg-overlay) 80%, var(--bg-inset)); }

391

}

392

393

.attest-record__who {

394

display: flex;

395

align-items: center;

396

justify-content: space-between;

gap: var(--space-2);

}

// What was attested — scope_ref for repo/commit claims

401

.attest-record__what {

402

display: flex;

403

align-items: baseline;

404

gap: 6px;

405

padding: 5px 8px;

406

border-radius: var(--radius-base);

407

background: color-mix(in srgb, var(--color-purple) 6%, var(--bg-inset));

408

border: 1px solid color-mix(in srgb, var(--color-purple) 20%, transparent);

409

}

410

411

.attest-record__what-label {

412

font-size: 9px;

413

font-family: var(--font-mono);

414

text-transform: uppercase;

415

letter-spacing: 0.08em;

416

color: var(--color-purple);

flex-shrink: 0;

}

.attest-record__what-ref {

421

font-size: 11px;

422

font-family: var(--font-mono);

423

color: var(--text-secondary);

424

word-break: break-all;

line-height: 1.4;

}

// Extra claim fields (anything in the JSON beyond "type")

429

.attest-record__claim-extras {

430

display: flex;

431

flex-direction: column;

gap: 3px;

}

.attest-record__extra-row {

436

display: grid;

437

grid-template-columns: 80px 1fr;

438

gap: 6px;

439

align-items: baseline;

440

}

441

442

.attest-record__extra-key {

443

font-size: 9px;

444

font-family: var(--font-mono);

445

text-transform: uppercase;

446

letter-spacing: 0.06em;

447

color: var(--text-muted);

448

}

449

450

.attest-record__extra-val {

451

font-size: 12px;

452

color: var(--text-secondary);

line-height: 1.4;

}

// Data grid: key | value

457

.attest-record__data {

458

display: flex;

459

flex-direction: column;

gap: 3px;

margin: 0;

padding-top: 7px;

border-top: 1px solid var(--border-subtle);

464

}

465

466

.attest-record__row {

467

display: grid;

468

grid-template-columns: 36px 1fr;

469

align-items: baseline;

gap: 6px;

}

.attest-record__key {

474

font-size: 9px;

475

font-family: var(--font-mono);

476

text-transform: uppercase;

477

letter-spacing: 0.08em;

478

color: var(--text-muted);

opacity: 0.6;

padding-top: 1px;

}

.attest-record__val {

484

font-size: 11px;

485

font-family: var(--font-mono);

486

word-break: break-all;

487

line-height: 1.5;

488

color: var(--text-muted);

489

}

490

491

// Spectral coloring per field type

492

.attest-record__val--id {

493

color: color-mix(in srgb, var(--color-accent) 70%, var(--text-muted));

494

}

495

.attest-record__val--sig {

496

color: color-mix(in srgb, var(--color-purple) 80%, var(--text-muted));

497

}

498

.attest-record__val--key {

499

color: color-mix(in srgb, var(--color-success, #4ade80) 70%, var(--text-muted));

500

}

501

.attest-record__val--scope {

502

color: var(--text-muted);

503

font-size: 10px;

504

}

505

.attest-record__ref {

506

color: var(--text-secondary);

font-style: normal;

}

// Sigil avatar + handle link

511

.attest-person {

512

display: inline-flex;

513

align-items: center;

514

gap: 7px;

515

text-decoration: none;

min-width: 0;

overflow: hidden;

}

.attest-sigil {

width: 20px;

height: 20px;

border-radius: 50%;

flex-shrink: 0;

background: var(--bg-overlay);

526

border: 1px solid var(--border-subtle);

}

.attest-handle {

font-size: 12px;

font-weight: var(--weight-medium);

532

color: var(--color-accent);

533

white-space: nowrap;

534

overflow: hidden;

535

text-overflow: ellipsis;

536

.attest-person:hover & { text-decoration: underline; }

537

}

538

539

.attest-item__right {

display: flex;

align-items: center;

gap: 5px;

flex-shrink: 0;

}

.attest-scope-badge {

547

font-size: 9px;

548

font-weight: var(--weight-semibold);

549

text-transform: uppercase;

550

letter-spacing: 0.05em;

551

padding: 1px 5px;

552

border-radius: 4px;

553

background: var(--bg-overlay);

554

color: var(--text-muted);

555

border: 1px solid var(--border-subtle);

}

.attest-age {

font-size: 10px;

color: var(--text-muted);

561

white-space: nowrap;

562

flex-shrink: 0;

563

font-family: var(--font-mono);

}

.attest-empty {

font-size: 12px;

color: var(--text-muted);

569

padding: var(--space-2) 0;

font-style: italic;

}

// ── Provenance chain ──────────────────────────────────────────────────────────

574

.provenance { display: flex; flex-direction: column; gap: var(--space-1); }

575

.prov-node { display: flex; flex-direction: column; gap: 2px; }

576

.prov-node__indent { display: flex; align-items: center; gap: var(--space-2); padding-left: calc(var(--prov-indent, 0) * 20px); }

577

.prov-connector { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

578

.prov-icon { display: flex; align-items: center; color: var(--text-muted); }

579

.prov-handle { font-weight: var(--weight-semibold); font-size: 13px; color: var(--color-accent); text-decoration: none; &:hover { text-decoration: underline; } }

580

.prov-root-label { font-size: 11px; color: var(--text-muted); font-style: italic; }

581

.prov-annotation { font-size: 11px; color: var(--text-muted); font-style: italic; }

582

583

// ── Roster ────────────────────────────────────────────────────────────────────

584

.roster { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-default); }

585

.roster-table {

586

width: 100%; border-collapse: collapse; font-size: 13px;

587

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); }

588

td { padding: 10px 16px; vertical-align: middle; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }

589

tr:last-child td { border-bottom: none; }

590

}

591

.roster-identity { display: flex; align-items: center; gap: var(--space-2); }

592

.roster-weight { font-size: 13px; font-family: var(--font-mono); color: var(--text-secondary); }

593

.roster-role { font-size: 12px; color: var(--text-muted); }

594

595

// ── DAG / commit graph (used on repo commit graph page) ───────────────────────

596

.graph-layout { display: grid; grid-template-columns: 1fr 200px; gap: 0; align-items: start; @media (max-width: 768px) { grid-template-columns: 1fr; } }

597

.graph-main { padding-right: var(--space-4); min-width: 0; }

598

.graph-viewport-card { overflow: hidden; padding: 0; border-radius: var(--radius-base); }

599

.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); } }

600

.graph-legend-items { display: flex; gap: 10px; flex-wrap: wrap; }

601

.graph-legend-branch { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }

602

.graph-legend-type { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-family: var(--font-mono); }

603

.graph-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

604

.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; } }

605

.graph-viewport { position: relative; height: calc(100vh - 300px); min-height: 480px; overflow: hidden; }

606

.graph-canvas { display: block; position: absolute; top: 0; left: 0; cursor: grab; &:active { cursor: grabbing; } }

607

.graph-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; }

608

.graph-empty { padding: 60px; text-align: center; font-size: 14px; }

609

.dag-minimap { position: absolute; bottom: 8px; right: 8px; border-radius: 6px; cursor: pointer; opacity: 0.9; transition: opacity 0.2s; &:hover { opacity: 1; } }

610

.graph-controls { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3); min-height: 44px; }

611

.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); }

612

.graph-zoom-label { font-size: 11px; font-family: var(--font-mono); min-width: 36px; text-align: center; }

613

.graph-search-wrap { position: relative; display: flex; align-items: center; margin-left: var(--space-2); }

614

.graph-search-icon { position: absolute; left: 8px; pointer-events: none; }

615

.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; } }

616

.graph-search-count { position: absolute; right: 6px; font-size: 10px; pointer-events: none; font-family: var(--font-mono); }

617

.graph-hint { font-size: 10px; margin-left: auto; }

618

.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; } }

619

.graph-sidebar-section { padding: var(--space-3) 0; &:last-child { border-bottom: none; } }

620

621

.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; }

622

.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); }

623

.dag-pop-sha-badge { border-radius: var(--radius-sm); padding: 1px 6px; }

624

.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; }

625

.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; }

626

.dag-pop-msg { font-size: 14px; margin-bottom: var(--space-2); word-break: break-word; line-height: 1.5; }

627

.dag-pop-meta { font-size: 12px; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

628

.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); }

629

.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; }

630

.dag-pop-muse { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: var(--space-2); padding-top: var(--space-2); }

631

.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); }

632

.pop-sym-stats { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-family: var(--font-mono); }

633

634

.branch-legend-item { display: flex; align-items: center; gap: var(--space-2); padding: 5px 0; font-size: 12px; &:first-of-type { border-top: none; } }

635

.branch-legend-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

636

.branch-legend-pill { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

637

.branch-legend-count { margin-left: auto; font-size: 10px; font-family: var(--font-mono); }

638

.sidebar-branch-list { padding: var(--space-1) 0; }

639

.sidebar-contributor-list { padding: var(--space-1) 0; }

640

.contributor-item { display: flex; align-items: center; gap: var(--space-2); padding: 5px 0; &:first-of-type { border-top: none; } }

641

.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; }

642

.contributor-name { font-size: 12px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

643

.contributor-count { font-size: 11px; font-family: var(--font-mono); flex-shrink: 0; }

644

.contributor-bar { height: 3px; border-radius: 2px; margin: 2px 0 0; overflow: hidden; }

645

.contributor-bar-fill { height: 100%; border-radius: 2px; }

646

647

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

648

@media (max-width: 768px) {

649

.hero-inner__left { max-width: 100%; }

650

}

651

@media (max-width: 480px) {

652

.profile-body { padding: var(--space-4) var(--space-3) var(--space-8); }

653

}