/**
 * @file thread-list.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The person's conversations: one row each, the open one on the sun, a way to delete. Drawn by
 *   components/ThreadList.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.4.1 — 2026-09-27 — The open row's line under the name takes the row's words' colour (ink on the
 *     sun in AIMEAT, so nothing changes there; readable on Pebble's dark open row).
 *   v1.4.0 — 2026-09-26 — The person tone's name turns coral under the pointer, as main's person
 *     heading in Messages did (put back).
 *   v1.3.0 — 2026-09-26 — The line under a name keeps to one line, cut short; on the open row it is
 *     dark; a count on a row; the person tone (Jouni's decision "Conversation list").
 *   v1.2.0 — 2026-09-24 — The corner and the chosen row's rule read the theme's shape values (a move).
 *   v1.1.0 — 2026-09-24 — Delete is the small icon button; only its place and showing stay here.
 *   v1.0.0 — 2026-09-23 — Moved unchanged from css/parts*.css (UI consolidation phase 1, a move).
 */

.poster-thread-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.poster-thread {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--shape-corner-control);
}
.poster-thread--active { background: var(--sun); border-bottom: var(--shape-frame) solid var(--shape-rule-colour); }
.poster-thread-open {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 9px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  font: inherit;
}
.poster-thread-title {
  font-size: 0.86rem;
  font-weight: var(--weight-heavy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.poster-thread-sub {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-dim);
  /* One line, cut short: it can carry the last message of a conversation. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A number on a row (the unread count) sits between the words and the delete. */
.poster-thread > .poster-count { flex: none; }
/* Delete is the small icon button (poster.css .poster-icon--small, Jouni's decision "Icon button");
   this keeps its place and when it shows. */
.poster-thread-del {
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity 0.15s;
}
.poster-thread:hover .poster-thread-del, .poster-thread--active .poster-thread-del { opacity: 1; }
/* ── Words on the sun stay ink in every theme (moved from profile-poster.css, same selectors) ── */
.poster-thread--active { color: var(--on-sun); }
/* On the open row the line under the name takes the words-on-sun colour too: grey there read 2.7:1
   (1.3:1 dark). */
.poster-thread--active .poster-thread-sub { color: inherit; }

/* ── The person tone (ThreadPerson): a heading over one person's conversations that opens and closes
   them: the arrow, a small framed picture, the name, the presence word and the two counts, named ── */
.poster-thread-person {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: 100%; padding: 10px 0 6px;
  background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.poster-thread-person-name { font-weight: var(--weight-heavy); font-size: .92rem; }
/* The name turns coral under the pointer: the heading is a control (main's .inbox-conv-group-head). */
.poster-thread-person:hover .poster-thread-person-name { color: var(--accent); }