/*
 * Red Wood dashboard styles, loaded after Beer CSS (static/beercss, Material 3).
 * Tokens follow docs/brand.md: near-black surfaces, one blood-red accent, square corners, Roboto everywhere.
 * Material colour roles are mapped onto the --rw-* tokens below; Beer's own palette is never used.
 * The RDR Lino display face is never hosted; the wordmark ships as an SVG.
 */

:root {
    --rw-black: #000000;
    --rw-bg: #0a0a0a;
    --rw-panel: #0e0e0e;
    --rw-panel-2: #181818;
    --rw-line: #3a3a3a;
    --rw-line-strong: #6a6a6a;
    --rw-text: #f2f2f2;
    --rw-muted: #9a9a9a;
    --rw-shadow: rgba(0, 0, 0, .85);

    --rw-accent: #c92a2a;
    --rw-accent-hi: #e03131;
    --rw-accent-deep: #5c1a22;
    --rw-accent-ink: #2e0c11;
    --rw-accent-low: #8f1d1d;

    --rw-ok: #6fbf73;
    --rw-warn: #d9a441;
    --rw-bad: #e0554f;

    --discord: #5865f2;
    --discord-hi: #6b77f5;

    --rw-font-ui: 'Roboto', system-ui, sans-serif;

    --rw-gradient-primary: linear-gradient(180deg, var(--rw-accent-hi), var(--rw-accent) 55%, var(--rw-accent-low));
    --rw-gradient-divider: linear-gradient(90deg, transparent, var(--rw-accent-deep), transparent);
}


/* ---- Material roles on the brand tokens (Beer CSS reads these) ------------------------------------------------- */

:root, body.dark, body.light {
    --primary: var(--rw-accent);
    --on-primary: #ffffff;
    --primary-container: var(--rw-accent-deep);
    --on-primary-container: var(--rw-text);
    --secondary: var(--rw-muted);
    --on-secondary: var(--rw-black);
    --secondary-container: var(--rw-panel-2);
    --on-secondary-container: var(--rw-text);
    --tertiary: var(--rw-warn);
    --on-tertiary: var(--rw-black);
    --tertiary-container: #3d2e10;
    --on-tertiary-container: var(--rw-text);
    --error: var(--rw-bad);
    --on-error: #ffffff;
    --error-container: var(--rw-accent-ink);
    --on-error-container: #ffb3b3;
    --background: var(--rw-bg);
    --on-background: var(--rw-text);
    --surface: var(--rw-bg);
    --on-surface: var(--rw-text);
    --surface-variant: var(--rw-panel-2);
    --on-surface-variant: var(--rw-muted);
    --outline: var(--rw-line-strong);
    --outline-variant: var(--rw-line);
    --shadow: var(--rw-black);
    --scrim: var(--rw-black);
    --inverse-surface: var(--rw-text);
    --inverse-on-surface: var(--rw-bg);
    --inverse-primary: var(--rw-accent-hi);
    --surface-dim: var(--rw-black);
    --surface-bright: #242424;
    --surface-container-lowest: var(--rw-black);
    --surface-container-low: var(--rw-panel);
    --surface-container: var(--rw-panel);
    --surface-container-high: var(--rw-panel-2);
    --surface-container-highest: #202020;
    --active: rgba(255, 255, 255, .06);
    --overlay: rgba(0, 0, 0, .6);
    --font: var(--rw-font-ui);
    --font-icon: 'Material Symbols Outlined';
}

/* Square corners everywhere: the brand has no rounded shapes. */
article, .button, button, .chip, .field, .field > :is(input, select, textarea), .field > label,
nav:is(.left, .right, .top, .bottom) a > i, nav:is(.left, .right, .top, .bottom).max a,
.snackbar, dialog, .card, .badge, .tooltip, menu, .tabs, .progress, table, .avatar, .user img {
    border-radius: 0 !important;
}

/* Base rules the login page needs too (it loads this file without Beer CSS). */
* { box-sizing: border-box; }
html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    font-family: var(--rw-font-ui);
    font-size: 15px;
    line-height: 1.5;
    background: var(--rw-bg);
    color: var(--rw-text);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--rw-text); text-decoration-color: var(--rw-accent); text-underline-offset: 3px; }
a:hover { color: var(--rw-accent-hi); }

:focus-visible { outline: 2px solid var(--rw-accent-hi); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

h1, h2, h3 { font-weight: 500; letter-spacing: .01em; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.1rem; }

.muted, .hint { color: var(--rw-muted); }

/* ---- Shell: top bar, navigation rail (tablet and up) or bottom bar (phones) -------------------------------------- */

header.topbar {
    padding: 0 1rem;
    background: var(--rw-panel);
    border-bottom: 1px solid var(--rw-line);
}

header.topbar > nav { gap: 1rem; }

.brand { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
.brand img { height: 38px; width: auto; }

.user { display: flex; align-items: center; gap: .75rem; color: var(--rw-muted); }
.user-name { display: flex; flex-direction: column; line-height: 1.2; }
.user-name span { color: var(--rw-text); }
.user-name small { font-size: .75rem; }
.user form { margin: 0; }
.user button.transparent { color: var(--rw-muted); }
.user button.transparent:hover { color: var(--rw-accent-hi); }
.avatar { width: 32px; height: 32px; border: 1px solid var(--rw-line); }

nav.left { background: var(--rw-panel); border-right: 1px solid var(--rw-line); }
nav.bottom { background: var(--rw-panel); border-top: 1px solid var(--rw-line); }
nav:is(.left, .bottom) a { color: var(--rw-muted); }
nav:is(.left, .bottom) a.active { color: var(--rw-text) !important; }
nav:is(.left, .bottom) a.active > i { background: var(--rw-accent-deep); color: var(--rw-text); }
nav:is(.left, .bottom) a > div { font-size: .75rem; letter-spacing: .02em; }

/* ---- Page canvas: anchored to the rail and fluid to the right edge. A title row, a content area and an optional
   context area (aside) that sits beside the content from 1200px and under it below. Prose keeps a measure so a
   paragraph never runs the width of a monitor; cards and tiles take the width. ----------------------------- */

main.canvas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "content" "context";
    align-content: start;
    column-gap: 2rem;
    padding: 1.5rem 1rem 2rem;
}

main.canvas > h1 { grid-area: title; }
main.canvas > .view-toggle { grid-area: toggle; }
main.canvas > .content { grid-area: content; min-width: 0; }
main.canvas > aside.context { grid-area: context; min-width: 0; }

@media only screen and (min-width: 601px) {
    main.canvas { padding: 2rem 2rem 2.5rem; }
}

@media only screen and (min-width: 1200px) {
    main.canvas { padding: 2.5rem 3rem 3rem; }
    main.canvas.with-context {
        grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
        grid-template-areas: "title title" "content context";
    }
    /* The context column keeps pace with a long content column: the preview stays beside what is being edited. */
    main.canvas.with-context > aside.context {
        position: sticky;
        top: 1.5rem;
        align-self: start;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
    }
}

/* A reading page (the transcript) keeps the whole column at a width a conversation is read in. */
main.canvas.reading > .content { max-width: 60rem; }

/* Text cards: a reading measure, left-aligned, whatever the screen. Data cards leave it off. */
.prose :is(p, ol, ul, dl) { max-width: 65ch; }

/* Equal tiles that add columns as the width allows; each tile is an article without its stacking margin. */
.tiles {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    margin: 0 0 1.5rem;
}

.tiles > article { margin: 0; }

@media only screen and (max-width: 600px) {
    .user-name { display: none; }
}

/* ---- Content cards: Beer's article, with the brand's red rule on top ------------------------------------------- */

article {
    background: var(--rw-panel);
    border: 1px solid var(--rw-line);
    border-top: 3px solid var(--rw-accent-deep);
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.5rem;
    box-shadow: none;
}

article h2 { margin-top: 0; }
article ol, article ul { padding-left: 1.25rem; }
article.banned { border-top-color: var(--rw-accent); }
/* The steps end and the action follows: half a block of air, less than a text line, so they still read as one. */
article.banned ol { margin: 0 0 1rem; }
article.error-card { max-width: 32rem; }

/* ---- Panels (section.card, used by the transcript) ------------------------------------------------------------- */

.card {
    background: var(--rw-panel);
    border: 1px solid var(--rw-line);
    border-top: 3px solid var(--rw-accent-deep);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.card h2 { margin-top: 0; }

/* ---- Alerts: a 3 px rule in the semantic colour, no tinted boxes ------------------------------------------------- */

.alert {
    margin: 0 0 1.25rem;
    padding: .5rem 0 .5rem .9rem;
    border-left: 3px solid var(--rw-line-strong);
    color: var(--rw-text);
}

.alert.error { border-left-color: var(--rw-bad); }
.alert.info { border-left-color: var(--rw-ok); }

/* ---- Buttons ----------------------------------------------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-height: 44px;
    padding: 0 1.4rem;
    border: 1px solid var(--rw-accent-deep);
    background: var(--rw-gradient-primary);
    color: #fff;
    text-decoration: none;
    font: inherit;
    font-weight: 500;
    letter-spacing: .02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    cursor: pointer;
    transition: border-color .15s, filter .15s;
}

.button:hover { color: #fff; border-color: #fff; filter: brightness(1.12); }
.button:active { filter: brightness(.95); }
.button svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.button i { font-size: 20px; }

/* The amber button: an action on something that already exists (Frissítés). Disabled while there is nothing to do. */
.button.warn {
    background: linear-gradient(180deg, #e6b65a, var(--rw-warn) 55%, #a87b2a);
    border-color: #6b4e18;
    color: var(--rw-black);
    text-shadow: none;
}

.button.warn:hover { color: var(--rw-black); }

.button:disabled, .button.warn:disabled {
    background: var(--rw-panel-2);
    border-color: var(--rw-line);
    color: var(--rw-muted);
    text-shadow: none;
    cursor: not-allowed;
    filter: none;
}

/* Discord login keeps Discord's own blurple so the provider is recognisable. */
.button.discord {
    background: var(--discord);
    border-color: var(--discord);
    text-shadow: none;
}

.button.discord:hover { background: var(--discord-hi); border-color: #fff; filter: none; }

button.link {
    background: none;
    border: none;
    padding: 0;
    color: var(--rw-muted);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--rw-accent);
    text-underline-offset: 3px;
}

button.link:hover { color: var(--rw-accent-hi); }

/* ---- Chips and tables -------------------------------------------------------------------------------------------- */

.tags { list-style: none; padding: 0; margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; }

.tags li {
    background: var(--rw-panel-2);
    border: 1px solid var(--rw-line);
    border-radius: 3px;
    padding: .15rem .7rem;
    font-size: .9rem;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--rw-line); }
th { color: var(--rw-muted); font-weight: 500; font-size: .85rem; }
td small { display: block; }

/* ---- Login gate: stripe, wordmark, one button. No frame, so the page reads as the entrance, not a form. ---------- */

.gate {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(60rem 28rem at 50% 0%, rgba(46, 12, 17, .55), transparent 70%),
        var(--rw-bg);
}

.gate-stripe {
    height: 3px;
    background: var(--rw-accent);
    transform-origin: center;
    animation: gate-stripe .7s cubic-bezier(.2, .7, .2, 1) both;
}

.gate-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 3rem 1.5rem 15vh;
    text-align: center;
}

.gate-wordmark {
    margin: 0;
    line-height: 0;
    animation: gate-rise .9s .15s cubic-bezier(.2, .7, .2, 1) both;
}

/* The SVG bakes RDR Lino outlines and their drop shadow in; the font is never hosted. */
.gate-wordmark img { width: 380px; max-width: 86vw; height: auto; }

.gate-main .alert {
    margin: -1rem 0 -1.25rem;
    text-align: left;
    max-width: 24rem;
}

.gate-main .button {
    min-width: 17rem;
    justify-content: center;
    animation: gate-rise .9s .3s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes gate-stripe {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes gate-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gate-stripe, .gate-wordmark, .gate-main .button { animation: none; }
}

/* ---- Ticket transcript --------------------------------------------------------------------------------------- */

.transcript-head h1 { margin-bottom: .75rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.facts dt { color: var(--rw-muted); }
.facts dd { margin: 0; }

.chat { display: flex; flex-direction: column; gap: 1rem; }
.msg { display: flex; gap: .75rem; align-items: flex-start; background: none; border: 0; padding: 0; margin: 0; box-shadow: none; }
.msg .avatar { width: 36px; height: 36px; flex: 0 0 36px; }
.msg .body { min-width: 0; flex: 1; }
.msg header { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.msg .name { font-weight: 500; }
.msg.bot .name { color: var(--rw-accent-hi); }
.msg .badge {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
    padding: 0 .35rem; border: 1px solid var(--rw-line-strong); color: var(--rw-muted);
}
.msg .text { margin: .15rem 0 0; overflow-wrap: anywhere; }
.msg .text code { background: var(--rw-panel-2); padding: 0 .25rem; }
.msg .text pre { background: var(--rw-panel-2); padding: .5rem; overflow-x: auto; }
.msg .mention { color: var(--rw-accent-hi); }
.attachments { list-style: none; padding: 0; margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.attachments .preview { max-width: 320px; max-height: 240px; border: 1px solid var(--rw-line); display: block; }

/* ---- Toast: one line at the top right, under the top bar, in the semantic colour on its left rule. The page
   reloads scrolled to the top after an action, so that is where the eye already is (settled 2026-10-24). ---- */

.toast {
    position: fixed; right: 1.5rem; top: 4.75rem; z-index: 300;
    max-width: min(30rem, calc(100vw - 2rem));
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .85rem .5rem .85rem 1rem;
    background: var(--rw-panel-2); color: var(--rw-text);
    border: 1px solid var(--rw-line); border-left: 3px solid var(--rw-ok);
    box-shadow: 0 8px 24px var(--rw-shadow);
    animation: toast-in .25s cubic-bezier(.2, .7, .2, 1) both;
    transition: opacity .25s, transform .25s;
}

.toast.error { border-left-color: var(--rw-bad); }
.toast.leaving { opacity: 0; transform: translateY(-.5rem); }
.toast-body { display: flex; flex-direction: column; gap: .15rem; padding-top: .3rem; min-width: 0; }
.toast-body a { overflow-wrap: anywhere; font-size: .9rem; color: var(--rw-muted); }
.toast-body a:hover { color: var(--rw-accent-hi); }
.toast button.transparent { color: var(--rw-muted); flex: none; }
.toast button.transparent:hover { color: var(--rw-text); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-.5rem); }
    to { opacity: 1; transform: none; }
}

@media only screen and (max-width: 600px) {
    .toast { left: 1rem; right: 1rem; top: 4.25rem; max-width: none; }
}

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

/* ---- Discord messages (embeds): list, editor, preview ------------------------------------------------------- */

.toolbar { display: flex; justify-content: flex-end; margin: 0 0 1rem; }
article.room h2 { display: flex; align-items: baseline; gap: .75rem; }
article.room h2 small { font-size: .8rem; font-weight: 400; }
.posts tr.row-link { cursor: pointer; }
.posts tr.row-link:hover td { background: var(--rw-panel-2); }
.posts td.order, .posts th.order { width: 1%; white-space: nowrap; text-align: right; }
.posts td.order form { display: inline-block; margin: 0; }
.posts td.order button { color: var(--rw-muted); }
.posts td.order button:hover { color: var(--rw-accent-hi); }

.state { display: inline-block; padding: 0 .5rem; font-size: .8rem; border: 1px solid var(--rw-line-strong); color: var(--rw-muted); }
.state.sent { border-color: var(--rw-ok); color: var(--rw-ok); }
.state.not_sent { border-color: var(--rw-warn); color: var(--rw-warn); }
.state.room_missing { border-color: var(--rw-bad); color: var(--rw-bad); }

.embed-form .field { margin-top: 1.5rem; }
.embed-form .field:first-child { margin-top: 0; }
.embed-form .counter { display: block; text-align: right; font-size: .75rem; color: var(--rw-muted); }
.embed-form .counter.over { color: var(--rw-bad); }
.editor-block { margin-top: 1.5rem; position: relative; }
/* The inline mention popup, anchored under the caret while a # or @ word is being typed. */
.mention-popup {
    position: absolute; z-index: 20; min-width: 16rem; max-width: 100%;
    background: var(--rw-panel); border: 1px solid var(--rw-line-strong); box-shadow: 0 8px 24px var(--rw-shadow);
}
.mention-popup[hidden] { display: none; }
.mention-popup li.active button { background: var(--rw-accent-deep); }
.editor-label { display: block; font-size: .75rem; color: var(--rw-muted); margin: 0 0 .25rem; }
.actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }
.actions .danger { margin-left: auto; color: var(--rw-bad); text-decoration-color: var(--rw-bad); }

/* The room picker: a search field with a floating list under it, shown from the first typed character; the
   category label sits on each row. Floating, so the form below never moves. */
.room-picker { position: relative; margin-bottom: 1.5rem; }
.room-picker .field { margin-top: 0; }
.room-list {
    position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
    list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto;
    background: var(--rw-panel); border: 1px solid var(--rw-line-strong); box-shadow: 0 8px 24px var(--rw-shadow);
}
.room-list[hidden], .room-list li[hidden] { display: none; }
.room-list button, .mention-list button {
    display: flex; align-items: baseline; gap: .6rem; width: 100%; padding: .4rem .75rem;
    background: none; border: 0; border-bottom: 1px solid var(--rw-line); color: var(--rw-text);
    font: inherit; text-align: left; cursor: pointer;
}
.room-list li:last-child button, .mention-list li:last-child button { border-bottom: 0; }
.room-list button:hover, .mention-list button:hover { background: var(--rw-panel-2); }
.room-list li.selected button { background: var(--rw-accent-deep); }
.room-list .cat, .mention-list .cat { font-size: .75rem; color: var(--rw-muted); min-width: 7rem; }

/* The image: the current one as a thumbnail with its remove box, and the file input for a new one. */
.image-block { margin-top: 1.5rem; }
.image-current { display: flex; align-items: center; gap: 1rem; margin: 0 0 .75rem; }
.image-current img { max-width: 160px; max-height: 90px; border: 1px solid var(--rw-line); display: block; }
.image-current .checkbox { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.image-block input[type=file] { display: block; color: var(--rw-muted); font: inherit; }
.image-block input[type=file]::file-selector-button {
    font: inherit; margin-right: .75rem; padding: .35rem .9rem; cursor: pointer;
    background: var(--rw-panel-2); color: var(--rw-text); border: 1px solid var(--rw-line);
}
.image-block input[type=file]::file-selector-button:hover { border-color: var(--rw-line-strong); }
.image-block .helper { display: block; font-size: .75rem; color: var(--rw-muted); margin-top: .35rem; }

/* Phones: the editor and the preview do not fit together, so a two-tab strip under the title switches between
   them. Wider screens never see the strip (Beer's .s) and show both. */
.view-toggle { display: flex; margin: 0 0 1rem; border: 1px solid var(--rw-line); }
.view-toggle button {
    flex: 1; padding: .55rem 0; background: none; border: 0; color: var(--rw-muted);
    font: inherit; font-weight: 500; cursor: pointer;
}
.view-toggle button.active { background: var(--rw-accent-deep); color: var(--rw-text); }
@media only screen and (max-width: 600px) {
    main.canvas.has-toggle { grid-template-areas: "title" "toggle" "content" "context"; }
    main.canvas.has-toggle.show-preview > .content { display: none; }
    main.canvas.has-toggle:not(.show-preview) > aside.context { display: none; }
}

/* The history card: one line per publish, newest first; the loaded one is marked. */
.versions { list-style: none; margin: 0; padding: 0; }
.versions li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .45rem 0; border-bottom: 1px solid var(--rw-line); }
.versions li:last-child { border-bottom: 0; }
.versions li.loaded { border-left: 3px solid var(--rw-accent); padding-left: .6rem; }
.versions .number { font-weight: 500; min-width: 4.5rem; }
.versions .when { color: var(--rw-muted); font-size: .85rem; min-width: 8.5rem; }
.versions .who { flex: 1; }
.versions a { font-size: .9rem; }

/* Colour swatches: a radio per fixed colour, the chosen one ringed in white. */
.colors { border: 0; padding: 0; margin: 1.5rem 0 0; display: flex; align-items: center; gap: .6rem; }
.colors legend { font-size: .75rem; color: var(--rw-muted); padding: 0; margin-bottom: .35rem; }
.swatch { position: relative; width: 28px; height: 28px; cursor: pointer; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch span { display: block; width: 100%; height: 100%; border: 2px solid transparent; }
.swatch input:checked + span { border-color: #fff; }
.swatch input:focus-visible + span { outline: 2px solid var(--rw-accent-hi); outline-offset: 2px; }

/* Quill in the brand: panel surfaces, square corners, the toolbar as a quiet strip. */
.ql-toolbar.ql-snow { border: 1px solid var(--rw-line); border-bottom: 0; background: var(--rw-panel-2); font-family: var(--rw-font-ui); }
.ql-container.ql-snow { border: 1px solid var(--rw-line); background: var(--rw-bg); font-family: var(--rw-font-ui); font-size: 15px; }
.ql-editor { min-height: 18rem; max-height: 60vh; color: var(--rw-text); }
.ql-editor.ql-blank::before { color: var(--rw-muted); font-style: normal; }
.ql-snow .ql-stroke { stroke: var(--rw-muted); }
.ql-snow .ql-fill { fill: var(--rw-muted); }
.ql-snow .ql-picker { color: var(--rw-muted); }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke { stroke: var(--rw-accent-hi); }
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill { fill: var(--rw-accent-hi); }
.ql-snow.ql-toolbar button:hover, .ql-snow.ql-toolbar button.ql-active, .ql-snow.ql-toolbar button:focus { color: var(--rw-accent-hi); }
.ql-snow .ql-tooltip { background: var(--rw-panel-2); border: 1px solid var(--rw-line); color: var(--rw-text); box-shadow: none; }
.ql-snow .ql-tooltip input[type=text] { background: var(--rw-bg); border: 1px solid var(--rw-line); color: var(--rw-text); }
.ql-snow .ql-tooltip a { color: var(--rw-accent-hi); }
.ql-editor a { color: #00a8fc; }
.ql-editor blockquote { border-left: 4px solid var(--rw-line-strong); }
.ql-editor pre.ql-syntax, .ql-editor .ql-code-block-container { background: var(--rw-panel-2); color: var(--rw-text); }
.ql-mention-channel, .ql-mention-role { font-weight: 700; color: var(--rw-muted); font-size: 15px; }
.ql-mention { background: rgba(88, 101, 242, .3); color: #dee0fc; padding: 0 .2rem; border-radius: 3px; }

/* The preview: Discord's own look on purpose, so the editor shows what the room will show. */
.dc-embed {
    --embed-color: #C92A2A;
    display: grid; grid-template-columns: 4px 1fr; max-width: 520px;
    background: #2b2d31; border-radius: 4px; overflow: hidden; color: #dbdee1; font-size: 14px; line-height: 1.375;
}
.dc-bar { background: var(--embed-color); }
.dc-content { padding: .5rem 1rem 1rem .75rem; min-width: 0; }
.dc-title { font-weight: 600; font-size: 1rem; color: #f2f3f5; margin: .5rem 0 .5rem; }
.dc-title[hidden], .dc-footer[hidden], .dc-image[hidden] { display: none; }
.dc-body { overflow-wrap: anywhere; }
.dc-body h1 { font-size: 1.5rem; font-weight: 700; margin: 1rem 0 .5rem; color: #f2f3f5; }
.dc-body h2 { font-size: 1.25rem; font-weight: 700; margin: 1rem 0 .5rem; color: #f2f3f5; }
.dc-body h3 { font-size: 1rem; font-weight: 700; margin: 1rem 0 .5rem; color: #f2f3f5; }
.dc-body h1:first-child, .dc-body h2:first-child, .dc-body h3:first-child { margin-top: 0; }
.dc-body ul, .dc-body ol { margin: 0; padding-left: 1.25rem; }
.dc-body blockquote { margin: 0; padding-left: .75rem; border-left: 4px solid #4e5058; }
.dc-body pre { background: #1e1f22; border: 1px solid #1e1f22; padding: .5rem; margin: .25rem 0; white-space: pre-wrap; font-size: .85rem; }
.dc-body code { background: #1e1f22; padding: 0 .25rem; font-size: .85rem; }
.dc-body a { color: #00a8fc; text-decoration: none; cursor: pointer; }
.dc-body a:hover { text-decoration: underline; }
.dc-mention { background: rgba(88, 101, 242, .3); color: #dee0fc; padding: 0 .15rem; border-radius: 3px; }
.dc-image { display: block; max-width: 100%; max-height: 300px; margin-top: 1rem; border-radius: 4px; }
.dc-footer { font-size: .75rem; color: #dbdee1; margin-top: .5rem; }

/* Native dialogs in the brand (delete confirmation, mention picker). */
dialog { background: var(--rw-panel); color: var(--rw-text); border: 1px solid var(--rw-line); border-top: 3px solid var(--rw-accent-deep); padding: 1.25rem 1.5rem; max-width: 28rem; width: calc(100% - 2rem); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog h3 { margin-top: 0; font-size: 1.1rem; font-weight: 500; }
dialog nav.right-align { display: flex; justify-content: flex-end; gap: 1.25rem; align-items: center; margin-top: 1.25rem; }
.mention-dialog { max-width: 24rem; }
.mention-dialog .field { margin: 0 0 .5rem; }
.mention-list { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow-y: auto; border: 1px solid var(--rw-line); }