/* ═════════════════════════════════════════════════════════════════════════
   SOCIAL-PROOF PILL (W-068) — a floating rating anchor.

   Scoped to .hzo-social-proof*. Tokens only. Sits above content but below the
   nav/overlay/toast ladder. Fades + slides in when JS reveals it; reduced-motion
   keeps only the fade. Composes the amber star color (--color-warning).
   ═════════════════════════════════════════════════════════════════════════ */

.hzo-social-proof {
    position: fixed;
    bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-social-proof, 15);          /* peer of back-to-top; below the overlay/toast ladder */
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    max-width: min(92vw, 340px);
    padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--transition-base) var(--ease-standard), transform var(--transition-base) var(--ease-standard);
}
.hzo-social-proof--br { right: calc(var(--space-lg) + env(safe-area-inset-right, 0px)); }
.hzo-social-proof--bl { left: calc(var(--space-lg) + env(safe-area-inset-left, 0px)); }
.hzo-social-proof.is-visible { opacity: 1; transform: none; }
.hzo-social-proof[hidden] { display: none; }   /* .hzo-social-proof[hidden] (0,2,0) outranks the base display:flex */

.hzo-social-proof__link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
    text-decoration: none;
    color: var(--text-heading);
}

/* Compact fractional stars (gray base + amber overlay clipped to --hzo-sp-pct). */
.hzo-social-proof__stars { position: relative; display: inline-flex; line-height: 0; flex-shrink: 0; }
.hzo-social-proof__stars-base,
.hzo-social-proof__stars-fill { display: inline-flex; gap: 1px; }
.hzo-social-proof__stars svg { width: 15px; height: 15px; }
.hzo-social-proof__stars-base { color: var(--border); }
.hzo-social-proof__stars-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--hzo-sp-pct, 0%);
    overflow: hidden;
    white-space: nowrap;
    color: var(--color-warning);
}

.hzo-social-proof__meta { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.hzo-social-proof__score { font-weight: 700; color: var(--text-heading); }
.hzo-social-proof__count { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.hzo-social-proof__chev {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform var(--transition-base) var(--ease-standard);
}
.hzo-social-proof__link:hover .hzo-social-proof__chev { transform: translateX(2px); }

.hzo-social-proof__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-base) var(--ease-standard), color var(--transition-base) var(--ease-standard);
}
.hzo-social-proof__close:hover { background: var(--bg-alt); color: var(--text-heading); }
.hzo-social-proof__close svg { width: 14px; height: 14px; display: block; }

.hzo-social-proof__link:focus-visible,
.hzo-social-proof__close:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-full);
}

@media (max-width: 480px) {
    .hzo-social-proof { bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px)); }
    .hzo-social-proof--br { right: calc(var(--space-md) + env(safe-area-inset-right, 0px)); }
    .hzo-social-proof--bl { left: calc(var(--space-md) + env(safe-area-inset-left, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
    .hzo-social-proof { transform: none; transition: opacity var(--transition-base) var(--ease-standard); }
    .hzo-social-proof.is-visible { transform: none; }
    .hzo-social-proof__chev { transition: none; }
    .hzo-social-proof__link:hover .hzo-social-proof__chev { transform: none; }
}

@media (forced-colors: active) {
    .hzo-social-proof { border: 1px solid CanvasText; }
    .hzo-social-proof__stars-fill { color: Highlight; }
}