/* ── CONTENT WARNINGS ────────────────────────────────────────────────────
   Bearbeitbar unter ACP → Themes & Styles. Wird beim Deaktivieren/Aktivieren
   nicht überschrieben. Farben & Schriften nur über die Theme-Variablen.   */

:root {
    --cw-text:   var(--gray-light, var(--text, currentColor));
    --cw-dim:    var(--gray-light, var(--text-dim, currentColor));
    --cw-line:   var(--gray-dark, var(--border-color, currentColor));
    --cw-accent: var(--color-accent1, var(--alert, currentColor));
    --cw-strong: var(--light, currentColor);
    --cw-bg:     var(--darker-medium, transparent);
    --cw-mono:   var(--mono-font, var(--font-ui, monospace));
    --cw-main:   var(--main-font, inherit);
}

/* ── TRIGGER WARNING (Themenliste „TW“, Profil) ── */

.trigger-warning {
    font-family: var(--mono-font);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--light);
    line-height: 1.8;
}

.trigger-warning a {
    color: var(--color-accent1);
    text-decoration: none;
    border-bottom: 1px solid var(--color-accent1);
    transition: color 0.2s, border-color 0.2s;
}

.trigger-warning a:hover {
    color: var(--light);
    border-color: var(--light);
}

/* ── THREAD CONTENT WARNING (oben im Thread) ──
   .cw-thread setzt das Plugin selbst um die Ausgabe von contentwarnings_showthread.
   Egal ob das Template .trigger-warning oder .threadcw nutzt: es sieht gleich aus. */

.cw-thread br { display: none; }

.cw-thread .trigger-warning,
.threadcw {
    font-family: var(--main-font);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-align: left;
    color: var(--gray-light);
    background: var(--darker-medium);
    border: 1px solid var(--gray-dark);
    border-left: 2px solid var(--color-accent1);
    padding: 12px 20px;
    margin-bottom: 12px;
    line-height: 1.7;
    text-transform: uppercase;
    display: block;
}

.threadcw b {
    font-weight: 800;
    color: var(--color-accent1);
    font-family: var(--mono-font);
}

/* ── CW-FELD & CHECKER (Neuer Thread, Antworten, Bearbeiten) ── */

.cw-quick { margin: 10px 0; }

.cw-scan {
    appearance: none;
    background: none;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
    font-family: var(--cw-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cw-dim);
    border: 1px solid var(--cw-line);
    padding: 6px 12px;
    transition: color 0.2s, border-color 0.2s;
}
.cw-scan:hover { color: var(--cw-strong); border-color: var(--cw-accent); }

.cw-result {
    margin-top: 12px;
    font-family: var(--cw-main);
    font-size: 11px;
    color: var(--cw-text);
    background: var(--cw-bg);
    border: 1px solid var(--cw-line);
    border-left: 2px solid var(--cw-accent);
}
.cw-result[hidden] { display: none; }
.cw-result__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 12px 20px 8px; }
.cw-result__title { font-family: var(--cw-mono); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cw-accent); }
.cw-result__summary { font-family: var(--cw-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cw-dim); }
.cw-result__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-top: 1px solid var(--cw-line);
}
/* Kategorie – ebenfalls ein Button (trägt den Oberbegriff ein), feste Breite */
.cw-result__name {
    flex: 0 0 150px;
    text-align: left;
}
.cw-result__terms { display: flex; flex-wrap: wrap; gap: 6px; }

/* Buttons (Kategorie + Wörter): Grundlook kommt vom Button-Stil des Designs */
.cw-term { cursor: pointer; }
.cw-term small { font-size: 0.85em; opacity: 0.6; }
.cw-term.is-on {
    border-color: var(--cw-accent);
    background: color-mix(in srgb, var(--cw-accent) 30%, transparent);
}

.cw-result__note { padding: 0 20px 10px; font-style: italic; color: var(--cw-strong); }
.cw-result__empty { padding: 9px 20px 12px; color: var(--cw-dim); }

@media (max-width: 600px) {
    .cw-result__row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .cw-result__name { flex-basis: auto; }
}