/**
 * @file public/css/components/card-menu.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @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.6.2 — 2026-09-27 — The framed list's shadow and its rows' corners read the shape tokens (the
 *     same values in AIMEAT; check:shape-tokens), appcat parity (dialogs).
 *   v1.6.1 — 2026-09-27 — The framed list at the old .backup-menu's size: 220px with its frame, rows
 *     2px apart and 10px in (appcat parity).
 *   v1.6.0 — 2026-09-27 — The poster frame, .card-menu-list--framed (CardMenu `framed`, appcat's
 *     "Backups and imports" menu); additive.
 *   v1.5.0 — 2026-09-27 — The list is fixed on the page (CardMenu.js places it from the dots, upward
 *     when there is no room below), so a scrolling parent no longer clips it; its rows are actions in
 *     the full text colour, the accent under the pointer and on focus, Delete in its danger colour.
 *   v1.4.0 — 2026-09-26 — The line between two groups of rows (.card-menu-sep), for the Settings menus that had one.
 *   v1.3.0 — 2026-09-26 — The inline place: the dots in a line of words (Jouni's decision "Message").
 *   v1.2.0 — 2026-09-24 — The rows are the shared menu row.
 *   v1.1.0 — 2026-09-24 — The dots are the small icon button; the state fills stay here.
 *   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; }
/* The dots are the small icon button (poster.css .poster-icon--small, Jouni's decision "Icon
   button"): a framed square, not a bare glyph, which would read as the ellipsis a truncated string
   leaves behind. The fills below say the state and stay this part's own. */
.card-menu-dots { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }

/* 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: var(--state-open-bg); border-color: var(--state-open-border); color: var(--state-open-ink);
}
.card-menu-dots--working {
  background: var(--state-working-bg); border-color: var(--state-working-border); color: var(--state-working-ink);
  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; } }

/* The list stands on the page, placed by CardMenu.js from the dots' rectangle (below them, or above
   when there is no room below), so no scrolling parent clips it. It stays hidden until it is placed,
   so it never flashes at the page's corner. */
.card-menu-list {
  position: fixed; top: 0; left: 0; z-index: 1000; min-width: 14rem; max-height: calc(100vh - 8px); overflow-y: auto;
  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));
  visibility: hidden;
}
.card-menu-list--placed { visibility: visible; }
/* In a line of words (CardMenu inline): the dots stand where they are written, and the menu opens
   from their left (from-start) or right edge (from-end), so it stays on the page. */
.card-menu--inline { position: relative; top: auto; right: auto; display: inline-flex; }
/* The rows are the shared menu row (poster.css .poster-menu-row, Jouni's decision "Menu row"): an
   action, so its words are the full text colour, and the accent under the pointer and on focus; a
   row that removes something keeps its danger colour. */
.card-menu-item { cursor: pointer; }
.card-menu-list .card-menu-item { color: var(--text); }
.card-menu-list .card-menu-item:hover,
.card-menu-list .card-menu-item:focus-visible { color: var(--accent); outline: none; border-color: var(--accent); }
.card-menu-list .card-menu-item.poster-menu-row--danger { color: var(--danger-fg); }
.card-menu-list .card-menu-item.poster-menu-row--danger:hover,
.card-menu-list .card-menu-item.poster-menu-row--danger:focus-visible { color: var(--danger-fg); border-color: var(--danger-fg); }
/* A line between two groups of rows (an action item { divider: true }), as the Settings kebab
   menu drew it (.pj-menu-sep). */
.card-menu-sep { height: 1px; background: var(--border); margin: 0.25rem 0.3rem; }
/* The poster frame (CardMenu `framed`, added by appcat): the ink frame with the sun shadow on the
   page's ground, its rows plain bold words that stand on the sun under the pointer (the old app
   catalogue's "Backups and imports" menu, .backup-menu). */
.card-menu-list--framed { box-sizing: border-box; gap: 2px; min-width: 220px; padding: 6px 0; background: var(--bg); border: var(--shape-frame) solid var(--shape-frame-colour); border-radius: var(--shape-corner); box-shadow: var(--shape-shadow-action); }
.card-menu-list--framed .card-menu-item { border: 0; border-radius: var(--shape-corner-control); background: transparent; padding: 8px 10px; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: .9rem; white-space: nowrap; }
.card-menu-list--framed .card-menu-item:hover,
.card-menu-list--framed .card-menu-item:focus-visible { background: var(--shape-chosen-ground); color: var(--on-sun); }