/* ========================================================
   CREDIO Icon Pack — styles v1.0.0
   Companion to js/credio-icons.js
   ======================================================== */

/* ── Line icons — inherit currentColor ── */
.credio-icon {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -0.125em;
}

    .credio-icon.s12 {
        width: 12px;
        height: 12px;
    }

    .credio-icon.s14 {
        width: 14px;
        height: 14px;
    }

    .credio-icon.s16 {
        width: 16px;
        height: 16px;
    }

    .credio-icon.s20 {
        width: 20px;
        height: 20px;
    }

    .credio-icon.s24 {
        width: 24px;
        height: 24px;
    }

    /* Tints — the ONLY way to color an icon */
    .credio-icon.tint-present {
        color: var(--data-present);
    }

    .credio-icon.tint-gap {
        color: var(--data-gap);
    }

    .credio-icon.tint-seal {
        color: var(--seal);
    }

    .credio-icon.tint-muted {
        color: var(--graphite);
    }

    .credio-icon.tint-ink {
        color: var(--ink-soft);
    }

    /* Reconstruction spinner */
    .credio-icon.spin {
        animation: credio-icon-spin 1s linear infinite;
    }

@keyframes credio-icon-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Token tiles ── */
.tile {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 1px 2px rgba(19,21,15,.10);
}

    .tile.tile-sm {
        width: 24px;
        height: 24px;
    }

    .tile.tile-lg {
        width: 44px;
        height: 44px;
    }