/* =============================================================
   chip-check.css  ·  shared/components/  ·  standalone
   The toggleable check circle — same circle visual as .chip-avatar
   (so it sits in any 50%-of-column slot consistently), but tappable
   with two states driven by aria-pressed:
     unchecked: empty cyan-bordered circle (icon hidden)
     checked  : filled cyan circle, dark check icon inside
   Depends on: shared/tokens.css (and the global .icon rule for the SVG).
   ============================================================= */

.chip-check {
    width: 50%;
    aspect-ratio: 1;
    justify-self: center;
    align-self: center;
    margin: auto;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--brand-active);
    color: var(--brand-active);
    display: grid;
    place-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 0;
    line-height: 1;
}

.chip-check:active {
    transform: scale(0.94);
}

/* checked: yellow ring + yellow check, no fill — mirrors the count badge */
.chip-check[aria-pressed="true"] {
    border-color: var(--status-warn);
    color: var(--status-warn);
}

.chip-check[aria-pressed="false"] .icon {
    visibility: hidden;
}