/**
 * @file thing-link.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description A thing a person has, as a link: an optional coral count and its name. Drawn by
 *   components/ThingLink.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.0.0 — 2026-09-23 — Moved unchanged from css/parts*.css (UI consolidation phase 1, a move).
 */

.poster-thing {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  padding: 0.2rem 0;
  border: 0; border-bottom: 3px solid transparent;
  background: none; color: var(--text); text-decoration: none;
  font-weight: var(--weight-heavy); font-size: var(--text-md-plus);
  transition: border-color .15s;
}
.poster-thing:hover { border-color: var(--accent); }
.poster-thing-n { font-family: var(--font-poster); font-weight: var(--font-poster-weight); font-size: var(--text-md-plus); color: var(--accent); }
.poster-thing-label { color: var(--text); }
.poster-thing--named { padding: 0.2rem 0; gap: 0.35rem; }
.poster-thing--named .poster-thing-n { font-size: var(--text-body); }
.poster-thing-door {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  color: inherit; text-decoration: none; min-width: 0;
}