/**
 * @file public/css/components/card-menu.css
 * @description The dots in the top right corner of a card, and the menu they open.
 *
 *   Its own file under css/components/ because that is the directory spa.html actually loads.
 *   The first attempt appended these rules to css/components.css, which nothing links: the dots
 *   rendered black and unpositioned, 140px down the card instead of in its corner. A stylesheet
 *   nobody loads is not a stylesheet.
 * @version-history
 *   v1.0.0 — 2026-08-09 — Initial.
 */

/* ── Card menu: the dots in the top right corner of anything you can act on ────────────────────
   Always the same corner, on every card, so a person learns it once. The dots ARE the state
   light: grey is not on your open items, amber is waiting, green and pulsing is somebody working
   on it right now. Three dots rather than a hamburger because the hamburger already means site
   navigation in this product's own top bar. */
.card-menu { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; }
.card-menu-dots {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; line-height: 1;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 1.15rem; cursor: pointer; color: var(--text);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
/* A resting chip, not a bare glyph. Without the fill and the border this read as the ellipsis a
   truncated string leaves behind, and nobody could tell it was a button until the pointer arrived. */
.card-menu-dots:hover { border-color: var(--muted); }

/* State is a FILLED SHAPE, not the hue of a glyph. Measured on the first version: amber glyph on
   card 2.1:1, green 2.5:1, grey 4.8:1 — so a card that WAS on your list read fainter than one that
   was not, which is the light inverted. A filled chip carries the state at the contrast of the fill
   and stays legible for anyone who does not separate those hues at all. */
/* A light tint, a strong border and dark ink — not a saturated fill.
   The first attempt used --warning and --success straight and measured 2.1:1 and 2.43:1 as a 30px
   chip, under the 3:1 a non-text component needs. The second darkened them to #B45309 and #047857,
   which cleared 4.8 and 5.25 and stopped looking like amber and green: it read as brown, and brown
   reads as a warning rather than as "waiting". Contrast comes from the border and the ink here, so
   the hue survives being legible. */
.card-menu-dots--open {
  background: #FEF3C7; border-color: #B45309; color: #78350F;
}
.card-menu-dots--working {
  background: #D1FAE5; border-color: #047857; color: #065F46;
  animation: card-menu-pulse 1.8s ease-in-out infinite;
}
/* Working is the one state about this moment rather than a standing fact, so it is the one that moves. */
@keyframes card-menu-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .card-menu-dots--working { animation: none; } }

.card-menu-list {
  position: absolute; top: calc(100% + 0.25rem); right: 0; min-width: 14rem;
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.18));
  overflow: hidden;
}
.card-menu-item {
  background: none; border: 0; text-align: left; cursor: pointer;
  padding: 0.6rem 0.8rem; font-size: 0.88rem; color: var(--text);
}
.card-menu-item:hover { background: var(--bg); }
.card-menu-item + .card-menu-item { border-top: 1px solid var(--border); }