/* Discord-flavoured Markdown rendering - shared by the public info pages and
 * the admin panel's live preview, so the preview cannot drift from the result.
 *
 * Everything is scoped to `.dmd` and driven by the variables below. A host page
 * only has to override those (and set `--dmd-accent` to its section colour);
 * the defaults already look right on a dark background.
 */
.dmd {
    --dmd-text: #d7dce4;
    --dmd-strong: #ffffff;
    --dmd-dim: #99a0ad;
    --dmd-accent: #00e5ff;
    --dmd-line: rgba(255, 255, 255, .1);
    --dmd-surface: rgba(255, 255, 255, .04);
    --dmd-code-bg: rgba(0, 0, 0, .38);
    --dmd-code-text: #ffcf8b;
    --dmd-mention: #5b9dff;

    color: var(--dmd-text);
    line-height: 1.62;
    font-size: 1rem;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Light theme lives here rather than in each host page, so the admin panel's
 * live preview reads the same way the public page does. */
html[data-theme="light"] .dmd {
    --dmd-text: #333b47;
    --dmd-strong: #10141b;
    --dmd-dim: #6b7484;
    --dmd-line: #e3e8f0;
    --dmd-surface: #f5f7fb;
    --dmd-code-bg: #f1f3f9;
    --dmd-code-text: #b2541c;
    --dmd-mention: #2f6fe0;
}
html[data-theme="light"] .dmd .dmd-spoiler { background: #d6dae2; }

/* Navy - same eight tokens as the light block, and for the same reason. Note
 * what is *not* here: `--dmd-accent` stays with the host page, which sets it to
 * the section's colour; a theme rule would outrank that and flatten every
 * category to one hue. The two that would otherwise break are `--dmd-code-bg`
 * (a black wash - a code block on a blue card would read as a hole) and the
 * spoiler slab further down. This file is also loaded by the admin panel, whose
 * pages carry their own palette and never load site/theme.css, so the values
 * are literals rather than `--nv-*`. */
html[data-theme="navy"] .dmd {
    --dmd-text: #cfd9ec;
    --dmd-strong: #e6edf9;
    --dmd-dim: #93a4c4;
    --dmd-line: rgba(120, 160, 220, .16);
    --dmd-surface: rgba(120, 160, 220, .08);
    --dmd-code-bg: rgba(10, 17, 32, .55);
    --dmd-code-text: #ffd79b;
    --dmd-mention: #6cb2ff;
}
html[data-theme="navy"] .dmd .dmd-spoiler { background: #26355a; }

.dmd > *:first-child { margin-top: 0; }
.dmd > *:last-child { margin-bottom: 0; }

.dmd .dmd-p { margin: 0 0 .7em; }
.dmd strong, .dmd b { color: var(--dmd-strong); font-weight: 700; }
.dmd em { font-style: italic; }
.dmd u { text-decoration: underline; text-underline-offset: 2px; }
.dmd s { opacity: .65; }

/* Headings - Discord's three sizes, scaled for a page rather than a chat. */
.dmd .dmd-h { color: var(--dmd-strong); font-weight: 800; line-height: 1.25; letter-spacing: -.2px; }
.dmd .dmd-h1 { font-size: 1.5rem; margin: 1.3em 0 .5em; }
.dmd .dmd-h2 { font-size: 1.22rem; margin: 1.2em 0 .45em; }
.dmd .dmd-h3 { font-size: 1.05rem; margin: 1.1em 0 .4em; }
.dmd .dmd-h1::after {
    content: ""; display: block; width: 46px; height: 3px; border-radius: 3px;
    margin-top: .45em; background: var(--dmd-accent); opacity: .8;
}
.dmd .dmd-sub { font-size: .82rem; color: var(--dmd-dim); margin: 0 0 .6em; }

/* Quotes - the workhorse of a Discord info channel. */
.dmd .dmd-quote {
    margin: 0 0 .75em;
    padding: .5em 0 .5em 1em;
    border-left: 4px solid var(--dmd-accent);
    background: var(--dmd-surface);
    border-radius: 0 8px 8px 0;
}
.dmd .dmd-quote .dmd-quote { margin-bottom: 0; }

.dmd .dmd-list { margin: 0 0 .75em; padding-left: 1.45em; }
.dmd .dmd-list li { margin: .22em 0; }
.dmd .dmd-list .dmd-list { margin: .22em 0 0; }
.dmd ul.dmd-list { list-style: none; }
.dmd ul.dmd-list > li { position: relative; }
.dmd ul.dmd-list > li::before {
    content: "";
    position: absolute; left: -.95em; top: .62em;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--dmd-accent);
}
.dmd ol.dmd-list > li::marker { color: var(--dmd-accent); font-weight: 800; }

.dmd .dmd-code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .88em;
    background: var(--dmd-code-bg);
    color: var(--dmd-code-text);
    border: 1px solid var(--dmd-line);
    border-radius: 5px;
    padding: .12em .38em;
    white-space: pre-wrap;
}

.dmd .dmd-codeblock { position: relative; margin: 0 0 .8em; }
.dmd .dmd-pre {
    margin: 0;
    background: var(--dmd-code-bg);
    border: 1px solid var(--dmd-line);
    border-radius: 10px;
    padding: 14px 16px;
    overflow-x: auto;
}
.dmd .dmd-pre code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .85rem;
    color: var(--dmd-text);
    background: none; border: 0; padding: 0;
    white-space: pre;
}
.dmd .dmd-copy {
    position: absolute; top: 8px; right: 8px;
    width: 30px; height: 30px;
    border-radius: 8px; cursor: pointer;
    background: var(--dmd-surface);
    border: 1px solid var(--dmd-line);
    color: var(--dmd-dim);
    opacity: 0; transition: opacity .15s, color .15s;
}
.dmd .dmd-codeblock:hover .dmd-copy, .dmd .dmd-copy:focus-visible { opacity: 1; }
.dmd .dmd-copy:hover { color: var(--dmd-accent); }

.dmd .dmd-hr {
    border: 0; height: 1px; margin: 1.1em 0;
    background: linear-gradient(90deg, transparent, var(--dmd-line) 12%, var(--dmd-line) 88%, transparent);
}

.dmd .dmd-link { color: var(--dmd-accent); text-decoration: none; border-bottom: 1px solid transparent; }
.dmd .dmd-link:hover { border-bottom-color: currentColor; }

.dmd .dmd-img {
    display: block;
    max-width: 100%; height: auto;
    margin: .6em 0; border-radius: 12px;
    border: 1px solid var(--dmd-line);
}

/* Custom Discord emoji keep their inline size next to text. */
.dmd .dmd-emoji {
    display: inline-block;
    width: 1.35em; height: 1.35em;
    vertical-align: -.28em;
    margin: 0 .06em;
    object-fit: contain;
}

/* Shown in place of an emoji whose CDN image is gone (see dmd.js). */
.dmd .dmd-emoji-fallback { color: var(--dmd-dim); font-size: .9em; }

.dmd .dmd-mention {
    display: inline-block;
    padding: 0 .32em; border-radius: 4px;
    font-weight: 600;
    color: var(--dmd-mention);
    background: color-mix(in srgb, var(--dmd-mention) 16%, transparent);
}

/* A mention that leads somewhere (a channel with a page here, or the channel
 * itself in Discord) still reads as a pill - only the cursor and the hover say
 * it is a link. */
.dmd a.dmd-mention { text-decoration: none; transition: background .12s; }
.dmd a.dmd-mention:hover {
    background: color-mix(in srgb, var(--dmd-mention) 30%, transparent);
}
/* A mention that leaves the site says so, quietly. */
.dmd a.dmd-mention-ext::after {
    content: "↗";
    margin-left: .18em;
    font-size: .82em;
    opacity: .6;
}
/* Roles print in the colour they have in Discord; ``--dmd-role`` is set inline
 * by the renderer and falls back to the mention blue for colourless roles. */
.dmd .dmd-mention-role {
    color: var(--dmd-role, var(--dmd-mention));
    background: color-mix(in srgb, var(--dmd-role, var(--dmd-mention)) 16%, transparent);
}

.dmd .dmd-spoiler {
    background: #1b1d22;
    color: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: color .12s, background .12s;
}
.dmd .dmd-spoiler * { visibility: hidden; }
.dmd .dmd-spoiler.revealed { background: var(--dmd-surface); color: inherit; }
.dmd .dmd-spoiler.revealed * { visibility: visible; }