/* =============================================================================
 * catalog-view-counts.css — Phase 95-03
 *
 * Renders the small `👁 N viewed this week` chip below each catalog tile's
 * theme badge. CardRenderer appends `.view-count-badge` to `.card-body` only
 * when the per-card view_count is non-null AND >= 50 (CATALOG-13). Tiles with
 * no row in post_view_counts_weekly (staging skip path or not-yet-synced
 * on prod) render NO chip — there is no "0 views" placeholder.
 *
 * Visual: small inline pill, secondary surface, eye glyph as part of the
 * text content (not a background image — preserves screen-reader output).
 * Sized to slot inline beneath the existing theme-badge without changing
 * card height.
 *
 * CLS-safety (CATALOG-17): inline element on a static line; no layout shift.
 * ========================================================================== */

.view-count-badge {
    /* Sit on its own line below the theme badge */
    display: inline-flex;
    align-items: center;
    gap: 4px;

    /* Small secondary chip — distinct from the primary theme-badge token */
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;

    /* Text + surface */
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--color-text-secondary, #555);
    background-color: var(--color-surface-secondary, rgb(0 0 0 / 4%));

    /* Don't let long counts wrap awkwardly inside the chip */
    white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
    .view-count-badge {
        color: var(--color-text-secondary, #ccc);
        background-color: var(--color-surface-secondary, rgb(255 255 255 / 8%));
    }
}