/* Matches the Blocks panel beneath it (.mc-block-points-editor in styles.min2.css). */
.mc-coverage-card {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Full width, lined up with the Blocks panel; the field group would shrink it to its content. */
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--deepBorder);
    border-radius: 10px;
    background-color: var(--thinGray);
}

.mc-coverage-card-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 22px;
    color: var(--primaryHEX);
    background-color: rgba(var(--primaryRGB), .12);
}

.mc-coverage-card-text {
    flex: auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mc-coverage-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--headingColor);
}

.mc-coverage-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--textColor);
}

/* Status dot: grey until an area is marked, then green. */
.mc-coverage-card-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--hardGray);
}

.mc-coverage-card.is-marked .mc-coverage-card-status i {
    background-color: rgb(var(--greenRGB));
}