/* ============================================================================
   claim-checker.css -- widget #16 (claim chips -> evidence detail)

   reuses the item-grid scaffold (.cw-grid / .cw-item / .cw-detail come free).
   the optional --cw-clm-tier color encodes the evidence tier and falls back to
   --cw-accent.
   ============================================================================ */

.cw-claims .cw-grid {
    grid-template-columns: repeat(var(--cw-cols, auto-fit), minmax(150px, 1fr));
}

.cw-claims .cw-clm-text {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--cw-text);
}

.cw-claims .cw-clm-cue {
    font-size: 0.7rem;
    color: var(--cw-muted);
}

.cw-clm-tier {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cw-clm-tier, var(--cw-accent));
    background: color-mix(in srgb, var(--cw-clm-tier, var(--cw-accent)) 16%, transparent);
}

.cw-clm-meter {
    margin-top: 10px;
}

.cw-clm-meter-track {
    height: 8px;
    border-radius: 100px;
    background: var(--cw-accent-soft);
    overflow: hidden;
}

.cw-clm-meter-fill {
    height: 100%;
    border-radius: 100px;
    background: var(--cw-clm-tier, var(--cw-accent));
}

.cw-clm-meter-label {
    display: block;
    margin-top: 5px;
    font-size: 0.68rem;
    text-transform: none;
    letter-spacing: 0.04em;
    color: var(--cw-muted);
}