/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* -----------------------------------------------------------------------
   ReconnectModal.razor.css
   Continuo v1 Part 6.2 — branded the stock Blazor reconnect UI. Component-
   scoped (not part of app.css / the snapshot). Appearance is token-driven so
   the modal follows the active theme; the framework's visibility-toggling
   state classes + keyframes are preserved verbatim. The :root token defaults
   resolve even while the circuit is down (static CSS, unaffected by SignalR).
   ----------------------------------------------------------------------- */

.components-reconnect-first-attempt-visible[b-5d1uger54i],
.components-reconnect-repeated-attempt-visible[b-5d1uger54i],
.components-reconnect-failed-visible[b-5d1uger54i],
.components-pause-visible[b-5d1uger54i],
.components-resume-failed-visible[b-5d1uger54i],
.components-rejoining-animation[b-5d1uger54i] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-5d1uger54i],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-5d1uger54i],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-5d1uger54i],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-5d1uger54i],
#components-reconnect-modal.components-reconnect-retrying[b-5d1uger54i],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-5d1uger54i],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-5d1uger54i],
#components-reconnect-modal.components-reconnect-failed[b-5d1uger54i],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-5d1uger54i] {
    display: block;
}


#components-reconnect-modal[b-5d1uger54i] {
    background-color: var(--surface, #fff);
    color: var(--ink, #0f1729);
    font-family: var(--sans, system-ui, sans-serif);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--line, #e7e2d8);
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.32);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-5d1uger54i 0.5s both;

    &[open] {
        animation: components-reconnect-modal-slideUp-b-5d1uger54i 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-5d1uger54i 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }
}

#components-reconnect-modal[b-5d1uger54i]::backdrop {
    background-color: rgba(0, 0, 0, 0.45);
    animation: components-reconnect-modal-fadeInOpacity-b-5d1uger54i 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-5d1uger54i {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-5d1uger54i {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-5d1uger54i {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-5d1uger54i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-5d1uger54i] {
    margin: 0;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-2, #3a4256);
}

#components-reconnect-modal button[b-5d1uger54i] {
    border: 0;
    background-color: var(--brand, #2f5fd0);
    color: #fff;
    font-family: var(--sans, system-ui, sans-serif);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 24px;
    min-height: 40px;
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-5d1uger54i] {
        background-color: var(--brand-deep, #1f47a8);
    }

    #components-reconnect-modal button:active[b-5d1uger54i] {
        background-color: var(--brand, #2f5fd0);
    }

.components-rejoining-animation[b-5d1uger54i] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-5d1uger54i] {
        position: absolute;
        border: 3px solid var(--brand, #2f5fd0);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-5d1uger54i 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-5d1uger54i] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-5d1uger54i {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/CourseStructure.razor.rz.scp.css */
/* K.4 Path A polish (planning/K4-drag-drop-dropzone.md, frontend
   review 2026-05-09): the prior inline-style version of .lesson-zone
   bumped min-height 40 -> 56 and pa-2 -> pa-3 to enlarge the hit
   area, but at the larger size the rgba(0,0,0,0.02) fill dissolved
   into the surrounding MudPaper's already-faint background and the
   empty zone read as "broken empty container" instead of "drop
   here." This file replaces those inline styles with a fuller drop-
   target affordance: brighter fill, dashed border (universal "drop
   here" cue), and an empty-state ::before pseudo-element so an
   empty chapter still tells the user what the zone is for.

   Bundle A (agent-review-followup-2026-05-10, frontend High):
   prior version hard-coded rgba(0, 0, 0, ...) for fill, border,
   AND placeholder text — all three collapse to invisible on dark
   mode's #121212 page bg, undoing the very polish this stylesheet
   was meant to land. Now uses MudBlazor's CSS palette variables
   (--mud-palette-background-grey, --mud-palette-lines-default,
   --mud-palette-text-secondary) which the MudThemeProvider flips
   per palette. Matches the canonical pattern from
   ExerciseRuntimePanel.razor.css. Fallback values preserve the
   light-mode-only behavior if MudThemeProvider isn't present
   (bUnit harness, etc.).

   Scoped Blazor CSS (NOT in Styles/app.scss). ::deep is required
   because MudDropZone renders the .lesson-zone element inside its
   own component subtree; without ::deep the scoped CSS rewrite
   would target only the host's directly-rendered elements.
*/

/* 2026-07-02 admin overhaul B3 — the chapter drop zone previously had NO
   styling at all (grep found only the razor reference), so a course with
   zero chapters rendered literally nothing under the header. The zero-state
   coach (EmptyState) now covers the empty-course case; this rule gives the
   populated zone breathing room between chapter cards. */
[b-u3cd6j66az] .chapter-zone {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 8px;
}

[b-u3cd6j66az] .lesson-zone {
    min-height: 56px;
    padding: 8px;
    background-color: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.035));
    border: 1px dashed var(--mud-palette-lines-default, rgba(0, 0, 0, 0.18));
    border-radius: 6px;
}

/* Empty-state hint — only shows when the zone has no children, so
   chapters with lessons stay clean. The :empty pseudo-class doesn't
   match if there's even a whitespace text node, which is fine here:
   MudDropZone renders nothing inside the zone when its filtered
   item count is zero. */
[b-u3cd6j66az] .lesson-zone:empty::before {
    content: "Drop lessons here";
    display: block;
    text-align: center;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.4));
    font-size: 0.875rem;
    line-height: 40px;
    font-style: italic;
}
/* /Components/Shared/Exercises/ExerciseHost.razor.rz.scp.css */
/* audit-2026-05 page-flow restructure P2.1 — hybrid layout for
   the exercise-with-runtime-panel pattern (ExerciseHost.razor:459+).
   Sidebar on desktop (≥ 600px) + footer on mobile (< 600px).
   Council-approved D1 hybrid recommendation 2026-05-07.

   Scoped Blazor CSS (NOT global) per
   StylesTests/CompiledCssMatchesSnapshotTests.cs — adding rules to
   the SCSS source-of-truth would break the byte-equivalence
   snapshot. *.razor.css files are out of the snapshot's scope.

   ::deep is used for the inner sticky styling because the
   ExerciseRuntimePanel component lives inside the
   .exercise-with-runtime-panel-side wrapper rendered by
   ExerciseHost — Blazor scoped CSS doesn't reach into child
   components without ::deep.
*/

/* 2026-05-12 user direction: bumped gap from 16px → 24px for a
   bit more breathing room between the exercise area and the
   runtime panel — pre-fix the panel hugged the play/submit
   buttons too tightly on mobile (where the panel stacks below
   the renderer). */
.exercise-with-runtime-panel[b-0b0myyj19w] {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}

@media (max-width: 600px) {
    .exercise-with-runtime-panel[b-0b0myyj19w] {
        flex-direction: column;
    }
}

.exercise-with-runtime-panel-main[b-0b0myyj19w] {
    flex: 1 1 auto;
    min-width: 0;
}

.exercise-with-runtime-panel-side[b-0b0myyj19w] {
    flex: 0 0 280px;
}

@media (max-width: 600px) {
    .exercise-with-runtime-panel-side[b-0b0myyj19w] {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* Sticky behavior on desktop so the summary stays in view while
   the student scrolls a tall staff. No sticky on mobile (panel
   is below the staff; sticky would obscure content above). The
   ::deep selector reaches into the embedded ExerciseRuntimePanel
   component since Blazor scoped CSS otherwise stops at the
   component boundary. */
.exercise-with-runtime-panel-side[b-0b0myyj19w]  .exercise-runtime-panel {
    position: sticky;
    top: 16px;
}

@media (max-width: 600px) {
    .exercise-with-runtime-panel-side[b-0b0myyj19w]  .exercise-runtime-panel {
        position: static;
    }
}
/* /Components/Shared/Music/PianoKeyboard.razor.rz.scp.css */
.piano-keyboard-wrapper[b-4vxpyjv323] {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    min-width: 0;
    margin: 0.25rem 0;
    padding: 0.25rem;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.piano-keyboard-active[b-4vxpyjv323] {
    border-color: #FF8F00;
    background-color: #FFF7E6;
}

.piano-label[b-4vxpyjv323] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #424242;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.piano-keyboard-scroll[b-4vxpyjv323] {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #BDBDBD;
    border-radius: 4px;
    background: #FAFAFA;
}

.piano-keyboard[b-4vxpyjv323] {
    position: relative;
    user-select: none;
}

.piano-key[b-4vxpyjv323] {
    position: absolute;
    top: 0;
    border: 1px solid #424242;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: background-color 0.08s ease, transform 0.04s ease;
}

.piano-key:focus[b-4vxpyjv323] {
    outline: 2px solid #FF8F00;
    outline-offset: -2px;
    z-index: 10;
}

.piano-key-white[b-4vxpyjv323] {
    background: #FFFFFF;
    color: #424242;
    border-radius: 0 0 3px 3px;
    z-index: 1;
}

.piano-key-white:hover:not(:disabled)[b-4vxpyjv323] {
    background: #E3F2FD;
}

.piano-key-white:active:not(:disabled)[b-4vxpyjv323] {
    background: #BBDEFB;
}

.piano-key-black[b-4vxpyjv323] {
    background: #212121;
    border-radius: 0 0 2px 2px;
    z-index: 2;
    border-color: #000000;
}

.piano-key-black:hover:not(:disabled)[b-4vxpyjv323] {
    background: #1565C0;
}

.piano-key-black:active:not(:disabled)[b-4vxpyjv323] {
    background: #0D47A1;
}

.piano-key-selected.piano-key-white[b-4vxpyjv323] {
    background: #1565C0;
    color: #FFFFFF;
}

.piano-key-selected.piano-key-black[b-4vxpyjv323] {
    background: #FF8F00;
}

.piano-key-disabled[b-4vxpyjv323] {
    cursor: not-allowed;
    opacity: 0.35;
}

.piano-key-disabled.piano-key-white[b-4vxpyjv323] {
    background: #EEEEEE;
}

.piano-key-disabled.piano-key-black[b-4vxpyjv323] {
    background: #757575;
}

.piano-key-label[b-4vxpyjv323] {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.65rem;
    pointer-events: none;
}