/**
 * @file board-notices.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description A board's notices (components/BoardNotice.js): one per row with a rule under it, its
 *   kind as a Tag on the left (a grey dot when it has none), the title as a button that turns coral
 *   under the pointer, the words, who posted it and on which board in typewriter, the replies and the
 *   time in typewriter on the right; a notice's own page shows its text in a reading size. On a phone
 *   the columns stack. A reply under a notice is the Message component's board tone (message.css).
 *   NOTE: this file must be linked in spa.html.
 * @version-history
 *   v1.3.0 — 2026-09-27 — .board-notice-title--still: a title that opens nothing (additive, G5).
 *   v1.2.0 — 2026-09-26 — The rows are the BoardNotice component: the bp- names became its own
 *     (board-notice*), the values unchanged; the reply beside the grey edge moved to message.css
 *     (the Message's board tone).
 *   v1.1.0 — 2026-09-25 — A notice's category is the Tag (.poster-chip, plain), a unification: Jouni's decision "Tag"; its coral capitals go.
 *   v1.0.0 — 2026-09-25 — Moved out of boards-poster.css (UI consolidation phase 5, a move).
 */

.board-notice { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 9rem; gap: 0 1.1rem; padding: .85rem 0; border-bottom: 1px solid var(--border); align-items: start; }
/* The kind is the Tag (.poster-chip, plain): it names a kind. The cell keeps its place. */
.board-notice-kind { padding-top: .2rem; overflow-wrap: anywhere; }
.board-notice-kind--none { color: var(--text-dim); }
.board-notice-body { min-width: 0; }
.board-notice-title { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 800; line-height: 1.3; color: var(--text); text-align: left; display: block; overflow-wrap: anywhere; }
.board-notice-title:hover { color: var(--accent); }
/* A title that opens nothing (BoardNotice without onOpen; the admin Boards page) is words. */
.board-notice-title--still { cursor: default; }
.board-notice-title--still:hover { color: var(--text); }
.board-notice-body p { margin: .25rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--text); max-width: 66ch; overflow-wrap: anywhere; }
.board-notice-by { margin-top: .35rem; font-family: var(--font-mono); font-size: .72rem; line-height: 1.5; color: var(--text-dim); }
.board-notice-by b { color: var(--text); font-weight: 500; }
.board-notice-board { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--accent); }
.board-notice-side { text-align: right; font-family: var(--font-mono); font-size: .72rem; line-height: 1.6; color: var(--text-dim); }
.board-notice-side b { display: block; font-weight: 500; }
.board-notice-text { margin: 1.2rem 0 0; font-size: 1.05rem; line-height: 1.6; color: var(--text); max-width: 66ch; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .board-notice { grid-template-columns: minmax(0, 1fr); gap: .3rem 0; }
  .board-notice-side { text-align: left; }
  .board-notice-side b { display: inline; margin-right: .5rem; }
}