/* The carrot progress indicator, shared by the boot screen and every in-app wait.
   Its shape is defined once as <symbol id="kc-carrot"> in index.html; both layers here
   reference it with <use>. Colour reaches the symbol through custom properties, which are
   the only thing that inherits into a <use> shadow tree — class selectors do not.

   Colours are literal: this stylesheet is loaded before tokens.css so the boot screen never
   depends on anything else having arrived. */

.kc-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.carrot-pair {
    position: relative;
    display: block;
    flex-shrink: 0;
}

.carrot {
    display: block;
    width: 100%;
    height: auto;
}

.carrot-track {
    --carrot-body: #E4E6E9;
    --carrot-leaf: #DADDE1;
    --carrot-ridge: #D2D6DA;
}

.carrot-fill {
    --carrot-body: #F2A93B;
    --carrot-leaf: #6FA22F;
    --carrot-ridge: #D98E28;

    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--carrot-progress, 0%)) 0 0);
}

/* On a filled primary button the orange fights the blue, so the carrot goes monochrome. */
.carrot-pair--inverse .carrot-track {
    --carrot-body: rgba(255, 255, 255, 0.30);
    --carrot-leaf: rgba(255, 255, 255, 0.30);
    --carrot-ridge: rgba(255, 255, 255, 0.30);
}

.carrot-pair--inverse .carrot-fill {
    --carrot-body: #FFFFFF;
    --carrot-leaf: #FFFFFF;
    --carrot-ridge: rgba(255, 255, 255, 0.55);
}

/* ── Indeterminate ────────────────────────────────────────────────────────
   For waits with no known length. Colour floods in from the leafy end, rests a
   beat at a whole carrot, then drains away the same way — so the loop reads as
   one carrot being filled and eaten, not as progress restarting. */
.carrot-pair--busy .carrot-fill {
    animation: kc-carrot-cycle 1.9s ease-in-out infinite;
}

@keyframes kc-carrot-cycle {
    0%        { clip-path: inset(0 100% 0 0); }
    45%, 62%  { clip-path: inset(0 0 0 0); }
    100%      { clip-path: inset(0 0 0 100%); }
}

/* The carrot is 3.75:1, so it needs real width before it reads as a carrot rather than a
   sliver. These are the smallest that still do. */
.carrot-pair--sm { width: 4rem; }
.carrot-pair--md { width: 6rem; }
.carrot-pair--lg { width: 9rem; }

@media (prefers-reduced-motion: reduce) {
    .carrot-pair--busy .carrot-fill {
        animation: none;
        clip-path: inset(0 45% 0 0);
    }
}