/* Section: Holder Archetypes — behavioral clustering bars + tag chips.
   Follows the dashboard section vocabulary (dark card, mono numerics). */

.section--holder-archetypes {
    margin-top: 28px;
}
.section--holder-archetypes .arch-window {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.7rem;
    color: var(--color-text-muted, #9ca3af);
    margin-left: 10px;
}
.section--holder-archetypes .arch-sub {
    font-size: 0.8rem;
    color: var(--color-text-muted, #9ca3af);
    margin: 4px 0 14px;
}

/* ── distribution bars ── */
.arch-row {
    display: grid;
    grid-template-columns: 110px 1fr 110px;
    gap: 10px;
    align-items: center;
    padding: 5px 0;
}
.arch-name {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.76rem;
    text-transform: capitalize;
    color: var(--color-text-secondary, #d1d5db);
}
.arch-track {
    position: relative;
    height: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    overflow: hidden;
}
.arch-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 5px;
    background: rgba(148, 163, 184, 0.4);
}
.arch-fill--diamond      { background: rgba(96, 165, 250, 0.55); }
.arch-fill--accumulator  { background: rgba(34, 197, 94, 0.5); }
.arch-fill--staker       { background: rgba(168, 85, 247, 0.5); }
.arch-fill--trader       { background: rgba(251, 191, 36, 0.5); }
.arch-fill--bot          { background: rgba(239, 68, 68, 0.45); }
.arch-fill--dumper       { background: rgba(249, 115, 22, 0.5); }
.arch-fill--airdrop      { background: rgba(20, 184, 166, 0.5); }
.arch-fill--whale        { background: rgba(96, 165, 250, 0.7); }
.arch-count {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.76rem;
    text-align: right;
    color: var(--color-text-primary, #f3f4f6);
    white-space: nowrap;
}
.arch-count em {
    font-style: normal;
    color: var(--color-text-muted, #9ca3af);
    margin-left: 3px;
}

/* Closed-set width classes (2% buckets) — CSP-safe, no inline styles. */
.arch-fill--w2   { width: 2%; }   .arch-fill--w4   { width: 4%; }
.arch-fill--w6   { width: 6%; }   .arch-fill--w8   { width: 8%; }
.arch-fill--w10  { width: 10%; }  .arch-fill--w12  { width: 12%; }
.arch-fill--w14  { width: 14%; }  .arch-fill--w16  { width: 16%; }
.arch-fill--w18  { width: 18%; }  .arch-fill--w20  { width: 20%; }
.arch-fill--w22  { width: 22%; }  .arch-fill--w24  { width: 24%; }
.arch-fill--w26  { width: 26%; }  .arch-fill--w28  { width: 28%; }
.arch-fill--w30  { width: 30%; }  .arch-fill--w32  { width: 32%; }
.arch-fill--w34  { width: 34%; }  .arch-fill--w36  { width: 36%; }
.arch-fill--w38  { width: 38%; }  .arch-fill--w40  { width: 40%; }
.arch-fill--w42  { width: 42%; }  .arch-fill--w44  { width: 44%; }
.arch-fill--w46  { width: 46%; }  .arch-fill--w48  { width: 48%; }
.arch-fill--w50  { width: 50%; }  .arch-fill--w52  { width: 52%; }
.arch-fill--w54  { width: 54%; }  .arch-fill--w56  { width: 56%; }
.arch-fill--w58  { width: 58%; }  .arch-fill--w60  { width: 60%; }
.arch-fill--w62  { width: 62%; }  .arch-fill--w64  { width: 64%; }
.arch-fill--w66  { width: 66%; }  .arch-fill--w68  { width: 68%; }
.arch-fill--w70  { width: 70%; }  .arch-fill--w72  { width: 72%; }
.arch-fill--w74  { width: 74%; }  .arch-fill--w76  { width: 76%; }
.arch-fill--w78  { width: 78%; }  .arch-fill--w80  { width: 80%; }
.arch-fill--w82  { width: 82%; }  .arch-fill--w84  { width: 84%; }
.arch-fill--w86  { width: 86%; }  .arch-fill--w88  { width: 88%; }
.arch-fill--w90  { width: 90%; }  .arch-fill--w92  { width: 92%; }
.arch-fill--w94  { width: 94%; }  .arch-fill--w96  { width: 96%; }
.arch-fill--w98  { width: 98%; }  .arch-fill--w100 { width: 100%; }

/* ── behavior-tag chips ── */
.arch-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.arch-tag {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted, #9ca3af);
}
.arch-tag b { color: var(--color-text-primary, #f3f4f6); font-weight: 600; }

/* ── ve-staker strip ── */
.arch-staker {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    font-size: 0.76rem;
    color: var(--color-text-muted, #9ca3af);
}
.arch-staker b { color: var(--color-text-primary, #f3f4f6); }

@media (max-width: 560px) {
    .arch-row { grid-template-columns: 84px 1fr 84px; }
}