/* Home-sidebar widgets: People you may know (.pk_), Rankings (.rk_),
 * Communities to discover (.dc_).
 * ------------------------------------------------------------------
 * Shared scaffolding (.sde_wid, .wid_tit_row, .wid_obj, .wid_ftr,
 * .prof_img) comes from home.css — this file only adds the row layouts
 * and widget-specific bits.
 */

/* ---------- Shared row list reset -------------------------------- */
.pk_lst,
.rk_lst,
.dc_lst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- People you may know ---------------------------------- */
.pk_row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pk_prof {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.pk_mta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pk_name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pk_verified {
    font-size: 13px;
    color: var(--button-blue);
    margin-left: 4px;
}

.pk_handle {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Follow button — state classes (prf_action_btn_primary /
 * prf_action_btn_following) are flipped by user_follow.js; the profile
 * page styles them in profile.css which doesn't load here, so restyle
 * both states scoped to the widget row. */
.pk_follow_btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.pk_follow_btn.prf_action_btn_primary {
    background: var(--button-blue);
    color: #fff;
}
.pk_follow_btn.prf_action_btn_primary:hover {
    opacity: 0.9;
}
.pk_follow_btn.prf_action_btn_following {
    background: var(--elevated-highlight);
    color: var(--text-primary);
}

/* ---------- Rankings --------------------------------------------- */
.rk_domain {
    font-size: 12px;
    color: var(--text-secondary);
}

.rk_row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rk_row_viewer {
    background: var(--elevated-highlight);
    border-radius: 10px;
    padding: 6px 8px;
    margin: -6px -8px;
}

.rk_pos {
    width: 20px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.rk_avatar {
    width: 32px;
    height: 32px;
}
.rk_avatar img,
.rk_avatar .prof_img_fallback {
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.rk_name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rk_name:hover {
    text-decoration: underline;
}

.rk_score {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.rk_viewer_row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--elevated-highlight);
}
.rk_viewer_lbl {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
.rk_viewer_row .rk_pos {
    width: auto;
}
.rk_viewer_row .rk_score {
    margin-left: auto;
}

.rk_cta_txt {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.rk_cta_btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 13px;
    text-decoration: none;
}

/* ---------- Communities to discover ------------------------------ */
.dc_link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.dc_mta {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.dc_name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dc_members {
    font-size: 12px;
    color: var(--text-secondary);
}

.dc_view {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--elevated-highlight);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
}
.dc_link:hover .dc_view {
    background: var(--elevated-surface);
}