/* /Components/Game/ColorPickerDialog.razor.rz.scp.css */
.cp-row[b-fytru0duef] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.cp-row-label[b-fytru0duef] {
    flex: 0 0 38px;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: right;
}

.cp-swatches[b-fytru0duef] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cp-swatch[b-fytru0duef] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 2px solid #bbb;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.cp-swatch:hover[b-fytru0duef] {
    transform: scale(1.12);
}

.cp-selected[b-fytru0duef] {
    border-color: #7B2D8E;
    box-shadow: 0 0 0 2px #7B2D8E;
}
/* /Components/Game/PianoKeyboard.razor.rz.scp.css */
/* Hover highlight so it's clear which key you're about to click. CSS `fill` overrides
   the rect's fill attribute, so hover wins over the white/peach/black base colours. */
.pk-white[b-3xuhiqwd9j],
.pk-black[b-3xuhiqwd9j] {
    cursor: pointer;
    transition: fill 0.07s ease;
}

.pk-white:hover[b-3xuhiqwd9j] {
    fill: #bcdcff;
}

.pk-black:hover[b-3xuhiqwd9j] {
    fill: #5a7cc0;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-8lrjescf03],
.components-reconnect-repeated-attempt-visible[b-8lrjescf03],
.components-reconnect-failed-visible[b-8lrjescf03],
.components-pause-visible[b-8lrjescf03],
.components-resume-failed-visible[b-8lrjescf03],
.components-rejoining-animation[b-8lrjescf03] {
    display: none;
}

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


#components-reconnect-modal[b-8lrjescf03] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-8lrjescf03 0.5s both;
    &[open]

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

}

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

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

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

@keyframes components-reconnect-modal-fadeInOpacity-b-8lrjescf03 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

#components-reconnect-modal p[b-8lrjescf03] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-8lrjescf03] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-8lrjescf03] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-8lrjescf03] {
        background-color: #6b9ed2;
    }

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

    .components-rejoining-animation div[b-8lrjescf03] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-8lrjescf03 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

@keyframes components-rejoining-animation-b-8lrjescf03 {
    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/DeckSetup.razor.rz.scp.css */
/* ============================================================
   Deck Setup — re-skinned to match the original VB6 frmDeckSetup.
   TWO parent cards: Game Plan (left) and Practice Range (right);
   the Treble Range is a third inner column nested inside Practice
   Range with a small label. Peach (#FFE0C0) panels on white cards
   framed in peach, over a faint sheet-music watermark.
   ============================================================ */

.ds-root[b-63qbcqx9xj] {
    /* Wide enough to hold the native (in-game-size) staff plus non-wrapping
       columns. Legacy fit ~800px only because it used tiny native Win controls;
       MudBlazor controls are larger, so the deck needs a bit more room. */
    max-width: 1050px;
    margin: 0 auto;
    padding: 6px 16px 14px;
    /* Page pattern now comes from the full-bleed .sheet-bg wrapper (matches homepage). */
    background: transparent;
}

/* ---- Centered title with the deck name beneath it (no separating rule) ---- */
.ds-titlebar[b-63qbcqx9xj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 26px 0 12px;
    margin-bottom: 6px;
}

.ds-title[b-63qbcqx9xj] {
    font-family: 'Berlin Sans FB Demi', 'Berlin Sans FB', 'Arial Black', sans-serif;
    font-size: 1.7rem;
    color: #7B2D8E;
    line-height: 1;
}

/* Deck name matches the range-box sub-label: bold, black, same size. */
.ds-deckname[b-63qbcqx9xj] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #000;
}

/* ---- Two-column grid: Game Plan + Practice Range (VB6 ~17.5% / 78.6%) ---- */
.ds-grid[b-63qbcqx9xj] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    align-items: stretch;
}

/* Columns are flex so their cards can fill the (stretched) row height, keeping
   Game Plan exactly as tall as Practice Range. */
.ds-col[b-63qbcqx9xj] { display: flex; flex-direction: column; min-width: 0; }

/* ---- Black Arial section headers above each card ---- */
.ds-section-head[b-63qbcqx9xj] {
    font-family: Arial, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #000;
    margin: 0 0 5px;
}

/* ---- White card framed by a thick peach border (Shape7 / FlashCard) ---- */
.ds-card[b-63qbcqx9xj] {
    background: #ffffff;
    border: 4px solid #FFE0C0;
    border-radius: 6px;
    padding: 10px;
    flex: 1 1 auto;
}

/* Game Plan stacks its controls and pins Start Session to the bottom. */
.ds-col-gameplan .ds-card[b-63qbcqx9xj] { display: flex; flex-direction: column; }

/* ---- A captioned field: black "Label:" above a peach panel ---- */
.ds-field[b-63qbcqx9xj] { margin-bottom: 9px; }
.ds-field:last-child[b-63qbcqx9xj] { margin-bottom: 0; }

.ds-field-label[b-63qbcqx9xj] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 400;
    color: #000;
    margin-bottom: 2px;
}

/* ---- Peach sub-panels (Shape8 / Shape3 / Shape1) ---- */
.ds-panel[b-63qbcqx9xj] {
    background: #FFE0C0;
    border: 1px solid #d9b48f;
    border-radius: 3px;
    padding: 6px 8px;
}

/* Inner white "well" holding the play-mode radios (legacy Frame1, white bg),
   sunken to match the 90s checkbox style; Use MIDI sits below it as its own thing. */
.ds-playmode-inner[b-63qbcqx9xj] {
    background: #ffffff;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #d0d0d0;
    padding: 5px 7px;
}

/* ---- Practice Range inner grid: Clefs/Keys | Notes/etc | Treble (VB6 ~18.6 : 13.5 : 41) ---- */
.ds-range-cols[b-63qbcqx9xj] {
    display: grid;
    /* Clefs/Keys is capped narrow (~11rem) and Notes stays fixed, so the Treble
       Range takes all the rest (1fr) and renders the staff at full in-game size. */
    grid-template-columns: 11rem 155px 1fr;
    gap: 10px;
    align-items: start;
}

.ds-range-col[b-63qbcqx9xj],
.ds-treble-col[b-63qbcqx9xj] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

/* The Treble Range column: the "Treble Range" label sits OUTSIDE/above the framed
   box (like legacy), and the box stretches to the row height so "Explain the
   current key" can anchor to its bottom-left. */
.ds-treble-col[b-63qbcqx9xj] {
    align-self: stretch;
    gap: 3px;
}

/* The framed panel (legacy Frame): thin peach border like the other panels. */
.ds-treble-box[b-63qbcqx9xj] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 7px;
    border: 1px solid #d9b48f;
    border-radius: 3px;
    background: #ffffff;
    padding: 8px 10px;
}

/* Small legacy-style "Treble Range" sub-label, above the box. Same font size as
   the other field labels ("Clefs:", "View:", …); kept bold as a sub-heading. */
.ds-treble-label[b-63qbcqx9xj] {
    font-weight: 700;
    font-size: 0.84rem;
    color: #000;
    margin-bottom: 1px;
}

/* ---- Checkbox grids ---- */
.ds-check-grid[b-63qbcqx9xj] { display: grid; grid-template-columns: 1fr; gap: 0 8px; }
.ds-check-grid-2[b-63qbcqx9xj] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-check-grid-4[b-63qbcqx9xj] { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 4px; }
.ds-check-grid-4 .mud-checkbox[b-63qbcqx9xj] { min-width: 0; }

/* ---- Notes / Solfège: letter caption above a centred checkbox (legacy layout) ---- */
.ds-letter-grid[b-63qbcqx9xj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px 4px;
    justify-items: center;
}

.ds-letter-cell[b-63qbcqx9xj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.ds-letter[b-63qbcqx9xj] {
    font-size: 0.78rem;
    color: #000;
}

/* ---- Clefs grouped in two tight left-aligned columns (legacy chkUse* layout) ---- */
.ds-clef-grid[b-63qbcqx9xj] {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: 14px;
}

/* ---- Keys panel: one shared number column, each key list boxed (legacy Shape8) ---- */
.ds-keys-grid[b-63qbcqx9xj] {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: center;
    column-gap: 4px;
    margin-top: 3px;
}

.ds-keys-col-head[b-63qbcqx9xj] {
    font-weight: 400;
    font-size: 0.68rem;
    color: #444;
    text-align: center;
    white-space: nowrap;
    padding-bottom: 2px;
}

.ds-key-num[b-63qbcqx9xj] {
    font-size: 0.7rem;
    color: #a07a50;
    text-align: right;
    padding-right: 3px;
}

/* Per-cell borders join into a continuous box around each key column. */
.ds-key-cell[b-63qbcqx9xj] {
    border-left: 1px solid #c79a63;
    border-right: 1px solid #c79a63;
    padding: 0 3px;
    transition: background 0.1s ease;
}

.ds-key-cell.is-first[b-63qbcqx9xj] { border-top: 1px solid #c79a63; border-radius: 4px 4px 0 0; padding-top: 2px; }
.ds-key-cell.is-last[b-63qbcqx9xj] { border-bottom: 1px solid #c79a63; border-radius: 0 0 4px 4px; padding-bottom: 2px; }
.ds-key-cell:hover[b-63qbcqx9xj] { background: #fff3e3; }
/* (MudBlazor checkbox compacting lives in app.css under .ds-root — isolated CSS
   can't reach the child component's internal DOM.) */

/* ---- Rainbow "Colors" link (inline-right of the caption) ---- */
.ds-colors-link[b-63qbcqx9xj] {
    background: #fff;
    border: 1px solid #d9b48f;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0 4px;
    line-height: 1.3;
    transition: background 0.15s ease;
}

.ds-colors-link:hover[b-63qbcqx9xj] { background: #fff3e3; }

/* ---- Classic raised peach buttons (Game Options, Select All) ---- */
.ds-button[b-63qbcqx9xj] {
    background: #FFE0C0;
    border: 2px solid;
    border-color: #fff7ee #c79a63 #c79a63 #fff7ee;
    color: #222;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 5px 12px;
    cursor: pointer;
    width: 100%;
    margin: 4px 0 9px;
}

.ds-button:hover[b-63qbcqx9xj] { background: #ffe9d2; }
.ds-button:active[b-63qbcqx9xj] { border-color: #c79a63 #fff7ee #fff7ee #c79a63; }

.ds-button-sm[b-63qbcqx9xj] {
    width: 100%;
    margin: 6px 0 0;
    padding: 3px 10px;
    font-size: 0.78rem;
}

/* ---- Legacy "Done" button: classic raised peach, bottom-right of Practice Range ---- */
.ds-done-row[b-63qbcqx9xj] {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.ds-done-btn[b-63qbcqx9xj] {
    background: #FFE0C0;
    border: 2px solid;
    border-color: #fff7ee #c79a63 #c79a63 #fff7ee;
    color: #222;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 5px 24px;
    cursor: pointer;
}

.ds-done-btn:hover[b-63qbcqx9xj] { background: #ffe9d2; }
.ds-done-btn:active[b-63qbcqx9xj] { border-color: #c79a63 #fff7ee #fff7ee #c79a63; }

/* Start Session — keep the home-screen look (white w/ purple border, fun font) */
.ds-start-btn[b-63qbcqx9xj] {
    display: block;
    text-align: center;
    width: 100%;
    border: 7px solid #91278C;
    border-radius: 12px;
    font-size: 1.25rem;
    padding: 10px 6px;
    margin-top: auto;
    box-sizing: border-box;
}

/* ---- Deck size: ±1 spinners flanking an editable combo (type or pick a preset) ---- */
.ds-decksize[b-63qbcqx9xj] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
}

.ds-decksize-combo[b-63qbcqx9xj] {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* Sunken white field holding the typed number (native browser spinners hidden). */
.ds-decksize-input[b-63qbcqx9xj] {
    width: 3.3rem;
    font-family: 'Berlin Sans FB Demi', 'Arial Black', sans-serif;
    font-size: 1.3rem;
    text-align: center;
    color: #222;
    background: #fff;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #d0d0d0;
    padding: 0 2px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.ds-decksize-input[b-63qbcqx9xj]::-webkit-outer-spin-button,
.ds-decksize-input[b-63qbcqx9xj]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Small raised caret that opens the preset list. */
.ds-decksize-caret[b-63qbcqx9xj] {
    background: #FFE0C0;
    border: 2px solid;
    border-color: #fff7ee #c79a63 #c79a63 #fff7ee;
    color: #7B2D8E;
    font-size: 0.65rem;
    line-height: 1;
    width: 18px;
    margin-left: 2px;
    cursor: pointer;
}

.ds-decksize-caret:hover[b-63qbcqx9xj] { background: #ffe9d2; }
.ds-decksize-caret:active[b-63qbcqx9xj] { border-color: #c79a63 #fff7ee #fff7ee #c79a63; }

/* Preset dropdown list. */
.ds-decksize-menu[b-63qbcqx9xj] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin: 2px 0 0;
    padding: 2px;
    list-style: none;
    background: #fff;
    border: 1px solid #7B2D8E;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
    max-height: 200px;
    overflow-y: auto;
}

.ds-decksize-menu li[b-63qbcqx9xj] { margin: 0; }

.ds-decksize-menu li button[b-63qbcqx9xj] {
    display: block;
    width: 100%;
    text-align: center;
    background: none;
    border: none;
    padding: 3px 4px;
    font-size: 0.95rem;
    color: #222;
    cursor: pointer;
}

.ds-decksize-menu li button:hover[b-63qbcqx9xj] { background: #f3e6f6; }

/* Invisible click-catcher so clicking elsewhere closes the preset list. */
.ds-menu-backdrop[b-63qbcqx9xj] {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: transparent;
}

.ds-decksize-caption[b-63qbcqx9xj] {
    text-align: center;
    font-size: 0.72rem;
    color: #555;
}

.ds-spin[b-63qbcqx9xj] {
    background: #fff;
    border: 1px solid #7B2D8E;
    border-radius: 6px;
    color: #7B2D8E;
    font-size: 0.85rem;
    line-height: 1;
    width: 30px;
    height: 26px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ds-spin:hover[b-63qbcqx9xj] { background: #f3e6f6; }

/* ---- Treble Range (nested) ---- */
/* The View box hugs its radios (Treble/Bass | Alto/Tenor | Custom) instead of
   stretching the full panel width. */
.ds-view-panel[b-63qbcqx9xj] { padding: 4px 8px; width: fit-content; }

.ds-staff-row[b-63qbcqx9xj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The staff fills the room left beside the arrows, scaling down (its <svg> has
   max-width:100%) to fit the fixed-width Treble Range panel. */
.ds-staff-row > :first-child[b-63qbcqx9xj] { flex: 0 1 auto; min-width: 0; }

/* Upper/Lower spinners centred on the clef, nudged down a little. */
.ds-staff-arrows[b-63qbcqx9xj] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
    flex: 0 0 auto;
}

.ds-arrow-group[b-63qbcqx9xj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.ds-arrow-label[b-63qbcqx9xj] {
    font-size: 0.72rem;
    font-weight: 400;
    color: #444;
}

/* "Explain the current key" anchored to the bottom-left of the framed panel. */
.ds-explain[b-63qbcqx9xj] { margin-top: auto; }

/* Plain inline explanation text, like the legacy lblKeyName labels (not a box). */
.ds-key-explain[b-63qbcqx9xj] {
    margin-top: 2px;
    font-size: 0.78rem;
    line-height: 1.2;
}

.ds-key-name[b-63qbcqx9xj] { font-weight: 700; color: #7B2D8E; }
.ds-key-detail[b-63qbcqx9xj] { color: #555; }

.ds-lock-note[b-63qbcqx9xj] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #8a5a00;
    margin: 2px 0 4px;
}

/* ---- Keyboard range-setter (full-width bottom bar) ---- */
.ds-keyboard-section[b-63qbcqx9xj] {
    margin-top: 12px;
}

/* ---- Action bar ---- */
.ds-actions[b-63qbcqx9xj] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

/* ---- Tablets / laptops: collapse to one column ---- */
@media (max-width: 1100px) {
    .ds-grid[b-63qbcqx9xj] { grid-template-columns: 1fr; }
    .ds-range-cols[b-63qbcqx9xj] { grid-template-columns: 1fr; }
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
    .ds-title[b-63qbcqx9xj] { font-size: 1.35rem; }
    .ds-actions[b-63qbcqx9xj] { justify-content: stretch; }
    .ds-actions > *[b-63qbcqx9xj] { flex: 1; }
}
/* /Components/Pages/Options.razor.rz.scp.css */
/* ============================================================
   Game Options — re-skinned to match the legacy VB6 frmUserOptions.
   Three columns: Preferences | Features | Protect. Peach (#FFE0C0)
   panels on white cards framed in peach, over the sheet-music
   watermark. Mirrors the Deck Setup visual language (the retro
   checkboxes/radios + input compacting live in app.css under
   .opt-root; this file owns the layout and the native controls).
   ============================================================ */

.opt-page[b-gdbnbheney] {
    max-width: 1120px;
    margin: 0 auto;
}

/* ---- Centered title with the deck name beneath it (no separating rule) ---- */
.opt-titlebar[b-gdbnbheney] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 18px 0 0;
}

.opt-title[b-gdbnbheney] {
    font-family: 'Berlin Sans FB Demi', 'Berlin Sans FB', 'Arial Black', sans-serif;
    font-size: 1.7rem;
    color: #7B2D8E;
    line-height: 1;
}

.opt-subhead[b-gdbnbheney] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 16px;
}

/* ---- Three-column grid: Preferences | Features | Protect ---- */
.opt-grid[b-gdbnbheney] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 13.5rem;
    gap: 16px;
    align-items: start;
}

.opt-col[b-gdbnbheney] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---- Black Arial column headers (Preferences / Features / Protect) ---- */
.opt-section-head[b-gdbnbheney] {
    font-family: Arial, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #000;
    margin: 0 0 5px;
}

/* ---- White card framed by a thick peach border ---- */
.opt-card[b-gdbnbheney] {
    background: #ffffff;
    border: 4px solid #FFE0C0;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* When the Maestro lock is engaged the option columns are frozen. */
.opt-locked[b-gdbnbheney] {
    pointer-events: none;
    opacity: 0.55;
}

/* ---- A captioned field: black "Label:" above a peach panel ---- */
.opt-field[b-gdbnbheney] { min-width: 0; }

.opt-field-label[b-gdbnbheney] {
    font-size: 0.84rem;
    font-weight: 400;
    color: #000;
    margin-bottom: 4px;
}

/* ---- Peach sub-panels ---- */
.opt-panel[b-gdbnbheney] {
    background: #FFE0C0;
    border: 1px solid #d9b48f;
    border-radius: 3px;
    padding: 8px 10px;
}

.opt-panel-fill[b-gdbnbheney] { height: 100%; box-sizing: border-box; }

/* Sunken white well (the inner box around the individual sound checkboxes). */
.opt-inner-well[b-gdbnbheney] {
    margin-top: 5px;
    background: #ffffff;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #d0d0d0;
    padding: 6px 8px;
}

/* ---- Checkbox grids ---- */
.opt-check-2[b-gdbnbheney] { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.opt-check-4[b-gdbnbheney] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 6px; }
.opt-check-4 .mud-checkbox[b-gdbnbheney] { min-width: 0; }

/* Automatic + Guitar sit side by side under Preferences (like the legacy). */
.opt-two-col[b-gdbnbheney] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    align-items: stretch;
}

/* Key Signature checkbox with the Mnemonics… button beside it. */
.opt-assist-row[b-gdbnbheney] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 3px;
}

.opt-deck-row[b-gdbnbheney] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* "Always Use Deck" picker — sits where the Browse button used to. */
.opt-deck-select[b-gdbnbheney] {
    flex: 0 1 11rem;
    min-width: 0;
    max-width: 11rem;
}

.opt-deck-name[b-gdbnbheney] {
    margin-top: 3px;
    font-size: 0.78rem;
    font-style: italic;
    color: #555;
}

/* ---- Inline rows (label + small control + trailing text) ---- */
.opt-inline[b-gdbnbheney] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.8rem;
    color: #000;
}

.opt-inline-top[b-gdbnbheney] { align-items: flex-start; }
.opt-inline span[b-gdbnbheney] { line-height: 1.25; }

.opt-hint[b-gdbnbheney] { font-size: 0.78rem; color: #555; }

/* ---- Sunken white number field (native spinners hidden) ---- */
.opt-num[b-gdbnbheney] {
    width: 3rem;
    flex: 0 0 auto;
    font-size: 0.95rem;
    text-align: center;
    color: #222;
    background: #fff;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #d0d0d0;
    padding: 1px 2px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.opt-num[b-gdbnbheney]::-webkit-outer-spin-button,
.opt-num[b-gdbnbheney]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.opt-num:disabled[b-gdbnbheney] { background: #ececec; color: #999; }

/* ---- Retro dropdowns (hint count, stoplight speed) ---- */
.opt-mini-select[b-gdbnbheney],
.opt-select[b-gdbnbheney] {
    font-size: 0.85rem;
    color: #222;
    background: #fff;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #d0d0d0;
    padding: 1px 2px;
    cursor: pointer;
}

.opt-mini-select[b-gdbnbheney] { width: 3rem; text-align: center; }

.opt-mini-select:disabled[b-gdbnbheney],
.opt-select:disabled[b-gdbnbheney] { background: #ececec; color: #999; }

/* ---- Classic raised peach buttons ---- */
.opt-button[b-gdbnbheney] {
    background: #FFE0C0;
    border: 2px solid;
    border-color: #fff7ee #c79a63 #c79a63 #fff7ee;
    color: #222;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 5px 14px;
    cursor: pointer;
}

.opt-button:hover[b-gdbnbheney] { background: #ffe9d2; }
.opt-button:active[b-gdbnbheney] { border-color: #c79a63 #fff7ee #fff7ee #c79a63; }
.opt-button:disabled[b-gdbnbheney] { color: #999; cursor: default; background: #f3e7d8; }

/* Small inline variant (Mnemonics… / Browse…). */
.opt-button-inline[b-gdbnbheney] {
    font-size: 0.78rem;
    padding: 3px 10px;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ---- Tier-lock note ---- */
.opt-lock-note[b-gdbnbheney] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #8a5a00;
    margin: 2px 0 4px;
}

/* ---- Protect column ---- */
/* Stretch to the full grid-row height so the Done button can sit at the bottom
   (margin-top:auto on .opt-done-row), aligned with the tall Preferences/Features. */
.opt-col-protect[b-gdbnbheney] { gap: 10px; align-self: stretch; }

.opt-protect-card[b-gdbnbheney] {
    align-items: center;
    text-align: center;
    gap: 7px;
}

.opt-lock-graphic[b-gdbnbheney] {
    color: #333;
    line-height: 1;
    margin: 2px 0 2px;
}

.opt-lock-caption[b-gdbnbheney] {
    font-size: 0.8rem;
    color: #000;
}

/* Buttons fill the narrow Protect column. */
.opt-protect-card .opt-button[b-gdbnbheney],
.opt-protect-actions .opt-button[b-gdbnbheney] { width: 100%; }

.opt-protect-actions[b-gdbnbheney] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- Legacy "Done" button, bottom-right of the Protect column ---- */
.opt-done-row[b-gdbnbheney] {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 6px;
}

.opt-done-btn[b-gdbnbheney] {
    background: #FFE0C0;
    border: 2px solid;
    border-color: #fff7ee #c79a63 #c79a63 #fff7ee;
    color: #222;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 6px 26px;
    cursor: pointer;
}

.opt-done-btn:hover[b-gdbnbheney] { background: #ffe9d2; }
.opt-done-btn:active[b-gdbnbheney] { border-color: #c79a63 #fff7ee #fff7ee #c79a63; }

/* ---- Tablets / laptops: collapse to one column ---- */
@media (max-width: 1100px) {
    .opt-grid[b-gdbnbheney] { grid-template-columns: 1fr; }
    .opt-two-col[b-gdbnbheney] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .opt-two-col[b-gdbnbheney] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Progress.razor.rz.scp.css */
/* Progress Report — faithful VB6 frmProgressReport look.
   Layering (back → front): notes background → white panel (purple racetrack frame)
   → white content box with the line graph → overlaid title banner, Personal Best
   box, View box, scroll arrows and Done. The detailed history table sits below. */

.progress-page[b-ovbkrxd28n] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- White report panel framed by the purple racetrack border --- */
.progress-panel[b-ovbkrxd28n] {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 40px 0 52px;
    background: #ffffff;
    border: 7px solid #800080;          /* &H00800080 */
    border-radius: 44px;
    /* Top padding clears the overlaid banner / Personal Best / View boxes; bottom
       band lets the Done panel straddle the lower edge (legacy look). */
    padding: 96px 32px 40px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    font-family: Arial, Helvetica, sans-serif;
}

/* --- Title banner: centered, overlapping the top edge --- */
.progress-title-banner[b-ovbkrxd28n] {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 4px solid #800080;
    border-radius: 16px;
    padding: 12px 48px 14px;
    text-align: center;
    box-shadow: 0 3px 8px rgba(128, 0, 128, 0.3);
    z-index: 5;
}

.progress-title[b-ovbkrxd28n] {
    font-size: 1.9rem;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 1.05;
    white-space: nowrap;
}

.progress-subtitle[b-ovbkrxd28n] {
    font-size: 1rem;
    font-weight: 400;
    margin-top: 5px;
}

/* --- Personal Best callout: overlaid top-left (VB6 "Your Personal Best" box) --- */
.progress-best-box[b-ovbkrxd28n] {
    position: absolute;
    top: -22px;
    left: 24px;
    min-width: 132px;
    background: #fff;
    border: 3px solid #800080;
    border-radius: 12px;
    padding: 6px 16px 8px;
    text-align: center;
    box-shadow: 0 3px 8px rgba(128, 0, 128, 0.25);
    z-index: 6;
}

.progress-best-label[b-ovbkrxd28n] {
    font-size: 0.78rem;
    font-weight: bold;
    color: #800080;
    white-space: nowrap;
}

.progress-best-value[b-ovbkrxd28n] {
    font-size: 1.45rem;
    font-weight: bold;
    line-height: 1.1;
    margin-top: 2px;
}

/* --- View box: overlaid top-right, Windows-95 group-box look --- */
.progress-view-box[b-ovbkrxd28n] {
    position: absolute;
    top: -28px;
    right: 24px;
    min-width: 168px;                  /* stable width so bold selection doesn't reflow */
    background: #f1eee3;
    border: 2px groove #d8d4c4;
    border-radius: 3px;
    padding: 3px 12px 6px;
    z-index: 6;
    font-size: 0.82rem;
}

.progress-view-heading[b-ovbkrxd28n] {
    font-weight: bold;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.progress-view-option[b-ovbkrxd28n] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    line-height: 1.45;
    white-space: nowrap;
    user-select: none;
}

/* Each label is coloured per-view inline (legacy ForeColors); selection just bolds it. */
.progress-view-selected .progress-radio-label[b-ovbkrxd28n] {
    font-weight: bold;
}

/* Windows-95 sunken radio: white well, etched bevel, black dot when checked. */
.progress-radio[b-ovbkrxd28n] {
    flex: 0 0 auto;
    position: relative;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #3f3f3f, inset -1px -1px 0 #ffffff;
}

.progress-radio.checked[b-ovbkrxd28n]::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #000;
}

/* Clef break-out for the Percent Correct view (VB6 cmbViewPercentCorrect). */
.progress-clef-select[b-ovbkrxd28n] {
    margin-top: 5px;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    color: #1a1a1a;
    background: #fff;
    border: 1px solid #808080;
    border-radius: 2px;
    padding: 1px 2px;
}

/* --- White content area holding the line graph --- */
.progress-inner[b-ovbkrxd28n] {
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 14px;
    padding: 14px 18px;
}

/* Vertical-axis scaling controls (VB6 Zoom / AutoZoom) */
.progress-yaxis[b-ovbkrxd28n] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    color: #555;
}

.progress-yaxis-label[b-ovbkrxd28n] {
    font-weight: bold;
    color: #800080;
}

.progress-yaxis-seg[b-ovbkrxd28n] {
    display: inline-flex;
    border: 1px solid #c79a63;
    border-radius: 4px;
    overflow: hidden;
}

.progress-yaxis-btn[b-ovbkrxd28n] {
    background: #fff;
    border: none;
    border-right: 1px solid #e0c9a8;
    padding: 3px 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    color: #1a1a1a;
    cursor: pointer;
}

.progress-yaxis-btn:last-child[b-ovbkrxd28n] {
    border-right: none;
}

.progress-yaxis-btn:hover[b-ovbkrxd28n] {
    background: #fff3e3;
}

.progress-yaxis-btn.is-active[b-ovbkrxd28n] {
    background: #ffe0c0;
    font-weight: bold;
}

.progress-zoom[b-ovbkrxd28n] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.progress-zoom.is-active[b-ovbkrxd28n] {
    border-color: #c79a63;
    background: #fffaf2;
    font-weight: bold;
}

.progress-zoom-input[b-ovbkrxd28n] {
    width: 3.6rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    text-align: right;
    color: #1a1a1a;
    background: #fff;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;   /* sunken well */
    box-shadow: inset 1px 1px 0 #d0d0d0;
    padding: 1px 4px;
}

.progress-zoom-unit[b-ovbkrxd28n] {
    color: #555;
}

/* Graph block: pinned Y-axis gutter + horizontally-scrollable plot */
.progress-graph-wrap[b-ovbkrxd28n] {
    display: flex;
    align-items: stretch;
}

.progress-axis-gutter[b-ovbkrxd28n] {
    flex: 0 0 auto;
    display: block;
}

.progress-graph-scroll[b-ovbkrxd28n] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    overscroll-behavior-x: contain;
    /* One scroll model only: grab-to-pan + the Older/Newer arrows (legacy had no scrollbar).
       A native bar is position-based and feels "reversed" next to push-based panning. */
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* old Edge */
    /* Don't let a drag select the session-number labels. */
    user-select: none;
    -webkit-user-select: none;
}

.progress-graph-scroll[b-ovbkrxd28n]::-webkit-scrollbar {
    display: none;                      /* Chrome / Safari / new Edge */
}

.progress-graph-scroll.is-grabbing[b-ovbkrxd28n] {
    cursor: grabbing;
}

.progress-graph-plot[b-ovbkrxd28n] {
    display: block;
}

/* Graph strokes & text */
.progress-grid[b-ovbkrxd28n] {
    stroke: #ececec;
    stroke-width: 1;
}

.progress-axis-line[b-ovbkrxd28n] {
    stroke: #9a9a9a;
    stroke-width: 1;
}

.progress-axis[b-ovbkrxd28n] {
    fill: #555;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
}

.progress-axis-title[b-ovbkrxd28n] {
    fill: #800080;
    font-size: 13px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.progress-line[b-ovbkrxd28n] {
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.progress-dot[b-ovbkrxd28n] {
    stroke: #fff;
    stroke-width: 1;
}

.progress-best-line[b-ovbkrxd28n] {
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    opacity: 0.55;
}

/* --- Scroll arrows (VB6 cmdScroll* buttons) --- */
.progress-scroll-row[b-ovbkrxd28n] {
    display: flex;
    align-items: center;
    justify-content: space-between;     /* Older hard-left, Newer hard-right (VB6 cmdScroll* layout) */
    gap: 18px;
    margin-top: 12px;
}

.progress-scroll-info[b-ovbkrxd28n] {
    color: #6a4a6a;
    font-size: 0.82rem;
}

.progress-scroll[b-ovbkrxd28n] {
    background: #ffe0c0;                 /* &H00C0E0FF */
    border: 2px outset #e0c9a8;
    border-radius: 3px;
    padding: 4px 16px;
    color: #1a1a1a;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 0.82rem;
    cursor: pointer;
}

.progress-scroll:hover:not(:disabled)[b-ovbkrxd28n] {
    background: #ffe9d2;
}

.progress-scroll:active:not(:disabled)[b-ovbkrxd28n] {
    border-style: inset;
}

.progress-scroll:disabled[b-ovbkrxd28n] {
    opacity: 0.5;
    cursor: default;
}

/* --- Done: peach button in a white panel, straddling the lower edge --- */
.progress-done-panel[b-ovbkrxd28n] {
    position: absolute;
    bottom: -22px;
    right: 30px;
    z-index: 5;
    background: #fff;
    border: 1px solid #800080;
    border-radius: 10px;
    padding: 8px 14px;
    box-shadow: 0 3px 8px rgba(128, 0, 128, 0.25);
}

.progress-done[b-ovbkrxd28n],
.progress-btn[b-ovbkrxd28n] {
    display: inline-block;
    background: #ffe0c0;                 /* peach, as used on the answer buttons */
    border: 2px outset #e0c9a8;
    border-radius: 3px;
    padding: 5px 28px;
    color: #1a1a1a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.progress-done:hover[b-ovbkrxd28n],
.progress-btn:hover[b-ovbkrxd28n] {
    background: #ffe9d2;
}

.progress-done:active[b-ovbkrxd28n],
.progress-btn:active[b-ovbkrxd28n] {
    border-style: inset;
}

.progress-btn-wide[b-ovbkrxd28n] {
    padding: 8px 40px;
    margin-top: 14px;
}

/* --- Empty state --- */
.progress-empty[b-ovbkrxd28n] {
    text-align: center;
    padding: 40px 24px;
}

.progress-empty-text[b-ovbkrxd28n] {
    font-size: 1.3rem;
    font-weight: bold;
    color: #800080;
}

.progress-empty-sub[b-ovbkrxd28n] {
    margin-top: 6px;
    color: #555;
}

/* --- Footnote for guests --- */
.progress-footnote[b-ovbkrxd28n] {
    max-width: 960px;
    color: #6a4a6a;
    font-size: 0.8rem;
    text-align: center;
    margin: -28px 0 24px;
}

/* --- Detailed history table, kept below the report --- */
.progress-history[b-ovbkrxd28n] {
    width: 100%;
    max-width: 960px;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    padding: 14px 18px 18px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    margin-bottom: 40px;
}

.progress-history-title[b-ovbkrxd28n] {
    font-family: 'Berlin Sans FB Demi', 'Berlin Sans FB', 'Arial Black', sans-serif;
    font-size: 1.2rem;
    color: #7B2D8E;
    margin-bottom: 8px;
}

.progress-history-table[b-ovbkrxd28n] {
    background: transparent;
}

/* --- Responsive --- */
@media (max-width: 1000px) {
    .progress-panel[b-ovbkrxd28n] {
        max-width: 96vw;
        padding: 92px 16px 40px;
    }

    .progress-best-box[b-ovbkrxd28n] {
        left: 10px;
    }

    .progress-view-box[b-ovbkrxd28n] {
        right: 10px;
    }
}
/* /Components/Pages/Records.razor.rz.scp.css */
/* Personal Records — faithful VB6 frmCompareToElite look.
   Layering (back → front): notes background → peach panel (purple racetrack
   frame) → white content box → three columns (labels | You | Compare target) →
   overlaid title banner, Compare picker, Just Me / Done actions. */

.pr-page[b-dshuh8oikb] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Peach panel framed by the purple racetrack border (VB6 Shape6) --- */
.pr-panel[b-dshuh8oikb] {
    position: relative;
    width: 100%;
    max-width: 880px;
    margin: 40px 0 52px;
    background: #ffe0c0;                /* &H00C0E0FF */
    border: 7px solid #800080;          /* &H00800080 */
    border-radius: 44px;
    /* Top padding clears the overlaid banner; bottom band lets the actions
       panel straddle the lower edge (legacy look). */
    padding: 80px 18px 40px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    font-family: Arial, Helvetica, sans-serif;
}

/* --- Title banner: centered, overlapping the top edge (VB6 Shape2) --- */
.pr-title-banner[b-dshuh8oikb] {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 4px solid #800080;
    border-radius: 16px;
    padding: 12px 48px 14px;
    text-align: center;
    box-shadow: 0 3px 8px rgba(128, 0, 128, 0.3);
    z-index: 5;
}

.pr-title[b-dshuh8oikb] {
    font-size: 1.9rem;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 1.05;
    white-space: nowrap;
}

.pr-subtitle[b-dshuh8oikb] {
    font-size: 1rem;
    color: #800080;
    font-weight: bold;
    margin-top: 5px;
}

/* --- White content area (VB6 Shape1) --- */
.pr-inner[b-dshuh8oikb] {
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 14px;
    padding: 18px 24px 24px;
}

/* --- Three aligned columns --- */
.pr-columns[b-dshuh8oikb] {
    display: flex;
    align-items: stretch;          /* compare box stretches to match the tall columns */
    gap: 0;
}

.pr-col[b-dshuh8oikb] {
    box-sizing: border-box;
    border: 1px solid transparent;  /* reserved so bordered columns don't shift rows */
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
}

/* Left-aligned purple captions, data rows indented under their section header */
.pr-col-labels[b-dshuh8oikb] {
    flex: 0 0 36%;
    text-align: left;
}

/* "You" and elite value columns — faint gray rectangle (VB6 Shape8 / Shape3) */
.pr-col-values[b-dshuh8oikb] {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    border-color: #e0e0e0;
}

.pr-col-elite[b-dshuh8oikb] {
    margin-left: 8px;
}

.pr-col-values + .pr-col-values[b-dshuh8oikb] {
    margin-left: 8px;
}

/* --- Rows: identical heights per kind keep every column in lock-step --- */
.pr-row[b-dshuh8oikb] {
    box-sizing: border-box;
    height: 26px;
    display: flex;
    align-items: center;
    color: #800080;                 /* &H00800080 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-col-labels .pr-row[b-dshuh8oikb] {
    justify-content: flex-start;
}

.pr-col-values .pr-row[b-dshuh8oikb] {
    justify-content: center;
}

/* Data captions sit indented beneath their section header (VB6 Left 1680 vs 1440). */
.pr-col-labels .pr-row-data[b-dshuh8oikb] {
    padding-left: 26px;
}

/* Name row — large bold username (VB6 lblYouUsername, Arial 14.25 bold) */
.pr-row-name[b-dshuh8oikb] {
    height: 42px;
    font-size: 1.35rem;
    font-weight: bold;
}

/* Section header — bold, flush-left in the label column. The divider rule sits
   ABOVE the header (between sections, in the gap) and is echoed across all three
   columns as separate segments — VB6 Line1-8, which sit above each group. */
.pr-row-header[b-dshuh8oikb] {
    height: 30px;
    margin-top: 13px;
    padding-top: 10px;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 0.92rem;
    border-top: 1px solid #d8d8d8;
}

.pr-col-labels .pr-row-header[b-dshuh8oikb] {
    justify-content: flex-start;
    padding-left: 2px;
}

.pr-row-data[b-dshuh8oikb] {
    font-size: 0.92rem;
}

/* --- Compare target column when not comparing: dashed box + Compare button --- */
.pr-col-compare[b-dshuh8oikb] {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 8px;
    padding: 8px 14px;
    display: flex;
}

.pr-compare-box[b-dshuh8oikb] {
    position: relative;
    flex: 1 1 auto;
    background: #fff;
    border: 2px dashed #400040;     /* &H00400040 (VB6 shpJustYou) */
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Compare picker (VB6 popCompareTo) — styled to match the panel --- */
.pr-picker[b-dshuh8oikb] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 86%;
    max-height: 90%;
    background: #fff;
    border: 3px solid #800080;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(128, 0, 128, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 8;
}

.pr-picker-head[b-dshuh8oikb] {
    background: #800080;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 5px 0;
    font-size: 0.9rem;
}

.pr-picker-search[b-dshuh8oikb] {
    box-sizing: border-box;
    width: 100%;
    border: none;
    border-bottom: 1px solid #d8c4d8;
    padding: 6px 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.88rem;
    color: #1a1a1a;
    outline: none;
}

.pr-picker-search[b-dshuh8oikb]::placeholder {
    color: #b09ab0;
    font-style: italic;
}

.pr-picker-list[b-dshuh8oikb] {
    overflow-y: auto;
}

/* Section heading inside the picker (Players / Composers). */
.pr-picker-group[b-dshuh8oikb] {
    position: sticky;
    top: 0;
    background: #f3e9f3;
    color: #5e1a6e;
    font-size: 0.72rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 12px;
}

.pr-picker-item[b-dshuh8oikb] {
    padding: 5px 14px;
    color: #800080;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0e6f0;
}

.pr-picker-item:hover[b-dshuh8oikb] {
    background: #f3e9f3;
    font-weight: bold;
}

.pr-picker-empty[b-dshuh8oikb] {
    padding: 6px 14px;
    color: #8a6a8a;
    font-style: italic;
    font-size: 0.82rem;
}

/* --- Buttons: peach, raised bevel (VB6 graphical command buttons) --- */
.pr-btn[b-dshuh8oikb] {
    display: inline-block;
    background: #ffe0c0;             /* &H00C0E0FF */
    border: 2px outset #e0c9a8;
    border-radius: 3px;
    padding: 5px 24px;
    color: #1a1a1a;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
}

.pr-btn:hover[b-dshuh8oikb] {
    background: #ffe9d2;
}

.pr-btn:active[b-dshuh8oikb] {
    border-style: inset;
}

.pr-btn-wide[b-dshuh8oikb] {
    padding: 8px 40px;
    margin-top: 14px;
}

/* --- Empty state --- */
.pr-empty[b-dshuh8oikb] {
    text-align: center;
    padding: 48px 24px;
}

.pr-empty-text[b-dshuh8oikb] {
    font-size: 1.3rem;
    font-weight: bold;
    color: #800080;
}

.pr-empty-sub[b-dshuh8oikb] {
    margin-top: 6px;
    color: #555;
}

/* --- Actions: peach buttons in a white panel straddling the lower edge --- */
.pr-actions-panel[b-dshuh8oikb] {
    position: absolute;
    bottom: -22px;
    right: 30px;
    z-index: 5;
    display: flex;
    gap: 10px;
    background: #fff;
    border: 1px solid #800080;
    border-radius: 10px;
    padding: 8px 14px;
    box-shadow: 0 3px 8px rgba(128, 0, 128, 0.25);
}

.pr-footnote[b-dshuh8oikb] {
    max-width: 880px;
    color: #6a4a6a;
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 24px;
}
/* /Components/Pages/Statistics.razor.rz.scp.css */
/* Session Statistics — faithful VB6 frmSessionStatistics look.
   A white panel framed by the purple racetrack border holds three columns
   (General / Detailed / Analysis); the Detailed column carries the staff
   bar-graph. A Session/All-Time tab strip sits above, the session-history
   list below (replacing the legacy file-open). */

.stats-page[b-75kj8o0hp7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
}

/* --- Tab strip — left-aligned over the panel so the centred title doesn't cover it --- */
.stats-tabs[b-75kj8o0hp7] {
    display: flex;
    gap: 4px;
    width: 100%;
    max-width: 1120px;
    margin: 22px 0 0;
    padding-left: 24px;
    box-sizing: border-box;
}

.stats-tab[b-75kj8o0hp7] {
    background: #f1eee3;
    border: 2px solid #800080;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: 8px 28px;
    font-family: 'Berlin Sans FB Demi', 'Berlin Sans FB', Arial, sans-serif;
    font-size: 1rem;
    color: #7B2D8E;
    cursor: pointer;
}

.stats-tab:hover[b-75kj8o0hp7] { background: #fbf6ec; }

.stats-tab.is-active[b-75kj8o0hp7] {
    background: #fff;
    color: #1a1a1a;
    font-weight: bold;
    box-shadow: 0 -2px 6px rgba(128, 0, 128, 0.15);
}

/* --- White panel framed by the purple racetrack border --- */
.stats-panel[b-75kj8o0hp7] {
    position: relative;
    width: 100%;
    max-width: 1120px;
    margin: 0 0 52px;
    background: #fff;
    border: 7px solid #800080;
    border-radius: 30px;
    padding: 78px 30px 44px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* --- Title banner straddling the top edge --- */
.stats-title-banner[b-75kj8o0hp7] {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 4px solid #800080;
    border-radius: 14px;
    padding: 9px 40px 11px;
    text-align: center;
    box-shadow: 0 3px 8px rgba(128, 0, 128, 0.3);
    z-index: 5;
}

.stats-title[b-75kj8o0hp7] {
    font-size: 1.6rem;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 1.05;
    white-space: nowrap;
}

.stats-subtitle[b-75kj8o0hp7] {
    font-size: 0.85rem;
    color: #7B2D8E;
    margin-top: 3px;
}

/* --- Three columns, each a white box with a peach frame (VB6 Shape2/3/4) --- */
.stats-columns[b-75kj8o0hp7] {
    display: grid;
    grid-template-columns: 0.82fr 1.75fr 0.82fr;   /* Detailed gets the room for two staves */
    gap: 14px;
}

.stats-col[b-75kj8o0hp7] {
    min-width: 0;
    background: #fff;
    border: 3px solid #ffe0c0;          /* &H00C0E0FF peach */
    border-radius: 4px;
    padding: 12px 14px 16px;
}

.stats-col-head[b-75kj8o0hp7] {
    font-family: 'Berlin Sans FB Demi', 'Berlin Sans FB', Arial, sans-serif;
    font-size: 1.35rem;
    font-weight: normal;
    color: #1a1a1a;
    margin: 0 0 10px;
}

/* --- General column --- */
.stats-from[b-75kj8o0hp7] {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 3px;
}

/* "Statistics from" stamp, purple-bordered (VB6 shpStatisticsFrom). */
.stats-from-box[b-75kj8o0hp7] {
    border: 1px solid #800080;
    border-radius: 3px;
    padding: 6px 8px;
    text-align: center;
    line-height: 1.25;
    margin-bottom: 10px;
}

/* Per-note + per-clef grid, purple-bordered (VB6 Shape7). */
.stats-grid-box[b-75kj8o0hp7] {
    border: 1px solid #800080;
    border-radius: 3px;
    padding: 7px 9px;
}

.stats-stamp-date[b-75kj8o0hp7] { color: #1a1a1a; }
.stats-stamp-time[b-75kj8o0hp7] { color: #444; }
.stats-stamp-name[b-75kj8o0hp7] { margin-top: 4px; }
.stats-stamp-mode[b-75kj8o0hp7] { font-size: 0.85rem; color: #555; }

/* Fixed layout + identical column widths so the per-note and per-clef tables line up.
   Legacy weighting: labels regular, the count numbers bold, a purple slash, percents regular. */
.stats-grid[b-75kj8o0hp7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    table-layout: fixed;
}

/* Leftmost column: the label (note letter / clef name), left-aligned. The count
   fraction reads as one tight unit (legacy "4/4"): the correct number is flush right
   against the slash, the tested number flush left, with the narrow purple slash hugged
   between them; the percent sits out at the right edge. */
.stats-grid th[b-75kj8o0hp7] {
    text-align: left;
    font-weight: bold;
    color: #444;
    padding: 1px 4px 1px 2px;
    width: 30%;
    white-space: nowrap;
    overflow: hidden;
}

.stats-grid td[b-75kj8o0hp7] { padding: 1px 0; }
.stats-num[b-75kj8o0hp7] { font-variant-numeric: tabular-nums; font-weight: bold; color: #1a1a1a; }
td.stats-num[b-75kj8o0hp7] { text-align: right; }                 /* "correct" — flush to the slash */
.stats-slash[b-75kj8o0hp7] { width: 14px; text-align: center; padding: 0; color: #800080; font-weight: bold; }
.stats-slash + .stats-num[b-75kj8o0hp7] { text-align: left; }     /* "tested" — flush to the slash */
.stats-pct[b-75kj8o0hp7] { text-align: right; padding-right: 2px; color: #1a1a1a; font-weight: bold; }
.stats-muted th[b-75kj8o0hp7], .stats-muted td[b-75kj8o0hp7] { color: #bbb; font-weight: normal; }

.stats-grid-clefs[b-75kj8o0hp7] {
    margin-top: 8px;
    border-top: 1px solid #e4e4e4;
    padding-top: 4px;
}

/* Total — set apart below the grid, centered, with a bigger/bolder fraction and the
   percent off to the right (VB6 lblTotal block). */
.stats-total[b-75kj8o0hp7] {
    border-top: 1px solid #c9c9c9;
    margin-top: 6px;
    padding: 16px 0;
    text-align: center;
}

.stats-total-label[b-75kj8o0hp7] { font-size: 0.85rem; color: #444; line-height: 1.1; }

.stats-total-line[b-75kj8o0hp7] { position: relative; line-height: 1.1; }

.stats-total-fraction[b-75kj8o0hp7] {
    font-size: 1.6rem;
    font-weight: bold;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

.stats-total-slash[b-75kj8o0hp7] { color: #800080; margin: 0 0.12em; }

.stats-total-pct[b-75kj8o0hp7] {
    position: absolute;
    right: 0;
    bottom: 0.28em;
    font-size: 0.95rem;
    color: #1a1a1a;
}

/* --- Detailed column --- */
.stats-detailed[b-75kj8o0hp7] { position: relative; }

/* Top row: big letter + its stats on the left; the View box hugs the top-right corner.
   min-height reserves room so the staves below clear the absolutely-placed View box. */
.stats-detailed-top[b-75kj8o0hp7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    min-height: 100px;
}

.stats-note-panel[b-75kj8o0hp7] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 auto;
}

.stats-note-letter[b-75kj8o0hp7] {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3.4rem;
    font-weight: bold;
    line-height: 1;
    color: #1a1a1a;
    min-width: 1.2em;
    text-align: center;
}

.stats-note-stats[b-75kj8o0hp7] { font-size: 0.85rem; }
.stats-note-stats > div[b-75kj8o0hp7] { display: flex; justify-content: space-between; gap: 10px; }
.stats-note-stats span[b-75kj8o0hp7] { color: #555; }
.stats-note-stats strong[b-75kj8o0hp7] { color: #1a1a1a; }

/* View selector — Windows-95 etched group box (VB6 "View" Frame), hugging the
   top-right corner of the Detailed panel (1rem in from the top and right edges). */
.stats-view-box[b-75kj8o0hp7] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    background: #f1eee3;
    border: 2px groove #d8d4c4;
    border-radius: 3px;
    padding: 3px 10px 6px;
    font-size: 0.8rem;
}

.stats-view-heading[b-75kj8o0hp7] { font-weight: bold; margin-bottom: 2px; }

.stats-view-option[b-75kj8o0hp7] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    line-height: 1.5;
    user-select: none;
}

.stats-view-option.is-selected .stats-radio-label[b-75kj8o0hp7] { font-weight: bold; }

.stats-radio[b-75kj8o0hp7] {
    flex: 0 0 auto;
    position: relative;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #3f3f3f, inset -1px -1px 0 #fff;
}

.stats-radio.checked[b-75kj8o0hp7]::after {
    content: "";
    position: absolute;
    top: 4px; left: 4px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #000;
}

/* One or two staves, side by side (VB6 left/right clef views). Left-aligned so a
   single staff keeps its static left position (matching the legacy), not centered. */
.stats-staves[b-75kj8o0hp7] {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: flex-start;
}

.stats-staff[b-75kj8o0hp7] {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

/* Clef selectors below the staves (VB6 bottom dropdowns). */
.stats-clef-selectors[b-75kj8o0hp7] {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 10px;
    font-size: 0.78rem;
    color: #555;
}

.stats-clef-select[b-75kj8o0hp7] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
    color: #800080;
}

.stats-clef-select select[b-75kj8o0hp7] {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: normal;
    color: #1a1a1a;
    background: #fff;
    border: 1px solid #808080;
    border-radius: 2px;
    padding: 1px 2px;
}

/* Quick clef-view cycle button (VB6 cmdClefView), peach like the legacy button. */
.stats-clef-cycle[b-75kj8o0hp7] {
    background: #ffe0c0;
    border: 2px outset #e0c9a8;
    border-radius: 3px;
    padding: 2px 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: bold;
    color: #1a1a1a;
    cursor: pointer;
    white-space: nowrap;
}

.stats-clef-cycle:hover[b-75kj8o0hp7] { background: #ffe9d2; }
.stats-clef-cycle:active[b-75kj8o0hp7] { border-style: inset; }

.stats-graph-title[b-75kj8o0hp7] {
    font-weight: bold;
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 2px;
}

.stats-graph-title span[b-75kj8o0hp7] { display: block; font-size: 0.78rem; font-weight: normal; color: #555; }

/* Graph area — no frame (legacy match: the staff sits directly on the panel). */
.stats-graph-box[b-75kj8o0hp7] {
    padding: 2px 0 0;
    background: #fff;
}

.stats-graph[b-75kj8o0hp7] {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Faint gray grid — every line AND space across the graph area (VB6 backline #C0C0C0). */
.stats-gridline[b-75kj8o0hp7] { stroke: #C0C0C0; stroke-width: 1; }

/* Hover: the hovered row's gray line stays #C0C0C0 but grows thicker and extends left,
   with friendly round ends (VB6 backline just bolds the BorderWidth on mouseover). */
.stats-gridline.is-hover[b-75kj8o0hp7] { stroke: #C0C0C0; stroke-width: 8; stroke-linecap: round; }

/* The five black staff lines around the clef (VB6 TrebLongLine, ~67px) — bold, round ends. */
.stats-staffline[b-75kj8o0hp7] { stroke: #000; stroke-width: 3; stroke-linecap: round; }

/* Black leger marks above/below the staff (VB6 leger, ~27px) — thin out of range,
   bold with round ends within the practiced range (VB6 BorderWidth 1 vs 3). */
.stats-legermark[b-75kj8o0hp7] { stroke: #000; stroke-width: 1; }
.stats-legermark.is-bold[b-75kj8o0hp7] { stroke-width: 3; stroke-linecap: round; }

/* Thick colour-coded data lines with friendly round ends (VB6 *Line controls).
   5px on the 6px row pitch leaves a 1px white gap between adjacent bars. */
.stats-databar[b-75kj8o0hp7] { stroke-width: 5; stroke-linecap: round; }

/* Transparent per-line hit-target on top — catches hover anywhere across the row. */
.stats-row-hit[b-75kj8o0hp7] { fill: #fff; fill-opacity: 0; cursor: pointer; }

.stats-nodetail[b-75kj8o0hp7] {
    background: #faf7ef;
    border: 1px dashed #c9bfa0;
    border-radius: 6px;
    padding: 16px;
    text-align: center;
    color: #555;
    font-size: 0.9rem;
}

.stats-nodetail-sub[b-75kj8o0hp7] { font-size: 0.8rem; color: #888; margin-top: 4px; }

/* --- Analysis column — each metric in a thin gray box (VB6 Shape9) --- */
.stats-metric[b-75kj8o0hp7] {
    text-align: center;
    margin-bottom: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 4px 6px 6px;
}
.stats-metric-label[b-75kj8o0hp7] { font-size: 0.78rem; color: #1a1a1a; }
.stats-metric-value[b-75kj8o0hp7] { font-size: 1.5rem; font-weight: bold; color: #1a1a1a; line-height: 1.1; }
.stats-metric-value span[b-75kj8o0hp7] { font-size: 0.8rem; font-weight: normal; color: #777; }

/* Strengths / weaknesses — the plain-black heading sits above its bordered box (VB6
   layout); only the content is boxed. */
.stats-band-head[b-75kj8o0hp7] { font-size: 0.78rem; color: #1a1a1a; margin: 8px 0 3px; }

.stats-band[b-75kj8o0hp7] {
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 6px 10px;
    margin-bottom: 4px;
    min-height: 30px;
}

.stats-band-body[b-75kj8o0hp7] { font-size: 0.85rem; color: #333; }

/* Links — centered, bold, and blue at all times (legacy hyperlink blue, no hover/visited shift).
   Sit well clear of the bands above (the gap the old divider used to occupy). */
.stats-links[b-75kj8o0hp7] { text-align: center; margin-top: 37px; }
.stats-links a[b-75kj8o0hp7] {
    display: block;
    color: #0000EE;
    text-decoration: underline;
    font-size: 0.9rem;
    font-weight: bold;
    margin: 8px 0;
}
.stats-links a:hover[b-75kj8o0hp7],
.stats-links a:visited[b-75kj8o0hp7],
.stats-links a:active[b-75kj8o0hp7] { color: #0000EE; }

/* --- Done button straddling the lower edge --- */
.stats-done-panel[b-75kj8o0hp7] {
    position: absolute;
    bottom: -22px;
    right: 30px;
    z-index: 5;
    background: #fff;
    border: 1px solid #800080;
    border-radius: 10px;
    padding: 8px 14px;
    box-shadow: 0 3px 8px rgba(128, 0, 128, 0.25);
}

.stats-done[b-75kj8o0hp7], .stats-btn[b-75kj8o0hp7] {
    display: inline-block;
    background: #ffe0c0;
    border: 2px outset #e0c9a8;
    border-radius: 3px;
    padding: 5px 28px;
    color: #1a1a1a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.stats-done:hover[b-75kj8o0hp7], .stats-btn:hover[b-75kj8o0hp7] { background: #ffe9d2; }
.stats-done:active[b-75kj8o0hp7], .stats-btn:active[b-75kj8o0hp7] { border-style: inset; }
.stats-btn-wide[b-75kj8o0hp7] { padding: 8px 40px; margin-top: 14px; }

/* --- Empty state --- */
.stats-empty[b-75kj8o0hp7] { text-align: center; padding: 50px 24px 30px; }
.stats-empty-text[b-75kj8o0hp7] { font-size: 1.3rem; font-weight: bold; color: #800080; }
.stats-empty-sub[b-75kj8o0hp7] { margin-top: 6px; color: #555; }

/* --- Guest footnote --- */
.stats-footnote[b-75kj8o0hp7] {
    max-width: 1120px;
    color: #6a4a6a;
    font-size: 0.8rem;
    text-align: center;
    margin: -28px 0 24px;
}

/* --- Session history list --- */
.stats-history[b-75kj8o0hp7] {
    width: 100%;
    max-width: 1120px;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    padding: 14px 18px 18px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    margin-bottom: 40px;
}

.stats-history-title[b-75kj8o0hp7] {
    font-family: 'Berlin Sans FB Demi', 'Berlin Sans FB', 'Arial Black', sans-serif;
    font-size: 1.2rem;
    color: #7B2D8E;
    margin-bottom: 8px;
}

.stats-history-row[b-75kj8o0hp7] { cursor: pointer; }
.stats-history-row:hover[b-75kj8o0hp7] { background: #fbf6ec; }
.stats-history-row.is-selected[b-75kj8o0hp7] { background: #ffe0c0; font-weight: bold; }

/* --- All-Time tab — reuses .stats-panel for the purple racetrack frame; the
       additions below lay out the headline tiles and the per-note/clef breakdowns. --- */

/* Headline tiles — peach-framed white boxes (matching the Session columns),
   each number in its legacy per-metric colour (set inline in the markup). */
.stats-tiles[b-75kj8o0hp7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}

/* Secondary row of three, narrower and centred under the headline tiles. */
.stats-tiles-sub[b-75kj8o0hp7] {
    grid-template-columns: repeat(3, 1fr);
    width: 75%;
    margin: 0 auto 20px;
}

.stats-tile[b-75kj8o0hp7] {
    background: #fff;
    border: 3px solid #ffe0c0;          /* &H00C0E0FF peach, like the Session columns */
    border-radius: 4px;
    padding: 14px 10px 12px;
    text-align: center;
}

.stats-tile-value[b-75kj8o0hp7] {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stats-tile-sm .stats-tile-value[b-75kj8o0hp7] { font-size: 1.8rem; }

.stats-tile-label[b-75kj8o0hp7] {
    font-size: 0.82rem;
    color: #555;
    margin-top: 6px;
}

/* Per-Note / Per-Clef breakdowns — two peach-framed columns (reusing .stats-col). */
.stats-breakdowns[b-75kj8o0hp7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.stats-breakdown-grid[b-75kj8o0hp7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    table-layout: fixed;
}

/* Purple-underlined header row (legacy column accent). */
.stats-breakdown-grid thead th[b-75kj8o0hp7] {
    text-align: right;
    font-weight: bold;
    color: #7B2D8E;
    border-bottom: 2px solid #800080;
    padding: 2px 8px 4px;
}

.stats-breakdown-grid thead th:first-child[b-75kj8o0hp7] { text-align: left; }

/* Note letter / clef name, bold and left-aligned. */
.stats-breakdown-grid tbody th[b-75kj8o0hp7] {
    text-align: left;
    font-weight: bold;
    color: #444;
    padding: 3px 8px;
}

.stats-breakdown-grid tbody td[b-75kj8o0hp7] {
    text-align: right;
    padding: 3px 8px;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
    font-weight: bold;
}

/* Zebra striping (legacy faint cream). */
.stats-breakdown-grid tbody tr:nth-child(even)[b-75kj8o0hp7] { background: #faf7ef; }

.stats-breakdown-pct[b-75kj8o0hp7] { font-weight: bold; }

/* --- Responsive: stack the three columns and reflow the tiles/breakdowns --- */
@media (max-width: 900px) {
    .stats-columns[b-75kj8o0hp7] { grid-template-columns: 1fr; }
    .stats-tiles[b-75kj8o0hp7] { grid-template-columns: repeat(2, 1fr); }
    .stats-tiles-sub[b-75kj8o0hp7] { width: 100%; }
    .stats-breakdowns[b-75kj8o0hp7] { grid-template-columns: 1fr; }
}
/* /Components/Shared/TopTenLists.razor.rz.scp.css */
/* Top Ten Lists — faithful VB6 frmTopTen look.
   Layering (back → front): notes background → big white box (purple racetrack
   frame) → gray rectangle with the two columns → outline rank numbers (outside
   the gray box) → overlaid title banner, View box, Session Details, Done. */

.topten-page[b-1yw6a6aeg1] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Big white box behind all, framed by the purple racetrack border --- */
.topten-panel[b-1yw6a6aeg1] {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 38px 0 52px;
    background: #ffffff;
    border: 7px solid #800080;
    border-radius: 54px;
    /* Top padding clears the overlaid banner + View box; bottom band lets the
       Session Details and Done panels straddle the lower edge (legacy look). */
    padding: 108px 40px 88px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    font-family: Arial, Helvetica, sans-serif;
}

/* --- Title banner: centered on the panel, overlapping the top (~1/3 above) --- */
.topten-title-banner[b-1yw6a6aeg1] {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 3px solid #800080;
    border-radius: 18px;
    padding: 16px 44px 18px;
    text-align: center;
    box-shadow: 0 3px 8px rgba(128, 0, 128, 0.3);
    z-index: 5;
}

.topten-title[b-1yw6a6aeg1] {
    font-size: 2rem;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 1.1;
    white-space: nowrap;
}

.topten-subtitle[b-1yw6a6aeg1] {
    font-size: 1.05rem;
    color: #3a3ad0;
    font-weight: 400;        /* unbold subheading */
    margin-top: 7px;         /* more line spacing under the title */
}

/* --- View box: overlaid top-right, Windows-95 group-box look --- */
.topten-view-box[b-1yw6a6aeg1] {
    position: absolute;
    top: -40px;
    right: 16px;
    min-width: 180px;          /* stable width so bold selection doesn't reflow */
    background: #f1eee3;
    border: 2px groove #d8d4c4;
    border-radius: 3px;
    padding: 2px 12px 5px;
    z-index: 6;
    font-size: 0.82rem;
}

.topten-view-heading[b-1yw6a6aeg1] {
    font-weight: bold;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.topten-view-option[b-1yw6a6aeg1] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 0;
    line-height: 1.35;
    white-space: nowrap;
    user-select: none;
}

/* Each label is coloured per-view inline (legacy ForeColors); selection just bolds it. */
.topten-view-selected .ttl-radio-label[b-1yw6a6aeg1] {
    font-weight: bold;
}

/* Windows-95 sunken radio: white well, etched bevel, black dot when checked. */
.ttl-radio[b-1yw6a6aeg1] {
    flex: 0 0 auto;
    position: relative;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #3f3f3f, inset -1px -1px 0 #ffffff;
}

.ttl-radio.checked[b-1yw6a6aeg1]::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #000;
}

/* --- Body: outline rank gutter (outside) + gray rectangle --- */
.topten-body[b-1yw6a6aeg1] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
}

.topten-ranks[b-1yw6a6aeg1] {
    flex: 0 0 auto;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
}

/* Reserves the height of a column header + gap so "1" lines up with row 1. */
.topten-rank-spacer[b-1yw6a6aeg1] {
    height: 38px;
}

.topten-rank[b-1yw6a6aeg1] {
    height: 28px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: Georgia, "Times New Roman", serif;
    color: #800080;                       /* solid filled numerals */
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18);
}

.topten-gray[b-1yw6a6aeg1] {
    flex: 0 1 660px;
    background: #e9e9e9;
    border: 1px solid #c9bd92;
    border-radius: 6px;
    padding: 10px 16px;
}

.topten-columns[b-1yw6a6aeg1] {
    display: flex;
    gap: 22px;
}

.topten-column[b-1yw6a6aeg1] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topten-col-header[b-1yw6a6aeg1] {
    height: 32px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #800080;
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 4px;
}

/* Each pill IS a ranked row. */
.topten-pill[b-1yw6a6aeg1] {
    box-sizing: border-box;
    height: 28px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1.5px solid #caa53c;          /* gold border */
    border-radius: 7px;
    padding: 0 12px;
    box-shadow: 0 0 3px rgba(202, 165, 60, 0.6);
}

.topten-pill-selectable[b-1yw6a6aeg1] {
    cursor: default;
}

.topten-pill-selectable:hover[b-1yw6a6aeg1] {
    background: #fffbe9;
}

/* New-placement pulse (VB6 timBlinkNewEntries) — a slow, gentle glow that keeps
   pulsing the whole time the player is on the page, so a fresh placement stays
   obvious. It stops only when they leave (the element unmounts on navigation). */
@keyframes topten-pill-blink-b-1yw6a6aeg1 {
    0%, 100% { background: #fff7d6; box-shadow: 0 0 4px rgba(202, 165, 60, 0.6); }
    50%      { background: #ffe24d; border-color: #b58900; box-shadow: 0 0 12px 3px rgba(255, 200, 40, 0.95); }
}

.topten-pill-new[b-1yw6a6aeg1] {
    animation: topten-pill-blink-b-1yw6a6aeg1 1.8s ease-in-out infinite;
}

/* Bold only a just-placed row — older real scores read like everyone else. */
.topten-pill-new .topten-name[b-1yw6a6aeg1],
.topten-pill-new .topten-score[b-1yw6a6aeg1] {
    font-weight: bold;
}

/* Matching pulse on the View options holding a new placement (VB6 timBlinkCategories),
   so the player can see which other views they landed on. Strong enough to read on
   the beige View box; runs in lock-step with the pill pulse until they leave. */
@keyframes topten-view-blink-b-1yw6a6aeg1 {
    0%, 100% { background: transparent; box-shadow: none; }
    50%      { background: #ffe24d; box-shadow: 0 0 6px 1px rgba(255, 200, 40, 0.85); }
}

.topten-view-new[b-1yw6a6aeg1] {
    border-radius: 3px;
    animation: topten-view-blink-b-1yw6a6aeg1 1.8s ease-in-out infinite;
}

.topten-name[b-1yw6a6aeg1] {
    color: #800080;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topten-score[b-1yw6a6aeg1] {
    color: #800080;
    font-weight: 600;
    padding-left: 12px;
    flex: 0 0 auto;
}

.topten-na[b-1yw6a6aeg1] {
    flex: 1 1 auto;                 /* fill the column so the note centers vertically */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    text-align: center;
    color: #8a6a3a;
    font-style: italic;
}

/* --- Session details: overlaid straddling the lower edge, centered on the
       gutter between the two columns (panel center is offset left of the
       gutter by half the rank-number column, so nudge right by 21px). --- */
.topten-details-row[b-1yw6a6aeg1] {
    position: absolute;
    /* Anchored just below the columns (top, not bottom) so the label stays put
       whether the box shows the one-line hint or the full three-line details. */
    top: 536px;
    left: calc(50% + 21px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    z-index: 5;
}

.topten-details-label[b-1yw6a6aeg1] {
    font-weight: bold;
    color: #800080;
}

.topten-details-box[b-1yw6a6aeg1] {
    box-sizing: border-box;
    background: #fff;
    border: 2px solid #800080;
    border-radius: 10px;
    padding: 10px 26px;
    min-width: 440px;
    /* Fixed height (fits the three-line details) so the box never changes size between
       the hint and the details — otherwise it bounces when the pointer crosses row gaps. */
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(128, 0, 128, 0.25);
}

/* Labels left, values centered in their own column (legacy frmTopTen). */
.topten-details-grid[b-1yw6a6aeg1] {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 28px;
    row-gap: 3px;
    justify-content: center;
    font-size: 0.9rem;
}

.topten-details-key[b-1yw6a6aeg1] {
    color: #800080;
    font-weight: 400;        /* labels not bold */
    text-align: left;
}

.topten-details-value[b-1yw6a6aeg1] {
    color: #1a1a1a;
    text-align: center;
}

.topten-details-hint[b-1yw6a6aeg1] {
    color: #8a6a3a;
    font-style: italic;
    font-size: 0.9rem;
    text-align: center;
}

/* --- Done: peach button inside a white panel, straddling the lower edge --- */
.topten-done-panel[b-1yw6a6aeg1] {
    position: absolute;
    bottom: -22px;
    right: 30px;
    z-index: 5;
    background: #fff;
    border: 1px solid #800080;
    border-radius: 10px;
    padding: 8px 14px;
    box-shadow: 0 3px 8px rgba(128, 0, 128, 0.25);
}

.topten-done[b-1yw6a6aeg1] {
    display: inline-block;
    background: #ffe0c0;                   /* peach, as used on the answer buttons */
    border: 2px outset #e0c9a8;
    border-radius: 3px;
    padding: 5px 28px;
    color: #1a1a1a;
    font-family: inherit;                  /* reset native <button> font */
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.topten-done:hover[b-1yw6a6aeg1] {
    background: #ffe9d2;
}

.topten-done:active[b-1yw6a6aeg1] {
    border-style: inset;
}