/**
 * @file ai-notice.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description That a machine is on the other end, said where a person is looking, with a way to read more.
 *   Drawn by components/AiNotice.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-24 — "What does that mean?" moved to poster.css as the notice tone.
 *   v1.0.0 — 2026-09-23 — Moved unchanged from css/parts*.css (UI consolidation phase 1, a move).
 */

/* That a machine is on the other end. In the rail on a desktop; on a phone the main copy shows. */
.poster-ai-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0;
  font-weight: var(--weight-heavy);
  font-size: 0.74rem;
  color: var(--text-dim);
  line-height: 1.45;
}
.poster-ai-notice-line { flex: 1 1 100%; }
.poster-ai-notice--compact { padding: 0; }
.poster-ai-notice-short { font-size: 0.74rem; color: var(--text-dim); }
/* "What does that mean?" is the action link's notice tone (poster.css, Jouni's decision "Small link"). */
.poster-ai-notice--main { display: none; }
@media (max-width: 760px) {

  /* The notice where the person is looking, one line, above the words. */
  .poster-ai-notice--main { display: flex; flex-wrap: nowrap; padding: 6px 12px 0; }
  .poster-ai-notice--main .poster-ai-notice-line { flex: 1 1 auto; min-width: 0; }
  .poster-ai-notice--main .poster-ai-notice-more { flex: none; white-space: nowrap; }
}