/**
 * @file check-item.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description One thing tried or not yet tried: a ticked box on the sun, or a dashed empty one. Drawn by
 *   components/CheckItem.js. Reads only the tokens in theme.css and the shapes in poster.css; a page
 *   never styles it from outside.
 * @usage Linked from public/spa.html in the component block, whose order keeps the order these
 *   rules had when they were one sheet.
 * @version-history
 *   v1.1.0 — 2026-09-26 — The box's frame reads --shape-frame (and, when done, --shape-frame-colour) (a move: the AIMEAT values equal the old ones).
 *   v1.0.0 — 2026-09-23 — Moved unchanged from css/parts*.css (UI consolidation phase 1, a move).
 */

/* ── Achievements: what has been tried, and doors to what has not. A box with a tick when done,
   a dashed empty box when not; the word is the same weight either way. ── */
.poster-check {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0;
  border: 0;
  font-size: var(--text-body); font-weight: var(--weight-heavy); color: var(--text-dim); text-decoration: none;
}
.poster-check:hover { color: var(--accent); }
.poster-check--done { color: var(--text); }
.poster-check-mark {
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--shape-frame) dashed var(--text-muted); color: transparent; font-size: var(--text-small); font-weight: var(--weight-heavy);
}
.poster-check--done .poster-check-mark { border: var(--shape-frame) solid var(--shape-frame-colour); background: var(--sun); color: var(--on-sun); }