/**
 * materiality.css — P41
 * Materiality signals: section markers, evidence markers, filter toggle.
 * Colors: material=gold, marginal=mid-gray, immaterial=light-gray/ghost.
 * Never red — red implies error.
 */

/* ── Marker dot in the left margin of each section ────────────────────── */
.materiality-marker {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: default;
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
}

.materiality-marker.material {
    background: var(--accent-gold, #c9985e);
    box-shadow: 0 0 0 2px rgba(201, 152, 94, 0.18);
}

.materiality-marker.marginal {
    background: var(--muted-mid, #9b94b2);
}

.materiality-marker.immaterial {
    background: var(--muted-light, #ddd);
    opacity: 0.5;
}

/* Tooltip on hover ── */
.materiality-marker::after {
    content: attr(data-rationale);
    display: none;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(22, 25, 34, 0.96);
    color: #B3AECB;
    border: 1px solid rgba(150, 145, 175, 0.2);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 11px;
    white-space: nowrap;
    max-width: 280px;
    white-space: normal;
    line-height: 1.45;
    z-index: 300;
    pointer-events: none;
}

.materiality-marker:hover::after {
    display: block;
}

/* ── Section-level wrap: left margin rail ──────────────────────────────── */
.vc-brief-section-header {
    display: flex;
    align-items: baseline;
    gap: 0;
}

/* ── Inline evidence marker (small, in-text) ───────────────────────────── */
.materiality-cite-marker {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    vertical-align: middle;
    margin: 0 3px 1px 1px;
    cursor: default;
}

.materiality-cite-marker.material    { background: var(--accent-gold, #c9985e); }
.materiality-cite-marker.marginal    { background: var(--muted-mid, #9b94b2); }
.materiality-cite-marker.immaterial  { background: var(--muted-light, #ddd); opacity: 0.45; }

/* ── Filter toggle strip ───────────────────────────────────────────────── */
.materiality-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 0 8px 0;
    flex-wrap: wrap;
}

.materiality-filter-label {
    font-size: 11px;
    color: var(--vc-t4, #5A5673);
    margin-right: 4px;
    font-weight: 500;
    white-space: nowrap;
}

.materiality-filter-btn {
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--vc-border, rgba(150, 145, 175, 0.12));
    background: transparent;
    color: var(--vc-t3, #8B849E);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.materiality-filter-btn:hover {
    background: var(--vc-bg-hover, #1C1F2B);
    color: var(--vc-t2, #B3AECB);
}

.materiality-filter-btn.active {
    background: rgba(201, 152, 94, 0.12);
    border-color: rgba(201, 152, 94, 0.35);
    color: var(--accent-gold, #c9985e);
}

/* Dot prefix in filter button labels */
.materiality-filter-btn .filter-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.materiality-filter-btn[data-filter="all"]      .filter-dot { background: #8B849E; }
.materiality-filter-btn[data-filter="material"] .filter-dot { background: var(--accent-gold, #c9985e); }
.materiality-filter-btn[data-filter="material-marginal"] .filter-dot { background: var(--muted-mid, #9b94b2); }

/* ── Collapsed immaterial block ────────────────────────────────────────── */
.materiality-collapsed {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 6px;
    background: rgba(150, 145, 175, 0.04);
    border: 1px dashed rgba(150, 145, 175, 0.14);
    color: var(--vc-t4, #5A5673);
    font-size: 12px;
    cursor: pointer;
    margin: 6px 0;
    transition: background 0.15s;
    user-select: none;
}

.materiality-collapsed:hover {
    background: rgba(150, 145, 175, 0.08);
    color: var(--vc-t3, #8B849E);
}

.materiality-collapsed-icon {
    font-size: 11px;
    opacity: 0.6;
}

/* Sections hidden by the filter ── */
.vc-brief-section[data-materiality-hidden="true"] {
    display: none;
}