/* ===== card hover quick actions (the keyboard bundle, notes/kbd_bundle_routes.md §4) =====
   Two SIBLING buttons of the role="button" card (the status dot's
   a11y trick - never nest interactives inside role="button"), pinned to
   the card's top-right corner. Hidden until the card is hovered or
   something inside .issue-card is focused (focus-within covers Tab
   reaching the buttons themselves), always visible on touch devices
   where hover doesn't exist. pointer-events: none while hidden so the
   corner never blocks card clicks.

   v2 (notes/makeover_design_language.md): de-staled - the old sheet
   read a foreign token set (fg-text tokens + paper literals); it now
   builds on the app.css vocabulary like every other sheet, rides the
   --r-sm / --dur-fast discipline, and carries the §2 tokens with
   working fallbacks until M1 lands them. */

.issue-card > .card-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: flex;
  gap: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast, 120ms) var(--ease, ease);
}

.issue-card:hover > .card-actions,
.issue-card:focus-within > .card-actions {
  opacity: 1;
  pointer-events: auto;
}

/* No hover on touch - the actions are simply there. */
@media (hover: none) {
  .issue-card > .card-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

/* The action chip: a quiet raised pebble on the card (bg-2 tier is
   the card itself; the chip reads by border + shadow-1 lift, §3
   rule 1 - a card on a card is still a raised thing). */
.card-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 var(--sp-1, 4px);
  font-size: var(--size-xs, 11px);
  line-height: 1;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 5px);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: color var(--dur-fast, 120ms) var(--ease, ease),
    background var(--dur-fast, 120ms) var(--ease, ease),
    border-color var(--dur-fast, 120ms) var(--ease, ease);
}

.card-act:hover {
  color: var(--text);
  background: var(--bg-3);
  border-color: var(--border-strong);
}

.card-act:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent));
}