/* pc-action-tips.css: the post action row is ICONS ONLY, and each button's words show in a small pop-up on hover and on
 * keyboard focus (STAGING-ADAPTER ICON-ACTIONS, Waqas 2026-10-31: "this section should only have icons rather then the
 * text along with it ... when hovered, they should give a small pop-up of the text of that button").
 *
 * Loaded by feed.html (feed cards, the welcome card, the follow chip, the moderator / AI pin button) and saved.html.
 * The words live in two attributes the page scripts write: aria-label (what a screen reader says) and data-tip (what
 * the pop-up shows; state-aware, e.g. Save / Saved, Pin for 24 hrs / Unpin). There is no title= on these buttons: the
 * browser's own tooltip is slow, unstyled, and would show a second copy over this one.
 *
 * The pop-up is the inverse of the surface (dark chip on the light theme, light chip on the dark theme), the common
 * tooltip convention, so it reads on either card. It opens upward, over the card's own content, so the card edge never
 * clips it; buttons right of the row's spacer (Save, Report, Pin, Edit, Delete) anchor it to their right edge so it never
 * runs off the card at the right. Hover only opens it on devices that really hover, so a tap on a phone never leaves
 * one stuck open; keyboard focus (:focus-visible, not a tap's focus) always opens it.
 * Every rule is under `html:root .post-card .post-actions` (specificity 0,3,1 before the button: one class more than
 * pc-pages-r2 M08's `html[data-r2="feed"] .post-actions ...` and two more than feed.html's `.post-actions .save-btn`), so
 * it wins whatever order the stylesheets load in, never by link order. The tip opens only on a control that is not
 * :disabled (a like / pin in flight), written INTO the opening selectors so no later rule has to out-rank them. */

/* ── Sizing: one square-ish target per action, 40px on a pointer device, 34px wide x 40px tall on a phone ── */
html:root .post-card .post-actions { align-items: center; }
html:root .post-card .post-actions .reaction-btn,
html:root .post-card .post-actions .save-btn,
html:root .post-card .post-actions .pc-follow-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box; min-width: 40px; height: 40px; width: auto; padding: 0 11px; flex: none;
  line-height: 1;
}
html:root .post-card .post-actions .reaction-btn svg,
html:root .post-card .post-actions .save-btn svg,
html:root .post-card .post-actions .pc-follow-chip svg { width: 17px; height: 17px; flex: none; display: block; }
html:root .post-card .post-actions .count { font-variant-numeric: tabular-nums; }
/* the icon alone carries the on state now that the word is gone: a liked thumb and a saved bookmark are filled */
html:root .post-card .post-actions .reaction-btn.pc-on[data-act="like"] svg,
html:root .post-card .post-actions .save-btn.pc-on svg { fill: currentColor; fill-opacity: 0.22; }
html:root .post-card .post-actions .save-btn.pc-on svg { fill-opacity: 1; }
html:root .post-card .post-actions .pc-owner-actions:not([hidden]) { display: inline-flex; gap: inherit; }

/* phones: 7 controls (a moderator's row: Like, Comment, Share, Follow, Save, Report, Pin) fit one line at 360px
   (measured: 34px + 2px gaps leaves ~20px spare on a 360px card; 36px + 4px overflowed it). Counts are compact (1.2k,
   pcCompactCount in the scripts), and if a row is still too wide (a narrower phone, a long localised count) it WRAPS
   onto a second line instead of running off the card; the wrapped buttons sit at the right (justify-content: flex-end; on
   the first line the spacer takes the free space, so nothing moves there). */
@media (max-width: 480px) {
  html:root .post-card .post-actions { gap: 4px 2px; flex-wrap: wrap; justify-content: flex-end; }
  html:root .post-card .post-actions .spacer { flex: 1 1 0; min-width: 0; }
  html:root .post-card .post-actions .reaction-btn,
  html:root .post-card .post-actions .save-btn,
  html:root .post-card .post-actions .pc-follow-chip { min-width: 34px; padding: 0 7px; gap: 3px; }
  html:root .post-card .post-actions .count { font-size: 12px; letter-spacing: -0.01em; }
  html:root .post-card .post-actions .reaction-btn:has(.count) { padding: 0 5px; }
  html:root .post-card .post-actions .reaction-btn svg,
  html:root .post-card .post-actions .save-btn svg,
  html:root .post-card .post-actions .pc-follow-chip svg { width: 16px; height: 16px; }
}

/* ── The pop-up ── */
html:root .post-card .post-actions [data-tip] { position: relative; }
html:root .post-card .post-actions [data-tip]::after {
  content: attr(data-tip);
  position: absolute; z-index: 40; bottom: calc(100% + 8px); left: 50%;
  transform: translate(-50%, 4px);
  padding: 5px 9px; border-radius: 6px;
  font: 600 12px/1.25 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.01em;
  white-space: nowrap; text-transform: none;
  color: #0b1424; background: #e8edf5; border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
html:root[data-theme="light"] .post-card .post-actions [data-tip]::after {
  color: #ffffff; background: #1a1a2e; border-color: rgba(26, 26, 46, 0.9);
  box-shadow: 0 6px 18px rgba(30, 60, 90, 0.28);
}
/* right of the spacer: hang the pop-up from the button's right edge so it stays inside the card */
html:root .post-card .post-actions .spacer ~ [data-tip]::after,
html:root .post-card .post-actions .spacer ~ * [data-tip]::after { left: auto; right: 0; transform: translate(0, 4px); }
/* the very first button sits on the card's left edge: hang it from the left edge */
html:root .post-card .post-actions > [data-tip]:first-child::after { left: 0; transform: translate(0, 4px); }

html:root .post-card .post-actions [data-tip]:not([data-tip=""]):not(:disabled):focus-visible::after {
  opacity: 1; visibility: visible; transition-delay: 0s;
  transform: translate(-50%, 0);
}
@media (hover: hover) and (pointer: fine) {
  html:root .post-card .post-actions [data-tip]:not([data-tip=""]):not(:disabled):hover::after {
    opacity: 1; visibility: visible; transition-delay: .15s, .15s, 0s;
    transform: translate(-50%, 0);
  }
  html:root .post-card .post-actions .spacer ~ [data-tip]:not([data-tip=""]):not(:disabled):hover::after,
  html:root .post-card .post-actions .spacer ~ * [data-tip]:not([data-tip=""]):not(:disabled):hover::after,
  html:root .post-card .post-actions > [data-tip]:first-child:not([data-tip=""]):not(:disabled):hover::after { transform: translate(0, 0); }
}
html:root .post-card .post-actions .spacer ~ [data-tip]:not([data-tip=""]):not(:disabled):focus-visible::after,
html:root .post-card .post-actions .spacer ~ * [data-tip]:not([data-tip=""]):not(:disabled):focus-visible::after,
html:root .post-card .post-actions > [data-tip]:first-child:not([data-tip=""]):not(:disabled):focus-visible::after { transform: translate(0, 0); }

@media (prefers-reduced-motion: reduce) {
  html:root .post-card .post-actions [data-tip]::after { transition: none; }
}

/* ── ROOM-COUNT (Waqas 2026-10-31: "no AI have commented yet" on a Question the AI experts HAD answered) ──
   The AI expert answers button (pc-ahsen-wire.js ROOM-COUNT R1): sits right after Comment, robot glyph + count, in the
   same purple as the thread's "AI expert answer" label (pc-ahsen-feed-actions.js FR29f), so it reads as "AI answered"
   at a glance without any words in the icon-only row. Text contrast >= 4.5:1 on both card surfaces. */
html:root .post-card .post-actions .reaction-btn.pc-room-chip {
  color: #b3a6ff; background: rgba(124, 92, 255, 0.14); border-color: rgba(124, 92, 255, 0.40); font-weight: 700;
}
html:root[data-theme="light"] .post-card .post-actions .reaction-btn.pc-room-chip { color: #5236d1; background: rgba(124, 92, 255, 0.10); border-color: rgba(82, 54, 209, 0.35); }
/* hover only on a device that really hovers (as the pop-up above), so a tap never leaves it lit */
@media (hover: hover) and (pointer: fine) {
  html:root .post-card .post-actions .reaction-btn.pc-room-chip:hover { color: #d0c7ff; background: rgba(124, 92, 255, 0.24); border-color: rgba(124, 92, 255, 0.60); }
  html:root[data-theme="light"] .post-card .post-actions .reaction-btn.pc-room-chip:hover { color: #3f25b8; background: rgba(124, 92, 255, 0.18); }
}
html:root .post-card .post-actions .reaction-btn.pc-room-chip:focus-visible { outline: 2px solid #7c5cff; outline-offset: 2px; }
/* the answers block a click on that button brought into view (ROOM-COUNT R3): a short outline, then back to normal */
html:root .post-card .pc-room.pc-room-focus { outline: 2px solid rgba(124, 92, 255, 0.70); outline-offset: 4px; border-radius: 10px; transition: outline-color .4s ease; }
html:root .post-card .pc-room:focus { outline: none; }
html:root .post-card .pc-room.pc-room-focus:focus { outline: 2px solid rgba(124, 92, 255, 0.70); }