/* ============================================================
   Blazor error UI
   ============================================================ */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* ============================================================
   Layout — drawer & nav
   ============================================================ */
.mud-nav-link {
    white-space: nowrap;
    overflow: hidden;
}

/* ============================================================
   App bar — compact status bar matching VB6 classic top bar
   ============================================================ */
.mud-appbar.mud-appbar-fixed-top {
    min-height: 32px !important;
    height: 32px !important;
}

.mud-appbar .mud-typography-body2 {
    font-size: 0.8rem;
    line-height: 32px;
}

/* Trial sessions counter — centered in app bar */
.trial-counter-badge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 700;
    color: #7B2D8E;
    text-decoration: none;
    white-space: nowrap;
    background: white;
    border-radius: 12px;
    padding: 2px 12px;
}

.trial-counter-badge:hover {
    color: #5E1A6E;
    background: #f5f5f5;
}

/* Offset main content for the thinner app bar */
.mud-main-content {
    padding-top: 32px !important;
}

/* ============================================================
   Splash screen overlay
   ============================================================ */
.splash-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #AFAAA2;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    outline: none;
}

.splash-border {
    border: 7px solid #7B2D8E;
    border-radius: 12px;
    padding: 56px 48px 32px 48px;
    background: white;
    text-align: center;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.splash-border:hover {
    transform: scale(1.03);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: 0;
}

.splash-note {
    position: absolute;
    width: 38px;
    height: auto;
    top: -15px;
    left: 93px;
    z-index: 1;
}

.splash-logo {
    max-width: 360px;
    width: 100%;
    height: auto;
}

.splash-hint {
    font-family: 'Berlin Sans FB Demi', 'Berlin Sans FB', sans-serif;
    font-size: 1.4rem;
    color: #7B2D8E;
    margin-top: 12px;
}

/* ============================================================
   Countdown overlay (3-2-1-Go! before session start)
   Matches VB6 frmCountdown: background image, purple border,
   original GIF images at scattered positions, cool-wipe exit.
   ============================================================ */
.countdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-image: url('/images/NoteableBackground.jpg');
    background-repeat: repeat;
    background-size: 600px;
    border: 10px solid #800080;
    overflow: hidden;
    cursor: pointer;
}

.countdown-wipe {
    animation: coolWipe 0.2s ease-in forwards;
    transform-origin: 0 0;
}

.countdown-preload {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.countdown-img {
    position: absolute;
    user-select: none;
    pointer-events: none;
}

/* Scattered positions matching VB6 frmCountdown layout.
   GIFs at native size: numbers 248x249px, Go! 611x333px. */
.countdown-pos-3 { left: 18%; top: 35%; }
.countdown-pos-2 { left: 42%; top: 5%;  }
.countdown-pos-1 { left: 64%; top: 28%; }
.countdown-pos-go { left: calc(50% - 305px); top: calc(50% - 166px); }

.countdown-paused {
    position: absolute;
    bottom: 8%;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Berlin Sans FB Demi', 'Berlin Sans FB', 'Arial Black', sans-serif;
    font-size: 2rem;
    color: #800080;
    letter-spacing: 0.3em;
}

@keyframes coolWipe {
    0% { transform: scale(1); }
    100% { transform: scale(0); }
}

/* ============================================================
   Right/Wrong feedback — VB6 lblCorrect/lblIncorrect (big) plus
   lblEncourage/lblPunish (random praise/criticism). Sits centered
   above the staff inside the flashcard; legacy showed for 1.2s
   then cleared via timRewardsAndPunishments.
   ============================================================ */
/* Sits near the top of the white inner area. Legacy lblCorrect was
   only 3px below the top, but with our slightly different card metrics
   ~14px reads better visually. */
.feedback-overlay {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
    z-index: 6;
    animation: feedbackPop 0.15s ease-out;
}

/* Big "Correct" / "Incorrect" — legacy lblCorrect/lblIncorrect:
   Arial 39.75pt bold (≈53px ≈ 3.3rem). VB6 specified "Scruff LET"
   for lblIncorrect but the font almost never shipped with Windows
   so it fell back to Arial — the screenshots confirm Arial. */
.feedback-big {
    font-family: Arial, sans-serif;
    font-size: 3.3rem;
    font-weight: 700;
    line-height: 1;
}

/* Random praise / criticism — legacy lblEncourage/lblPunish:
   Arial 24pt regular (≈32px ≈ 2rem). Not bold. Sits 12px below the
   big label (legacy: 68px form-Y vs 56px big-text bottom). */
.feedback-small {
    font-family: Arial, sans-serif;
    font-size: 2rem;
    font-weight: 400;
    margin-top: 12px;
    padding: 0 8px;
    line-height: 1.05;
}

@keyframes feedbackPop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   Pause overlay — VB6 picPause/shpPauseScreen styling
   Notes-pattern background, white card with dark navy border,
   italic script-style "Pause" text. Click or press P to resume.
   ============================================================ */
.pause-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background-image: url('/images/NoteableBackground.jpg');
    background-repeat: repeat;
    background-size: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pause-image {
    width: 633px;
    max-width: 80vw;
    height: auto;
    filter: drop-shadow(4px 6px 14px rgba(0, 0, 0, 0.3));
    user-select: none;
    pointer-events: none;
}

.pause-hint {
    margin-top: 18px;
    text-align: center;
    color: #1A237E;
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    user-select: none;
}

/* Hint card — 170×265 white card with a peach (#FFE0C0) frame:
   56px top, 20px left/right/bottom. The "Hint" header sits centered in the
   top peach band; the white inner area holds the numbered hints and key
   info. Staff extensions and the big answer letter overlay the whole card
   so they continue unbroken from the flashcard through the peach left
   border into the white area. Sits in front of the flashcard and stoplight
   (wrapper sets z-index 5). */
.hint-card {
    position: absolute;
    top: -8px;   /* legacy hint card sits ~8px above the flashcard top */
    left: 365px; /* flashcard width (395) − 30px overlap */
    width: 168px;
    height: 264px;
    background: #FFE0C0;
    box-sizing: border-box;
    font-family: 'MS Sans Serif', Arial, sans-serif;
    color: #000;
    overflow: hidden;
    pointer-events: none;
}

/* "Hint" header — centered both ways in the 28px peach top band.
   Legacy hintlabel: MS Sans Serif 13.5pt bold (≈18px), #800080. */
.hint-card-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #800080;
    font-weight: bold;
    font-size: 18px;
}

/* White inner area inside the peach frame. Legacy hintCard BorderWidth=10,
   so left/right/bottom peach is 10px and the top band absorbs the hintlabel.
   Body labels default to MS Sans Serif 8.25pt (≈11px) regular. */
.hint-card-inner {
    position: absolute;
    top: 28px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: #ffffff;
    box-sizing: border-box;
    font-size: 11px;
    overflow: hidden;
}

.hint-card-rows {
    padding: 14px 14px 0;
}

.hint-card-row {
    margin: 3px 0;
    line-height: 1.3;
}

.hint-card-key-block {
    text-align: center;
    margin-top: 14px;
    line-height: 1.35;
}

/* Staff extension SVG covers the whole card so lines and the big answer
   letter can paint over both the peach frame and the white inner area. */
.hint-staff-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* ============================================================
   Dashboard — background & logo
   ============================================================ */
.dashboard-bg {
    background-image: url('/images/NoteableBackground.jpg');
    background-repeat: repeat;
    background-size: 600px;
    min-height: calc(100vh - 64px);
    padding: 64px 24px 24px;
}

.dashboard-logo-section {
    text-align: center;
    margin-bottom: 8px;
}

.dashboard-logo-wrapper {
    display: inline-block;
    position: relative;
}

.dashboard-note-character {
    position: absolute;
    top: -20px;
    left: 106px;
    width: 52px;
    height: auto;
    z-index: 1;
}

.dashboard-logo {
    max-width: 500px;
    width: 100%;
    height: auto;
}

/* ============================================================
   Classic main menu — matches VB6 Noteable look
   All borders share the same 14px #91278C purple weight.
   Shadow/glow applied via filter on the unified menu-unit wrapper.
   ============================================================ */

/* Shared border width so offshoot overlap stays in sync automatically */
.classic-menu-unit {
    --panel-border: 14px;
}

/* Layout wrapper — centers everything */
.classic-layout-wrapper {
    max-width: 920px;
    margin: 40px auto 0 calc(50% - 327px);
    position: relative;
}

/* Unified wrapper — button + panel + offshoot are one shadow/glow unit */
.classic-menu-unit {
    position: relative;
    filter: drop-shadow(5px 6px 6px rgba(0, 0, 0, 0.65));
    transition: filter 0.3s ease;
}

.classic-menu-unit:has(.classic-start-btn:hover) {
    filter: drop-shadow(0 0 14px rgba(255, 255, 165, 0.65))
            drop-shadow(0 0 28px rgba(254, 254, 204, 0.4))
            drop-shadow(4px 5px 6px rgba(0, 0, 0, 0.25));
}

/* Start Session button — overlaps upper-left of the panel */
.classic-start-section {
    position: relative;
    z-index: 2;
    text-align: left;
    padding-left: 0;
    margin-bottom: -58px;
    margin-left: -76px;
}

.classic-start-btn {
    display: inline-block;
    background: white;
    border: var(--panel-border) solid #91278C;
    border-radius: var(--panel-border);
    color: #111;
    font-family: 'Berlin Sans FB Demi', 'Berlin Sans FB', 'Arial Rounded MT Bold', 'Arial Black', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    padding: 16px 30px 14px;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.classic-start-btn:hover {
    color: #111;
    text-decoration: none;
    background: radial-gradient(ellipse at center, #FFFFA5 0%, #FEFECC 45%, white 80%);
}

/* Panel row — panel + links offshoot side by side */
.classic-panel-row {
    display: flex;
    align-items: center;
}

/* Main panel — thick purple border, WHITE background */
.classic-main-panel {
    flex: 1;
    max-width: 645px;
    border: var(--panel-border) solid #91278C;
    border-radius: 108px;
    background: white;
    padding: 64px 48px 68px 66px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Labels row — sits above the pink panels */
.classic-panel-labels-row {
    display: flex;
    gap: 20px;
    align-items: baseline;
}

.classic-label-user {
    flex: 0 0 140px;
}

.classic-label-deck {
    flex: 1;
}

.classic-deck-panel-header {
    text-align: right;
    margin-bottom: 4px;
}

/* Panels row — pink sub-panels side by side */
.classic-panels-row {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

/* Links offshoot — extends from the panel's right side with matching border */
.classic-links-offshoot {
    background: white;
    border: var(--panel-border) solid #91278C;
    border-left: none;
    border-radius: 0 20px 20px 0;
    margin-left: calc(-1 * (var(--panel-border) + 9px));
    position: relative;
    z-index: 1;
    padding: 16px 22px 16px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.classic-nav-link {
    color: #0000CC;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-bottom-color: #E0E0E0;
    border-radius: 3px;
    margin-top: -1px;
    white-space: nowrap;
}

.classic-nav-link:first-child {
    margin-top: 0;
}

.classic-nav-link:last-child {
    border-bottom-color: transparent;
}

.classic-nav-link:hover {
    text-decoration: none;
    color: #0000CC;
    border-color: #E0E0E0;
    position: relative;
    z-index: 1;
}

/* Pink sub-panels (User and Deck) */
.classic-sub-panel {
    background: #FFE0C0;
    border: 1px solid #C0C0C0;
    border-radius: 1rem;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

/* Panel section labels — match VB6 MS Sans Serif 8.25 normal weight */
.classic-panel-label {
    font-size: 0.85rem;
    font-weight: 400;
    color: #333;
}

/* User panel */
.classic-user-panel {
    flex: 0 0 140px;
    position: relative;
}

.classic-user-list {
    background: white;
    border: 2px solid #999;
    border-top-color: #666;
    border-left-color: #666;
    flex: 1;
    min-height: 80px;
    overflow-y: auto;
    font-family: 'Segoe UI', 'Arial', sans-serif;
    font-size: 0.9rem;
}

.classic-user-item {
    padding: 2px 6px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.classic-user-item:hover {
    background: #D8D8FF;
}

.classic-user-item.selected {
    background: #0078D7;
    color: white;
}

/* User context menu (right-click) */
.user-context-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.user-context-menu {
    position: fixed;
    z-index: 1000;
    background: #F0F0F0;
    border: 1px solid #999;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
    padding: 2px 0;
    min-width: 180px;
    font-family: 'Segoe UI', 'Arial', sans-serif;
    font-size: 0.85rem;
}

.user-context-item {
    padding: 4px 24px;
    cursor: pointer;
    white-space: nowrap;
}

.user-context-item:hover {
    background: #0078D7;
    color: white;
}

/* Deck panel */
.classic-deck-panel {
    flex: 0;
    padding-top: 6px;
}


.classic-action-link {
    color: #0000CC;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 3px;
}

.classic-action-link:hover {
    text-decoration: none;
    color: #0000CC;
    background: white;
    border-color: #E0E0E0;
}

/* White container for deck preset cards */
.classic-deck-presets-container {
    background: white;
    border: 1px solid #CCC;
    border-radius: 4px;
    padding: 6px 12px 10px;
}

.classic-deck-presets-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.classic-deck-preset {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

/* Per-preset label — hidden by default, shown for selected or on container hover */
.classic-deck-preset-label {
    font-size: 0.75rem;
    font-weight: 400;
    color: #555;
    margin-bottom: 2px;
    visibility: hidden;
    text-align: center;
}

.classic-deck-preset.selected .classic-deck-preset-label {
    visibility: visible;
}

.classic-deck-presets-container:hover .classic-deck-preset-label {
    visibility: visible;
}

/* Deck card — classic outset (raised) look by default */
.classic-deck-card {
    width: 52px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    border-top-color: #FFF;
    border-left-color: #FFF;
    border-bottom-color: #666;
    border-right-color: #666;
    border-radius: 3px;
    background: #F0F0F0;
    transition: opacity 0.15s ease;
}

.classic-deck-card img {
    image-rendering: pixelated;
}

.classic-deck-preset:hover .classic-deck-card {
    opacity: 0.85;
}

/* Selected preset — inset (pressed) look with purple tint */
.classic-deck-preset.selected .classic-deck-card {
    background: #D8B8E0;
    border-top-color: #666;
    border-left-color: #666;
    border-bottom-color: #FFF;
    border-right-color: #FFF;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* "Always Use Deck" lock — presets are greyed out and non-interactive */
.classic-deck-presets-container.locked .classic-deck-presets-row {
    opacity: 0.45;
    pointer-events: none;
}

.classic-deck-locked-note {
    margin-top: 6px;
    font-size: 0.72rem;
    font-style: italic;
    color: #7B2D8E;
    text-align: center;
}

/* ============================================================
   Stoplight — classic VB6 cross-hatch mesh over each circle
   ============================================================ */
.stoplight-circle {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    border: 5px solid #111;
    position: relative;
    overflow: hidden;
}

.stoplight-mesh {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M-1,1 L1,-1 M0,6 L6,0 M5,7 L7,5 M-1,5 L1,7 M0,0 L6,6 M5,-1 L7,1' stroke='black' stroke-opacity='.85' stroke-width='1' fill='none'/></svg>");
    background-size: 6px 6px;
}

/* ============================================================
   Stats panel (quick stats on dashboard)
   ============================================================ */
.dashboard-panel {
    background: #FFF8EE;
    border: 2px solid #E8D5B8;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Compact so the quick-stats sit below — not competing with — the main menu panel. */
.dashboard-stats-panel {
    max-width: 600px;
    margin: 0 auto 24px auto;
    padding: 16px;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Welcome greeting above the stats — bold black, matching the page's plain text. */
.dashboard-welcome {
    text-align: center;
    font-weight: bold;
    color: #000;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

/* Quick-stats tiles — the All-Time totals tile look (white card, peach frame, tabular
   number), scaled down a little so the summary stays secondary to the main panel. */
.stat-box {
    background: #fff;
    border: 3px solid #ffe0c0;          /* &H00C0E0FF peach, like the All-Time tiles */
    border-radius: 4px;
    padding: 10px 6px 8px;
    text-align: center;
}

.stat-value {
    font-size: 1.7rem;
    font-weight: bold;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #333;
}

.stat-label {
    font-size: 0.72rem;
    color: #555;
    margin-top: 5px;
}

/* Loader shown while a signed-in account's saved history hydrates from the DB. */
.dashboard-stats-loading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 64px;
}

.dashboard-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid #E8D5B8;
    border-top-color: #7B2D8E;
    border-radius: 50%;
    animation: dashboard-spin 0.8s linear infinite;
}

@keyframes dashboard-spin {
    to { transform: rotate(360deg); }
}

.dashboard-stats-loading-text {
    color: #7B2D8E;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Last-session summary — a link to that session's detail on the Statistics page. */
.last-session-summary {
    display: block;
    margin-top: 12px;
    padding: 8px 12px;
    background: #FFF8E8;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #555;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.last-session-summary:hover {
    background: #E8DCC4;
    color: #333;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
    .dashboard-logo {
        max-width: 260px;
    }

    .dashboard-note-character {
        width: 36px;
        top: -30px;
        left: -4px;
    }

    .dashboard-bg {
        padding: 16px;
    }
}

/* Small/medium screens: simplify to stacked layout */
@media (max-width: 850px) {
    .classic-start-section {
        text-align: center;
        padding-left: 0;
        margin-left: 0;
        margin-bottom: -40px;
    }

    .classic-start-btn {
        border-width: 8px;
        font-size: 1.4rem;
        padding: 8px 28px;
        border-radius: 10px;
    }

    .classic-panel-row {
        flex-direction: column;
        align-items: stretch;
    }

    .classic-main-panel {
        border-width: 8px;
        border-radius: 24px;
        gap: 8px;
        padding: 56px 16px 24px;
        max-width: none;
    }

    .classic-panels-row {
        flex-direction: column;
    }

    .classic-user-panel {
        flex: none;
    }

    .classic-user-list {
        max-height: 80px;
    }

    .classic-deck-presets-row {
        flex-wrap: wrap;
    }

    .classic-links-offshoot {
        border: 8px solid #91278C;
        border-radius: 16px;
        margin-left: 0;
        margin-top: -8px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 20px;
        padding: 12px 20px;
    }

    .classic-nav-link {
        border-bottom: none;
        padding: 4px 0;
    }
}

/* ============================================================
   Deck Setup — compact MudBlazor inputs so the whole form fits
   on a 1920x1080 screen. Scoped under .ds-root only (component
   .razor.css can't reach MudBlazor's internal DOM).
   Re-verify these selectors if MudBlazor is upgraded across a
   major version — breakage would be cosmetic (taller page), not
   functional.
   ============================================================ */
.ds-root .mud-input-control-boolean-input,
.opt-root .mud-input-control-boolean-input { margin: 0; }
.ds-root .mud-checkbox,
.ds-root .mud-radio,
.opt-root .mud-checkbox,
.opt-root .mud-radio { margin: 0; }

/* Biggest win: kill the ~9px ripple-button padding around each tick/dot
   (default row ~48px -> ~24px). MudBlazor's own rule needs !important here. */
.ds-root .mud-checkbox .mud-icon-button,
.ds-root .mud-radio   .mud-icon-button,
.opt-root .mud-checkbox .mud-icon-button,
.opt-root .mud-radio   .mud-icon-button { padding: 2px !important; }

/* Shrink the glyph */
.ds-root .mud-checkbox .mud-icon-button .mud-icon-root,
.ds-root .mud-radio   .mud-icon-button .mud-icon-root { font-size: 1.05rem; }

/* Tighten labels */
.ds-root .mud-checkbox .mud-typography,
.ds-root .mud-radio   .mud-typography,
.opt-root .mud-checkbox .mud-typography,
.opt-root .mud-radio   .mud-typography { font-size: 0.82rem; line-height: 1.05; }

/* Options' labels wrap far more than Deck Setup's (the long Feedback / DrillIt
   sentences), and 1.05 leading lets wrapped lines collide — that's the overlap.
   Loosen the leading just for Options, plus a hair of vertical room between
   stacked rows so flush single-line checkboxes don't read as cramped. */
.opt-root .mud-checkbox .mud-typography,
.opt-root .mud-radio   .mud-typography { line-height: 1.25; }
.opt-root .mud-input-control-boolean-input { margin: 1px 0; }

/* Single-letter Note / Solfège labels never need to wrap (keeps 4 cols on one line) */
.ds-root .ds-panel-notes   .mud-typography,
.ds-root .ds-panel-solfege .mud-typography { white-space: nowrap; }

/* Radio groups stack tight; remove default input-control top margin */
.ds-root .mud-input-control,
.opt-root .mud-input-control { margin: 0; }

/* Compact the inline MudSelect / MudNumericField inputs */
.ds-root .mud-select .mud-input-slot,
.opt-root .mud-select .mud-input-slot { padding-top: 4px; padding-bottom: 4px; }

/* Play-mode radios stack vertically like the VB6 option group, with breathing room. */
.ds-root .ds-panel-playmode .mud-radio-group { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.ds-root .ds-panel-playmode .mud-radio { display: flex; }

/* "Use MIDI" sits below the white play-mode well as its own feature, with a clear gap. */
.ds-root .mud-checkbox.ds-usemidi { margin-top: 16px !important; }

/* View radios in three columns like the legacy Frame2: Treble/Bass, Alto/Tenor,
   then Custom centred on the right. grid-auto-flow:column fills each column top-
   to-bottom in markup order (Treble, Bass | Alto, Tenor | Custom). */
.ds-root .ds-view-panel .mud-radio-group {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    justify-content: start;
    /* Pin each radio to the left of its column so Treble/Bass (and Alto/Tenor)
       share a flush left edge instead of centering within the column. */
    justify-items: start;
    column-gap: 18px;
    row-gap: 2px;
}
.ds-root .ds-view-panel .mud-radio { display: flex; }
.ds-root .ds-view-panel .mud-radio:last-child { grid-row: 1 / span 2; align-self: center; }

/* ============================================================
   Retro 90s sunken checkboxes — Deck Setup (.ds-root) + Options (.opt-root).
   MudBlazor v9 tags the icon button .mud-checkbox-true / .mud-checkbox-false
   and renders a real <input type=checkbox>. We hide the Material glyph and draw
   a classic white "sunken well" box with a CSS checkmark. Re-verify these
   selectors if MudBlazor changes its checkbox DOM across a major version.
   ============================================================ */
/* Hide the Material glyph (the SVG is a direct child of .mud-icon-button). */
.ds-root .mud-checkbox .mud-icon-root,
.opt-root .mud-checkbox .mud-icon-root { display: none; }

/* Turn the icon button itself into the checkbox frame. */
.ds-root .mud-checkbox .mud-icon-button,
.opt-root .mud-checkbox .mud-icon-button {
    position: relative;
    width: 18px;
    height: 18px;
    min-width: 0;
    padding: 0 !important;
    border-radius: 0;
    background-color: transparent !important;
}

/* The classic white sunken well: dark top/left edges, light bottom/right. */
.ds-root .mud-checkbox .mud-icon-button::before,
.opt-root .mud-checkbox .mud-icon-button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #000000, inset -1px -1px 0 #dfdfdf;
    z-index: 1;
}

/* Classic black tick when checked (.mud-checkbox-true is on the icon button). */
.ds-root .mud-checkbox-true.mud-icon-button::after,
.opt-root .mud-checkbox-true.mud-icon-button::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 3px;
    height: 7px;
    border: solid #1a1a1a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    z-index: 2;
}

/* Disabled (tier-locked) boxes read as greyed-out wells. */
.ds-root .mud-checkbox.mud-disabled .mud-icon-button::before,
.opt-root .mud-checkbox.mud-disabled .mud-icon-button::before { background: #e8e8e8; }

/* A little gap between the box and its caption, matching the classic Windows
   checkbox metric (~3px box-to-text on top of the ~2px built into the button). */
.ds-root .mud-checkbox .mud-typography,
.opt-root .mud-checkbox .mud-typography { margin-left: 3px; }

/* ============================================================
   Retro 90s option (radio) buttons — Deck Setup + Options.
   Same treatment as the checkboxes but round: a white sunken
   circular well with a black centre dot when selected. MudBlazor
   tags the SELECTED radio's icon button with .mud-checked.
   ============================================================ */
/* Hide the Material radio glyph (the SVG inside the icon button). */
.ds-root .mud-radio .mud-icon-root,
.opt-root .mud-radio .mud-icon-root { display: none; }

/* Turn the icon button into a round checkbox-style frame. */
.ds-root .mud-radio .mud-icon-button,
.opt-root .mud-radio .mud-icon-button {
    position: relative;
    width: 18px;
    height: 18px;
    min-width: 0;
    padding: 0 !important;
    border-radius: 50%;
    background-color: transparent !important;
}

/* The classic white sunken well: dark top/left edges, light bottom/right. */
.ds-root .mud-radio .mud-icon-button::before,
.opt-root .mud-radio .mud-icon-button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #000000, inset -1px -1px 0 #dfdfdf;
    border-radius: 50%;
    z-index: 1;
}

/* Black centre dot when selected (.mud-checked is on the icon button). */
.ds-root .mud-radio .mud-icon-button.mud-checked::after,
.opt-root .mud-radio .mud-icon-button.mud-checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1a1a1a;
    z-index: 2;
}

/* Disabled (tier-locked / unavailable) options read as greyed-out wells. */
.ds-root .mud-radio.mud-disabled .mud-icon-button::before,
.opt-root .mud-radio.mud-disabled .mud-icon-button::before { background: #e8e8e8; }

/* Small gap between the dot well and its caption, like the checkboxes. */
.ds-root .mud-radio .mud-typography,
.opt-root .mud-radio .mud-typography { margin-left: 3px; }

/* ============================================================
   Sheet-music page background, shared with the homepage/dashboard
   (full-bleed NoteableBackground.jpg, repeating at 600px).
   ============================================================ */
.sheet-bg {
    background-image: url('/images/NoteableBackground.jpg');
    background-repeat: repeat;
    background-size: 600px;
    min-height: calc(100vh - 64px);
}

/* Options page content sits on the pattern with comfortable padding. */
.opt-root { padding: 16px 24px 32px; }