/*
 * Password Roast icon system.
 * Glyphs: public/icons/sprite.svg (Lucide v0.454.0, ISC; see ./LICENSE).
 * One style everywhere: 24px grid, round caps and joins, stroke in currentColor,
 * sized by font-size so an icon always matches the text beside it.
 */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.14em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

/* Display-size icons (result badges, status heroes): a lighter line keeps
   them crisp at 2.5-5rem, and a low ember glow ties them to the flame logo. */
.icon-xl {
    stroke-width: 1.5;
    color: var(--accent-color, var(--accent-primary, #ff6b35));
    filter: drop-shadow(0 0 14px rgba(255, 107, 53, 0.35));
}

.icon-xl.tone-danger {
    color: var(--danger-color, #ff4444);
    filter: drop-shadow(0 0 14px rgba(255, 68, 68, 0.4));
}

.icon-xl.tone-success {
    color: var(--success-color, #00ff88);
    filter: drop-shadow(0 0 14px rgba(0, 255, 136, 0.3));
}

.icon-xl.tone-muted {
    color: var(--text-secondary, #888);
    filter: none;
}

.icon-xl.tone-identity {
    color: var(--accent-secondary, #8b5cf6);
    filter: drop-shadow(0 0 14px rgba(139, 92, 246, 0.35));
}

/* Takes the colour of its container (the roast rating sets it per level). */
.icon-xl.tone-inherit {
    color: inherit;
    filter: drop-shadow(0 0 12px color-mix(in srgb, currentColor 40%, transparent));
}

/* Status icons swapped in by script land with a short ignition. */
.icon-pop {
    animation: icon-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-wait {
    animation: icon-wait 1.6s ease-in-out infinite;
}

@keyframes icon-pop {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes icon-wait {
    0%, 40% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
    .icon-pop,
    .icon-wait {
        animation: none;
    }
}

/* Text that carries an icon's meaning for screen readers only. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}