/* ethics-sources.css
 * Geteilte Styles für die Ethik-Quellen-Statusanzeige (renderEthicsSourcesStatus
 * aus ethics-sources-status.js). Wird sowohl auf der Einstellungsseite als auch
 * auf der Produktseite (Status-Hinweis / „Worauf basiert diese Bewertung?")
 * genutzt – einzige Quelle der Wahrheit, damit der Renderer überall gleich
 * (und barrierefrei: Text + Icon, nicht nur Farbe) aussieht.
 */

.ethics-sources-status {
    margin-top: var(--space-12);
}

.ethics-src-summary,
.ethics-src-legend {
    font-size: var(--text-14);
    color: var(--text-muted);
    margin: 0 0 var(--space-10);
}

.ethics-src-legend {
    margin-top: var(--space-10);
}

.ethics-src-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-8);
}

.ethics-src-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: var(--space-10) var(--space-12);
    background: var(--card);
}

.ethics-src-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.ethics-src-name {
    font-weight: 600;
    color: var(--text);
}

.ethics-src-name a {
    color: var(--accent);
}

.ethics-src-coverage {
    margin: var(--space-4) 0 0;
    font-size: var(--text-13);
    color: var(--text-muted);
}

.ethics-src-note {
    margin: var(--space-4) 0 0;
    font-size: var(--text-12);
    color: var(--text-muted);
    font-style: italic;
}

.ethics-src-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-12);
    font-weight: 600;
    padding: var(--space-2) 9px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.ethics-src-badge--active {
    /* --success auf der eigenen getönten Badge-Flaeche schafft nur 3.05:1
       (axe-core color-contrast, WCAG-AA braucht 4.5:1) - --success-strong ist
       fuer genau diesen Fall gedacht (siehe base.css). Tint-Anteil bei der
       warmen Papier-Palette von 14% auf 10% reduziert - mit dem waermeren,
       dunkleren --card im Dark Mode fiel der 14%-Mix sonst knapp auf 4.47:1
       (axe-core color-contrast). */
    color: var(--success-text);
    background: color-mix(in srgb, var(--success) 10%, var(--card));
    border-color: color-mix(in srgb, var(--success) 45%, var(--card));
}

.ethics-src-badge--planned {
    /* --warning auf der eigenen getönten Badge-Flaeche schafft nur 1.85:1 -
       --warning-strong ist fuer genau diesen Fall gedacht. Tint-Anteil aus
       demselben Grund wie bei --ethics-src-badge--active auf 10% reduziert. */
    color: var(--warning-text);
    background: color-mix(in srgb, var(--warning) 10%, var(--card));
    border-color: color-mix(in srgb, var(--warning) 45%, var(--card));
}

.ethics-src-badge--inactive {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-muted) 12%, var(--card));
}

.ethics-src-loading,
.ethics-src-empty {
    font-size: var(--text-14);
    color: var(--text-muted);
}

.ethics-src-error {
    font-size: var(--text-14);
    color: var(--danger-text);
}