/* Fury News, for reading.
 *
 * One column at a comfortable measure, month headings down the side, and no
 * controls -- the dashboard is where these get edited. Loads after
 * /styles.css, which supplies the bar, the search box and the palette. */

.news-main {
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(12px, 3vw, 28px) 24px 80px;
}

.news-head { margin-bottom: 34px; }

.news-head h1 {
    margin: 0 0 6px;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    letter-spacing: -0.02em;
}

.news-lede {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
}

.news-state { color: var(--muted); }

.back {
    color: var(--muted);
    font-size: 0.88rem;
    text-decoration: none;
}
.back:hover { color: var(--accent); }

.news-feed { display: flex; flex-direction: column; gap: 20px; }

.news-month {
    margin: 26px 0 2px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.news-month:first-child { margin-top: 0; }

/* Each post takes the colour of its own embed, falling back to gold. The bar
   down the left is the same idea as Discord's, which is where these were
   written and how people have already seen them. */
.post {
    padding: 22px 26px;
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--post-accent, var(--accent));
    border-radius: 10px;
    background: rgba(34, 39, 50, 0.92);
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.post-pin {
    padding: 2px 8px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    font-size: 0.68rem;
}

.post h2 {
    margin: 10px 0 12px;
    font-size: 1.35rem;
    line-height: 1.25;
}

/* pre-wrap on the text itself: these are Discord messages, and the line breaks
   somebody typed are part of what they wrote. */
.post-body,
.post-field div {
    white-space: pre-wrap;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.65;
}

.post-body + .post-body { margin-top: 12px; }

.post-field { margin-top: 16px; }
.post-field h3 {
    margin: 0 0 4px;
    font-size: 0.92rem;
    color: var(--accent);
}

.post-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 16px;
    border-radius: 8px;
}

.post-footer {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--panel-border);
    color: var(--muted);
    font-size: 0.8rem;
}

/* The renderer's own classes, sized for a page rather than a chat window. */
.post .md-h1 { font-size: 1.3rem; font-weight: 700; margin: 14px 0 6px; }
.post .md-h2 { font-size: 1.12rem; font-weight: 700; margin: 12px 0 6px; }
.post .md-h3 { font-size: 1rem; font-weight: 700; margin: 10px 0 4px; }
.post .md-subtext { font-size: 0.82rem; color: var(--muted); }
.post .md-list { margin-left: 1.1em; }
.post .md-quote {
    margin: 6px 0;
    padding-left: 12px;
    border-left: 3px solid var(--panel-border);
    color: var(--muted);
}
.post .md-link { color: var(--accent); }
.post .emoji { width: 1.25em; height: 1.25em; vertical-align: -0.2em; }

.post .mention {
    padding: 0 3px;
    border-radius: 4px;
    background: rgba(217, 164, 65, 0.14);
    color: var(--accent-bright);
    font-weight: 500;
}
.post .mention-unknown { background: none; color: var(--muted); }