/*
 * The forum (arch §7 "Forums").
 *
 * Inside the module, registered by App\Forums\ForumsPlugin under its own asset
 * package, so that extracting `app/Forums` takes its stylesheet with it. Class
 * names are prefixed `fo-` rather than `ac-` for the same reason: `ac-` is the
 * application's conversations vocabulary and the two must not have to agree.
 *
 * A message rendered inside a topic is still `ac-message` and its body is still
 * lore-content.css — that is §7's one model family showing through, and it is
 * correct: a post looks like a message because it is one.
 */

.fo-boards,
.fo-topics {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fo-crumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
}

.fo-crumb a { color: rgb(79 70 229); text-decoration: none; }
.fo-crumb a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- a board -- */

.fo-board,
.fo-topic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 12rem);
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.75rem;
    background: #fff;
}

@media (max-width: 48rem) {
    .fo-board,
    .fo-topic { grid-template-columns: minmax(0, 1fr); }
    .fo-board-last,
    .fo-topic-last { text-align: left; }
}

/* A pinned topic is marked by its rail rather than by moving it somewhere else:
   it is still in the list, it is just first. */
.fo-topic.is-pinned { border-left: 3px solid rgb(129 140 248); }

.fo-board-name,
.fo-topic-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(24 24 27);
}

.fo-board-name a { color: inherit; text-decoration: none; }
.fo-board-name a:hover { text-decoration: underline; }

.fo-board-desc,
.fo-topic-meta {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: rgb(113 113 122);
}

.fo-board-counts,
.fo-topic-counts {
    display: flex;
    gap: 1.25rem;
    margin: 0;
}

.fo-board-counts div,
.fo-topic-counts div { text-align: center; }

.fo-board-counts dt,
.fo-topic-counts dt {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(161 161 170);
}

.fo-board-counts dd,
.fo-topic-counts dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: rgb(63 63 70);
}

.fo-board-last,
.fo-topic-last {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    text-align: right;
    font-size: 0.75rem;
}

.fo-last-topic {
    color: rgb(79 70 229);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fo-last-topic:hover { text-decoration: underline; }
.fo-last-meta { color: rgb(161 161 170); }

/* ------------------------------------------------------------------ tags -- */

.fo-tag {
    flex: none;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.0625rem 0.3125rem;
    border-radius: 0.25rem;
    background: rgb(244 244 245);
    color: rgb(113 113 122);
}

.fo-tag--gm { background: rgb(254 243 199); color: rgb(146 64 14); }
.fo-tag--pinned { background: rgb(224 231 255); color: rgb(55 48 163); }
.fo-tag--locked { background: rgb(254 226 226); color: rgb(153 27 27); }

.fo-pagination { margin-top: 0.5rem; }

/* --------------------------------------------------- a topic, and a new one -- */

.fo-topic-view,
.fo-new-topic {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* The posts get the same frame a chat message does, because they are the same
   component. Only the spacing differs: a forum post is a paragraph, a chat line
   is a sentence. */
.fo-posts { gap: 1.75rem; }

.fo-field { display: flex; flex-direction: column; gap: 0.375rem; }

.fo-field label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(63 63 70);
}

.fo-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.9375rem;
}

.fo-error { margin: 0; font-size: 0.75rem; color: rgb(185 28 28); }

/* ------------------------------------------------------------- dark mode -- */

.dark .fo-board,
.dark .fo-topic { background: rgb(24 24 27); border-color: rgb(63 63 70); }
.dark .fo-board-name,
.dark .fo-topic-title { color: rgb(244 244 245); }
.dark .fo-board-desc,
.dark .fo-topic-meta { color: rgb(161 161 170); }
.dark .fo-board-counts dd,
.dark .fo-topic-counts dd { color: rgb(212 212 216); }
.dark .fo-tag { background: rgb(39 39 42); color: rgb(161 161 170); }
.dark .fo-tag--gm { background: rgb(69 45 6); color: rgb(253 230 138); }
.dark .fo-tag--pinned { background: rgb(49 46 129); color: rgb(224 231 255); }
.dark .fo-tag--locked { background: rgb(69 10 10); color: rgb(254 202 202); }
.dark .fo-crumb a { color: rgb(165 180 252); }
.dark .fo-last-topic { color: rgb(165 180 252); }
.dark .fo-field label { color: rgb(212 212 216); }
.dark .fo-input { background: rgb(39 39 42); border-color: rgb(63 63 70); color: rgb(228 228 231); }
.dark .fo-error { color: rgb(252 165 165); }