/* ── Profile Page ─────────────────────────────────────────────────────────── */

.profile-page {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--spacing-xl);
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.profile-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-xl);
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-active);
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--color-secondary);
    flex-shrink: 0;
    user-select: none;
}

.profile-header-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Name + Edit button on the same row */
.profile-header-name-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.profile-display-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin: 0;
}

.profile-edit-name-btn,
.profile-follow-btn {
    font-size: var(--font-size-sm);
    padding: 2px 10px;
    line-height: 1.4;
}

/* Notification preference row shown under header when following */
.profile-notif-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: #aaa;
    cursor: pointer;
    margin-top: 4px;
}

.profile-notif-row input[type="checkbox"] {
    accent-color: var(--color-secondary);
    cursor: pointer;
}

.profile-email {
    font-size: var(--font-size-sm);
    color: #888;
    margin: 0;
}

/* ── Edit name modal ─────────────────────────────────────────────────────── */

/* Double-class specificity ensures this wins over any single-class min-width rule */
.modal-content.modal-content--narrow {
    width: min(360px, 90vw);
    min-width: 0;
    max-width: 360px;
}

.profile-name-modal-desc {
    font-size: var(--font-size-sm);
    color: #888;
    margin: 0 0 var(--spacing-md) 0;
}

.profile-name-error {
    font-size: var(--font-size-sm);
    color: #f87171;
    margin: var(--spacing-xs) 0 0 0;
    min-height: 1.2em;
}

/* ── Public sets section ─────────────────────────────────────────────────── */

.profile-sets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.profile-sets-title {
    margin: 0;
}

.profile-section-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-xl) 0;
}

.profile-sets-search {
    width: 220px;
    padding: 5px var(--spacing-md);
    font-size: var(--font-size-sm);
}

.profile-sets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.profile-sets-empty {
    color: #888;
    font-size: var(--font-size-sm);
    text-align: center;
    padding: var(--spacing-xl) 0;
    grid-column: 1 / -1;
}

.profile-empty {
    color: #888;
    text-align: center;
    padding: var(--spacing-xl);
}