/* =====================================================================
   Card menu — Figma "Menu" button (Button XS · Ghost · Icon only, Lucide ellipsis-vertical) + Card / Action Menu (1573:98).
   Placement: right end of the card's tag row (story, event) or metadata row (video, newsletter issue).
   Visibility (Isabel's rule, 2026-10-22): every content card shows ⋮ only on Hover, Pressed, keyboard focus and Menu open on desktop
   (Figma draws it in Default on Story Main and the homepage compact card: flagged). List cards (small screens) and touch screens
   (no hover) always show it.
   The popover is one element built by js/site.js; rows: Save, Share, Follow topic, Not interested, Go to author.
   ===================================================================== */
.card-menu-btn{position:relative;z-index:3;flex:none;color:var(--text-primary)}
.card-menu-btn[aria-expanded="true"],.card-menu-btn.is-pressed{background:var(--button-nav-ghost-bg-pressed)}
.story-card__tags-row,.event-card__tags-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);min-height:32px}
.story-card__tags-row .badge-row,.event-card__tags-row .event-card__meta{min-width:0}
.video-card__meta-row{display:flex;align-items:center;gap:var(--space-6);min-height:20px}
.video-card__meta-row .video-card__meta{flex:1;min-width:0}
.nl-issue-card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);min-height:20px}

/* hidden until hover / focus / open on cards that show it only on hover */
:where(.story-card:not(.story-card--list),.event-card:not(.event-card--featured),.video-card,.nl-issue-card) .card-menu-btn{opacity:0;transition:opacity .15s}
:where(.story-card,.event-card,.video-card,.nl-issue-card):is(:hover,:focus-within,.is-hover,.is-pressed,.is-menu) .card-menu-btn,
.card-menu-btn[aria-expanded="true"]{opacity:1}
@media (hover:none){ .card-menu-btn{opacity:1 !important} }
/* the video meta row reserves the button's space so the text does not jump */
.video-card__meta-row .card-menu-btn{margin:calc(-1 * var(--space-6)) 0}
.video-card--dark .card-menu-btn{color:var(--neutral-0)}

/* Card / Action Menu */
.card-menu{position:fixed;z-index:120;box-sizing:border-box;width:200px;display:flex;flex-direction:column;padding:var(--space-4) 0;
  background:var(--surface-default);-webkit-backdrop-filter:blur(var(--blur-glass-bar));backdrop-filter:blur(var(--blur-glass-bar));   /* Figma 1573:98: surface/default, border/subtle, radius lg, Elevation/Glass bar shadow */
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-glass-bar);
  opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s}
.card-menu.is-open{opacity:1;transform:none}
.card-menu[hidden]{display:none}
.card-menu--static{position:relative;opacity:1;transform:none}
.card-menu__item{display:flex;align-items:center;gap:var(--space-8);height:40px;padding:var(--space-8) var(--space-16);box-sizing:border-box;border:0;border-radius:var(--radius-md);
  background:none;color:var(--text-primary);font:var(--text-xs);text-align:left;text-decoration:none;cursor:pointer;width:100%}
.card-menu__item svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card-menu__item:hover,.card-menu__item:focus-visible{background:var(--button-nav-ghost-bg-hover);outline:none}
.card-menu__item[aria-checked="true"] svg path:first-child{fill:currentColor}
.card-menu--sheet .card-menu__item{min-height:44px}
.card-hidden{display:none !important}
@media (prefers-reduced-motion:reduce){.card-menu{transition:none}}

/* Phones (Prompt 28; Figma Stories / App — Card menu 1567:74110 = App / Action Sheet): the same menu opens as a bottom sheet over a
   scrim, with a grabber and the card as context (96 × 54 thumb, title, "author · topic"). 28 radius and the scrim = not Figma tokens yet. */
.card-menu-scrim{position:fixed;inset:0;z-index:119;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s}
.card-menu-scrim[hidden]{display:none}
.card-menu-scrim.is-open{opacity:1}
.card-menu.card-menu--sheet{left:var(--space-10);right:var(--space-10);top:auto;bottom:max(var(--space-10),env(safe-area-inset-bottom));width:auto;max-width:390px;margin:0 auto;gap:var(--space-4);
  padding:var(--space-8) var(--space-16) var(--space-12);border-radius:28px;background:var(--surface-background);box-shadow:var(--shadow-sheet);transform:translateY(16px)}
.card-menu--sheet.is-open{transform:none}
.card-menu__grabber{align-self:center;width:40px;height:4px;border-radius:var(--radius-full);background:var(--border-strong)}
.card-menu__context{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) 0;min-width:0}
.card-menu__thumb{flex:none;width:96px;height:54px;border-radius:var(--radius-md);object-fit:cover}
.card-menu__ctext{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.card-menu__ctitle{font:var(--text-row-title);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-menu__cmeta{font:var(--text-xs);color:var(--text-secondary)}
.card-menu__divider{height:1px;background:var(--border-subtle)}
@media (prefers-reduced-motion:reduce){.card-menu-scrim,.card-menu--sheet{transition:none}}