/*
 * <ActionRow> — paired vote+comments cluster + right-anchored kebab.
 * Bare at rest, hover paints a soft bg pill, voted flips the whole
 * cluster to the info hue (currentColor on the SVGs makes both
 * icons + the count + the · all recolor together).
 */

.action-row {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 12px;
  /* Tabular nums so the score column doesn't jiggle when a vote
     flips 999 → 1.0k or 9 → 10. */
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  /* The cluster's hover-pill extends 6px past the visible text via
     padding + negative margin. The row needs enough horizontal
     headroom for that to not get clipped against neighbors. */
  line-height: 1;
}

.action-row.is-voted .action-cluster {
  color: var(--accent);
}
.action-row.is-voted .action-cluster .action-sep {
  /* In the voted state the dot should pick up the same accent hue
     so the cluster reads as one tinted unit. currentColor doesn't
     reach the dot because we paint it explicitly in the rest state
     (rule below). Match it here. */
  color: var(--accent);
}

/* ─── Cluster (vote + comments halves, INDEPENDENT hover pills) ──── */

/* The cluster is now just an alignment container. Each half owns
   its own hover pill so the row reads as TWO buttons sharing a
   dot separator, not one mashed unit. Negative left margin pulls
   the first half's left padding back so the visible triangle sits
   flush with the left edge of the parent (matches the title and
   byline above on /feed and /home). */
.action-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.action-half {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* No padding on the half itself — hover is color-only, so the
     content sits flush against the parent's left edge (aligning
     with the title and byline above on /feed). */
  padding: 0;
  transition: color var(--duration-fast) var(--ease-out);
}
.action-half:hover,
.action-half:active {
  color: var(--accent-deep);
}
.action-half:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.action-sep {
  display: inline-block;
  margin: 0 8px;
  color: var(--ink-dim);
  /* Slightly larger so the dot reads as a separator, not a
     decimal. */
  font-size: 14px;
  line-height: 0;
  user-select: none;
}

/* Inline-links slot — quiet sibling links rendered between the
   vote/comments cluster and the kebab. Same color + size as the
   cluster's count text so they read as actions, not buttons. */
.action-row .action-inline {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  font-size: inherit;
}
.action-row .action-inline:hover {
  color: var(--ink);
  text-decoration-style: solid;
}

.action-ic {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  flex-shrink: 0;
}

.action-count {
  display: inline-block;
}

/* ─── Menu kebab (own tap target, own hover pill) ──────────── */

/* Kebab sits IMMEDIATELY next to the comments half — not pinned
   right. Pinning it to the row edge buried it in whitespace; users
   missed it entirely. Keeping it adjacent makes the trio (vote |
   comments | menu) read as one action row. */
.action-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.action-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Override framework `<button>` defaults (44px height, padding,
     line-height, border, bg) — kebab is inline glyph chrome, not
     a sized button. */
  height: auto;
  min-height: 0;
  line-height: 1;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Color-only hover, matching the action halves. No bg pill, no
     border tint — those come from @elements/style/button.css's
     default `button:hover { background; border-color }` which we
     have to explicitly cancel. */
  transition: color var(--duration-fast) var(--ease-out);
}
.action-menu-ic {
  width: 16px;
  height: 16px;
  display: block;
}
.action-menu:hover {
  color: var(--accent-deep);
  background: transparent;
  border-color: transparent;
}
/* No `:active` button-press state. */
.action-menu:active {
  background: transparent;
  border-color: transparent;
  transform: none;
}
.action-menu:focus,
.action-menu:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ─── Dropdown panel ────────────────────────────────────────── */

.action-menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  /* Left-anchored to the kebab — the panel opens DOWN-AND-RIGHT
     from where the cursor clicked. Right-anchored placement put
     the panel to the left of the kebab and felt like a misclick. */
  left: 0;
  right: auto;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 4px 0;
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.08);
  min-width: 9rem;
  z-index: 20;
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: default;
  /* Force any slot children (buttons, anchors) to read as menu
     items by default — consumers can still override. */
}
.action-menu-panel > * {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  /* Framework's <button> default applies height: var(--button-height)
     (36px), which makes a <button> menu item taller than an <a>
     menu item. Force height: auto + min-height so every child reads
     as the same visual height regardless of tag. */
  height: auto;
  min-height: 0;
  line-height: 1.4;
  padding: 7px 14px;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: none;
  border-radius: 0;
  box-sizing: border-box;
}
.action-menu-panel > *:focus,
.action-menu-panel > *:focus-visible {
  outline: none;
  box-shadow: none;
}
.action-menu-panel > *:active {
  transform: none;
  background: var(--bg-soft);
}
.action-menu-panel > *:hover {
  background: var(--bg-soft);
  color: var(--ink);
}
.action-menu-panel > .action-menu-divider {
  height: 1px;
  margin: 4px 0;
  padding: 0;
  background: var(--rule);
  cursor: default;
  pointer-events: none;
}
.action-menu-panel > .action-menu-divider:hover {
  background: var(--rule);
}

/* Section eyebrow inside a menu — "MOVE TO" label above the
   transition options. Quiet, non-interactive, monospace caps. */
.action-menu-panel > .action-menu-eyebrow {
  display: block;
  padding: 8px 14px 4px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  cursor: default;
  pointer-events: none;
  background: transparent;
}
.action-menu-panel > .action-menu-eyebrow:hover {
  background: transparent;
  color: var(--ink-dim);
}

/* ─── Compact variant ───────────────────────────────────────── */

.action-row.is-compact {
  font-size: 11px;
}
.action-row.is-compact .action-cluster {
  padding: 4px 6px;
  margin: -4px -6px;
}
.action-row.is-compact .action-menu {
  width: 28px;
  height: 28px;
}