/* Rendered markdown content (.md) — topics, comments, previews */

.md p {
    margin: 0 0 var(--space-sm);
}

.md p:last-child {
    margin-bottom: 0;
}

.md blockquote {
    margin: 0 0 var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    border-left: 3px solid var(--color-accent);
    background-color: var(--color-accent-subtle);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--color-text-muted);
}

.md ul,
.md ol {
    margin: 0 0 var(--space-sm);
    padding-left: var(--space-lg);
}

.md li {
    margin-bottom: var(--space-xs);
}

.md code {
    padding: 0.1em 0.4em;
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
    font-size: 0.9em;
}

.md .md__pre {
    margin: 0 0 var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow-x: auto;
}

.md .md__pre code {
    padding: 0;
    border: none;
    background: none;
}

.md a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.md a:hover {
    opacity: 0.85;
}

.md a.md-mention {
    text-decoration: none;
    font-weight: 600;
}

/* Spoilers — blurred until clicked (dream-twist etiquette) */
.md-spoiler {
    filter: blur(5px);
    cursor: pointer;
    border-radius: var(--radius);
    background-color: var(--color-accent-subtle);
    padding: 0 0.2em;
    transition: filter 0.25s ease;
    user-select: none;
}

.md-spoiler--revealed {
    filter: none;
    cursor: inherit;
    user-select: auto;
}

/* "· edited" stamp next to timestamps */
.content-edited {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-style: italic;
    cursor: default;
}

/* Inline images — uploaded media only */
.md .md-img {
    display: block;
    max-width: 100%;
    max-height: 420px;
    width: auto;
    height: auto;
    border-radius: var(--radius);
    margin: var(--space-2) 0;
    cursor: zoom-in;
}