src/scss/_user-profile.scss · gabriel/musehub

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

318

.fork-svg { display: block; overflow: visible; }

319

.fork-node-label { font-family: var(--font-mono); font-size: 11px; fill: var(--text-primary); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }

320

.fork-node-sub { font-size: 10px; fill: var(--text-muted); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }

321

.legend-swatch { display: inline-block; width: 28px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }

322

#fork-detail { margin-top: 16px; display: none; }

323

.fork-card { background: var(--bg-overlay); border: 1px solid var(--border-default); border-radius: 8px; padding: 16px 20px; }

324

.fork-card-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }

325

.fork-card-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }

326

.fork-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

327

.stats-bar { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); }

328

.stat { display: flex; align-items: center; gap: 4px; }

329

.stat-count { font-weight: 600; color: var(--text-primary); }

330

.fork-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 16px; }

331

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

332

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

333

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

334

.fork-table tr:hover td { background: rgba(255,255,255,0.03); }

335

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

336

337

338

/* =========================================================================

339

User profile page (.prof-* prefix)

340

========================================================================= */

341

342

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

343

.prof-page { min-height: 100vh; }

344

.prof-body {

345

max-width: 1200px; margin: 0 auto;

346

padding: var(--space-5) var(--space-6) var(--space-10);

347

display: flex; flex-direction: column; gap: var(--space-5);

348

}

349

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

350

.prof-section-header { display: flex; align-items: center; gap: var(--space-3); justify-content: space-between; }

351

.prof-section-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0; }

352

.prof-section-meta { font-size: 12px; color: var(--text-muted); }

353

.prof-loading { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; padding: var(--space-4); }

354

.prof-error { color: var(--color-danger); padding: var(--space-4); font-size: 13px; }

355

.prof-tab-empty { color: var(--text-muted); text-align: center; padding: var(--space-6); font-size: 13px; }

356

.prof-tab-error { color: var(--color-danger); padding: var(--space-4); font-size: 13px; }

357

358

// ── Hero — full-bleed dark gradient, MCP/domains/issue style ──────────────────

359

.prof-hero {

360

position: relative;

361

border-bottom: 1px solid var(--border-default);

362

overflow: hidden;

363

&--human { background: linear-gradient(135deg, #0d1117 0%, #0f1923 55%, #0d1117 100%); }

364

&--agent { background: linear-gradient(135deg, #0d1117 0%, #110f1f 55%, #0d1117 100%); }

365

&--org { background: linear-gradient(135deg, #0d1117 0%, #161205 55%, #0d1117 100%); }

}

.prof-hero-glow {

position: absolute; inset: 0; pointer-events: none;

370

&--human {

371

background:

372

radial-gradient(ellipse 60% 80% at 78% 40%, rgba(56,189,248,0.08) 0%, transparent 65%),

373

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%),

378

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%),

383

radial-gradient(ellipse 35% 55% at 8% 75%, rgba(52,211,153,0.05) 0%, transparent 60%);

}

}

// Inner row: left body + right stat pills

388

.prof-hero-inner {

389

position: relative;

390

display: flex; justify-content: space-between; align-items: flex-start;

391

gap: var(--space-6);

392

padding: var(--space-7) var(--space-6) var(--space-5);

393

max-width: 1200px; margin: 0 auto;

394

@media (max-width: 768px) { flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-4) var(--space-4); }

395

}

396

397

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

398

399

// Eyebrow: type badge · @handle · verified

400

.prof-hero-eyebrow {

401

display: flex; align-items: center; gap: var(--space-2);

402

margin-bottom: var(--space-3); flex-wrap: wrap;

403

}

404

.prof-hero-handle {

405

font-size: 12px; font-family: var(--font-mono); color: var(--text-muted);

406

}

407

.prof-hero-verified {

408

display: inline-flex; align-items: center; gap: 4px;

409

font-size: 11px; font-weight: 600; color: var(--color-success);

410

svg { flex-shrink: 0; }

411

}

412

413

// Large display name

414

.prof-display-name {

415

font-size: clamp(24px, 3.5vw, 36px); font-weight: 800;

416

line-height: 1.15; letter-spacing: -0.02em;

417

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

423

&--muted { color: var(--text-muted); }

424

}

425

426

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

427

428

// Meta items (location / social / website)

429

.prof-meta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

430

.prof-meta-item {

431

display: inline-flex; align-items: center; gap: 5px;

432

font-size: 12px; color: var(--text-muted);

433

a { color: var(--text-secondary); text-decoration: none; &:hover { color: var(--text-primary); } }

434

}

435

436

// Right stat pills (stacked column, like dm/mcp)

437

.prof-hero-right {

438

display: flex; flex-direction: column; gap: var(--space-2); flex-shrink: 0;

439

@media (max-width: 768px) { flex-direction: row; flex-wrap: wrap; }

440

}

441

.prof-stat-pill {

442

display: flex; align-items: center; gap: 10px;

443

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

444

border-radius: var(--radius-sm); padding: 9px 14px; min-width: 130px;

445

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

446

}

447

.prof-stat-pill__num {

448

font-family: var(--font-mono); font-size: 18px; font-weight: 700;

449

color: var(--text-primary); line-height: 1;

450

}

451

.prof-stat-pill__label {

452

font-size: 11px; font-weight: 500; color: var(--text-muted);

453

text-transform: uppercase; letter-spacing: 0.06em;

454

}

455

456

// Bottom strip: AVAX / trust chain / treasury + key metadata

457

.prof-hero-strip {

458

position: relative;

459

display: flex; flex-wrap: wrap; align-items: center;

460

gap: 0 var(--space-3);

461

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

462

border-top: 1px solid rgba(255,255,255,0.06);

463

max-width: 1200px; margin: 0 auto;

464

font-size: 12px;

465

}

466

.prof-strip-item { display: flex; align-items: center; gap: 6px; }

467

.prof-strip-label {

468

font-size: 10px; font-weight: 600; text-transform: uppercase;

469

letter-spacing: 0.06em; color: var(--text-muted);

470

}

471

.prof-strip-val { font-size: 11px; color: var(--color-accent); font-family: var(--font-mono); }

472

.prof-strip-sep { color: var(--border-default); }

473

.prof-strip-badge {

474

display: inline-flex; align-items: center; gap: 4px;

475

font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 4px;

476

background: rgba(255,255,255,0.04); color: var(--text-muted);

477

border: 1px solid rgba(255,255,255,0.08);

478

}

479

480

// Repo chips — inside hero, below strip, dark bg

481

.prof-projects {

482

position: relative;

483

display: flex; gap: 8px; flex-wrap: wrap;

484

padding: var(--space-3) var(--space-6) var(--space-4);

485

border-top: 1px solid rgba(255,255,255,0.04);

486

max-width: 1200px; margin: 0 auto;

487

}

488

.prof-project-chip {

489

display: inline-flex; align-items: center; gap: 5px;

490

font-size: 11px; font-weight: 600; font-family: var(--font-mono);

491

padding: 4px 10px; border-radius: 20px; text-decoration: none;

492

background: rgba(255,255,255,0.04); color: var(--text-muted);

493

border: 1px solid rgba(255,255,255,0.08);

494

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

495

&:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.07); }

496

}

497

.prof-project-chip__icon { display: flex; align-items: center; }

// Capabilities

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

502

.prof-cap {

503

display: inline-flex; align-items: center; gap: 5px;

504

font-size: 11px; font-family: var(--font-mono); padding: 3px 10px; border-radius: 4px;

505

&--granted { background: rgba(52,211,153,0.12); color: var(--color-success); border: 1px solid rgba(52,211,153,0.2); }

506

}

507

.prof-caps-meta {

508

display: flex; align-items: center; gap: var(--space-2);

509

font-size: 12px; color: var(--text-muted); margin-top: var(--space-2);

510

strong { color: var(--text-primary); }

511

}

512

.prof-caps-meta__sep { color: var(--border-default); }

513

514

// Activity canvas (multi-domain heatmap)

515

.prof-canvas {

516

background: var(--bg-surface); border: 1px solid var(--border-default);

517

border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto;

518

}

519

.prof-canvas__row {

520

display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2);

521

&:last-of-type { margin-bottom: 0; }

522

}

523

.prof-canvas__label { display: flex; align-items: center; gap: 8px; min-width: 80px; }

524

.prof-canvas__domain-name {

525

font-size: 10px; font-weight: 700; text-transform: uppercase;

526

letter-spacing: 0.04em; font-family: var(--font-mono);

527

&--code { color: #34d399; }

528

&--midi { color: #a78bfa; }

529

&--audio { color: #fbbf24; }

530

}

531

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

532

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

533

.prof-canvas__col { display: flex; flex-direction: column; gap: 2px; }

534

.prof-canvas__cell {

535

width: 10px; height: 10px; border-radius: 1px; flex-shrink: 0;

536

&[data-intensity="0"] { background: var(--bg-inset); }

537

&--code {

538

&[data-intensity="1"] { background: rgba(52,211,153,0.25); }

539

&[data-intensity="2"] { background: rgba(52,211,153,0.55); }

540

&[data-intensity="3"] { background: rgba(52,211,153,0.85); }

541

&[data-intensity="4"] { background: #34d399; }

542

}

543

&--midi {

544

&[data-intensity="1"] { background: rgba(167,139,250,0.25); }

545

&[data-intensity="2"] { background: rgba(167,139,250,0.55); }

546

&[data-intensity="3"] { background: rgba(167,139,250,0.85); }

547

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

548

}

549

&--audio {

550

&[data-intensity="1"] { background: rgba(251,191,36,0.25); }

551

&[data-intensity="2"] { background: rgba(251,191,36,0.55); }

552

&[data-intensity="3"] { background: rgba(251,191,36,0.85); }

553

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

554

}

555

}

556

.prof-canvas__peak { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; }

557

.prof-canvas__legend { display: flex; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; }

558

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

563

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

564

}

565

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

566

.prof-attest-col__header {

567

font-size: 12px; font-weight: 600; color: var(--text-muted);

568

padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle);

569

}

570

.prof-attest-row { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--text-secondary); padding: 4px 0; }

571

.prof-attest-claim { color: var(--text-muted); font-style: italic; }

572

.prof-attest-age { font-size: 11px; color: var(--text-muted); margin-left: auto; }

573

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

574

575

// Provenance chain

576

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

577

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

578

.prof-prov-node__indent {

579

display: flex; align-items: center; gap: var(--space-2);

580

padding-left: calc(var(--prof-indent, 0) * 20px);

581

}

582

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

583

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

584

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

585

.prof-prov-root-label {

586

font-size: 10px; color: var(--text-muted);

587

background: var(--bg-overlay); border: 1px solid var(--border-subtle);

588

padding: 1px 6px; border-radius: 4px;

589

}

590

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

591

592

// Fleet container

593

.prof-fleet { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-1); }

594

.prof-fleet-card__sep { color: var(--border-default); }

595

596

// Heatmap legend swatches (avoids inline styles)

597

.prof-heatmap-swatch--human { background: var(--hm-human-3); }

598

.prof-heatmap-swatch--agent { background: var(--hm-agent-3); }

599

.prof-hm-stat-sep { color: var(--border-default); }

600

601

// Repo card tags wrapper

602

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

603

604

// Footprint simple list

605

.prof-footprint { display: flex; flex-direction: column; }

606

.prof-footprint__item {

607

display: flex; align-items: center; gap: var(--space-3); padding: 6px 0;

608

border-bottom: 1px solid var(--border-subtle); font-size: 12px;

609

&:last-child { border-bottom: none; }

610

}

611

.prof-footprint__repo { color: var(--color-accent); text-decoration: none; font-family: var(--font-mono); font-size: 11px; &:hover { text-decoration: underline; } }

612

.prof-footprint__sym { flex: 1; font-family: var(--font-mono); color: var(--text-primary); font-size: 11px; }

613

.prof-footprint__changes { color: var(--text-muted); font-size: 11px; white-space: nowrap; }

614

615

// Activity feed

616

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

617

.prof-evt {

618

display: flex; align-items: flex-start; gap: var(--space-3);

619

padding: 10px 0; border-bottom: 1px solid var(--border-subtle);

620

&:last-child { border-bottom: none; }

621

&--commit .prof-evt__icon { color: var(--text-muted); }

622

&--proposal .prof-evt__icon { color: var(--color-success); }

623

&--issue .prof-evt__icon { color: var(--color-warning); }

624

&--release .prof-evt__icon { color: var(--color-accent); }

625

}

626

.prof-evt__icon {

627

width: 28px; height: 28px; border-radius: 50%;

628

background: var(--bg-overlay); display: flex; align-items: center;

629

justify-content: center; flex-shrink: 0; color: var(--text-muted);

630

}

631

.prof-evt__body { flex: 1; min-width: 0; }

632

.prof-evt__title {

633

font-size: 13px; color: var(--text-primary); display: block; margin-bottom: 3px;

634

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

635

}

636

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

637

.prof-evt__agent { color: var(--color-accent); }

638

639

// Load more

640

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

641

.prof-load-more__btn {

642

padding: 8px 24px; border-radius: var(--radius-sm);

643

border: 1px solid var(--border-default); background: var(--bg-surface);

644

color: var(--text-secondary); font-size: 13px; text-decoration: none;

645

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

646

&: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; }

651

.prof-roster-table {

652

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

653

th {

654

text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--border-default);

655

font-size: 11px; font-weight: 600; color: var(--text-muted);

656

text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-surface);

657

}

658

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

659

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

660

tr:hover td { background: var(--bg-overlay); }

661

}

662

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

663

.prof-roster-role { font-size: 11px; color: var(--text-muted); background: var(--bg-overlay); padding: 2px 8px; border-radius: 10px; }

664

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

665

.prof-avatar--xs {

666

width: 28px; height: 28px; font-size: 12px; border-radius: 50%;

667

display: flex; align-items: center; justify-content: center;

668

font-weight: 700; color: #fff; flex-shrink: 0; text-transform: uppercase;

669

}

670

671

// Section header shorthand (pid compat)

672

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

673

674

// ── Domain stats bar ──────────────────────────────────────────────────────────

675

.prof-domain-bar { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }

676

.prof-dstat-card {

677

display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4);

678

background: var(--bg-surface); border: 1px solid var(--border-default);

679

border-radius: var(--radius-md); border-left: 3px solid var(--dstat-color);

680

transition: transform 0.15s; &:hover { transform: translateY(-1px); }

681

}

682

.prof-dstat-icon {

683

font-size: 22px; width: 36px; height: 36px; flex-shrink: 0;

684

display: flex; align-items: center; justify-content: center;

685

background: color-mix(in srgb, var(--dstat-color) 12%, transparent); border-radius: var(--radius-sm);

686

}

687

.prof-dstat-body { flex: 1; min-width: 0; }

688

.prof-dstat-name { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }

689

.prof-dstat-label { font-size: 14px; font-weight: 600; color: var(--text-primary); }

690

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

691

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

692

.prof-dstat-dot { color: var(--border-default); }

693

.prof-dstat-pct { color: var(--dstat-color); }

694

.prof-dstat-bar-track { height: 4px; background: var(--border-subtle); border-radius: 2px; overflow: hidden; }

695

.prof-dstat-bar { height: 100%; border-radius: 2px; transition: width 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

696

697

// ── Multi-domain heatmap ──────────────────────────────────────────────────────

698

.prof-heatmap-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4); }

699

.prof-heatmap-months { position: relative; height: 18px; margin-left: 28px; margin-bottom: 4px; }

700

.prof-heatmap-month { position: absolute; font-size: 10px; color: var(--text-muted); white-space: nowrap; transform: translateX(-50%); }

701

.prof-heatmap-grid { display: flex; gap: 3px; overflow-x: auto; }

702

.prof-heatmap-days { display: flex; flex-direction: column; gap: 2px; margin-right: 4px; flex-shrink: 0; padding-top: 2px; }

703

.prof-heatmap-daylbl { font-size: 9px; color: var(--text-muted); height: 12px; line-height: 12px; width: 22px; text-align: right; }

704

.prof-heatmap-cols { display: flex; gap: 2px; }

705

.prof-heatmap-col { display: flex; flex-direction: column; gap: 2px; }

706

.prof-heatmap-cell {

707

width: 12px; height: 12px; border-radius: 2px; cursor: help; flex-shrink: 0;

708

transition: transform 0.1s, opacity 0.1s; &:hover { transform: scale(1.4); opacity: 0.9; }

709

}

710

.prof-heatmap-stats {

711

display: flex; align-items: center; gap: 8px; margin-top: var(--space-3);

712

font-size: 11px; color: var(--text-muted); flex-wrap: wrap; strong { color: var(--text-primary); }

713

}

714

.prof-hm-stat-dot { color: var(--border-default); }

715

.prof-heatmap-legend { display: flex; gap: 12px; flex-wrap: wrap; }

716

.prof-heatmap-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); }

717

.prof-heatmap-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

718

719

// ── Pinned repos ──────────────────────────────────────────────────────────────

720

.prof-pinned-grid {

721

display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);

722

@media (max-width: 900px) { grid-template-columns: repeat(2, 1fr); }

723

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

724

}

725

.prof-pinned-card {

726

display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);

727

background: var(--bg-surface); border: 1px solid var(--border-default);

728

border-radius: var(--radius-md); text-decoration: none;

729

transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;

730

&:hover {

731

border-color: var(--card-accent); transform: translateY(-2px);

732

box-shadow: 0 4px 16px rgba(0,0,0,0.25);

733

.prof-pinned-view-arrow { transform: translateX(3px); opacity: 1; }

734

}

735

}

736

.prof-pinned-card__header { display: flex; align-items: center; justify-content: space-between; }

737

.prof-pinned-domain-badge {

738

display: inline-flex; align-items: center; gap: 4px;

739

font-size: 10px; font-weight: 600; font-family: var(--font-mono);

740

padding: 2px 8px; border-radius: 4px; border: 1px solid transparent;

741

}

742

.prof-pinned-card__body { flex: 1; }

743

.prof-pinned-name { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }

744

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

745

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

746

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

747

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

748

.prof-pinned-stat { display: inline-flex; align-items: center; gap: 3px; }

749

.prof-pinned-view-arrow { margin-left: auto; color: var(--card-accent); font-size: 14px; opacity: 0.4; transition: transform 0.15s, opacity 0.15s; }

750

751

// ── Achievements ──────────────────────────────────────────────────────────────

752

.prof-achievements-row {

753

display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);

754

@media (max-width: 800px) { grid-template-columns: repeat(2, 1fr); }

755

}

756

.prof-badge {

757

display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4);

758

border-radius: var(--radius-md); border: 1px solid var(--border-default);

759

background: var(--bg-surface); position: relative; transition: border-color 0.15s, transform 0.15s;

760

&--earned { border-color: var(--badge-color); background: color-mix(in srgb, var(--badge-color) 6%, var(--bg-surface)); &:hover { transform: translateY(-1px); } }

761

&--locked { opacity: 0.45; }

762

}

763

.prof-badge__icon {

764

font-size: 22px; width: 44px; height: 44px; flex-shrink: 0;

765

display: flex; align-items: center; justify-content: center;

766

background: color-mix(in srgb, var(--badge-color) 12%, transparent); border-radius: var(--radius-sm);

767

.prof-badge--locked & { filter: grayscale(1); }

768

}

769

.prof-badge__body { flex: 1; min-width: 0; }

770

.prof-badge__name { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }

771

.prof-badge__desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

772

.prof-badge__check { position: absolute; top: 8px; right: 8px; color: var(--badge-color); font-size: 12px; font-weight: 700; }

773

.prof-badge__lock { position: absolute; top: 8px; right: 8px; font-size: 11px; opacity: 0.5; }

774

775

// ── Tabs ──────────────────────────────────────────────────────────────────────

776

.prof-tabs-section { gap: 0; }

777

.prof-tab-nav { display: flex; border-bottom: 1px solid var(--border-default); gap: 0; margin-bottom: var(--space-4); overflow-x: auto; }

778

.prof-tab-btn {

779

display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px;

780

border: none; background: none; cursor: pointer; color: var(--text-muted);

781

border-bottom: 2px solid transparent; font-size: 13px; white-space: nowrap; flex-shrink: 0;

782

transition: color var(--transition-fast); &:hover { color: var(--text-primary); }

783

&--active { color: var(--text-primary); border-bottom-color: var(--color-accent); font-weight: 600; }

784

}

785

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

786

.prof-tab-content { min-height: 200px; }

787

788

789

// ── Social tabs ───────────────────────────────────────────────────────────────

790

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

791

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

792

.prof-social-info { flex: 1; min-width: 0; }

793

.prof-social-name { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; &:hover { color: var(--color-accent); } }

794

.prof-social-handle { font-size: 12px; color: var(--text-muted); margin-left: 6px; }

795

.prof-social-bio { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; }

796

797

// ── Activity tab ──────────────────────────────────────────────────────────────

798

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

799

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

800

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

801

.prof-activity-desc { font-size: 13px; color: var(--text-primary); display: block; }

802

.prof-activity-meta { font-size: 11px; color: var(--text-muted); a { color: var(--color-accent); text-decoration: none; &:hover { text-decoration: underline; } } }

803

.prof-pager { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; justify-content: center; }

804

.prof-pager-label { font-size: 12px; color: var(--text-muted); }

805

806

/* =========================================================================

807

Commit Graph page (Canvas2D renderer)

808

========================================================================= */

809

.graph-layout {

810

display: grid;

811

grid-template-columns: 1fr 200px;

812

gap: 0;

813

align-items: start;

814

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

815

}

816

.graph-main {

817

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

818

padding-right: var(--space-4);

819

min-width: 0;

820

}

821

.graph-viewport-card {

822

overflow: hidden;

823

padding: 0;

824

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

825

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

826

background: var(--bg-base);

827

}

828

.graph-legend-bar {

829

display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;

830

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

831

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

832

background: var(--bg-surface);

833

min-height: 38px;

834

&--types {

835

background: rgba(0,0,0,0.12);

836

min-height: 34px;

837

padding: var(--space-1) var(--space-4);

838

}

839

}

840

.graph-legend-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; flex-shrink: 0; }

841

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

842

.graph-legend-branch { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }

843

.graph-legend-type {

844

display: inline-flex; align-items: center; gap: 5px;

845

font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono);

846

}

847

.graph-legend-type-count { color: var(--text-muted); font-size: 10px; }

848

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

849

.graph-legend-sep { color: var(--text-muted); margin-left: auto; display: flex; gap: var(--space-4); font-size: 10px; flex-shrink: 0; }

850

.graph-legend-sep span { display: inline-flex; align-items: center; gap: 4px; }

851

.graph-legend-sep--right { margin-left: auto; }

852

.graph-viewport {

853

position: relative;

854

height: calc(100vh - 300px);

855

min-height: 480px;

856

background: var(--bg-base);

overflow: hidden;

}

.graph-canvas {

display: block;

position: absolute; top: 0; left: 0;

862

cursor: grab;

863

&:active { cursor: grabbing; }

864

}

865

.graph-loading {

866

position: absolute; inset: 0;

867

display: flex; align-items: center; justify-content: center;

868

gap: 10px; color: var(--text-muted); font-size: 14px;

869

}

870

.graph-empty {

871

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;

880

&:hover { opacity: 1; }

881

}

882

.graph-controls {

883

display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;

884

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

885

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

886

background: var(--bg-surface);

min-height: 44px;

}

.graph-ctrl-btn {

display: inline-flex; align-items: center; gap: 4px;

891

background: var(--bg-overlay);

892

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

893

color: var(--text-muted);

894

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

895

padding: 4px 10px;

896

font-size: 12px; cursor: pointer;

897

transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);

898

&:hover { color: var(--text-primary); border-color: var(--border-muted); background: var(--bg-surface); }

899

}

900

.graph-zoom-label {

901

font-size: 11px; font-family: var(--font-mono);

902

color: var(--text-muted); min-width: 36px; text-align: center;

903

}

904

.graph-search-wrap {

905

position: relative; display: flex; align-items: center; margin-left: var(--space-2);

906

}

907

.graph-search-icon {

908

position: absolute; left: 8px; color: var(--text-muted); pointer-events: none;

909

}

910

.graph-search-input {

911

background: var(--bg-overlay); border: 1px solid var(--border-default);

912

border-radius: var(--radius-sm); padding: 4px 8px 4px 28px;

913

font-size: 12px; color: var(--text-primary); width: 200px;

914

transition: border-color var(--transition-fast), width var(--transition-fast);

915

&::placeholder { color: var(--text-muted); }

916

&:focus { outline: none; border-color: var(--color-accent); width: 260px; }

917

}

918

.graph-search-count {

919

position: absolute; right: 6px; font-size: 10px; color: var(--text-muted);

920

pointer-events: none; font-family: var(--font-mono);

921

}

922

.graph-hint { font-size: 10px; color: var(--text-muted); margin-left: auto; }

923

.graph-sidebar {

924

padding-left: var(--space-4);

925

display: flex;

926

flex-direction: column;

927

position: sticky;

928

top: var(--header-height);

929

max-height: calc(100vh - var(--header-height));

930

overflow-y: auto;

931

scrollbar-width: none;

932

&::-webkit-scrollbar { display: none; }

933

}

934

.graph-sidebar-section {

935

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

936

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

937

&:last-child { border-bottom: none; }

}

/* Commit popover */

.dag-popover {

display: none;

position: fixed;

z-index: 500;

background: var(--bg-surface);

946

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

947

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

948

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

949

min-width: 320px;

950

max-width: 460px;

951

box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);

952

box-shadow: var(--shadow-xl);

953

pointer-events: none;

954

}

955

.dag-pop-sha {

956

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

957

font-size: 12px;

958

color: var(--color-accent-link);

959

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

display: flex;

align-items: center;

gap: var(--space-2);

}

.dag-pop-sha-badge {

background: var(--bg-overlay);

966

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

967

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

padding: 1px 6px;

}

.dag-pop-branch {

display: inline-block;

972

padding: 1px 8px;

973

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

974

font-size: 11px;

975

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

margin-left: auto;

}

.dag-pop-type {

display: inline-block;

980

padding: 1px 7px;

981

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

982

font-size: 11px;

983

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

984

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

985

margin-right: 4px;

986

}

987

.dag-pop-type-feat { background: rgba(63,185,80,0.15); color: var(--dim-rhythmic); }

988

.dag-pop-type-fix { background: rgba(248,81,73,0.15); color: var(--dim-dynamic); }

989

.dag-pop-type-refactor{background: rgba(188,140,255,0.15);color: var(--dim-melodic); }

990

.dag-pop-type-init { background: rgba(56,139,253,0.15); color: var(--dim-harmonic); }

991

.dag-pop-type-chore { background: rgba(139,148,158,0.12);color: var(--text-muted); }

992

.dag-pop-msg {

993

font-size: 14px;

994

color: var(--text-primary);

995

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

996

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 {

1008

display: inline-flex;

1009

align-items: center;

1010

gap: 5px;

1011

background: var(--bg-overlay);

1012

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

1013

padding: 2px 8px;

1014

font-size: 11px;

1015

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

1016

color: var(--text-secondary);

}

.dag-pop-avatar {

width: 18px;

height: 18px;

border-radius: 50%;

display: inline-flex;

1023

align-items: center;

1024

justify-content: center;

1025

font-size: 10px;

1026

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

1027

color: #fff;

1028

flex-shrink: 0;

1029

text-transform: uppercase;

1030

}

1031

.dag-pop-session { font-size: 11px; color: #2dd4bf; margin-top: var(--space-2); }

1032

.dag-pop-nav { font-size: 11px; color: var(--color-accent); margin-top: var(--space-2); opacity: 0.7; }

1033

.dag-pop-time { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }

1034

1035

/* Muse enrichment row inside popover */

1036

.dag-pop-muse {

1037

display: flex; align-items: center; gap: 6px; flex-wrap: wrap;

1038

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

1039

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

1040

}

1041

.pop-muse-badge {

1042

display: inline-flex; align-items: center;

1043

padding: 2px 8px; border-radius: var(--radius-sm);

1044

font-size: 10px; font-weight: var(--font-weight-semibold);

1045

font-family: var(--font-mono); border: 1px solid transparent;

1046

}

1047

.pop-muse-agent { background: rgba(167,139,250,0.18); color: #a78bfa; border-color: rgba(167,139,250,0.3); }

1048

.pop-muse-breaking{ background: rgba(248,113,113,0.18); color: #f87171; border-color: rgba(248,113,113,0.3); }

1049

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

1050

.pop-sym-add { color: #34d399; }

1051

.pop-sym-del { color: #f87171; }

1052

1053

/* Sidebar panels */

1054

.branch-legend-item {

1055

display: flex; align-items: center; gap: var(--space-2);

1056

padding: 5px 0;

1057

font-size: 12px; color: var(--text-secondary);

1058

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

1059

&:first-of-type { border-top: none; }

1060

}

1061

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

1062

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

1063

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

1064

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

1065

.branch-legend-count {

1066

margin-left: auto;

1067

font-size: 10px;

1068

color: var(--text-muted);

1069

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

1077

&:first-of-type { border-top: none; }

1078

}

1079

.contributor-avatar-sm {

width: 24px;

height: 24px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

1086

font-size: 10px;

1087

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

1088

color: #fff;

1089

flex-shrink: 0;

1090

text-transform: uppercase;

1091

}

1092

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

1093

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

1098

margin: 2px 0 0;