/* ============================================================
 * TCG Zen — Pulse View Count Display (v2.20.0 Capstone — Wave 9)
 *
 * The view count chip lives at the far right of every Pulse
 * action bar (.pulse-actions). It's passive — no hover state,
 * no click target — and quietly shows the public view count
 * once a post crosses the 10-view threshold.
 *
 * Markup contract (orchestrator emits in pulse-shared.php):
 *   <span class="pulse-views" data-count="<int>" aria-label="<int> views">
 *     <i data-lucide="bar-chart-3"></i>
 *     <span class="pulse-views-count">1.2K</span>
 *   </span>
 *
 * Threshold: PHP-side render skips emitting the chip if count<10.
 * The data-count attribute selector below is a defense-in-depth
 * fallback for AJAX-injected items where the threshold check might
 * be missed — CSS hides any chip whose data-count is 0-9.
 * ============================================================ */

.pulse-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;          /* pushes to far right of .pulse-actions */
    padding: 6px 8px;           /* lines up vertically with .pulse-btn */
    color: var(--text-mid);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;       /* not interactive — purely informational */
    user-select: none;
    transition: color .18s ease;
}

.pulse-views i {
    width: 14px;
    height: 14px;
    color: currentColor;
    stroke: currentColor;
    flex-shrink: 0;
}

.pulse-views-count {
    font-variant-numeric: tabular-nums;
    min-width: 8px;
}

/* Defense-in-depth: hide chips below the 10-view threshold even
   if PHP somehow emitted them (AJAX race, stale cache, etc.). */
.pulse-views[data-count="0"],
.pulse-views[data-count="1"],
.pulse-views[data-count="2"],
.pulse-views[data-count="3"],
.pulse-views[data-count="4"],
.pulse-views[data-count="5"],
.pulse-views[data-count="6"],
.pulse-views[data-count="7"],
.pulse-views[data-count="8"],
.pulse-views[data-count="9"] {
    display: none;
}

/* Hover on the parent pulse-item lifts the chip's color a touch
   so it doesn't feel orphaned when the action bar wakes up. */
.pulse-item:hover .pulse-views {
    color: var(--text);
}

/* Light-mode override — var(--text-mid) on the dark theme reads
   as #a08e70, which on a cream background washes out. The pinned
   memory note for AJAX-injected items called this out: every
   dark-mode RGBA needs a light counterpart or it bleeds. */
html[data-theme="light"] .pulse-views {
    color: #7a5800;
}

html[data-theme="light"] .pulse-item:hover .pulse-views {
    color: #4a3500;
}

/* Mobile / coarse-pointer: passive chip stays passive. We do NOT
   bump min-height to 44px here because the chip isn't a touch
   target — it has pointer-events:none. Per
   memory/feedback_mobile_touch_target_44px.md this is correct:
   the 44px floor applies to interactive .pulse-btn overrides only. */
@media (hover: none), (pointer: coarse) {
    .pulse-views {
        /* No-op — inherits the base style. Kept here for clarity
           so future maintainers know we considered the rule. */
        font-size: 12px;
    }
}

/* Reduced-motion: nothing to do — no animation on this chip. */