/* profile.css — public profile page, scoped under .profile-* to
   avoid colliding with main.css. Reuses main.css's real color vars
   (--accent, --card, --border, --text, --text-dim, --text-dimmer). */

.profile-reading-col {
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Persistent header — identity, EOS ID, wallet balance. Always
   visible above the tabs, not hidden behind an "Overview" tab. */
.profile-header-card {
    background: linear-gradient(180deg, rgba(255,90,20,.08), var(--card) 60%);
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}
.profile-header-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}
.profile-header-sub {
    font-size: 12px;
    color: var(--text-dimmer);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    margin-top: 4px;
}
.profile-header-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.profile-header-stat {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border2, var(--border));
    border-radius: 9px;
    padding: 14px 16px;
}
.profile-header-stat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-dimmer);
    margin-bottom: 6px;
}
.profile-header-stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
}
.profile-header-stat-value .unit {
    font-size: 12px;
    color: var(--text-dimmer);
    font-family: 'Chakra Petch', sans-serif;
    margin-left: 6px;
    font-weight: 600;
}
.profile-eos-value {
    color: var(--text);
    font-size: 15px;
    word-break: break-all;
}
.profile-inline-link {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-top: 8px;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.profile-inline-link:hover { color: var(--text); }

@media (max-width: 520px) {
    .profile-header-stats { grid-template-columns: 1fr; }
}

.profile-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.profile-tab-btn {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 9px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    transition: all .15s;
}
.profile-tab-btn:hover { border-color: var(--accent); color: var(--text); }
.profile-tab-btn.active {
    background: rgba(255,90,20,.14);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
}

.profile-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.profile-card-head {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    background: rgba(255,90,20,.07);
    border-left: 3px solid var(--accent);
    border-bottom: 1px solid var(--border);
}
.profile-card-body { padding: 20px; }

/* Collapsible card headers (History, etc.) — same caret pattern as
   the Stats tab's category headers, just reused here since a card
   head is the toggle target instead of a dedicated row. */
.profile-collapse-caret {
    font-size: 10px;
    color: var(--text-dimmer);
    transition: transform .15s;
    flex-shrink: 0;
}

.profile-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    object-fit: cover;
    background: rgba(255,255,255,.05);
    flex-shrink: 0;
}
.profile-identity-name { font-size: 21px; font-weight: 700; color: var(--text); font-family: 'Orbitron', sans-serif; }

/* Reputation stat tile — dot + tier name, a thin progress bar showing
   standing within the current tier, then "X rep · Y until NextTier"
   underneath. Tier color drives all three so it stays visually tied
   to whatever color that tier is configured with. */
.profile-rep-tier {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Chakra Petch', sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.profile-rep-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.profile-rep-bar-track {
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    margin-bottom: 8px;
}
.profile-rep-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .3s ease;
}
.profile-rep-subtext {
    font-size: 11px;
    color: var(--text-dimmer);
}

.profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    font-size: 13px;
    gap: 12px;
}
.profile-row:last-child { border-bottom: none; }
.profile-row-main { color: var(--text); font-weight: 600; }
.profile-row-sub { color: var(--text-dimmer); font-size: 11px; margin-top: 3px; }
.profile-row-amount {
    color: var(--accent);
    font-weight: 700;
    white-space: nowrap;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
}

.profile-form-row { padding: 0 20px; margin-bottom: 14px; }
.profile-form-row:first-of-type { padding-top: 20px; }
.profile-form-row label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-dimmer);
    margin-bottom: 6px;
}
.profile-form-row input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
}
.profile-form-row input:focus { outline: none; border-color: var(--accent); }
.profile-form-actions { padding: 4px 20px 20px; }
.profile-hint { padding: 16px 20px 0; color: var(--text-dimmer); font-size: 12px; line-height: 1.5; }
.profile-msg { padding: 0 20px; min-height: 16px; margin-top: 8px; font-size: 13px; }

.profile-stat-group { margin-bottom: 24px; }
.profile-stat-group-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    color: var(--text);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
    display: inline-block;
}

/* Categories — collapsed by default, click to expand. Matches CMH's
   layout (see the delivered screenshots this was built against): a
   flat clickable header row per category, individual stat rows
   revealed underneath when open, rather than the old always-expanded
   grid of tiles. */
.profile-stat-cat {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
.profile-stat-cat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    cursor: pointer;
    background: rgba(255,255,255,.02);
    user-select: none;
}
.profile-stat-cat-head:hover { background: rgba(255,255,255,.04); }
.profile-stat-cat-caret {
    font-size: 10px;
    color: var(--text-dimmer);
    transition: transform .15s;
    flex-shrink: 0;
}
.profile-stat-cat-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .04em;
    flex: 1;
}
.profile-stat-cat-count {
    font-size: 11px;
    color: var(--text-dimmer);
    background: rgba(255,255,255,.04);
    padding: 2px 8px;
    border-radius: 10px;
}
.profile-stat-cat-body {
    border-top: 1px solid var(--border);
}
.profile-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    font-size: 13px;
}
.profile-stat-row:last-child { border-bottom: none; }
.profile-stat-row-label { color: var(--text-dim); }
.profile-stat-row-value { color: var(--text); font-weight: 700; font-family: 'Orbitron', sans-serif; }

.profile-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--text-dimmer);
    font-size: 13px;
}

/* Claim Prize — horizontal input+button row, matching CMH's real
   claim-card layout (input and button side by side, not stacked
   with a separate label like .profile-form-row). Reuses
   .profile-card/.profile-card-head/.profile-hint/.profile-msg as-is
   for consistency with every other card on this page — this is the
   one genuinely new piece, since nothing existing supports a
   horizontal input+button row. */
.profile-claim-form {
    display: flex;
    gap: 10px;
    padding: 14px 20px 20px;
    flex-wrap: wrap;
}
.profile-claim-form input {
    flex: 1;
    min-width: 160px;
    box-sizing: border-box;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    text-transform: uppercase;
}
.profile-claim-form input:focus { outline: none; border-color: var(--accent); }
.profile-claim-form button { flex-shrink: 0; }

.profile-claim-form input[type="number"] { flex: 1; min-width: 100px; text-transform: none; }

/* .profile-card clips overflow by default (rounded-corner cards) and
   has no stacking context of its own, so an open .pf-select inside
   one both gets visually clipped at the card's edge and paints
   behind whichever card comes right after it in the DOM (e.g.
   History below Withdraw). This class is toggled by wirePfSelect()
   only while a dropdown inside the card is actually open, lifting
   both just for that moment rather than changing how the card
   behaves the rest of the time. */
.profile-card.pf-select-card-open {
    overflow: visible;
    position: relative;
    z-index: 20;
}