/* Profile skills sub-tabs + Specialisations grid (char + progress panels) */

/* Uses shared .panel-tabs / .panel-tab underline primitive from base.css */
#pp-profile-root .pp-skills-tabs.panel-tabs,
#progress-pp-profile-root .pp-skills-tabs.panel-tabs {
    margin-bottom: 16px;
}

.pp-skills-tab-panels {
    min-width: 0;
}

#pp-profile-root .pp-spec-grid,
#progress-pp-profile-root .pp-spec-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

@media (min-width: 768px) and (pointer: fine) {
    #pp-profile-root .pp-spec-grid,
    #progress-pp-profile-root .pp-spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    #pp-profile-root .pp-spec-grid,
    #progress-pp-profile-root .pp-spec-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.pp-spec-empty {
    margin: 0;
    padding: 12px 4px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.pp-spec-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 18px 20px 20px;
    border-radius: var(--radius-md);
    background: var(--profile-surface);
    border: 1px solid color-mix(in srgb, var(--gold) 12%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--white) 4%, transparent);
}

.pp-spec-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pp-spec-skill-icon {
    display: flex;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.pp-spec-skill-icon img {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.pp-spec-skill-name {
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-spec-xp-pill {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 28%, var(--surface-elevated, var(--surface-base)));
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: color-mix(in srgb, var(--text-primary) 88%, var(--black));
    white-space: nowrap;
}

.pp-spec-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold) 14%, var(--surface-base));
}

.pp-spec-bar-fill {
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: var(--market-buy);
    transition: width 0.35s ease;
}

.pp-spec-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.pp-spec-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pp-spec-row-icon {
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.pp-spec-row-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-spec-row-level {
    flex-shrink: 0;
    min-width: 1.25rem;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}