/* pages-misc.css — facepile (Who liked) + auxiliary page widgets.
   Loaded after cards.css, before style.css. */

/* ─── Who liked (facepile) — file / resource / forum ─────────── */
/* Shrink row + hover box to chip width (native tooltip follows tight box). */

.forum-post-like-likers-row {
    width:fit-content;
    max-width:100%;
    align-self:flex-start;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    flex-wrap:nowrap;
    margin-top:0;
    margin-bottom:0;
    min-height:22px;
    gap:.12rem .2rem;
    line-height:0;
}

.ulp-like-likers__heart {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:var(--ulp-facepile-orb, 22px);
    height:var(--ulp-facepile-orb, 22px);
    line-height:0;
}

.ulp-like-likers__heart i {
    font-size:calc(var(--ulp-facepile-orb, 22px)*0.59);
    line-height:1;
    color:var(--error-color,#ff3366);
    opacity:.96;
    filter:drop-shadow(0 0 5px rgba(255,51,102,.45))
}

.ulp-like-likers__sep {
    align-self:center;
    flex:0 0 auto;
    color:rgba(226,232,240,.82);
    font-family:var(--font-mono,monospace);
    font-size:.78rem;
    font-weight:800;
    line-height:1;
    padding:0 .02rem;
    letter-spacing:.04em;
    user-select:none;
}

.ulp-like-likers {
    --ulp-facepile-orb:22px;
    --ulp-facepile-overlap:calc(var(--ulp-facepile-orb)*-.42);
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0 .2rem;
    margin-top:.12rem;
    width:max-content;
    max-width:100%;
    box-sizing:border-box;
    font-size:.65rem;
    color:var(--text-secondary);
    letter-spacing:0;
    line-height:0;
    min-height:var(--ulp-facepile-orb)
}

button.ulp-like-likers__heart-hit {
    -webkit-appearance:none;
    appearance:none;
    cursor:pointer;
    border:none;
    background:transparent;
    padding:0;
    margin:0;
    line-height:0;
    box-shadow:none;
    outline:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:var(--ulp-facepile-orb, 22px);
    height:var(--ulp-facepile-orb, 22px);
    box-sizing:border-box
}

button.ulp-like-likers__heart-hit .ulp-like-likers__heart-slot {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    box-sizing:border-box;
    flex-shrink:0;
    line-height:0
}

/* Facepile like control — gray @0, red outline when others liked + far, solid red when viewer liked + fas. */
button.ulp-like-likers__heart-hit.like-btn-container:not(.has-likes):not(.is-liked) .like-btn.fa-heart,
button.ulp-like-likers__heart-hit.like-btn-container:not(.has-likes):not(.is-liked) .like-icon.fa-heart {
    color:var(--text-secondary) !important;
    opacity:.9 !important;
    filter:none !important
}

button.ulp-like-likers__heart-hit.like-btn-container.has-likes:not(.is-liked) .like-btn.fa-heart,
button.ulp-like-likers__heart-hit.like-btn-container.has-likes:not(.is-liked) .like-icon.fa-heart {
    color:var(--error-color) !important;
    opacity:1 !important;
    filter:none !important
}

button.ulp-like-likers__heart-hit.like-btn-container.is-liked .like-btn.fa-heart,
button.ulp-like-likers__heart-hit.like-btn-container.is-liked .like-icon.fa-heart {
    color:var(--error-color) !important;
    opacity:1 !important;
    filter:drop-shadow(0 0 3px rgba(255,71,87,.35)) !important
}

/* Glyph size inside fixed orb (beats .telemetry-pod .like-btn shrink). */
button.ulp-like-likers__heart-hit.telemetry-pod.like-btn-container .like-btn.fa-heart,
button.ulp-like-likers__heart-hit.telemetry-pod.like-btn-container .like-icon.fa-heart {
    font-size:calc(var(--ulp-facepile-orb,22px)*0.82) !important;
    line-height:1 !important
}

button.ulp-like-likers__heart-hit.like-btn-container:hover .like-btn,
button.ulp-like-likers__heart-hit:hover .like-btn {
    transform:scale(1.08)
}

.ulp-like-likers--with-heart-hit {
    display:inline-flex !important;
}

.ulp-like-likers--facepile-only {
    margin-top:0 !important;
    margin-bottom:0;
    min-height:var(--ulp-facepile-orb, 22px)
}

.ulp-like-likers--empty {
    display:none !important;
}

/* If data-likers-total is set and >0, never hide the strip (guards stale --empty class). */
.ulp-like-likers[data-likers-total]:not([data-likers-total="0"]) {
    display:inline-flex !important;
}

.ulp-like-likers__faces {
    display:inline-flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:0;
    line-height:0;
    overflow:visible
}

/* Stacked pile (same idea as .pile-avatar / .avatar-pile in file headers). */
.ulp-like-likers__faces>* {
    position:relative
}

.ulp-like-likers__faces>*+* {
    margin-left:var(--ulp-facepile-overlap, -9px)
}

.ulp-like-likers__faces .ulp-like-likers__face:is(:hover,:focus-visible),
.ulp-like-likers__faces .ulp-like-likers__more:is(:hover,:focus-visible) {
    z-index:50
}

/* Avatar rings aligned with forum profile chips (.username-tag.* .user-avatar-circle). */
.ulp-like-likers__face {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    overflow:hidden;
    flex-shrink:0;
    line-height:0;
    border-style:solid;
    border-width:1px;
    box-sizing:border-box;
    width:var(--ulp-facepile-orb, 22px);
    height:var(--ulp-facepile-orb, 22px);
    transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
}

.ulp-like-likers__face--placeholder {
    border-color:rgba(148,163,184,.52);
    box-shadow:0 1px 2px rgba(0,0,0,.18);
    cursor:default;
}

.ulp-like-likers__face--placeholder:hover,
.ulp-like-likers__face--placeholder:focus-visible {
    transform:none;
    border-color:rgba(148,163,184,.52);
    box-shadow:0 1px 2px rgba(0,0,0,.18);
}

.ulp-like-likers__face--admin {
    border-color:rgba(255,51,102,.88);
    box-shadow:0 1px 2px rgba(0,0,0,.2);
}

.ulp-like-likers__face--moderator {
    border-color:rgba(0,255,157,.78);
    box-shadow:0 1px 2px rgba(0,0,0,.2);
}

.ulp-like-likers__face--vip {
    border-color:rgba(251,191,36,.88);
    box-shadow:0 1px 2px rgba(0,0,0,.2),0 0 10px rgba(245,197,66,.12);
}

.ulp-like-likers__face--user {
    border-color:rgba(148,163,184,.52);
    box-shadow:0 1px 2px rgba(0,0,0,.18);
}

/* Match .username-tag role rings — never wash borders to neutral gray on hover. */
.ulp-like-likers__face--user:hover,
.ulp-like-likers__face--user:focus-visible {
    transform:scale(1.06);
    border-color:rgba(148,163,184,.95);
    box-shadow:0 0 12px rgba(148,163,184,.45),0 2px 10px rgba(0,0,0,.32),0 0 14px rgba(100,116,139,.25);
}

.ulp-like-likers__face--admin:hover,
.ulp-like-likers__face--admin:focus-visible {
    transform:scale(1.06);
    border-color:rgba(255,51,102,.98);
    box-shadow:0 0 14px rgba(255,51,102,.55),0 0 20px rgba(255,80,120,.28),0 2px 10px rgba(0,0,0,.35);
}

.ulp-like-likers__face--moderator:hover,
.ulp-like-likers__face--moderator:focus-visible {
    transform:scale(1.06);
    border-color:rgba(0,255,157,.95);
    box-shadow:0 0 14px rgba(0,255,157,.48),0 0 18px rgba(0,255,180,.22),0 2px 10px rgba(0,0,0,.35);
}

.ulp-like-likers__face--vip:hover,
.ulp-like-likers__face--vip:focus-visible {
    transform:scale(1.06);
    border-color:rgba(251,191,36,.98);
    box-shadow:0 0 12px rgba(245,197,66,.55),0 0 18px rgba(245,158,11,.35),0 2px 10px rgba(0,0,0,.35);
}

.ulp-like-likers__img {
    width:20px;
    height:20px;
    object-fit:cover;
    display:block;
}

.ulp-like-likers__more {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:calc(var(--ulp-facepile-orb, 22px) - 4px);
    height:var(--ulp-facepile-orb, 22px);
    padding:0 .22rem;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    font-family:var(--font-mono);
    font-size:.52rem;
    font-weight:600;
    color:var(--text-secondary);
    margin-left:.02rem;
    line-height:1;
    box-sizing:border-box;
}

.forum-post-like-likers-row .ulp-like-likers {
    margin-top:0;
}

.detail-like-likers-row {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    width:fit-content;
    max-width:100%;
    margin:0;
    padding:0;
    min-height:22px;
    line-height:0;
}

.detail-like-likers-row .ulp-like-likers {
    margin-top:0;
}