/* Card actions (partials/card-actions.hbs, card-actions.js): a quiet glass plate on the card's corner, a
   local text plate, never a veil over the image. Revealed on hover/focus with a mouse, always shown on
   touch; a saved card keeps its mark. The menu wears the header tooltip's gold-bordered skin. */
/* Shared control tokens for every CSI action surface (this file loads on every page, csi-actions-assets.hbs):
   icons at full ink, outlines at >= 3:1 against the house black (WCAG 1.4.11), the site blue when on. */
:root {
    --csi-ink: #fff;
    --csi-line-gold: rgba(212, 175, 55, 0.58);  /* action buttons: 3.7:1 on #0a0a10 */
    --csi-line: rgba(236, 240, 246, 0.42);      /* fields, segments and other neutral outlines: 3.6:1 */
    --csi-on: #0071e3;                          /* pressed, saved, playing: filled in the site blue */
}
.post-card:has(> .ca), .post-card:has(> * > .ca) { position: relative; }
.ca { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; display: flex; gap: 0.35rem; }
.ca__btn {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
    border: 1px solid var(--csi-line-gold); border-radius: 50%; background: rgba(6, 6, 11, 0.78);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--csi-ink); cursor: pointer;
    transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ca__btn svg { stroke-width: 2; }
.ca__btn:hover { border-color: var(--noble-gold, #D4AF37); transform: translateY(-1px); }
.ca__btn:focus-visible { outline: 2px solid var(--accent-glow, #00a3ff); outline-offset: 2px; }
.ca__save[aria-pressed="true"], .ca-mark[aria-pressed="true"] { border-color: var(--accent-glow, #00a3ff); background: var(--csi-on); }
.ca__save[aria-pressed="true"] svg, .ca-mark[aria-pressed="true"] svg { fill: currentColor; }
.ca__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
    .ca .ca__btn { opacity: 0; }
    .ca .ca__save[aria-pressed="true"], .post-card:hover .ca .ca__btn, .ca:focus-within .ca__btn, .ca__btn[aria-expanded="true"] { opacity: 1; }
}
.post-card:has(.ca) { -webkit-touch-callout: none; } /* long press opens the card menu, not the system preview */

.ca-menu {
    position: absolute; z-index: 990; /* under the site header (1000) */ min-width: 230px; max-width: min(320px, calc(100vw - 16px)); padding: 0.35rem;
    border: 1px solid rgba(212, 175, 55, 0.45); border-radius: 10px; background: rgba(10, 10, 16, 0.98);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); font-family: var(--font-body, Inter, sans-serif); overflow-y: auto;
}
.ca-menu__item {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 40px; padding: 0 0.8rem;
    border: 0; border-radius: 6px; background: none; color: rgba(255, 255, 255, 0.9); font-family: var(--font-body, Inter, sans-serif); font-size: 0.88rem; font-weight: 500; line-height: 1.3;
    letter-spacing: 0; text-align: start; text-decoration: none; cursor: pointer;
}
.ca-menu__item:hover, .ca-menu__item:focus-visible { background: rgba(255, 255, 255, 0.06); color: #fff; outline: none; }
.ca-menu__item:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-glow, #00a3ff); }
.ca-menu__item[aria-checked="true"] { color: #7cc4ff; }
.ca-menu__item[aria-checked="true"]::after { content: "\2713"; font-weight: 700; }
.ca-menu__item[data-ca-action="back"] { color: rgba(255, 255, 255, 0.6); border-top: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0 0 6px 6px; }
@media (prefers-reduced-motion: reduce) { .ca__btn { transition: none; } .ca__btn:hover { transform: none; } }

/* Navigator and Pocket: a save mark on a revealed previous issue and on the choosing strip's rows only.
   The marks sit beside the links (never inside), so tap / second tap / long press and slide-to-choose are unchanged. */
.ca-mark { position: absolute; z-index: 4; width: 34px; height: 34px; }
.ca-mark--prior { opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0s linear 0.5s; }
.ld-prior.is-selected + .ca-mark--prior, .ld-poster-card.is-msg .ca-mark--prior, .ld-prior:hover + .ca-mark--prior,
.ca-mark--prior:hover, .ca-mark--prior:focus-visible { opacity: 1; visibility: visible; transition: opacity 0.15s ease, visibility 0s; }
.tp-pick.has-ca-marks a[role="menuitem"] { padding-inline-end: 52px; }
.ca-mark--row { right: 12px; }
.ca-mark--card { top: 12px; right: 12px; }
@media (prefers-reduced-motion: reduce) { .ca-mark--prior { transition: none; } }