/*
 * hax-outcome.css
 *
 * Cross-discipline terminal-state outcome graphics for queue cards (and any other surface
 * that needs a "win / loss / cancelled" visual indicator). Drives sizing + per-outcome color
 * via the Tier-3 status vars in hax-palette.css. The SVGs themselves use stroke="currentColor"
 * so the per-outcome modifier class controls the color via the CSS color property.
 *
 * Per the brand-sheet system rule (color is never the sole indicator of status), every
 * consumer must pair the graphic with a text label OR an aria-label on the SVG so screen-
 * reader users get the outcome verbally even when the visual cue is unavailable. The
 * ChallengeCard renderer satisfies this via role="img" + aria-label on each <svg>.
 *
 * CoWorker's brand-system assets land in Haxahedron.Web/wwwroot/img/outcomes/ when ready;
 * swap inline SVG → <img src="img/outcomes/won.svg" /> at that point. The .hax-outcome-graphic
 * sizing rule still applies.
 */

.hax-outcome-graphic {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.hax-outcome-graphic--won {
    color: var(--hax-status-success);   /* lime-400 */
}

.hax-outcome-graphic--lost {
    /* Bumped from --hax-status-error (red-300 #FCA5A5) to red-400 #F87171 — red-300 reads
       washed-out / near-white against the dark-green page bg in the queue card context.
       The brand-sheet error red-300 still applies for validation chips (which sit on a
       translucent-red bg that gives them their visual weight); for stand-alone outcome
       graphics on the card surface, the more saturated red-400 carries the meaning. */
    color: #F87171;
    background-color: rgba(248, 113, 113, 0.10);
    border-radius: 4px;
}

.hax-outcome-graphic--cancelled {
    /* No dedicated cancelled-status var in the brand sheet (cancelled is a neutral
       terminal state, not a status alert). Sky-300 (#7DD3FC) gives it a recognizable
       blue identity for the neutral terminal state. Brand-sheet's --hax-status-info
       (sky-400 #38BDF8) is the canonical "blue" but it carries a "live / active"
       semantic — using sky-300 for cancelled keeps the visual blue family without
       conflating with active-status meaning. Matches the bumped-saturation +
       translucent-bg pattern used by --won and --lost. */
    color: #7DD3FC;
    background-color: rgba(125, 211, 252, 0.10);
    border-radius: 4px;
}