/* forum.css — the community forum surfaces (/community, /community/b/{board},
   /community/reports, /community/t/{id} — FRM, WF-38/WF-40/WF-41). Shared
   community primitives (Composer, tombstones, official tint, attachment strip,
   pager) live in community.css — add ONLY forum-surface styles here.
   Token-bound only. */

/* ============================================================================
   Page shell + shared lines
   ========================================================================== */

.frm {
    min-width: 0; /* rows never push the page sideways (PF-R03) */
}

.frm--narrow {
    max-width: 44rem;
}

.frm-gate {
    color: var(--text-primary);
    font-size: var(--font-size-1);
}

.frm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.frm-join {
    margin: 0;
}

.frm-boardline {
    color: var(--text-secondary);
}

/* Locked (FRM-R13) and archived (FRM-R01) are calm lines in the page's voice —
   states, not warnings. */
.frm-locked,
.frm-archived {
    color: var(--text-primary);
    background-color: var(--surface-raised);
    border-inline-start: 3px solid var(--accent);
    padding: var(--space-sm) var(--space-md);
}

.frm-topicmeta {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* The FRM-R11 refusal + the FRM-R10 draft-drift line — quiet in-page notices. */
.frm-refusal,
.frm-drift {
    color: var(--text-primary);
    background-color: var(--surface-raised);
    border-inline-start: 3px solid var(--accent);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size--1);
}

.frm-empty,
.frm-quiet {
    color: var(--text-secondary);
}

.frm-former {
    color: var(--text-secondary);
    font-style: italic;
}

/* ============================================================================
   Boards index (WF-38 ①)
   ========================================================================== */

.frm-boards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.frm-board,
.frm-door {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    background-color: var(--surface-raised);
    text-decoration: none;
    color: var(--text-primary);
}

.frm-board:hover,
.frm-door:hover {
    background-color: var(--surface-hover);
}

.frm-board__name,
.frm-door__name {
    font-weight: 600;
}

.frm-board__last {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.frm-board__count,
.frm-door__count {
    margin-inline-start: auto;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    white-space: nowrap;
}

/* ============================================================================
   Recent activity + topic rows (TopicRow §4.4a)
   ========================================================================== */

.frm-activity,
.frm-topics,
.frm-reports,
.frm-posts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.trw {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    background-color: var(--surface-raised);
    text-decoration: none;
    color: var(--text-primary);
}

.trw:hover {
    background-color: var(--surface-hover);
}

.trw__title {
    font-weight: 600;
}

.trw__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    flex-wrap: wrap; /* mobile: meta stacks under the title (F-R12) */
}

.trw__replies {
    margin-inline-end: auto;
}

.trw__last {
    display: inline-flex;
    gap: var(--space-xs);
    align-items: baseline;
}

.trw__lock {
    margin-inline-start: var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    font-weight: 400;
    white-space: nowrap; /* glyph + "closed" — never color-only (§4.4a) */
}

.trw__dot {
    color: var(--divider);
}

.trw--compact {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.trw--compact .trw__kind {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    white-space: nowrap;
}

.trw--compact .trw__meta {
    margin-inline-start: auto;
}

/* ============================================================================
   Shared-reports list (WF-38 ②)
   ========================================================================== */

.frm-chips__group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-block-end: var(--space-xs);
}

.rpt {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    background-color: var(--surface-raised);
    text-decoration: none;
    color: var(--text-primary);
}

.rpt:hover {
    background-color: var(--surface-hover);
}

.rpt__chips {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.rpt__signals {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    font-variant-numeric: tabular-nums;
}

.rpt__title {
    font-weight: 600;
}

.rpt__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* ============================================================================
   Post cells (PostCell §4.4a, WF-40)
   ========================================================================== */

.pc {
    padding: var(--space-md);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    background-color: var(--surface-raised);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

/* FRM-R09 + OTP-R02 reuse: the permalink arrival highlight — same contract as
   the account page's anchor arrival. */
.pc:target {
    animation: frm-arrive var(--motion-highlight, 1200ms) var(--motion-ease);
}

@keyframes frm-arrive {
    from { background-color: var(--accent-surface); }
    to { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .pc:target { animation: none; }
}

/* Tombstones keep the number slot (FRM-R12): the shared .tomb treatment plus
   the muted number — body and actions simply do not exist. */
.pc--tomb {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    background-color: var(--surface-page);
    border-color: var(--divider);
}

.pc--tomb .pc__tombline {
    border-block: 0; /* the cell border carries the divider role here */
    background-color: transparent;
    padding: 0;
}

.pc__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    flex-wrap: wrap; /* mobile: handle/time wrap, #n right-aligned (F-R12) */
    font-size: var(--font-size--1);
    color: var(--text-secondary);
}

.pc__time,
.pc__edited {
    color: var(--text-secondary);
}

.pc__edited {
    font-style: italic;
}

.pc__num {
    margin-inline-start: auto;
    color: var(--accent);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.pc__num:hover {
    text-decoration: underline;
}

.pc__num--tomb {
    color: var(--text-secondary);
}

.pc__body {
    min-width: 0; /* user content scrolls inside, never sideways (PF-R03) */
}

.pc__actions {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    flex-wrap: wrap;
    font-size: var(--font-size--1);
}

.pc__own {
    margin-inline-start: auto;
    display: inline-flex;
    gap: var(--space-md);
}

.pc__action {
    color: var(--text-secondary);
    text-decoration: none;
}

.pc__action:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* The flag control is a one-button form — render it as its inline peers. */
.pc__flag {
    display: inline;
}

.pc__action--flag {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.pc__flagged {
    color: var(--text-secondary);
    font-style: italic;
}

/* ============================================================================
   Pager (FRM-R10) — the bar; inert ends stay, visibly off
   ========================================================================== */

.frm-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    background-color: var(--surface-page);
}

.frm-pager__group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.frm-pager__group > * + *::before {
    content: "\00B7";
    margin-right: var(--space-sm);
    color: var(--divider);
}

.frm-pager__btn {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-control);
    color: var(--accent);
    text-decoration: none;
}

.frm-pager__btn:hover {
    background-color: var(--surface-hover);
}

/* Inert ends stay in the bar at full size — removing them would shift it
   (the recorded exception to absent-not-disabled). */
.frm-pager__btn--off {
    color: var(--disabled-text);
    cursor: not-allowed;
}

.frm-pager__btn--off:hover {
    background: transparent;
}

.frm-pager__count {
    margin: 0;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Reply zone (FRM-R10) + confirms (FRM-R11)
   ========================================================================== */

.frm-jump {
    display: inline-block;
    color: var(--accent);
}

.frm-lockctl {
    display: inline;
}

.frm-confirm {
    padding: var(--space-md);
    border: 1px solid var(--border-emphasis);
    border-radius: var(--radius-control);
    background-color: var(--surface-raised);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.frm-confirm__line {
    color: var(--text-primary);
    font-weight: 600;
}