/* /Components/ConventionCard.razor.rz.scp.css */
/* Convention-card styling — adapted from the former WinForms convention-card
   printer (removed 2026-08-06, PR #107): its generated print CSS was the visual
   blueprint, retargeted from print (pt/mm) to screen and scoped to this
   component via Blazor CSS isolation. The card is a
   faithful façade: every cell is rendered disabled/greyed except the one live
   "5-Card Major Common" cell, which this slice wires to the PartnershipProfile. */

.cc-card[b-e5jahs8a9e] {
    max-width: 860px;
    margin: 0 0 1rem;
    padding: 16px;
    border: 1px solid #999;
    background: #fff;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.35;
}

.page-title[b-e5jahs8a9e] {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 2px solid #000;
    padding-bottom: 3px;
    margin-bottom: 6px;
}

.names-row[b-e5jahs8a9e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.grid[b-e5jahs8a9e] { display: grid; gap: 6px; }
.cols2[b-e5jahs8a9e] { grid-template-columns: 1fr 1fr; }

.section[b-e5jahs8a9e] {
    border: 1px solid #555;
    padding: 5px 7px;
    margin-bottom: 6px;
}

.section-title[b-e5jahs8a9e] {
    font-weight: bold;
    border-bottom: 1px solid #aaa;
    margin-bottom: 4px;
    padding-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.alert[b-e5jahs8a9e]    { color: #cc0000; font-weight: bold; }   /* Red = Alert */
.announce[b-e5jahs8a9e] { color: #0000cc; font-weight: bold; }   /* Blue = Announce */

.field[b-e5jahs8a9e] {
    display: inline-block;
    min-width: 44px;
    border-bottom: 1px solid #999;
    min-height: 14px;
    color: #888;
    padding: 0 3px;
}

.row[b-e5jahs8a9e] { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 2px 0; }
.row label[b-e5jahs8a9e] { white-space: nowrap; }
.indent[b-e5jahs8a9e] { padding-left: 14px; }

/* Inert cells: greyed, non-interactive. The disabled inputs are also
   visually muted by the browser; this keeps the labels muted to match. */
.chk[b-e5jahs8a9e] { white-space: nowrap; color: #8a8a8a; }
.chk input[b-e5jahs8a9e] { vertical-align: middle; }
.chk input:disabled[b-e5jahs8a9e] { cursor: not-allowed; }

/* The single live cell this slice wires — visually distinguished so it's
   obviously the only interactive control on the card. */
.chk.live[b-e5jahs8a9e] {
    color: #000;
    font-weight: 600;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    border-radius: 3px;
    padding: 1px 5px;
}
.chk.live input[b-e5jahs8a9e] { cursor: pointer; }

.live-badge[b-e5jahs8a9e] {
    font-size: 10px;
    font-weight: 700;
    color: #856404;
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hint[b-e5jahs8a9e] { color: #6c757d; font-size: 11px; margin-top: 8px; }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-9f4krv397v] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-9f4krv397v] {
    flex: 1;
}

.sidebar[b-9f4krv397v] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-9f4krv397v] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-9f4krv397v]  a, .top-row[b-9f4krv397v]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-9f4krv397v]  a:hover, .top-row[b-9f4krv397v]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-9f4krv397v]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-9f4krv397v] {
        justify-content: space-between;
    }

    .top-row[b-9f4krv397v]  a, .top-row[b-9f4krv397v]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-9f4krv397v] {
        flex-direction: row;
    }

    .sidebar[b-9f4krv397v] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-9f4krv397v] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-9f4krv397v]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-9f4krv397v], article[b-9f4krv397v] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-9f4krv397v] {
    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[b-9f4krv397v] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-cow9lgsqll] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-cow9lgsqll] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-cow9lgsqll] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-cow9lgsqll] {
    font-size: 1.1rem;
}

.bi[b-cow9lgsqll] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-cow9lgsqll] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-cow9lgsqll] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-cow9lgsqll] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-cow9lgsqll] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-cow9lgsqll] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-cow9lgsqll] {
        padding-bottom: 1rem;
    }

    .nav-item[b-cow9lgsqll]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-cow9lgsqll]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-cow9lgsqll]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-cow9lgsqll] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-cow9lgsqll] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-cow9lgsqll] {
        display: none;
    }

    .nav-scrollable[b-cow9lgsqll] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-cc3t1tcaab],
.components-reconnect-repeated-attempt-visible[b-cc3t1tcaab],
.components-reconnect-failed-visible[b-cc3t1tcaab],
.components-pause-visible[b-cc3t1tcaab],
.components-resume-failed-visible[b-cc3t1tcaab],
.components-rejoining-animation[b-cc3t1tcaab] {
    display: none;
}

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


#components-reconnect-modal[b-cc3t1tcaab] {
    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-cc3t1tcaab 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-cc3t1tcaab {
    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/Practice.razor.rz.scp.css */
.practice-page[b-00icuiql3e] {
    max-width: 1248px;
}

/* Two-column shell (approved 2026-07-02 layout): a fixed-width left action
   column beside the center main area. The left rail is persistent — it renders
   before the first deal too. */
.practice-layout[b-00icuiql3e] {
    max-width: 1248px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.practice-actions[b-00icuiql3e] {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.practice-actions .practice-title[b-00icuiql3e] {
    text-align: left;
    margin-bottom: 0.25rem;
}

/* The column's own stack (was Bootstrap's d-flex flex-column gap-2, whose !important direction
   the student's narrow layout below could not turn into a row). */
.action-column[b-00icuiql3e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* THE STUDENT ON A NARROW WINDOW (Rick, 2026-10-18: fit the window). Beside the 250px menu, an
   iPad in portrait (820px) left the auction 322px, less than the table needs, and the page
   scrolled sideways by up to about 80px. Below 1000px the student's left column becomes a strip
   across the top (Practice, the badge, New Deal, Report this bid, then the note on its own line),
   and the auction gets the full width. The coach's column is too long for a strip and is left as
   it is. */
@media (max-width: 999.98px) {
    .practice-layout.student-layout[b-00icuiql3e] {
        flex-direction: column;
        align-items: stretch;
    }

    .student-layout .practice-actions[b-00icuiql3e] {
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .student-layout .practice-actions .practice-title[b-00icuiql3e] {
        margin-bottom: 0;
    }

    .student-layout .action-column[b-00icuiql3e] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        flex: 1 1 100%;
    }
}

/* Each action groups a control with its inline feedback confirmation. */
.action-item[b-00icuiql3e] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.practice-main[b-00icuiql3e] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Below South's hand: a centered vertical stack (New deal + bid entry, then the
   report note, status, and disagreement/error region). */
.below-south[b-00icuiql3e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* "Bid recorded" and "Disagreement on your last bid" share one row, recorded on
   the LEFT (Rick, 2026-08-02). They used to stack, which roughly doubled the
   height of the region and pushed the page past the viewport.
   align-items:flex-start so the shorter box does not stretch to match the taller
   one; wrap so they fall back to stacking rather than overflowing when narrow. */
.below-south .result-row[b-00icuiql3e] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    flex-wrap: wrap;
}

/* The two boxes SHARE the row rather than demanding their natural widths.
   MEASURED: at their content widths they are 571px + 640px + gap = 1230px, but
   .practice-main is 1008px — so with a plain `flex-wrap: wrap` they simply wrapped
   and stayed stacked, which is the thing being fixed.
   flex: 1 1 340px lets each shrink to about half the row (~496px) while keeping a
   340px basis, so they still wrap to stacked on a genuinely narrow window instead
   of squashing to nothing. min-width: 0 is what permits the shrink at all. */
.below-south .result-row > *[b-00icuiql3e] {
    flex: 1 1 340px;
    min-width: 0;
    margin-bottom: 0;
}

/* The disagreement card carries an inline max-width:640px for its solo layout;
   inside the row it must be free to take its half. */
.below-south .result-row > .card[b-00icuiql3e] {
    max-width: none;
}

/* The bid box holds its slot after the bid is submitted, so the row keeps its
   height and nothing below it moves. visibility (not display) is what reserves
   the space; pointer-events off stops the invisible controls swallowing clicks. */
.below-south .bid-slot-reserved[b-00icuiql3e] {
    visibility: hidden;
    pointer-events: none;
}

.below-south .deal-bid-row[b-00icuiql3e] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
}

/* The student's bid row goes once the bid is in (Rick, 2026-10-18: fit the window). The result
   takes its place under South's hand, so nothing below it jumps: there is nothing below it.
   ⚠ It must come AFTER the rule above: same specificity, so the later display wins. */
.below-south .deal-bid-row-gone[b-00icuiql3e] {
    display: none;
}

/* The student's hand-strength card spans the column (StudentHandStrengthWide), so its answers'
   explanation takes two lines instead of four (Rick, 2026-10-18: fit the window). */
.below-south .deal-bid-row-wide[b-00icuiql3e] {
    align-self: stretch;
}

.below-south .deal-bid-row-wide .bid-slot[b-00icuiql3e] {
    flex: 1 1 auto;
}

/* Dealer + Vulnerability sit on the "Auction" header row, pushed right. */
.auction-header-row[b-00icuiql3e] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Compact auction seat headers (~11px) — the auction table labels only, not the
   hand labels. No formal smaller type token exists, so set it explicitly. */
.auction-center thead th[b-00icuiql3e] {
    font-size: 0.6875rem;
}

/* .practice-header REMOVED 2026-08-02 (brief item 6): the full-width header row
   held only the scenario-file picker, which now lives in the left action column.
   The rule went with the markup — an orphan grid definition is how dead layout
   rules accumulate and later get cargo-culted onto something else. */

.practice-title[b-00icuiql3e] {
    grid-column: 2;
    text-align: center;
    margin-bottom: 0;
}

.bridge-table[b-00icuiql3e] {
    display: grid;
    grid-template-areas:
        ".     north  .   "
        "west  center east"
        ".     south  .   ";
    /* Fluid 1:2:1, NOT fixed minimums.
       MEASURED: the old `minmax(234px, …) minmax(624px, …) minmax(234px, …)` needed
       234+624+234 + 30px of gaps = 1122px, but .practice-layout is capped at 1248px
       and leaves .practice-main only 1008px. 1122 > 1008 is independent of the window,
       so Review mode overflowed horizontally at EVERY size — it was not a
       narrow-viewport case.
       minmax(0, …) lets the tracks take their share of whatever is available (~244 /
       489 / 244 at 1008px). Measured min-content is 119 (west) / 194 (centre) /
       103 (east), so those shares are still ~2x what the content needs and nothing
       clips; the old numbers were design comfort, not a content requirement. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 0.75rem;
    align-items: stretch;
    justify-items: stretch;
}

/* Grid items default to min-width:auto, so a long hand could re-inflate its track
   past its fr share and bring the overflow straight back. Pinning 0 makes the
   no-overflow property hold for any hand, not just the ones we happened to look at. */
.bridge-table > *[b-00icuiql3e] {
    min-width: 0;
}

/* Practice mode renders only South, so the compass collapses to one column: the
   auction, then South's hand. Without this the three-column template would keep
   reserving the 234px side columns and the north row for seats that are not there. */
.bridge-table.practice-only[b-00icuiql3e] {
    grid-template-areas:
        "center"
        "south";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
}

.seat-north[b-00icuiql3e]  { grid-area: north; }
.seat-south[b-00icuiql3e]  { grid-area: south; }
.seat-west[b-00icuiql3e]   { grid-area: west; }
.seat-east[b-00icuiql3e]   { grid-area: east; }
.auction-center[b-00icuiql3e] { grid-area: center; display: flex; flex-direction: column; }

/* Laptop legibility: auction bids and the dealer/vulnerability line scale
   from --bidding-font-scale (defined on .bridge-table in app.css). */
.auction-center table[b-00icuiql3e] {
    width: 100%;
    /* 1.2rem base matches the SeatBox suit rows so auction bids and hand
       cards render at the same size. */
    font-size: calc(1.2rem * var(--bidding-font-scale, 1));
}

.auction-center p[b-00icuiql3e] {
    font-size: calc(0.875rem * var(--bidding-font-scale, 1));
}
/* /Components/Practice/MasteryStrip.razor.rz.scp.css */
/* Full-width strip along the very bottom of PT. Lives outside .practice-layout's
   1248px max-width, so it spans the full content width. Fixed height; the SVG
   stretches its 0..10 user space to fill it. */
.mastery-strip[b-fsahb93hxo] {
    width: 100%;
    height: 28px;
    margin-top: 1rem;
}

.mastery-strip svg[b-fsahb93hxo] {
    display: block;
    width: 100%;
    height: 100%;
}

/* One full-height bar per MASTERED rung. Bootstrap success green (theme-aware via
   --bs-*); a learning rung draws no bar at all, so the empty track is the page
   background showing through. */
.mastery-strip-bar[b-fsahb93hxo] {
    fill: var(--bs-success, #198754);
}

/* Re-mastered — parked at the top review box. Same full bar, deeper fill, so the
   strip separates "mastered and still cycling" from "solid and rarely seen"
   without adding a third height or any label. */
.mastery-strip-bar-remastered[b-fsahb93hxo] {
    fill: var(--bs-primary, #0d6efd);
}

/* Faint line along the top of the strip. No labels. */
.mastery-strip-cap[b-fsahb93hxo] {
    stroke: var(--bs-border-color, #dee2e6);
    stroke-width: 0.08;
    vector-effect: non-scaling-stroke;
}
/* /Components/Practice/SeatBox.razor.rz.scp.css */
.card-body[b-9epbsvcg09] {
    /* Same face as the auction/body text so cards and bids read uniformly. */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Laptop legibility: hand text and suit glyphs scale from
   --bidding-font-scale (defined on .bridge-table in app.css). */
.suit-row[b-9epbsvcg09] {
    /* 1.2rem base matches the auction table in Practice.razor.css. */
    font-size: calc(1.2rem * var(--bidding-font-scale, 1));
    line-height: 1.35;
    letter-spacing: 0.05em;
}

.suits-horizontal[b-9epbsvcg09] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: calc(1.2rem * var(--bidding-font-scale, 1));
    line-height: 1.35;
    letter-spacing: 0.05em;
}

.suit-line[b-9epbsvcg09] {
    white-space: nowrap;
}