/* Player search and profiles. */

.hero-search { gap: 8px; }
.hero-search input { font-size: 16px; padding: 12px 16px; }
.player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.player-hit { color: var(--text); gap: 10px; }
.player-name { font-weight: 700; font-size: 15px; }
.player-title { font-size: 22px; }
.avatar-lg, .avatar-xl { border-radius: 50%; flex: none; object-fit: cover; }
.avatar-lg { width: 42px; height: 42px; }
.avatar-xl { width: 76px; height: 76px; box-shadow: 0 0 0 3px var(--surface-3), 0 8px 26px rgba(110, 90, 255, .35); }
.placeholder {
    display: inline-grid; place-items: center; background: var(--nebula); color: #fff;
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
}
.avatar-lg.placeholder { font-size: 18px; }
.avatar-xl.placeholder { font-size: 32px; }
.profile-head { flex-direction: row; align-items: center; gap: 18px; flex-wrap: wrap; }
.profile-head .kv { min-width: 260px; }
.role-row .pill { border-width: 1px; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; display: flex; flex-direction: column; }
.timeline li { position: relative; display: flex; gap: 12px; padding: 0 0 16px 0; }
.timeline li::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--border); }
.timeline li:last-child::before { display: none; }
.tl-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); font-size: 15px; }
.tl-body { flex: 1; min-width: 0; padding-top: 5px; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Punishment ladder */
.escalation { padding: 14px 18px; }
.escalation.has-record { border-color: rgba(247, 201, 92, .35); }
.esc-step { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: var(--nebula-soft); border: 1px solid var(--border); }
.esc-ladder { display: flex; gap: 4px; }
.esc-ladder span { width: 18px; height: 6px; border-radius: 99px; background: var(--surface-3); }
.esc-ladder span.done { background: var(--warn); }
.esc-ladder span.next { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.ladder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ladder-list li { display: flex; align-items: center; gap: 8px; }
.avatar-stack { position: relative; flex: none; }
.avatar-stack .mc-head { border-radius: 10px; }
.avatar-badge { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface-solid); }