/* /Components/Animations/Loading.razor.rz.scp.css */
.loader-guy[b-w5b0la4lgx] {
    position: relative;
    width: 108px;
    display: flex;
    justify-content: space-between;
}

    .loader-guy[b-w5b0la4lgx]::after, .loader-guy[b-w5b0la4lgx]::before {
        content: '';
        display: inline-block;
        width: 48px;
        height: 48px;
        background-color: var(--color-static-white);
        background-image: radial-gradient(circle 14px, var(--color-label-strong) 100%, transparent 0);
        background-repeat: no-repeat;
        border-radius: 50%;
        animation: eyeMove-b-w5b0la4lgx 10s infinite, blink-b-w5b0la4lgx 10s infinite;
    }

.loader-text[b-w5b0la4lgx] {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
}

    .loader-text[b-w5b0la4lgx]::before {
        content: 'Thinking';
        color: var(--color-label-primary);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.6em;
        letter-spacing: 2px;
        display: inline-block;
        box-sizing: border-box;
        animation: floating-b-w5b0la4lgx 0.75s ease-out infinite alternate;
    }


@keyframes floating-b-w5b0la4lgx {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-25px);
    }
}

@keyframes eyeMove-b-w5b0la4lgx {
    0%, 10% {
        background-position: 0px 0px
    }

    13%, 40% {
        background-position: -15px 0px
    }

    43%, 70% {
        background-position: 15px 0px
    }

    73%, 90% {
        background-position: 0px 15px
    }

    93%, 100% {
        background-position: 0px 0px
    }
}

@keyframes blink-b-w5b0la4lgx {
    0%, 10%, 12%, 20%, 22%, 40%, 42%, 60%, 62%, 70%, 72%, 90%, 92%, 98%, 100% {
        height: 48px
    }

    11%, 21%,41%, 61%, 71%, 91%, 99% {
        height: 18px
    }
}

/* /Components/Brand/Logo.razor.rz.scp.css */
.logo[b-4f1wa4h1xr] {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    display: inline-flex;
    user-select: none;
}

.logo-scoil[b-4f1wa4h1xr] {
    color: var(--color-primary);
}

.logo-sy[b-4f1wa4h1xr] {
    color: var(--color-accent);
}

.logo-sm[b-4f1wa4h1xr] {
    font-size: 1.25rem;
}

.logo-md[b-4f1wa4h1xr] {
    font-size: 1.5rem;
}

.logo-lg[b-4f1wa4h1xr] {
    font-size: 2.5rem;
}
/* /Components/Buttons/SelectableItem.razor.rz.scp.css */
.si-selected[b-inlj6zu2ns] {
    background-color: var(--color-primary-subtle);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
/* /Components/Notifications/Toast.razor.rz.scp.css */
/* Wrapper handles height collapse for smooth repositioning of remaining toasts */
.toast-wrapper[b-gtg47tnltb] {
    max-height: 500px; /* Generous max to accommodate any toast height */
    overflow: hidden;
    transition: max-height 400ms ease-out,
                margin-bottom 400ms ease-out,
                padding 400ms ease-out,
                opacity 400ms ease-out;
}

.toast-entering[b-gtg47tnltb] {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.toast-visible-wrapper[b-gtg47tnltb] {
    max-height: 500px;
    opacity: 1;
}

.toast-dismissing[b-gtg47tnltb] {
    max-height: 0;
    margin-bottom: -12px; /* Negative margin equal to gap (gap-3 = 12px) */
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

/* Content handles slide/fade animations */
.toast-content-entering[b-gtg47tnltb] {
    opacity: 0;
    transform: translateX(100%);
}

.toast-content-visible[b-gtg47tnltb] {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 300ms ease-out,
                transform 300ms ease-out;
}

.toast-content-exiting[b-gtg47tnltb] {
    opacity: 0;
    transform: translateY(-20px); /* Slide UP, not right */
    transition: opacity 400ms ease-out,
                transform 400ms ease-out;
}
/* /Pages/Dashboard/Components/CurriculumCoverageWidget.razor.rz.scp.css */
/* The rings draw themselves in once, from empty to their resting value. The figure is already
   in the middle of the ring as text, so the animation only ever confirms what is written —
   nothing here is only knowable by watching it. */

.coverage-arc[b-ikpyea3uc3] {
    stroke-dashoffset: var(--arc-offset);
    animation: coverage-arc-draw-b-ikpyea3uc3 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The elapsed-weeks ring follows the coverage ring rather than racing it. */
.coverage-arc.stroke-accent[b-ikpyea3uc3] {
    animation-delay: 120ms;
}

@keyframes coverage-arc-draw-b-ikpyea3uc3 {
    from {
        stroke-dashoffset: var(--arc-length);
    }

    to {
        stroke-dashoffset: var(--arc-offset);
    }
}

@media (prefers-reduced-motion: reduce) {
    .coverage-arc[b-ikpyea3uc3] {
        animation: none;
    }
}

/* The chip tints are 8% alpha, so whatever is behind them shows through — including the arc,
   which made it read as a line drawn across the icons rather than one they sit on. Painting the
   same tint over the page's own surface gives the identical colour, opaque. The halo is that
   surface again, wide enough to leave the arc a clear gap either side of every chip: a
   box-shadow rather than a border so it costs the layout nothing and the chip centres — which
   the arc is drawn from — stay exactly where they are. */
.coverage-chip[b-ikpyea3uc3] {
    background-color: var(--color-surface);
    background-image: linear-gradient(var(--chip-tint), var(--chip-tint));
    box-shadow: 0 0 0 10px var(--color-surface);
}

.coverage-chip-primary[b-ikpyea3uc3] {
    --chip-tint: var(--color-primary-subtle);
}

.coverage-chip-accent[b-ikpyea3uc3] {
    --chip-tint: var(--color-accent-subtle);
}

/* The middle fact is pushed out so all three chip centres land on one circle concentric with
   the rings — the same circle the arc is drawn from. The distance is worked out beside
   that path and handed over as --fact-bow, so the two can never drift apart. Only from sm: up,
   where the facts sit beside the rings; stacked underneath them an indent would read as a slip,
   and Tailwind cannot put a computed value behind a breakpoint on its own. */
@media (min-width: 40rem) {
    .coverage-fact-bow[b-ikpyea3uc3] {
        margin-left: var(--fact-bow);
    }
}
/* /Pages/Home/Home.razor.rz.scp.css */
.botanical-container[b-yet8fechrc] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Breeze wisps — diagonal curves through the right half of the hero */
.wisp[b-yet8fechrc] {
    position: absolute;
    animation: wisp-drift-b-yet8fechrc var(--drift-duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

.wisp-1[b-yet8fechrc] {
    --drift-duration: 24s;
    --delay: 0s;
    width: 600px;
    bottom: 30%;
    left: 45%;
}

.wisp-2[b-yet8fechrc] {
    --drift-duration: 28s;
    --delay: -6s;
    width: 700px;
    bottom: 15%;
    left: 38%;
}

.wisp-3[b-yet8fechrc] {
    --drift-duration: 22s;
    --delay: -12s;
    width: 550px;
    bottom: 50%;
    left: 50%;
}

.wisp-4[b-yet8fechrc] {
    --drift-duration: 30s;
    --delay: -3s;
    width: 480px;
    bottom: 60%;
    left: 55%;
}

/* Travelling leaves — wrapper handles diagonal travel, img handles tumble */
.leaf[b-yet8fechrc] {
    position: absolute;
    animation: leaf-travel-b-yet8fechrc var(--travel-duration) linear infinite;
    animation-delay: var(--delay);
}

.leaf-1[b-yet8fechrc] {
    --travel-duration: 22s;
    --delay: -2s;
    bottom: 30%;
    left: 50%;
}

.leaf-2[b-yet8fechrc] {
    --travel-duration: 28s;
    --delay: -10s;
    bottom: 40%;
    left: 42%;
}

.leaf-3[b-yet8fechrc] {
    --travel-duration: 18s;
    --delay: -6s;
    bottom: 18%;
    left: 55%;
}

/* Leaf image — sizing, coloring, and tumble animation */
[b-yet8fechrc] .leaf-img {
    display: block;
    animation: leaf-tumble-b-yet8fechrc var(--tumble-duration, 7s) linear infinite;
}

[b-yet8fechrc] .leaf-1 .leaf-img {
    width: 40px;
    height: 40px;
    --tumble-duration: 8s;
}

[b-yet8fechrc] .leaf-2 .leaf-img {
    width: 34px;
    height: 34px;
    --tumble-duration: 10s;
}

[b-yet8fechrc] .leaf-3 .leaf-img {
    width: 44px;
    height: 44px;
    --tumble-duration: 6s;
}

/* Teal leaf coloring via CSS filter */
[b-yet8fechrc] .leaf-teal {
    filter: invert(40%) sepia(60%) saturate(500%) hue-rotate(130deg) brightness(0.9);
}

/* Amber leaf coloring via CSS filter */
[b-yet8fechrc] .leaf-amber {
    filter: invert(55%) sepia(70%) saturate(400%) hue-rotate(10deg) brightness(1.1);
}

/* Hero mascot — gentle vertical float, consistent in tone with the wisps and leaves */
.hero-mascot-img[b-yet8fechrc] {
    --mascot-float-duration: 5s;
    display: block;
    width: 100%;
    max-width: 11rem;
    height: auto;
    animation: mascot-float-b-yet8fechrc var(--mascot-float-duration) ease-in-out infinite;
}

/* Mascot float: slow, continuous vertical loop */
@keyframes mascot-float-b-yet8fechrc {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-28px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Wisp drift: more pronounced undulation */
@keyframes wisp-drift-b-yet8fechrc {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(30px, -25px) rotate(2.5deg);
    }
    50% {
        transform: translate(-20px, 15px) rotate(-1.5deg);
    }
    75% {
        transform: translate(25px, -30px) rotate(2deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/* Leaf travel: diagonal path through the right half of the hero */
@keyframes leaf-travel-b-yet8fechrc {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    5% {
        opacity: 0.22;
    }
    85% {
        opacity: 0.22;
    }
    100% {
        transform: translate(35vw, -55vh);
        opacity: 0;
    }
}

/* Leaf tumble: multi-axis rotation for playful 3D feel */
@keyframes leaf-tumble-b-yet8fechrc {
    0% {
        transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    }
    25% {
        transform: rotateZ(180deg) rotateX(20deg) rotateY(-15deg);
    }
    50% {
        transform: rotateZ(360deg) rotateX(-10deg) rotateY(20deg);
    }
    75% {
        transform: rotateZ(540deg) rotateX(15deg) rotateY(-10deg);
    }
    100% {
        transform: rotateZ(720deg) rotateX(0deg) rotateY(0deg);
    }
}

/* Mobile: scale down, shorter travel distances */
@media (max-width: 1023px) {
    .wisp-1[b-yet8fechrc] {
        width: 350px;
        bottom: 20%;
        left: 15%;
    }

    .wisp-2[b-yet8fechrc] {
        width: 420px;
        bottom: 5%;
        left: 10%;
    }

    .wisp-3[b-yet8fechrc] {
        width: 320px;
        bottom: 40%;
        left: 5%;
    }

    .wisp-4[b-yet8fechrc] {
        width: 280px;
        bottom: 50%;
        left: 20%;
    }

    [b-yet8fechrc] .leaf-1 .leaf-img {
        width: 28px;
        height: 28px;
    }

    [b-yet8fechrc] .leaf-2 .leaf-img {
        width: 24px;
        height: 24px;
    }

    [b-yet8fechrc] .leaf-3 .leaf-img {
        width: 30px;
        height: 30px;
    }

    @keyframes leaf-travel-b-yet8fechrc {
        0% {
            transform: translate(0, 0);
            opacity: 0;
        }
        5% {
            opacity: 0.22;
        }
        85% {
            opacity: 0.22;
        }
        100% {
            transform: translate(25vw, -45vh);
            opacity: 0;
        }
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wisp[b-yet8fechrc],
    .leaf[b-yet8fechrc],
    .hero-mascot-img[b-yet8fechrc] {
        animation: none;
    }

    [b-yet8fechrc] .leaf-img {
        animation: none;
    }
}
/* /Pages/Planner/Components/Lessons/AI/AiThinkingIndicator.razor.rz.scp.css */
/* -----------------------------------------------------------------------
   AiThinkingIndicator — pulsing concentric rings in the AI colour token.
   Animations respect prefers-reduced-motion.
   ----------------------------------------------------------------------- */

/* Wrapper that sizes and positions the rings relative to one another */
.ai-thinking-animation[b-70qoemj3gy] {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Base ring styles */
.ai-thinking-ring[b-70qoemj3gy] {
    position: absolute;
    border-radius: 50%;
    border: 2px solid var(--color-primary-subtle);
    animation: ai-thinking-pulse-b-70qoemj3gy 2.4s ease-in-out infinite;
}

.ai-thinking-ring-outer[b-70qoemj3gy] {
    width: 80px;
    height: 80px;
    animation-delay: 0s;
    opacity: 0.4;
}

.ai-thinking-ring-mid[b-70qoemj3gy] {
    width: 56px;
    height: 56px;
    animation-delay: 0.4s;
    opacity: 0.6;
    border-color: var(--color-primary-subtle);
}

.ai-thinking-ring-inner[b-70qoemj3gy] {
    width: 32px;
    height: 32px;
    animation-delay: 0.8s;
    opacity: 0.8;
}

/* Filled core circle with the sparkle icon */
.ai-thinking-core[b-70qoemj3gy] {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ai-thinking-core-pulse-b-70qoemj3gy 2.4s ease-in-out infinite;
    z-index: 1;
}

/* Pulse keyframes — scale up and fade rings outward */
@keyframes ai-thinking-pulse-b-70qoemj3gy {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes ai-thinking-core-pulse-b-70qoemj3gy {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--color-primary-subtle);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 6px transparent;
    }
}

/* Disable pulsing for users who prefer reduced motion.
   Messages still rotate (text change is not motion). */
@media (prefers-reduced-motion: reduce) {
    .ai-thinking-ring[b-70qoemj3gy],
    .ai-thinking-core[b-70qoemj3gy] {
        animation: none;
    }

    /* Show rings as a static indicator instead of animated */
    .ai-thinking-ring-outer[b-70qoemj3gy] { opacity: 0.3; }
    .ai-thinking-ring-mid[b-70qoemj3gy] { opacity: 0.5; }
    .ai-thinking-ring-inner[b-70qoemj3gy] { opacity: 0.7; }
}