/* Profile setup card in the home sidebar (includes/sidebars/profile_completeness.php):
   a progress ring, the one step worth most as an action, the rest as chips.
   Colours come from the site theme (--sb-*), so light and dark both work. */
.sb-pc {
    --pc-accent: var(--sb-accent, #0073b7);
    --pc-ring-track: var(--sb-border, #e6e6e6);
    margin: 4px 0 16px 34px; padding: 14px; border-radius: 14px; /* lines up with the menu below */
    background: var(--sb-surface, #fff); border: 1px solid var(--sb-border, #e6e6e6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    display: flex; flex-direction: column; gap: 12px;
}
.sb-pc-head { display: flex; align-items: center; gap: 12px; }
.sb-pc-ring {
    --p: 0;
    flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; position: relative;
    background: conic-gradient(var(--pc-accent) calc(var(--p) * 1%), var(--pc-ring-track) 0);
    display: grid; place-items: center;
}
.sb-pc-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--sb-surface, #fff); }
.sb-pc-ring span { position: relative; font-size: 12px; font-weight: 700; color: var(--sb-text, #000); font-variant-numeric: tabular-nums; }
.sb-pc-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.sb-pc-title b { font-size: 14px; font-weight: 600; color: var(--sb-text, #000); }
.sb-pc-title small { font-size: 12px; color: var(--sb-text-muted, rgba(0, 0, 0, .5)); }
.sb-pc-x {
    align-self: flex-start; flex: 0 0 28px; width: 28px; height: 28px; margin: -4px -4px 0 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--sb-text-muted, rgba(0, 0, 0, .5)); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
    transition: background .15s ease, color .15s ease;
}
.sb-pc-x:hover { background: var(--sb-hover, #f2f3f5); color: var(--sb-text, #000); }

/* The next step: a full-width action. */
.sb-pc-next {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; text-decoration: none !important;
    background: color-mix(in srgb, var(--pc-accent) 9%, var(--sb-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--pc-accent) 22%, transparent);
    transition: background .15s ease, transform .12s ease;
}
.sb-pc-next:hover { background: color-mix(in srgb, var(--pc-accent) 15%, var(--sb-surface, #fff)); }
.sb-pc-next:active { transform: scale(.99); }
.sb-pc-next:focus-visible, .sb-pc-chip:focus-visible, .sb-pc-x:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; }
.sb-pc-tile {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    background: var(--pc-accent); color: #fff; font-size: 17px;
}
.sb-pc-what { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sb-pc-what b { font-size: 13.5px; font-weight: 600; color: var(--sb-text, #000); }
.sb-pc-what small { font-size: 12px; color: var(--sb-text-muted, rgba(0, 0, 0, .5)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-pc-gain {
    font-style: normal; font-size: 12px; font-weight: 700; color: var(--pc-accent);
    background: var(--sb-surface, #fff); border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}

/* The other steps. */
.sb-pc-more { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-pc-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 999px;
    font-size: 12px; color: var(--sb-text-soft, rgba(0, 0, 0, .75)) !important; text-decoration: none !important;
    background: var(--sb-surface-2, #f0f2f5); transition: background .15s ease;
}
.sb-pc-chip:hover { background: var(--sb-hover-strong, #e7e9ed); }
.sb-pc-chip i.ph { font-size: 13px; color: var(--sb-text-muted, rgba(0, 0, 0, .5)); }
.sb-pc-chip em { font-style: normal; font-weight: 600; color: var(--pc-accent); }
@media (prefers-reduced-motion: reduce) { .sb-pc-next, .sb-pc-x, .sb-pc-chip { transition: none; } }
@media (max-width: 991px) { .sb-pc { margin: 4px 10px 16px; } }

/* You, at the top of the home sidebar (includes/sidebars/home_sidebar.php). */
.sb-me-wrap { list-style: none; margin: 40px 0 10px; padding: 0 0 0 34px; }
.sb-me-wrap > li { display: flex; align-items: center; gap: 6px; }
.sb-me {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px;
    border-radius: 14px; text-decoration: none !important; color: var(--sb-text, #000) !important;
    transition: background .15s ease;
}
.sb-me:hover { background: var(--sb-hover, #f2f3f5); }
.sb-me:focus-visible, .sb-me-close:focus-visible { outline: 2px solid var(--sb-accent, #0073b7); outline-offset: 2px; }
.sb-me-pic { position: relative; flex: 0 0 44px; width: 44px; height: 44px; }
.sb-me-pic img {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block;
    box-shadow: 0 0 0 2px var(--sb-surface, #fff), 0 0 0 3.5px var(--sb-border-strong, #d8dce3);
}
.sb-me-dot {
    position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%;
    background: #31a24c; box-shadow: 0 0 0 2px var(--sb-bg, #f5f5f5);
}
.sb-me-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sb-me-text b {
    font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-me-text small { font-size: 12px; color: var(--sb-text-muted, rgba(0, 0, 0, .5)); }
.sb-me-go { flex: 0 0 auto; font-size: 16px; color: var(--sb-text-muted, rgba(0, 0, 0, .5)); transition: transform .15s ease; }
.sb-me:hover .sb-me-go { transform: translateX(2px); color: var(--sb-text, #000); }
.sb-me-close {
    flex: 0 0 38px; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--sb-surface-2, #f0f2f5); color: var(--sb-text, #000); font-size: 18px;
    text-align: center; line-height: 38px; padding: 0;
}
@media (max-width: 991px) { .sb-me-wrap { margin: 8px 10px 8px; padding: 0 !important; } }
@media (prefers-reduced-motion: reduce) { .sb-me, .sb-me-go { transition: none; } }