/* /Components/ClubSessionDashboard/AttendeeStatsTab.razor.rz.scp.css */
.attendee-stats-table-wrap[b-mq55dj9eur] {
    overflow-x: auto;
    margin-bottom: 0.75rem;
}

/* BL-076: card-per-player list. Hidden by default (desktop uses the table);
   swap visibility at <= 720px so phones get cards and no horizontal scroll. */
.attendee-stats-card-list[b-mq55dj9eur] {
    display: none;
}

@media (max-width: 720px) {
    .attendee-stats-table-wrap[b-mq55dj9eur] {
        display: none;
    }

    .attendee-stats-card-list[b-mq55dj9eur] {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        margin-bottom: 0.75rem;
    }
}

.attendee-stats-card[b-mq55dj9eur] {
    background: #ffffff;
    border: 1px solid #d6dde6;
    border-radius: 0.55rem;
    padding: 0.6rem 0.7rem;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 35, 60, 0.04);
}

.attendee-stats-card.selected-card[b-mq55dj9eur] {
    background: #dbeafe;
    border-color: #94b8ea;
}

.attendee-stats-card-head[b-mq55dj9eur] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.attendee-stats-card-rank[b-mq55dj9eur] {
    font-weight: 700;
    color: #5a6b80;
    font-size: 0.85rem;
    min-width: 1.8rem;
}

.attendee-stats-card-name[b-mq55dj9eur] {
    font-weight: 600;
    color: #0d2c55;
    font-size: 1rem;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.attendee-stats-card-name:hover[b-mq55dj9eur] {
    text-decoration: underline;
}

/* #305: colour the attendee NAME TEXT by gender for quick identification on the
   leaderboard - male blue, female pink, unspecified default (no class). Text-only
   (no chip / row background) so a dense table reads as identification, not
   highlighting. Colours come from the shared --gender-male / --gender-female
   custom properties (app.css :root) so they match the Members tab name colours
   and stay in lockstep with them. Two-class selectors so these win over the base
   .attendee-name-link / .attendee-stats-card-name colour, on both the wide table
   and the narrow card. */
.attendee-name-link.name-gender-male[b-mq55dj9eur],
.attendee-stats-card-name.name-gender-male[b-mq55dj9eur] {
    color: var(--gender-male);
}

.attendee-name-link.name-gender-female[b-mq55dj9eur],
.attendee-stats-card-name.name-gender-female[b-mq55dj9eur] {
    color: var(--gender-female);
}

.attendee-stats-card-status[b-mq55dj9eur] {
    margin-left: auto;
    font-size: 0.78rem;
    color: #5a6b80;
    background: #eef2f7;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.attendee-stats-card-grid[b-mq55dj9eur] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem 0.9rem;
    margin: 0;
}

.attendee-stats-card-grid > div[b-mq55dj9eur] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.attendee-stats-card-grid dt[b-mq55dj9eur] {
    color: #5a6b80;
    font-size: 0.82rem;
    font-weight: 500;
    margin: 0;
}

.attendee-stats-card-grid dd[b-mq55dj9eur] {
    color: #1d2733;
    font-size: 0.92rem;
    font-weight: 600;
    margin: 0;
    text-align: right;
}

/* The rating-change row is the headline value on a card — span both columns
   and bump the number size so it's the first thing the eye lands on. */
.attendee-stats-card-rating-change[b-mq55dj9eur],
.attendee-stats-card-delta[b-mq55dj9eur] {
    grid-column: 1 / -1;
    border-top: 1px dashed #e1e6ed;
    padding-top: 0.35rem;
    margin-top: 0.1rem;
}

.attendee-stats-card-rating-change dt[b-mq55dj9eur],
.attendee-stats-card-delta dt[b-mq55dj9eur] {
    font-weight: 600;
    color: #1d2733;
}

.attendee-stats-card-rating-change dd[b-mq55dj9eur],
.attendee-stats-card-delta dd[b-mq55dj9eur] {
    font-size: 1.15rem;
    font-weight: 700;
}

.attendee-stats-card-results[b-mq55dj9eur] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.45rem;
}

.attendee-stats-card-results-label[b-mq55dj9eur] {
    color: #5a6b80;
    font-size: 0.82rem;
    font-weight: 500;
}

/* Performance / Fairness tabs — these are sub-views within Attendee Stats,
   switching them changes columns + sort logic, so they need to read as tabs
   (level-2 navigation), not buttons. */
.attendee-stats-tabs[b-mq55dj9eur] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #d3dce4;
    margin-bottom: 0.4rem;
}

.attendee-stats-tab[b-mq55dj9eur] {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.55rem 1.1rem;
    margin-bottom: -1px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #5e748a;
    cursor: pointer;
    transition: color 100ms ease, border-color 100ms ease;
}

.attendee-stats-tab:hover[b-mq55dj9eur] {
    color: #1f3f5e;
}

.attendee-stats-tab.active[b-mq55dj9eur] {
    color: #1f3f5e;
    border-bottom-color: #1b6ec2;
    font-weight: 600;
}

.attendee-stats-tab-subtitle[b-mq55dj9eur] {
    margin: 0 0 0.85rem 0;
    color: #5e748a;
    font-size: 0.875rem;
    font-style: italic;
}

/* Rank-by sits inside the table area (Performance only), left-aligned above
   the headers. It's a setting, not a view-switch, so it's visually subordinate
   to the tabs above. */
.attendee-stats-rank-by[b-mq55dj9eur] {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.attendee-stats-rank-by-label[b-mq55dj9eur] {
    color: #5e748a;
    margin-right: 0.15rem;
}

.attendee-stats-rank-by-option[b-mq55dj9eur] {
    background: transparent;
    border: 1px solid #c8d4e0;
    border-radius: 4px;
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem;
    color: #3a4a59;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}

.attendee-stats-rank-by-option:hover:not(:disabled):not(.active)[b-mq55dj9eur] {
    background: #f3f6f9;
    border-color: #a4b4c4;
}

.attendee-stats-rank-by-option.active[b-mq55dj9eur] {
    background: #1b6ec2;
    border-color: #1561a8;
    color: #fff;
    font-weight: 500;
}

.attendee-stats-rank-by-option:disabled[b-mq55dj9eur] {
    opacity: 0.55;
    cursor: not-allowed;
}

.attendee-stats-table[b-mq55dj9eur] {
    min-width: 1200px;
}

.attendee-stats-table thead th.sortable-header[b-mq55dj9eur] {
    cursor: pointer;
    user-select: none;
}

.attendee-stats-table thead th.sortable-header:hover[b-mq55dj9eur] {
    background-color: #eef3f8;
}

.attendee-stats-table tbody tr[b-mq55dj9eur] {
    cursor: pointer;
}

.attendee-stats-table tbody tr:nth-child(odd):not(.selected-row) td[b-mq55dj9eur] {
    background-color: #ffffff;
}

.attendee-stats-table tbody tr:nth-child(even):not(.selected-row) td[b-mq55dj9eur] {
    background-color: #f8fafc;
}

.attendee-stats-table tbody tr:not(.selected-row):hover td[b-mq55dj9eur] {
    background-color: #eef2f7;
}

.attendee-stats-table tbody tr.selected-row[b-mq55dj9eur] {
    background-color: #dbeafe !important;
}

.attendee-stats-table tbody tr.selected-row td[b-mq55dj9eur] {
    background-color: #dbeafe !important;
    font-weight: 600;
}

.attendee-stats-table tbody tr.selected-row:hover td[b-mq55dj9eur] {
    background-color: #bfdbfe !important;
}

.result-squares[b-mq55dj9eur] {
    display: flex;
    gap: 0.2rem;
    min-height: 1.35rem;
}

.result-square[b-mq55dj9eur] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
}

.result-win[b-mq55dj9eur] {
    background: #248c3b;
}

.result-loss[b-mq55dj9eur] {
    background: #bd2f2f;
}

.rating-positive[b-mq55dj9eur] {
    color: #1c7a33;
    font-weight: 600;
}

.rating-negative[b-mq55dj9eur] {
    color: #b52d2d;
    font-weight: 600;
}

.leader-badge[b-mq55dj9eur] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.4rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.badge-gold[b-mq55dj9eur] {
    background-color: #ffe08a;
    color: #7a5400;
    border: 1px solid #d9b857;
}

.badge-silver[b-mq55dj9eur] {
    background-color: #e2e8f0;
    color: #475569;
    border: 1px solid #b6c2d0;
}

.badge-bronze[b-mq55dj9eur] {
    background-color: #f2d1b0;
    color: #6f3f1f;
    border: 1px solid #cc9a73;
}

/* Inline expansion: detail panel rendered immediately under the selected
   table row (via colspan=9) or inside the selected card. Both wrappers
   give the detail a softer, recessed look so it reads as a child of the
   selected row, not as a sibling. */
.attendee-stats-table tbody tr.attendee-detail-row[b-mq55dj9eur] {
    cursor: default;
    background-color: transparent !important;
}

.attendee-stats-table tbody tr.attendee-detail-row:hover td[b-mq55dj9eur] {
    background-color: transparent !important;
}

.attendee-stats-table tbody tr.attendee-detail-row > td.attendee-detail-cell[b-mq55dj9eur] {
    background-color: #f1f6ff !important;
    border-left: 3px solid #94b8ea;
    padding: 0.75rem 1rem;
    font-weight: normal;
}

.attendee-stats-card.selected-card .attendee-stats-card-detail[b-mq55dj9eur] {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #94b8ea;
}

/* The detail block heading is now subordinate to the selected row, not a
   top-level section heading. Tone it down slightly so the eye stays on the
   row above. */
.attendee-detail-cell .attendee-game-details > h3[b-mq55dj9eur],
.attendee-stats-card-detail .attendee-game-details > h3[b-mq55dj9eur] {
    margin-top: 0;
    font-size: 0.95rem;
    color: #1f3f5e;
}

/* The Game Details table inside the detail panel can be wider than the
   viewport on tablet portrait — give it its own horizontal scroll so the
   wider parent table layout doesn't squeeze it weirdly. */
.attendee-game-details-table-wrap[b-mq55dj9eur] {
    overflow-x: auto;
}

.attendee-game-details h3[b-mq55dj9eur] {
    margin-bottom: 0.7rem;
    font-size: 1rem;
}

.attendee-unavailable-summary[b-mq55dj9eur] {
    margin-bottom: 0.9rem;
}

.attendee-time-summary[b-mq55dj9eur] {
    margin-bottom: 0.8rem;
}

.attendee-time-summary h4[b-mq55dj9eur] {
    margin-bottom: 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Single horizontal strip of stat tiles. 6-across on wide landscape
   viewports, 3-across at portrait tablet, 2-across at phone card view.
   Saves ~2 line-heights vs the previous 3x2 table layout.

   The detail cell sits inside a `<td colspan="9">` of a table with
   `min-width: 1200px`, so at portrait-tablet viewports the natural
   containing block is wider than the screen. We set `width` directly
   (not `width: 100%; max-width: ...`) so the grid sizes itself rather
   than inheriting the inflated parent. */
.attendee-time-summary-grid[b-mq55dj9eur] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem 0.75rem;
    margin: 0 0 0.65rem 0;
    width: min(60rem, calc(100vw - 2rem));
}

/* Portrait tablet, landscape phone: 3 across × 2 rows. The threshold is
   1100px so portrait 10-11" tablets (820px) cleanly get 3-across. */
@media (max-width: 1100px) {
    .attendee-time-summary-grid[b-mq55dj9eur] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Phone (card view triggers at <= 720px). At this width 2 across fits
   the typical card width comfortably. */
@media (max-width: 480px) {
    .attendee-time-summary-grid[b-mq55dj9eur] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.attendee-time-summary-grid > div[b-mq55dj9eur] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.attendee-time-summary-grid dt[b-mq55dj9eur] {
    color: #5a6b80;
    font-size: 0.75rem;
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.attendee-time-summary-grid dd[b-mq55dj9eur] {
    color: #1d2733;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.attendee-unavailable-summary h4[b-mq55dj9eur] {
    margin-bottom: 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.attendee-unavailable-table[b-mq55dj9eur] {
    max-width: 42rem;
}

/* #304 attendees follow-on: compact "Settling" marker shown next to the
   Current/Final Rating value on the Performance leaderboard. Reuses the #304
   neutral palette (#f4f8fc fill / #7d90a6 border / #213a54 text) verbatim from
   the profile chip (.member-settling-chip) so the two surfaces read as one
   feature, but tightened for a dense table row: smaller font, less padding,
   shorter height. Deliberately NOT a warning colour. */
.attendee-current-rating-cell[b-mq55dj9eur] {
    /* Keep the value, the marker, and its popover anchored together so the
       popover can position relative to the cell. */
    position: relative;
    white-space: nowrap;
}

.attendee-current-rating-value[b-mq55dj9eur] {
    margin-right: 0.35rem;
}

/* #506 revision: a small, quiet "M" badge on the Current/Final Rating cell, shown only
   when the member's rating was manually adjusted AFTER their first game this session. It
   explains why Current minus Initial doesn't equal the games-only Rating Change. Mirrors
   the completed-game "M" manual-override indicator's read (a small neutral circle), kept
   deliberately NOT a warning colour - it's informational, not an error. Sits inline beside
   the value and, when present, beside the settling chip without crowding the row. */
.attendee-rating-adjusted-marker[b-mq55dj9eur] {
    display: inline-flex;
    align-items: center;
    margin-right: 0.25rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    background: #eef3f8;
    color: #4a5f76;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    vertical-align: middle;
    cursor: help;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ux-rework polish 6: a QUIET annotation, not a heavy pill. In a real club almost
   everyone over the threshold is established, so the settling rows are the minority
   we mark - but a dense Current-Rating column can still carry several at once, so
   the marker must not add visual noise or make settling rows sit taller than their
   neighbours. So: no min-height (line-height + padding give a natural ~1.15rem box,
   flush with the unmarked value beside it), a borderless tinted lozenge (the #304
   neutral fill, no heavy outline), glyph-prominent with a small label. The visible
   "Settling" label stays (it carries the a11y meaning; not glyph-only). */
.attendee-settling-chip[b-mq55dj9eur] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.02rem 0.3rem;
    border: 0;
    border-radius: 999px;
    background: #eef3f8;
    color: #4a5f76;
    font-size: 0.66rem;
    font-weight: 500;
    line-height: 1.15;
    cursor: pointer;
    vertical-align: middle;
}

.attendee-settling-chip:hover[b-mq55dj9eur] {
    background: #e4ecf4;
    color: #2f4763;
}

/* Bare <button> (no .btn class): restore a visible keyboard focus ring,
   matching the profile chip. */
.attendee-settling-chip:focus-visible[b-mq55dj9eur] {
    outline: 2px solid #1b6ec2;
    outline-offset: 2px;
}

/* ::deep to reach the glyph SVG: it comes from a code-behind RenderFragment
   (SettlingChip.Glyph) that the scoped-CSS rewriter never tags. Sized down for
   the compact chip. */
.attendee-settling-chip[b-mq55dj9eur]  .member-settling-chip-icon {
    /* Glyph-prominent: the seedling slightly outsizes the small label so the marker
       reads as an icon-with-caption quiet annotation, not a text pill. */
    width: 0.85rem;
    height: 0.85rem;
    flex: 0 0 auto;
}

.attendee-settling-chip-label[b-mq55dj9eur] {
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Lightweight inline explainer popover (kiosk tap affordance). Floated over the
   row content so it doesn't reflow the dense table; neutral card styling. */
.attendee-settling-popover[b-mq55dj9eur] {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.25rem);
    /* Current Rating is the rightmost column, so anchor the popover to the right
       edge of the cell and grow leftwards - a left-anchored popover would clip off
       the right of the viewport on a kiosk. */
    right: 0;
    left: auto;
    width: 17rem;
    max-width: 80vw;
    padding: 0.6rem 0.7rem;
    border: 1px solid #c4d2e0;
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 0.4rem 1rem rgba(33, 58, 84, 0.18);
    color: #213a54;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.35;
    white-space: normal;
    text-align: left;
}

/* Real tap target for kiosk (ux-rework polish 3): the old 0-padding link was
   ~16x20px. Give it inline padding + a min-height so a finger can land on it,
   while keeping the quiet inline-link look (no fill, sits at the popover's left
   edge under the copy). Negative left margin keeps the text optically aligned
   with the paragraph above despite the new horizontal padding. */
.attendee-settling-popover-close[b-mq55dj9eur] {
    display: inline-flex;
    align-items: center;
    margin-top: 0.35rem;
    margin-left: -0.5rem;
    min-height: 2.2rem;
    padding: 0.3rem 0.5rem;
    border: 0;
    background: none;
    color: #1b6ec2;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.attendee-settling-popover-close:hover[b-mq55dj9eur] {
    text-decoration: underline;
}

.attendee-settling-popover-close:focus-visible[b-mq55dj9eur] {
    outline: 2px solid #1b6ec2;
    outline-offset: 2px;
}

/* ux-rework polish 7: on the narrow CARD layout the absolute right:0 / 17rem
   popover overflows a ~320px card to the left. Render the explainer instead as a
   non-absolute inline block that expands inside the card, below the rating value -
   same neutral tokens as the table popover, but in normal flow so it can never
   clip the card. (The table keeps its absolute popover, which is fine in the wide
   layout.) It spans the full card width via the grid cell it lives in. */
.attendee-settling-explainer-inline[b-mq55dj9eur] {
    display: block;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #c4d2e0;
    border-radius: 0.5rem;
    background: #f7fafd;
    color: #213a54;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.35;
    white-space: normal;
    text-align: left;
}

/* The rating sits in one cell of the 2-col card grid; when its inline explainer is
   open, let that cell span both columns and stack its contents so the explainer
   block gets the full card width (not the narrow right-hand column) and wraps the
   long copy cleanly. */
.attendee-stats-card-grid > div:has(.attendee-settling-explainer-inline)[b-mq55dj9eur] {
    grid-column: 1 / -1;
    flex-wrap: wrap;
}

/* When the explainer is open the rating cell becomes a full-width column: the
   value (chip + number) sits on the first line, the explainer block fills the row
   beneath it. flex-basis:100% drops it onto its own line under the dt label. */
.attendee-current-rating-cell:has(.attendee-settling-explainer-inline)[b-mq55dj9eur] {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
}
/* /Components/ClubSessionDashboard/ClubSessionSettingsTab.razor.rz.scp.css */
.settings-actions[b-nz9rmuh1yc] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    /* Pin Save/Reset to the bottom of the scroll area so the buttons stay
       reachable while the user scrolls the settings editor (e.g. down to the
       Sticky pairs add-picker). Opaque background so list content doesn't show
       through behind the pinned footer. Mirrors the cog-modal footer treatment
       in ClubSessionDashboard.razor.css (.clubSession-settings-modal-actions). */
    position: sticky;
    bottom: 0;
    background: #f8fbff;
    border-top: 1px solid #c4d2e0;
    padding: 0.6rem 0.2rem max(0.6rem, env(safe-area-inset-bottom));
    z-index: 1;
}

.settings-message[b-nz9rmuh1yc] {
    color: #4f6177;
    font-size: 0.92rem;
}
/* /Components/ClubSessionDashboard/CompletedGamesTab.razor.rz.scp.css */
.completed-game-edited-badge[b-fena95e2pi] {
    color: #c2410c;
    font-size: 0.78rem;
    font-style: italic;
    text-decoration: none;
}

.completed-game-edited-badge:hover[b-fena95e2pi],
.completed-game-edited-badge:focus-visible[b-fena95e2pi] {
    text-decoration: underline;
    color: #9a3412;
}

.completed-game-history-row > td[b-fena95e2pi] {
    background: #fff8f0;
    border-top: none;
}

.completed-game-history[b-fena95e2pi] {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

.completed-game-history ul[b-fena95e2pi] {
    padding-left: 1.2rem;
    margin-top: 0.25rem;
}

.completed-game-edit-modal[b-fena95e2pi] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
}

.completed-game-edit-backdrop[b-fena95e2pi] {
    position: absolute;
    inset: 0;
    background: rgba(13, 44, 85, 0.45);
}

.completed-game-edit-dialog[b-fena95e2pi] {
    position: relative;
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    padding: 1.25rem 1.4rem;
    max-width: 36rem;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
}

.completed-game-edit-dialog h3[b-fena95e2pi] {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
    color: #0d2c55;
}

.completed-game-edit-legend[b-fena95e2pi] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #24384f;
    margin-bottom: 0.3rem;
}
/* /Components/ClubSessionDashboard/GameSuggestionExplainerDialog.razor.rz.scp.css */
/* ── Backdrop & Modal Shell ───────────────────────── */
.explainer-backdrop[b-lz7qf7hzti] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
}

.explainer-modal[b-lz7qf7hzti] {
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 56rem;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* BL-058: on narrow viewports the modal was opening with awkward whitespace
   above and below — the 2rem-from-top padding on the backdrop combined with
   the 90vh modal cap left ~5–10% of vertical space empty top and bottom.
   On mobile, fill the viewport edge-to-edge (bottom-sheet pattern). */
@media (max-width: 600px) {
    .explainer-backdrop[b-lz7qf7hzti] {
        padding: 0;
        align-items: stretch;
    }

    .explainer-modal[b-lz7qf7hzti] {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ── Header ──────────────────────────────────────── */
.explainer-header[b-lz7qf7hzti] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.explainer-header h3[b-lz7qf7hzti] {
    margin: 0;
    font-size: 1.1rem;
}

/* ── Loading / Empty ─────────────────────────────── */
.explainer-loading[b-lz7qf7hzti],
.explainer-empty[b-lz7qf7hzti] {
    padding: 2rem;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
}

.spinner[b-lz7qf7hzti] {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-lz7qf7hzti 0.75s linear infinite;
}

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

/* ── Body ────────────────────────────────────────── */
.explainer-body[b-lz7qf7hzti] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Version Warning ─────────────────────────────── */
.explainer-version-warning[b-lz7qf7hzti] {
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffecb5;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

/* ── Summary ─────────────────────────────────────── */
.explainer-summary[b-lz7qf7hzti] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.explainer-summary-teams[b-lz7qf7hzti] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.vs-label[b-lz7qf7hzti] {
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 400;
    font-size: 0.85rem;
}

.explainer-summary-stats[b-lz7qf7hzti] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
}

.version-tag[b-lz7qf7hzti] {
    font-family: monospace;
    font-size: 0.75rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
}

/* ── Locked / Rationale ──────────────────────────── */
.explainer-locked-context[b-lz7qf7hzti] {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
}

.explainer-rationale[b-lz7qf7hzti] {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* ── Factor Table (Level 1) ──────────────────────── */
.explainer-factor-table[b-lz7qf7hzti] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.explainer-factor-table th[b-lz7qf7hzti] {
    text-align: left;
    padding: 0.35rem 0.5rem;
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
    font-weight: 600;
}

.explainer-factor-table td[b-lz7qf7hzti] {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e622);
}

.explainer-factor-table .interpretation[b-lz7qf7hzti] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.8rem;
}

/* ── Contribution colours ────────────────────────── */
.contribution-positive[b-lz7qf7hzti] { color: #198754; font-weight: 600; }
.contribution-mild[b-lz7qf7hzti]     { color: #6c757d; }
.contribution-moderate[b-lz7qf7hzti] { color: #fd7e14; }
.contribution-severe[b-lz7qf7hzti]   { color: #dc3545; font-weight: 600; }

/* ── Actions Row ─────────────────────────────────── */
.explainer-actions-row[b-lz7qf7hzti] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 0.25rem;
}

.explainer-flag-form[b-lz7qf7hzti] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #f8f9fa;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.75rem;
}

.explainer-flag-label[b-lz7qf7hzti] {
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
}

.explainer-flag-error[b-lz7qf7hzti] {
    color: #b02a37;
    font-size: 0.85rem;
    margin: 0;
}

.explainer-flag-actions[b-lz7qf7hzti] {
    display: flex;
    justify-content: flex-end;
}

.explainer-flag-ack[b-lz7qf7hzti] {
    background: #d1e7dd;
    color: #0a3622;
    border: 1px solid #a3cfbb;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

/* ── Candidates Section (Level 2) ────────────────── */
.explainer-candidates-section[b-lz7qf7hzti] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.explainer-search-bar[b-lz7qf7hzti] {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.explainer-search-bar input[b-lz7qf7hzti] {
    flex: 1;
}

.explainer-candidates-table[b-lz7qf7hzti] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.explainer-candidates-table th[b-lz7qf7hzti] {
    text-align: left;
    padding: 0.3rem 0.4rem;
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
    font-weight: 600;
    white-space: nowrap;
}

.explainer-candidates-table td[b-lz7qf7hzti] {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e622);
}

.explainer-candidates-table tbody tr[b-lz7qf7hzti] {
    cursor: pointer;
}

.explainer-candidates-table tbody tr:hover[b-lz7qf7hzti] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.row-winner[b-lz7qf7hzti] {
    background: #d1e7dd !important;
}

.row-pinned[b-lz7qf7hzti] {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 2px solid #198754 !important;
}

.row-separator td[b-lz7qf7hzti] {
    height: 3px;
    padding: 0 !important;
    background: var(--bs-border-color, #dee2e6);
    border: none !important;
}

.row-expanded[b-lz7qf7hzti] {
    background: var(--bs-tertiary-bg, #f8f9fa) !important;
}

.col-rank[b-lz7qf7hzti]   { width: 2.5rem; text-align: center; }
.col-vs[b-lz7qf7hzti]     { width: 1.5rem; text-align: center; color: var(--bs-secondary-color, #6c757d); }
.col-score[b-lz7qf7hzti]  { width: 4rem; text-align: right; font-family: monospace; }
.col-delta[b-lz7qf7hzti]  { width: 5.5rem; text-align: right; font-family: monospace; }
.col-issues[b-lz7qf7hzti] { width: 3rem; text-align: center; }

.issue-badge[b-lz7qf7hzti] {
    background: #dc3545;
    color: #fff;
    border-radius: 0.75rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.explainer-no-results[b-lz7qf7hzti] {
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
    padding: 0.75rem;
    font-size: 0.85rem;
}

/* ── Detail Row (Level 3) ────────────────────────── */
.detail-row td[b-lz7qf7hzti] {
    padding: 0 !important;
    border-bottom: 2px solid var(--bs-border-color, #dee2e6) !important;
}

.explainer-detail[b-lz7qf7hzti] {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.explainer-detail h4[b-lz7qf7hzti] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.explainer-detail-factors[b-lz7qf7hzti] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.explainer-detail-factors th[b-lz7qf7hzti] {
    text-align: left;
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    font-weight: 600;
}

.explainer-detail-factors td[b-lz7qf7hzti] {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e622);
}

.explainer-detail-factors .interpretation[b-lz7qf7hzti] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.75rem;
}

/* ── Player Detail (Level 3) ─────────────────────── */
.player-detail[b-lz7qf7hzti] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    overflow: hidden;
}

.player-detail summary[b-lz7qf7hzti] {
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.player-detail summary:hover[b-lz7qf7hzti] {
    background: var(--bs-secondary-bg, #e9ecef);
}

.player-metrics[b-lz7qf7hzti] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.25rem 1rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    margin: 0;
}

.player-metrics div[b-lz7qf7hzti] {
    display: flex;
    gap: 0.35rem;
}

.player-metrics dt[b-lz7qf7hzti] {
    font-weight: 500;
    white-space: nowrap;
}

.player-metrics dd[b-lz7qf7hzti] {
    margin: 0;
    color: var(--bs-secondary-color, #6c757d);
}

.player-relationships[b-lz7qf7hzti] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.player-relationships th[b-lz7qf7hzti] {
    text-align: left;
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    font-weight: 600;
    font-size: 0.75rem;
}

.player-relationships td[b-lz7qf7hzti] {
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e622);
}

/* ── Excluded Section ────────────────────────────── */
.explainer-excluded-section[b-lz7qf7hzti] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    overflow: hidden;
    margin-top: 0.5rem;
}

.explainer-excluded-section summary[b-lz7qf7hzti] {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    background: #f8d7da;
    color: #842029;
}

.excluded-group[b-lz7qf7hzti] {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e622);
}

.explainer-excluded-table[b-lz7qf7hzti] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.explainer-excluded-table th[b-lz7qf7hzti] {
    text-align: left;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    font-weight: 600;
}

.explainer-excluded-table td[b-lz7qf7hzti] {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e622);
}

.excluded-reason[b-lz7qf7hzti] {
    color: #842029;
    font-size: 0.75rem;
}
/* /Components/ClubSessionDashboard/PaymentsTab.razor.rz.scp.css */
.payments-summary[b-ucin70hwvb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 0.25rem 1rem;
    font-size: 0.9rem;
    color: #2e4f6d;
}

.payments-table td[b-ucin70hwvb] {
    vertical-align: middle;
}

.payment-balance-due[b-ucin70hwvb] {
    color: #8b1f1f;
    font-weight: 700;
}

.payment-balance-ok[b-ucin70hwvb] {
    color: #1f6e3b;
    font-weight: 700;
}

@media (max-width: 900px) {
    .payments-summary[b-ucin70hwvb] {
        grid-template-columns: 1fr;
    }
}
/* /Components/ClubSessionDashboard/PegboardTab.razor.rz.scp.css */
/* #504 — plain "can't create a game with the current constraints" informational dialog.
   Uses the real app palette. Scoped to PegboardTab so it can't leak into the other dashboard
   modals. (Reuses the modal scaffold from the former relaxation prompt; the option/preview
   styling is gone — the dialog only lists constraints now.) */

.relax-modal[b-vm1hgbpelh] {
    --navy-title: #1f3f5e;
    --muted: #6c7a8c;
    --border-soft: #e6ebf3;
    --border: #c5cfde;
    --amber: #8a5a00;
    --amber-bg: #fdeccd;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(8, 22, 46, .4);
}

.relax-head[b-vm1hgbpelh] {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-soft);
}

.relax-title[b-vm1hgbpelh] {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy-title);
    display: flex;
    align-items: center;
    gap: 9px;
}

.relax-ic[b-vm1hgbpelh] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--amber-bg);
    color: var(--amber);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 13px;
    flex: 0 0 auto;
}

.relax-why[b-vm1hgbpelh] {
    color: var(--muted);
    font-size: 12.5px;
    margin-top: 7px;
    line-height: 1.5;
}

.relax-body[b-vm1hgbpelh] {
    padding: 14px 20px 6px;
}

.relax-cap[b-vm1hgbpelh] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 9px;
}

.relax-constraint-list[b-vm1hgbpelh] {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
}

.relax-constraint[b-vm1hgbpelh] {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 9px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #24364d;
    background: #f7fafd;
}

.relax-foot[b-vm1hgbpelh] {
    padding: 12px 20px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--border-soft);
    margin-top: 6px;
    flex-wrap: wrap;
}

.relax-foot-note[b-vm1hgbpelh] {
    color: var(--muted);
    font-size: 11.5px;
}

.relax-foot-actions[b-vm1hgbpelh] {
    margin-left: auto;
    display: flex;
    gap: 9px;
}
/* /Components/Layout/DemoSpotlights.razor.rz.scp.css */
.demo-spotlights-card[b-xb7o3vkr4w] {
    position: fixed;
    /* bottom matches the QuickFeedback FAB (right: 1rem; bottom: 1rem)
       so the pill and FAB sit on the same baseline. */
    bottom: 1rem;
    /* Anchored on the right edge so the open card pops up in the same
       column as the collapsed pill (right: 7.5rem). Bottom-left would
       overlap the Game Prep panel, which is the most important part of
       the dashboard. */
    right: 7.5rem;
    width: 22rem;
    max-width: calc(100vw - 2.5rem);
    background: #ffffff;
    border: 1px solid #d6e0ee;
    border-radius: 0.75rem;
    box-shadow: 0 0.75rem 1.75rem rgba(13, 44, 85, 0.18);
    padding: 0.9rem 1rem 1rem 1rem;
    z-index: 980; /* below modal-backdrop ~1040 but above QuickFeedback FAB */
    font-size: 0.95rem;
    line-height: 1.35;
    color: #1d2733;
    /* Card body must not intercept clicks meant for the underlying dashboard
       (e.g. waiting-chip column on bottom-left). Buttons re-opt-in below. */
    pointer-events: none;
}

.demo-spotlights-card button[b-xb7o3vkr4w],
.demo-spotlights-card a[b-xb7o3vkr4w] {
    pointer-events: auto;
}

.demo-spotlights-head[b-xb7o3vkr4w] {
    margin-bottom: 0.35rem;
}

.demo-spotlights-step[b-xb7o3vkr4w] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #5a6b80;
}

.demo-spotlights-title[b-xb7o3vkr4w] {
    font-weight: 600;
    color: #0d2c55;
    margin-bottom: 0.35rem;
}

.demo-spotlights-body[b-xb7o3vkr4w] {
    margin-bottom: 0.75rem;
}

.demo-spotlights-actions[b-xb7o3vkr4w] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.demo-spotlights-back[b-xb7o3vkr4w],
.demo-spotlights-show-me[b-xb7o3vkr4w],
.demo-spotlights-next[b-xb7o3vkr4w] {
    min-width: 5rem;
}

/* Make the primary action obviously the primary action — bigger and bolder
   than the default btn-sm so the eye lands on it before anything else. */
.demo-spotlights-actions .btn-primary[b-xb7o3vkr4w] {
    padding: 0.4rem 1rem;
    font-weight: 600;
}

.demo-spotlights-hide-link[b-xb7o3vkr4w] {
    display: block;
    margin: 0.6rem 0 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: #5a6b80;
    font-size: 0.78rem;
    text-decoration: underline;
    cursor: pointer;
    width: 100%;
    text-align: right;
}

.demo-spotlights-hide-link:hover[b-xb7o3vkr4w] {
    color: #0d2c55;
}

.demo-spotlights-reopen[b-xb7o3vkr4w] {
    position: fixed;
    /* bottom matches the QuickFeedback FAB (bottom: 1rem) so the two
       pills sit on the same baseline. */
    bottom: 1rem;
    /* Sits just left of the QuickFeedback FAB (right: 1rem, ~6rem wide).
       Bottom-left would overlap the Game Prep panel, which is the most
       important part of the dashboard. */
    right: 7.5rem;
    background: #ffffff;
    border: 1px solid #d6e0ee;
    border-radius: 999px;
    box-shadow: 0 0.5rem 1rem rgba(13, 44, 85, 0.14);
    /* Vertical metrics match the QuickFeedback FAB (font 0.85rem,
       padding-y 0.45rem, line-height 1.5, border 1px) so the two pills
       are the same height and their top edges line up. The left padding
       is tighter than the right to make room for the "?" badge. */
    padding: 0.45rem 0.85rem 0.45rem 0.7rem;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #0d2c55;
    cursor: pointer;
    font-size: 0.85rem;
    z-index: 970;
}

.demo-spotlights-reopen:hover[b-xb7o3vkr4w] {
    background: #f3f7fc;
}

.demo-spotlights-reopen span[aria-hidden="true"][b-xb7o3vkr4w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: #0d2c55;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
}

@media (max-width: 720px) {
    /* BL-077: card stretches edge-to-edge so the guide content is readable
       on narrow screens. Bottom margin clears the corner-pinned FABs below
       (Feedback FAB at bottom: 0.6rem; this pill sits beside it). */
    .demo-spotlights-card[b-xb7o3vkr4w] {
        bottom: 3.5rem;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-width: none;
    }

    /* Hide the "Demo guide" label on mobile and keep only the round "?"
       badge as a tiny corner pill. Same rationale as the QuickFeedback FAB
       shrink — the wide text pill was overlapping the Score Entry / picker
       controls. */
    .demo-spotlights-reopen[b-xb7o3vkr4w] {
        bottom: 0.6rem;
        right: 3rem;
        padding: 0;
        width: 2.1rem;
        height: 2.1rem;
        border-radius: 50%;
        font-size: 0;
        opacity: 0.65;
        gap: 0;
        justify-content: center;
    }

    .demo-spotlights-reopen-label[b-xb7o3vkr4w] {
        display: none;
    }

    .demo-spotlights-reopen span[aria-hidden="true"][b-xb7o3vkr4w] {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.78rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-10ve630zyd] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
}

main[b-10ve630zyd] {
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* #298: hamburger on the left, status banner(s) / fallback user menu in the
   column to its right, on a single row. The content column is flex:1 so it
   fills the width; when nothing is showing (e.g. persistent-sidebar desktop
   with the hamburger hidden and no banner) the row collapses to zero height. */
.layout-top-bar[b-10ve630zyd] {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
}

.layout-top-bar-content[b-10ve630zyd] {
    flex: 1 1 auto;
    min-width: 0;
}

/* #335: on the session dashboard when the bar is bare (hamburger only, no banner)
   it was wasting a whole line above the dashboard. Float it out of flow so the
   dashboard's own top button row reclaims that line; the hamburger then sits at
   the page's top-left, on the same visual line as the kiosk action buttons (the
   kiosk top row pads its start to clear it - see the .page--topbar-bare rule in
   ClubSessionDashboard.razor.css). The banner case (superuser / demo) keeps the
   #298 in-flow shared row, and the Results Desk kiosk route is left untouched.
   #390: fixed (not absolute) so the hamburger stays pinned to the viewport top-left
   when the page scrolls on short screens (mini-laptops) - absolute scrolled it away
   with the document and the operator lost the nav menu off the top.
   Kiosk rework: this floated-hamburger treatment is now KIOSK-ONLY (body.kiosk-mode).
   Off kiosk the session dashboard wears the normal app chrome (persistent sidebar at
   desktop / standard overlay hamburger on small screens), like every other page. */
body.kiosk-mode .page--kiosk-session.page--topbar-bare .layout-top-bar[b-10ve630zyd] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
}

body.kiosk-mode .page--kiosk-session.page--topbar-bare .nav-hamburger[b-10ve630zyd] {
    /* Nudge the hamburger down so it vertically centres on the kiosk top row
       (which starts ~1rem of content padding + the shell's own top padding
       below the page top) rather than hugging the very top edge. */
    margin-top: 1.5rem;
}

.demo-session-banner[b-10ve630zyd] {
    margin: 0.9rem 1rem 0;
    border: 1px solid #e3b14a;
    background: #fff4d6;
    color: #6a4a08;
    border-radius: 0.55rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.demo-session-banner-text[b-10ve630zyd] {
    flex: 1 1 auto;
    min-width: 0;
}

.demo-session-banner a[b-10ve630zyd],
.demo-session-banner-cta[b-10ve630zyd] {
    margin-left: 0.25rem;
    color: #7b4f00;
    font-weight: 600;
}

/* BL-080: "Copy link" button — visually distinct from the prose CTA so the
   share path is obvious. On mobile (sticky banner below) it's a thumb-friendly
   tap target alongside the now button-styled "Sign up properly" link. */
.demo-session-banner-copy[b-10ve630zyd] {
    flex: 0 0 auto;
    border: 1px solid #c4933b;
    background: #fff;
    color: #7b4f00;
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.demo-session-banner-copy:hover[b-10ve630zyd] {
    background: #fbeac5;
}

/* BL-080: on mobile the banner becomes sticky-top so the convert CTA stays
   reachable as the user scrolls through the demo, and the "Sign up properly"
   link gets button styling for a clearer tap target. */
@media (max-width: 720px) {
    .demo-session-banner[b-10ve630zyd] {
        position: sticky;
        top: 0;
        z-index: 50;
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        font-size: 0.88rem;
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    /* Selector includes the `a` element so it beats `.demo-session-banner a`
       (0,1,1) — without that, the parent rule's brown color wins and the
       label disappears against the brown button background. */
    .demo-session-banner a.demo-session-banner-cta[b-10ve630zyd] {
        display: inline-block;
        background: #7b4f00;
        color: #fff;
        border-radius: 999px;
        padding: 0.15rem 0.7rem;
        text-decoration: none;
        margin-left: 0.3rem;
    }
}

.email-verification-banner[b-10ve630zyd] {
    margin: 0.9rem 1rem 0;
    border: 1px solid #4f86c6;
    background: #e8f1fb;
    color: #1f3d6a;
    border-radius: 0.55rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.email-verification-banner-body[b-10ve630zyd] {
    flex: 1;
    min-width: 0;
}

.email-verification-banner a[b-10ve630zyd] {
    margin-left: 0.5rem;
    color: #134a90;
    font-weight: 600;
}

.email-verification-banner-dismiss[b-10ve630zyd] {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: #1f3d6a;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
    opacity: 0.6;
}

.email-verification-banner-dismiss:hover[b-10ve630zyd],
.email-verification-banner-dismiss:focus-visible[b-10ve630zyd] {
    opacity: 1;
    outline: none;
}

.superuser-write-banner[b-10ve630zyd] {
    margin: 0.9rem 1rem 0;
    border-radius: 0.55rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.superuser-write-banner-off[b-10ve630zyd] {
    border: 1px solid #c7921b;
    background: #fff4d8;
    color: #5c440a;
}

.superuser-write-banner-on[b-10ve630zyd] {
    border: 1px solid #b13b3b;
    background: #fde5e5;
    color: #5f1818;
}

.sidebar[b-10ve630zyd] {
    background: linear-gradient(180deg, #294f76 0%, #1f3d5b 100%);
    border-right: 1px solid #5b7694;
    width: 250px;
    /* #334: dvh (dynamic viewport height) tracks the real visible area as the
       mobile browser's address bar shows/hides. Plain 100vh is the *large*
       viewport (toolbar retracted), so with the URL bar visible the sidebar's
       bottom — where the docked user-menu footer lives — fell below the screen.
       100vh stays as the fallback line for any browser without dvh support. */
    height: 100vh;
    height: 100dvh;
    /* #276: flex column so the nav list scrolls and the user-menu footer docks
       to the bottom of the window. */
    display: flex;
    flex-direction: column;
}

.content[b-10ve630zyd] {
    padding-top: 1rem;
}

/* #438: collapse/expand toggle. Hidden by default (phone overlay band + kiosk, where the
   sidebar isn't a persistent rail-able column — the .nav-hamburger overlay is the nav control
   there). Shown only when the sidebar is persistent: >=768px non-kiosk (rule further down).
   It is a direct child of .sidebar (a position:sticky flex column = a containing block), so it
   is absolutely pinned to the top-right of the sidebar header in the FULL state, and recentred
   into the rail head in the COLLAPSED state. >=44px touch target. */
.nav-rail-toggle[b-10ve630zyd] {
    display: none;
    position: absolute;
    top: 0.55rem;
    right: 0.5rem;
    z-index: 5; /* above the brand header within the sidebar */
    align-items: center;
    justify-content: center;
    width: 2.75rem;   /* 44px touch target */
    height: 2.75rem;
    padding: 0;
    border: 1px solid #5b7694;
    border-radius: 0.45rem;
    background: rgba(41, 79, 118, 0.65);
    color: #dce6f2;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.nav-rail-toggle:hover[b-10ve630zyd],
.nav-rail-toggle:focus-visible[b-10ve630zyd] {
    background: #1f3d5b;
    color: #fff;
    outline: none;
}

.nav-rail-toggle-icon[b-10ve630zyd] {
    display: block;
    line-height: 1;
}

/* Hamburger toggle: hidden by default, shown only when the sidebar is in
   overlay mode (below the persistent-sidebar breakpoint) or on the kiosk route.
   #298: it's the left item of the top-bar flex row (banner to its right), so it
   owns its own top/left inset rather than relying on a container's padding. */
.nav-hamburger[b-10ve630zyd] {
    display: none;
    margin: 0.8rem 0 0 0.75rem;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.4rem;
    border: 1px solid #5b7694;
    border-radius: 0.45rem;
    background: #294f76;
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.nav-hamburger:hover[b-10ve630zyd],
.nav-hamburger:focus-visible[b-10ve630zyd] {
    background: #1f3d5b;
    outline: none;
}

.sidebar-backdrop[b-10ve630zyd] {
    display: none;
}

/* Overlay mode: phone band (below the icon-rail threshold).
   Sidebar slides in from the left; backdrop receives tap-outside-to-close.
   Icon-rail rework: the old single overlay band was max-width:1279.98px. It is now
   split — <768px stays this pure off-canvas overlay (phone), and 768–1279.98px gets
   the persistent icon rail (see the @media block below). Kiosk mode keeps the overlay
   across the WHOLE old band (handled in its own block) so the kiosk board is unchanged. */
@media (max-width: 767.98px) {
    .nav-hamburger[b-10ve630zyd] {
        display: inline-flex;
    }

    .sidebar[b-10ve630zyd] {
        position: fixed;
        top: 0;
        left: 0;
        /* #334: pin to both top and bottom so the docked user-menu footer stays
           on-screen even on a browser that ignores dvh (height alone leaned on
           100vh and overshot the visible area below the mobile address bar). */
        bottom: 0;
        max-width: 88vw;
        transform: translateX(-100%);
        transition: transform 0.18s ease-out;
        z-index: 1700;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
    }

    .sidebar.sidebar-open[b-10ve630zyd] {
        transform: translateX(0);
    }

    .sidebar-backdrop[b-10ve630zyd] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1650;
    }
}

/* ── Icon-rail mode: USER-CONTROLLABLE (#438) ───────────────────────────────────
   The collapsed icon rail used to be width-driven only (forced at 768–1279.98px). It is
   now driven by a single persisted class, html.nav-rail-collapsed, applied pre-paint by
   App.razor's inline script (seeded from width on first visit, then by the user's toggle),
   so the user can collapse/expand the sidebar at ANY width >=768px. The rail VISUAL rules
   (this hoisted, media-query-free section) fire purely on that class; the rail LAYOUT
   (width / flex-row / gutters) lives in the >=768px block further down where the sidebar is
   persistent. There is no overlay in the user-collapse path — expanding simply removes the
   class and the full in-flow sidebar returns.

   KIOSK (body.kiosk-mode) is excluded everywhere (its own blocks keep the stripped board).
   Phone (<768px) keeps its off-canvas overlay regardless of the class — the rail only makes
   sense where the sidebar is persistent. */

/* ── Rail content: reach into NavMenu via ::deep. NavMenu is rendered by MainLayout, so
   ::deep penetrates its scoped markup. Each selector carries its own ::deep (scoped CSS does
   not distribute ::deep across a comma group). Gated on html.nav-rail-collapsed AND a
   >=768px floor (#476): below 768px the sidebar is a full-width off-canvas OVERLAY where
   labels MUST show, so the rail's label/brand/section-hiding must never apply there even if
   the class is set (seeded or stored). The rail only makes sense where the sidebar is a
   persistent column (>=768px). No :not(.sidebar-open) — there is no overlay state in the
   >=768px user-collapse path. */
@media (min-width: 768px) {
/* Brand row: centre the logo; the toggle button (#438) owns the top of the rail, so push the
   brand header content below it (header min-height is 4.4rem, room for both). */
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .top-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 2.9rem;
    justify-content: center;
    align-items: flex-start;
}

html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .container-fluid {
    padding-left: 0;
    padding-right: 0;
    display: flex;
    justify-content: center;
}

html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-top-brand {
    align-items: center;
    justify-content: center;
    gap: 0;
}

/* Rail = LOGO ONLY. Hide the "ePegboard" wordmark + tagline; the figures mark stays, shrunk
   to fit the 56px rail. The full wordmark returns in the expanded (no-class) sidebar. */
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-top-brand-text {
    display: none;
}

html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-top-logo-figure {
    height: 1.9rem;
}

/* Non-icon content has no place in a rail — hide it. Also hide the expandable Help TOGGLE
   button (its submenu is hidden in the rail, so a click was a dead no-op that left
   _showHelpMenu set); the rail shows the plain .nav-help-rail-link straight to /how-it-works
   instead (revealed below). */
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-club-switcher,
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-live-panel,
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-section-label,
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-help-caret,
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-help-toggle,
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-help-links {
    display: none !important;
}

/* Reveal the rail-only Help link (a direct NavLink to /how-it-works) in the collapsed rail. */
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-help-rail-link {
    display: flex;
}

/* The session container (club switcher wrapper) collapses its vertical padding so it doesn't
   leave a gap at the top of the rail. */
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-session {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* nav-item gutter: the rail is centred, so kill the horizontal padding the full sidebar uses. */
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-item {
    padding-left: 0.125rem !important;
    padding-right: 0.125rem !important;
}

/* Each nav link becomes a centred >=44px tap target showing only its icon. */
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-link {
    position: relative;
    justify-content: center;
    gap: 0;
    height: 2.75rem;          /* 44px tap target */
    line-height: 2.75rem;
    padding: 0;
}

/* In the 56px rail the active page is hard to read on icon alone — add a clear left-edge accent. */
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-link.active {
    border-left: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 0;
}

/* Hide every label span (the direct text span of a nav link) in the rail — the icon and the
   news pill are kept (pill restyled to a dot). display:none, NOT a flyout (a flyout extends
   past the 56px rail and forces a horizontal scrollbar). Hover labels come from title=. */
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-link > span:not(.nav-news-pill):not(.nav-help-caret) {
    display: none;
}

/* News unread pill -> a small badge dot anchored to the icon's top-right. */
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-news-pill {
    position: absolute;
    top: 0.35rem;
    right: 0.55rem;
    margin: 0;
    min-width: 0.95rem;
    height: 0.95rem;
    padding: 0;
    font-size: 0.6rem;
    line-height: 0.95rem;
}

/* User-menu footer -> compact to JUST the avatar in the rail. */
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .nav-user-menu-slot {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    display: flex;
    justify-content: center;
}

/* Hide the name / subtitle / caret so only the avatar shows; strip the trigger's full-width chrome. */
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .user-menu-trigger-text,
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .user-menu-trigger-caret {
    display: none;
}

html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .user-menu-trigger {
    width: auto;
    min-width: 0;
    gap: 0;
    padding: 0.3rem;
    justify-content: center;
}

/* The pop-up panel must NOT inherit the 56px rail width — give it a real width, open to the right. */
html.nav-rail-collapsed body:not(.kiosk-mode) .sidebar[b-10ve630zyd]  .user-menu-dropup .user-menu-panel {
    left: 0;
    right: auto;
    width: 15rem;
    max-width: 78vw;
}
} /* end @media (min-width: 768px) rail-content gate (#476) */

/* ── Persistent sidebar + user-controllable rail LAYOUT, >=768px non-kiosk ───────────
   At >=768px the sidebar is persistent (in flow). This block makes the FULL sidebar the
   baseline at 768–1279.98px too (previously only >=1280px had it; that band used to force
   the rail). The rail is now opt-in via html.nav-rail-collapsed, which overrides the width
   to 3.5rem. The >=1280px block below still owns the >=1280 full-sidebar defaults; this block
   fills in the 768–1279.98 band and carries the rail override for the whole >=768 range.
   Every selector is mirrored onto .page--kiosk-session because the non-kiosk session dashboard
   carries BOTH .page--kiosk and .page--kiosk-session (see the >=1280 block's same mirror). */
@media (min-width: 768px) and (max-width: 1279.98px) {
    /* Full sidebar persistent in this band (when NOT collapsed to the rail). */
    body:not(.kiosk-mode) .page:not(.page--kiosk)[b-10ve630zyd],
    body:not(.kiosk-mode) .page--kiosk-session[b-10ve630zyd] {
        flex-direction: row;
    }

    body:not(.kiosk-mode) .page:not(.page--kiosk) .sidebar[b-10ve630zyd],
    body:not(.kiosk-mode) .page--kiosk-session .sidebar[b-10ve630zyd] {
        position: sticky;
        top: 0;
    }

    body:not(.kiosk-mode) .page:not(.page--kiosk) .content[b-10ve630zyd],
    body:not(.kiosk-mode) .page--kiosk-session .content[b-10ve630zyd] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}

/* Rail width override + toggle visibility: applies wherever the sidebar is persistent
   (>=768px non-kiosk). Separate >=768 media block (no upper bound) so it also collapses the
   sidebar at >=1280px desktop, where the user equally wants the option. */
@media (min-width: 768px) {
    /* The toggle is only meaningful where the sidebar is a persistent column. Show it for
       every non-kiosk page (including the non-kiosk session dashboard, which the kiosk class
       excludes). Kiosk keeps the stripped board (no toggle); phone (<768) keeps the overlay. */
    body:not(.kiosk-mode) .page:not(.page--kiosk) .nav-rail-toggle[b-10ve630zyd],
    body:not(.kiosk-mode) .page--kiosk-session .nav-rail-toggle[b-10ve630zyd] {
        display: inline-flex;
    }

    /* Collapsed rail width override. */
    html.nav-rail-collapsed body:not(.kiosk-mode) .page:not(.page--kiosk) .sidebar[b-10ve630zyd],
    html.nav-rail-collapsed body:not(.kiosk-mode) .page--kiosk-session .sidebar[b-10ve630zyd] {
        width: 3.5rem !important;
        min-width: 3.5rem !important;
    }

    /* In the rail the toggle centres into the 3.5rem head (no full-width header to corner to). */
    html.nav-rail-collapsed body:not(.kiosk-mode) .page:not(.page--kiosk) .nav-rail-toggle[b-10ve630zyd],
    html.nav-rail-collapsed body:not(.kiosk-mode) .page--kiosk-session .nav-rail-toggle[b-10ve630zyd] {
        top: 0.45rem;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* Kiosk, tablet band (768–1279.98px): keep the off-canvas overlay exactly as the
   old <=1279.98px band did. The rail is NON-kiosk chrome; in kiosk the board stays
   stripped and nav lives behind the floating hamburger. */
@media (min-width: 768px) and (max-width: 1279.98px) {
    body.kiosk-mode .nav-hamburger[b-10ve630zyd] {
        display: inline-flex;
    }

    body.kiosk-mode .sidebar[b-10ve630zyd] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        max-width: 88vw;
        transform: translateX(-100%);
        transition: transform 0.18s ease-out;
        z-index: 1700;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
    }

    body.kiosk-mode .sidebar.sidebar-open[b-10ve630zyd] {
        transform: translateX(0);
    }

    body.kiosk-mode .sidebar-backdrop[b-10ve630zyd] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1650;
    }
}

/* Persistent sidebar mode: enough horizontal real estate to keep nav alongside content. */
@media (min-width: 1280px) {
    .page:not(.page--kiosk)[b-10ve630zyd] {
        flex-direction: row;
    }

    .page:not(.page--kiosk) .sidebar[b-10ve630zyd] {
        position: sticky;
        top: 0;
    }

    .page:not(.page--kiosk) .content[b-10ve630zyd] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    /* Kiosk mode (session dashboard route): keep sidebar in overlay form even at
       wide viewports — the dashboard wants the full width for courts and queues,
       and admin nav stays one tap away behind the hamburger. */
    .page--kiosk .nav-hamburger[b-10ve630zyd] {
        display: inline-flex;
    }

    .page--kiosk .sidebar[b-10ve630zyd] {
        position: fixed;
        top: 0;
        left: 0;
        max-width: 88vw;
        transform: translateX(-100%);
        transition: transform 0.18s ease-out;
        z-index: 1700;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
    }

    .page--kiosk .sidebar.sidebar-open[b-10ve630zyd] {
        transform: translateX(0);
    }

    .page--kiosk .sidebar-backdrop[b-10ve630zyd] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1650;
    }

    /* Kiosk rework: kiosk is now OPT-IN. By DEFAULT (no body.kiosk-mode) the session
       dashboard wears the normal persistent-sidebar chrome like every other page, so a
       player dropped in mid-session sees the full app, not a stripped-down board. Only an
       explicit Kiosk mode collapses it (then the .page--kiosk rules above apply). These
       overrides carry higher specificity (body + the extra .page--kiosk-session class) so
       they win over the .page--kiosk collapse for the non-kiosk session. */
    body:not(.kiosk-mode) .page--kiosk-session[b-10ve630zyd] {
        flex-direction: row;
    }

    body:not(.kiosk-mode) .page--kiosk-session .sidebar[b-10ve630zyd] {
        position: sticky;
        top: 0;
        left: auto;
        max-width: none;
        transform: none;
        transition: none;
        z-index: auto;
        box-shadow: none;
    }

    body:not(.kiosk-mode) .page--kiosk-session .content[b-10ve630zyd] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    body:not(.kiosk-mode) .page--kiosk-session .nav-hamburger[b-10ve630zyd] {
        display: none;
    }

    body:not(.kiosk-mode) .page--kiosk-session .sidebar-backdrop[b-10ve630zyd] {
        display: none;
    }
}

#blazor-error-ui[b-10ve630zyd] {
    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%;
    /* #386: must sit above every overlay (modal backdrops ~1040, score popover 1200,
       feedback FAB 1900) so the "Reload" link is always clickable. Mike hit a circuit
       error behind the edit-game modal and couldn't reach Reload. */
    z-index: 2147483647;
}

#blazor-error-ui .dismiss[b-10ve630zyd] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.top-row[b-m4nfq2b2u0],
.nav-scrollable[b-m4nfq2b2u0] {
    --nav-header-height: 4.4rem;
}

/* #276: the sidebar is a flex column (see MainLayout .sidebar). The brand row
   and the docked user-menu footer keep their natural height; the nav list takes
   the space between and scrolls, so the footer stays pinned to the window bottom
   however long the menu is. */
.top-row[b-m4nfq2b2u0] {
    flex: 0 0 auto;
}

.nav-scrollable[b-m4nfq2b2u0] {
    flex: 1 1 auto;
    min-height: 0;
    /* #487: constrain the cross-axis. overflow-y:auto alone makes overflow-x compute to
       auto too (CSS spec), so any descendant a pixel too wide (long club name, a nav-link's
       width:100%+padding+border) re-triggered a horizontal scrollbar in the expanded sidebar
       - the regression d078b57 only fixed for the icon rail. A nav never scrolls sideways. */
    overflow: hidden auto;
}

.top-row[b-m4nfq2b2u0] {
    min-height: var(--nav-header-height);
    background-color: rgba(17, 35, 53, 0.7);
    border-bottom: 1px solid rgba(164, 193, 223, 0.55);
    box-shadow: inset 0 -1px 0 rgba(203, 222, 242, 0.25);
}

.nav-top-brand[b-m4nfq2b2u0] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* The badminton-figures mark; shown in the full sidebar AND the collapsed rail. */
.nav-top-logo-figure[b-m4nfq2b2u0] {
    height: 2.2rem;
    width: auto;
    flex: 0 0 auto;
}

.nav-top-brand-text[b-m4nfq2b2u0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* don't stretch the wordmark img to the column width */
    gap: 0.1rem;
    min-width: 0;
}

/* The "ePegboard" wordmark; shown in the full sidebar only (hidden in the rail). Size by
   WIDTH with height:auto so the aspect ratio is preserved (an explicit height + flex-stretched
   width was squashing the letters). 4rem ≈ 0.95rem tall at the 624x148 source aspect. */
.nav-top-logo-wordmark[b-m4nfq2b2u0] {
    width: 4rem;
    height: auto;
    max-width: 100%;
}

.nav-top-app[b-m4nfq2b2u0] {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.nav-top-user[b-m4nfq2b2u0] {
    color: rgba(220, 236, 252, 0.95);
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}

.menu-icon[b-m4nfq2b2u0] {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 1.15rem;
    color: #7ab6e4;
}

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

.nav-session[b-m4nfq2b2u0] {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.nav-club-switcher[b-m4nfq2b2u0] {
    display: grid;
    gap: 0.25rem;
}

.nav-current-club-caption[b-m4nfq2b2u0] {
    color: #98b9d7;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

.nav-current-club-label[b-m4nfq2b2u0] {
    color: #cfe0f1;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    padding: 0.1rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

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

.nav-section-label[b-m4nfq2b2u0] {
    color: #98b9d7;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0.35rem 0 0.15rem;
}

.nav-live-panel[b-m4nfq2b2u0] {
    display: grid;
    gap: 0.45rem;
    margin: 0 0 0.6rem;
}

.nav-live-card[b-m4nfq2b2u0] {
    border: 1px solid rgba(164, 193, 223, 0.48);
    border-radius: 0.55rem;
    background: rgba(21, 42, 64, 0.42);
    padding: 0.45rem 0.5rem 0.5rem;
}

.nav-live-card-head[b-m4nfq2b2u0] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.nav-live-card-name[b-m4nfq2b2u0] {
    min-width: 0;
    flex: 1 1 auto;
    color: #e6f0fb;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-live-card-meta[b-m4nfq2b2u0] {
    margin-top: 0.2rem;
    color: #bcd2e8;
    font-size: 0.7rem;
    line-height: 1.2;
}

.nav-live-open-link[b-m4nfq2b2u0] {
    margin-top: 0.35rem;
    width: 100%;
    font-size: 0.74rem;
    font-weight: 700;
}

.nav-item[b-m4nfq2b2u0]  .nav-link {
    color: #dce6f2;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    line-height: 3rem;
    border: 1px solid transparent;
    width: 100%;
    background: transparent;
    text-align: left;
    padding: 0 1rem;
}

.nav-item[b-m4nfq2b2u0]  .nav-link.active {
    background: linear-gradient(180deg, #6a88aa 0%, #4c6f95 100%);
    color: #fff;
    border-color: rgba(190, 213, 236, 0.7);
}

.nav-item[b-m4nfq2b2u0]  .nav-link.active .menu-icon {
    color: #fff;
}

.nav-item[b-m4nfq2b2u0]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.nav-item[b-m4nfq2b2u0]  .nav-link:hover .menu-icon {
    color: #fff;
}

.live-pill[b-m4nfq2b2u0] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: linear-gradient(180deg, #f45858 0%, #d73c3c 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    padding: 0.1rem 0.46rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    flex: 0 0 auto;
    box-shadow: 0 1px 6px rgba(13, 16, 20, 0.3);
}

/* #292: unread-news count badge on the News nav-link. Mirrors .live-pill's shape but
   in the menu's accent blue (red is reserved for LIVE). margin-left:auto pushes it to
   the right edge of the nav-link row. */
.nav-news-pill[b-m4nfq2b2u0] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    background: linear-gradient(180deg, #6a88aa 0%, #4c6f95 100%);
    color: #fff;
    border: 1px solid rgba(190, 213, 236, 0.7);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    flex: 0 0 auto;
    box-shadow: 0 1px 6px rgba(13, 16, 20, 0.3);
}

.live-clubSession-label[b-m4nfq2b2u0] {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-dot[b-m4nfq2b2u0] {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: #fff;
    animation: live-dot-pulse-b-m4nfq2b2u0 1.3s ease-in-out infinite;
}

@keyframes live-dot-pulse-b-m4nfq2b2u0 {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.72; }
    100% { transform: scale(1); opacity: 1; }
}

.nav-help-toggle[b-m4nfq2b2u0] {
    justify-content: space-between;
}

/* The rail-only Help link is hidden everywhere by default; the icon-rail media
   block (MainLayout.razor.css) reveals it (and hides the toggle button) only in
   the collapsed rail, where the expandable submenu can't be shown. */
.nav-help-group[b-m4nfq2b2u0]  .nav-help-rail-link {
    display: none;
}

.nav-help-caret[b-m4nfq2b2u0] {
    margin-left: auto;
    color: #b9d3ea;
    font-size: 0.8rem;
}

.nav-help-links[b-m4nfq2b2u0] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.25rem;
}

.nav-item[b-m4nfq2b2u0]  .nav-link.nav-link-sub {
    height: 2.3rem;
    line-height: 2.3rem;
    padding-left: 2.6rem;
    color: #cfe0f1;
}

.nav-item[b-m4nfq2b2u0]  .nav-link.nav-link-sub.active {
    background: rgba(96, 132, 168, 0.45);
    border-color: rgba(190, 213, 236, 0.35);
}

/* #276: docked footer - sits outside the scrolling nav and is pinned to the
   sidebar bottom by the sidebar's flex column, so it never scrolls away. */
.nav-user-menu-slot[b-m4nfq2b2u0] {
    flex: 0 0 auto;
    padding: 0.6rem 0.75rem 0.85rem;
    border-top: 1px solid rgba(164, 193, 223, 0.35);
}
/* /Components/Layout/PlayerShellLayout.razor.rz.scp.css */
/* #776 (player-mode shell C): the slim static-SSR player top bar. No new brand —
   navy #0d2c55 (the NavMenu .top-row family), blue #0d6efd active accent, the existing
   logo-wordmark.png. Scoped CSS: these selectors apply ONLY to the top bar declared in
   PlayerShellLayout.razor — the wrapped page body (@Body) keeps its own scope, so nothing
   here leaks into the #684/#769 page bodies. */

.player-topbar[b-fj3s0rt3yj] {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #0d2c55;
    border-bottom: 1px solid rgba(164, 193, 223, 0.55);
    box-shadow: 0 1px 3px rgba(13, 44, 85, 0.25);
}

.player-topbar-inner[b-fj3s0rt3yj] {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 1rem;
    min-height: 3.5rem; /* ~56px, per the §5 wireframe */
}

.player-brand[b-fj3s0rt3yj] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 44px; /* touch target */
    text-decoration: none;
}

.player-brand-wordmark[b-fj3s0rt3yj] {
    width: 6rem;
    height: auto;
    max-width: 100%;
    display: block;
}

.player-nav[b-fj3s0rt3yj] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
}

.player-nav-link[b-fj3s0rt3yj] {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* touch target */
    padding: 0 0.75rem;
    color: rgba(220, 236, 252, 0.95);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.player-nav-link:hover[b-fj3s0rt3yj],
.player-nav-link:focus-visible[b-fj3s0rt3yj] {
    color: #ffffff;
}

.player-nav-link.active[b-fj3s0rt3yj] {
    color: #ffffff;
    border-bottom-color: #0d6efd; /* the blue active accent */
}

.player-topbar-actions[b-fj3s0rt3yj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-left: auto; /* right-align — leaves room for the slice-F "Run a session" button */
}

/* #779 (slice F): the dual-role "Run a session" door — an ACCENT action button (the blue
   #0d6efd token), filled so it reads as an elevation, distinct from the ghost/outline sign-out
   next to it. Right-aligned within .player-topbar-actions (which already margin-left:auto's). */
.player-run-session[b-fj3s0rt3yj] {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* touch target */
    padding: 0 0.9rem;
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
    border-radius: 0.375rem;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.player-run-session:hover[b-fj3s0rt3yj],
.player-run-session:focus-visible[b-fj3s0rt3yj] {
    background-color: #0b5ed7;
    border-color: #0b5ed7;
    color: #ffffff;
}

.player-signout-form[b-fj3s0rt3yj] {
    margin: 0;
}

.player-signout[b-fj3s0rt3yj] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px; /* touch target */
    padding: 0 0.75rem;
    background: transparent;
    border: 1px solid rgba(164, 193, 223, 0.55);
    border-radius: 0.375rem;
    color: rgba(220, 236, 252, 0.95);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.player-signout:hover[b-fj3s0rt3yj],
.player-signout:focus-visible[b-fj3s0rt3yj] {
    color: #ffffff;
    border-color: rgba(220, 236, 252, 0.9);
}

.player-signout-icon[b-fj3s0rt3yj] {
    display: block;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}

.player-shell-body[b-fj3s0rt3yj] {
    display: block;
}

/* Narrow phones: the two nav links stay inline (only two — no hamburger needed); the
   sign-out label collapses to the ⏻ icon (accessible name kept via the button's aria-label). */
@media (max-width: 480px) {
    .player-topbar-inner[b-fj3s0rt3yj] {
        gap: 0.5rem;
        padding: 0 0.6rem;
    }

    .player-brand-wordmark[b-fj3s0rt3yj] {
        width: 5rem;
    }

    .player-nav-link[b-fj3s0rt3yj] {
        padding: 0 0.5rem;
        font-size: 0.9rem;
    }

    .player-signout-label[b-fj3s0rt3yj] {
        display: none;
    }

    .player-signout[b-fj3s0rt3yj] {
        padding: 0 0.6rem;
    }

    /* Keep the accent door compact so it and the two nav links + sign-out icon fit one row. */
    .player-run-session[b-fj3s0rt3yj] {
        padding: 0 0.7rem;
        font-size: 0.85rem;
    }
}
/* /Components/Layout/QuickFeedbackButton.razor.rz.scp.css */
.quick-feedback-fab[b-kgnei38zq1] {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1900;
    border: 1px solid #1f3f5e;
    background: #1f3f5e;
    color: #fff;
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.55;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
    cursor: pointer;
}

.quick-feedback-fab:hover[b-kgnei38zq1],
.quick-feedback-fab:focus-visible[b-kgnei38zq1] {
    opacity: 1;
    transform: translateY(-1px);
}

.quick-feedback-fab.is-busy[b-kgnei38zq1] {
    opacity: 0.85;
    cursor: progress;
}

.quick-feedback-backdrop[b-kgnei38zq1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1950;
}

.quick-feedback-drawer[b-kgnei38zq1] {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: min(28rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    z-index: 1960;
    background: #f6f9fc;
    border: 1px solid #c4d1de;
    border-radius: 0.75rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    padding: 1rem 1.1rem 1.1rem;
}

.quick-feedback-title[b-kgnei38zq1] {
    margin: 0 0 0.5rem;
    color: #1f3f5e;
    font-size: 1.05rem;
}

.quick-feedback-help[b-kgnei38zq1] {
    color: #5e748a;
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
}

.quick-feedback-screenshot[b-kgnei38zq1] {
    margin-top: 0.85rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid #c4d1de;
    border-radius: 0.45rem;
    background: #ffffff;
}

.quick-feedback-toggle[b-kgnei38zq1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: #1f3f5e;
    margin: 0;
}

.quick-feedback-thumb[b-kgnei38zq1] {
    display: block;
    margin-top: 0.5rem;
    max-width: 100%;
    max-height: 9rem;
    border: 1px solid #c4d1de;
    border-radius: 0.3rem;
    object-fit: contain;
    transition: opacity 0.15s ease;
}

/* BL-063: when "Include screenshot" is unchecked, dim (don't hide) the
   thumbnail so the drawer stays the same height. */
.quick-feedback-thumb-dimmed[b-kgnei38zq1] {
    opacity: 0.35;
    filter: grayscale(0.7);
}

.quick-feedback-privacy[b-kgnei38zq1] {
    color: #5e748a;
    font-size: 0.78rem;
    margin: 0.4rem 0 0;
}

.quick-feedback-context[b-kgnei38zq1] {
    margin-top: 0.85rem;
    padding: 0.5rem 0.6rem;
    border: 1px dashed #c4d1de;
    border-radius: 0.45rem;
    background: #fbfdfe;
    color: #5e748a;
    font-size: 0.82rem;
    line-height: 1.45;
}

.quick-feedback-context strong[b-kgnei38zq1] {
    color: #1f3f5e;
    font-weight: 600;
}

.quick-feedback-error[b-kgnei38zq1] {
    margin-top: 0.6rem;
    border: 1px solid #d88f8f;
    background: #f7e3e3;
    color: #8a2d2d;
    border-radius: 0.45rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

.quick-feedback-actions[b-kgnei38zq1] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.9rem;
}

/* BL-077: on phones the FAB sat at bottom-right over the picker's Auto-pick
   / Start buttons. Shrink to a compact icon-only pill in the bottom-right
   corner with low opacity so it stops eating the primary action area but
   remains tappable when the user actually wants to send feedback.
   Desktop unchanged. */
@media (max-width: 720px) {
    .quick-feedback-fab[b-kgnei38zq1] {
        bottom: 0.6rem;
        right: 0.6rem;
        padding: 0;
        width: 2.1rem;
        height: 2.1rem;
        font-size: 0;
        border-radius: 50%;
        opacity: 0.45;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Render a small speech-bubble glyph in place of the now-hidden text.
       Keeps the button recognisable as feedback without occupying a wide
       text pill that overlaps the picker controls. */
    .quick-feedback-fab[b-kgnei38zq1]::before {
        content: "\1F4AC"; /* 💬 */
        font-size: 1rem;
        line-height: 1;
    }

    /* While capturing, briefly restore the "..." text so the user gets
       visual confirmation the tap registered. */
    .quick-feedback-fab.is-busy[b-kgnei38zq1] {
        font-size: 0.85rem;
    }
    .quick-feedback-fab.is-busy[b-kgnei38zq1]::before {
        content: "";
    }

    /* Drawer sits well above the corner FAB so the FAB doesn't peek through. */
    .quick-feedback-drawer[b-kgnei38zq1] {
        bottom: 3.5rem;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
    }
}

/* R2-3: inline (toolbar) variant. The root must not be fixed — let the button sit in the
   session dashboard's action row and stretch to match the other toolbar buttons' height. */
.quick-feedback-root-inline[b-kgnei38zq1] {
    display: inline-flex;
    align-items: stretch;
}

.quick-feedback-toolbar-btn[b-kgnei38zq1] {
    white-space: nowrap;
    font-weight: 600;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-u69v80gs08],
.components-reconnect-repeated-attempt-visible[b-u69v80gs08],
.components-reconnect-failed-visible[b-u69v80gs08],
.components-pause-visible[b-u69v80gs08],
.components-resume-failed-visible[b-u69v80gs08],
.components-rejoining-animation[b-u69v80gs08] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-u69v80gs08 {
    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/Layout/UserMenu.razor.rz.scp.css */
.user-menu[b-pi7t5mbq6b] {
    position: relative;
}

/* Invisible full-screen catcher so a click anywhere outside closes the menu. */
.user-menu-backdrop[b-pi7t5mbq6b] {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: transparent;
}

.user-menu-trigger[b-pi7t5mbq6b] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 9rem;
    font-weight: 600;
    text-align: left;
}

/* #300/#395: initials avatar standing in for a profile photo (users have no stored
   photo), sized + coloured to match the league-tool mockup's ".who" dot. */
.user-menu-avatar[b-pi7t5mbq6b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #2b6cb0;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.user-menu-trigger-label[b-pi7t5mbq6b] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* #395: two-line identity (name over a muted active-club subtitle), mockup ".who" look. */
.user-menu-trigger-text[b-pi7t5mbq6b] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    min-width: 0;
    line-height: 1.15;
}

.user-menu-trigger-name[b-pi7t5mbq6b] {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.user-menu-trigger-sub[b-pi7t5mbq6b] {
    font-size: 0.68rem;
    font-weight: 500;
    color: #5e748a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.user-menu-panel[b-pi7t5mbq6b] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 1200;
    width: min(19rem, 92vw);
    border: 1px solid #b8c9da;
    border-radius: 0.55rem;
    background: #f6f9fd;
    box-shadow: 0 10px 24px rgba(20, 41, 62, 0.22);
    padding: 0.45rem;
    display: grid;
    gap: 0.25rem;
    /* #334/#395: cap to the viewport as a last resort, but the club list (.user-menu-clubs)
       is the real scroll region so the identity header + account/logout always stay visible. */
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
}

/* #395: only the club switcher scrolls — header and actions stay put however many
   clubs the user can access (superusers have many). */
.user-menu-clubs[b-pi7t5mbq6b] {
    display: grid;
    gap: 0.25rem;
    max-height: 40vh;
    max-height: 40dvh;
    overflow-y: auto;
}

/* Sidebar-bottom placement: a full-width trigger that fits the dark sidebar,
   with the panel opening upward and pinned within the sidebar width so the
   scroll container doesn't clip it. */
.user-menu-dropup .user-menu-trigger[b-pi7t5mbq6b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(164, 193, 223, 0.45);
    color: #eaf2fb;
}

.user-menu-dropup .user-menu-trigger:hover[b-pi7t5mbq6b],
.user-menu-dropup .user-menu-trigger:focus-visible[b-pi7t5mbq6b] {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(164, 193, 223, 0.7);
    color: #ffffff;
}

/* #395: on the dark sidebar the subtitle uses the mockup's muted-blue ".who" tone. */
.user-menu-dropup .user-menu-trigger-sub[b-pi7t5mbq6b] {
    color: #9fb6da;
}

.user-menu-dropup .user-menu-panel[b-pi7t5mbq6b] {
    top: auto;
    bottom: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    width: auto;
}

.user-menu-header[b-pi7t5mbq6b] {
    padding: 0.25rem 0.3rem 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.user-menu-display-name[b-pi7t5mbq6b] {
    color: #1d3856;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-email[b-pi7t5mbq6b] {
    color: #5e748a;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-group-title[b-pi7t5mbq6b] {
    color: #4e6f8e;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.2rem;
}

.user-menu-item[b-pi7t5mbq6b] {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    background: transparent;
    color: #234765;
    text-align: left;
    padding: 0.4rem 0.5rem;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.user-menu-item:hover:not(:disabled)[b-pi7t5mbq6b] {
    background: #e7f0fa;
    border-color: #b4c9de;
}

.user-menu-item:disabled[b-pi7t5mbq6b],
.user-menu-item.current[b-pi7t5mbq6b] {
    color: #5f7f9c;
    background: #e8f0f8;
    border-color: #cad9e8;
}

.user-menu-item.danger[b-pi7t5mbq6b] {
    color: #8b2331;
}

.user-menu-check[b-pi7t5mbq6b] {
    display: inline-block;
    width: 1rem;
    color: #2f6fa6;
    font-weight: 800;
}

.user-menu-divider[b-pi7t5mbq6b] {
    height: 1px;
    background: #cfdae6;
    margin: 0.2rem 0;
}

/* Logout is a form-POST so the auth cookie clears on the server; the form must
   not introduce its own box so the button lays out like the other items. */
.user-menu-logout-form[b-pi7t5mbq6b] {
    display: contents;
}
/* /Components/Pages/ActiveSessions.razor.rz.scp.css */
/* #380: on phones the 10-column Active Sessions table forced a horizontal scroll
   to reach the "Open" action on the right. Below the mobile breakpoint we stack
   each row into a card: every cell goes full-width with its column name as a
   label, and "Open" sits at the bottom of the card as a full-width button - so
   it's always reachable without any sideways scrolling.

   Scoped to this component (ActiveSessions), so the shared clubs-table styling on
   other pages is untouched. */
@media (max-width: 599.98px) {
    /* Defeat the .table-responsive horizontal scroller - we no longer overflow. */
    .table-responsive[b-mom3g8vn4y] {
        overflow-x: visible;
    }

    .clubs-table thead[b-mom3g8vn4y] {
        display: none;
    }

    .clubs-table[b-mom3g8vn4y],
    .clubs-table tbody[b-mom3g8vn4y],
    .clubs-table tr[b-mom3g8vn4y],
    .clubs-table td[b-mom3g8vn4y] {
        display: block;
        width: 100%;
    }

    .clubs-table tr[b-mom3g8vn4y] {
        border: 1px solid #cdd8e6;
        border-radius: 0.6rem;
        background: #fff;
        padding: 0.35rem 0.6rem 0.6rem;
        margin-bottom: 0.7rem;
    }

    .clubs-table td[b-mom3g8vn4y] {
        border: none;
        padding: 0.2rem 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.75rem;
        text-align: right;
    }

    /* Column name on the left of each stacked cell. */
    .clubs-table td[b-mom3g8vn4y]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #557693;
        text-align: left;
        flex: 0 0 auto;
    }

    /* text-end numeric cells don't need their own right-align now the row is a flex line. */
    .clubs-table td.text-end[b-mom3g8vn4y] {
        text-align: right;
    }

    /* The Open action: full-width, prominent, last in the card - no scrolling. */
    .clubs-table td:last-child[b-mom3g8vn4y] {
        display: block;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid #e6edf5;
        text-align: center;
    }

    .clubs-table td:last-child[b-mom3g8vn4y]::before {
        content: none;
    }

    .clubs-table td:last-child .btn[b-mom3g8vn4y] {
        display: block;
        width: 100%;
    }
}
/* /Components/Pages/AttendanceOverTimeReport.razor.rz.scp.css */
.reports-shell[b-mzjaokdlbb] {
    max-width: 1180px;
    padding-bottom: 2.5rem;
}

.reports-crumb[b-mzjaokdlbb] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.reports-crumb-link[b-mzjaokdlbb] {
    background: none;
    border: none;
    padding: 0;
    color: #0d2c55;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.reports-crumb-link:hover[b-mzjaokdlbb],
.reports-crumb-link:focus-visible[b-mzjaokdlbb] {
    text-decoration: underline;
    outline: none;
}

.aot-head[b-mzjaokdlbb] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.aot-head h1[b-mzjaokdlbb] {
    margin: 0;
    color: #1f3f5e;
}

.aot-sub[b-mzjaokdlbb] {
    color: #3d5a78;
    margin: 0.2rem 0 0;
}

.aot-head-actions[b-mzjaokdlbb] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.aot-ranges[b-mzjaokdlbb] {
    display: flex;
    gap: 0.35rem;
    background: #eef3f9;
    border: 1px solid #d8e2ee;
    border-radius: 0.6rem;
    padding: 0.2rem;
}

.aot-ranges button[b-mzjaokdlbb] {
    border: none;
    background: none;
    color: #4a5b70;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 0.45rem;
    cursor: pointer;
}

.aot-ranges button.on[b-mzjaokdlbb] {
    background: #ffffff;
    color: #1f3f5e;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.12);
}

.aot-ranges button:disabled[b-mzjaokdlbb] {
    cursor: default;
    opacity: 0.55;
}

/* tiles */
.aot-tiles[b-mzjaokdlbb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.aot-tile[b-mzjaokdlbb] {
    background: #ffffff;
    border: 1px solid #c5cfde;
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
}

.aot-tile .lab[b-mzjaokdlbb] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c7a8c;
    font-weight: 700;
}

.aot-tile .val[b-mzjaokdlbb] {
    font-size: 1.9rem;
    font-weight: 800;
    color: #1f3f5e;
    line-height: 1.05;
    margin-top: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.aot-tile .sub[b-mzjaokdlbb] {
    font-size: 0.78rem;
    color: #6c7a8c;
    margin-top: 0.35rem;
}

/* chart cards */
.aot-card[b-mzjaokdlbb] {
    background: #ffffff;
    border: 1px solid #c5cfde;
    border-radius: 0.75rem;
    margin-bottom: 1.15rem;
    padding: 1rem 1.2rem 1.2rem;
}

.aot-card-head[b-mzjaokdlbb] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.aot-card-head h3[b-mzjaokdlbb] {
    margin: 0;
    font-size: 1rem;
    color: #1f3f5e;
}

.aot-card-head .d[b-mzjaokdlbb] {
    color: #6c7a8c;
    font-size: 0.82rem;
}

/* Seasonality "Quieter months" band legend (the Chart.js legend is off for that chart). */
.aot-legend[b-mzjaokdlbb] {
    margin-left: auto;
    color: #52617a;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.aot-swatch-band[b-mzjaokdlbb] {
    display: inline-block;
    width: 16px;
    height: 11px;
    background: rgba(219, 231, 245, 0.9);
    border: 1px solid #c4d6ec;
    border-radius: 2px;
}

.aot-chart[b-mzjaokdlbb] {
    position: relative;
    height: 280px;
}

.aot-empty[b-mzjaokdlbb] {
    color: #6c7a8c;
    padding: 2rem 0;
    text-align: center;
    margin: 0;
}

@media (max-width: 820px) {
    .aot-tiles[b-mzjaokdlbb] {
        grid-template-columns: repeat(2, 1fr);
    }
    .aot-head-actions[b-mzjaokdlbb] {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .aot-tiles[b-mzjaokdlbb] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/AttendanceTrendsReport.razor.rz.scp.css */
.reports-crumb[b-vvhz5dyekm] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.reports-crumb-link[b-vvhz5dyekm] {
    background: none;
    border: none;
    padding: 0;
    color: #0d2c55;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.reports-crumb-link:hover[b-vvhz5dyekm],
.reports-crumb-link:focus-visible[b-vvhz5dyekm] {
    text-decoration: underline;
    outline: none;
}

.attendance-trends-filters[b-vvhz5dyekm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, auto)) 1fr;
    gap: 0.7rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.attendance-trends-filter[b-vvhz5dyekm] {
    display: flex;
    flex-direction: column;
}

.attendance-trends-filter .form-label[b-vvhz5dyekm] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #24384f;
    margin-bottom: 0.2rem;
}

.attendance-trends-filter-actions[b-vvhz5dyekm] {
    flex-direction: row;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: flex-end;
}

.attendance-trends-count-hint[b-vvhz5dyekm] {
    color: #6c7a8c;
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
}

.attendance-trends-table thead th[b-vvhz5dyekm] {
    color: #2a2f36;
    border-bottom: 1px solid #1f2b38;
    font-size: 0.95rem;
    white-space: nowrap;
}

.attendance-trends-table th.sortable-header[b-vvhz5dyekm] {
    cursor: pointer;
    user-select: none;
}

.attendance-trends-table th.sortable-header:hover[b-vvhz5dyekm] {
    color: #0d2c55;
}

.attendance-trends-table td[b-vvhz5dyekm],
.attendance-trends-table th[b-vvhz5dyekm] {
    vertical-align: middle;
}

.attendance-trends-table .numeric[b-vvhz5dyekm] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .attendance-trends-filter-actions[b-vvhz5dyekm] {
        justify-content: flex-start;
    }
}

/* ── Drift visuals ───────────────────────────────────────────────────────── */

/* (1) status summary strip */
.trends-statbar[b-vvhz5dyekm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
    margin: 0.25rem 0 1.15rem;
}

.trends-stat[b-vvhz5dyekm] {
    background: #ffffff;
    border: 1px solid #c5cfde;
    border-left-width: 4px;
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
}

.trends-stat.active[b-vvhz5dyekm] { border-left-color: #2e9c63; }
.trends-stat.lapsing[b-vvhz5dyekm] { border-left-color: #e0a32a; }
.trends-stat.dormant[b-vvhz5dyekm] { border-left-color: #9aa6b6; }
.trends-stat.new[b-vvhz5dyekm] { border-left-color: #1b6ec2; }

.trends-stat .lab[b-vvhz5dyekm] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c7a8c;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.trends-stat .pip[b-vvhz5dyekm] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.trends-stat.active .pip[b-vvhz5dyekm] { background: #2e9c63; }
.trends-stat.lapsing .pip[b-vvhz5dyekm] { background: #e0a32a; }
.trends-stat.dormant .pip[b-vvhz5dyekm] { background: #9aa6b6; }
.trends-stat.new .pip[b-vvhz5dyekm] { background: #1b6ec2; }

.trends-stat .val[b-vvhz5dyekm] {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1f3f5e;
    line-height: 1.05;
    margin-top: 0.45rem;
    font-variant-numeric: tabular-nums;
}

.trends-stat .sub[b-vvhz5dyekm] {
    font-size: 0.76rem;
    color: #6c7a8c;
    margin-top: 0.3rem;
}

/* hero grid: drift map (wide) + reach-out (narrow) */
.trends-grid[b-vvhz5dyekm] {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 1.15rem;
    margin-bottom: 1.15rem;
}

.trends-card[b-vvhz5dyekm] {
    background: #ffffff;
    border: 1px solid #c5cfde;
    border-radius: 0.75rem;
    padding: 1rem 1.2rem 1.1rem;
}

.trends-card-head[b-vvhz5dyekm] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.trends-card-head h3[b-vvhz5dyekm] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f3f5e;
}

.trends-card-head .d[b-vvhz5dyekm] {
    color: #6c7a8c;
    font-size: 0.82rem;
}

/* Days-since-last window selector — same segmented-button treatment as the
   Attendance-over-time report's .aot-ranges, for consistency across the two charts.
   margin-left:auto pushes it to the right edge of the (flex) card head. */
.trends-window[b-vvhz5dyekm] {
    display: flex;
    gap: 0.35rem;
    margin-left: auto;
    background: #eef3f9;
    border: 1px solid #d8e2ee;
    border-radius: 0.6rem;
    padding: 0.2rem;
}

.trends-window button[b-vvhz5dyekm] {
    border: none;
    background: none;
    color: #4a5b70;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 0.45rem;
    cursor: pointer;
}

.trends-window button.on[b-vvhz5dyekm] {
    background: #ffffff;
    color: #1f3f5e;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.12);
}

.trends-window button:disabled[b-vvhz5dyekm] {
    cursor: default;
    opacity: 0.55;
}

/* (2) drift map */
.trends-driftmap[b-vvhz5dyekm] {
    position: relative;
    height: 360px;
}

.trends-empty[b-vvhz5dyekm] {
    color: #6c7a8c;
    padding: 2rem 0;
    text-align: center;
    margin: 0;
}

.trends-legend[b-vvhz5dyekm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.65rem;
    font-size: 0.78rem;
    color: #52617a;
}

.trends-legend span[b-vvhz5dyekm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.trends-legend .dot[b-vvhz5dyekm] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.trends-legend .dot.active[b-vvhz5dyekm] { background: #2e9c63; }
.trends-legend .dot.lapsing[b-vvhz5dyekm] { background: #e0a32a; }
.trends-legend .dot.dormant[b-vvhz5dyekm] { background: #9aa6b6; }
.trends-legend .dot.new[b-vvhz5dyekm] { background: #1b6ec2; }

.trends-legend .zone .swatch[b-vvhz5dyekm] {
    width: 16px;
    height: 11px;
    border-radius: 2px;
    background: rgba(224, 163, 42, 0.40);
    border: 1px solid #f0d690;
    display: inline-block;
}

/* (3) reach-out spotlight */
.trends-reach[b-vvhz5dyekm] {
    display: flex;
    flex-direction: column;
}

.trends-empty-small[b-vvhz5dyekm] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
}

.trends-person[b-vvhz5dyekm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #f1f4f9;
    padding: 0.7rem 0.25rem;
    cursor: pointer;
    font: inherit;
}

.trends-person:last-child[b-vvhz5dyekm] { border-bottom: none; }

.trends-person:hover[b-vvhz5dyekm],
.trends-person:focus-visible[b-vvhz5dyekm] {
    background: #f7f9fc;
    outline: none;
}

.trends-person .av[b-vvhz5dyekm] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e0a32a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex: 0 0 auto;
}

.trends-person .who[b-vvhz5dyekm] { min-width: 0; }

.trends-person .who .nm[b-vvhz5dyekm] {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: #24364d;
}

.trends-person .who .meta[b-vvhz5dyekm] {
    display: block;
    font-size: 0.74rem;
    color: #6c7a8c;
}

.trends-person .spark[b-vvhz5dyekm] {
    margin-left: auto;
    flex: 0 0 auto;
}

.trends-person .days[b-vvhz5dyekm] {
    flex: 0 0 auto;
    text-align: right;
    width: 58px;
}

.trends-person .days b[b-vvhz5dyekm] {
    font-size: 1rem;
    color: #a9750a;
    font-variant-numeric: tabular-nums;
}

.trends-person .days span[b-vvhz5dyekm] {
    display: block;
    font-size: 0.64rem;
    color: #6c7a8c;
}

/* (4) trajectory sparkline column in the existing table */
.trends-trajectory-head[b-vvhz5dyekm] {
    white-space: nowrap;
}

.trends-trajectory-cell[b-vvhz5dyekm] {
    width: 120px;
}

.trends-trajectory-cell svg[b-vvhz5dyekm] {
    display: block;
}

/* table section heading (above the existing filters + table) */
.trends-table-head[b-vvhz5dyekm] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.trends-table-head h3[b-vvhz5dyekm] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f3f5e;
}

.trends-table-head .d[b-vvhz5dyekm] {
    color: #6c7a8c;
    font-size: 0.82rem;
}

/* pastel status pills in the table — same palette as the strip / reach-out / drift map */
.trends-pill[b-vvhz5dyekm] {
    display: inline-block;
    border-radius: 20px;
    padding: 0.1rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.trends-pill.active[b-vvhz5dyekm] { background: #e6f5ec; color: #1f7a4d; }
.trends-pill.lapsing[b-vvhz5dyekm] { background: #fdeccd; color: #a9750a; }
.trends-pill.dormant[b-vvhz5dyekm] { background: #eef1f6; color: #52617a; }
.trends-pill.new[b-vvhz5dyekm] { background: #e3eefb; color: #1b6ec2; }

@media (max-width: 980px) {
    .trends-grid[b-vvhz5dyekm] {
        grid-template-columns: 1fr;
    }
    /* When the grid stacks, the drift map gains width but its fixed height would leave it wide
       and short — let it grow a little so the danger zone keeps a readable footprint. */
    .trends-driftmap[b-vvhz5dyekm] {
        height: 420px;
    }
}

@media (max-width: 720px) {
    .trends-statbar[b-vvhz5dyekm] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Claim.razor.rz.scp.css */
/* #430 (portal S5): the claim = on-the-spot signup gate. Mobile-first, share-shaped —
   a single centred column that reads well on a phone opened from a WhatsApp share.
   Self-contained (no app nav chrome), like the recap + static-SSR auth shells. */

.claim-shell[b-b2rj2fdj2w] {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    color: #1f2d3d;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
}

.claim-head[b-b2rj2fdj2w] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.claim-brand-wordmark[b-b2rj2fdj2w] {
    height: 1.75rem;
    width: auto;
}

.claim-title[b-b2rj2fdj2w] {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0.75rem 0 0.15rem;
    color: #16324f;
    line-height: 1.2;
}

.claim-sub[b-b2rj2fdj2w] {
    margin: 0;
    color: #5a6b7b;
    font-size: 0.95rem;
}

.claim-card[b-b2rj2fdj2w] {
    background: #f6f9fc;
    border: 1px solid #e0e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.claim-card h1[b-b2rj2fdj2w] {
    font-size: 1.35rem;
    color: #16324f;
    margin: 0 0 0.75rem;
}

.claim-help[b-b2rj2fdj2w] {
    color: #5a6b7b;
    font-size: 0.9rem;
}

.claim-fieldset[b-b2rj2fdj2w] {
    border: none;
    padding: 0;
    margin: 1rem 0 0;
}

.claim-fieldset legend[b-b2rj2fdj2w] {
    font-weight: 700;
    color: #16324f;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.claim-name-list[b-b2rj2fdj2w] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid #e0e8f0;
    border-radius: 0.5rem;
    padding: 0.4rem;
}

.claim-name-option[b-b2rj2fdj2w] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.65rem;
    border-radius: 0.4rem;
    cursor: pointer;
    min-height: 2.75rem; /* touch target */
}

.claim-name-option:hover[b-b2rj2fdj2w] {
    background: #eef4fa;
}

.claim-name-radio[b-b2rj2fdj2w] {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
}

.claim-name-text[b-b2rj2fdj2w] {
    font-size: 1rem;
}

.claim-code-input[b-b2rj2fdj2w] {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
}

.claim-consent-label[b-b2rj2fdj2w] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: #3a4a5a;
}

.claim-consent-label input[b-b2rj2fdj2w] {
    margin-top: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

.claim-actions[b-b2rj2fdj2w] {
    display: flex;
    justify-content: stretch;
}

.claim-actions .btn[b-b2rj2fdj2w] {
    width: 100%;
    min-height: 3rem;
    font-size: 1.05rem;
}

.claim-error[b-b2rj2fdj2w] {
    background: #fdecec;
    border: 1px solid #f5b5b5;
    color: #8a1f1f;
    border-radius: 0.5rem;
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.75rem;
    font-size: 0.92rem;
}

/* #696: the "code applied from your link" affordance that replaces the manual code
   field when a well-formed ?code= arrives (kiosk QR scan / #709 shared link). Same
   green family as the claim-code chip on the kiosk, so the two ends of the scan
   visually agree. */
.claim-code-applied[b-b2rj2fdj2w] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 0.5rem;
    padding: 0.65rem 0.8rem;
    margin-top: 1rem;
    font-size: 0.92rem;
    color: #14532d;
}

.claim-code-applied code[b-b2rj2fdj2w] {
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #14532d;
}

.claim-code-applied-clear[b-b2rj2fdj2w] {
    color: #2f6eaa;
    font-size: 0.85rem;
    align-self: flex-start;
}
/* /Components/Pages/Clubs.razor.rz.scp.css */
.clubs-shell[b-s4llzf7qxg] {
    padding: 0;
}

.clubs-shell h1[b-s4llzf7qxg] {
    margin: 0 0 0.25rem;
    color: #1f3f5e;
}

.clubs-subtitle[b-s4llzf7qxg] {
    margin: 0 0 1rem;
    color: #5f7489;
}

.clubs-card[b-s4llzf7qxg] {
    background: #f6f8fb;
    border: 1px solid rgba(13, 44, 85, 0.08);
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

.clubs-card h2[b-s4llzf7qxg] {
    margin: 0 0 0.65rem;
    color: #24384f;
}

.clubs-header[b-s4llzf7qxg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.65rem;
}

.clubs-show-demo-toggle[b-s4llzf7qxg] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #4e6f8e;
    font-size: 0.88rem;
    margin: 0;
}

.clubs-demo-badge[b-s4llzf7qxg] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    background: #fff4d6;
    color: #6a4a08;
    border: 1px solid #e3b14a;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
}

.clubs-toolbar[b-s4llzf7qxg] {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.clubs-form-grid[b-s4llzf7qxg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    align-items: end;
}

.clubs-form-field[b-s4llzf7qxg] {
    display: flex;
    flex-direction: column;
}

.clubs-form-field-wide[b-s4llzf7qxg] {
    grid-column: span 2;
}

.clubs-form-actions[b-s4llzf7qxg] {
    display: flex;
    align-items: flex-end;
}

.clubs-form-field .form-label[b-s4llzf7qxg] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #24384f;
    margin-bottom: 0.25rem;
}


.clubs-import-details > summary[b-s4llzf7qxg] {
    cursor: pointer;
    list-style: revert;
    padding: 0.1rem 0;
}

.clubs-import-details > summary[b-s4llzf7qxg]::-webkit-details-marker {
    display: inline-block;
}

.clubs-import-summary-heading[b-s4llzf7qxg] {
    display: inline;
    margin: 0;
    color: #24384f;
    font-size: 1.05rem;
}

.clubs-import-hint[b-s4llzf7qxg] {
    display: block;
    color: #6c7a8c;
    font-size: 0.85rem;
    margin-left: 1.4rem;
    margin-top: 0.2rem;
}

.clubs-help[b-s4llzf7qxg] {
    color: #5f6f80;
}

.clubs-table thead th[b-s4llzf7qxg] {
    color: #2a2f36;
    border-bottom: 1px solid #1f2b38;
}

/* Click-to-sort column headers (#195). */
.clubs-table th.sortable-header[b-s4llzf7qxg] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.clubs-table th.sortable-header:hover[b-s4llzf7qxg] {
    color: #0d2c55;
}

/* Wraps the action buttons (Use Club / Edit / Delete) so that they
   keep a visible gap on both axes when they reflow onto a second
   line on narrow viewports -- the previous me-2 utility only added
   horizontal spacing, leaving rows touching vertically. */
.clubs-actions[b-s4llzf7qxg] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

/* The admin table is wide (9 columns) and scrolls horizontally inside .table-responsive at
   tablet / icon-rail widths (and slightly even at desktop). Pin the Actions column to the right
   edge so the per-club buttons stay visible and reachable however far the table is scrolled -
   otherwise they sit ~160px off the right with the only scrollbar below the fold. */
.clubs-table th:last-child[b-s4llzf7qxg],
.clubs-table td:last-child[b-s4llzf7qxg] {
    position: sticky;
    right: 0;
    background: #ffffff;
    box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.12);
}

.clubs-table td:last-child[b-s4llzf7qxg] {
    z-index: 1;
}

.clubs-table thead th:last-child[b-s4llzf7qxg] {
    z-index: 3;
}

.clubs-message[b-s4llzf7qxg] {
    margin-bottom: 0.6rem;
    border: 1px solid #b7cadf;
    border-radius: 0.45rem;
    background: #ecf4fc;
    color: #244a6f;
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
}

@media (max-width: 700px) {
    .clubs-toolbar[b-s4llzf7qxg] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ADR 0005 per-club pilot flag controls (superuser, internal). Deliberately
   minor — this is an internal pilot toggle, not a feature surface. */
.clubs-picker-edit[b-s4llzf7qxg] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-weight: 400;
}

.clubs-picker-edit-label[b-s4llzf7qxg] {
    font-size: 0.8rem;
    color: #5f7489;
}

.clubs-picker-select[b-s4llzf7qxg] {
    width: auto;
    min-width: 6rem;
}

.clubs-picker-badge[b-s4llzf7qxg] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.2rem;
    background: rgba(13, 44, 85, 0.08);
    color: #1f3f5e;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

/* #332 per-club feature flags (superuser, internal). Groups the Picker select and
   the Competitions toggle into one "Features" cell in the edit row. */
.clubs-features-edit[b-s4llzf7qxg] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.clubs-features-edit-heading[b-s4llzf7qxg] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #5f7489;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.clubs-feature-toggle[b-s4llzf7qxg] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-weight: 400;
}

.clubs-feature-toggle-label[b-s4llzf7qxg] {
    font-size: 0.85rem;
    color: #24384f;
}
/* /Components/Pages/ClubSessionDashboard.razor.rz.scp.css */
.clubSession-dashboard-shell[b-l9cvewerkd] {
    /* ── #718: the fold density scale ─────────────────────────────────────────
       The dashboard's vertical stack must fit common operator viewports without
       scrolling. These custom properties are the ONE set of vertical-density
       knobs; the height-tier media blocks at the END of this file re-declare
       them (custom properties inherit through the CSS-isolation scope into the
       ::deep children, so each tier reads as one legible block). Tier 0
       (>=900px viewport height) = these base values = today's exact layout. */
    --fold-court-min: 14.5rem;
    --fold-court-empty-min: 11.8rem;
    --fold-panel-pad: 0.6rem;
    --fold-prep-slot-min: 2.3rem;
    --fold-prep-gap: 0.35rem;
    --fold-band-gap: 0.45rem;
    --fold-waiting-cap: 12.5rem;
    background: #d2dbe7;
    padding: 0.35rem 0 0.8rem;
}

/* QuickFeedback FAB is position:fixed bottom-right and overlaps any
   bottom-of-page content at phone widths — most visibly the Save button
   in score entry and the bottom-most chips in the waiting queue. Extra
   shell padding at the bottom gives the user scroll room to push that
   content above the FAB's footprint. */
@media (max-width: 599.98px) {
    .clubSession-dashboard-shell[b-l9cvewerkd] {
        padding-bottom: 4rem;
    }
}

.clubSession-kiosk-top[b-l9cvewerkd] {
    min-height: 2.55rem;
    border: 1px solid #bccadb;
    background: #e7edf5;
    border-radius: 0.7rem;
    padding: 0.3rem 0.45rem;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

/* #335: when MainLayout has floated the bare hamburger onto the page's top-left
   (kiosk routes, no banner), reserve room at the start of this row so the title
   clears the overlaid hamburger - the hamburger then reads as the first item on
   this shared top button line instead of owning a wasted line above it. */
/* Kiosk rework: this hamburger-clearance + sticky-row treatment only applies in kiosk
   mode (body.kiosk-mode), where MainLayout floats the bare hamburger onto this row. Off
   kiosk the session uses the normal app chrome (persistent sidebar / standard hamburger),
   so the row needs neither the left reserve nor the sticky pin. */
body.kiosk-mode .page--topbar-bare .clubSession-kiosk-top[b-l9cvewerkd] {
    /* 2.6rem (hamburger width) + 0.75rem (its own left margin) so the title fully clears the
       overlaid hamburger - without the margin term they overlapped by ~5px (qa). */
    padding-left: calc(2.6rem + 0.75rem);
    /* #390 (round 2): the hamburger is fixed so it survives scrolling on a short kiosk
       screen. Freeze this top row too (sticky) so the title/timestamp stay aligned with the
       pinned hamburger instead of scrolling up underneath it and overlapping. z-index sits
       below the hamburger's (.layout-top-bar = 20) so it stays clickable. */
    position: sticky;
    top: 0;
    z-index: 15;
}

.clubSession-kiosk-left[b-l9cvewerkd] {
    display: flex;
    align-items: center;
}

.clubSession-kiosk-note[b-l9cvewerkd] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #2e4f6d;
}

.clubSession-kiosk-sub[b-l9cvewerkd] {
    color: #557693;
    font-size: 0.82rem;
}

/* #430 claim code: players read this off the kiosk/tablet from a distance and
   type it into their phones - it must be legible across a sports hall, not
   body-copy sized (Mike UAT, 2026-07-04). */
.clubSession-claim-code[b-l9cvewerkd] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #2e4f6d;
    font-weight: 600;
    white-space: nowrap;
}

.clubSession-claim-code code[b-l9cvewerkd] {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #14532d;
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 0.4rem;
    padding: 0.1rem 0.55rem;
}

/* ── #696/#718 (Mike's final design): the claim BUTTON — one pattern at every
   tier. An obvious labelled action (mini QR glyph + "Scan to claim") in the
   header, styled as a real button next to the cog/fullscreen controls, with a
   >=2.5rem touch target. The scannable pattern never renders in the header —
   it lives in the top-anchored panel this button toggles. Green family = the
   claim credential's visual identity (end panel / claim page agree). The
   claimed count rides on the button as a suffix and FADES (CSS transition)
   once coverage saturates — never a hard DOM vanish. */
.clubSession-qr-block[b-l9cvewerkd] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
}

.clubSession-qr-chip[b-l9cvewerkd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.3rem 0.75rem;
    background: #ffffff;
    border: 1.5px solid #86efac;
    border-radius: 0.5rem;
    color: #14532d;
    cursor: pointer;
    /* A real pressable control, not a status badge (UX review): light resting
       shadow like the neighbouring buttons, stronger ring on hover/focus. */
    box-shadow: 0 1px 2px rgba(21, 43, 68, 0.15);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.clubSession-qr-chip:hover[b-l9cvewerkd],
.clubSession-qr-chip:focus-visible[b-l9cvewerkd] {
    border-color: #4ade80;
    box-shadow: 0 0 0 0.18rem rgba(34, 197, 94, 0.18);
    outline: none;
}

.clubSession-qr-glyph[b-l9cvewerkd] {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
}

.clubSession-qr-btn-text[b-l9cvewerkd] {
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.clubSession-qr-claimed[b-l9cvewerkd] {
    white-space: nowrap;
    color: #14532d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    padding: 0.14rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 1;
    transition: opacity 400ms ease;
}

.clubSession-qr-claimed.is-faded[b-l9cvewerkd] {
    opacity: 0;
}

/* ── #718 (Mike's final design): the top-anchored persistent claim panel — the
   ONLY place the QR pattern renders (the #696 fullscreen overlay is retired).
   IN-FLOW under the header, so it obscures nothing: the tabs + board are
   pushed down, every control stays visible and operable, and the density
   tiers below have already compressed the stack enough that the first court
   row stays above the fold at every matrix cell even with the panel open.
   Persistent until the explicit close — an organiser leaves it up all evening
   during the session-start burst; players wander up and scan mid-games. QR
   sized for standing distance: >=280px, scaling with the screen (34vmin). */
.clubSession-qr-panel[b-l9cvewerkd] {
    padding: 0.05rem 0 0.35rem;
}

.clubSession-qr-panel-card[b-l9cvewerkd] {
    width: min(34rem, 96vw);
    margin: 0 auto;
    background: #ffffff;
    border: 1.5px solid #bbf7d0;
    border-radius: 0.85rem;
    box-shadow: 0 10px 26px rgba(21, 43, 68, 0.18);
    /* Chrome kept LEAN: every non-QR pixel here pushes the court row it must
       not displace (measured at 1280x853 — the #689 contract viewport). */
    padding: 0.5rem 0.9rem 0.55rem;
    text-align: center;
}

.clubSession-qr-panel-head[b-l9cvewerkd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.2rem;
}

.clubSession-qr-panel-title[b-l9cvewerkd] {
    margin: 0;
    color: #0d2c55;
    font-size: 1.05rem;
    font-weight: 800;
}

.clubSession-qr-panel-close[b-l9cvewerkd] {
    flex: 0 0 auto;
}

/* >=300px always (Mike's standing-distance bar), growing with the screen. */
.clubSession-qr-panel-svg[b-l9cvewerkd] {
    width: clamp(18.75rem, 34vmin, 25rem);
    height: clamp(18.75rem, 34vmin, 25rem);
    margin: 0 auto;
}

/* The SVG arrives via MarkupString, so it carries no CSS-isolation scope
   attribute — ::deep is required to reach it from this scoped sheet. */
.clubSession-qr-panel-svg[b-l9cvewerkd]  svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* No panel hint line at ANY height (Mike UAT: redundant — the QR is
   self-explanatory and the close button speaks for itself). What used to be a
   kiosk-height-only hide is now the universal rule: the element is gone from
   the markup and its ~27px go to keeping the court row above the fold. */

.clubSession-kiosk-actions[b-l9cvewerkd] {
    display: flex;
    /* stretch so the icon buttons match the tallest button (End session) rather
       than sizing to their own glyph's font-size. */
    align-items: stretch;
    gap: 0.35rem;
}

.top-icon-btn[b-l9cvewerkd] {
    width: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-cog-btn[b-l9cvewerkd] {
    font-size: 1.25rem;
    line-height: 1;
}

.fullscreen-toggle-btn[b-l9cvewerkd] {
    font-size: 1rem;
    line-height: 1;
}

.kiosk-menu-popover[b-l9cvewerkd] {
    position: relative;
    z-index: 10;
    width: min(280px, 92vw);
    margin: 0 0 0.45rem;
    border: 1px solid #c0ccd9;
    border-radius: 0.65rem;
    background: #eef3f9;
    box-shadow: 0 6px 16px rgba(21, 48, 75, 0.2);
    padding: 0.4rem;
    display: grid;
    gap: 0.3rem;
}

.kiosk-menu-link[b-l9cvewerkd] {
    text-align: left;
}

.kiosk-menu-link-sub[b-l9cvewerkd] {
    margin-left: 0.4rem;
}

.kiosk-help-group[b-l9cvewerkd] {
    display: grid;
    gap: 0.28rem;
    margin-top: 0.15rem;
}

.kiosk-help-group summary[b-l9cvewerkd] {
    list-style: none;
    cursor: pointer;
    color: #3a5976;
    font-weight: 700;
    padding: 0.2rem 0.15rem;
}

.kiosk-help-group summary[b-l9cvewerkd]::-webkit-details-marker {
    display: none;
}

.clubSession-settings-modal-backdrop[b-l9cvewerkd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Capping the modal at 90svh wasn't enough on iOS Safari: the backdrop
       still filled the LAYOUT viewport (extends behind the dynamic bottom
       URL bar), and `align-items: center` placed the modal's bottom edge
       (with its sticky Save button) past the visible safe area. Sizing the
       backdrop itself to 100svh keeps flex-centering within the always-
       visible viewport, so the Save button is reachable without scrolling
       past the URL bar. iOS 15.4+ uses svh; older browsers fall back to vh
       (same as the prior behaviour, no regression). */
    height: 100vh;
    height: 100svh;
    background: rgba(24, 35, 52, 0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2000;
}

.clubSession-settings-modal[b-l9cvewerkd] {
    width: min(980px, 94vw);
    /* iOS Safari: 90vh refers to the LAYOUT viewport (includes the URL-bar
       zone), so a 90vh modal can extend behind the bottom browser chrome
       and hide the Save button. svh = small viewport height (URL bar
       always counted as visible) keeps the modal inside the safe area on
       iOS 15.4+. Older browsers ignore svh and fall back to vh. */
    max-height: 90vh;
    max-height: 90svh;
    /* #466: same structure as the #445 member-edit modal — the modal is a flex
       COLUMN (a pinned header + a single scrolling body + a pinned footer), NOT
       overflow-y:auto on the modal itself. The old approach scrolled the whole
       modal and pinned the header/footer with position:sticky; on a scroll-
       overflowing modal the settings controls slid UNDER the translucent header
       and Save/Reset footer (Mike's report). The scroll now lives on
       .clubSession-settings-modal-body alone, between the two pinned bars. */
    display: flex;
    flex-direction: column;
    background: #f8fbff;
    border: 1px solid #b6c8da;
    border-radius: 0.85rem;
    box-shadow: 0 14px 34px rgba(21, 48, 75, 0.24);
    padding: 0.8rem;
}

.clubSession-settings-modal-header[b-l9cvewerkd] {
    /* #466: pinned at the top while the body scrolls (was position:sticky on a
       scrolling modal — content slid behind it). flex:0 0 auto so it never
       shrinks or scrolls. */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    /* Negative horizontal margin + matching padding lets the header background
       span the full modal width inside its padding. */
    margin: -0.8rem -0.8rem 0.6rem;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid #c4d2e0;
}

.clubSession-settings-modal-header h2[b-l9cvewerkd] {
    margin: 0;
    font-size: 1.1rem;
    color: #345674;
}

.clubSession-settings-modal-body[b-l9cvewerkd] {
    /* #466: the ONLY scroll region now (the modal itself no longer scrolls, so
       the header stays pinned above and the actions footer below). flex:1 1 auto
       takes the remaining height; min-height:0 is REQUIRED — a flex item defaults
       to min-height:auto, which refuses to shrink below its content and would
       push the whole modal past the viewport instead of scrolling here. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.7rem 0;
}

.clubSession-settings-modal-actions[b-l9cvewerkd] {
    /* #466: pinned at the bottom while the body scrolls (was position:sticky on a
       scrolling modal — content slid behind the Save/Reset buttons). flex:0 0 auto
       so the footer never shrinks or scrolls. Negative horizontal margin + matching
       padding lets the footer background span the full modal width like the header. */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: #f8fbff;
    border-top: 1px solid #c4d2e0;
    margin: 0.7rem -0.8rem -0.8rem;
    padding: 0.6rem 0.8rem max(0.6rem, env(safe-area-inset-bottom));
}

/* #401: save-confirmation message in the settings modal footer. Mirrors the
   ClubSessionSettingsTab's .settings-message (scoped there, so re-declared here
   because Blazor CSS isolation does not share component styles). */
.settings-message[b-l9cvewerkd] {
    color: #4f6177;
    font-size: 0.92rem;
}

.clubSession-toolbar-tabs[b-l9cvewerkd] {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    border-bottom: 1px solid #9fb6cc;
    margin-bottom: var(--fold-band-gap, 0.45rem);
    padding-left: 0.15rem;
    /* BL-077: position context for the scroll-cue gradient overlay below. */
    position: relative;
}

/* BL-077: fading right-edge gradient that signals horizontal scroll on
   mobile where the tab row doesn't fit (Completed Games / Payments etc.
   were getting cut off with no visual indication more tabs existed).
   Only renders on narrow screens; desktop tab row already fits in full. */
@media (max-width: 720px) {
    .clubSession-toolbar-tabs[b-l9cvewerkd]::after {
        content: "";
        position: sticky;
        right: 0;
        top: 0;
        flex: 0 0 1.4rem;
        height: 100%;
        margin-left: -1.4rem;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(232, 238, 245, 0.9) 65%, rgba(232, 238, 245, 1) 100%);
        pointer-events: none;
    }
}

.clubSession-toolbar-tabs[b-l9cvewerkd]::-webkit-scrollbar {
    height: 6px;
}

.clubSession-toolbar-tabs[b-l9cvewerkd]::-webkit-scrollbar-thumb {
    background: rgba(159, 182, 204, 0.55);
    border-radius: 3px;
}

.clubSession-toolbar-tabs .nav-item[b-l9cvewerkd] {
    margin-bottom: -1px;
    flex: 0 0 auto;
}

.clubSession-toolbar-tabs .nav-link[b-l9cvewerkd] {
    border: 1px solid #b3c6da;
    border-bottom-color: #a9bfd3;
    border-radius: 0.45rem 0.45rem 0 0;
    color: #5a7691;
    background: #e8eef5;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.15;
    padding: 0.35rem 0.7rem;
    margin-right: 0.28rem;
}

.clubSession-toolbar-tabs .nav-link .tab-label[b-l9cvewerkd] {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.clubSession-toolbar-tabs .nav-link .tab-icon[b-l9cvewerkd] {
    width: 0.92rem;
    height: 0.92rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.clubSession-toolbar-tabs .nav-link .tab-icon-pegboard[b-l9cvewerkd] {
    color: #2d83cf;
}

.clubSession-toolbar-tabs .nav-link .tab-icon-attendees[b-l9cvewerkd] {
    color: #2eaf74;
}

.clubSession-toolbar-tabs .nav-link .tab-icon-games[b-l9cvewerkd] {
    color: #8c5bd4;
}

.clubSession-toolbar-tabs .nav-link .tab-icon-payments[b-l9cvewerkd] {
    color: #c98a1a;
}

.clubSession-toolbar-tabs .nav-link .tab-icon-insights[b-l9cvewerkd] {
    color: #d15a88;
}

.clubSession-toolbar-tabs .nav-link .tab-icon-settings[b-l9cvewerkd] {
    color: #4d8b97;
}

.clubSession-toolbar-tabs .nav-link .tab-icon-diagnostics[b-l9cvewerkd] {
    color: #cc5a44;
}

/* #756: the Recap tab (takes the Pegboard board tab's slot once the session has ended). */
.clubSession-toolbar-tabs .nav-link .tab-icon-recap[b-l9cvewerkd] {
    color: #1b6ec2;
}

.clubSession-toolbar-tabs .nav-link.active[b-l9cvewerkd] {
    background: linear-gradient(180deg, #5f85ad 0%, #4f749a 100%);
    color: #f4f8fc;
    border-color: #436a90;
    border-bottom-color: #d2dbe7;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.clubSession-toolbar-tabs .nav-link.active .tab-icon[b-l9cvewerkd] {
    filter: brightness(1.12);
}

[b-l9cvewerkd] .courts-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(13rem, 1fr));
    gap: var(--fold-band-gap, 0.45rem);
    margin-bottom: var(--fold-band-gap, 0.45rem);
}

[b-l9cvewerkd] .court-card {
    background: linear-gradient(180deg, #5db061 0%, #4b9a50 100%);
    color: #fff;
    border-radius: 0.85rem;
    border: 1px solid #75b978;
    padding: 0.45rem;
    min-height: var(--fold-court-min, 14.5rem);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

[b-l9cvewerkd] .court-card-empty {
    min-height: var(--fold-court-min, 14.5rem);
}

/* On phones the courts stack vertically, so four full-height empty courts
   eat ~900px before the user reaches Next Game Prep / Auto-pick. Drop empty
   courts to a compact height that still comfortably holds the "Pick and
   Start" button. In-progress courts keep their full size — the actual game
   state is what's worth seeing.
   The .court-empty-actions inner wrapper has its own 11.8rem min-height
   (used to vertically centre the button on desktop's tall cards). That
   wins over .court-card-empty's min-height because the inner element's
   intrinsic size pushes the parent. So we have to flatten BOTH on mobile. */
@media (max-width: 720px) {
    [b-l9cvewerkd] .court-card-empty {
        min-height: 0;
    }

    [b-l9cvewerkd] .court-card-empty .court-empty-actions {
        min-height: 0;
        padding: 0.2rem 0;
    }
}

[b-l9cvewerkd] .court-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

[b-l9cvewerkd] .court-header-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

[b-l9cvewerkd] .court-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f1fbf3;
}

[b-l9cvewerkd] .game-pick-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: #cf2029;
    border: 1px solid #b3161e;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    flex: 0 0 auto;
}

[b-l9cvewerkd] .game-pick-indicator-inline {
    margin-left: 0.3rem;
    vertical-align: middle;
}

[b-l9cvewerkd] .court-actions {
    display: flex;
    gap: 0.3rem;
}

[b-l9cvewerkd] .court-team-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 0.2rem 0.35rem;
    margin-bottom: 0.25rem;
}

[b-l9cvewerkd] .court-team-name {
    font-weight: 600;
    font-size: 0.88rem;
}

[b-l9cvewerkd] .court-member-link {
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

[b-l9cvewerkd] .court-member-link:hover {
    text-decoration: underline;
}

[b-l9cvewerkd] .court-score-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 0.4rem;
    margin: 0.35rem 0;
    font-weight: 700;
    font-size: 0.82rem;
    color: #ecfaee;
}

[b-l9cvewerkd] .court-score-row > span:first-child {
    justify-self: start;
}

[b-l9cvewerkd] .court-score-row > span:last-child {
    justify-self: end;
}

[b-l9cvewerkd] .court-end-btn {
    min-width: 3.4rem;
}

[b-l9cvewerkd] .court-empty-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--fold-court-empty-min, 11.8rem);
}

[b-l9cvewerkd] .clubSession-lower-grid {
    display: grid;
    /* BL-081: Sitting Out narrowed to a single-avatar column (~9rem). The
       freed width goes to Waiting (the busier panel) via its 1.1fr.
       2026-05-25 regression fix: DOM order is Prep / Waiting / Sitting Out /
       Score Entry, so Sitting Out is the THIRD column (9rem) and Score Entry
       is the FOURTH (15.5rem). Previous template had these swapped, which
       squeezed Score Entry into 144px and hid the Save button behind the
       parent's overflow-x: hidden — reported live PROD by Mike. */
    grid-template-columns: minmax(16.5rem, 16.5rem) minmax(15rem, 1.1fr) minmax(9rem, 9rem) minmax(15.5rem, 15.5rem);
    gap: var(--fold-band-gap, 0.45rem);
}

[b-l9cvewerkd] .clubSession-lower-grid-sittingout-collapsed {
    grid-template-columns: minmax(16.5rem, 16.5rem) minmax(15rem, 1.2fr) minmax(17rem, 17rem);
}

[b-l9cvewerkd] .clubSession-lower-grid-no-score {
    /* BL-081: same Sitting Out narrowing as the default grid above. */
    grid-template-columns: minmax(16.5rem, 16.5rem) minmax(15rem, 1.1fr) minmax(9rem, 9rem);
}

[b-l9cvewerkd] .clubSession-lower-grid-no-score.clubSession-lower-grid-sittingout-collapsed {
    grid-template-columns: minmax(16.5rem, 16.5rem) minmax(15rem, 1.1fr);
}

/* #689 (Dunstable): when the single prep stack is inlined into the courts grid's free
   last-row slot (courtCount > 4 && % 4 != 0 && one configured prep panel — see
   PegboardTab), the lower grid loses its first (16.5rem prep) column. Same positional-
   template convention as the BL-081 combos above — the templates minus that first
   column. The no-score + sittingout-collapsed case uses the full THREE-class selector
   so it outranks (not merely ties with) the existing two-class combo rule above; the
   two-class rules below win their ties by source order. */
[b-l9cvewerkd] .clubSession-lower-grid-prep-inline {
    grid-template-columns: minmax(15rem, 1.1fr) minmax(9rem, 9rem) minmax(15.5rem, 15.5rem);
}

[b-l9cvewerkd] .clubSession-lower-grid-prep-inline.clubSession-lower-grid-sittingout-collapsed {
    grid-template-columns: minmax(15rem, 1.2fr) minmax(17rem, 17rem);
}

[b-l9cvewerkd] .clubSession-lower-grid-prep-inline.clubSession-lower-grid-no-score {
    grid-template-columns: minmax(15rem, 1.1fr) minmax(9rem, 9rem);
}

[b-l9cvewerkd] .clubSession-lower-grid-prep-inline.clubSession-lower-grid-no-score.clubSession-lower-grid-sittingout-collapsed {
    grid-template-columns: minmax(15rem, 1.1fr);
}

/* #689 ops-inline: on 5/6-court boards BOTH prep and waiting move into the courts
   grid (>=2 free last-row slots), leaving only Sitting Out / Score Entry down here.
   Same combo/specificity discipline as the prep-inline set above. justify-content
   keeps the two narrow panels left-aligned rather than letting stray tracks stretch. */
[b-l9cvewerkd] .clubSession-lower-grid-ops-inline {
    grid-template-columns: minmax(9rem, 9rem) minmax(15.5rem, 15.5rem);
    justify-content: start;
}

[b-l9cvewerkd] .clubSession-lower-grid-ops-inline.clubSession-lower-grid-sittingout-collapsed {
    grid-template-columns: minmax(17rem, 17rem);
}

[b-l9cvewerkd] .clubSession-lower-grid-ops-inline.clubSession-lower-grid-no-score {
    grid-template-columns: minmax(9rem, 9rem);
}

[b-l9cvewerkd] .clubSession-lower-grid-ops-inline.clubSession-lower-grid-no-score.clubSession-lower-grid-sittingout-collapsed {
    /* Both panels absent AND both surfaces inline: the lower grid is empty. */
    grid-template-columns: 1fr;
}

/* #718: a CHILDLESS lower grid (ops-inline with no pending scores and nobody
   sitting out - the common live 5/6-court shape) still stacked the courts
   grid's bottom margin + the shell padding into ~13px of phantom scroll below
   the last real row. Nothing to show = no band. (:has(*) is element-children
   only, so Blazor comment/whitespace nodes don't defeat it.) */
[b-l9cvewerkd] .clubSession-lower-grid:not(:has(*)) {
    display: none;
}

/* #689: the inlined waiting panel spans the remaining free slots - 2 on a 5-court
   board, 1 (its natural track) on a 6-court board. The span only exists at the
   4-column breakpoint; below 920px the panel takes a full row of whatever column
   count applies (1 / -1 is safe at any track count, unlike span 2 which would
   CREATE an implicit column in a 1-column grid). */
@media (min-width: 920px) {
    [b-l9cvewerkd] .waiting-panel-inline-span2 {
        grid-column: span 2;
    }
}

@media (max-width: 919.98px) {
    [b-l9cvewerkd] .waiting-panel-inline {
        grid-column: 1 / -1;
    }
}

/* #689: inside a court-row slot the waiting panel can be much narrower than in the
   full-width lower grid - let its toolbar wrap instead of clipping (the base toolbar
   only wraps below 780px). */
[b-l9cvewerkd] .waiting-panel-inline .waiting-toolbar {
    flex-wrap: wrap;
}

/* #689: cap the inlined waiting panel's queue so a LONG queue scrolls inside the
   panel instead of growing the shared court row past the fold (probe: 14 waiting at
   the 1280x853 effective viewport pushed the row to 449px and re-broke the fold).
   The front of the queue - the next-up players the operator works from - is always
   visible; deeper positions scroll. 12.5rem keeps the panel at roughly the prep
   panel's height, which drives the row anyway. */
[b-l9cvewerkd] .waiting-panel-inline .waiting-member-list {
    max-height: var(--fold-waiting-cap, 12.5rem);
    overflow-y: auto;
}

[b-l9cvewerkd] .clubSession-panel {
    background: #edf3fa;
    border: 1px solid #b9c9da;
    border-radius: 0.75rem;
    padding: var(--fold-panel-pad, 0.6rem);
    min-width: 0;
}

[b-l9cvewerkd] .clubSession-panel h2 {
    margin: 0 0 0.45rem;
    color: #355775;
    font-size: 0.98rem;
    font-weight: 700;
}

/* Prep panels: soft amber wash so "next game being assembled" reads as
   in-progress (traffic-light amber), visually distinct from the pale-blue
   Waiting Members / Sitting Out panels. */
[b-l9cvewerkd] .clubSession-panel.clubSession-panel-prep {
    background: #fff8e1;
    border-color: #e9c46a;
}

[b-l9cvewerkd] .clubSession-panel.clubSession-panel-prep h2 {
    color: #7a5a1f;
}

[b-l9cvewerkd] .clubSession-panel-prep .prep-slot {
    background: #fffbeb;
    border-color: #e6cf90;
}

[b-l9cvewerkd] .clubSession-panel-prep .prep-slot-empty {
    background: #fff3c4;
}

[b-l9cvewerkd] .clubSession-panel-prep .prep-par-score {
    color: #7a5a1f;
}

[b-l9cvewerkd] .prep-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

[b-l9cvewerkd] .prep-panel-title {
    margin: 0;
}

[b-l9cvewerkd] .prep-title-info-btn {
    margin-left: auto;
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #9fb3c7;
    border-radius: 999px;
    background: #f7fbff;
    color: #4a6a88;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

[b-l9cvewerkd] .prep-title-info-btn:hover:not(:disabled) {
    background: #e7f1fb;
    border-color: #7f9fbe;
    color: #2f5170;
}

[b-l9cvewerkd] .prep-title-info-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.18rem rgba(74, 106, 136, 0.2);
}

[b-l9cvewerkd] .prep-title-info-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

[b-l9cvewerkd] .prep-title-info-btn.no-suggestion {
    opacity: 0.25;
    border-color: transparent;
    background: transparent;
    color: #9fb3c7;
}

[b-l9cvewerkd] .prep-title-info-btn.has-suggestion {
    background: #e7f1fb;
    border-color: #5b8db8;
    color: #2f5170;
    box-shadow: 0 0 0 0.12rem rgba(91, 141, 184, 0.25);
}

[b-l9cvewerkd] .clubSession-panel-wide {
    min-width: 0;
}

[b-l9cvewerkd] .prep-panel-stack {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    min-width: 0;
}

[b-l9cvewerkd] .prep-layout {
    display: grid;
    gap: var(--fold-prep-gap, 0.35rem);
}

[b-l9cvewerkd] .prep-slot {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: var(--fold-prep-slot-min, 2.3rem);
    border-radius: 1.2rem;
    border: 1px solid #b8c9db;
    background: #f7fbff;
    padding: 0.18rem 0.32rem;
    overflow: hidden;
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

[b-l9cvewerkd] .prep-slot-empty {
    border-style: dashed;
    background: #eff5fb;
}

[b-l9cvewerkd] .prep-slot-interactive {
    cursor: pointer;
}

[b-l9cvewerkd] .prep-slot .prep-chip {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.12rem 0.2rem;
}

[b-l9cvewerkd] .prep-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.35rem;
}

[b-l9cvewerkd] .prep-divider-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

[b-l9cvewerkd] .prep-divider-actions-left {
    justify-self: start;
}

[b-l9cvewerkd] .prep-divider-actions-right {
    justify-self: end;
}

[b-l9cvewerkd] .prep-par-score {
    justify-self: center;
    color: #355775;
    font-size: 0.8rem;
    font-weight: 700;
}

[b-l9cvewerkd] .prep-btn {
    min-width: 6.5rem;
}

/* #718 tier 3 swaps Auto-pick's label for the short form; hidden elsewhere. */
[b-l9cvewerkd] .prep-btn-label-short {
    display: none;
}

[b-l9cvewerkd] .prep-discipline-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}

[b-l9cvewerkd] .prep-discipline-chip {
    padding: 0.15rem 0.65rem;
    font-size: 0.78rem;
    line-height: 1.1;
}

[b-l9cvewerkd] .prep-discipline-chip.is-active {
    box-shadow: 0 0 0 1px rgba(53, 87, 117, 0.35) inset;
}

[b-l9cvewerkd] .prep-discipline-infeasible {
    margin: 0.15rem 0 0.25rem;
    color: #b32d2e;
    font-size: 0.78rem;
    line-height: 1.2;
}

[b-l9cvewerkd] .chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

[b-l9cvewerkd] .waiting-member-list {
    min-height: 4.25rem;
    border-radius: 0.6rem;
    padding: 0.2rem;
}

[b-l9cvewerkd] .sittingout-panel-compact {
    padding: 0.45rem;
    align-content: center;
    width: 100%;
    max-width: 6.75rem;
    justify-self: end;
}

[b-l9cvewerkd] .sittingout-empty-state {
    min-height: 4.1rem;
    border: 1px dashed #9cb6ce;
    border-radius: 0.6rem;
    background: #f3f8fd;
    color: #4c6781;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.3rem;
}

[b-l9cvewerkd] .prep-chip,
[b-l9cvewerkd] .waiting-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.22rem 0.5rem;
    border: 1px solid #a8bcd0;
    background: #f7fbff;
    color: #32516d;
    font-size: 0.82rem;
    font-weight: 600;
}

[b-l9cvewerkd] .prep-chip-empty {
    color: #67839d;
    background: transparent;
    border: none;
    font-weight: 600;
}

/* #475: the empty-slot prompt is a button (it opens the assignable-players dropdown when nothing
   is armed). Strip button chrome so it reads as the plain prompt text it replaced, full-width and
   left-aligned to fill the slot, with a pointer affordance. */
[b-l9cvewerkd] .prep-chip-empty-btn {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    padding: 0.12rem 0.2rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

[b-l9cvewerkd] .prep-player-name.locked {
    font-style: normal;
    font-weight: 700;
}

[b-l9cvewerkd] .prep-player-name.unlocked {
    font-style: italic;
    font-weight: 500;
}

[b-l9cvewerkd] .prep-player-link {
    border: none;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
    cursor: pointer;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-l9cvewerkd] .prep-player-link:hover {
    text-decoration: underline;
}

/* #460: one-action substitute dropdown — large touch rows for tablet/kiosk use,
   anchored to the clicked slot, styled to the prep panel's visual language.
   UAT (#460): rendered position:fixed and JS-positioned via
   clubSessionDashboard.positionPopover (the same viewport-aware positioner the
   score-entry popover uses), so it auto-flips ABOVE when a low slot has no room
   below and pins-with-internal-scroll when neither side fits — instead of the old
   position:absolute that ran off the bottom of the viewport for low slots.
   visibility:hidden by default so it never flashes at the wrong coordinates before
   the positioner runs; positionPopover flips it to visible. max-height + overflow-y
   make the pin-and-scroll fallback (and any long replacement list) scroll internally. */
[b-l9cvewerkd] .prep-sub-dropdown {
    position: fixed;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1200;
    width: 14rem;
    max-width: calc(100vw - 16px);
    max-height: 16rem;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #9fb3c7;
    border-radius: 0.7rem;
    box-shadow: 0 0.5rem 1.1rem rgba(33, 58, 83, 0.22);
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

[b-l9cvewerkd] .prep-sub-heading {
    padding: 0.2rem 0.5rem 0.1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6a8298;
}

[b-l9cvewerkd] .prep-sub-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.6rem;
    padding: 0.3rem 0.5rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #2f5170;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

[b-l9cvewerkd] .prep-sub-item:hover,
[b-l9cvewerkd] .prep-sub-item:focus-visible {
    background: #e7f1fb;
    outline: none;
}

[b-l9cvewerkd] .prep-sub-item-profile {
    border-bottom: 1px solid #e2eaf2;
    border-radius: 0.5rem 0.5rem 0 0;
    color: #4a6a88;
}

[b-l9cvewerkd] .prep-sub-item-icon {
    width: 1.9rem;
    text-align: center;
    font-size: 1.05rem;
}

[b-l9cvewerkd] .prep-sub-item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-l9cvewerkd] .prep-sub-empty {
    padding: 0.5rem 0.6rem;
    color: #6a8298;
    font-size: 0.82rem;
    font-weight: 600;
}

[b-l9cvewerkd] .prep-lock-indicator {
    width: 1.65rem;
    height: 1.65rem;
    min-width: 1.65rem;
    min-height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 700;
    color: #1f3f5b;
    border: 1px solid #7fa5c5;
    border-radius: 999px;
    padding: 0;
    background: #eef5fc;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

[b-l9cvewerkd] .prep-lock-indicator:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(16, 48, 74, 0.18);
}

[b-l9cvewerkd] .prep-lock-indicator:focus-visible {
    outline: 2px solid #2f7cc1;
    outline-offset: 1px;
}

[b-l9cvewerkd] .prep-lock-indicator.is-locked {
    background: #c9def2;
    border-color: #567da2;
    color: #103450;
}

[b-l9cvewerkd] .prep-lock-indicator.is-unlocked {
    background: #ffffff;
    border-color: #8db0cf;
    color: #456a8c;
}

[b-l9cvewerkd] .prep-lock-indicator:disabled {
    opacity: 0.45;
    cursor: default;
}

[b-l9cvewerkd] .prep-slot-remove-btn {
    width: 1.45rem;
    height: 1.45rem;
    min-width: 1.45rem;
    min-height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.25rem;
    padding: 0;
    line-height: 1;
    font-size: 1.05rem;
    font-weight: 600;
    color: #6c2828;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

[b-l9cvewerkd] .prep-slot-remove-btn:hover:not(:disabled),
[b-l9cvewerkd] .prep-slot-remove-btn:focus-visible {
    background: #fbe4e4;
    border-color: #e0a3a3;
    outline: none;
}

[b-l9cvewerkd] .prep-slot-remove-btn:disabled {
    opacity: 0.35;
    cursor: default;
}


[b-l9cvewerkd] .waiting-chip.gender-male,
[b-l9cvewerkd] .prep-chip.gender-male,
[b-l9cvewerkd] .court-team-row.gender-male {
    background: #dfeeff;
    border-color: #8fb6e0;
    color: #1f4b76;
}

[b-l9cvewerkd] .waiting-chip.gender-female,
[b-l9cvewerkd] .prep-chip.gender-female,
[b-l9cvewerkd] .court-team-row.gender-female {
    background: #ffe4f3;
    border-color: #e3a4c7;
    color: #6f2950;
}

[b-l9cvewerkd] .player-avatar.gender-male {
    background: #2f78c5;
}

[b-l9cvewerkd] .player-avatar.gender-female {
    background: #cc5b98;
}

[b-l9cvewerkd] .waiting-chip-btn {
    cursor: pointer;
}

[b-l9cvewerkd] .waiting-chip-btn.selected {
    border-color: #355775;
    color: #18344e;
    box-shadow: inset 0 0 0 2px rgba(24, 52, 78, 0.28), 0 0 0 3px rgba(79, 116, 154, 0.18);
}

[b-l9cvewerkd] .waiting-chip-btn.gender-male.selected {
    background: #cfe5ff;
    border-color: #2f6eaa;
    color: #173c61;
}

[b-l9cvewerkd] .waiting-chip-btn.gender-female.selected {
    background: #ffd7eb;
    border-color: #b85f8f;
    color: #5d2344;
}

[b-l9cvewerkd] .waiting-chip-muted {
    opacity: 0.62;
    filter: saturate(0.6);
}

/* #306: 1-based queue-position badge, rendered as the first child of each waiting
   chip (to the LEFT of the avatar/name) like a traditional pegboard peg number.
   Deliberately subordinate to the name - a small, neutral circular lozenge so it
   reads as an ordinal marker, not a highlight. Sits a touch smaller than the
   avatar; the chip's own flex gap spaces it from the avatar. */
[b-l9cvewerkd] .waiting-chip-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: #e7eef6;
    border: 1px solid #c2d0df;
    /* #445c77 on the #e7eef6 badge background = ~5.9:1, clears WCAG AA (4.5:1)
       for this small/bold ordinal even on a glare-prone kiosk panel. */
    color: #445c77;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

[b-l9cvewerkd] .waiting-status-tag {
    margin-left: 0.1rem;
    border: 1px solid #b3c1cf;
    border-radius: 999px;
    background: #eef3f8;
    color: #587088;
    font-size: 0.68rem;
    line-height: 1;
    padding: 0.13rem 0.35rem;
    font-weight: 700;
}

/* #600 slice 2: the "held" tag on a muted waiting chip for a member held for a special
   request. Recoloured to the sticky/lock blue so "held for a request" reads as the same
   intent-object blue as a sticky pair, distinct from the neutral in-prep tag. */
[b-l9cvewerkd] .waiting-status-tag-held {
    border-color: #8fb6e0;
    background: #eaf3fc;
    color: #1f4b76;
}

/* S2 (#67): the combined sticky-pair pill in the live waiting queue. A designated,
   both-present sticky pair shows as ONE pill — two overlapping avatars + a link
   glyph + both names + the single (later-member) queue-position number — so it
   reads as "these two go together". Display-only; managed in Session settings.
   Palette mirrors the sticky/lock blue used on the court lock badge + the mockup
   (#eaf3fc bg / #8fb6e0 border / #1f4b76 ink). Inherits .waiting-chip's flex shell. */
[b-l9cvewerkd] .waiting-chip-sticky {
    background: #eaf3fc;
    border-color: #8fb6e0;
    color: #1f4b76;
    cursor: default;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

[b-l9cvewerkd] .waiting-chip-duo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* overlap the two avatars and let the link glyph sit between them */
[b-l9cvewerkd] .waiting-chip-duo .player-avatar,
[b-l9cvewerkd] .waiting-chip-duo .player-avatar-image {
    border: 2px solid #eaf3fc;
    margin-left: -0.4rem;
}

[b-l9cvewerkd] .waiting-chip-duo .player-avatar:first-child,
[b-l9cvewerkd] .waiting-chip-duo .player-avatar-image:first-child {
    margin-left: 0;
}

[b-l9cvewerkd] .waiting-chip-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #8fb6e0;
    color: #1f4b76;
    font-size: 0.58rem;
    line-height: 1;
    margin: 0 -0.35rem;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}

[b-l9cvewerkd] .waiting-chip-sticky-names {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.12;
    margin-left: 0.15rem;
}

[b-l9cvewerkd] .waiting-chip-sticky-names b {
    font-weight: 700;
}

[b-l9cvewerkd] .waiting-chip-sticky-names small {
    font-weight: 500;
    color: #3f6184;
    font-size: 0.66rem;
}

/* #600 slice 4b: the combined linked-four pill. Shares the sticky pill's entire class
   family (.waiting-chip-sticky / -duo / -link / -sticky-names) - this modifier only adds
   the "one game" distinction so an operator never mistakes a linked FOUR (a one-shot
   "these four play together as one game" request) for a sticky PAIR (a persistent
   teammate bias). The distinction is deliberately subtle - a stronger left accent bar in
   the same sticky/lock blue + a tighter overlap for the extra avatars - so it reads as
   the same intent-object family, not a new brand. The sub-label ("linked four · plays
   together") carries the plain-English confirmation. */
[b-l9cvewerkd] .waiting-chip-linked-pill {
    border-left: 3px solid #1f4b76;
    padding-left: 0.4rem;
}

/* Four avatars need a slightly deeper overlap than two so the cluster stays compact on
   the kiosk board; the sticky pair keeps its -0.4rem. */
[b-l9cvewerkd] .waiting-chip-linked-pill .waiting-chip-duo .player-avatar,
[b-l9cvewerkd] .waiting-chip-linked-pill .waiting-chip-duo .player-avatar-image {
    margin-left: -0.55rem;
}

[b-l9cvewerkd] .waiting-chip-linked-pill .waiting-chip-duo .player-avatar:first-child,
[b-l9cvewerkd] .waiting-chip-linked-pill .waiting-chip-duo .player-avatar-image:first-child {
    margin-left: 0;
}

[b-l9cvewerkd] .waiting-toolbar {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    align-items: flex-start;
}

[b-l9cvewerkd] .waiting-toolbar input {
    min-width: 0;
}

[b-l9cvewerkd] .waiting-checkin-search {
    flex: 1 1 16rem;
    max-width: 20rem;
}

[b-l9cvewerkd] .checkin-autocomplete {
    position: relative;
    flex: 1 1 16rem;
    max-width: 20rem;
    min-width: 0;
}

[b-l9cvewerkd] .checkin-autocomplete .waiting-checkin-search {
    flex: none;
    max-width: none;
    width: 100%;
}

[b-l9cvewerkd] .checkin-autocomplete-list {
    position: absolute;
    top: calc(100% + 0.15rem);
    left: 0;
    right: 0;
    z-index: 1400;
    margin: 0;
    padding: 0.15rem;
    list-style: none;
    background: #ffffff;
    border: 1px solid #b3c6da;
    border-radius: 0.4rem;
    box-shadow: 0 6px 14px rgba(17, 35, 53, 0.18);
    max-height: 20rem;
    overflow-y: auto;
}

[b-l9cvewerkd] .checkin-autocomplete-item {
    padding: 0.55rem 0.7rem;
    border-radius: 0.3rem;
    color: #24384f;
    font-size: 0.95rem;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
}

[b-l9cvewerkd] .checkin-autocomplete-item:hover,
[b-l9cvewerkd] .checkin-autocomplete-item.highlighted {
    background: #e7f0fa;
    color: #0d2c55;
}

[b-l9cvewerkd] .checkin-autocomplete-match {
    font-weight: 700;
    color: inherit;
}

[b-l9cvewerkd] .checkin-autocomplete-empty {
    position: absolute;
    top: calc(100% + 0.15rem);
    left: 0;
    right: 0;
    z-index: 1400;
    padding: 0.5rem 0.7rem;
    background: #fff8e6;
    border: 1px solid #e8d79b;
    border-radius: 0.4rem;
    color: #6d5920;
    font-size: 0.88rem;
    box-shadow: 0 6px 14px rgba(17, 35, 53, 0.1);
}

[b-l9cvewerkd] .checkin-autocomplete-empty em {
    font-style: normal;
    font-weight: 700;
}

[b-l9cvewerkd] .quick-guest-name-input {
    max-width: 20rem;
}

[b-l9cvewerkd] .quick-guest-rating-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

[b-l9cvewerkd] .attendee-name-link {
    border: none;
    background: transparent;
    color: #274a68;
    padding: 0;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

[b-l9cvewerkd] .attendee-name-link:hover {
    text-decoration: underline;
}

[b-l9cvewerkd] .player-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    background: rgba(34, 72, 103, 0.85);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
[b-l9cvewerkd] .player-avatar-image {
    object-fit: cover;
    border: 1px solid rgba(31, 43, 56, 0.16);
    background: #fff;
}

/* Waiting-queue chips show meaningfully-sized photos so members are
   recognisable at a glance. Prep slots and court tiles keep the
   smaller default for now. Phone viewports shrink slightly so the
   waiting list stays compact when vertical space matters. */
[b-l9cvewerkd] .waiting-chip .player-avatar,
[b-l9cvewerkd] .waiting-chip .player-avatar-image {
    width: 2rem;
    height: 2rem;
    font-size: 0.85rem;
}

@media (max-width: 720px) {
    [b-l9cvewerkd] .waiting-chip .player-avatar,
    [b-l9cvewerkd] .waiting-chip .player-avatar-image {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.72rem;
    }
}

[b-l9cvewerkd] .pending-score-card {
    border: 1px solid #c0cfdd;
    border-radius: 0.6rem;
    padding: 0.5rem;
    background: #f8fbff;
}

[b-l9cvewerkd] .pending-score-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[b-l9cvewerkd] .pending-score-list {
    display: grid;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0.2rem;
}

[b-l9cvewerkd] .pending-score-head {
    color: #355775;
    font-weight: 700;
    margin-bottom: 0.35rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

/* #260: pre-game par hint on the score-entry card. */
[b-l9cvewerkd] .pending-score-par {
    color: #60778f;
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
}

[b-l9cvewerkd] .pending-score-row {
    display: grid;
    grid-template-columns: 1fr 4rem;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
    font-size: 0.84rem;
}

[b-l9cvewerkd] .pending-score-input {
    width: 100%;
    justify-content: center;
    text-align: center;
    /* #277: 2.75rem ~= 44px, a comfortable touch target (was 2rem/32px). */
    min-height: 2.75rem;
    border: 2px solid #9fb7cf;
    background: #f2f8ff;
    color: #2d4f6d;
    font-weight: 700;
    font-size: 1.05rem;
}

[b-l9cvewerkd] .pending-score-input-auto {
    background: #fff0bd;
    border-color: #e3c56f;
    color: #664b00;
}

[b-l9cvewerkd] .pending-score-input-empty {
    border-style: dashed;
    border-color: #6f93b8;
    background: #eaf3fc;
    color: #4d7093;
    font-weight: 600;
}

[b-l9cvewerkd] .quick-score-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.35rem;
}

/* #61/#155 v5 score-entry grid CSS moved to the shared ScoreEntryGrid.razor.css component
   (LR-3): the popover markup now lives in that component, so its scoped stylesheet owns the
   .score-combo-backdrop / .score-combo-popover / .score-grid / .score-combo-chip /
   .score-grid-chip-common / .score-grid-chip-pending / .score-grid-typeahead rules + the
   600px media query. Removed from here so there's one source of truth. */

/* #277: club kiosks run on tablets (touch / coarse pointer). Above the phone
   breakpoint there's room to make score entry comfortably finger-sized, so bump
   the tap-to-enter button, the score column width, and the number-grid chips. */
/* #277: enlarge for touch entry. Use any-pointer:coarse, not pointer:coarse -
   a touchscreen laptop's PRIMARY pointer is its trackpad (pointer:fine), so
   pointer:coarse missed it; any-pointer:coarse catches any touch-capable device
   (tablets and touch laptops) while leaving mouse-only desktops alone. */
@media (any-pointer: coarse) and (min-width: 601px) {
    [b-l9cvewerkd] .pending-score-row {
        grid-template-columns: 1fr 5.5rem;
        font-size: 0.95rem;
    }

    /* The displayed score reads big enough without dominating the panel - keep a
       comfortable tap height but a restrained numeral. */
    [b-l9cvewerkd] .pending-score-input {
        min-height: 3rem;
        font-size: 1.15rem;
    }

    /* LR-33: the grid-element touch-enlargement (.score-grid columns/gap,
       .score-combo-chip min-height/font-size, .score-combo-popover width/padding)
       was RELOCATED into ScoreEntryGrid.razor.css with ::deep dropped. The base grid
       rules were extracted into that shared component (LR-3) but this enlargement was
       left here as ::deep - equal specificity + later-in-bundle meant the shared
       component's base 44px chip defeated this 64px override, silently shrinking the
       SESSION score chips on touch/coarse-pointer kiosks. Moving the override into the
       grid's own scope makes it win the cascade for every consumer (session +
       competition). The non-grid pending-row rules below stay here (session-owned). */

    /* Save matches the width of the score column above it (no min-height: it
       keeps the standard btn-sm height like the other dashboard buttons, and a
       taller Save would stretch Reactivate/Void with it via the flex row). */
    [b-l9cvewerkd] .pending-score-save {
        min-width: 5.5rem;
    }
}

[b-l9cvewerkd] .panel-actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.45rem;
    /* Wrap when the action row's content exceeds the panel width. Without
       wrap, the Save button (which has margin-left: auto to pin it to the
       right edge of the pending-score card) gets clipped silently by the
       parent .pending-score-list overflow-x: hidden. Reported live PROD
       2026-05-25 by Mike: Reactivate visible + half of Void + Save missing
       → couldn't save the score until browser-zoom workaround. */
    flex-wrap: wrap;
}

[b-l9cvewerkd] .prep-panel-actions {
    justify-content: center;
}

/* Save sits at the right edge of the pending-score card, aligned under
   the score buttons, so finger travel from "just tapped a score" to
   "tap Save" is minimal. Reactivate + Void stay grouped on the left. */
[b-l9cvewerkd] .pending-score-save {
    margin-left: auto;
}

/* Was max-width: 1250px before the sidebar became a hamburger overlay below
   1280px. Now that overlay-mode reclaims ~250px of content width, 4-in-a-row
   fits comfortably down to ~920px viewport. Below that the courts grid still
   falls back to 2x2 because four 13rem cards (~853px) don't fit. */
@media (max-width: 919.98px) {
    [b-l9cvewerkd] .courts-grid {
        grid-template-columns: repeat(2, minmax(13rem, 1fr));
    }

    /* BL-059 (re-opened 2026-04-26 v2): below 920px, stack the lower section
       to a single column for ALL variants — INCLUDING the combined
       no-score+sittingout-collapsed class which has higher specificity than
       the single-class rules and was winning the cascade. Stacking puts
       prep first, waiting second, sitting third, score fourth — no
       horizontal scroll, waiting members visible on first paint. */
    [b-l9cvewerkd] .clubSession-lower-grid,
    [b-l9cvewerkd] .clubSession-lower-grid-no-score,
    [b-l9cvewerkd] .clubSession-lower-grid-sittingout-collapsed,
    [b-l9cvewerkd] .clubSession-lower-grid-no-score.clubSession-lower-grid-sittingout-collapsed,
    /* #689: the prep-inline combos must be listed at matching (or higher) specificity
       too — media queries add none, so the desktop 2/3-class prep-inline templates
       would otherwise defeat this stacking below 920px. */
    [b-l9cvewerkd] .clubSession-lower-grid-prep-inline,
    [b-l9cvewerkd] .clubSession-lower-grid-prep-inline.clubSession-lower-grid-no-score,
    [b-l9cvewerkd] .clubSession-lower-grid-prep-inline.clubSession-lower-grid-sittingout-collapsed,
    [b-l9cvewerkd] .clubSession-lower-grid-prep-inline.clubSession-lower-grid-no-score.clubSession-lower-grid-sittingout-collapsed,
    [b-l9cvewerkd] .clubSession-lower-grid-ops-inline,
    [b-l9cvewerkd] .clubSession-lower-grid-ops-inline.clubSession-lower-grid-no-score,
    [b-l9cvewerkd] .clubSession-lower-grid-ops-inline.clubSession-lower-grid-sittingout-collapsed,
    [b-l9cvewerkd] .clubSession-lower-grid-ops-inline.clubSession-lower-grid-no-score.clubSession-lower-grid-sittingout-collapsed {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 780px) {
    .clubSession-kiosk-top[b-l9cvewerkd] {
        flex-wrap: wrap;
    }

    [b-l9cvewerkd] .courts-grid,
    [b-l9cvewerkd] .clubSession-lower-grid {
        grid-template-columns: 1fr;
    }

    [b-l9cvewerkd] .waiting-toolbar {
        flex-wrap: wrap;
    }

    /* BL-059: belt-and-braces guard against horizontal scroll on the
       waiting-members panel at narrow viewports — chips wrap, anything that
       still overflows is clipped within the panel rather than pushing the
       page wider. */
    [b-l9cvewerkd] .clubSession-panel,
    [b-l9cvewerkd] .clubSession-panel-wide {
        max-width: 100%;
        overflow-x: hidden;
    }

    [b-l9cvewerkd] .waiting-member-list,
    [b-l9cvewerkd] .chip-list {
        max-width: 100%;
    }

    [b-l9cvewerkd] .waiting-chip {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* #600 slice 3 (inline card-action-row): at the kiosk breakpoint, stack the action
       buttons BELOW the players (their pre-slice-3 behaviour) so nothing crowds the
       players on a narrow tablet. Restores the row's own top margin between players and
       actions. Same 780px break the lower grid + toolbar already collapse at. */
    [b-l9cvewerkd] .special-request-card-body {
        flex-direction: column;
        align-items: stretch;
    }

    [b-l9cvewerkd] .special-request-card-body > .special-request-card-actions {
        margin-left: 0;
        margin-top: 0.45rem;
    }
}

.end-session-trigger[b-l9cvewerkd] {
    margin-left: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.end-session-icon[b-l9cvewerkd] {
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
}

.end-session-modal-backdrop[b-l9cvewerkd] {
    position: fixed;
    inset: 0;
    background: rgba(18, 30, 44, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2200;
}

.end-session-modal[b-l9cvewerkd] {
    width: min(480px, 94vw);
    background: #ffffff;
    border: 1px solid #c8d4e2;
    border-radius: 0.75rem;
    box-shadow: 0 16px 36px rgba(21, 43, 68, 0.3);
    padding: 1.1rem 1.2rem 1rem;
}

.end-session-modal h2[b-l9cvewerkd] {
    margin: 0 0 0.6rem;
    color: #0d2c55;
    font-size: 1.15rem;
}

.end-session-actions[b-l9cvewerkd] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* #60: admin's optional rating of the night on the end-session modal. */
.session-rating[b-l9cvewerkd] {
    margin-bottom: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e6edf5;
}

/* #749: the per-session ratings-columns choice on the end-session confirm modal. Kept
   compact (one row) so the modal stays one-screen on kiosk viewports. */
.end-session-report-options[b-l9cvewerkd] {
    margin-bottom: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e6edf5;
}

.end-session-report-options-label[b-l9cvewerkd] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.88rem;
    color: #345674;
    cursor: pointer;
}

.end-session-report-options-label input[b-l9cvewerkd] {
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

.session-rating-intro[b-l9cvewerkd] {
    margin: 0 0 0.6rem;
    font-size: 0.88rem;
    color: #557693;
    line-height: 1.35;
}

.session-rating-label[b-l9cvewerkd] {
    display: block;
    font-weight: 600;
    color: #2e4f6d;
    margin-bottom: 0.35rem;
}

.session-rating-optional[b-l9cvewerkd] {
    font-weight: 400;
    color: #7a8897;
}

.session-rating-stars[b-l9cvewerkd] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.5rem;
}

.session-rating-star[b-l9cvewerkd] {
    border: none;
    background: transparent;
    padding: 0 0.1rem;
    font-size: 1.7rem;
    line-height: 1;
    color: #cdd5df;
    cursor: pointer;
}

.session-rating-star-on[b-l9cvewerkd] {
    color: #f1b445;
}

.session-rating-star:hover:not(:disabled)[b-l9cvewerkd] {
    color: #f1b445;
}

.session-rating-clear[b-l9cvewerkd] {
    border: none;
    background: transparent;
    color: #557693;
    font-size: 0.82rem;
    margin-left: 0.4rem;
    cursor: pointer;
    text-decoration: underline;
}

.session-rating-comment[b-l9cvewerkd] {
    resize: vertical;
}

/* #549: Special Requests panel - operator-authored saved match-ups + hold/release.
   Reuses the shared .clubSession-panel / .panel-actions / .player-avatar / .gender-*
   classes; only the special-request-specific layout is defined here. */
[b-l9cvewerkd] .special-requests-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* #600 slice 1: the "Add Special Request" toolbar button is a different KIND of action from the
   Check In / Quick Guest / Bulk Add trio (it composes a saved record, it checks no-one in), so it
   is pushed to the right edge of the .waiting-toolbar flex row. On the <=780px tablet breakpoint
   the toolbar wraps (rule above), so it drops to its own line - still reads as separated. */
[b-l9cvewerkd] .special-request-add-btn {
    margin-left: auto;
}

/* #600 slice 1: progressive-disclosure list pane, rendered as a FULL-WIDTH strip BELOW the
   .clubSession-lower-grid (outside the fragile 4-column grid - BL-081). Shown only when >=1
   request exists. A request card is wide content that suits a full-width row. */
[b-l9cvewerkd] .special-requests-strip {
    margin-top: 0.45rem;
}

[b-l9cvewerkd] .special-requests-strip .special-requests-panel {
    width: 100%;
}

[b-l9cvewerkd] .special-requests-empty {
    color: #6c7a8c;
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
}

[b-l9cvewerkd] .special-request-compose {
    border: 1px solid #e6ebf3;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: #f8fafc;
}

[b-l9cvewerkd] .special-request-compose-hint {
    font-size: 0.85rem;
    color: #6c7a8c;
    margin: 0 0 0.5rem;
}

[b-l9cvewerkd] .special-request-compose-teams {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

[b-l9cvewerkd] .special-request-compose-team {
    flex: 1 1 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

[b-l9cvewerkd] .special-request-compose-team-label {
    font-weight: 600;
    color: #1f3f5e;
    font-size: 0.85rem;
}

[b-l9cvewerkd] .special-request-label-input {
    margin-top: 0.6rem;
}

[b-l9cvewerkd] .special-request-compose-warn {
    color: #8a5a00;
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

[b-l9cvewerkd] .special-request-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

[b-l9cvewerkd] .special-request-card {
    border: 1px solid #e6ebf3;
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
}

/* #600 slice 3 (inline card-action-row, Mike 2026-07-01): on tablet/desktop the action
   buttons sit on the SAME row as the players, to the right of the team/player block, to
   save vertical space. The teams block takes the remaining width (and wraps its own chips
   internally); the actions block is pinned right and does not wrap onto its own line here.
   At the 780px kiosk breakpoint (below) this switches to a column so the buttons stack
   below the players. The blocked/held captions stay full-width siblings AFTER this body. */
[b-l9cvewerkd] .special-request-card-body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[b-l9cvewerkd] .special-request-card-body > .special-request-card-teams {
    flex: 1 1 auto;
    min-width: 0;
}

[b-l9cvewerkd] .special-request-card-body > .special-request-card-actions {
    flex: 0 0 auto;
    margin-left: auto;
    margin-top: 0;
}

/* #600 slice 2 (held-state visuals): the card header row holds the label on the left and the
   card-level "Held" badge flush-right. Present whenever there is a label OR the card is held. */
[b-l9cvewerkd] .special-request-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

[b-l9cvewerkd] .special-request-card-label {
    font-weight: 600;
    color: #1f3f5e;
}

/* #600 slice 2 (held-state visuals): card-level "Held" badge, pushed to the right edge of the
   header. Sticky/lock blue palette (matches the held chip tag + sticky pill) so "held for a
   request" reads as the same intent-object blue across the board. */
[b-l9cvewerkd] .special-request-card-held-badge {
    margin-left: auto;
    border: 1px solid #8fb6e0;
    border-radius: 999px;
    background: #eaf3fc;
    color: #1f4b76;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.18rem 0.5rem;
}

/* #600 slice 2 (held-state visuals): a held card carries a thin sticky/lock-blue left accent so
   the whole card reads as out-of-rotation at a glance, distinct from a plain waiting card. */
[b-l9cvewerkd] .special-request-card.is-held {
    border-color: #8fb6e0;
    box-shadow: inset 0.2rem 0 0 0 #8fb6e0;
}

/* #600 slice 2 (held-state visuals): the held helper line (shown only when the card is held).
   Same sticky/lock-blue ink as the badge, distinct from the amber blocked caption. */
[b-l9cvewerkd] .special-request-card-held-help {
    color: #1f4b76;
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

/* #600 slice 2 (held-state visuals): a held member chip on the card. Sticky/lock-blue outline so
   it reads as held even though a held member is technically startable. */
[b-l9cvewerkd] .special-request-member.is-held {
    border-color: #8fb6e0;
    background: #eaf3fc;
}

[b-l9cvewerkd] .special-request-member.is-held .special-request-member-status {
    color: #1f4b76;
}

/* #600 slice 2 (held-state visuals): the small "Held" group label before the held chips in the
   Waiting Members panel, so held members are locatable at a glance. */
[b-l9cvewerkd] .waiting-held-group-label {
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin-left: 0.15rem;
    color: #1f4b76;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-l9cvewerkd] .special-request-card-teams {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

[b-l9cvewerkd] .special-request-card-team {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

[b-l9cvewerkd] .special-request-card-vs {
    color: #6c7a8c;
    font-weight: 600;
}

[b-l9cvewerkd] .special-request-member {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #e6ebf3;
    border-radius: 1rem;
    background: #fff;
    padding: 0.15rem 0.6rem 0.15rem 0.2rem;
    cursor: pointer;
    font-size: 0.9rem;
}

[b-l9cvewerkd] .special-request-member.is-blocked {
    opacity: 0.65;
}

[b-l9cvewerkd] .special-request-member-status {
    font-size: 0.72rem;
    color: #8a5a00;
    text-transform: lowercase;
}

[b-l9cvewerkd] .special-request-card-blocked {
    color: #8a5a00;
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

/* #756 (EVOLVES #753/#695): the Recap-tab surface — a control strip
   [ Share | Copy link | Open | Include-ratings ] above a same-origin iframe of the public
   recap. Replaces the #753 button-bar container (the actions + the #744 claim-code reveal
   are reused). Same quiet card language as the #695 panel / the supporter aside below (no
   new brand). The revealed claim code REUSES the #430 .clubSession-claim-code chip. */
.clubSession-recap-tab[b-l9cvewerkd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* The control strip: actions on the left, the ratings switch pushed to the right. */
.clubSession-recap-strip[b-l9cvewerkd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
    background: #eef4fa;
    border: 1px solid #d9e6f2;
    border-radius: 0.65rem;
    padding: 0.7rem 0.9rem;
}

.clubSession-recap-strip-actions[b-l9cvewerkd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

/* The include-ratings group sits at the far right on wide layouts, wraps below on narrow. */
.clubSession-recap-ratings[b-l9cvewerkd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
    margin-left: auto;
}

/* The switch itself — a pill toggle mirroring the mockup (on = brand blue, off = grey). */
.clubSession-recap-ratings-switch[b-l9cvewerkd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    background: none;
    padding: 0.15rem 0.1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #16324f;
    cursor: pointer;
}

.clubSession-recap-ratings-switch:disabled[b-l9cvewerkd] {
    opacity: 0.6;
    cursor: default;
}

.clubSession-recap-switch-track[b-l9cvewerkd] {
    position: relative;
    width: 2.6rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #c2cbd4;
    flex: 0 0 auto;
    transition: background 0.15s ease;
}

.clubSession-recap-switch-track[b-l9cvewerkd]::after {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #fff;
    transition: left 0.15s ease;
}

.clubSession-recap-ratings-switch.is-on .clubSession-recap-switch-track[b-l9cvewerkd] {
    background: #1b6ec2;
}

.clubSession-recap-ratings-switch.is-on .clubSession-recap-switch-track[b-l9cvewerkd]::after {
    left: auto;
    right: 0.15rem;
}

.clubSession-recap-ratings-hint[b-l9cvewerkd] {
    font-size: 0.74rem;
    color: #5e748a;
    font-weight: 400;
    max-width: 18rem;
    line-height: 1.35;
}

/* #744-gated claim-code reveal (carried over from #753). In the tab's block layout let the
   label + big code wrap naturally on narrow kiosks. */
.clubSession-recap-code .clubSession-claim-code[b-l9cvewerkd] {
    white-space: normal;
}

.clubSession-recap-code-hint[b-l9cvewerkd] {
    margin: 0.35rem 0 0;
    color: #557693;
    font-size: 0.85rem;
}

/* The iframe of the public recap (?embed=1, same-origin). Height is set by JS
   (pegboardRecapEmbed) to the content height so there is NO nested scrollbar; the min-height
   is just a graceful floor while the first load + measure land. */
.clubSession-recap-iframe-wrap[b-l9cvewerkd] {
    border: 1px solid #cbd5e1;
    border-radius: 0.65rem;
    overflow: hidden;
    background: #fff;
}

.clubSession-recap-iframe[b-l9cvewerkd] {
    display: block;
    width: 100%;
    min-height: 24rem;
    border: 0;
}

.clubSession-recap-unavailable[b-l9cvewerkd] {
    margin: 0;
    color: #557693;
    font-size: 0.9rem;
}

.clubSession-end-panel[b-l9cvewerkd] {
    background: #f6f9fc;
    border: 1px solid rgba(92, 119, 145, 0.25);
    border-radius: 0.65rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.45rem;
}

.clubSession-end-panel-title[b-l9cvewerkd] {
    margin: 0 0 0.2rem;
    color: #345674;
    font-size: 1.05rem;
    font-weight: 700;
}

.clubSession-end-panel-sub[b-l9cvewerkd] {
    margin: 0 0 0.6rem;
    color: #557693;
    font-size: 0.9rem;
}

.clubSession-end-panel-actions[b-l9cvewerkd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.clubSession-end-panel-code[b-l9cvewerkd] {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid #dbe5ef;
}

/* The header chip is nowrap for its inline slot; in the panel's block layout let
   the label + big code wrap naturally on narrow kiosks. */
.clubSession-end-panel-code .clubSession-claim-code[b-l9cvewerkd] {
    white-space: normal;
}

.clubSession-end-panel-code-hint[b-l9cvewerkd] {
    margin: 0.35rem 0 0;
    color: #557693;
    font-size: 0.85rem;
}

/* #749: the per-session report VIEW config (ratings-columns choice) block. Sits below
   the share/claim actions with the same divider treatment as the claim-code block. */
.clubSession-end-panel-report-options[b-l9cvewerkd] {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid #dbe5ef;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.clubSession-end-panel-report-options-state[b-l9cvewerkd] {
    margin: 0;
    color: #557693;
    font-size: 0.85rem;
    flex: 1 1 14rem;
}

/* #583: the post-session "a club night just ended" supporter aside. A quiet, slightly tinted card
   below the ended-session tabs - never a blocker. The inner heading/body/buttons are styled by the
   shared SupporterAsk component; this owns the outer card frame. */
.clubSession-support-card[b-l9cvewerkd] {
    background: #f6f9fc;
    border: 1px solid rgba(92, 119, 145, 0.25);
    border-radius: 0.65rem;
    padding: 1rem;
    margin-top: 0.8rem;
}

/* ═══ #718: cumulative viewport-HEIGHT density tiers ═══════════════════════════
   The dashboard stack (banner + header + tabs + court rows + prep + waiting) is
   structurally taller than common operator viewports (probe 2026-07-04: +44px at
   1280x800, +113px at 1024x768; the 4-court control overflows too because the
   lower-grid waiting list had no height cap). Density comes from DEAD SPACE
   (min-heights, gaps, paddings), never from court typography — operator
   legibility across a sports hall is the product (fonts stay >=0.85rem even at
   tier 3). Tiers are CUMULATIVE: at <=779.98px all three blocks apply, each
   re-declaring the --fold-* scale knobs declared on .clubSession-dashboard-shell
   (they inherit through CSS isolation into the ::deep children).

     tier 0  >=900px   base values above — today's layout, untouched
     tier 1  <=899.98  #696 compact chip (earlier block) + the lower-grid
                       waiting cap below
     tier 2  <=829.98  QR chip -> "QR" tap-button; courts/prep/rhythm shrink
     tier 3  <=779.98  the deliberate degrade tier — tight but still readable */

/* ── tier 1 (<=899.98px): cap the LOWER-GRID waiting list like the #689 inline
   one (the 4-court control's overflow driver — a 14-deep queue grew the panel
   past any budget). Operator boards only (>=920px wide): phones are a scrolling
   form factor and keep natural page flow. The queue FRONT — the players the
   operator works from — stays visible; deep positions scroll inside the panel. */
@media (min-width: 920px) and (max-height: 899.98px) {
    [b-l9cvewerkd] .clubSession-lower-grid .waiting-member-list {
        max-height: var(--fold-waiting-cap, 12.5rem);
        overflow-y: auto;
    }
}

/* ── tier 2 (<=829.98px): dense ── */
@media (max-height: 829.98px) {
    .clubSession-dashboard-shell[b-l9cvewerkd] {
        --fold-court-min: 12.5rem;
        --fold-court-empty-min: 8.5rem;
        --fold-panel-pad: 0.5rem;
        --fold-prep-slot-min: 2.05rem;
        --fold-prep-gap: 0.28rem;
        --fold-band-gap: 0.35rem;
        /* Tuned 9.25rem (design said 10.5): the 6-court board's inline waiting
           panel sits in ONE narrow track where its toolbar wraps ~3 rows tall;
           measured at 1280x800 the row needed the height back (a second quarter
           rem paid for the final design's guaranteed 2.5rem claim button).
           ~3 chip rows stay visible - the queue front the operator works from. */
        --fold-waiting-cap: 9.25rem;
        padding-bottom: 0.5rem;
    }

    .clubSession-kiosk-top[b-l9cvewerkd] {
        margin-bottom: 0.3rem;
        /* The claim button's guaranteed 2.5rem touch target sets the row height;
           trim the row's own vertical padding so the header stays ~46px. */
        padding-top: 0.15rem;
        padding-bottom: 0.15rem;
    }

    /* QR chip -> tiny "QR" tap-button (same button, same data-testid, same
       overlay tap; the aria-label "Show the claim QR code full screen" stays
       accurate — the overlay is now the ONLY scan surface at this height). */
    .clubSession-qr-svg[b-l9cvewerkd] {
        display: none;
    }

    .clubSession-qr-btn-label[b-l9cvewerkd] {
        display: inline-flex;
    }

    .clubSession-toolbar-tabs .nav-link[b-l9cvewerkd] {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* Release the empty court card's OUTER min so the --fold-court-empty-min
       knob on .court-empty-actions governs its height (the phone breakpoint's
       existing move) — otherwise the outer 12.5rem floor defeats the shrink. */
    [b-l9cvewerkd] .court-card-empty {
        min-height: 0;
    }

    [b-l9cvewerkd] .prep-panel-header {
        margin-bottom: 0.3rem;
    }

    [b-l9cvewerkd] .prep-discipline-row {
        padding: 0.12rem 0;
    }

    [b-l9cvewerkd] .clubSession-panel-prep .panel-actions {
        margin-top: 0.3rem;
    }

    [b-l9cvewerkd] .clubSession-panel h2 {
        margin-bottom: 0.3rem;
    }

    [b-l9cvewerkd] .waiting-toolbar {
        margin-bottom: 0.3rem;
    }

    /* UX review: match the waiting-chip rhythm to the prep-slot rhythm so the
       two peer panels read at ONE density (the chips felt crowded next to the
       roomier slots). Text size untouched. */
    [b-l9cvewerkd] .waiting-chip {
        padding: 0.18rem 0.45rem;
    }
}

/* ── tier 3 (<=779.98px): tight — the recorded degrade tier. Paddings tighten a
   touch; type stays at or above 0.85rem. If a cell cannot fit even here, THIS
   rendering is the deliberate compact mode the E2E records — never an
   accidental overflow. ── */
@media (max-height: 779.98px) {
    .clubSession-dashboard-shell[b-l9cvewerkd] {
        --fold-court-min: 10rem;
        --fold-court-empty-min: 6.5rem;
        --fold-panel-pad: 0.45rem;
        --fold-prep-slot-min: 1.9rem;
        --fold-prep-gap: 0.22rem;
        --fold-band-gap: 0.3rem;
        --fold-waiting-cap: 9rem;
    }

    [b-l9cvewerkd] .court-card {
        padding: 0.35rem;
    }

    [b-l9cvewerkd] .court-header {
        margin-bottom: 0.25rem;
    }

    [b-l9cvewerkd] .court-team-row {
        padding: 0.14rem 0.35rem;
        margin-bottom: 0.2rem;
    }

    [b-l9cvewerkd] .clubSession-panel h2 {
        font-size: 0.9rem;
    }

    .clubSession-toolbar-tabs .nav-link[b-l9cvewerkd] {
        font-size: 0.85rem;
    }

    /* In the ~230px court-row tracks of a 1024-wide board the 6.5rem button
       floor makes Auto-pick + Start wrap onto two rows (~36px of dead height in
       the prep panel that drives the whole second court row). A 5.5rem floor
       keeps them side by side. */
    [b-l9cvewerkd] .prep-btn {
        min-width: 5.5rem;
    }

    /* UX review: at this width the full "Auto-pick" label leaves the two action
       buttons flush with no breathing room — swap to the short label (markup
       carries both spans) instead of shrinking the type. */
    [b-l9cvewerkd] .prep-btn .prep-btn-label-full {
        display: none;
    }

    [b-l9cvewerkd] .prep-btn .prep-btn-label-short {
        display: inline;
    }

    /* UX review: the fixed 1.2rem court number visually shouts over the 0.88rem
       team names once the tier-3 card compresses — restore the proportion
       (still sports-hall readable). */
    [b-l9cvewerkd] .court-number {
        font-size: 1.1rem;
    }
}


/* /Components/Pages/ClubSessions.razor.rz.scp.css */
.clubSessions-shell[b-2b62izoy7u] {
    max-width: 70rem;
}

.clubSessions-card[b-2b62izoy7u] {
    border: 1px solid rgba(92, 119, 145, 0.3);
    border-radius: 0.65rem;
    background: #ffffff;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 0.15rem 0.35rem rgba(17, 35, 53, 0.06);
}

.clubSessions-card-header[b-2b62izoy7u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.75rem;
}

.clubSessions-count-hint[b-2b62izoy7u] {
    color: #6c7a8c;
    font-size: 0.88rem;
}

.clubSessions-show-more[b-2b62izoy7u] {
    margin-top: 0.75rem;
    text-align: center;
}

.clubSessions-toolbar[b-2b62izoy7u] {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.clubSessions-help[b-2b62izoy7u] {
    color: #4b5f75;
    font-size: 0.9rem;
}

.clubSession-time-part[b-2b62izoy7u] {
    width: 5.25rem;
}

.clubSession-time-group[b-2b62izoy7u] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.clubSession-time-sep[b-2b62izoy7u] {
    color: #5a6d80;
    font-weight: 600;
}

.clubSession-row[b-2b62izoy7u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(92, 119, 145, 0.2);
}

.clubSession-row:first-of-type[b-2b62izoy7u] {
    border-top: 0;
}

.clubSession-title[b-2b62izoy7u] {
    font-weight: 600;
    color: #1f3d5b;
}

.clubSession-profile[b-2b62izoy7u] {
    color: #38556f;
    font-size: 0.85rem;
}

.clubSession-meta[b-2b62izoy7u] {
    color: #5a6d80;
    font-size: 0.86rem;
}

.clubSession-actions[b-2b62izoy7u] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 700px) {
    /* BL-062 (2026-04-26): keep Live Session action buttons in a single
       horizontal row on mobile rather than stacking. Allow wrap as a fallback
       if they really don't fit. Extra left margin on the destructive Delete
       keeps it thumb-distance from Open. */
    .clubSession-actions[b-2b62izoy7u] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .clubSession-actions > .btn-outline-danger[b-2b62izoy7u] {
        margin-left: 0.4rem;
    }
}

.settings-message[b-2b62izoy7u] {
    color: #38556f;
    font-size: 0.86rem;
    margin-left: 0.5rem;
}

.clubSession-settings-modal-backdrop[b-2b62izoy7u] {
    position: fixed;
    inset: 0;
    background: rgba(14, 24, 36, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1100;
}

.clubSession-settings-modal[b-2b62izoy7u] {
    width: min(68rem, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: #ffffff;
    border: 1px solid rgba(92, 119, 145, 0.35);
    border-radius: 0.75rem;
    box-shadow: 0 1.2rem 2.8rem rgba(14, 24, 36, 0.28);
    padding: 1rem;
}

.clubSession-settings-modal-header[b-2b62izoy7u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.clubSession-settings-modal-header h2[b-2b62izoy7u] {
    margin: 0;
}

.clubSession-settings-modal-subtitle[b-2b62izoy7u] {
    margin-bottom: 0.75rem;
}

.clubSession-settings-modal-body[b-2b62izoy7u] {
    border-top: 1px solid rgba(92, 119, 145, 0.2);
    border-bottom: 1px solid rgba(92, 119, 145, 0.2);
    padding: 0.8rem 0;
}

.clubSession-details-grid[b-2b62izoy7u] {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto auto;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.clubSession-settings-modal-actions[b-2b62izoy7u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.8rem;
}

.clubSession-delete-modal-backdrop[b-2b62izoy7u] {
    position: fixed;
    inset: 0;
    background: rgba(14, 24, 36, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1200;
}

.clubSession-delete-modal[b-2b62izoy7u] {
    width: min(28rem, 100%);
    background: #fff;
    border: 1px solid rgba(92, 119, 145, 0.35);
    border-radius: 0.75rem;
    box-shadow: 0 1rem 2.2rem rgba(14, 24, 36, 0.28);
    padding: 1rem;
}

.clubSession-delete-modal h2[b-2b62izoy7u] {
    margin: 0 0 0.6rem;
    color: #5a1223;
    font-size: 1.2rem;
}

.clubSession-delete-actions[b-2b62izoy7u] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 640.98px) {
    .clubSessions-toolbar[b-2b62izoy7u] {
        grid-template-columns: 1fr;
    }

    .clubSession-row[b-2b62izoy7u] {
        flex-direction: column;
        align-items: flex-start;
    }

    .clubSession-settings-modal-actions[b-2b62izoy7u] {
        flex-wrap: wrap;
    }

    .clubSession-details-grid[b-2b62izoy7u] {
        grid-template-columns: 1fr;
    }
}

/* #583: the voluntary "Support ePegboard" ask. Quiet, slightly tinted so it reads as a gentle
   aside rather than a call-out, with an unobtrusive corner dismiss. Never a blocker. */
.clubSessions-support-card[b-2b62izoy7u] {
    position: relative;
    background: #f6f9fc;
    border-color: rgba(92, 119, 145, 0.25);
}

/* The heading/earned-line/body/buttons styling now lives in SupporterAsk.razor.css (shared across
   surfaces). This host keeps only the outer card tint + the corner dismiss button. */
.clubSessions-support-dismiss[b-2b62izoy7u] {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    border: 0;
    background: transparent;
    color: #6c7a8c;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.15rem 0.4rem;
    cursor: pointer;
    border-radius: 0.35rem;
}

.clubSessions-support-dismiss:hover[b-2b62izoy7u] {
    color: #11212f;
    background: rgba(17, 35, 53, 0.06);
}
/* /Components/Pages/CompetitionCreate.razor.rz.scp.css */
.club-management-shell[b-91o743vxlx] {
    padding: 0;
}

/* Shared off-white panel (defined per-page in scoped CSS, as Members/Settings do)
   so the type-select cards render as tiles. The --selected / --disabled modifiers
   layer on top of this. */
.club-card[b-91o743vxlx] {
    background: #f6f8fb;
    border-radius: 0.2rem;
    padding: 1rem;
    border: 1px solid rgba(13, 44, 85, 0.08);
}

.club-management-shell h1[b-91o743vxlx] {
    color: #0d2c55;
    font-size: 2.5rem;
    margin: 0 0 0.5rem;
}

.competition-back-link[b-91o743vxlx] {
    display: inline-block;
    color: #1f4267;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.competition-back-link:hover[b-91o743vxlx] {
    text-decoration: underline;
}

.competition-create-prompt[b-91o743vxlx] {
    color: #5a6b80;
    margin-bottom: 1rem;
}

.competition-type-list[b-91o743vxlx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.competition-type-card[b-91o743vxlx] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    margin-bottom: 0;
}

.competition-type-card--selected[b-91o743vxlx] {
    border-color: #0d2c55;
    box-shadow: 0 0 0 1px #0d2c55 inset;
}

.competition-type-card--disabled[b-91o743vxlx] {
    cursor: not-allowed;
    opacity: 0.6;
    background: #eef1f5;
}

.competition-type-radio[b-91o743vxlx] {
    margin-top: 0.3rem;
    flex: 0 0 auto;
}

/* Muted empty radio circle on disabled cards so they read as unavailable
   *options* (not plain text rows), mirroring the wireframe's "( ) Singles
   tournament [Coming soon]". Non-focusable, decorative (aria-hidden). */
.competition-type-radio-placeholder[b-91o743vxlx] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: 0.3rem;
    border-radius: 50%;
    border: 2px solid #b4bdca;
    background: transparent;
}

.competition-type-title[b-91o743vxlx] {
    color: #0d2c55;
    font-weight: 600;
    font-size: 1.1rem;
}

.competition-type-desc[b-91o743vxlx] {
    color: #5a6b80;
    font-size: 0.95rem;
    margin-top: 0.2rem;
}

.coming-soon-pill[b-91o743vxlx] {
    display: inline-block;
    background: #e6ebf2;
    color: #5a6b80;
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.visually-hidden[b-91o743vxlx] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.competition-create-actions[b-91o743vxlx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
    /* FAB clearance (ISS-013, rework round 1 feature-wide sweep): the create screen's
       right-aligned Continue also sat under the bottom-right feedback FAB at 1440px. The
       create card is a touch wider than the wizard card, so 4.5rem (which clears the
       wizard) left the Continue right edge at 1344 vs the FAB's 1329 — bumped to 6rem so
       the create Continue clears the FAB with the same headroom. Reset at ≤700px. */
    padding-right: 6rem;
}

/* Touch floor (ISS-013, rework round 1): Cancel + Continue clear 44px at ALL
   viewports, not just ≤700px. Cancel is a NavLink-rendered <a class="btn"> — ::deep
   pierces the child-component boundary so the rule reaches it as well as the plain
   Continue <button>. Mirrors the CompetitionSetup wizard-actions pattern. */
.competition-create-actions .btn[b-91o743vxlx],
.competition-create-actions[b-91o743vxlx]  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 700px) {
    .competition-create-actions[b-91o743vxlx] {
        flex-direction: column-reverse;
        /* Actions stack full-width on mobile; drop the desktop FAB clearance. */
        padding-right: 0;
    }

    /* On mobile the actions go full-width; the 44px floor already applies above. */
    .competition-create-actions .btn[b-91o743vxlx],
    .competition-create-actions[b-91o743vxlx]  .btn {
        width: 100%;
    }
}
/* /Components/Pages/CompetitionInProgress.razor.rz.scp.css */
/* In-progress competition surface (slice 7). Base shell/card/status-pill tokens
   replicated per-page (the Members/Settings/Competitions precedent — scoped CSS doesn't
   share). New: standings tables + matches list. AA contrast measured (see build report). */
.club-management-shell[b-7u6f3d3p1c] {
    padding: 0;
}

.club-card[b-7u6f3d3p1c] {
    background: #f6f8fb;
    border-radius: 0.2rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(13, 44, 85, 0.08);
}

/* Action buttons clear the 44px touch floor at all viewports (NavLink renders <a>,
   hence ::deep), matching the wizard. */
.club-card[b-7u6f3d3p1c]  .btn,
.competition-wizard-actions[b-7u6f3d3p1c]  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.competition-inprogress-header[b-7u6f3d3p1c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.competition-inprogress-title[b-7u6f3d3p1c] {
    color: #0d2c55;
    font-size: 2rem;
    margin: 0 0 0.25rem;
}

.competition-inprogress-counts[b-7u6f3d3p1c] {
    color: #5a6b80;
    margin: 0;
}

/* The header right column: the status pill stacked above the "View setup" link
   (Mike-reported defect round). Right-aligned on desktop so it hangs off the title block;
   shrinks before the title (flex-shrink:0 keeps the pill/link intact). */
.competition-inprogress-header-aside[b-7u6f3d3p1c] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* "View setup" outline link — 44px touch floor (the header isn't covered by the
   .club-card / .competition-wizard-actions ::deep .btn rule, so set it here). NavLink
   renders an <a>, hence ::deep. nowrap keeps "View setup" on one line at 390px. */
.competition-inprogress-header-aside[b-7u6f3d3p1c]  .competition-inprogress-view-setup {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* ── Slice-10 dashboard section-nav chips ── same-page fragment anchors over the inline
   sections (Overview / Groups / Knockout). Pill chips, 44px touch target, wrap on mobile. */
.competition-dashboard-nav[b-7u6f3d3p1c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.competition-dashboard-chip[b-7u6f3d3p1c] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid #c3ccd8;
    border-radius: 999px;
    background: #fff;
    /* #1f3147 on #fff = 12.1:1 (AA). */
    color: #1f3147;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    /* Rendered as a <button> (LR-1: in-page scroll, not a navigating anchor) — normalise
       the UA button defaults so it matches the previous chip styling. */
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.competition-dashboard-chip:hover[b-7u6f3d3p1c] {
    background: #f2f5f9;
}

.competition-dashboard-chip:focus-visible[b-7u6f3d3p1c] {
    outline: 2px solid #0d2c55;
    outline-offset: 2px;
}

/* Rework major 4: the in-view section's chip reads active — navy fill + white text, matching
   the app's nav active treatment + the in-progress status pill. #fff on #0d2c55 = 13.1:1 (AA). */
.competition-dashboard-chip--active[b-7u6f3d3p1c] {
    background: #0d2c55;
    border-color: #0d2c55;
    color: #fff;
}

.competition-dashboard-chip--active:hover[b-7u6f3d3p1c] {
    background: #0d2c55;
}

/* Fragment scroll targets clear the (potential) sticky header / give breathing room when
   the chip scrolls a section to the top. */
#overview[b-7u6f3d3p1c],
.competition-groups-anchor[b-7u6f3d3p1c],
.competition-knockout[b-7u6f3d3p1c] {
    scroll-margin-top: 1rem;
}

/* LR-19: the "Open Results Desk" CTA styles are removed with the CTA — the Desk is parked. */

/* ── LR-29: group filter/selector on the Groups view ── chips/segmented buttons (one tap,
   touch-friendly). Mirrors the dashboard-chip token set (44px, navy active) under group-
   selector-scoped names - scoped CSS doesn't cross components, so the tokens are replicated
   (the same Members/Settings/Competitions precedent). Wraps on mobile; sits above the cards. */
.competition-group-selector[b-7u6f3d3p1c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.competition-group-chip[b-7u6f3d3p1c] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid #c3ccd8;
    border-radius: 999px;
    background: #fff;
    /* #1f3147 on #fff = 12.1:1 (AA). */
    color: #1f3147;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.competition-group-chip:hover[b-7u6f3d3p1c] {
    background: #f2f5f9;
}

.competition-group-chip:focus-visible[b-7u6f3d3p1c] {
    outline: 2px solid #0d2c55;
    outline-offset: 2px;
}

/* The selected group's chip reads active - navy fill + white text. #fff on #0d2c55 = 13.1:1 (AA). */
.competition-group-chip--active[b-7u6f3d3p1c] {
    background: #0d2c55;
    border-color: #0d2c55;
    color: #fff;
}

.competition-group-chip--active:hover[b-7u6f3d3p1c] {
    background: #0d2c55;
}

.competition-standings-card[b-7u6f3d3p1c] {
    padding: 1rem 1.25rem 1.25rem;
}

.competition-standings-title[b-7u6f3d3p1c] {
    color: #0d2c55;
    font-size: 1.35rem;
    margin: 0 0 0.5rem;
}

/* LR-31c: group-header colour-coding. A deterministic accent per group index (cycled by the
   component's GroupAccentClass, palette of 6). A coloured left-border bar + a faint tinted
   background distinguishes stacked groups at a glance; the heading text stays dark navy
   (#0d2c55, AA on every tint) so legibility holds at 390 and desktop. No new brand colours -
   the hues are an accessible accent set keyed to the app's blue/teal/green/amber family. */
.competition-standings-title.competition-group-accent-0[b-7u6f3d3p1c],
.competition-standings-title.competition-group-accent-1[b-7u6f3d3p1c],
.competition-standings-title.competition-group-accent-2[b-7u6f3d3p1c],
.competition-standings-title.competition-group-accent-3[b-7u6f3d3p1c],
.competition-standings-title.competition-group-accent-4[b-7u6f3d3p1c],
.competition-standings-title.competition-group-accent-5[b-7u6f3d3p1c] {
    border-left: 4px solid transparent;
    padding: 0.15rem 0 0.15rem 0.6rem;
    border-radius: 0.2rem;
}

.competition-group-accent-0[b-7u6f3d3p1c] { border-left-color: #2563a8; background: rgba(37, 99, 168, 0.10); }
.competition-group-accent-1[b-7u6f3d3p1c] { border-left-color: #1f8a70; background: rgba(31, 138, 112, 0.10); }
.competition-group-accent-2[b-7u6f3d3p1c] { border-left-color: #b3541e; background: rgba(179, 84, 30, 0.10); }
.competition-group-accent-3[b-7u6f3d3p1c] { border-left-color: #7048a8; background: rgba(112, 72, 168, 0.10); }
.competition-group-accent-4[b-7u6f3d3p1c] { border-left-color: #a01e58; background: rgba(160, 30, 88, 0.10); }
.competition-group-accent-5[b-7u6f3d3p1c] { border-left-color: #4b7a1e; background: rgba(75, 122, 30, 0.10); }

.competition-standings-empty[b-7u6f3d3p1c] {
    color: #5a6b80;
    margin: 0 0 1rem;
}

/* LR-27: table-sm standings # · Pair · P · W · L · PF · PA · PD · Pts. Numeric columns
   right-aligned + narrow; the pair column takes the slack. Navy header on the off-white
   card (>12:1). At <=700px the table reflows to a stacked mini-card (see the media block). */
.competition-standings-table[b-7u6f3d3p1c] {
    width: 100%;
    margin-bottom: 1rem;
}

.competition-standings-table thead th[b-7u6f3d3p1c] {
    color: #0d2c55;
    font-size: 0.85rem;
    border-bottom: 2px solid rgba(13, 44, 85, 0.15);
    text-align: left;
}

/* The numeric headers (P/W/L/PF/PA/PD/Pts) must follow their right-aligned values, or the
   labels float left of the numbers below them. This needs to out-specify the thead th rule
   above, which otherwise wins over .competition-standings-num's text-align. */
.competition-standings-table thead th.competition-standings-num[b-7u6f3d3p1c] {
    text-align: right;
}

.competition-standings-table td[b-7u6f3d3p1c] {
    color: #24384f;
    vertical-align: middle;
}

.competition-standings-rank-col[b-7u6f3d3p1c] {
    width: 2.25rem;
    color: #5a6b80;
    font-variant-numeric: tabular-nums;
}

.competition-standings-pair[b-7u6f3d3p1c] {
    font-weight: 600;
}

.competition-standings-num[b-7u6f3d3p1c] {
    text-align: right;
    /* LR-27: nine columns now share the row - narrow the numeric columns so all fit the
       desktop card with the pair column taking the slack (no horizontal scroll >=700px). */
    width: 2.5rem;
    font-variant-numeric: tabular-nums;
}

/* LR-27: the table-points column reads as the at-a-glance result - slightly heavier + the
   navy used elsewhere for emphasis. #0d2c55 on the off-white card is well over AA. */
.competition-standings-pts[b-7u6f3d3p1c] {
    font-weight: 700;
    color: #0d2c55;
}

.competition-matches-heading[b-7u6f3d3p1c] {
    color: #0d2c55;
    font-size: 1rem;
    margin: 0.75rem 0 0.5rem;
}

.competition-matches-list[b-7u6f3d3p1c] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.competition-match-row[b-7u6f3d3p1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    /* wrap so the pairs + meta drop onto their own lines at 390, never pushing the row wider
       (no h-scroll). The LR-8a head start is now an inline "(+N)" suffix inside the pair span,
       not a separate full-width line. */
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid rgba(13, 44, 85, 0.08);
    border-radius: 0.2rem;
}

/* LR-8a: the head start shown INLINE in brackets after the weaker team's name — "(+N)"
   (replaces the LR-2 under-row repeated-name line). A subtle suffix on the pair span; an
   even match shows NOTHING (PM ruling). #3a5072 on #fff = 7.4:1 (AA). nowrap keeps the short
   bracket from breaking mid-token; it sits inside the wrapping .competition-match-pair so it
   never widens the row (no horizontal scroll at 390). */
.competition-match-headstart-inline[b-7u6f3d3p1c] {
    color: #3a5072;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── LR-18: running-surface score entry as a session-parity POPUP panel ──
   (supersedes the 2C-ii inline-in-row block). A fixed-overlay panel anchored over the page
   (the "score panel popup"), with the same card/rows/actions language as the in-session score
   pane. The shared grid stays Inline (it flows within the popup, below the trigger; the popup
   is the overlay). The trigger + grid reuse the same LR-9 amber/unset palette as Match Entry /
   the (now-dormant) Results Desk, defined here (the Match Entry classes are component-scoped). */

/* The dimmed dismiss backdrop behind the popup (click to close). */
.competition-score-popup-backdrop[b-7u6f3d3p1c] {
    position: fixed;
    inset: 0;
    background: rgba(13, 44, 85, 0.45);
    z-index: 1040;
}

/* The popup panel itself: a centered white card over the backdrop, scrollable if the grid is
   tall at 390. max-width keeps it tidy on desktop; full-bleed-ish margins on mobile. */
.competition-score-popup[b-7u6f3d3p1c] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1041;
    /* LR-22 (round 4A): the inline 10-column decade grid (44px chips + gaps) needs ~34rem of
       popup width to lay out one full decade per row inside the popover's own padding; the old
       min(92vw, 24rem) was far too narrow, clipping the right-hand chips (Mike's "doesn't fit /
       needs scrolling"). Widen so the FULL grid + Save/Cancel fit on open without any scroll at
       the desktop band; 96vw keeps it inside the viewport at 390 (where the grid's <=600px CSS
       shrinks chips to fit). */
    width: min(96vw, 34rem);
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(13, 44, 85, 0.12);
    border-radius: 0.5rem;
    box-shadow: 0 1.25rem 2.5rem rgba(13, 44, 85, 0.28);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* The match name as the popup's self-identifying header (it is detached from its list row). */
.competition-score-popup-title[b-7u6f3d3p1c] {
    color: #0d2c55;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    /* LR-23 (round 4A): the "Entrant1 v Entrant2" header renders on a single line; a long
       label ellipsis-truncates (full text on hover via the title attr) rather than wrapping. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* LR-31a: the head-start echo line inside the popup ("X start on +N"). Reads directly under
   the title at a calm, secondary weight - it's context, not the action. >12:1 navy-on-card. */
.competition-score-popup-headstart[b-7u6f3d3p1c] {
    color: #0d2c55;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

/* LR-28: the single per-row in-place entry affordance ("Enter score" on a Pending row,
   "Edit score" on a Complete row). The redundant deep-link button is removed; this is the
   row's only entry+correction control now. >= 44px tap. */
.competition-match-enter-inline[b-7u6f3d3p1c] {
    min-height: 44px;
}

.competition-match-entry-scores[b-7u6f3d3p1c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.competition-match-entry-score-row[b-7u6f3d3p1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.competition-match-entry-score-label[b-7u6f3d3p1c] {
    color: #24384f;
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0;
}

/* The tap-to-open score field: large numeric look, comfortably over 44px. */
.competition-match-entry-score-input[b-7u6f3d3p1c] {
    width: 5rem;
    min-height: 48px;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.score-entry-trigger:disabled[b-7u6f3d3p1c] {
    cursor: not-allowed;
    opacity: 0.65;
}

/* Unset trigger: the en-dash placeholder reads muted (not a real "0"). #6a7a8d on #fff = 4.6:1. */
.score-entry-trigger--unset[b-7u6f3d3p1c] {
    color: #6a7a8d;
    font-weight: 600;
}

/* LR-9 (session-parity): an AUTO-DEFAULTED winner (21, filled when the loser was entered) reads
   amber — the same coloured-state language as the in-session pane. A manual re-tap flips it
   plain. Same palette as the session / Match Entry: bg #fff0bd / border #e3c56f / text #664b00. */
.score-entry-trigger--auto[b-7u6f3d3p1c] {
    background: #fff0bd;
    border-color: #e3c56f;
    color: #664b00;
}

/* Save + Cancel aligned directly BENEATH the score grid (LR-18 AC-LR18.2): the last child of
   the popup, so once a score is entered Save is the immediate adjacent tap. Save grows to fill
   so it reads as the primary; both >= 44px. */
.competition-score-popup-actions[b-7u6f3d3p1c] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.competition-score-popup-actions .btn[b-7u6f3d3p1c] {
    min-height: 44px;
}

.competition-score-popup-save[b-7u6f3d3p1c] {
    flex: 1 1 auto;
}

.competition-score-popup-error[b-7u6f3d3p1c] {
    margin: 0;
}

/* Fill the row's free space (everything left of the meta) so the central "v" sits on a
   consistent vertical spine down the group instead of wandering with each row's name
   lengths. The two pair columns are equal halves (flex: 1 1 0 below); the left team is
   right-aligned and the right team left-aligned so both names meet the v in the middle
   (classic fixtures alignment). */
.competition-match-pairs[b-7u6f3d3p1c] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: #24384f;
}

/* Each pair grows to fill its slot. Content packs to the start (the inline "(+N)" head
   start hugs the team name); the score still floats to the pair's outer edge via its own
   margin-left:auto below, so entered scores column-align across the two sides of a row and
   read as a tidy right-hand column (UX rework R1 polish 8). (Was justify-content:
   space-between, which also flung a score-less head start to the far edge once the pair
   fills the row.) The score span carries a min-width so single- and double-digit scores
   still line up. */
.competition-match-pair[b-7u6f3d3p1c] {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.35rem;
}

/* Left team hugs the v on its right edge; right team (default) hugs it on its left edge,
   so the two names converge on the central spine. */
.competition-match-pairs > .competition-match-pair:first-child[b-7u6f3d3p1c] {
    justify-content: flex-end;
    text-align: right;
}

/* Centre scoreline: the right team's score is pulled IN FRONT of its name (order:-1) so it
   sits at the left end of its half, hugging the "-"; the left team's score already rides the
   right end of its flex-end half. Together a completed row reads "Team A  21 - 15  Team B"
   instead of flinging the scores to the outer edges (far apart on wide monitors). */
.competition-match-pairs > .competition-match-pair:last-child .competition-match-score[b-7u6f3d3p1c] {
    order: -1;
}

.competition-match-pair--winner[b-7u6f3d3p1c] {
    font-weight: 700;
    color: #1d6b39;
}

.competition-match-score[b-7u6f3d3p1c] {
    min-width: 1.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.competition-match-vs[b-7u6f3d3p1c] {
    color: #7a8699;
    font-size: 0.85rem;
}

.competition-match-meta[b-7u6f3d3p1c] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* LR-28: the per-match deep-link Enter/Edit NavLink (.competition-match-enter) is removed
   from the row; its ::deep style is dropped with it. The single in-place button styling lives
   on .competition-match-enter-inline above. */

.competition-wizard-actions[b-7u6f3d3p1c] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.competition-setup-skeleton[b-7u6f3d3p1c] {
    min-height: 8rem;
    background: linear-gradient(90deg, #f6f8fb 25%, #eef2f7 50%, #f6f8fb 75%);
}

/* Status pills (replicated tokens — scoped CSS). */
.status-pill[b-7u6f3d3p1c] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
}

.status-pill--draft[b-7u6f3d3p1c] {
    background: #e6ebf2;
    color: #3a4d66;
}

.status-pill--in-progress[b-7u6f3d3p1c] {
    background: #d7ebdd;
    color: #1d6b39;
}

.status-pill--complete[b-7u6f3d3p1c] {
    background: #0d2c55;
    color: #fff;
}

/* Mobile/tablet: single column, the match row stacks pairs above the meta so nothing
   gets squeezed off a 390px viewport. No horizontal scroll. */
@media (max-width: 700px) {
    .competition-inprogress-header[b-7u6f3d3p1c] {
        flex-direction: column;
        align-items: stretch;
    }

    /* Stop the status pill stretching to a full-width banner in the stacked header — it
       should keep its intrinsic pill width, left-aligned (UX rework R1 polish 7). The
       aside (pill + View setup) left-aligns its contents in the stacked layout. */
    .competition-inprogress-header-aside[b-7u6f3d3p1c] {
        align-items: flex-start;
    }

    .competition-inprogress-header .status-pill[b-7u6f3d3p1c] {
        align-self: flex-start;
    }

    .competition-match-row[b-7u6f3d3p1c] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .competition-match-meta[b-7u6f3d3p1c] {
        justify-content: space-between;
    }

    /* LR-27: standings reflow (AC-LR27.5). Nine columns will not fit 390px, so each standing
       row becomes a stacked mini-card (the slice-4 "table on desktop, stacked rows on mobile"
       idiom). The header row is hidden; each cell carries its label from data-label. The cells
       are ordered into a two-line layout via flex order: PRIMARY line = # · Pair · W-L · Pts
       (rank, name, win-loss, table points), SECONDARY line = P · PF · PA · PD (the detail). No
       value dropped, no horizontal scroll. */
    .competition-standings-table thead[b-7u6f3d3p1c] {
        /* Visually hide the header but keep it for assistive tech (the cards carry labels). */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .competition-standings-table[b-7u6f3d3p1c],
    .competition-standings-table tbody[b-7u6f3d3p1c] {
        display: block;
        width: 100%;
    }

    .competition-standings-table tbody tr[b-7u6f3d3p1c] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.4rem 0.75rem;
        padding: 0.5rem 0.65rem;
        margin-bottom: 0.5rem;
        background: #fff;
        border: 1px solid rgba(13, 44, 85, 0.08);
        border-radius: 0.2rem;
    }

    .competition-standings-table tbody td[b-7u6f3d3p1c] {
        display: inline-flex;
        align-items: baseline;
        width: auto;
        padding: 0;
        border: 0;
        font-variant-numeric: tabular-nums;
    }

    /* Secondary-detail cells (P / PF / PA / PD) carry their label inline; the primary cells
       (#, Pair, W, L, Pts) read on their own. The label comes from data-label via ::before. */
    .competition-standings-table tbody td[data-label="P"][b-7u6f3d3p1c]::before,
    .competition-standings-table tbody td[data-label="PF"][b-7u6f3d3p1c]::before,
    .competition-standings-table tbody td[data-label="PA"][b-7u6f3d3p1c]::before,
    .competition-standings-table tbody td[data-label="PD"][b-7u6f3d3p1c]::before {
        content: attr(data-label) " ";
        color: #5a6b80;
        font-size: 0.8rem;
        font-weight: 600;
        margin-right: 0.2rem;
    }

    /* Primary line: # · Pair · W-L · Pts. Force a line break after the primary cells so the
       detail cells flow onto a second line. The rank + pair take the full primary width with
       W/L/Pts to their right. */
    .competition-standings-table tbody td[data-label="#"][b-7u6f3d3p1c] {
        order: 0;
        color: #5a6b80;
        font-weight: 600;
    }

    .competition-standings-table tbody td[data-label="Pair"][b-7u6f3d3p1c] {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        font-weight: 600;
        /* LR-23 width discipline: a long pair name truncates rather than wrapping the card. */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* W and L render as a combined "W-L" reading on the primary line: show W, then L prefixed
       by a hyphen, with the column labels suppressed (the W-L shape is self-evident here). */
    .competition-standings-table tbody td[data-label="W"][b-7u6f3d3p1c] {
        order: 2;
        font-weight: 700;
        color: #1d6b39;
    }

    .competition-standings-table tbody td[data-label="L"][b-7u6f3d3p1c] {
        order: 3;
        font-weight: 700;
        color: #1d6b39;
    }

    .competition-standings-table tbody td[data-label="L"][b-7u6f3d3p1c]::before {
        content: "-";
        color: #1d6b39;
    }

    .competition-standings-table tbody td[data-label="Pts"][b-7u6f3d3p1c] {
        order: 4;
        font-weight: 700;
        color: #0d2c55;
    }

    .competition-standings-table tbody td[data-label="Pts"][b-7u6f3d3p1c]::before {
        content: "Pts ";
        color: #5a6b80;
        font-size: 0.8rem;
        font-weight: 600;
        margin-right: 0.2rem;
    }

    /* Secondary line: P · PF · PA · PD. The Pair cell (flex:1 1 auto) grows to fill the rest
       of line 1, so the detail cells wrap onto line 2 together. A small top margin separates
       the two lines; all four sit side by side (none forced to its own row). */
    .competition-standings-table tbody td[data-label="P"][b-7u6f3d3p1c] {
        order: 5;
        margin-top: 0.2rem;
        color: #24384f;
    }

    .competition-standings-table tbody td[data-label="PF"][b-7u6f3d3p1c] { order: 6; margin-top: 0.2rem; color: #24384f; }
    .competition-standings-table tbody td[data-label="PA"][b-7u6f3d3p1c] { order: 7; margin-top: 0.2rem; color: #24384f; }
    .competition-standings-table tbody td[data-label="PD"][b-7u6f3d3p1c] { order: 8; margin-top: 0.2rem; color: #24384f; }
}

/* ── Knockout section (slice 9) ── */
.competition-group-locked[b-7u6f3d3p1c] {
    margin: 0.5rem 0 0;
    font-style: italic;
    color: #7a8699;
}

.competition-knockout-title[b-7u6f3d3p1c] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0d2c55;
    margin: 0 0 0.75rem;
}

.competition-knockout-generate[b-7u6f3d3p1c] {
    min-height: 44px;
    /* A bare <button> with min-height + default inline-block measured ~38px (the text box
       doesn't stretch to min-height). inline-flex + centring makes the 44px actually render. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.competition-knockout-tie[b-7u6f3d3p1c] {
    border: 1px solid #d7deea;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.competition-knockout-tie-group[b-7u6f3d3p1c] {
    color: #24384f;
}

.competition-knockout-tie-options[b-7u6f3d3p1c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.competition-knockout-tie-option[b-7u6f3d3p1c] {
    min-height: 44px;
}

.competition-knockout-ungenerate[b-7u6f3d3p1c] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eef2f7;
}

.competition-knockout-ungenerate-btn[b-7u6f3d3p1c] {
    min-height: 44px;
}

/* The un-generate confirm copy (polish 4): a bold dark statement, not an italic question. */
.competition-knockout-ungenerate-warn[b-7u6f3d3p1c] {
    color: #24384f;
    margin-top: 0;
}

/* Completed screen (Screen 15): winner / runner-up + stats. */
.competition-completed[b-7u6f3d3p1c] {
    text-align: center;
    padding: 0.5rem 0 1rem;
}

.competition-completed-trophy[b-7u6f3d3p1c] {
    font-size: 2.5rem;
    margin: 0 0 0.25rem;
}

.competition-completed-winner[b-7u6f3d3p1c] {
    font-size: 1.25rem;
    color: #0d2c55;
    margin: 0 0 0.25rem;
}

.competition-completed-runner-up[b-7u6f3d3p1c] {
    color: #24384f;
    margin: 0 0 0.5rem;
}

.competition-completed-stats[b-7u6f3d3p1c] {
    margin: 0;
}

/* MAJOR 3: the completed summary sat flush against the bracket below it (they bled together).
   Add a visual break on the bracket when it directly follows the completed block. The bracket
   is a child component, so reach it with ::deep. */
.competition-completed[b-7u6f3d3p1c] +  .knockout-bracket {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #d7deea;
}
/* /Components/Pages/CompetitionMatchEntry.razor.rz.scp.css */
/* Match Entry (slice 7). Single-column, large numeric inputs, kiosk-grade for the
   tablet-at-the-venue. Base shell/card tokens replicated per-page (scoped CSS). AA
   contrast measured (see build report). */
.club-management-shell[b-x0o0np4wjm] {
    padding: 0;
}

.club-card[b-x0o0np4wjm] {
    background: #f6f8fb;
    border-radius: 0.2rem;
    margin-bottom: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(13, 44, 85, 0.08);
}

.club-card[b-x0o0np4wjm]  .btn,
.competition-wizard-actions[b-x0o0np4wjm]  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.competition-match-entry[b-x0o0np4wjm] {
    max-width: 32rem;
}

/* Rework polish 6: the title block sits at shell level (above the card), navy treatment. */
.competition-match-entry-header[b-x0o0np4wjm] {
    max-width: 32rem;
    margin-bottom: 0.85rem;
}

.competition-match-entry-title[b-x0o0np4wjm] {
    color: #0d2c55;
    font-size: 1.75rem;
    margin: 0 0 0.15rem;
}

.competition-match-entry-group[b-x0o0np4wjm] {
    color: #5a6b80;
    margin: 0 0 1rem;
}

/* Edit signal (UX rework R1, option a): a muted line under the "Edit result" heading when
   correcting an already-saved result. */
.competition-match-entry-editing[b-x0o0np4wjm] {
    color: #5a6b80;
    font-style: italic;
    margin: 0 0 0.5rem;
}

.competition-match-entry-pairs[b-x0o0np4wjm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.competition-match-entry-pair[b-x0o0np4wjm] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid rgba(13, 44, 85, 0.08);
    border-radius: 0.2rem;
}

.competition-match-entry-pair-name[b-x0o0np4wjm] {
    color: #0d2c55;
    font-weight: 700;
    font-size: 1.1rem;
    /* LR-23 (round 4A): one width discipline across the three name surfaces — typical pair
       labels render on a SINGLE line (no two-line wrap); an extreme label ellipsis-truncates
       with the full name on hover (title attr) rather than wrapping. min-width:0 lets it shrink
       within the flex row so the rating stays put. */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.competition-match-entry-pair-rating[b-x0o0np4wjm] {
    color: #5a6b80;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* The head start: plain "start on +N" language (moat rule — the number IS the start
   score). Reads as a prominent status line, not a maths formula. #1d6b39 on #f6f8fb. */
.competition-match-entry-headstart[b-x0o0np4wjm] {
    color: #155a30;
    font-weight: 600;
    background: #e7f3ec;
    border-radius: 0.2rem;
    padding: 0.5rem 0.75rem;
    margin: 0 0 1.25rem;
}

.competition-match-entry-headstart--even[b-x0o0np4wjm] {
    color: #3a4d66;
    background: #eef2f7;
    font-weight: 500;
}

.competition-match-entry-score-heading[b-x0o0np4wjm] {
    color: #0d2c55;
    font-size: 1.1rem;
    margin: 0 0 0.75rem;
}

.competition-match-entry-scores[b-x0o0np4wjm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.competition-match-entry-score-row[b-x0o0np4wjm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.competition-match-entry-score-label[b-x0o0np4wjm] {
    color: #24384f;
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0;
}

/* Large numeric input — kiosk-grade, comfortably over 44px, big readable digits. Spinner
   arrows suppressed (UX rework R1 polish 6): they crowd the big digits and aren't a useful
   affordance on the kiosk; inputmode="numeric" keeps the numeric keypad on touch. */
.competition-match-entry-score-input[b-x0o0np4wjm] {
    width: 5.5rem;
    min-height: 56px;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 0.25rem 0.5rem;
    -moz-appearance: textfield;
    appearance: textfield;
}

.competition-match-entry-score-input[b-x0o0np4wjm]::-webkit-outer-spin-button,
.competition-match-entry-score-input[b-x0o0np4wjm]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* LR-3: the score is now a tap-to-open button (opens the shared decade grid). It keeps the
   large numeric look (centred, bold, tabular) but reads as a tappable field. */
.score-entry-trigger[b-x0o0np4wjm] {
    cursor: pointer;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.score-entry-trigger:disabled[b-x0o0np4wjm] {
    cursor: not-allowed;
    opacity: 0.65;
}

/* Unset trigger (rework major 1): the en-dash placeholder reads muted (not a real "0" score),
   mirroring the session dashboard's unset/"Tap to enter" distinction. #6a7a8d on #fff = 4.6:1. */
.score-entry-trigger--unset[b-x0o0np4wjm] {
    color: #6a7a8d;
    font-weight: 600;
}

/* LR-9 (session-parity): a value AUTO-DEFAULTED to the §6 target (21) when the OTHER side was
   entered as the loser reads amber — the same coloured-state language as the in-session
   pending-score pane's auto state (.pending-score-input-auto). A manual override flips it back to
   the plain set state. Same palette as the session: bg #fff0bd / border #e3c56f / text #664b00. */
.score-entry-trigger--auto[b-x0o0np4wjm] {
    background: #fff0bd;
    border-color: #e3c56f;
    color: #664b00;
}

.competition-match-entry-error[b-x0o0np4wjm] {
    margin-bottom: 1rem;
}

.competition-match-entry-actions[b-x0o0np4wjm] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* The primary Save: full-width-leaning, dominant, >= 44px (kiosk). */
.competition-match-entry-save[b-x0o0np4wjm] {
    flex: 1 1 12rem;
    min-height: 52px;
    font-size: 1.1rem;
    font-weight: 600;
}

.competition-match-entry-saved[b-x0o0np4wjm] {
    margin-bottom: 1rem;
}

.competition-wizard-actions[b-x0o0np4wjm] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.competition-setup-skeleton[b-x0o0np4wjm] {
    min-height: 8rem;
    background: linear-gradient(90deg, #f6f8fb 25%, #eef2f7 50%, #f6f8fb 75%);
}

/* Mobile: single column, the score rows + actions go full width, no horizontal scroll. */
@media (max-width: 700px) {
    .competition-match-entry[b-x0o0np4wjm] {
        max-width: 100%;
    }

    .competition-match-entry-actions[b-x0o0np4wjm] {
        flex-direction: column;
        align-items: stretch;
    }

    .competition-match-entry-save[b-x0o0np4wjm] {
        flex: 1 1 auto;
    }
}
/* /Components/Pages/CompetitionResultsDesk.razor.rz.scp.css */
/* Results Desk (slice 8). Kiosk-grade, 390-mobile-PRIMARY: arm's-length one-handed entry.
   page--kiosk (MainLayout) supplies the full-width chrome-reduced shell; this page sizes the
   inputs/Save/steppers well above the touch floor. Base card tokens replicated (scoped CSS).
   AA contrast measured (see build report). */
.competition-desk-shell[b-o922ycifi9] {
    padding: 0;
    max-width: 40rem;
    margin: 0 auto;
}

.club-card[b-o922ycifi9] {
    background: #f6f8fb;
    border-radius: 0.2rem;
    margin-bottom: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(13, 44, 85, 0.08);
}

.club-card[b-o922ycifi9]  .btn,
.competition-wizard-actions[b-o922ycifi9]  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Kiosk-grade button heights (pre-pass): these must beat the 44px card floor above, so they
   carry higher specificity (.competition-desk-card scope). Save ~64px, steppers >=48px. */
.competition-desk-card[b-o922ycifi9]  .competition-desk-save {
    min-height: 64px;
}

.competition-desk-card[b-o922ycifi9]  .competition-desk-stepper {
    min-height: 48px;
}

.competition-setup-skeleton[b-o922ycifi9] {
    min-height: 8rem;
    background: linear-gradient(90deg, #f6f8fb 25%, #eef2f7 50%, #f6f8fb 75%);
}

.competition-wizard-actions[b-o922ycifi9] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* ── Top bar ──────────────────────────────────────────────────────────────────────────── */
.competition-desk-topbar[b-o922ycifi9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* The Back NavLink renders an <a class="btn …">; pierce the scope + inline-flex so the 44px
   floor actually applies (a plain inline-block <a> ignores min-height without flex centring). */
.competition-desk-topbar[b-o922ycifi9]  .competition-desk-back {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.competition-desk-title[b-o922ycifi9] {
    color: #0d2c55;
    font-size: 1.5rem;
    margin: 0;
}

/* ── Entry card ───────────────────────────────────────────────────────────────────────── */
.competition-desk-card[b-o922ycifi9] {
    padding: 1.25rem;
}

.competition-desk-progress-row[b-o922ycifi9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(13, 44, 85, 0.08);
    padding-bottom: 0.75rem;
}

.competition-desk-progress[b-o922ycifi9] {
    color: #24384f;
    font-weight: 600;
    font-size: 1.05rem;
}

.competition-desk-skip[b-o922ycifi9] {
    min-height: 44px;
    min-width: 5rem;
    font-weight: 600;
}

.competition-desk-skip-exhausted[b-o922ycifi9] {
    margin-bottom: 1rem;
}

/* The two pairs, large + readable at a distance. */
.competition-desk-pairs[b-o922ycifi9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.competition-desk-pair-name[b-o922ycifi9] {
    color: #0d2c55;
    font-weight: 700;
    font-size: 1.3rem;
    text-align: center;
    /* Rework polish 7: a long pair label ("Green / Black" + "Hall / Wilson") wraps as a UNIT —
       min-width:0 lets the flex item shrink, overflow-wrap breaks only between words (never mid
       name), and the centred line keeps the slash on whichever side it falls. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.competition-desk-vs[b-o922ycifi9] {
    color: #5a6b80;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

/* Head start hero — plain "start on +N" language (moat rule). #155a30 on #e7f3ec is AA. */
.competition-desk-headstart[b-o922ycifi9] {
    color: #155a30;
    font-weight: 600;
    font-size: 1.05rem;
    background: #e7f3ec;
    border-radius: 0.2rem;
    padding: 0.6rem 0.85rem;
    margin: 0 0 1.25rem;
    text-align: center;
}

.competition-desk-headstart--even[b-o922ycifi9] {
    color: #3a4d66;
    background: #eef2f7;
    font-weight: 500;
}

/* ── Score entry ──────────────────────────────────────────────────────────────────────── */
.competition-desk-form[b-o922ycifi9] {
    margin: 0;
}

/* 390 PRIMARY: the two score blocks STACK (label above its own full-width input + steppers).
   The separator dash is hidden in the stacked form; it reappears in the side-by-side >=700px
   layout below. */
.competition-desk-scores[b-o922ycifi9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.competition-desk-score-sep[b-o922ycifi9] {
    display: none;
}

.competition-desk-score-block[b-o922ycifi9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.competition-desk-score-label[b-o922ycifi9] {
    color: #24384f;
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
}

/* Big numeric input — kiosk-grade, 64-72px tall, large readable digits. Spinner arrows
   suppressed (they crowd the big digits); inputmode="numeric" keeps the numeric keypad. */
.competition-desk-score-input[b-o922ycifi9] {
    width: 100%;
    min-height: 68px;
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 0.25rem 0.5rem;
    -moz-appearance: textfield;
    appearance: textfield;
}

.competition-desk-score-input[b-o922ycifi9]::-webkit-outer-spin-button,
.competition-desk-score-input[b-o922ycifi9]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* LR-3: the desk score is now a tap-to-open button (opens the shared kiosk-sized decade grid).
   It keeps the large numeric look but reads + behaves as a tappable kiosk field. */
.score-entry-trigger[b-o922ycifi9] {
    cursor: pointer;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.score-entry-trigger:disabled[b-o922ycifi9] {
    cursor: not-allowed;
    opacity: 0.65;
}

/* Unset trigger (rework major 1): the en-dash placeholder reads muted (not a real "0"),
   mirroring the session dashboard's unset/set distinction. #56697f on #fff = 5.4:1 (AA). */
.score-entry-trigger--unset[b-o922ycifi9] {
    color: #56697f;
}

/* LR-9 (session-parity): a value AUTO-DEFAULTED to the §6 target (21) when the OTHER side was
   entered as the loser reads amber — the same coloured-state language as the in-session
   pending-score pane's auto state (.pending-score-input-auto). A manual override (re-tap or a
   stepper) flips it back to the plain set state. Same palette as the session: bg #fff0bd /
   border #e3c56f / text #664b00. */
.score-entry-trigger--auto[b-o922ycifi9] {
    background: #fff0bd;
    border-color: #e3c56f;
    color: #664b00;
}

/* Steppers: split the row, >= 48px square-ish, keypad-primary assists. */
.competition-desk-steppers[b-o922ycifi9] {
    display: flex;
    gap: 0.75rem;
}

.competition-desk-stepper[b-o922ycifi9] {
    flex: 1 1 0;
    min-height: 48px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.competition-desk-error[b-o922ycifi9] {
    margin-bottom: 1rem;
}

/* Primary Save & next: full-width, dominant, ~64px. */
.competition-desk-save[b-o922ycifi9] {
    width: 100%;
    min-height: 64px;
    font-size: 1.25rem;
    font-weight: 700;
}

/* ── Receipt footer (persistent, NOT a toast) ─────────────────────────────────────────── */
.competition-desk-receipt[b-o922ycifi9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    background: #eef2f7;
    border: 1px solid rgba(13, 44, 85, 0.08);
    border-radius: 0.2rem;
}

.competition-desk-receipt-text[b-o922ycifi9] {
    color: #24384f;
    font-weight: 600;
    font-size: 1rem;
}

.competition-desk-receipt-text--empty[b-o922ycifi9] {
    color: #5a6b80;
    font-weight: 500;
}

.competition-desk-undo[b-o922ycifi9] {
    min-height: 44px;
    flex: 0 0 auto;
    font-weight: 600;
}

/* ── Completion terminal ──────────────────────────────────────────────────────────────── */
.competition-desk-complete-title[b-o922ycifi9] {
    color: #0d2c55;
    margin: 0 0 0.35rem;
}

/* ── >= 700px (wide tablet / desktop): scores go side-by-side with the separator dash
      (Screen 13's two-box intent at tablet width). The desk itself stays comfortably wide. */
@media (min-width: 700px) {
    .competition-desk-scores[b-o922ycifi9] {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 1.25rem;
    }

    .competition-desk-score-block[b-o922ycifi9] {
        flex: 1 1 0;
        max-width: 14rem;
    }

    .competition-desk-score-sep[b-o922ycifi9] {
        display: block;
        align-self: center;
        margin-top: 2.25rem;
        color: #5a6b80;
        font-size: 2rem;
        font-weight: 700;
    }
}
/* /Components/Pages/Competitions.razor.rz.scp.css */
.club-management-shell[b-m18hkf16ng] {
    padding: 0;
}

/* The shared off-white panel. club-card is defined per-page in scoped CSS
   (Members/Settings do the same); replicate the token here so competition cards
   actually render as tiles (#f6f8fb panel, navy-tint border) rather than bare
   content rows. */
.club-card[b-m18hkf16ng] {
    background: #f6f8fb;
    border-radius: 0.2rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(13, 44, 85, 0.08);
}

.club-management-shell h1[b-m18hkf16ng] {
    color: #0d2c55;
    font-size: 2.5rem;
    margin: 0 0 0.25rem;
}

.competitions-header[b-m18hkf16ng] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.competitions-subtitle[b-m18hkf16ng] {
    color: #5a6b80;
    margin: 0 0 0.5rem;
}

/* Rework major 3: header action cluster — the "Show archived" toggle + "+ New competition",
   right-aligned, vertically centred, wrapping on narrow widths. */
.competitions-header-actions[b-m18hkf16ng] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Touch floor (ISS-013, rework round 1): the list-screen action buttons — the
   header / empty-state "+ New competition" (a NavLink-rendered <a>, hence ::deep)
   and the load-error Refresh — clear 44px at ALL viewports, matching the wizard.
   The card "View competition" button is sized separately (it has its own rule). */
.competitions-header[b-m18hkf16ng]  .btn,
.competitions-empty[b-m18hkf16ng]  .btn,
.club-card > .btn[b-m18hkf16ng] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── LR-26 status-filter tabs ── pill chips above the card grid (All / In Progress /
   Completed). Mirrors the running-surface dashboard-chip tokens (scoped CSS doesn't cross
   components — the Members/Settings/Competitions precedent — so the tokens are replicated
   here, matching the app's active-nav treatment). Rendered as role="tab" buttons; 44px touch
   target; wrap on narrow widths. */
.competitions-filter-tabs[b-m18hkf16ng] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.competitions-filter-tab[b-m18hkf16ng] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid #c3ccd8;
    border-radius: 999px;
    background: #fff;
    /* #1f3147 on #fff = 12.1:1 (AA). */
    color: #1f3147;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.competitions-filter-tab:hover[b-m18hkf16ng] {
    background: #f2f5f9;
}

.competitions-filter-tab:focus-visible[b-m18hkf16ng] {
    outline: 2px solid #0d2c55;
    outline-offset: 2px;
}

/* The selected tab reads active — navy fill + white text, matching the app's nav active
   treatment + the running-surface chips. #fff on #0d2c55 = 13.1:1 (AA). */
.competitions-filter-tab--active[b-m18hkf16ng] {
    background: #0d2c55;
    border-color: #0d2c55;
    color: #fff;
}

.competitions-filter-tab--active:hover[b-m18hkf16ng] {
    background: #0d2c55;
}

/* Per-tab empty message (AC-LR26.6): a plain one-liner in the grid area when the club has
   competitions but the selected tab matches none. #5a6b80 on the off-white shell = AA. */
.competitions-tab-empty[b-m18hkf16ng] {
    color: #5a6b80;
    margin: 0.5rem 0 1rem;
}

/* Card/tile grid (UI Mockups.png panel 1 style). Net-new layout (Members/Reports
   are tables); built from club-card tiles within the existing palette (F3). */
.competitions-grid[b-m18hkf16ng] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.competition-card[b-m18hkf16ng] {
    display: flex;
    flex-direction: column;
    min-height: 9rem;
    margin-bottom: 0; /* grid gap handles spacing */
    padding: 1.25rem;
    background: #fff; /* mockup cards are white tiles on the off-white shell */
    /* Stretched-link host: the View <a>'s ::before overlay is positioned against
       this card, so the whole tile is clickable while remaining a single link. */
    position: relative;
    /* Leaves room on the action row for the slice-10 overflow (kebab) menu
       without a re-layout (PM decision Q4). */
}

/* Top row: tinted trophy badge (left) + status pill (right), per the mockup. */
.competition-card-top[b-m18hkf16ng] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

/* Circular solid-fill icon badge with a white trophy glyph. The tint varies per
   competition (BadgeTintClass) like the mockup. All fills are WCAG-AA measured for
   white-glyph-on-fill (≥4.5:1). z-index above the stretched-link overlay so the
   badge paints over it (decorative; the link still owns the click). */
.competition-card-badge[b-m18hkf16ng] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    color: #fff;
    flex: 0 0 auto;
    /* Decorative only: let clicks fall through to the stretched-link overlay so the
       whole tile (badge included) routes to View competition. */
    pointer-events: none;
}

.competition-card-badge svg[b-m18hkf16ng] {
    width: 1.5rem;
    height: 1.5rem;
}

/* Per-competition tints. Each fill measured against white (#fff) glyph:
   --1 navy  #0d2c55 -> 13.1:1 ; --2 green #1d6b39 -> 5.45:1 ;
   --3 teal  #246b73 -> 4.86:1 ; --4 plum  #5a3b86 -> 7.16:1 . All ≥4.5:1 (AA). */
.competition-card-badge--1[b-m18hkf16ng] { background: #0d2c55; }
.competition-card-badge--2[b-m18hkf16ng] { background: #1d6b39; }
.competition-card-badge--3[b-m18hkf16ng] { background: #246b73; }
.competition-card-badge--4[b-m18hkf16ng] { background: #5a3b86; }

/* Two-column meta row (Date | Type) with a thin divider, per the mockup. */
.competition-card-meta[b-m18hkf16ng] {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.competition-card-meta-item[b-m18hkf16ng] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 0;
    min-width: 0;
}

.competition-card-meta-item + .competition-card-meta-item[b-m18hkf16ng] {
    border-left: 1px solid rgba(13, 44, 85, 0.12);
    padding-left: 1rem;
}

.competition-card-meta-label[b-m18hkf16ng] {
    /* #4b5a6c on #fff = 6.97:1 (AA). Small-caps label like the mockup. */
    color: #4b5a6c;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.competition-card-meta-value[b-m18hkf16ng] {
    color: #1f3147;
    font-size: 0.95rem;
    /* Allow the type to wrap (e.g. "Handicap doubles") rather than clip, matching the
       mockup's two-line type; break long single tokens so they can't force h-scroll. */
    overflow-wrap: anywhere;
}

/* Stats row: count blocks (label + big number), per the mockup. Players is live;
   Pairs/Stage are reserved slots until slices 3/5. */
.competition-card-stats[b-m18hkf16ng] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.competition-card-stat[b-m18hkf16ng] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.competition-card-stat-label[b-m18hkf16ng] {
    color: #4b5a6c; /* 6.97:1 on #fff */
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.competition-card-stat-value[b-m18hkf16ng] {
    color: #0d2c55;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

/* Reserved (not-yet-available) Pairs/Stage placeholder: muted but still AA text.
   #5f6f82 on #fff = 4.91:1 (>=4.5:1). The hyphen is real text, so it must clear AA;
   an aria-label still gives AT the "not generated/started yet" meaning. */
.competition-card-stat-value--reserved[b-m18hkf16ng] {
    color: #5f6f82;
    font-weight: 600;
}

/* Completed-card "Winner" line (UX rework R1 MAJOR 1): replaces the stats block on a
   Complete card. Full-width, one line, ellipsis-truncated (title carries the full label).
   Sits in the stats row's place so the card keeps its height. */
.competition-card-winner[b-m18hkf16ng] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.competition-card-winner-label[b-m18hkf16ng] {
    color: #4b5a6c; /* 6.97:1 on #fff (AA) — matches the stat labels */
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.competition-card-winner-value[b-m18hkf16ng] {
    color: #0d2c55;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    /* One line, ellipsis-truncated; title attr exposes the full pair label. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Stretched-link pattern: the Open NavLink is the ONLY interactive element; its
   ::before overlay is absolutely positioned against the card (the nearest positioned
   ancestor — the link itself stays position:static so the overlay anchors to the
   tile, not the button), making the whole tile the link's click target. Replaces the
   old role="link" card + nested <a>, which was invalid interactive nesting for AT. */
.competition-card-actions[b-m18hkf16ng]  .competition-card-open::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Focus ring on the card when its single link is focused (stretched-link). */
.competition-card:has(.competition-card-open:focus-visible)[b-m18hkf16ng] {
    outline: 2px solid #0d2c55;
    outline-offset: 2px;
}

.competition-card-title[b-m18hkf16ng] {
    color: #0d2c55;
    font-size: 1.3rem;
    line-height: 1.25;
    margin: 0 0 0.85rem;
}

.competition-card-actions[b-m18hkf16ng] {
    display: flex;
    justify-content: stretch;
    gap: 0.5rem;
    /* Pin the action row to the bottom of the card so the body content sits at
       the top and there's no awkward vertical void. */
    margin-top: auto;
}

/* Footer "View competition" button — full-width outlined button per the mockup.
   ::deep pierces the NavLink child-component boundary (the rendered <a>) — a plain
   .btn rule wouldn't reach it in scoped CSS. The button stays position:static (no
   z-index) ON PURPOSE so its ::before overlay anchors to the card (the nearest
   positioned ancestor), not to the button — that is what makes the WHOLE tile the
   link's click target (the stretched-link pattern). */
.competition-card-actions[b-m18hkf16ng]  .competition-card-open {
    /* Flex-grows to fill the row; the kebab (slice 10) takes its fixed 44px to the right.
       When no kebab is present (read-only users) it still fills the full width. */
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

/* ── Slice-10 kebab overflow menu ── The menu container is position:relative so the
   popover anchors to it; z-index:2 lifts the kebab + popover ABOVE the stretched-link
   ::before overlay (z-index:1) so they capture their own clicks and the kebab never
   triggers the card-wide View navigation (the one real render risk, R10-1). */
.competition-card-menu[b-m18hkf16ng] {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}

.competition-card-kebab[b-m18hkf16ng] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid #c3ccd8;
    border-radius: 8px;
    background: #fff;
    /* #4b5a6c dots on #fff = 6.97:1 (AA). */
    color: #4b5a6c;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.competition-card-kebab:hover[b-m18hkf16ng] {
    background: #f2f5f9;
}

.competition-card-kebab:focus-visible[b-m18hkf16ng] {
    outline: 2px solid #0d2c55;
    outline-offset: 2px;
}

/* The popover: anchored to the kebab, opening upward-left so it doesn't clip the card
   bottom edge. Above everything on the card. */
.competition-card-menu-popover[b-m18hkf16ng] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.35rem);
    min-width: 13rem;
    background: #fff;
    border: 1px solid #d6dde7;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(13, 44, 85, 0.16);
    padding: 0.35rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Menu items (the NavLink Edit/View + the action buttons) share one look; full-width,
   left-aligned, 44px touch target. ::deep pierces the NavLink boundary. */
.competition-card-menu-popover[b-m18hkf16ng]  .competition-card-menu-item,
.competition-card-menu-item[b-m18hkf16ng] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 0.65rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #1f3147;
    font-size: 0.95rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.competition-card-menu-popover[b-m18hkf16ng]  .competition-card-menu-item:hover,
.competition-card-menu-item:hover[b-m18hkf16ng] {
    background: #f2f5f9;
}

.competition-card-menu-item:disabled[b-m18hkf16ng] {
    opacity: 0.5;
    cursor: default;
}

/* Delete = the danger token (#b0203a on #fff = 6.0:1, AA). */
.competition-card-menu-item--danger[b-m18hkf16ng] {
    color: #b0203a;
}

.competition-card-menu-confirm[b-m18hkf16ng] {
    margin: 0.25rem 0.4rem 0.5rem;
    font-size: 0.9rem;
    color: #1f3147;
    line-height: 1.35;
}

.competition-card-menu-confirm-actions[b-m18hkf16ng] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0 0.4rem 0.3rem;
}

.competition-card-menu-error[b-m18hkf16ng] {
    margin: 0.25rem 0.4rem 0;
    font-size: 0.85rem;
    /* #b0203a on #fff = 6.0:1 (AA). */
    color: #b0203a;
}

/* ── Archived section ── the dimmed archived grid (the toggle now lives in the header). ── */
.competitions-archived[b-m18hkf16ng] {
    margin-top: 1.5rem;
}

.competitions-archived-heading[b-m18hkf16ng] {
    color: #0d2c55;
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
}

/* The header "Show archived" toggle: link-styled, navy text, AA on the off-white shell. */
.competitions-archived-toggle[b-m18hkf16ng] {
    color: #3a4d66; /* 7.4:1 on the off-white shell (AA) */
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.competitions-archived-toggle:hover[b-m18hkf16ng] {
    text-decoration: underline;
}

/* Archived cards read slightly muted so they're visually distinct from the live list. */
.competition-card--archived[b-m18hkf16ng] {
    background: #fbfcfd;
    border-color: #e1e6ee;
}

.competition-card--skeleton[b-m18hkf16ng] {
    min-height: 9rem;
    background: linear-gradient(90deg, #eef2f7 25%, #f6f8fb 50%, #eef2f7 75%);
    background-size: 200% 100%;
    animation: competition-skeleton-b-m18hkf16ng 1.2s ease-in-out infinite;
}

@keyframes competition-skeleton-b-m18hkf16ng {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.competitions-empty[b-m18hkf16ng] {
    text-align: center;
    padding: 2rem 1rem;
}

.competitions-empty h2[b-m18hkf16ng] {
    color: #0d2c55;
}

/* Status pills: three muted tokens within the existing palette (F4). The
   live-pill red gradient is reserved for live sessions, so a distinct set here. */
.status-pill[b-m18hkf16ng] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
}

.status-pill--draft[b-m18hkf16ng] {
    background: #e6ebf2;
    color: #3a4d66;
}

.status-pill--in-progress[b-m18hkf16ng] {
    background: #d7ebdd;
    color: #1d6b39;
}

.status-pill--complete[b-m18hkf16ng] {
    background: #0d2c55;
    color: #fff;
}

.status-pill--archived[b-m18hkf16ng] {
    background: #eceef1;
    color: #7a8699;
}

/* Mobile/tablet: single column, full-width-friendly actions, no horizontal
   scroll (matches the 700px breakpoint Members uses). */
@media (max-width: 700px) {
    .competitions-header[b-m18hkf16ng] {
        flex-direction: column;
        align-items: stretch;
    }

    .competitions-grid[b-m18hkf16ng] {
        grid-template-columns: 1fr;
    }

    /* The View button is already full-width + 44px at every viewport (base rule
       above); mobile only needs the action row to stack should a slice-10 kebab join
       it. The 44px touch floor is inherited, not re-declared. */
    .competition-card-actions[b-m18hkf16ng] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/CompetitionSetup.razor.rz.scp.css */
.club-management-shell[b-knzrotdx1b] {
    padding: 0;
}

/* Shared off-white panel (defined per-page in scoped CSS, as Members/Settings do)
   so the wizard step card renders as a tile. */
.club-card[b-knzrotdx1b] {
    background: #f6f8fb;
    border-radius: 0.2rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(13, 44, 85, 0.08);
}

.visually-hidden[b-knzrotdx1b] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Compact mobile progress indicator — hidden on desktop, shown ≤700px in place
   of the pill rail (which clips below ~390px so steps 5-6 fall off-screen). */
.competition-step-progress[b-knzrotdx1b] {
    display: none;
    margin-bottom: 1rem;
}

.competition-step-progress-label[b-knzrotdx1b] {
    display: block;
    color: #0d2c55;
    font-weight: 600;
    font-size: 0.95rem;
    /* ~6px gap between the compact "Step N of 6" text and the progress bar so they
       don't read as one block (ux re-check polish). */
    margin-bottom: 0.4rem;
}

.competition-step-progress-bar[b-knzrotdx1b] {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #dce2ea;
    overflow: hidden;
}

.competition-step-progress-fill[b-knzrotdx1b] {
    display: block;
    height: 100%;
    background: #0d2c55;
    border-radius: 999px;
    transition: width 0.2s ease;
}

.competition-setup-skeleton[b-knzrotdx1b] {
    min-height: 14rem;
    background: linear-gradient(90deg, #eef2f7 25%, #f6f8fb 50%, #eef2f7 75%);
    background-size: 200% 100%;
    animation: competition-setup-skeleton-b-knzrotdx1b 1.2s ease-in-out infinite;
}

@keyframes competition-setup-skeleton-b-knzrotdx1b {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Step rail (F2): a horizontal numbered stepper built from pills in the existing
   palette. Collapses to a scrollable strip on narrow viewports. */
.competition-step-rail[b-knzrotdx1b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.competition-step[b-knzrotdx1b] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #eef1f5;
    /* Inactive label: #4b5a6c on #eef1f5 = 6.22:1 (WCAG AA, was #7a8699 = 3.25:1). */
    color: #4b5a6c;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.competition-step--active[b-knzrotdx1b] {
    background: #0d2c55;
    color: #fff;
}

/* A completed step is a NavLink back to its route (UX finding 9). Styled as a
   clickable pill: same palette as an inactive step but with link affordance
   (pointer + underline-on-hover of the label) so it reads as navigable.

   ::deep (ux round 2 fix): the done step is a NavLink child component, so its
   rendered <a> does NOT carry this component's scope attribute — plain scoped
   rules (.competition-step / .competition-step--done) never reached it, leaving the
   pill as an unstyled Bootstrap-link-blue <a>. ::deep pierces the child-component
   boundary (same technique the wizard .btn rules already use), so the pill base
   styling + the explicit navy colour apply to the anchor. The colour pin is what
   stops the done pill (and its number badge) going link blue; the hover underline
   of the label remains the navigable affordance. */
.competition-step-rail[b-knzrotdx1b]  .competition-step--done {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #eef1f5;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    color: #24384f;
}

.competition-step-rail[b-knzrotdx1b]  .competition-step--done:hover,
.competition-step-rail[b-knzrotdx1b]  .competition-step--done:focus-visible {
    background: #dce2ea;
}

/* Post-Start review (Mike-reported defect round): the current step renders as a
   navigable --done NavLink that ALSO carries --active. The plain (non-::deep)
   .competition-step--active rule can't pierce the NavLink child-component boundary,
   so the navy "where you are" marker is reasserted here through ::deep. Keeps the
   active pill filled navy + white while it remains a clickable review link; hover
   darkens slightly so the link affordance still reads. */
.competition-step-rail[b-knzrotdx1b]  .competition-step--done.competition-step--active {
    background: #0d2c55;
    color: #fff;
}

.competition-step-rail[b-knzrotdx1b]  .competition-step--done.competition-step--active:hover,
.competition-step-rail[b-knzrotdx1b]  .competition-step--done.competition-step--active:focus-visible {
    background: #0a2344;
}

.competition-step-rail[b-knzrotdx1b]  .competition-step--done.competition-step--active .competition-step-number {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.competition-step-rail[b-knzrotdx1b]  .competition-step--done:hover .competition-step-label,
.competition-step-rail[b-knzrotdx1b]  .competition-step--done:focus-visible .competition-step-label {
    text-decoration: underline;
}

/* The number badge inside a done pill (also behind the ::deep boundary): match the
   inactive-step badge so it doesn't inherit the anchor's (now-navy) colour oddly or
   the old link blue. */
.competition-step-rail[b-knzrotdx1b]  .competition-step--done .competition-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    font-size: 0.8rem;
    background: #dce2ea;
    color: #37465a;
}

.competition-step-number[b-knzrotdx1b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    font-size: 0.8rem;
}

.competition-step:not(.competition-step--active) .competition-step-number[b-knzrotdx1b] {
    background: #dce2ea;
    /* Inactive number: #37465a on #dce2ea = 7.37:1 (WCAG AA, was #5a6b80 = 4.18:1). */
    color: #37465a;
}

.club-card h2[b-knzrotdx1b] {
    color: #0d2c55;
    font-size: 1.6rem;
    margin: 0 0 0.85rem;
}

.competition-form-field[b-knzrotdx1b] {
    margin-bottom: 1rem;
}

.form-label[b-knzrotdx1b] {
    font-weight: 600;
    color: #24384f;
}

.required-marker[b-knzrotdx1b] {
    color: #c0392b;
}

.optional-hint[b-knzrotdx1b] {
    color: #7a8699;
    font-weight: 400;
    font-size: 0.85rem;
}

.required-legend[b-knzrotdx1b] {
    color: #7a8699;
    font-size: 0.85rem;
    margin: 0.25rem 0 1rem;
}

.competition-wizard-actions[b-knzrotdx1b] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Touch floor (ISS-013, rework round 1): EVERY wizard navigation button (Back,
   Continue, Back-to-players) is a 44px tap target at ALL viewports, not just
   ≤700px. The pre-pass commits to a 44px floor on all sticky-footer/action buttons
   feature-wide. Applied to the button element via min-height (not a parent height
   override) so it can't silently revert. ::deep pierces the NavLink child-component
   boundary — the Back/Back-to-players buttons are NavLink-rendered <a>s, so a plain
   `.btn` rule wouldn't reach them. */
.competition-wizard-actions .btn[b-knzrotdx1b],
.competition-wizard-actions[b-knzrotdx1b]  .btn,
.club-card[b-knzrotdx1b]  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Player selection (slice 2) ──────────────────────────────────────────── */
/* Zero-selection instruction line (UX finding 4): pairs the disabled Continue
   with a plain "what to do" so it never stands alone unexplained. */
.competition-player-hint[b-knzrotdx1b] {
    margin: 0 0 0.75rem;
}

/* One-time column label above the checklist (UX finding 5/7): carries the meaning
   of the per-row rating number so the word "Rating" isn't repeated on every row. */
.competition-player-listhead[b-knzrotdx1b] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 0 0.75rem 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #4b5a6c;
}

/* LR-11 (round 3A): the Member / Rating labels are click-to-sort buttons. Borderless,
   transparent, inheriting the uppercase header look so they read as the existing label
   row, not new chrome — but interactive (cursor + hover + a ▲/▼ caret on the active
   column). 44px tap floor at every width so the sort control clears the touch floor on
   a tablet (the primary kiosk user — AC-LR11.3). */
.competition-player-sort[b-knzrotdx1b] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0.25rem 0.1rem;
    border: none;
    background: transparent;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
}

.competition-player-sort:hover[b-knzrotdx1b] {
    color: #0d2c55;
}

/* The active sort column reads darker + bolder so "what's sorting" is obvious. */
.competition-player-sort--active[b-knzrotdx1b] {
    color: #0d2c55;
    font-weight: 700;
}

.competition-player-sort-caret[b-knzrotdx1b] {
    font-size: 0.7rem;
    line-height: 1;
}

/* Keyboard focus is visible (the headers are now real buttons). */
.competition-player-sort:focus-visible[b-knzrotdx1b] {
    outline: 2px solid #0d2c55;
    outline-offset: 2px;
    border-radius: 0.15rem;
}

.competition-player-search[b-knzrotdx1b] {
    margin-bottom: 0.75rem;
}

.competition-player-list[b-knzrotdx1b] {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    border: 1px solid rgba(13, 44, 85, 0.12);
    border-radius: 0.2rem;
    background: #fff;
    /* Long rosters scroll within the panel rather than pushing the count/Continue
       off-screen; the footer stays reachable. */
    max-height: 28rem;
    overflow-y: auto;
}

.competition-player-row[b-knzrotdx1b] {
    border-bottom: 1px solid rgba(13, 44, 85, 0.06);
}

.competition-player-row:last-child[b-knzrotdx1b] {
    border-bottom: none;
}

/* The whole row is the tap target (label wraps the checkbox + name + rating). */
.competition-player-label[b-knzrotdx1b] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    /* ISS-013: a comfortable row height at every width so the row is a tap target
       screen-wide, not only on mobile. */
    min-height: 44px;
}

.competition-player-check[b-knzrotdx1b] {
    /* Larger-than-default checkbox so the control itself clears the touch floor. */
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    flex: 0 0 auto;
}

.competition-player-name[b-knzrotdx1b] {
    flex: 1 1 auto;
    color: #24384f;
    font-weight: 500;
}

.competition-player-rating[b-knzrotdx1b] {
    flex: 0 0 auto;
    color: #4b5a6c;
    font-size: 0.9rem;
}

.competition-player-noresults[b-knzrotdx1b] {
    margin: 0 0 0.5rem;
}

/* Sticky footer (UX finding 3): the count + warning + actions pin to the bottom of
   the viewport while the roster scrolls, so Continue is always reachable (at 390px it
   was 74px below the fold with no affordance). A solid background + top border + a bit
   of padding keep it legible over scrolling content; the negative bottom margin lets
   it sit flush with the card edge. */
.competition-players-footer[b-knzrotdx1b] {
    position: sticky;
    bottom: 0;
    margin: 0.5rem -1rem -1rem;
    /* padding-bottom carries the home-indicator safe area (ux round 2 polish) so the
       footer content clears the gesture bar on tablets/notched devices; falls back to
       the base 0.75rem where env() is unsupported. */
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: #f6f8fb;
    border-top: 1px solid rgba(13, 44, 85, 0.12);
    z-index: 1;
}

/* FAB clearance (ux major; generalised feature-wide in rework round 1 — ISS-013's
   THIRD screen-by-screen recurrence, so killed at the source). The floating feedback
   button sits bottom-right (right: 1rem) and overlapped the right-aligned Continue by
   ~70px at 1440px. Every wizard step right-aligns its primary via space-between, so the
   clearance now lives on the BASE .competition-wizard-actions rule — it covers Details,
   Players, Pairs AND Review in one place rather than per-section selectors that kept
   missing the next new step. Back-only rows (error/empty states) carry a harmless extra
   right pad. Reset to 0 at ≤700px where the actions stack full-width. */
.competition-wizard-actions[b-knzrotdx1b] {
    padding-right: 4.5rem;
}

@media (max-width: 700px) {
    /* On mobile the actions stack full-width; the FAB clearance padding would
       indent them oddly, so drop it. */
    .competition-wizard-actions[b-knzrotdx1b] {
        padding-right: 0;
    }
}

.competition-player-count[b-knzrotdx1b] {
    color: #0d2c55;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.competition-player-oddwarning[b-knzrotdx1b] {
    margin-bottom: 0.75rem;
}

/* Loading skeleton rows for the player list. */
.competition-players-skeleton[b-knzrotdx1b] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.competition-player-skeleton-row[b-knzrotdx1b] {
    display: block;
    height: 44px;
    border-radius: 0.2rem;
    background: linear-gradient(90deg, #eef2f7 25%, #f6f8fb 50%, #eef2f7 75%);
    background-size: 200% 100%;
    animation: competition-setup-skeleton-b-knzrotdx1b 1.2s ease-in-out infinite;
}

@media (max-width: 700px) {
    /* Below 700px the pill rail clips (steps 5-6 disappear at 390px); hide it and
       show the compact "Step N of 6 · <Step>" label + progress bar instead, per
       the UX plan's specified mobile fallback. */
    .competition-step-rail[b-knzrotdx1b] {
        display: none;
    }

    .competition-step-progress[b-knzrotdx1b] {
        display: block;
    }

    /* Normal column order so Continue (the primary action, rendered last in markup)
       sits at the bottom — the natural primary position — with Back above it. Paired
       with the sticky footer this keeps Continue pinned in view (UX finding 9; was
       column-reverse, which put Continue on top, fighting the sticky-footer layout). */
    .competition-wizard-actions[b-knzrotdx1b] {
        flex-direction: column;
    }

    /* At ≤700px the wizard buttons go full-width (stacked column). The 44px floor +
       inline-flex centring now live in the base rule (rework round 1: floor applies
       at ALL viewports), so only the mobile-specific width is set here. */
    .competition-wizard-actions .btn[b-knzrotdx1b],
    .competition-wizard-actions[b-knzrotdx1b]  .btn,
    .club-card[b-knzrotdx1b]  .btn {
        width: 100%;
    }

    /* ISS-013 screen-wide touch floor on the Players step at ≤700px: the search
       input and each checklist row clear 44px. (The row min-height of 44px above
       already applies at all widths; restated context here keeps the search input
       and the count/footer comfortable on a phone.) */
    .competition-player-search[b-knzrotdx1b] {
        min-height: 44px;
    }

    .competition-player-label[b-knzrotdx1b] {
        /* A touch more vertical room on a phone so the row reads as a button. */
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
}

/* ── Pairs step (slice 3) ─────────────────────────────────────────────────── */
/* D2 informational note + cleared confirmation on the Players step. */
.competition-player-pairsnote[b-knzrotdx1b] {
    margin: 0 0 0.5rem;
}

.competition-player-pairscleared[b-knzrotdx1b] {
    margin: 0 0 0.75rem;
}

/* Method radio-cards (Balanced | Manual): selectable cards in the existing palette,
   mirroring the Create type-select cards (minus the disabled "coming soon" variant). */
.competition-pair-methods[b-knzrotdx1b] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.competition-pair-method[b-knzrotdx1b] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    text-align: left;
    background: #fff;
    border: 1px solid rgba(13, 44, 85, 0.18);
    border-radius: 0.3rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    /* Touch floor: a comfortable card height at every width. */
    min-height: 44px;
    width: 100%;
}

.competition-pair-method:hover[b-knzrotdx1b] {
    border-color: rgba(13, 44, 85, 0.4);
}

/* The radio is visually hidden; surface its keyboard focus on the label card so
   arrow-key navigation between the two methods is visible (accessibility). */
.competition-pair-method:has(.competition-pair-method-radio:focus-visible)[b-knzrotdx1b] {
    border-color: #0d2c55;
    box-shadow: 0 0 0 2px rgba(13, 44, 85, 0.35);
}

.competition-pair-method--selected[b-knzrotdx1b] {
    border-color: #0d2c55;
    box-shadow: inset 0 0 0 1px #0d2c55;
    background: #eef3fb;
}

/* When the radio is disabled (no manage permission / generating) the card reads
   inert. */
.competition-pair-method:has(.competition-pair-method-radio:disabled)[b-knzrotdx1b] {
    cursor: default;
    opacity: 0.7;
}

.competition-pair-method-title[b-knzrotdx1b] {
    font-weight: 600;
    color: #0d2c55;
}

.competition-pair-method-desc[b-knzrotdx1b] {
    color: #4b5a6c;
    font-size: 0.9rem;
}

/* LR-15: allocation-method cards on the Groups step — reuse the pair-method card
   treatment. Two cards side by side on desktop, stacked at ≤700px. */
.competition-alloc-methods[b-knzrotdx1b] {
    border: none;
    margin: 0 0 1rem;
    padding: 0;
}

.competition-alloc-methods-legend[b-knzrotdx1b] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0d2c55;
    margin-bottom: 0.5rem;
    padding: 0;
}

.competition-alloc-method-cards[b-knzrotdx1b] {
    display: flex;
    gap: 0.5rem;
}

.competition-alloc-method[b-knzrotdx1b] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    text-align: left;
    background: #fff;
    border: 1px solid rgba(13, 44, 85, 0.18);
    border-radius: 0.3rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    min-height: 44px;
    flex: 1 1 0;
}

.competition-alloc-method:hover[b-knzrotdx1b] {
    border-color: rgba(13, 44, 85, 0.4);
}

.competition-alloc-method:has(.competition-alloc-method-radio:focus-visible)[b-knzrotdx1b] {
    border-color: #0d2c55;
    box-shadow: 0 0 0 2px rgba(13, 44, 85, 0.35);
}

.competition-alloc-method--selected[b-knzrotdx1b] {
    border-color: #0d2c55;
    box-shadow: inset 0 0 0 1px #0d2c55;
    background: #eef3fb;
}

.competition-alloc-method:has(.competition-alloc-method-radio:disabled)[b-knzrotdx1b] {
    cursor: default;
    opacity: 0.7;
}

.competition-alloc-method-title[b-knzrotdx1b] {
    font-weight: 600;
    color: #0d2c55;
}

.competition-alloc-method-desc[b-knzrotdx1b] {
    color: #4b5a6c;
    font-size: 0.9rem;
}

@media (max-width: 700px) {
    /* Stack the two alloc-method cards on a tablet/phone — full-width, no scroll. */
    .competition-alloc-method-cards[b-knzrotdx1b] {
        flex-direction: column;
    }
}

.competition-pair-generate[b-knzrotdx1b] {
    margin-bottom: 1rem;
}

.competition-pair-generate .btn[b-knzrotdx1b] {
    min-height: 44px;
}

/* Manual builder: two player <select>s + an Add pair button. */
.competition-pair-manual[b-knzrotdx1b] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.competition-pair-manual-pickers[b-knzrotdx1b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.competition-pair-manual-pickers .form-select[b-knzrotdx1b] {
    flex: 1 1 auto;
    min-height: 44px;
}

.competition-pair-manual-plus[b-knzrotdx1b] {
    flex: 0 0 auto;
    color: #4b5a6c;
    font-weight: 700;
}

.competition-pair-manual .btn[b-knzrotdx1b] {
    min-height: 44px;
    align-self: flex-start;
}

.competition-pair-confirm[b-knzrotdx1b] {
    color: #1d6b3a;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

/* "Pairs (N)" heading: lightened toward the listhead convention (rework round 1,
   polish 10) — keeps the <h3> tag but reads as a quiet section label, not a second
   page title. */
.competition-pairs-heading[b-knzrotdx1b] {
    color: #4b5a6c;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0.5rem 0 0.5rem;
}

/* Pairs table (rework round 1, D5): five columns — Player 1 | Rating | Player 2 |
   Rating | Pair rating — with one-time column headers and bare numbers in cells.
   Reuses the table table-sm tokens; reflows to a stacked mini-card at ≤700px. */
.competition-pair-table[b-knzrotdx1b] {
    margin-bottom: 0.75rem;
    background: #fff;
}

.competition-pair-table thead th[b-knzrotdx1b] {
    color: #4b5a6c;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid rgba(13, 44, 85, 0.12);
}

.competition-pair-table tbody td[b-knzrotdx1b] {
    vertical-align: middle;
}

.competition-pair-row[b-knzrotdx1b] {
    min-height: 44px;
}

.competition-pair-cell-name[b-knzrotdx1b] {
    color: #24384f;
    font-weight: 500;
    /* LR-23 (round 4A): a "First Last" name (each <=20 chars) must render on ONE line at
       >=1024px, not wrap to two lines when the action column squeezes the row. Give the name
       cell room and keep it single-line; an extreme (>20-char) name ellipsis-truncates with
       the full name on hover (title attr) rather than wrapping or breaking the layout. The
       <=700px stacked-card layout (below) resets this so mobile names keep their own line. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
}

.competition-pair-cell-rating[b-knzrotdx1b],
.competition-pair-table-rating[b-knzrotdx1b] {
    color: #4b5a6c;
    font-size: 0.9rem;
}

/* LR-14: the rating-desc pair-number column. Narrow on the desktop table; the badge
   is a compact, legible label (Pair 1 = strongest). Shared with the Groups cards. */
.competition-pair-table-number[b-knzrotdx1b] {
    width: 4.5rem;
    white-space: nowrap;
}

.competition-pair-number-badge[b-knzrotdx1b] {
    display: inline-block;
    min-height: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    background: rgba(13, 44, 85, 0.08);
    color: #24384f;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.competition-pair-unpair[b-knzrotdx1b] {
    /* No btn-sm (rework round 1, must-fix 3): Unpair clears the 44px floor at every
       viewport like the other action buttons. */
    min-height: 44px;
}

.competition-pair-empty[b-knzrotdx1b],
.competition-pair-unpaired[b-knzrotdx1b],
.competition-pair-unrated-note[b-knzrotdx1b] {
    margin: 0 0 0.75rem;
}

@media (max-width: 700px) {
    /* Stacked-card reflow (≤700px): a 5-column table won't fit 390px, so each pair
       row becomes a stacked mini-card. Each member shows on its own line with its
       rating, and the pair rating + Unpair stack below — using the data-label on
       each cell so the column meaning rides along without the wide header row. */
    .competition-pair-table thead[b-knzrotdx1b] {
        /* Headers are visually hidden on mobile; the per-cell data-label carries the
           meaning. Kept in the DOM for screen-reader table semantics. */
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .competition-pair-table[b-knzrotdx1b],
    .competition-pair-table tbody[b-knzrotdx1b],
    .competition-pair-table tr[b-knzrotdx1b],
    .competition-pair-table td[b-knzrotdx1b] {
        display: block;
        width: 100%;
    }

    .competition-pair-row[b-knzrotdx1b] {
        border: 1px solid rgba(13, 44, 85, 0.12);
        border-radius: 0.2rem;
        background: #fff;
        margin-bottom: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    .competition-pair-table tbody td[b-knzrotdx1b] {
        display: flex;
        justify-content: space-between;
        gap: 0.6rem;
        padding: 0.25rem 0;
        border: none;
    }

    /* Inline label per cell (Pair rating: 1557) so each stacked line is self-
       describing without the column header. */
    .competition-pair-table tbody td[b-knzrotdx1b]::before {
        content: attr(data-label);
        color: #4b5a6c;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .competition-pair-cell-action[b-knzrotdx1b] {
        justify-content: flex-start;
    }

    .competition-pair-cell-action[b-knzrotdx1b]::before {
        content: none;
    }

    /* The pair-number badge already reads "Pair N" (LR-14), so suppress the redundant
       "Pair" data-label on its stacked-card line and left-align the badge. */
    .competition-pair-cell-number[b-knzrotdx1b] {
        justify-content: flex-start;
    }

    .competition-pair-cell-number[b-knzrotdx1b]::before {
        content: none;
    }

    /* LR-23 (round 4A): the desktop single-line/ellipsis name treatment is reset on the
       stacked-card layout — each name already gets its own flex line opposite its data-label,
       so it may wrap and use the full card width (no clipping at 390). */
    .competition-pair-cell-name[b-knzrotdx1b] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
    }

    .competition-pair-manual-pickers[b-knzrotdx1b] {
        flex-direction: column;
        align-items: stretch;
    }

    .competition-pair-manual-plus[b-knzrotdx1b] {
        text-align: center;
    }

    /* Add pair goes full-width at ≤700px (rework round 1, polish 7): a lone 86px pill
       among full-width siblings reads as broken. */
    .competition-pair-manual .btn[b-knzrotdx1b] {
        align-self: stretch;
        width: 100%;
    }
}

/* ── Slice 4: Pair Review ─────────────────────────────────────────────────
   Reuses the slice-3 pairs table (.competition-pair-table) with an action column +
   a locked-row chrome variant; the constraints panel reuses .club-card; the "Locked"
   pill reuses the .status-pill shape (status-pill--locked); all action buttons clear
   the 44px floor at every viewport (standing rule). */
/* Status line (ux-review major 4): neutral/cautionary by default — a lock/unlock/veto/
   swap-prompt confirmation, and crucially the veto-broke-your-pair message, must NOT
   read as success-green. Green is reserved for the genuinely positive completions
   (--positive: a successful redraw / swap). */
.competition-review-status[b-knzrotdx1b] {
    color: #24384f;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.competition-review-status--positive[b-knzrotdx1b] {
    color: #1b6e3b;
}

.competition-review-actions[b-knzrotdx1b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

/* Action buttons: 44px floor at ALL viewports (touch/kiosk rule), like the slice-3
   Unpair button — no btn-sm shrink below the floor. */
.competition-review-btn[b-knzrotdx1b] {
    min-height: 44px;
}

/* Locked-row chrome: a tinted row so a locked pair reads as "kept, don't touch". */
.competition-pair-row--locked[b-knzrotdx1b] {
    background: #f0f5ff;
}

.competition-pair-row--locked .competition-pair-cell-name[b-knzrotdx1b] {
    color: #1b3a66;
}

/* "Locked" pill — the status-pill shape with a distinct (calm blue) treatment, kept
   separate from the red live-pill (reserved for live sessions). */
.status-pill--locked[b-knzrotdx1b] {
    background: #dbe7ff;
    color: #1b3a66;
    /* Vertically centre the pill against the 44px Unlock button in the same flex
       action cell (ux-review polish 6) — without this the shorter pill sat top-aligned. */
    align-self: center;
}

/* Constraints panel: a tinted background lifts it off the parent white card so the
   locks/vetoes summary reads as its own region (ux-review polish 7). */
.competition-constraints[b-knzrotdx1b] {
    margin: 0.75rem 0;
    background: #eef3fb;
}

.competition-constraints-heading[b-knzrotdx1b] {
    color: #4b5a6c;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.5rem;
}

.competition-constraints-group-label[b-knzrotdx1b] {
    font-weight: 600;
    color: #24384f;
    margin: 0.5rem 0 0.25rem;
}

.competition-constraints-empty[b-knzrotdx1b] {
    margin: 0 0 0.5rem;
}

.competition-constraints-list[b-knzrotdx1b] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
}

.competition-constraints-row[b-knzrotdx1b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.25rem 0;
}

.competition-constraints-names[b-knzrotdx1b] {
    color: #24384f;
}

.competition-addveto-actions[b-knzrotdx1b],
.competition-swap-actions[b-knzrotdx1b],
.competition-clearall-confirm-actions[b-knzrotdx1b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.competition-review-regenerate[b-knzrotdx1b] {
    margin: 0.75rem 0;
}

.competition-review-regenerate .btn[b-knzrotdx1b] {
    min-height: 44px;
}

.competition-review-regenerate-help[b-knzrotdx1b],
.competition-review-continue-help[b-knzrotdx1b],
.competition-review-unpaired[b-knzrotdx1b],
.competition-pair-clearall-help[b-knzrotdx1b] {
    margin: 0.4rem 0 0;
}

/* LR-13: "Clear all" sits as a quieter secondary below the single Regenerate.
   A faint top divider separates the destructive constraint-clear from the
   everyday redraw so the two can't be confused. */
.competition-pair-clearall[b-knzrotdx1b] {
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle, #e3e8ef);
}

.competition-pair-clearall .btn[b-knzrotdx1b] {
    min-height: 44px;
}

/* Swap mode: a contained region with the prompt + radio picks. */
.competition-swap-mode[b-knzrotdx1b] {
    border: 1px solid rgba(13, 44, 85, 0.18);
    border-radius: 0.3rem;
    background: #fbfdff;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.competition-swap-prompt[b-knzrotdx1b] {
    font-weight: 600;
    color: #24384f;
    margin: 0 0 0.5rem;
}

.competition-swap-fieldset[b-knzrotdx1b] {
    border: none;
    padding: 0;
    margin: 0 0 0.5rem;
}

.competition-swap-radio[b-knzrotdx1b] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    margin-right: 1rem;
}

/* Swap step-1 Cancel (ux-review major 2): a full-width way out before a target is
   picked. min-height keeps it on the 44px touch floor like every other action. */
.competition-swap-step1-actions[b-knzrotdx1b] {
    margin-top: 0.5rem;
}

.competition-swap-step1-actions .btn[b-knzrotdx1b] {
    width: 100%;
    min-height: 44px;
}

/* Source-row marker (ux-review major 2): the row being swapped FROM shows a label
   instead of a blank action cell, so the organiser sees which pair is the source. */
.competition-swap-source-marker[b-knzrotdx1b] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    font-style: italic;
    color: #4b5a6c;
}

.competition-clearall-confirm[b-knzrotdx1b] {
    margin-top: 0.5rem;
}

@media (max-width: 700px) {
    /* Review actions stack and go full-width so each ≥44px tap target wraps cleanly
       at 390px — never a horizontal scroll. The action cell rides the same stacked-
       card reflow the slice-3 table already provides (display:block + data-label). */
    .competition-review-actions[b-knzrotdx1b] {
        flex-direction: column;
        align-items: stretch;
    }

    .competition-review-actions .btn[b-knzrotdx1b],
    .competition-review-actions .status-pill[b-knzrotdx1b] {
        width: 100%;
    }

    .competition-review-actions .status-pill[b-knzrotdx1b] {
        justify-content: center;
    }

    .competition-constraints-row[b-knzrotdx1b] {
        flex-direction: column;
        align-items: stretch;
    }

    .competition-constraints-row .btn[b-knzrotdx1b] {
        width: 100%;
    }

    .competition-addveto-actions .btn[b-knzrotdx1b],
    .competition-swap-actions .btn[b-knzrotdx1b],
    .competition-clearall-confirm-actions .btn[b-knzrotdx1b],
    .competition-review-regenerate .btn[b-knzrotdx1b],
    .competition-pair-clearall .btn[b-knzrotdx1b] {
        width: 100%;
    }

    .competition-swap-radio[b-knzrotdx1b] {
        display: flex;
    }
}

/* ── Groups step (slice 5) ─────────────────────────────────────────────────── */

/* Size picker (3/4/5): square radio cards reusing the pair-method card tokens
   (border, selected inset + tint). The whole card is the tap target; the radio
   itself is visually hidden, the big number is the label. 44px+ touch floor. */
.competition-group-size[b-knzrotdx1b] {
    border: 0;
    margin: 0 0 1rem;
    padding: 0;
}

/* "Pairs per group" legend (rework round 1, polish 7): unified with the listhead /
   section-label treatment (uppercase 0.85rem muted) so it matches
   .competition-groups-heading rather than reading as a bold sub-title. */
.competition-group-size-legend[b-knzrotdx1b] {
    color: #4b5a6c;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}

.competition-group-size-options[b-knzrotdx1b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.competition-size-card[b-knzrotdx1b] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 56px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(13, 44, 85, 0.25);
    border-radius: 0.5rem;
    background: #fff;
    cursor: pointer;
    user-select: none;
}

.competition-size-card--selected[b-knzrotdx1b] {
    box-shadow: inset 0 0 0 1px #0d2c55;
    background: #eef3fb;
}

/* Keyboard focus ring (rework round 1, polish 5): the radio is visually hidden, so
   surface its focus on the card — copied from the pair-method cards
   (.competition-pair-method:has(...:focus-visible)) so arrow-key navigation between
   sizes is visible. */
.competition-size-card:has(input:focus-visible)[b-knzrotdx1b] {
    border-color: #0d2c55;
    box-shadow: 0 0 0 2px rgba(13, 44, 85, 0.35);
}

.competition-size-card:has(input:disabled)[b-knzrotdx1b] {
    cursor: default;
    opacity: 0.7;
}

/* Hide the native radio; the card + number is the control. */
.competition-size-card input[b-knzrotdx1b] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.competition-size-card-number[b-knzrotdx1b] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0d2c55;
}

/* Before-confirm preview: the resulting group sizes + a plain summary. */
.competition-group-preview[b-knzrotdx1b] {
    margin: 0 0 1rem;
    padding: 0.75rem;
    border: 1px solid rgba(13, 44, 85, 0.12);
    border-radius: 0.5rem;
    background: #f7faff;
}

.competition-group-preview-sizes[b-knzrotdx1b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.35rem;
}

.competition-group-preview-chip[b-knzrotdx1b] {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 0.4rem;
    background: #e6eefb;
    color: #24384f;
    font-weight: 600;
    font-size: 0.9rem;
}

.competition-group-preview-note[b-knzrotdx1b] {
    margin: 0;
}

.competition-groups-generate[b-knzrotdx1b] {
    margin-bottom: 1rem;
}

.competition-groups-generate .btn[b-knzrotdx1b] {
    min-height: 44px;
}

/* "Groups generated." confirmation (rework round 1, polish 4): a distinct treatment
   so it doesn't read as a plain paragraph, WITHOUT going success-green (the kiosk/no-
   toast + reserved-green rules). A leading check glyph carries the "done" signal in a
   calm tint; the text stays the neutral navy of the Review status line. */
.competition-groups-status[b-knzrotdx1b] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: #24384f;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.competition-groups-status[b-knzrotdx1b]::before {
    content: "\2713"; /* ✓ */
    color: #1b6e3b;
    font-weight: 700;
    flex: 0 0 auto;
}

/* Regenerate consequence hint (rework round 1, major 2): a quiet help-text note
   directly under the Generate-again button. */
.competition-groups-generate-note[b-knzrotdx1b] {
    margin: 0.4rem 0 0;
}

.competition-groups-heading[b-knzrotdx1b] {
    color: #4b5a6c;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0.5rem 0 0.5rem;
}

.competition-groups-empty[b-knzrotdx1b] {
    margin: 0 0 0.75rem;
}

/* Group preview cards: a responsive grid of cards, one per group. */
.competition-group-cards[b-knzrotdx1b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.competition-group-card[b-knzrotdx1b] {
    border: 1px solid rgba(13, 44, 85, 0.15);
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: #fff;
}

.competition-group-card-title[b-knzrotdx1b] {
    color: #0d2c55;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

/* LR-31c: group-header colour-coding on the Groups-step preview cards (mirrors the running
   surface's CompetitionInProgress accents - same palette, scoped here too since component CSS
   does not cross-share). A coloured left-border + faint tint per group index; dark navy text
   stays (AA on every tint). No new brand colours. */
.competition-group-card-title.competition-group-accent-0[b-knzrotdx1b],
.competition-group-card-title.competition-group-accent-1[b-knzrotdx1b],
.competition-group-card-title.competition-group-accent-2[b-knzrotdx1b],
.competition-group-card-title.competition-group-accent-3[b-knzrotdx1b],
.competition-group-card-title.competition-group-accent-4[b-knzrotdx1b],
.competition-group-card-title.competition-group-accent-5[b-knzrotdx1b] {
    border-left: 4px solid transparent;
    padding: 0.1rem 0 0.1rem 0.5rem;
    border-radius: 0.2rem;
}

.competition-group-accent-0[b-knzrotdx1b] { border-left-color: #2563a8; background: rgba(37, 99, 168, 0.10); }
.competition-group-accent-1[b-knzrotdx1b] { border-left-color: #1f8a70; background: rgba(31, 138, 112, 0.10); }
.competition-group-accent-2[b-knzrotdx1b] { border-left-color: #b3541e; background: rgba(179, 84, 30, 0.10); }
.competition-group-accent-3[b-knzrotdx1b] { border-left-color: #7048a8; background: rgba(112, 72, 168, 0.10); }
.competition-group-accent-4[b-knzrotdx1b] { border-left-color: #a01e58; background: rgba(160, 30, 88, 0.10); }
.competition-group-accent-5[b-knzrotdx1b] { border-left-color: #4b7a1e; background: rgba(75, 122, 30, 0.10); }

.competition-group-card-pairs[b-knzrotdx1b] {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.competition-group-card-pair[b-knzrotdx1b] {
    color: #24384f;
    font-weight: 500;
    padding: 0.2rem 0;
    /* LR-16: pair number badge + names + trailing bare rating on one line. The names
       flex-grow to push the rating to the right; the layout wraps cleanly at 390. */
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.competition-group-card-pair-names[b-knzrotdx1b] {
    flex: 1 1 auto;
    min-width: 0;
}

.competition-group-card-pair-rating[b-knzrotdx1b] {
    color: #4b5a6c;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.competition-group-card-fixtures[b-knzrotdx1b] {
    margin: 0;
}

@media (max-width: 700px) {
    /* Single-column cards on a tablet/phone — no horizontal scroll. */
    .competition-group-cards[b-knzrotdx1b] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    /* Preview chips: hold at least two per row on the narrowest phone (rework round 1,
       polish 6). The flex container has gap:0.4rem, so a calc(50% - 0.2rem) basis (half
       the gap) leaves exactly two across; further chips wrap below. flex-grow is 0 so a
       lone trailing chip on an odd row stays half-width rather than stretching to fill
       the row (which read as a broken full-width pill). */
    .competition-group-preview-chip[b-knzrotdx1b] {
        flex: 0 1 calc(50% - 0.2rem);
        text-align: center;
    }
}

/* ── Rules step (slice 6) ──────────────────────────────────────────────────── */

/* Display-fixed rules lines: #24384f on white = ~10:1, well past AA. */
.competition-rules-line[b-knzrotdx1b] {
    color: #24384f;
    margin: 0 0 0.75rem;
}

.competition-rules-tiebreak[b-knzrotdx1b] {
    color: #4b5a6c; /* ~7:1 on white — AA pass */
    font-size: 0.95rem;
}

/* Hint shown when no group stage exists yet: explains why Start is absent.
   #4b5a6c on white ~7:1 — AA pass. */
.competition-rules-no-groups-hint[b-knzrotdx1b] {
    color: #4b5a6c;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

/* LR-31d: the lightweight inline Start-step summary - a compact key/value read-out of the
   choices the organiser is about to commit. A bordered tint block (not a heavy card) so it
   reads as a confirm, not a new section. Each row is a label/value pair; wraps cleanly at 390.
   Display-only, reuses existing wizard values. NOT a Review screen (LR-5 removal stands). */
.competition-rules-summary[b-knzrotdx1b] {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(13, 44, 85, 0.15);
    border-radius: 0.5rem;
    background: rgba(13, 44, 85, 0.04);
}

.competition-rules-summary-item[b-knzrotdx1b] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
}

.competition-rules-summary-item:not(:last-child)[b-knzrotdx1b] {
    border-bottom: 1px solid rgba(13, 44, 85, 0.08);
}

.competition-rules-summary-item dt[b-knzrotdx1b] {
    color: #4b5a6c;
    font-weight: 600;
    margin: 0;
}

.competition-rules-summary-item dd[b-knzrotdx1b] {
    color: #0d2c55;
    font-weight: 600;
    margin: 0;
    text-align: right;
}

/* LR-17: the Scoring rules group (Game over score + Max score), display-only at the §6
   values. Same uppercase-legend rhythm as Match format below. */
.competition-rules-scoring[b-knzrotdx1b] {
    border: 0;
    margin: 1.25rem 0 1rem;
    padding: 0;
}

.competition-rules-scoring-legend[b-knzrotdx1b] {
    color: #4b5a6c;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}

.competition-rules-scoring-grid[b-knzrotdx1b] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.competition-rules-scoring-item[b-knzrotdx1b] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
}

.competition-rules-scoring-label[b-knzrotdx1b] {
    color: #4b5a6c;
    font-size: 0.9rem;
}

.competition-rules-scoring-value[b-knzrotdx1b] {
    color: #24384f;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Breathing room before the MATCH FORMAT legend (rework round 2, polish 8): the prior
   rules line sat too tight against the uppercase legend. */
.competition-rules-format[b-knzrotdx1b] {
    border: 0;
    margin: 1.25rem 0 1rem;
    padding: 0;
}

.competition-rules-format-legend[b-knzrotdx1b] {
    color: #4b5a6c;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}

/* Format radios: display-only (both disabled). The selected one reads as chosen, the
   disabled Best-of-3 is muted with the coming-soon pill. 44px touch floor (standing
   rule, even though non-interactive — keeps the row rhythm + a real tap area). */
.competition-rules-format-option[b-knzrotdx1b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.25rem 0.5rem;
    color: #24384f;
}

.competition-rules-format-option--selected[b-knzrotdx1b] {
    font-weight: 600;
}

.competition-rules-format-option--disabled[b-knzrotdx1b] {
    color: #6b7888; /* ~4.6:1 on white — AA pass for the muted disabled option */
}

/* Local coming-soon pill (CSS isolation scopes the Create-screen one to that
   component; this Rules screen needs its own copy with the same tokens). */
.coming-soon-pill[b-knzrotdx1b] {
    display: inline-block;
    background: #e6ebf2;
    color: #5a6b80;
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
}

/* Head-start section: the moat centrepiece. The outcome copy reads FIRST and
   prominent (trust-critical — the S2 display lesson). A subtle card sets it apart. */
.competition-rules-headstart[b-knzrotdx1b] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 1rem 0 1.25rem;
    padding: 1rem;
    border: 1px solid rgba(13, 44, 85, 0.15);
    border-radius: 0.5rem;
    background: #f7faff;
}

/* Matches the group-card-title convention (rework round 2, polish 3): 1.05rem / 700. */
.competition-rules-headstart-heading[b-knzrotdx1b] {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0d2c55;
}

/* The outcome line: larger + darker than help text so it reads as the headline. */
.competition-rules-headstart-copy[b-knzrotdx1b] {
    margin: 0;
    color: #24384f;
    font-size: 1rem;
    line-height: 1.5;
}

/* "What's a head start?" toggle: a plain text link, ≥44px tap row, no maths behind it.
   align-self: flex-start (rework round 2, polish 4) keeps it left-aligned inside the flex
   headstart card at every viewport — it was centring at 700/390 before. */
.competition-rules-headstart-help-toggle[b-knzrotdx1b] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.1rem;
    color: #0d2c55;
    text-decoration: underline;
    font-size: 0.95rem;
}

.competition-rules-headstart-help[b-knzrotdx1b] {
    margin-top: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.4rem;
    background: #eef3fb;
    color: #24384f;
    line-height: 1.5;
}

/* Start competition primary action sits on the 44px floor like every wizard action. */
.competition-rules-start[b-knzrotdx1b] {
    min-height: 44px;
}

/* Terminal "Competition started" confirmation panel. */
.competition-rules-started[b-knzrotdx1b] {
    margin: 0 0 1rem;
}

/* Locked-state review hint (rework round 2, MAJOR 2): points the organiser at the steps
   above; pairs with the secondary "Review setup" NavLink so the started wizard isn't a
   dead end on mobile (where the rail pills are hidden). #4b5a6c on white ~7:1 — AA pass. */
.competition-rules-review-hint[b-knzrotdx1b] {
    color: #4b5a6c;
    margin: 0 0 0.75rem;
}

/* The post-Start read-only lock notice (shown on the setup steps once started). */
.competition-started-lock[b-knzrotdx1b] {
    margin-bottom: 1rem;
}

/* LR-21 (round 4A): the started-state read-only Rules view. Reuses the shared LR-17 grouping
   (.competition-rules-scoring / .competition-rules-format) verbatim; this wrapper just spaces
   it below the started confirmation + review hint and gives it a section heading. */
.competition-rules-started-rules[b-knzrotdx1b] {
    margin: 0 0 1rem;
}

.competition-rules-started-rules-heading[b-knzrotdx1b] {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0d2c55;
}
/* /Components/Pages/CourtUtilisationReport.razor.rz.scp.css */
.reports-shell[b-0h8xfbu4h1] {
    max-width: 1180px;
    padding-bottom: 2.5rem;
}

.reports-crumb[b-0h8xfbu4h1] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.reports-crumb-link[b-0h8xfbu4h1] {
    background: none;
    border: none;
    padding: 0;
    color: #0d2c55;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.reports-crumb-link:hover[b-0h8xfbu4h1],
.reports-crumb-link:focus-visible[b-0h8xfbu4h1] {
    text-decoration: underline;
    outline: none;
}

.cu-head[b-0h8xfbu4h1] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.cu-head h1[b-0h8xfbu4h1] {
    margin: 0;
    color: #1f3f5e;
}

.cu-sub[b-0h8xfbu4h1] {
    color: #3d5a78;
    margin: 0.2rem 0 0;
}

.cu-head-actions[b-0h8xfbu4h1] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.cu-select-label[b-0h8xfbu4h1] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c7a8c;
    font-weight: 700;
    margin: 0;
}

.cu-select[b-0h8xfbu4h1] {
    border: 1px solid #d8e2ee;
    border-radius: 0.5rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem;
    color: #2a3a4d;
    background: #f7faff;
    font-weight: 600;
    max-width: 380px;
}

.cu-select:disabled[b-0h8xfbu4h1] {
    opacity: 0.55;
    cursor: default;
}

/* tiles */
.cu-tiles[b-0h8xfbu4h1] {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.cu-tile[b-0h8xfbu4h1] {
    background: #ffffff;
    border: 1px solid #c5cfde;
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
}

.cu-tile .lab[b-0h8xfbu4h1] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c7a8c;
    font-weight: 700;
}

.cu-tile .val[b-0h8xfbu4h1] {
    font-size: 1.9rem;
    font-weight: 800;
    color: #1f3f5e;
    line-height: 1.05;
    margin-top: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.cu-tile .val small[b-0h8xfbu4h1] {
    font-size: 0.95rem;
    font-weight: 700;
}

.cu-tile .sub[b-0h8xfbu4h1] {
    font-size: 0.78rem;
    color: #6c7a8c;
    margin-top: 0.35rem;
}

.cu-tile.hero[b-0h8xfbu4h1] {
    background: linear-gradient(135deg, #1d5c86, #2b6fa0);
    border-color: #1d5c86;
}

.cu-tile.hero .lab[b-0h8xfbu4h1] {
    color: #cfe2f2;
}

.cu-tile.hero .val[b-0h8xfbu4h1] {
    color: #ffffff;
    font-size: 2.4rem;
}

.cu-tile.hero .sub[b-0h8xfbu4h1] {
    color: #dceaf6;
}

/* cards */
.cu-card[b-0h8xfbu4h1] {
    background: #ffffff;
    border: 1px solid #c5cfde;
    border-radius: 0.75rem;
    margin-bottom: 1.15rem;
    padding: 1rem 1.2rem 1.2rem;
}

.cu-card-head[b-0h8xfbu4h1] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.cu-card-head h3[b-0h8xfbu4h1] {
    margin: 0;
    font-size: 1rem;
    color: #1f3f5e;
}

.cu-card-head .d[b-0h8xfbu4h1] {
    color: #6c7a8c;
    font-size: 0.82rem;
}

.cu-chart[b-0h8xfbu4h1] {
    position: relative;
}

.cu-callout[b-0h8xfbu4h1] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fdeccd;
    border: 1px solid #f0d690;
    border-radius: 0.65rem;
    padding: 0.7rem 0.9rem;
    color: #6e4700;
    font-size: 0.85rem;
    margin-top: 0.8rem;
}

.cu-callout b[b-0h8xfbu4h1] {
    color: #5a3c00;
}

.cu-callout .bi[b-0h8xfbu4h1] {
    font-size: 1.05rem;
    color: #cf7a1a;
    flex: 0 0 auto;
}

/* within-evening timeline */
.cu-timeline[b-0h8xfbu4h1] {
    margin-top: 0.3rem;
}

.cu-tlrow[b-0h8xfbu4h1] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0.45rem 0;
}

.cu-tlrow .c[b-0h8xfbu4h1] {
    width: 72px;
    flex: 0 0 72px;
    font-size: 0.8rem;
    color: #52617a;
    font-weight: 600;
}

.cu-tlrow .blocks[b-0h8xfbu4h1] {
    flex: 1;
    display: flex;
    gap: 2px;
    height: 22px;
}

.cu-tlrow .blk[b-0h8xfbu4h1] {
    flex: 1;
    border-radius: 2px;
    background: #dbe7f5;
}

.cu-tlrow .blk.on[b-0h8xfbu4h1] {
    background: #2e9c63;
}

.cu-tlrow .blk.idle[b-0h8xfbu4h1] {
    background: #f3d9bf;
}

.cu-tlkey[b-0h8xfbu4h1] {
    font-size: 0.76rem;
    color: #6c7a8c;
    margin-top: 0.7rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cu-tlkey i[b-0h8xfbu4h1] {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    margin-right: 0.35rem;
    vertical-align: middle;
}

.cu-tlkey .cu-sw-on[b-0h8xfbu4h1] {
    background: #2e9c63;
}

.cu-tlkey .cu-sw-idle[b-0h8xfbu4h1] {
    background: #f3d9bf;
}

.cu-tlkey-range[b-0h8xfbu4h1] {
    color: #9aa6b6;
}

/* the value-message strip */
.cu-msg[b-0h8xfbu4h1] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: linear-gradient(90deg, #eef6ff, #f6fbff);
    border: 1px solid #cfe1f4;
    border-radius: 0.75rem;
    padding: 0.9rem 1.1rem;
    color: #274a6b;
    font-size: 0.85rem;
}

.cu-msg .ic[b-0h8xfbu4h1] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #cfe6ff;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cu-msg .ic .bi[b-0h8xfbu4h1] {
    font-size: 1rem;
    color: #1d5c86;
}

.cu-msg .q[b-0h8xfbu4h1] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f3f5e;
}

@media (max-width: 820px) {
    .cu-tiles[b-0h8xfbu4h1] {
        grid-template-columns: repeat(2, 1fr);
    }
    .cu-head-actions[b-0h8xfbu4h1] {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .cu-tiles[b-0h8xfbu4h1] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/DemoIntro.razor.rz.scp.css */
.demo-intro-shell[b-k364hqi7u3] {
    max-width: 640px;
    margin: 2.5rem auto;
    padding: 0 1.5rem;
    color: #333;
    line-height: 1.6;
}

.demo-intro-card h1[b-k364hqi7u3] {
    color: #1f3f5e;
    margin-bottom: 0.4rem;
}

.demo-intro-preview[b-k364hqi7u3] {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem auto 1.4rem;
    border: 1px solid #d3dce4;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.demo-intro-error[b-k364hqi7u3] {
    background: #fde8e8;
    border: 1px solid #f5b5b5;
    color: #8b2331;
    border-radius: 0.45rem;
    padding: 0.5rem 0.75rem;
    margin: 0.75rem 0;
    font-size: 0.9rem;
}

.demo-intro-enter[b-k364hqi7u3] {
    margin: 1.4rem 0 0.5rem;
}

.demo-intro-subhead[b-k364hqi7u3] {
    margin-top: 1.6rem;
    font-weight: 600;
}

.demo-intro-benefits[b-k364hqi7u3] {
    list-style: none;
    margin: 0.6rem 0 1.2rem;
    padding: 0;
}

.demo-intro-benefits li[b-k364hqi7u3] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0.7rem 0;
}

.demo-intro-benefits li > svg[b-k364hqi7u3] {
    flex-shrink: 0;
    color: #1b6ec2;
    margin-top: 0.2rem;
}

.demo-intro-benefits li > span[b-k364hqi7u3] {
    flex: 1;
}

/* BL-074 parity: on phones the desktop screenshot pushed the entry button below
   the fold; drop it and tighten the top margin so "Enter the demo" is visible
   without scrolling. */
@media (max-width: 640px) {
    .demo-intro-shell[b-k364hqi7u3] {
        margin: 1rem auto;
    }

    .demo-intro-preview[b-k364hqi7u3] {
        display: none;
    }

    .demo-intro-enter[b-k364hqi7u3] {
        width: 100%;
    }
}
/* /Components/Pages/Feedback.razor.rz.scp.css */
.feedback-shell[b-ao8wbvv6f5] {
    min-height: calc(100vh - 5rem);
    display: grid;
    place-items: start center;
    padding: 1.5rem 0;
}

.feedback-card[b-ao8wbvv6f5] {
    width: min(40rem, 94vw);
    border: 1px solid #c4d1de;
    border-radius: 0.75rem;
    background: #f6f9fc;
    padding: 1.1rem;
}

.feedback-card h1[b-ao8wbvv6f5] {
    margin: 0 0 0.35rem;
    color: #1f3f5e;
}

.feedback-help[b-ao8wbvv6f5] {
    color: #5e748a;
    margin: 0 0 0.8rem;
}

.feedback-actions[b-ao8wbvv6f5] {
    margin-top: 0.9rem;
}

.feedback-error[b-ao8wbvv6f5] {
    margin-top: 0.75rem;
    border: 1px solid #d88f8f;
    background: #f7e3e3;
    color: #8a2d2d;
    border-radius: 0.5rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.88rem;
}

.feedback-success[b-ao8wbvv6f5] {
    margin-top: 0.5rem;
    border: 1px solid #9ac29a;
    background: #e4f3e4;
    color: #2d5b2d;
    border-radius: 0.5rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.92rem;
}
/* /Components/Pages/FramedClubRecap.razor.rz.scp.css */
/* #778 (player-mode shell E): the in-app framed club recap. Scoped to this page only.
   No new brand — the off-white app surface + a light card frame (mockup 16) around the
   same-origin #756 ?embed=1 iframe. The iframe is sized to its content by the #756
   auto-sizer; the min-height here is the pre-size / no-JS fallback so the recap is
   always visible. */

.framed-recap[b-imbmqlykn0] {
    max-width: 48rem;
    margin: 0 auto;
    padding: 1rem;
}

.framed-recap-frame[b-imbmqlykn0] {
    display: block;
    width: 100%;
    min-height: 70vh; /* fallback height before the same-origin auto-sizer measures content */
    border: 1px solid rgba(13, 44, 85, 0.12);
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(13, 44, 85, 0.08);
}

/* In-shell fallback for a night that couldn't be resolved (§6 Screen-4 error state). */
.framed-recap-fallback[b-imbmqlykn0] {
    text-align: center;
    margin: 0.75rem 0;
    color: #33475b;
}

.framed-recap-back[b-imbmqlykn0] {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* touch target */
    color: #0d6efd;
    font-weight: 600;
    text-decoration: none;
}

.framed-recap-back:hover[b-imbmqlykn0],
.framed-recap-back:focus-visible[b-imbmqlykn0] {
    text-decoration: underline;
}
/* /Components/Pages/MatchQualityReport.razor.rz.scp.css */
/* #521 Match-quality report. Mirrors AttendanceOverTimeReport.razor.css + the approved mockup. */
.reports-shell[b-u8tzgvmevw] {
    max-width: 1180px;
    padding-bottom: 2.5rem;
}

.reports-crumb[b-u8tzgvmevw] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.reports-crumb-link[b-u8tzgvmevw] {
    background: none;
    border: none;
    padding: 0;
    color: #0d2c55;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.reports-crumb-link:hover[b-u8tzgvmevw],
.reports-crumb-link:focus-visible[b-u8tzgvmevw] {
    text-decoration: underline;
    outline: none;
}

.mq-head[b-u8tzgvmevw] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.mq-head h1[b-u8tzgvmevw] {
    margin: 0;
    color: #1f3f5e;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.mq-badge[b-u8tzgvmevw] {
    display: inline-block;
    background: #e6f5ec;
    color: #1f7a4d;
    border: 1px solid #bfe3cd;
    border-radius: 0.4rem;
    padding: 0.12rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.mq-sub[b-u8tzgvmevw] {
    color: #3d5a78;
    margin: 0.2rem 0 0;
}

.mq-head-actions[b-u8tzgvmevw] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.mq-ranges[b-u8tzgvmevw] {
    display: flex;
    gap: 0.35rem;
    background: #eef3f9;
    border: 1px solid #d8e2ee;
    border-radius: 0.6rem;
    padding: 0.2rem;
}

.mq-settled-toggle[b-u8tzgvmevw] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #3d5a78;
    cursor: pointer;
    white-space: nowrap;
}

.mq-settled-toggle input[b-u8tzgvmevw] {
    cursor: pointer;
}

.mq-ranges button[b-u8tzgvmevw] {
    border: none;
    background: none;
    color: #4a5b70;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 0.45rem;
    cursor: pointer;
}

.mq-ranges button.on[b-u8tzgvmevw] {
    background: #ffffff;
    color: #1f3f5e;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.12);
}

.mq-ranges button:disabled[b-u8tzgvmevw] {
    cursor: default;
    opacity: 0.55;
}

/* tiles */
.mq-tiles[b-u8tzgvmevw] {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.mq-tile[b-u8tzgvmevw] {
    background: #ffffff;
    border: 1px solid #c5cfde;
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
}

.mq-tile .lab[b-u8tzgvmevw] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c7a8c;
    font-weight: 700;
}

.mq-tile .val[b-u8tzgvmevw] {
    font-size: 1.9rem;
    font-weight: 800;
    color: #1f3f5e;
    line-height: 1.05;
    margin-top: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.mq-tile .sub[b-u8tzgvmevw] {
    font-size: 0.78rem;
    color: #6c7a8c;
    margin-top: 0.35rem;
}

/* hero tile (competitive %) — green gradient per the mockup */
.mq-tile.hero[b-u8tzgvmevw] {
    background: linear-gradient(135deg, #1f7a4d, #2f8f5e);
    border-color: #1f7a4d;
}

.mq-tile.hero .lab[b-u8tzgvmevw] {
    color: #bfe6cf;
}

.mq-tile.hero .val[b-u8tzgvmevw] {
    color: #ffffff;
    font-size: 2.5rem;
}

.mq-tile.hero .sub[b-u8tzgvmevw] {
    color: #d7f0e1;
}

/* two-card grid: histogram (wider) + donut */
.mq-grid[b-u8tzgvmevw] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.15rem;
    margin-bottom: 1.15rem;
}

.mq-card[b-u8tzgvmevw] {
    background: #ffffff;
    border: 1px solid #c5cfde;
    border-radius: 0.75rem;
    padding: 1rem 1.2rem 1.2rem;
}

.mq-card-head[b-u8tzgvmevw] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.mq-card-head h3[b-u8tzgvmevw] {
    margin: 0;
    font-size: 1rem;
    color: #1f3f5e;
}

.mq-card-head .d[b-u8tzgvmevw] {
    color: #6c7a8c;
    font-size: 0.82rem;
}

.mq-card-body[b-u8tzgvmevw] {
    padding-top: 0.25rem;
}

.mq-chart[b-u8tzgvmevw] {
    position: relative;
    height: 230px;
}

.mq-chart-caption[b-u8tzgvmevw] {
    font-size: 0.72rem;
    color: #9aa6b6;
    text-align: center;
    margin-top: 0.5rem;
}

.mq-chart-foot[b-u8tzgvmevw] {
    font-size: 0.72rem;
    color: #9aa6b6;
    text-align: center;
    margin: 0.35rem 0 0;
}

/* donut */
.mq-donut[b-u8tzgvmevw] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.mq-ring-wrap[b-u8tzgvmevw] {
    position: relative;
    width: 150px;
    height: 150px;
    max-width: 100%;
    flex: 0 0 auto;
}

.mq-ring-centre[b-u8tzgvmevw] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    pointer-events: none;
}

.mq-ring-centre b[b-u8tzgvmevw] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1f3f5e;
    display: block;
}

.mq-ring-centre span[b-u8tzgvmevw] {
    display: block;
    font-size: 0.62rem;
    color: #6c7a8c;
    line-height: 1.2;
    margin-top: 0.1rem;
}

.mq-legend[b-u8tzgvmevw] {
    font-size: 0.8rem;
    color: #42526a;
    flex: 1 1 180px;
    min-width: 170px;
}

.mq-legend > div[b-u8tzgvmevw] {
    margin: 0.3rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mq-legend i[b-u8tzgvmevw] {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    display: inline-block;
    flex: 0 0 auto;
}

.mq-legend i.dot-green[b-u8tzgvmevw] {
    background: #1f7a4d;
}

.mq-legend i.dot-track[b-u8tzgvmevw] {
    background: #eef2f7;
    border: 1px solid #d6deea;
}

.mq-legend-secondary[b-u8tzgvmevw] {
    color: #52617a;
    font-size: 0.76rem;
    margin-top: 0.4rem;
}

.mq-legend-note[b-u8tzgvmevw] {
    color: #6c7a8c;
    font-size: 0.74rem;
    margin: 0.5rem 0 0;
    line-height: 1.4;
}

/* headline message strip */
.mq-msg[b-u8tzgvmevw] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: linear-gradient(90deg, #eef6ff, #f6fbff);
    border: 1px solid #cfe1f4;
    border-radius: 0.75rem;
    padding: 0.9rem 1.1rem;
    color: #274a6b;
    font-size: 0.85rem;
    line-height: 1.45;
    margin-bottom: 1rem;
}

.mq-msg .q[b-u8tzgvmevw] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f3f5e;
}

.mq-msg-ic[b-u8tzgvmevw] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #cfe6ff;
    flex: 0 0 auto;
}

.mq-note[b-u8tzgvmevw] {
    font-size: 0.72rem;
    color: #9aa6b6;
    line-height: 1.5;
    margin: 0;
}

.mq-empty[b-u8tzgvmevw] {
    color: #6c7a8c;
    padding: 1.5rem 0;
    text-align: center;
    margin: 0;
}

/* error state (distinct from empty) */
.mq-error strong[b-u8tzgvmevw] {
    display: block;
    color: #b3261e;
    margin-bottom: 0.4rem;
}

.mq-error p[b-u8tzgvmevw] {
    color: #6c7a8c;
}

@media (max-width: 900px) {
    .mq-grid[b-u8tzgvmevw] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .mq-tiles[b-u8tzgvmevw] {
        grid-template-columns: repeat(2, 1fr);
    }
    .mq-head-actions[b-u8tzgvmevw] {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .mq-tiles[b-u8tzgvmevw] {
        grid-template-columns: 1fr;
    }
    /* dial the hero value back so it stays proportionate to a full-width single-column card */
    .mq-tile.hero .val[b-u8tzgvmevw] {
        font-size: 2rem;
    }
}
/* /Components/Pages/MemberEngagementReport.razor.rz.scp.css */
.reports-shell[b-3tohjh3xyp] {
    max-width: 1180px;
    padding-bottom: 2.5rem;
}

.reports-crumb[b-3tohjh3xyp] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.reports-crumb-link[b-3tohjh3xyp] {
    background: none;
    border: none;
    padding: 0;
    color: #0d2c55;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.reports-crumb-link:hover[b-3tohjh3xyp],
.reports-crumb-link:focus-visible[b-3tohjh3xyp] {
    text-decoration: underline;
    outline: none;
}

.aot-head[b-3tohjh3xyp] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.aot-head h1[b-3tohjh3xyp] {
    margin: 0;
    color: #1f3f5e;
}

.aot-sub[b-3tohjh3xyp] {
    color: #3d5a78;
    margin: 0.2rem 0 0;
}

.aot-head-actions[b-3tohjh3xyp] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.aot-ranges[b-3tohjh3xyp] {
    display: flex;
    gap: 0.35rem;
    background: #eef3f9;
    border: 1px solid #d8e2ee;
    border-radius: 0.6rem;
    padding: 0.2rem;
}

.aot-ranges button[b-3tohjh3xyp] {
    border: none;
    background: none;
    color: #4a5b70;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 0.45rem;
    cursor: pointer;
}

.aot-ranges button.on[b-3tohjh3xyp] {
    background: #ffffff;
    color: #1f3f5e;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.12);
}

.aot-ranges button:disabled[b-3tohjh3xyp] {
    cursor: default;
    opacity: 0.55;
}

/* tiles */
.aot-tiles[b-3tohjh3xyp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.aot-tile[b-3tohjh3xyp] {
    background: #ffffff;
    border: 1px solid #c5cfde;
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
}

.aot-tile .lab[b-3tohjh3xyp] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c7a8c;
    font-weight: 700;
}

.aot-tile .val[b-3tohjh3xyp] {
    font-size: 1.9rem;
    font-weight: 800;
    color: #1f3f5e;
    line-height: 1.05;
    margin-top: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.aot-tile .sub[b-3tohjh3xyp] {
    font-size: 0.78rem;
    color: #6c7a8c;
    margin-top: 0.35rem;
}

/* card */
.aot-card[b-3tohjh3xyp] {
    background: #ffffff;
    border: 1px solid #c5cfde;
    border-radius: 0.75rem;
    margin-bottom: 1.15rem;
    padding: 1rem 1.2rem 1.2rem;
}

.aot-card-head[b-3tohjh3xyp] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.aot-card-head h3[b-3tohjh3xyp] {
    margin: 0;
    font-size: 1rem;
    color: #1f3f5e;
}

.aot-card-head .d[b-3tohjh3xyp] {
    color: #6c7a8c;
    font-size: 0.82rem;
}

/* band chart */
.me-chart[b-3tohjh3xyp] {
    position: relative;
    height: 240px;
}

/* per-band legend rows under the chart (count + edge label + percent) */
.me-legend-rows[b-3tohjh3xyp] {
    margin-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Legend rows are buttons (#517): clickable + keyboard-activatable, each selects its band. */
.me-legend-row[b-3tohjh3xyp] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: #52617a;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    font-family: inherit;
}

.me-legend-row:hover[b-3tohjh3xyp] {
    background: #f3f7fc;
}

.me-legend-row:focus-visible[b-3tohjh3xyp] {
    outline: 2px solid #1f6f43;
    outline-offset: 1px;
}

.me-legend-row.selected[b-3tohjh3xyp] {
    background: #eef6f1;
    border-color: #6cae86;
}

.me-swatch[b-3tohjh3xyp] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex: 0 0 14px;
}

.me-swatch-0[b-3tohjh3xyp] { background: #1f6f43; }
.me-swatch-1[b-3tohjh3xyp] { background: #3a8f5f; }
.me-swatch-2[b-3tohjh3xyp] { background: #6cae86; }
.me-swatch-3[b-3tohjh3xyp] { background: #aac8b6; }

.me-legend-name[b-3tohjh3xyp] {
    width: 128px;
    flex: 0 0 128px;
    font-weight: 600;
    color: #2a3a4d;
}

.me-legend-cnt[b-3tohjh3xyp] {
    flex: 1;
}

.me-legend-cnt b[b-3tohjh3xyp] {
    color: #1f3f5e;
}

.me-legend-pct[b-3tohjh3xyp] {
    font-weight: 700;
    color: #1f3f5e;
    font-variant-numeric: tabular-nums;
}

/* constructive callout */
.me-callout[b-3tohjh3xyp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fdeccd;
    border: 1px solid #f0d690;
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    color: #6e4700;
    font-size: 0.82rem;
    margin-top: 1rem;
}

.me-callout b[b-3tohjh3xyp] {
    color: #5a3c00;
}

/* drill-down panel: who's in the selected band (#517) */
.me-drill[b-3tohjh3xyp] {
    margin-top: 1rem;
    border: 1px solid #d8e2ee;
    border-radius: 0.625rem;
    background: #fbfdff;
    padding: 0.9rem 1rem 1rem;
}

.me-drill-head[b-3tohjh3xyp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.me-drill-head h4[b-3tohjh3xyp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.95rem;
    color: #1f3f5e;
}

.me-drill-clear[b-3tohjh3xyp] {
    margin-left: auto;
    background: none;
    border: 1px solid #c5cfde;
    border-radius: 0.45rem;
    color: #4a5b70;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
}

.me-drill-clear:hover[b-3tohjh3xyp],
.me-drill-clear:focus-visible[b-3tohjh3xyp] {
    background: #eef3f9;
    outline: none;
}

.me-drill-empty[b-3tohjh3xyp] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin: 0.25rem 0 0;
}

.me-drill-table[b-3tohjh3xyp] {
    margin: 0;
    font-size: 0.86rem;
}

.me-drill-table th[b-3tohjh3xyp] {
    color: #6c7a8c;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
}

.me-drill-table td[b-3tohjh3xyp],
.me-drill-table th[b-3tohjh3xyp] {
    vertical-align: middle;
}

.me-drill-table .numeric[b-3tohjh3xyp] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* member name → in-app link (matches the report link styling) */
.me-member-link[b-3tohjh3xyp] {
    background: none;
    border: none;
    padding: 0;
    color: #0d2c55;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.me-member-link:hover[b-3tohjh3xyp],
.me-member-link:focus-visible[b-3tohjh3xyp] {
    text-decoration: underline;
    outline: none;
}

/* status pill — self-contained copy of the Attendance-trends palette (scoped CSS doesn't cross
   components, so we can't reuse .trends-pill from AttendanceTrendsReport here). */
.trends-pill[b-3tohjh3xyp] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.trends-pill.active[b-3tohjh3xyp] { background: #d8f0e2; color: #1f7a4d; }
.trends-pill.new[b-3tohjh3xyp] { background: #d8e8f8; color: #1861ac; }
.trends-pill.lapsing[b-3tohjh3xyp] { background: #fbeccd; color: #a9750a; }
.trends-pill.dormant[b-3tohjh3xyp] { background: #e7ebf1; color: #6c7a8c; }

@media (max-width: 820px) {
    .aot-tiles[b-3tohjh3xyp] {
        grid-template-columns: repeat(2, 1fr);
    }
    .aot-head-actions[b-3tohjh3xyp] {
        margin-left: 0;
    }
    .me-legend-name[b-3tohjh3xyp] {
        width: 96px;
        flex: 0 0 96px;
    }
}

@media (max-width: 480px) {
    .aot-tiles[b-3tohjh3xyp] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Members.razor.rz.scp.css */
.club-management-shell[b-wg5lf94s9y] {
    padding: 0;
}

.club-management-shell h1[b-wg5lf94s9y] {
    color: #0d2c55;
    font-size: 2.5rem;
    margin: 0 0 1rem;
}

.membership-tabs .nav-link[b-wg5lf94s9y] {
    color: #1f4267;
    font-weight: 700;
}

.membership-tabs .nav-link.active[b-wg5lf94s9y] {
    color: #0d2c55;
}

.club-card[b-wg5lf94s9y] {
    background: #f6f8fb;
    border-radius: 0.2rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(13, 44, 85, 0.08);
}

.club-card h2[b-wg5lf94s9y] {
    color: #24384f;
    font-size: 2rem;
    margin: 0 0 0.65rem;
}

.member-section-header[b-wg5lf94s9y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.6rem;
}

.member-header-actions[b-wg5lf94s9y] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

/* #437: Show Deactivated moved off the toolbar into the filter bar. It is a
   member-filter-field (so it aligns with the Gender/Type dropdowns) AND keeps
   its form-check layout — centre the checkbox + label on the filter row. */
.member-show-deactivated-toggle[b-wg5lf94s9y] {
    margin: 0;
    color: #3e5873;
    font-size: 0.9rem;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
}

.member-show-deactivated-toggle .form-check-input[b-wg5lf94s9y] {
    margin: 0;
}

.member-show-deactivated-toggle .form-check-label[b-wg5lf94s9y] {
    white-space: nowrap;
}

.member-editor-panel[b-wg5lf94s9y] {
    border: 1px solid rgba(13, 44, 85, 0.12);
    border-radius: 0.4rem;
    background: #ffffff;
    padding: 0.75rem;
    margin: 0 0 0.85rem;
}

.member-editor-title[b-wg5lf94s9y] {
    margin: 0 0 0.6rem;
    color: #2c4560;
    font-size: 1.15rem;
    font-weight: 700;
}

.club-inline-actions[b-wg5lf94s9y] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.admin-tools-panel summary[b-wg5lf94s9y] {
    cursor: pointer;
    color: #3a5168;
    font-weight: 700;
    font-size: 0.96rem;
    list-style: none;
}

.admin-tools-panel summary[b-wg5lf94s9y]::-webkit-details-marker {
    display: none;
}

.admin-tools-panel summary[b-wg5lf94s9y]::before {
    content: "\25B6";
    display: inline-block;
    margin-right: 0.45rem;
    color: #5d7389;
    transform: translateY(-0.02rem);
}

.admin-tools-panel[open] summary[b-wg5lf94s9y]::before {
    content: "\25BC";
}

.admin-tools-actions[b-wg5lf94s9y] {
    margin-top: 0.65rem;
}

.club-add-grid[b-wg5lf94s9y] {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 0.65fr) minmax(10rem, 0.65fr) minmax(12rem, 1fr) auto;
    gap: 0.55rem;
    align-items: end;
}

.club-add-actions[b-wg5lf94s9y] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.member-add-grid[b-wg5lf94s9y] {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 0.7fr) minmax(10rem, 0.7fr) minmax(10rem, 0.7fr) auto;
    gap: 0.55rem;
    align-items: end;
    margin: 0 0 0.85rem;
}

.club-help-text[b-wg5lf94s9y] {
    margin: 0.75rem 0 0;
    color: #5f6f80;
}

.club-help-text code[b-wg5lf94s9y] {
    color: #c72576;
    background: transparent;
    padding: 0;
}

.club-members-table[b-wg5lf94s9y] {
    margin-bottom: 0;
}

.club-members-table thead th[b-wg5lf94s9y] {
    color: #2a2f36;
    border-bottom: 1px solid #1f2b38;
    font-size: 1.02rem;
}

.club-members-table thead th.sortable-header[b-wg5lf94s9y] {
    cursor: pointer;
    user-select: none;
}

.club-members-table thead th.sortable-header:hover[b-wg5lf94s9y] {
    color: #0d2c55;
}

.club-members-table tbody td[b-wg5lf94s9y] {
    vertical-align: middle;
}

/* #377: the whole row opens the member profile, so signal it's clickable and
   give a hover cue. The action buttons / membership select stopPropagation, so
   they stay independently usable. */
.club-members-table tbody tr.member-row-clickable[b-wg5lf94s9y] {
    cursor: pointer;
}

.club-members-table tbody tr.member-row-clickable:hover td[b-wg5lf94s9y] {
    background: #eef3f9;
}

/* The member tables are wide (the directory has 12 columns) and scroll horizontally inside
   .table-responsive at tablet / icon-rail widths, pushing the Actions column off the right with
   the only scrollbar below the fold. Pin the Actions (last) column to the right edge so its
   buttons stay visible and reachable however far the table is scrolled. Covers both the member
   directory and the pending-invites table (shared .club-members-table). */
.club-members-table th:last-child[b-wg5lf94s9y],
.club-members-table td:last-child[b-wg5lf94s9y] {
    position: sticky;
    right: 0;
    background: #ffffff;
    box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.12);
}

.club-members-table td:last-child[b-wg5lf94s9y] {
    z-index: 1;
}

.club-members-table thead th:last-child[b-wg5lf94s9y] {
    z-index: 3;
}

/* Keep the pinned cell in step with the row hover so it doesn't stay white while the rest
   of the row highlights. */
.club-members-table tbody tr.member-row-clickable:hover td:last-child[b-wg5lf94s9y] {
    background: #eef3f9;
}

/* Keep the horizontal scrollbar reachable. The directory table is wide and tall, so the
   .table-responsive's horizontal scrollbar sat at the bottom of the table — below the fold —
   and looked like there was no scroll at all. Bound the table to the viewport so it scrolls
   inside its own box (the horizontal scrollbar lands at the box bottom, on screen). All
   columns are kept; you scroll to the ones that don't fit. */
.member-directory-scroll[b-wg5lf94s9y] {
    max-height: calc(100dvh - 12rem);
    overflow: auto;
}

/* Sticky header so the column labels stay put while the body scrolls vertically inside the
   box. Solid bg hides rows scrolling under it; z-index sits above the sticky Actions column
   (the Actions header corner keeps its z-index:3 from the rule above, so it wins both axes). */
.member-directory-table thead th[b-wg5lf94s9y] {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 2;
}

.club-members-table tbody tr.member-row-inactive td[b-wg5lf94s9y] {
    color: #7a8897;
}

/* BL-096: colour-code the member-name cell by gender for at-a-glance scan.
   Reuses the same palette as the photo-fallback circle so the visual cue is
   consistent across the row. Active members only - the .member-row-inactive
   parent rule above has higher specificity so deactivated rows stay grey.
   Gender column remains visible so the signal isn't colour-only (WCAG). */
.member-name-cell.male[b-wg5lf94s9y] {
    color: var(--gender-male);
    font-weight: 600;
}

.member-name-cell.female[b-wg5lf94s9y] {
    color: var(--gender-female);
    font-weight: 600;
}

/* .member-name-cell.unspecified inherits default text colour — no rule needed. */

/* BL-100: inline MembershipType dropdown on the Members row. Keep it
   compact so the row height doesn't bloat. */
.member-membership-select[b-wg5lf94s9y] {
    min-width: 5.5rem;
    width: auto;
    padding: 0.15rem 1.6rem 0.15rem 0.4rem;
    font-size: 0.85rem;
}

/* BL-104: click-toggle help marker. v1 was a hover tooltip (title attr)
   which is no good on tablet/phone where there's no hover — so the "?"
   is now a real <button> that toggles an inline popover below. */
.form-label-with-help[b-wg5lf94s9y] {
    /* container so the popover can sit immediately below the label. */
}

.form-label-with-help-text[b-wg5lf94s9y] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.form-label-help-button[b-wg5lf94s9y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: #e7eff8;
    color: #1f5a8a;
    border: 1px solid #b9c9db;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.form-label-help-button:hover[b-wg5lf94s9y] {
    background: #d6e4f3;
    border-color: #94afca;
}

.form-label-help-button:focus[b-wg5lf94s9y] {
    outline: 2px solid #1b6ec2;
    outline-offset: 1px;
}

.form-help-popover[b-wg5lf94s9y] {
    margin: 0.4rem 0 0.6rem;
    padding: 0.6rem 0.75rem;
    background: #f3f7fb;
    border: 1px solid #c4d2e0;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #2a4361;
    line-height: 1.4;
}

.form-help-popover-list[b-wg5lf94s9y] {
    margin: 0.25rem 0 0.5rem;
    padding-left: 1.2rem;
    list-style: disc;
}

.form-help-popover-list li[b-wg5lf94s9y] {
    margin-bottom: 0.15rem;
}

.form-help-popover-close[b-wg5lf94s9y] {
    /* Kiosk fat-finger target: grow the hit area to ~44px tall (min-height
       2.75rem + vertical padding) while keeping the tidy text-link look.
       inline-flex so the "Got it" text stays vertically centred in the taller
       box. Horizontal padding gives a comfortable side hit area without making
       it read as a button. margin-top normalised to 0.5rem to match the
       MemberProfileModal twin surface (was 0.25rem). */
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.35rem 0.5rem;
    margin-top: 0.5rem;
    text-decoration: none;
    color: #1b6ec2;
    font-weight: 500;
}

/* BL-097: Members-table filter bar. Compact horizontal strip; wraps on
   narrow viewports. Name input takes flex space, chip groups stay
   inline with their labels. */
.member-filter-bar[b-wg5lf94s9y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.8rem;
    margin-bottom: 0.6rem;
    padding: 0.4rem 0.55rem;
    background: #f3f7fb;
    border: 1px solid #d3dde7;
    border-radius: 0.5rem;
}

.member-filter-name[b-wg5lf94s9y] {
    flex: 1 1 14rem;
    min-width: 12rem;
}

.member-filter-field[b-wg5lf94s9y] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.member-filter-label[b-wg5lf94s9y] {
    color: #5a6b80;
    font-size: 0.82rem;
    font-weight: 500;
}

.member-filter-select[b-wg5lf94s9y] {
    width: auto;
    min-width: 7rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

.member-filter-clear[b-wg5lf94s9y] {
    margin-left: auto;
    color: #5e748a;
    text-decoration: none;
    padding: 0.15rem 0.4rem;
}

.member-filter-clear:hover[b-wg5lf94s9y] {
    color: #1f3f5e;
    text-decoration: underline;
}


.club-members-table .btn-sm[b-wg5lf94s9y] {
    min-width: 4.6rem;
}

/* #445: per-row pencil edit shortcut. A square icon button, not a text button, so
   it must opt out of the 4.6rem text-button min-width above and instead be a real
   ≥44px kiosk/touch target. The pencil glyph is sized up so it reads clearly. */
.club-members-table .btn-sm.member-row-edit-btn[b-wg5lf94s9y] {
    min-width: 2.75rem;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
}

.member-photo-table[b-wg5lf94s9y] {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    border: 1px solid rgba(31, 43, 56, 0.16);
    object-fit: cover;
    background: #fff;
}

.member-photo-field[b-wg5lf94s9y] {
    margin: 0 0 0.9rem;
}

.member-photo-editor[b-wg5lf94s9y] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.member-photo-editor-preview[b-wg5lf94s9y] {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 999px;
    border: 2px solid rgba(31, 43, 56, 0.2);
    object-fit: cover;
    background: #fff;
}

.member-photo-editor-fallback[b-wg5lf94s9y] {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(38, 66, 97, 0.22);
    background: #ffffff;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    box-sizing: border-box;
}

.member-photo-editor-controls[b-wg5lf94s9y] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 16rem;
}

.member-photo-error[b-wg5lf94s9y] {
    color: #a11b2f;
    font-size: 0.85rem;
    font-weight: 600;
}

.member-rating-readonly[b-wg5lf94s9y] {
    border: 1px solid #c5d4e2;
    border-radius: 0.35rem;
    background: #f4f8fc;
    padding: 0.45rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.member-rating-value[b-wg5lf94s9y] {
    color: #213a54;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}

.member-rating-hint[b-wg5lf94s9y] {
    color: #5d748a;
    font-size: 0.78rem;
}

.member-photo-fallback[b-wg5lf94s9y] {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(38, 66, 97, 0.22);
    background: #ffffff;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    box-sizing: border-box;
}

.member-photo-fallback.male[b-wg5lf94s9y] {
    border-color: #3d88c8;
    background: #eef6ff;
    color: var(--gender-male);
}

.member-photo-fallback.female[b-wg5lf94s9y] {
    border-color: #cf75a4;
    background: #fff0f7;
    color: var(--gender-female);
}

.member-photo-fallback.unspecified[b-wg5lf94s9y] {
    border-color: #8fa1b4;
    background: #f2f6fa;
    color: #5a6d80;
}

.member-photo-initials[b-wg5lf94s9y] {
    display: block;
    color: currentColor;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.member-profile-modal-backdrop[b-wg5lf94s9y] {
    position: fixed;
    inset: 0;
    background: rgba(18, 30, 44, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2100;
}

.member-profile-modal[b-wg5lf94s9y] {
    /* Backdrop pads 1rem each side — 94vw overflowed it on phones, forcing a
       small horizontal scroll (412px Moto). Subtract the padding instead.
       Desktop cap 1080px so the session-history table fits real-world data
       without scrolling; the calc() term governs on phones. */
    width: min(1080px, calc(100vw - 2rem));
    max-height: 90vh;
    overflow-y: auto;
    background: #f8fbff;
    border: 1px solid #b8c8d8;
    border-radius: 0.75rem;
    box-shadow: 0 16px 36px rgba(21, 43, 68, 0.3);
    padding: 0.85rem;
}

.member-profile-modal-header[b-wg5lf94s9y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.member-profile-modal-header-actions[b-wg5lf94s9y] {
    display: flex;
    gap: 0.4rem;
}

.member-profile-modal-header h3[b-wg5lf94s9y] {
    margin: 0;
    color: #253f5b;
    font-size: 1.35rem;
    font-weight: 700;
}

.member-profile-modal-body[b-wg5lf94s9y] {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0.9rem;
    align-items: start;
}

/* Grid items default to min-width:auto — let children shrink rather than
   force the column (and siblings) wider than the modal on phones. */
.member-profile-modal-body > *[b-wg5lf94s9y] {
    min-width: 0;
}

.member-profile-photo[b-wg5lf94s9y] {
    width: 11rem;
    height: 11rem;
    border-radius: 0.85rem;
    border: 2px solid rgba(37, 63, 91, 0.2);
    object-fit: cover;
    background: #fff;
}

.member-profile-photo-fallback[b-wg5lf94s9y] {
    width: 11rem;
    height: 11rem;
    border-radius: 0.85rem;
    border: 2px solid rgba(37, 63, 91, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f2f6fa;
    color: #4e657d;
}

.member-profile-photo-fallback.male[b-wg5lf94s9y] {
    border-color: #3d88c8;
    background: #eef6ff;
    color: var(--gender-male);
}

.member-profile-photo-fallback.female[b-wg5lf94s9y] {
    border-color: #cf75a4;
    background: #fff0f7;
    color: var(--gender-female);
}

.member-profile-photo-fallback.unspecified[b-wg5lf94s9y] {
    border-color: #8fa1b4;
    background: #f2f6fa;
    color: #5a6d80;
}

.member-profile-photo-initials[b-wg5lf94s9y] {
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.member-profile-fields[b-wg5lf94s9y] {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.8rem;
    grid-column: 1 / -1;
}

.member-profile-fields > div[b-wg5lf94s9y] {
    border: 1px solid #ccdae8;
    border-radius: 0.45rem;
    background: #ffffff;
    padding: 0.45rem 0.55rem;
}

.member-profile-id-field[b-wg5lf94s9y] {
    grid-column: 1 / -1;
}

.member-profile-id-field .member-profile-id[b-wg5lf94s9y] {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.member-profile-fields dt[b-wg5lf94s9y] {
    margin: 0;
    color: #60778f;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.member-profile-fields dd[b-wg5lf94s9y] {
    margin: 0.2rem 0 0;
    color: #24384f;
    font-size: 0.95rem;
    font-weight: 600;
    word-break: break-word;
}

.member-profile-id[b-wg5lf94s9y] {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.8rem;
}

.member-profile-tabs[b-wg5lf94s9y] {
    display: flex;
    /* Wrap rather than force the modal wider than a phone screen. */
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #d8e0ea;
    grid-column: 1 / -1;
}

.member-profile-tab[b-wg5lf94s9y] {
    background: transparent;
    border: none;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #60778f;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms ease, border-color 120ms ease;
}

.member-profile-tab:hover[b-wg5lf94s9y] {
    color: #24384f;
}

.member-profile-tab.active[b-wg5lf94s9y] {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
}

.member-profile-sessions[b-wg5lf94s9y] {
    grid-column: 1 / -1;
    max-height: 22rem;
    overflow-y: auto;
}

/* BL-046 (re-opened 2026-04-26x2): the previous min-width of 6.25rem still
   wrapped on Mike's viewport. Bump to 7.5rem and force the action cell to
   nowrap so the cluster of action buttons stays on one line. */
.member-toggle-active-btn[b-wg5lf94s9y] {
    min-width: 7.5rem;
}

.club-members-table tbody td.text-end[b-wg5lf94s9y] {
    white-space: nowrap;
}

.member-profile-sessions-table th[b-wg5lf94s9y],
.member-profile-sessions-table td[b-wg5lf94s9y] {
    padding: 0.55rem 0.65rem;
    white-space: nowrap;
}

.member-profile-sessions-table .numeric[b-wg5lf94s9y] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.member-profile-rating[b-wg5lf94s9y] {
    grid-column: 1 / -1;
}

/* #304: rating-number header on the Rating tab - the anchor the Settling chip
   reads against. Number is the hero; chip is a quiet neutral signal beside it.
   Kept identical to MemberProfileModal.razor.css so the twin surfaces match. */
.member-rating-header[b-wg5lf94s9y] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.member-rating-header-value[b-wg5lf94s9y] {
    color: #213a54;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

/* #304: neutral "Settling" chip. Composed from the existing neutral box tokens
   (member-rating-readonly family) - deliberately NOT the coloured badge bg-*
   family, whose status-colour semantics would read as an alarm. The whole chip
   is a button (it becomes the tap target for S2's explainer popover). */
.member-settling-chip[b-wg5lf94s9y] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.9rem;
    padding: 0.25rem 0.6rem;
    /* WCAG 1.4.11: border must clear 3:1 against its own #f4f8fc fill for the
       chip boundary to be perceivable. #8fa3b8 (the UX note's suggestion) only
       reaches ~2.5:1; #7d90a6 clears it (3.07:1 vs the chip fill, 3.16:1 vs the
       modal bg) while staying a calm neutral grey-blue - no warning semantics. */
    border: 1px solid #7d90a6;
    border-radius: 999px;
    background: #f4f8fc;
    color: #213a54;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.1;
    /* It IS a button and becomes interactive in S2 (tap-to-explain popover);
       pointer avoids a desktop "looks broken" read and an S2 CSS churn. */
    cursor: pointer;
}

/* The chip is a bare <button> (no .btn class), so Bootstrap reboot suppresses
   the default focus outline and the app's .btn focus ring never applies -
   keyboard users got no focus signal. Restore a visible ring, matching the
   .form-label-help-button:focus style above. */
.member-settling-chip:focus-visible[b-wg5lf94s9y] {
    outline: 2px solid #1b6ec2;
    outline-offset: 2px;
}

/* ::deep is needed because the glyph comes from a code-behind RenderFragment
   (SettlingChip.Glyph), which Blazor's scoped-CSS rewriter never tags with the
   component's [b-xxxx] attribute - so the icon class can only be reached by
   piercing the scope from the chip element (which IS tagged). */
.member-settling-chip[b-wg5lf94s9y]  .member-settling-chip-icon {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
}

.member-settling-chip-label[b-wg5lf94s9y] {
    white-space: nowrap;
}

/* #304 S2: cap the explainer popover width so it reads as a tooltip beside the
   number rather than spanning the whole tab. Reuses the form-help-popover look. */
.member-settling-popover[b-wg5lf94s9y] {
    max-width: 32rem;
}

.member-profile-rating-chart[b-wg5lf94s9y] {
    position: relative;
    width: 100%;
    height: 18rem;
    padding: 0.5rem 0;
}

.member-profile-rating-chart canvas[b-wg5lf94s9y] {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 1100px) {
    .club-add-grid[b-wg5lf94s9y] {
        grid-template-columns: 1fr 1fr;
    }

    .member-add-grid[b-wg5lf94s9y] {
        grid-template-columns: 1fr 1fr;
    }

    .member-photo-editor[b-wg5lf94s9y] {
        flex-direction: column;
        align-items: flex-start;
    }

    .member-photo-editor-controls[b-wg5lf94s9y] {
        min-width: 0;
        width: 100%;
    }

    .member-profile-modal-body[b-wg5lf94s9y] {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .member-profile-photo[b-wg5lf94s9y],
    .member-profile-photo-fallback[b-wg5lf94s9y] {
        width: 9rem;
        height: 9rem;
    }

    .member-profile-fields[b-wg5lf94s9y] {
        grid-template-columns: 1fr;
        width: 100%;
        justify-self: stretch;
    }

    .member-profile-tabs[b-wg5lf94s9y],
    .member-profile-sessions[b-wg5lf94s9y],
    .member-profile-rating[b-wg5lf94s9y] {
        width: 100%;
        justify-self: stretch;
    }
}

@media (max-width: 700px) {
    .club-add-grid[b-wg5lf94s9y] {
        grid-template-columns: 1fr;
    }

    .member-add-grid[b-wg5lf94s9y] {
        grid-template-columns: 1fr;
    }

    .member-section-header[b-wg5lf94s9y] {
        align-items: stretch;
        flex-direction: column;
    }

    .member-header-actions[b-wg5lf94s9y] {
        width: 100%;
        justify-content: space-between;
    }
}

/* Mobile / narrow-tablet: hide lower-priority Members table columns so the
   Actions column stays reachable without horizontal scrolling. Column order:
   1=Photo 2=Name 3=Membership 4=Gender 5=Status 6=Rating 7=LastPlayed
   8=Win% 9=LinkedLogin 10=Role 11=Actions. We keep Name, Status, Rating, Actions. */
@media (max-width: 700px) {
    .member-directory-table th:nth-child(1)[b-wg5lf94s9y],
    .member-directory-table td:nth-child(1)[b-wg5lf94s9y],
    .member-directory-table th:nth-child(3)[b-wg5lf94s9y],
    .member-directory-table td:nth-child(3)[b-wg5lf94s9y],
    .member-directory-table th:nth-child(4)[b-wg5lf94s9y],
    .member-directory-table td:nth-child(4)[b-wg5lf94s9y],
    .member-directory-table th:nth-child(7)[b-wg5lf94s9y],
    .member-directory-table td:nth-child(7)[b-wg5lf94s9y],
    .member-directory-table th:nth-child(8)[b-wg5lf94s9y],
    .member-directory-table td:nth-child(8)[b-wg5lf94s9y],
    .member-directory-table th:nth-child(9)[b-wg5lf94s9y],
    .member-directory-table td:nth-child(9)[b-wg5lf94s9y],
    .member-directory-table th:nth-child(10)[b-wg5lf94s9y],
    .member-directory-table td:nth-child(10)[b-wg5lf94s9y] {
        display: none;
    }

    .member-directory-table .btn-sm[b-wg5lf94s9y] {
        display: block;
        width: 100%;
        margin-left: 0 !important;
        margin-bottom: 0.25rem;
    }

    .member-directory-table .btn-sm:last-child[b-wg5lf94s9y] {
        margin-bottom: 0;
    }

    /* #445: on the stacked-mobile layout the pencil stacks full-width like the
       other row actions (it inherits display:block/width:100% above via its
       .btn-sm), but keep the glyph centred and the row a comfortable tap height. */
    .club-members-table .btn-sm.member-row-edit-btn[b-wg5lf94s9y] {
        width: 100%;
        justify-content: center;
    }

    /* User Access tab tables share the club-members-table style — stack their
       action buttons vertically too so they don't get clipped at narrow widths. */
    .pending-invites-table .btn-sm[b-wg5lf94s9y],
    .club-members-table .user-remove-btn[b-wg5lf94s9y] {
        display: block;
        width: 100%;
    }
}

/* #273 organiser-set game preference radio group in the member editor. Matches
   the surrounding form grid; helper text uses the shared .club-help-text style. */
.member-game-preference-field .form-check[b-wg5lf94s9y] {
    margin-bottom: 0.15rem;
}

.member-game-preference-field .club-help-text[b-wg5lf94s9y] {
    margin-top: 0.25rem;
}

/* #738: unlink-login confirm modal (kiosk mis-tap guard) - mirrors the
   dashboard's end-session confirm modal shape. */
.member-unlink-modal-backdrop[b-wg5lf94s9y] {
    position: fixed;
    inset: 0;
    background: rgba(18, 30, 44, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2200;
}

.member-unlink-modal[b-wg5lf94s9y] {
    width: min(480px, 94vw);
    background: #ffffff;
    border: 1px solid #c8d4e2;
    border-radius: 0.75rem;
    box-shadow: 0 16px 36px rgba(21, 43, 68, 0.3);
    padding: 1.1rem 1.2rem 1rem;
}

.member-unlink-modal h2[b-wg5lf94s9y] {
    margin: 0 0 0.6rem;
    color: #0d2c55;
    font-size: 1.15rem;
}

.member-unlink-actions[b-wg5lf94s9y] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* /Components/Pages/MostImprovedReport.razor.rz.scp.css */
.reports-shell[b-am6wtpdveo] {
    max-width: 1180px;
    padding-bottom: 2.5rem;
}

.reports-crumb[b-am6wtpdveo] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.reports-crumb-link[b-am6wtpdveo] {
    background: none;
    border: none;
    padding: 0;
    color: #0d2c55;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.reports-crumb-link:hover[b-am6wtpdveo],
.reports-crumb-link:focus-visible[b-am6wtpdveo] {
    text-decoration: underline;
    outline: none;
}

/* head */
.mi-head[b-am6wtpdveo] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.mi-head h1[b-am6wtpdveo] {
    margin: 0;
    color: #1f3f5e;
}

.mi-sub[b-am6wtpdveo] {
    color: #3d5a78;
    margin: 0.2rem 0 0;
}

.mi-season-note[b-am6wtpdveo] {
    color: #5a6b7d;
    font-size: 0.85rem;
    margin: 0.1rem 0 0.6rem;
}

.mi-settled-note[b-am6wtpdveo] {
    font-size: 0.8rem;
    color: #5a6b7d;
    max-width: 60ch;
}

.mi-season-note a[b-am6wtpdveo] {
    color: #2f6fed;
}

.mi-head-actions[b-am6wtpdveo] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.mi-ranges[b-am6wtpdveo] {
    display: flex;
    gap: 0.35rem;
    background: #eef3f9;
    border: 1px solid #d8e2ee;
    border-radius: 0.6rem;
    padding: 0.2rem;
}

.mi-ranges button[b-am6wtpdveo] {
    border: none;
    background: none;
    color: #4a5b70;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 0.45rem;
    cursor: pointer;
}

.mi-ranges button.on[b-am6wtpdveo] {
    background: #ffffff;
    color: #1f3f5e;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.12);
}

.mi-ranges button:disabled[b-am6wtpdveo] {
    cursor: default;
    opacity: 0.55;
}

/* tiles */
.mi-tiles[b-am6wtpdveo] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.mi-tile[b-am6wtpdveo] {
    background: #ffffff;
    border: 1px solid #c5cfde;
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
}

.mi-tile .lab[b-am6wtpdveo] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c7a8c;
    font-weight: 700;
}

.mi-tile .val[b-am6wtpdveo] {
    /* Match siblings' 1.9rem at the top end, but shrink gracefully so a long member name in the
       "Most improved" tile (this report's only text-valued tile) never overflows. */
    font-size: clamp(1.2rem, 4vw, 1.9rem);
    font-weight: 800;
    color: #1f3f5e;
    line-height: 1.1;
    margin-top: 0.5rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.mi-tile .sub[b-am6wtpdveo] {
    font-size: 0.78rem;
    color: #6c7a8c;
    margin-top: 0.35rem;
}

/* two-column grid: leaderboard + distribution */
.mi-grid[b-am6wtpdveo] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.15rem;
    margin-bottom: 1.15rem;
}

.mi-card[b-am6wtpdveo] {
    background: #ffffff;
    border: 1px solid #c5cfde;
    border-radius: 0.75rem;
    padding: 1rem 1.2rem 1.2rem;
}

.mi-card-head[b-am6wtpdveo] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.mi-card-head h3[b-am6wtpdveo] {
    margin: 0;
    font-size: 1rem;
    color: #1f3f5e;
}

.mi-card-head .d[b-am6wtpdveo] {
    color: #6c7a8c;
    font-size: 0.82rem;
}

.mi-card-body[b-am6wtpdveo] {
    padding-top: 0.25rem;
}

.mi-empty[b-am6wtpdveo] {
    color: #6c7a8c;
    padding: 1.5rem 0;
    text-align: center;
    margin: 0;
}

/* winner card */
.mi-winner[b-am6wtpdveo] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: #fbf3da;
    border: 1px solid #ecdcb8;
    border-radius: 0.65rem;
    padding: 0.75rem 0.9rem;
    margin: 0.15rem 0 0.65rem;
}

.mi-winner .medal[b-am6wtpdveo] {
    font-size: 1.65rem;
}

.mi-winner .who[b-am6wtpdveo] {
    flex: 1;
    min-width: 0;
}

.mi-winner .nm[b-am6wtpdveo] {
    font-weight: 800;
    font-size: 1rem;
    color: #1f3f5e;
}

.mi-winner .sub[b-am6wtpdveo] {
    font-size: 0.78rem;
    color: #7a6420;
    font-variant-numeric: tabular-nums;
}

.mi-winner .big[b-am6wtpdveo] {
    font-size: 1.65rem;
    font-weight: 800;
    color: #1f7a4d;
    font-variant-numeric: tabular-nums;
}

/* leaderboard rows */
.mi-row[b-am6wtpdveo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.25rem;
    border-bottom: 1px solid #f1f4f9;
}

.mi-row:last-child[b-am6wtpdveo] {
    border-bottom: none;
}

.mi-row .rk[b-am6wtpdveo] {
    width: 24px;
    flex: 0 0 24px;
    text-align: center;
    font-weight: 800;
    color: #9aa6b6;
}

.mi-row.top2 .rk[b-am6wtpdveo],
.mi-row.top3 .rk[b-am6wtpdveo] {
    color: #b8860b;
}

.mi-row .av[b-am6wtpdveo] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #2e6fa9;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.74rem;
    flex: 0 0 auto;
}

.mi-row .who[b-am6wtpdveo] {
    min-width: 0;
    flex: 1;
}

.mi-row .who .nm[b-am6wtpdveo] {
    font-weight: 700;
    font-size: 0.85rem;
    color: #24364d;
}

.mi-row .who .meta[b-am6wtpdveo] {
    font-size: 0.72rem;
    color: #6c7a8c;
    font-variant-numeric: tabular-nums;
}

.mi-spark[b-am6wtpdveo] {
    flex: 0 0 auto;
}

.mi-spark .sp[b-am6wtpdveo] {
    stroke: #2e9c63;
    stroke-width: 2;
    fill: none;
}

.mi-row .delta[b-am6wtpdveo] {
    flex: 0 0 auto;
    width: 64px;
    text-align: right;
    font-weight: 800;
    font-size: 1rem;
    color: #1f7a4d;
    font-variant-numeric: tabular-nums;
}

.mi-row .delta.neg[b-am6wtpdveo] {
    color: #b1432f;
}

.mi-row .delta small[b-am6wtpdveo] {
    display: block;
    font-size: 0.62rem;
    color: #6c7a8c;
    font-weight: 400;
}

/* distribution chart */
.mi-chart[b-am6wtpdveo] {
    position: relative;
    height: 240px;
}

.mi-dist-note[b-am6wtpdveo] {
    font-size: 0.78rem;
    color: #6c7a8c;
    margin: 0.75rem 0.1rem 0;
}

.mi-dist-note b[b-am6wtpdveo] {
    color: #1f3f5e;
}

/* celebrate banner */
.mi-msg[b-am6wtpdveo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(90deg, #eef6ff, #f6fbff);
    border: 1px solid #cfe1f4;
    border-radius: 0.75rem;
    padding: 0.9rem 1.1rem;
    color: #274a6b;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.mi-msg .ic[b-am6wtpdveo] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #cfe6ff;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
}

.mi-msg .q[b-am6wtpdveo] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f3f5e;
}

.mi-note[b-am6wtpdveo] {
    font-size: 0.72rem;
    color: #9aa6b6;
    margin-top: 0.5rem;
}

@media (max-width: 900px) {
    .mi-grid[b-am6wtpdveo] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .mi-tiles[b-am6wtpdveo] {
        grid-template-columns: repeat(2, 1fr);
    }
    .mi-head-actions[b-am6wtpdveo] {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .mi-tiles[b-am6wtpdveo] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/MyClubs.razor.rz.scp.css */
.clubs-shell[b-xjss3qv8d1] {
    max-width: 64rem;
    margin: 1rem auto 2rem;
}

.clubs-subtitle[b-xjss3qv8d1] {
    color: #5c7085;
    margin-bottom: 0.9rem;
}

.clubs-card[b-xjss3qv8d1] {
    border: 1px solid #c7d3df;
    border-radius: 0.75rem;
    background: #f6f9fc;
    padding: 1rem;
    margin-bottom: 0.9rem;
}

.clubs-card h2[b-xjss3qv8d1] {
    font-size: 1.1rem;
    margin: 0 0 0.8rem;
    color: #1f3f5e;
}

.clubs-toolbar[b-xjss3qv8d1] {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: 1fr auto;
}

.clubs-message[b-xjss3qv8d1] {
    margin-bottom: 0.75rem;
    border: 1px solid;
    border-radius: 0.5rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.88rem;
}

.clubs-message--error[b-xjss3qv8d1] {
    border-color: #d88f8f;
    background: #f7e3e3;
    color: #8a2d2d;
}

.clubs-message--success[b-xjss3qv8d1] {
    border-color: #b6dab8;
    background: #e7f4e8;
    color: #2c6b30;
}
/* /Components/Pages/MyClubsPlayed.razor.rz.scp.css */
/* #777 (player-mode shell D): "My clubs" player surface. Same centred card column + visual
   tokens as /my-nights (MyNights.razor.css) and the /me recap — one shared player language,
   NO new brand. Scoped per component (the PegboardWeb per-page .razor.css pattern), so the
   values are mirrored from MyNights rather than shared, keeping each surface self-contained. */

.my-shell[b-oq3hpn8efs] {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    color: #1f2d3d;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.my-head[b-oq3hpn8efs] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.my-brand[b-oq3hpn8efs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.my-brand-wordmark[b-oq3hpn8efs] {
    height: 1.75rem;
    width: auto;
}

.my-title[b-oq3hpn8efs] {
    font-size: 1.65rem;
    font-weight: 800;
    margin: 0.25rem 0 0.15rem;
    color: #16324f;
    line-height: 1.2;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    min-width: 0;
}

.my-section[b-oq3hpn8efs] {
    margin-bottom: 2rem;
}

/* ── The clubs list (reused from /my-nights' switcher, given a row affordance). ── */
.my-clubs-list[b-oq3hpn8efs] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.my-club-link[b-oq3hpn8efs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 44px; /* touch target */
    padding: 0.65rem 0.9rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    color: #16324f;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.my-club-link:hover[b-oq3hpn8efs],
.my-club-link:focus-visible[b-oq3hpn8efs] {
    border-color: #1b6ec2;
    box-shadow: 0 6px 18px rgba(27, 110, 194, 0.12);
}

.my-club-name[b-oq3hpn8efs] {
    min-width: 0;
    overflow-wrap: break-word;
}

.my-club-go[b-oq3hpn8efs] {
    flex: 0 0 auto;
    color: #006bb7;
    font-weight: 700;
}

/* ── Never-claimed empty state (matches /my-nights' empty tokens). ── */
.my-empty[b-oq3hpn8efs] {
    font-size: 0.95rem;
    color: #47586b;
    background: #f6f9fc;
    border: 1px solid #d9e6f2;
    border-radius: 0.6rem;
    padding: 0.9rem 1rem;
    margin-bottom: 2rem;
}

/* ── Footer. ── */
.my-foot[b-oq3hpn8efs] {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.25rem;
    text-align: center;
}

.my-foot-cta[b-oq3hpn8efs] {
    margin: 0;
    color: #5e748a;
    font-size: 0.9rem;
}

.my-foot-cta strong[b-oq3hpn8efs] {
    color: #1b6ec2;
}

.my-foot-link[b-oq3hpn8efs] {
    text-decoration: none;
}

.my-foot-link:hover strong[b-oq3hpn8efs],
.my-foot-link:focus-visible strong[b-oq3hpn8efs] {
    text-decoration: underline;
}
/* /Components/Pages/MyNights.razor.rz.scp.css */
/* #684 (portal S9b): "My nights" player home. Mobile-first, the same centred card
   column + visual tokens as the /me recap (PersonalRecap.razor.css) — one shared
   language, no new brand. Option-A-thin: the latest-night card + (2+-club) switcher. */

.my-shell[b-fkgdhhlk14] {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    color: #1f2d3d;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.my-head[b-fkgdhhlk14] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.my-brand[b-fkgdhhlk14] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.my-brand-wordmark[b-fkgdhhlk14] {
    height: 1.75rem;
    width: auto;
}

.my-title[b-fkgdhhlk14] {
    font-size: 1.65rem;
    font-weight: 800;
    margin: 0.25rem 0 0.15rem;
    color: #16324f;
    line-height: 1.2;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    min-width: 0;
}

.my-section[b-fkgdhhlk14] {
    margin-bottom: 2rem;
}

.my-section-title[b-fkgdhhlk14] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5e748a;
    margin: 0 0 0.85rem;
    font-weight: 700;
}

/* ── The latest-night card (the whole card is the link to /me). ── */
.my-latest[b-fkgdhhlk14] {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 1.1rem 1.15rem;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.my-latest:hover[b-fkgdhhlk14],
.my-latest:focus-visible[b-fkgdhhlk14] {
    border-color: #1b6ec2;
    box-shadow: 0 6px 18px rgba(27, 110, 194, 0.12);
}

.my-latest-delta[b-fkgdhhlk14] {
    display: inline-block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    margin-right: 0.6rem;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.my-up[b-fkgdhhlk14] {
    color: #2f9e6f;
}

.my-down[b-fkgdhhlk14] {
    color: #c0392b;
}

.my-flat[b-fkgdhhlk14] {
    color: #5e748a;
}

.my-latest-facts[b-fkgdhhlk14] {
    display: inline;
    font-size: 0.92rem;
    color: #47586b;
}

.my-latest-facts strong[b-fkgdhhlk14] {
    color: #16324f;
}

.my-latest-go[b-fkgdhhlk14] {
    display: block;
    margin-top: 0.75rem;
    color: #006bb7;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ── Fresh-claimer + never-claimed states. ── */
.my-firstnight[b-fkgdhhlk14],
.my-empty[b-fkgdhhlk14] {
    font-size: 0.95rem;
    color: #47586b;
    background: #f6f9fc;
    border: 1px solid #d9e6f2;
    border-radius: 0.6rem;
    padding: 0.9rem 1rem;
    margin-bottom: 2rem;
}

/* ── The 2+-club switcher (informational links). ── */
.my-clubs-list[b-fkgdhhlk14] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.my-club-link[b-fkgdhhlk14] {
    display: block;
    padding: 0.65rem 0.9rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    color: #16324f;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: border-color 0.12s ease;
}

.my-club-link:hover[b-fkgdhhlk14],
.my-club-link:focus-visible[b-fkgdhhlk14] {
    border-color: #1b6ec2;
}

/* ── Footer. ── */
.my-foot[b-fkgdhhlk14] {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.25rem;
    text-align: center;
}

.my-foot-cta[b-fkgdhhlk14] {
    margin: 0;
    color: #5e748a;
    font-size: 0.9rem;
}

.my-foot-cta strong[b-fkgdhhlk14] {
    color: #1b6ec2;
}

.my-foot-link[b-fkgdhhlk14] {
    text-decoration: none;
}

.my-foot-link:hover strong[b-fkgdhhlk14],
.my-foot-link:focus-visible strong[b-fkgdhhlk14] {
    text-decoration: underline;
}
/* /Components/Pages/NewMemberConversionReport.razor.rz.scp.css */
.reports-shell[b-shjkj423xj] {
    max-width: 1180px;
    padding-bottom: 2.5rem;
}

.reports-crumb[b-shjkj423xj] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.reports-crumb-link[b-shjkj423xj] {
    background: none;
    border: none;
    padding: 0;
    color: #0d2c55;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.reports-crumb-link:hover[b-shjkj423xj],
.reports-crumb-link:focus-visible[b-shjkj423xj] {
    text-decoration: underline;
    outline: none;
}

.nmc-head[b-shjkj423xj] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.nmc-head h1[b-shjkj423xj] {
    margin: 0;
    color: #1f3f5e;
}

.nmc-sub[b-shjkj423xj] {
    color: #3d5a78;
    margin: 0.2rem 0 0;
}

.nmc-head-actions[b-shjkj423xj] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.nmc-ranges[b-shjkj423xj] {
    display: flex;
    gap: 0.35rem;
    background: #eef3f9;
    border: 1px solid #d8e2ee;
    border-radius: 0.6rem;
    padding: 0.2rem;
}

.nmc-ranges button[b-shjkj423xj] {
    border: none;
    background: none;
    color: #4a5b70;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 0.45rem;
    cursor: pointer;
}

.nmc-ranges button.on[b-shjkj423xj] {
    background: #ffffff;
    color: #1f3f5e;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.12);
}

.nmc-ranges button:disabled[b-shjkj423xj] {
    cursor: default;
    opacity: 0.55;
}

/* tiles */
.nmc-tiles[b-shjkj423xj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.nmc-tile[b-shjkj423xj] {
    background: #ffffff;
    border: 1px solid #c5cfde;
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
}

.nmc-tile .lab[b-shjkj423xj] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c7a8c;
    font-weight: 700;
}

.nmc-tile .val[b-shjkj423xj] {
    font-size: 1.9rem;
    font-weight: 800;
    color: #1f3f5e;
    line-height: 1.05;
    margin-top: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.nmc-tile.muted .val[b-shjkj423xj] {
    color: #9aa6b6;
}

.nmc-tile .sub[b-shjkj423xj] {
    font-size: 0.78rem;
    color: #6c7a8c;
    margin-top: 0.35rem;
}

/* card */
.nmc-card[b-shjkj423xj] {
    background: #ffffff;
    border: 1px solid #c5cfde;
    border-radius: 0.75rem;
    margin-bottom: 1.15rem;
    padding: 1rem 1.2rem 1.4rem;
}

.nmc-card-head[b-shjkj423xj] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.nmc-card-head h3[b-shjkj423xj] {
    margin: 0;
    font-size: 1rem;
    color: #1f3f5e;
}

.nmc-card-head .d[b-shjkj423xj] {
    color: #6c7a8c;
    font-size: 0.82rem;
}

/* funnel */
.nmc-funnel[b-shjkj423xj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.nmc-stage[b-shjkj423xj] {
    width: 100%;
    max-width: 760px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nmc-stage .bar[b-shjkj423xj] {
    height: 58px;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    color: #ffffff;
    margin: 0 auto;
    min-width: 0;
}

.nmc-stage .bar .nm[b-shjkj423xj] {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
}

.nmc-stage .bar .v[b-shjkj423xj] {
    font-weight: 800;
    font-size: 1.4rem;
    font-variant-numeric: tabular-nums;
    padding-left: 0.75rem;
}

.nmc-stage .bar.f0[b-shjkj423xj] { background: #3a4f6a; }
.nmc-stage .bar.f1[b-shjkj423xj] { background: #2b6cb0; }
.nmc-stage .bar.f2[b-shjkj423xj] { background: #2f7d6a; }
.nmc-stage .bar.f4[b-shjkj423xj] { background: #1f6f43; }

.nmc-stage .conv[b-shjkj423xj] {
    width: 150px;
    flex: 0 0 150px;
    font-size: 0.8rem;
    color: #6c7a8c;
    text-align: left;
}

.nmc-stage .conv b[b-shjkj423xj] {
    color: #1f7a4d;
    font-size: 0.9rem;
}

.nmc-arrow[b-shjkj423xj] {
    color: #b7c4d6;
    font-size: 0.85rem;
    line-height: 1;
}

.nmc-empty[b-shjkj423xj] {
    color: #6c7a8c;
    padding: 1.5rem 0;
    text-align: center;
    margin: 0;
}

.nmc-note[b-shjkj423xj] {
    font-size: 0.72rem;
    color: #9aa6b6;
    margin-top: 0.4rem;
}

@media (max-width: 820px) {
    .nmc-tiles[b-shjkj423xj] {
        grid-template-columns: repeat(2, 1fr);
    }
    .nmc-head-actions[b-shjkj423xj] {
        margin-left: 0;
    }
    .nmc-stage .conv[b-shjkj423xj] {
        width: 110px;
        flex-basis: 110px;
    }
}

@media (max-width: 480px) {
    .nmc-tiles[b-shjkj423xj] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/News.razor.rz.scp.css */
.news-page-head[b-rgdx3jv432] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.news-page-head p[b-rgdx3jv432] {
    margin-bottom: 0;
}

.news-back-link[b-rgdx3jv432],
.news-open-label[b-rgdx3jv432] {
    color: #4c6f95;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.news-back-link:hover[b-rgdx3jv432],
.news-list-item:hover .news-open-label[b-rgdx3jv432],
.news-doclink a:hover[b-rgdx3jv432] {
    text-decoration: underline;
}

.news-list[b-rgdx3jv432] {
    display: grid;
    gap: 0;
}

.news-list-item[b-rgdx3jv432] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(120, 145, 175, 0.28);
    color: inherit;
    text-decoration: none;
}

.news-list-item:last-child[b-rgdx3jv432] {
    border-bottom: none;
}

.news-list-item:hover .news-title[b-rgdx3jv432] {
    color: #385a80;
}

.news-list-main[b-rgdx3jv432] {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.news-list-item.is-unread .news-title[b-rgdx3jv432] {
    font-weight: 800;
}

.news-list-item.is-unread .news-summary[b-rgdx3jv432] {
    color: #2f3d4b;
    font-weight: 600;
}

.news-item[b-rgdx3jv432] {
    padding: 1rem 0 1.25rem;
    border-bottom: 1px solid rgba(120, 145, 175, 0.28);
}

.news-item:last-of-type[b-rgdx3jv432] {
    border-bottom: none;
}

.news-missing[b-rgdx3jv432] {
    color: #6b7c90;
}

.news-item-head[b-rgdx3jv432] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}

.news-category[b-rgdx3jv432] {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(180deg, #6a88aa 0%, #4c6f95 100%);
    color: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.news-date[b-rgdx3jv432] {
    color: #6b7c90;
    font-size: 0.8rem;
}

.news-unread-dot[b-rgdx3jv432] {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #d64545;
    box-shadow: 0 0 0 2px rgba(214, 69, 69, 0.12);
}

.news-title[b-rgdx3jv432] {
    margin: 0.1rem 0 0.35rem;
    font-size: 1.15rem;
    line-height: 1.25;
}

.news-list-item .news-title[b-rgdx3jv432] {
    display: block;
    margin: 0;
}

.news-summary[b-rgdx3jv432] {
    color: #5d6f83;
    display: block;
    font-size: 0.92rem;
    line-height: 1.45;
}

.news-figure[b-rgdx3jv432] {
    margin: 0.5rem 0 0.85rem;
    /* Cap the screenshot width so it reads as an inset illustration, not a banner,
       on wide desktop while still filling the column on a phone. */
    max-width: 560px;
}

.news-image[b-rgdx3jv432] {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(120, 145, 175, 0.4);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(40, 60, 90, 0.12);
    background: #fff;
}

.news-caption[b-rgdx3jv432] {
    margin: 0.4rem 0 0;
    color: #6b7c90;
    font-size: 0.8rem;
    line-height: 1.4;
    font-style: italic;
}

.news-body[b-rgdx3jv432] {
    margin: 0;
    white-space: pre-line;
    line-height: 1.5;
}

.news-doclink[b-rgdx3jv432] {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
}

.news-doclink a[b-rgdx3jv432] {
    color: #4c6f95;
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 640px) {
    .news-page-head[b-rgdx3jv432],
    .news-list-item[b-rgdx3jv432] {
        align-items: stretch;
        flex-direction: column;
    }

    .news-open-label[b-rgdx3jv432] {
        align-self: flex-start;
    }
}
/* /Components/Pages/Onboarding.razor.rz.scp.css */
.onboarding-shell[b-m34mvkuwx3] {
    min-height: calc(100vh - 5rem);
    display: grid;
    place-items: center;
    padding: 1.5rem 0;
}

.onboarding-card[b-m34mvkuwx3] {
    width: min(34rem, 92vw);
    border: 1px solid #c4d1de;
    border-radius: 0.75rem;
    background: #f6f9fc;
    padding: 1.1rem;
}

.onboarding-card h1[b-m34mvkuwx3] {
    margin: 0 0 0.35rem;
    color: #1f3f5e;
}

.onboarding-help[b-m34mvkuwx3] {
    color: #5e748a;
    margin: 0 0 1rem;
}

.onboarding-actions[b-m34mvkuwx3] {
    margin-bottom: 1rem;
}

.onboarding-create[b-m34mvkuwx3] {
    border-top: 1px solid #cfdae6;
    padding-top: 1rem;
}

.onboarding-create-row[b-m34mvkuwx3] {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: 1fr auto;
}

.onboarding-error[b-m34mvkuwx3] {
    margin-bottom: 0.75rem;
    border: 1px solid #d88f8f;
    background: #f7e3e3;
    color: #8a2d2d;
    border-radius: 0.5rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.88rem;
}
/* /Components/Pages/PartnershipReport.razor.rz.scp.css */
/* #196 (S1, league-team-support): /reports/partnerships. Built to mockup.html §S1
   + the S1 UX plan. CSS isolation is per-component, so the reports-shell family is
   restated here (same values as SessionSummaryReport.razor.css) alongside the
   partnership-specific classes (palette pulled from the real app, per the mockup). */

.reports-shell[b-6s1tjoc5dq] {
    max-width: 1280px;
    padding-bottom: 2rem;
}

.reports-crumb[b-6s1tjoc5dq] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.reports-crumb-link[b-6s1tjoc5dq] {
    background: none;
    border: none;
    padding: 0;
    color: #0d2c55;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.reports-crumb-link:hover[b-6s1tjoc5dq],
.reports-crumb-link:focus-visible[b-6s1tjoc5dq] {
    text-decoration: underline;
}

.reports-crumb-link:focus-visible[b-6s1tjoc5dq] {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.reports-subtitle[b-6s1tjoc5dq] {
    color: #4e6f8e;
    margin: -0.25rem 0 1.25rem;
    max-width: 70ch;
}

.reports-available-now-card[b-6s1tjoc5dq] {
    background: #ffffff;
    border: 1px solid #d7e0ec;
    border-radius: 0.55rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}

/* ---- summary stat cards ---- */
.partnership-stats[b-6s1tjoc5dq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-card[b-6s1tjoc5dq] {
    background: #fff;
    border: 1px solid #c5cfde;
    border-radius: 0.625rem;
    padding: 0.9rem 1rem;
}

.stat-value[b-6s1tjoc5dq] {
    font-size: 1.55rem;
    font-weight: 700;
    color: #1f3f5e;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat-label[b-6s1tjoc5dq] {
    font-size: 0.78rem;
    color: #6c7a8c;
    margin-top: 0.35rem;
}

/* ---- toolbar ---- */
.partnership-toolbar[b-6s1tjoc5dq] {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

/* Bootstrap's .form-select is width:100%, which fights the flex strip and stacks
   each control to a full-width row. Pin the selects to content width so the toolbar
   reads as one horizontal control strip (it still wraps when the row runs out of room). */
.partnership-toolbar .form-select-sm[b-6s1tjoc5dq] {
    width: auto;
    flex: 0 0 auto;
}

.partnership-name-filter[b-6s1tjoc5dq] {
    flex: 1;
    min-width: 160px;
}

/* ---- styled slide switch (mockup .switch / .track / .knob) ---- */
.partnership-switch[b-6s1tjoc5dq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #33455c;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.partnership-switch .track[b-6s1tjoc5dq] {
    width: 38px;
    height: 21px;
    border-radius: 20px;
    background: #c6d0dd;
    position: relative;
    transition: background 0.15s;
    flex: 0 0 auto;
}

.partnership-switch .knob[b-6s1tjoc5dq] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: left 0.15s;
}

.partnership-switch.on .track[b-6s1tjoc5dq] { background: #3f7ac0; }
.partnership-switch.on .knob[b-6s1tjoc5dq] { left: 19px; }

.partnership-switch:focus-visible[b-6s1tjoc5dq] {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- S1b: team-roster ("focus players") multi-select ---- */
.partnership-roster[b-6s1tjoc5dq] {
    margin-bottom: 0.9rem;
}

.partnership-roster-toggle[b-6s1tjoc5dq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid #c5cfde;
    border-radius: 0.45rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.82rem;
    color: #1f3f5e;
    font-weight: 600;
    cursor: pointer;
}

.partnership-roster-toggle:hover[b-6s1tjoc5dq],
.partnership-roster-toggle.open[b-6s1tjoc5dq] {
    border-color: #3f7ac0;
}

.partnership-roster-toggle:focus-visible[b-6s1tjoc5dq] {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.partnership-roster-count-badge[b-6s1tjoc5dq] {
    background: #3f7ac0;
    color: #fff;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.02rem 0.4rem;
    min-width: 1.1rem;
    text-align: center;
}

.partnership-roster-caret[b-6s1tjoc5dq] {
    color: #6c7a8c;
    font-size: 0.7rem;
}

.partnership-roster-chips[b-6s1tjoc5dq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.5rem;
}

.partnership-roster-chip[b-6s1tjoc5dq] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #eef4fc;
    border: 1px solid #c7dcf0;
    border-radius: 16px;
    padding: 0.12rem 0.5rem 0.12rem 0.18rem;
    font-size: 0.78rem;
    color: #1f3f5e;
}

.partnership-roster-chip-name[b-6s1tjoc5dq] {
    font-weight: 600;
}

.partnership-roster-chip-x[b-6s1tjoc5dq] {
    background: none;
    border: none;
    color: #6c7a8c;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.1rem;
    cursor: pointer;
    /* Tablet-usable tap target (S1b rework polish). */
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.partnership-roster-chip-x:hover[b-6s1tjoc5dq] {
    color: #b3261e;
}

.partnership-roster-clear[b-6s1tjoc5dq] {
    background: none;
    border: none;
    color: #3f7ac0;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.1rem 0.2rem;
}

.partnership-roster-clear:hover[b-6s1tjoc5dq] {
    text-decoration: underline;
}

.partnership-roster-panel[b-6s1tjoc5dq] {
    margin-top: 0.5rem;
    border: 1px solid #c5cfde;
    border-radius: 0.5rem;
    padding: 0.6rem;
    background: #fbfcfe;
    max-width: min(380px, 100%);
}

.partnership-roster-search[b-6s1tjoc5dq] {
    margin-bottom: 0.5rem;
}

.partnership-roster-list[b-6s1tjoc5dq] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
}

.partnership-roster-row[b-6s1tjoc5dq] {
    border-bottom: 1px solid #f1f4f9;
}

.partnership-roster-label[b-6s1tjoc5dq] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.25rem;
    margin: 0;
    cursor: pointer;
    font-size: 0.85rem;
}

.partnership-roster-list-name[b-6s1tjoc5dq] {
    color: #33455c;
}

.partnership-roster-noresults[b-6s1tjoc5dq] {
    color: #6c7a8c;
    font-size: 0.8rem;
    margin: 0.4rem 0 0;
}

.partnership-roster-summary[b-6s1tjoc5dq] {
    margin-top: 0.6rem;
    background: #eef4fc;
    border: 1px solid #c7dcf0;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    color: #2c4a6a;
}

.partnership-roster-summary strong[b-6s1tjoc5dq] {
    color: #1f3f5e;
}

/* ---- metric explainer note ---- */
.partnership-note[b-6s1tjoc5dq] {
    background: #eef4fc;
    border: 1px solid #cBdcf0;
    border-color: #c7dcf0;
    border-radius: 0.5rem;
    padding: 0.7rem 0.85rem;
    font-size: 0.82rem;
    color: #2c4a6a;
    margin-bottom: 0.85rem;
    line-height: 1.45;
}

.partnership-count-hint[b-6s1tjoc5dq] {
    color: #6c7a8c;
    font-size: 0.86rem;
    margin-bottom: 0.5rem;
}

/* light inline note shown when there are settling pairs but no settled verdicts yet —
   keeps the page momentum-forward instead of a contradictory "nothing here" illustration */
.partnership-inline-note[b-6s1tjoc5dq] {
    background: #fff8e6;
    border: 1px solid #f0d690;
    color: #7a5400;
    border-radius: 0.5rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.84rem;
    line-height: 1.45;
    margin-bottom: 0.85rem;
}

/* sub-label under the "vs expected" column header (matches mockup) */
.partnership-th-sub[b-6s1tjoc5dq] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #9bb;
    font-size: 0.625rem;
}

/* ---- the ranked table ---- */
.partnership-table thead th[b-6s1tjoc5dq] {
    color: #6c7a8c;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e6ebf3;
    white-space: nowrap;
}

.partnership-table th.sortable-header[b-6s1tjoc5dq] {
    cursor: pointer;
    user-select: none;
}

.partnership-table th.sortable-header:hover[b-6s1tjoc5dq] {
    color: #1f3f5e;
}

.partnership-table td[b-6s1tjoc5dq],
.partnership-table th[b-6s1tjoc5dq] {
    vertical-align: middle;
}

.partnership-table .numeric[b-6s1tjoc5dq] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- gender name lozenge (mirrors session waiting chips) ---- */
.who2[b-6s1tjoc5dq] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.av[b-6s1tjoc5dq] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.av.m[b-6s1tjoc5dq] { background: #2e6fa9; }
.av.f[b-6s1tjoc5dq] { background: #a85283; }
.av.u[b-6s1tjoc5dq] { background: #6c7a8c; }
.nm.m[b-6s1tjoc5dq] { color: #1f4b76; }
.nm.f[b-6s1tjoc5dq] { color: #6f2950; }
.nm.u[b-6s1tjoc5dq] { color: #33455c; }

/* ---- vs expected delta cell ---- */
.vsexp[b-6s1tjoc5dq] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}

.vsexp .delta[b-6s1tjoc5dq] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

.vsexp .delta.over[b-6s1tjoc5dq] { color: #136c3e; }
.vsexp .delta.under[b-6s1tjoc5dq] { color: #b3261e; }
.vsexp .delta.even[b-6s1tjoc5dq] { color: #52617a; }

.vsexp .inputs[b-6s1tjoc5dq] {
    font-size: 0.66rem;
    color: #6c7a8c;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- verdict pills ---- */
.pill[b-6s1tjoc5dq] {
    display: inline-block;
    border-radius: 20px;
    padding: 0.12rem 0.625rem;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.pill.over[b-6s1tjoc5dq] { background: #d8f0e2; color: #136c3e; }
.pill.under[b-6s1tjoc5dq] { background: #fde2e1; color: #b3261e; }
.pill.even[b-6s1tjoc5dq] { background: #eef1f6; color: #52617a; }
.pill.settling[b-6s1tjoc5dq] { background: #fdeccd; color: #8a5a00; }

/* ---- confidence meter ---- */
.conf[b-6s1tjoc5dq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.conf .bars[b-6s1tjoc5dq] {
    display: inline-flex;
    gap: 2px;
    align-items: flex-end;
    height: 14px;
}

.conf .bars i[b-6s1tjoc5dq] {
    width: 4px;
    background: #cdd7e4;
    border-radius: 1px;
    display: inline-block;
}

.conf .bars i.on[b-6s1tjoc5dq] { background: #3f7ac0; }
.conf .bars i:nth-child(1)[b-6s1tjoc5dq] { height: 5px; }
.conf .bars i:nth-child(2)[b-6s1tjoc5dq] { height: 8px; }
.conf .bars i:nth-child(3)[b-6s1tjoc5dq] { height: 11px; }
.conf .bars i:nth-child(4)[b-6s1tjoc5dq] { height: 14px; }

.conf small[b-6s1tjoc5dq] {
    color: #6c7a8c;
    font-size: 0.68rem;
}

/* ---- "still settling" progress list ---- */
.partnership-settling-block[b-6s1tjoc5dq] {
    margin-top: 1.5rem;
    border-top: 1px solid #e6ebf3;
    padding-top: 1rem;
}

.partnership-settling-head[b-6s1tjoc5dq] {
    font-size: 0.95rem;
    color: #1f3f5e;
    margin: 0 0 0.2rem;
}

.partnership-settling-sub[b-6s1tjoc5dq] {
    color: #6c7a8c;
    font-size: 0.8rem;
    margin: 0 0 0.75rem;
    max-width: 70ch;
}

.partnership-settling-list[b-6s1tjoc5dq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.partnership-settling-row[b-6s1tjoc5dq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f1f4f9;
}

.partnership-settling-pair[b-6s1tjoc5dq] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.partnership-settling-meta[b-6s1tjoc5dq] {
    color: #6c7a8c;
    font-size: 0.78rem;
}

.partnership-settling-pill[b-6s1tjoc5dq] {
    border: none;
    cursor: pointer;
    margin-left: auto;
}

.partnership-settling-explainer[b-6s1tjoc5dq] {
    flex-basis: 100%;
    color: #7a5400;
    font-size: 0.78rem;
    background: #fff8e6;
    border: 1px solid #f0d690;
    border-radius: 0.4rem;
    padding: 0.45rem 0.6rem;
    line-height: 1.4;
}

/* ---- loading / empty / error ---- */
.partnership-skeleton[b-6s1tjoc5dq] {
    height: 2.2rem;
    border-radius: 0.4rem;
    background: linear-gradient(90deg, #eef2f8 25%, #e3e9f2 37%, #eef2f8 63%);
    background-size: 400% 100%;
    margin-bottom: 0.5rem;
    animation: partnership-shimmer-b-6s1tjoc5dq 1.3s ease infinite;
}

@keyframes partnership-shimmer-b-6s1tjoc5dq {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.partnership-empty[b-6s1tjoc5dq] {
    text-align: center;
    padding: 2rem 1rem;
    color: #4e6f8e;
}

.partnership-empty-illus[b-6s1tjoc5dq] {
    font-size: 2.4rem;
    margin-bottom: 0.5rem;
}

.partnership-empty strong[b-6s1tjoc5dq] {
    color: #1f3f5e;
    display: block;
    margin-bottom: 0.4rem;
}

.partnership-empty p[b-6s1tjoc5dq] {
    max-width: 52ch;
    margin: 0 auto;
    font-size: 0.85rem;
}

.partnership-error[b-6s1tjoc5dq] {
    padding: 1.2rem;
    color: #6f2950;
}

.partnership-error strong[b-6s1tjoc5dq] {
    color: #b3261e;
}

.partnership-error p[b-6s1tjoc5dq] {
    margin: 0.4rem 0 0.8rem;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .partnership-stats[b-6s1tjoc5dq] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/PaymentSummaryReport.razor.rz.scp.css */
.reports-shell[b-6txgho68mg] {
    max-width: 1280px;
    padding-bottom: 2rem;
}

.reports-crumb[b-6txgho68mg] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.reports-crumb-link[b-6txgho68mg] {
    background: none;
    border: none;
    padding: 0;
    color: #0d2c55;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.reports-crumb-link:hover[b-6txgho68mg],
.reports-crumb-link:focus-visible[b-6txgho68mg] {
    text-decoration: underline;
    outline: none;
}

.reports-subtitle[b-6txgho68mg] {
    color: #4e6f8e;
    margin: -0.25rem 0 1.25rem;
    max-width: 70ch;
}

.reports-available-now-card[b-6txgho68mg] {
    background: #ffffff;
    border: 1px solid #d7e0ec;
    border-radius: 0.55rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}

/* BL-009: quick-range buttons (1m, 3m, 6m, YTD, 1y). */
.payment-summary-quick-ranges[b-6txgho68mg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
}

.payment-summary-filters[b-6txgho68mg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, auto)) 1fr;
    gap: 0.7rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.payment-summary-filter[b-6txgho68mg] {
    display: flex;
    flex-direction: column;
}

.payment-summary-filter .form-label[b-6txgho68mg] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #24384f;
    margin-bottom: 0.2rem;
}

.payment-summary-filter-actions[b-6txgho68mg] {
    flex-direction: row;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: flex-end;
}

.payment-summary-tabs .nav-link[b-6txgho68mg] {
    font-size: 0.88rem;
    padding: 0.3rem 0.8rem;
}

.payment-summary-count-hint[b-6txgho68mg] {
    color: #6c7a8c;
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
}

.payment-summary-table thead th[b-6txgho68mg] {
    color: #2a2f36;
    border-bottom: 1px solid #1f2b38;
    font-size: 0.95rem;
    white-space: nowrap;
}

.payment-summary-table th.sortable-header[b-6txgho68mg] {
    cursor: pointer;
    user-select: none;
}

.payment-summary-table th.sortable-header:hover[b-6txgho68mg] {
    color: #0d2c55;
}

.payment-summary-table td[b-6txgho68mg],
.payment-summary-table th[b-6txgho68mg] {
    vertical-align: middle;
}

.payment-summary-table .numeric[b-6txgho68mg] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.payment-summary-row-outstanding td[b-6txgho68mg] {
    background: #fff8f0;
}

.payment-summary-totals-row td[b-6txgho68mg] {
    border-top: 2px solid #1f2b38;
    background: #f3f6fa;
}

@media (max-width: 768px) {
    .payment-summary-filter-actions[b-6txgho68mg] {
        justify-content: flex-start;
    }
}
/* /Components/Pages/PersonalRecap.razor.rz.scp.css */
/* #634 (portal S6): the personal /me recap — the Strava-style card. Mobile-first,
   share-shaped: the same centred 34rem column as the public recap (a phone card
   dropped into a WhatsApp group), self-contained, no app nav chrome. */

.me-shell[b-9usa3vy546] {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    color: #1f2d3d;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
    /* Long unbroken club/session names must wrap, not overflow, on phones. */
    overflow-wrap: break-word;
}

.me-head[b-9usa3vy546] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.me-brand[b-9usa3vy546] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.me-brand-wordmark[b-9usa3vy546] {
    height: 1.75rem;
    width: auto;
}

.me-title[b-9usa3vy546] {
    font-size: 1.65rem;
    font-weight: 800;
    margin: 0.25rem 0 0.15rem;
    color: #16324f;
    line-height: 1.2;
    overflow-wrap: break-word;
    word-break: break-word;
    /* break-word alone is not enough inside the centred head block: without a
       width bound the h1 can still size to its longest unbroken run (QA repro:
       long club name at 390px, sw 512 vs cw 374). Bound it to the shell. */
    max-width: 100%;
    min-width: 0;
}

.me-sub[b-9usa3vy546] {
    margin: 0;
    color: #5e748a;
    font-size: 0.95rem;
}

.me-section-title[b-9usa3vy546] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5e748a;
    margin: 0 0 0.85rem;
    font-weight: 700;
}

/* ── The HERO: the rating arc. The delta is the emotional headline. ── */
.me-hero[b-9usa3vy546] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #f2f7fc 0%, #e9f1fa 100%);
    border: 1px solid #d9e6f2;
    border-radius: 0.85rem;
    padding: 1.5rem 1.1rem;
    margin-bottom: 2rem;
    text-align: center;
}

.me-hero-delta[b-9usa3vy546] {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.me-up[b-9usa3vy546] {
    color: #2f9e6f;
}

.me-down[b-9usa3vy546] {
    color: #c0392b;
}

.me-hero-arc[b-9usa3vy546] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #16324f;
    font-variant-numeric: tabular-nums;
}

.me-hero-arrow[b-9usa3vy546] {
    color: #5e748a;
    font-weight: 400;
}

.me-hero-label[b-9usa3vy546] {
    font-size: 0.85rem;
    color: #5e748a;
}

.me-hero-none[b-9usa3vy546] {
    color: #47586b;
    font-size: 0.98rem;
}

/* ── Games / won / win% ── */
.me-numbers[b-9usa3vy546] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.me-stat[b-9usa3vy546] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem 0.5rem;
    text-align: center;
}

.me-stat-value[b-9usa3vy546] {
    font-size: 1.9rem;
    font-weight: 800;
    color: #1b6ec2;
    line-height: 1;
}

.me-stat-label[b-9usa3vy546] {
    font-size: 0.8rem;
    color: #5e748a;
    margin-top: 0.35rem;
}

/* ── Fair play (outcomes only). ── */
.me-fairplay[b-9usa3vy546] {
    margin-bottom: 2rem;
}

.me-fairplay-list[b-9usa3vy546] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.me-fairplay-list li[b-9usa3vy546] {
    position: relative;
    padding-left: 1.6rem;
    color: #33475b;
    font-size: 0.98rem;
}

.me-fairplay-list li[b-9usa3vy546]::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #2f9e6f;
    font-weight: 700;
}

/* ── Game by game. ── */
.me-games[b-9usa3vy546] {
    margin-bottom: 2rem;
}

.me-game-list[b-9usa3vy546] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    counter-reset: none;
}

.me-games-note[b-9usa3vy546] {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    color: #5e748a;
    font-style: italic;
}

.me-game[b-9usa3vy546] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.75rem 0.85rem;
    font-size: 0.95rem;
}

.me-game-best[b-9usa3vy546] {
    border-color: #a7ddc0;
    background: #f4fbf7;
}

.me-game-head[b-9usa3vy546] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.me-game-number[b-9usa3vy546] {
    font-weight: 700;
    color: #16324f;
}

.me-game-result[b-9usa3vy546] {
    font-size: 0.85rem;
    font-weight: 700;
}

.me-result-win[b-9usa3vy546] {
    color: #2f9e6f;
}

.me-result-loss[b-9usa3vy546] {
    color: #c0392b;
}

/* expected vs actual pair (#769) */
.me-game-expact[b-9usa3vy546] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.me-eabox[b-9usa3vy546] {
    border-radius: 0.5rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.8rem;
}

.me-eabox-key[b-9usa3vy546] {
    display: block;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8595a6;
    font-weight: 700;
    margin-bottom: 0.1rem;
}

.me-eabox-value[b-9usa3vy546] {
    font-variant-numeric: tabular-nums;
}

.me-exp[b-9usa3vy546] {
    background: #f6f7f9;
    border: 1px solid #e2e8f0;
}

.me-exp .me-eabox-value[b-9usa3vy546] {
    color: #5e748a;
    font-weight: 600;
}

.me-act[b-9usa3vy546] {
    background: #eef4fa;
    border: 1px solid #d9e6f2;
}

.me-act .me-eabox-value[b-9usa3vy546] {
    color: #16324f;
    font-weight: 700;
}

.me-game-foot[b-9usa3vy546] {
    border-top: 1px dashed #e2e8f0;
    padding-top: 0.5rem;
    font-size: 0.84rem;
}

.me-game-rating[b-9usa3vy546] {
    color: #5e748a;
    font-variant-numeric: tabular-nums;
}

.me-game-rating b[b-9usa3vy546] {
    color: #16324f;
    font-weight: 700;
}

.me-game-best-tag[b-9usa3vy546] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #14532d;
}

/* per-game deltas sum to the hero (#769) */
.me-game-sum[b-9usa3vy546] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: #eef4fa;
    border: 1px solid #d9e6f2;
    border-radius: 0.6rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #16324f;
}

.me-game-sum-value[b-9usa3vy546] {
    font-variant-numeric: tabular-nums;
}

/* ── Share (S4 pattern, /me sources). ── */
.me-share[b-9usa3vy546] {
    margin-bottom: 2rem;
    text-align: center;
}

.me-share-prompt[b-9usa3vy546] {
    margin: 0 0 0.75rem;
    color: #5e748a;
    font-size: 0.9rem;
    font-weight: 600;
}

.me-share-actions[b-9usa3vy546] {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
}

.me-share-btn[b-9usa3vy546] {
    appearance: none;
    cursor: pointer;
    border: 1px solid #cddceb;
    background: #fff;
    color: #16324f;
    font-size: 0.98rem;
    font-weight: 600;
    padding: 0.7rem 1.2rem;
    border-radius: 0.75rem;
    min-height: 2.75rem;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.me-share-btn:hover[b-9usa3vy546] {
    background: #f2f7fc;
    border-color: #1b6ec2;
}

.me-share-native[b-9usa3vy546] {
    background: linear-gradient(135deg, #1b6ec2 0%, #16324f 100%);
    color: #fff;
    border-color: transparent;
}

.me-share-native:hover[b-9usa3vy546] {
    filter: brightness(1.05);
    background: linear-gradient(135deg, #1b6ec2 0%, #16324f 100%);
    border-color: transparent;
}

/* ── The not-yours / no-data panel. ── */
.me-card-panel[b-9usa3vy546] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.me-card-panel h1[b-9usa3vy546] {
    font-size: 1.35rem;
    font-weight: 800;
    color: #16324f;
    margin: 0 0 0.75rem;
}

.me-card-panel p[b-9usa3vy546] {
    margin: 0 0 0.6rem;
    color: #33475b;
}

.me-help[b-9usa3vy546] {
    font-size: 0.92rem;
    color: #5e748a;
}

/* ── Footer. ── */
.me-foot[b-9usa3vy546] {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.25rem;
    text-align: center;
}

.me-foot-line[b-9usa3vy546] {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.me-foot-cta[b-9usa3vy546] {
    margin: 0;
    color: #5e748a;
    font-size: 0.9rem;
}

.me-foot-cta strong[b-9usa3vy546] {
    color: #1b6ec2;
}

.me-foot-link[b-9usa3vy546] {
    text-decoration: none;
}

.me-foot-link:hover strong[b-9usa3vy546],
.me-foot-link:focus-visible strong[b-9usa3vy546] {
    text-decoration: underline;
}
/* /Components/Pages/PublicClubPage.razor.rz.scp.css */
/* #635 (portal S8 slice 2): the public club presence page. Mobile-first, single centred
   column, self-contained (no app nav chrome) — the same public-page visual language as
   the club-night recap (SessionRecap.razor.css), which it sits alongside in the /club/
   URL space. */

.clubpage-shell[b-t2wtxo4uww] {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    color: #1f2d3d;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
}

.clubpage-head[b-t2wtxo4uww] {
    text-align: center;
    margin-bottom: 1.75rem;
}

.clubpage-brand[b-t2wtxo4uww] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.clubpage-brand-wordmark[b-t2wtxo4uww] {
    height: 1.75rem;
    width: auto;
}

.clubpage-title[b-t2wtxo4uww] {
    font-size: 1.65rem;
    font-weight: 800;
    margin: 0.25rem 0 0.15rem;
    color: #16324f;
    line-height: 1.2;
}

.clubpage-section-title[b-t2wtxo4uww] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5e748a;
    margin: 0 0 0.85rem;
    font-weight: 700;
}

.clubpage-schedule[b-t2wtxo4uww] {
    margin-bottom: 2rem;
}

.clubpage-empty[b-t2wtxo4uww] {
    margin: 0;
    color: #5e748a;
    font-size: 0.95rem;
}

.clubpage-session-list[b-t2wtxo4uww] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.clubpage-session[b-t2wtxo4uww] {
    background: linear-gradient(135deg, #f2f7fc 0%, #e9f1fa 100%);
    border: 1px solid #d9e6f2;
    border-radius: 0.85rem;
    padding: 0.9rem 1.05rem;
}

.clubpage-session-live[b-t2wtxo4uww] {
    border-color: #7bc47f;
    background: linear-gradient(135deg, #eefaef 0%, #e2f4e4 100%);
}

.clubpage-session-main[b-t2wtxo4uww] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.clubpage-session-title[b-t2wtxo4uww] {
    font-weight: 600;
    color: #16324f;
    font-size: 1.05rem;
}

.clubpage-live-badge[b-t2wtxo4uww] {
    display: inline-flex;
    align-items: center;
    background: #2e7d32;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}

.clubpage-session-meta[b-t2wtxo4uww] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin-top: 0.3rem;
    color: #5e748a;
    font-size: 0.92rem;
}

.clubpage-session-venue[b-t2wtxo4uww]::before {
    content: "· ";
}

.clubpage-recent[b-t2wtxo4uww] {
    margin-bottom: 2rem;
}

.clubpage-recent-list[b-t2wtxo4uww] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.clubpage-recent-link[b-t2wtxo4uww] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    text-decoration: none;
    color: #16324f;
    padding: 0.5rem 0.65rem;
    border-radius: 0.6rem;
}

.clubpage-recent-link:hover[b-t2wtxo4uww] {
    background: #f2f7fc;
}

.clubpage-recent-link:focus-visible[b-t2wtxo4uww] {
    outline: 2px solid #1b6ec2;
    outline-offset: 2px;
}

.clubpage-recent-title[b-t2wtxo4uww] {
    font-weight: 600;
}

.clubpage-recent-when[b-t2wtxo4uww] {
    color: #5e748a;
    font-size: 0.9rem;
}

.clubpage-foot[b-t2wtxo4uww] {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e3ebf3;
    text-align: center;
}

.clubpage-foot-cta[b-t2wtxo4uww] {
    margin: 0;
    color: #5e748a;
    font-size: 0.9rem;
}

.clubpage-foot-link[b-t2wtxo4uww] {
    color: #16324f;
    text-decoration: none;
}

.clubpage-foot-link:hover[b-t2wtxo4uww] {
    text-decoration: underline;
}

.clubpage-foot-link:focus-visible[b-t2wtxo4uww] {
    outline: 2px solid #1b6ec2;
    outline-offset: 2px;
}
/* /Components/Pages/Reports.razor.rz.scp.css */
/* Insights hub — card grid grouped by the question a committee asks. Built to
   Docs/features/club-reports/insights-hub-mockup.html, in the app's visual language. */

.insights-shell[b-zoeczp8t7b] {
    max-width: 1180px;
    padding-bottom: 2.75rem;
}

.insights-head h1[b-zoeczp8t7b] {
    color: #0d2c55;
    font-size: 2.5rem;
    margin: 0;
}

.insights-sub[b-zoeczp8t7b] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin: 0.2rem 0 1.4rem;
}

.ins-sec[b-zoeczp8t7b] {
    margin-bottom: 1.7rem;
}

.ins-sec h2[b-zoeczp8t7b] {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #5a6c82;
    margin: 0 0 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.ins-sec h2 .q[b-zoeczp8t7b] {
    text-transform: none;
    letter-spacing: 0;
    color: #9aa6b6;
    font-weight: 500;
    font-size: 0.8rem;
}

.ins-grid[b-zoeczp8t7b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 0.9rem;
}

.ins-card[b-zoeczp8t7b] {
    background: #ffffff;
    border: 1px solid #c5cfde;
    border-radius: 0.75rem;
    padding: 0.95rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
    min-height: 128px;
}

.ins-card:hover[b-zoeczp8t7b] {
    border-color: #9fc0e6;
    box-shadow: 0 4px 14px rgba(20, 40, 70, 0.08);
}

.ins-card:focus-visible[b-zoeczp8t7b] {
    outline: none;
    border-color: #1b6ec2;
    box-shadow: 0 0 0 3px #1b6ec2;
}

.ins-hd[b-zoeczp8t7b] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ins-ico[b-zoeczp8t7b] {
    width: 30px;
    height: 30px;
    border-radius: 0.5rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: #ffffff;
}

.ins-ttl[b-zoeczp8t7b] {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1f3f5e;
}

.ins-desc[b-zoeczp8t7b] {
    font-size: 0.78rem;
    color: #6c7a8c;
    flex: 1;
    line-height: 1.4;
}

.ins-prev[b-zoeczp8t7b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #3a4a5e;
    font-weight: 600;
    border-top: 1px solid #e6ebf3;
    padding-top: 0.55rem;
    margin-top: auto;
}

.ins-prev .big[b-zoeczp8t7b] {
    font-size: 0.98rem;
    font-weight: 800;
    color: #1f3f5e;
}

.ins-prev .warn[b-zoeczp8t7b] {
    color: #a9750a;
}

.ins-prev .prev-empty[b-zoeczp8t7b] {
    color: #9aa6b6;
    font-weight: 500;
}

.ins-prev .link-prev[b-zoeczp8t7b] {
    color: #1b6ec2;
}

.ins-spark[b-zoeczp8t7b] {
    color: #2e9c63;
    flex: 0 0 auto;
}

/* "Soon" (planned) cards: dashed, muted, not clickable. */
.ins-card.soon[b-zoeczp8t7b] {
    cursor: default;
    background: #f7f9fc;
    border-style: dashed;
}

.ins-card.soon:hover[b-zoeczp8t7b] {
    border-color: #c5cfde;
    box-shadow: none;
}

.ins-card.soon .ins-ico[b-zoeczp8t7b] {
    opacity: 0.5;
}

.ins-card.soon .ins-ttl[b-zoeczp8t7b] {
    color: #5d6b7e;
}

/* Opt-in card (Partnerships when not enabled) keeps the clickable affordance. */
.ins-card.ins-card-optin[b-zoeczp8t7b] {
    cursor: pointer;
}

.ins-chip[b-zoeczp8t7b] {
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 20px;
    padding: 0.12rem 0.55rem;
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ins-chip.soon[b-zoeczp8t7b] {
    background: #eef1f6;
    color: #7a869a;
}

.ins-chip.optin[b-zoeczp8t7b] {
    background: #e3eefb;
    color: #1b6ec2;
}

/* Icon accent colours (match the mockup) */
.ic-att[b-zoeczp8t7b] { background: #2e9c63; }
.ic-sess[b-zoeczp8t7b] { background: #3a7bbf; }
.ic-conv[b-zoeczp8t7b] { background: #2f8f6a; }
.ic-trend[b-zoeczp8t7b] { background: #e0a32a; }
.ic-eng[b-zoeczp8t7b] { background: #3a8f5f; }
.ic-qual[b-zoeczp8t7b] { background: #6b4ea8; }
.ic-fair[b-zoeczp8t7b] { background: #1d7a82; }
.ic-part[b-zoeczp8t7b] { background: #8a6db3; }
.ic-pay[b-zoeczp8t7b] { background: #1f7a4d; }
.ic-court[b-zoeczp8t7b] { background: #cf7a1a; }
.ic-imp[b-zoeczp8t7b] { background: #c0567f; }
.ic-mix[b-zoeczp8t7b] { background: #4a8fb0; }
.ic-mem[b-zoeczp8t7b] { background: #5a6c82; }

.ins-also[b-zoeczp8t7b] {
    font-size: 0.8rem;
    color: #6c7a8c;
    background: #ffffff;
    border: 1px solid #e6ebf3;
    border-radius: 0.65rem;
    padding: 0.75rem 1rem;
    margin-top: 0.4rem;
    line-height: 1.5;
}

.ins-also b[b-zoeczp8t7b] {
    color: #42526a;
}
/* /Components/Pages/SelectClub.razor.rz.scp.css */
.club-select-shell[b-yg368new96] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem 2rem;
    background:
        radial-gradient(circle at 28% 18%, rgba(140, 190, 240, 0.22) 0%, transparent 55%),
        radial-gradient(circle at 78% 88%, rgba(93, 176, 97, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, #294f76 0%, #1f3d5b 100%);
    margin: -1rem -1.5rem -1rem;
}

/* Match MainLayout's asymmetric .content padding-left at desktop. */
@media (min-width: 1280px) {
    .club-select-shell[b-yg368new96] {
        margin-left: -2rem;
    }
}

.club-select-card[b-yg368new96] {
    width: min(34rem, 92vw);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.85rem;
    background: #ffffff;
    padding: 1.5rem 1.5rem 1.3rem;
    box-shadow: 0 14px 32px rgba(8, 24, 50, 0.34);
}

.club-select-card h1[b-yg368new96] {
    margin: 0 0 0.35rem;
    color: #1f3f5e;
}

.club-select-help[b-yg368new96] {
    color: #5e748a;
    margin: 0 0 0.8rem;
}

.club-list[b-yg368new96] {
    display: grid;
    gap: 0.55rem;
}

.club-option[b-yg368new96] {
    text-align: left;
    padding: 0.6rem 0.75rem;
}

.club-select-actions[b-yg368new96] {
    margin-top: 0.8rem;
}
/* /Components/Pages/SessionRecap.razor.rz.scp.css */
/* #632 (portal S3): the public club-night recap. Mobile-first, share-shaped — a
   single centred column that reads well on a phone dropped into a WhatsApp group.
   Self-contained (no app nav chrome), like the static-SSR auth shells. */

.recap-shell[b-annzdwi03a] {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    color: #1f2d3d;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
}

/* When the member-gated named summary is present, let the shell breathe on
   larger screens so the 8-column table fits without horizontal scroll. The
   anonymous teaser keeps the share-shaped 34rem column at every width. */
@media (min-width: 48rem) {
    .recap-shell-wide[b-annzdwi03a] {
        max-width: 64rem;
    }
}

/* #756: chrome-lite ?embed=1 render for the in-app Recap-tab iframe. The wordmark +
   footer are dropped in markup; trim the top padding a touch so the titled content
   sits cleanly at the top of the framed preview. No min-height/100vh anywhere in this
   file, so the iframe auto-sizer measures an honest content height. */
.recap-shell-embed[b-annzdwi03a] {
    padding-top: 1rem;
}

.recap-head[b-annzdwi03a] {
    text-align: center;
    margin-bottom: 1.75rem;
}

.recap-brand[b-annzdwi03a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.recap-brand-wordmark[b-annzdwi03a] {
    height: 1.75rem;
    width: auto;
}

.recap-title[b-annzdwi03a] {
    font-size: 1.65rem;
    font-weight: 800;
    margin: 0.25rem 0 0.15rem;
    color: #16324f;
    line-height: 1.2;
}

.recap-date[b-annzdwi03a] {
    margin: 0;
    color: #5e748a;
    font-size: 0.95rem;
}

.recap-section-title[b-annzdwi03a] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5e748a;
    margin: 0 0 0.85rem;
    font-weight: 700;
}

/* ── Highlights: the emotion-led hero cards, first. ── */
.recap-highlights[b-annzdwi03a] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.recap-highlight[b-annzdwi03a] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: linear-gradient(135deg, #f2f7fc 0%, #e9f1fa 100%);
    border: 1px solid #d9e6f2;
    border-radius: 0.85rem;
    padding: 1rem 1.1rem;
}

.recap-highlight-emoji[b-annzdwi03a] {
    font-size: 1.7rem;
    line-height: 1;
    flex-shrink: 0;
}

.recap-highlight-body[b-annzdwi03a] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.recap-highlight-headline[b-annzdwi03a] {
    font-weight: 700;
    font-size: 1.05rem;
    color: #16324f;
}

.recap-highlight-detail[b-annzdwi03a] {
    font-size: 0.92rem;
    color: #47586b;
}

/* ── Night in numbers. ── */
.recap-awards[b-annzdwi03a] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.recap-award[b-annzdwi03a] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: linear-gradient(135deg, #f2f7fc 0%, #e9f1fa 100%);
    border: 1px solid #d9e6f2;
    border-radius: 0.85rem;
    padding: 1rem 1.1rem;
}

.recap-award-emoji[b-annzdwi03a] {
    font-size: 1.7rem;
    line-height: 1;
    flex-shrink: 0;
}

.recap-award-body[b-annzdwi03a] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.recap-award-title[b-annzdwi03a] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5e748a;
}

.recap-award-primary[b-annzdwi03a] {
    font-weight: 800;
    font-size: 1.05rem;
    color: #16324f;
}

.recap-award-detail[b-annzdwi03a] {
    font-size: 0.92rem;
    color: #47586b;
}

@media (min-width: 42rem) {
    .recap-awards[b-annzdwi03a] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.recap-numbers[b-annzdwi03a] {
    margin-bottom: 2rem;
}

.recap-stat-grid[b-annzdwi03a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.75rem;
}

.recap-stat[b-annzdwi03a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem 0.5rem;
    text-align: center;
}

.recap-stat-value[b-annzdwi03a] {
    font-size: 1.9rem;
    font-weight: 800;
    color: #1b6ec2;
    line-height: 1;
}

.recap-stat-label[b-annzdwi03a] {
    font-size: 0.8rem;
    color: #5e748a;
    margin-top: 0.35rem;
}

/* ── Fair play outcomes. ── */
.recap-fairness[b-annzdwi03a] {
    margin-bottom: 2rem;
}

.recap-fairness-list[b-annzdwi03a] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.recap-fairness-list li[b-annzdwi03a] {
    position: relative;
    padding-left: 1.6rem;
    color: #33475b;
    font-size: 0.98rem;
}

.recap-fairness-list li[b-annzdwi03a]::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #2f9e6f;
    font-weight: 700;
}

/* ── #668 (portal S3b): the member-tier named summary table. Compact, share-shaped;
   horizontal scroll on a phone rather than cramming 8 columns. SHAPE-FIRST — clean,
   not heavily polished; the column set is expected to iterate. ── */
.recap-member-summary[b-annzdwi03a] {
    margin-bottom: 2rem;
}

.recap-member-empty[b-annzdwi03a] {
    color: #5e748a;
    font-size: 0.95rem;
    margin: 0;
}

.recap-member-table-wrap[b-annzdwi03a] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
}

.recap-member-table[b-annzdwi03a] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: #fff;
}

.recap-member-table th[b-annzdwi03a],
.recap-member-table td[b-annzdwi03a] {
    padding: 0.5rem 0.65rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #eef2f6;
}

.recap-member-table thead th[b-annzdwi03a] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5e748a;
    font-weight: 700;
    background: #f7fafc;
}

.recap-member-table tbody tr:last-child td[b-annzdwi03a] {
    border-bottom: none;
}

/* On a phone the 8-column ratings table squeezes the headline "Rating change" value (the
   number players open the recap to see). Below ~600px drop the two least-read columns —
   Initial and Final (the raw before/after rating), which are always the LAST two columns
   when ratings are included — so Rating change stays readable without horizontal scroll.
   Scoped to [data-include-ratings="true"] so the 5-column non-ratings table (where the last
   two columns are Win% + Results) is never touched, and gated at max-width so the DESKTOP
   public recap is unchanged. Additive/responsive only. */
@media (max-width: 600px) {
    .recap-member-table[data-include-ratings="true"] th:nth-last-child(-n + 2)[b-annzdwi03a],
    .recap-member-table[data-include-ratings="true"] td:nth-last-child(-n + 2)[b-annzdwi03a] {
        display: none;
    }
}

.recap-col-rank[b-annzdwi03a] {
    text-align: center;
    width: 2rem;
    color: #5e748a;
    font-weight: 700;
}

.recap-col-num[b-annzdwi03a] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.recap-member-name[b-annzdwi03a] {
    font-weight: 600;
    color: #16324f;
}

.recap-rating-up[b-annzdwi03a] {
    color: #2f9e6f;
    font-weight: 600;
}

.recap-rating-down[b-annzdwi03a] {
    color: #c0392b;
    font-weight: 600;
}

.recap-result-squares[b-annzdwi03a] {
    display: flex;
    gap: 0.2rem;
    /* The squares are a game-by-game SEQUENCE — never wrap onto a second row. */
    flex-wrap: nowrap;
}

.recap-result-square[b-annzdwi03a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.recap-result-win[b-annzdwi03a] {
    background: #2f9e6f;
}

.recap-result-loss[b-annzdwi03a] {
    background: #c0392b;
}

/* ── #668: the "Claim your night" CTA (anonymous / non-member teaser only). ── */
.recap-claim[b-annzdwi03a] {
    margin-bottom: 2rem;
}

.recap-claim-cta[b-annzdwi03a] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    text-align: center;
    background: linear-gradient(135deg, #1b6ec2 0%, #16324f 100%);
    color: #fff;
    border-radius: 0.85rem;
    padding: 1.1rem 1.25rem;
}

.recap-claim-cta-title[b-annzdwi03a] {
    font-weight: 800;
    font-size: 1.1rem;
}

.recap-claim-cta-sub[b-annzdwi03a] {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* #742: "See your night" → /me for a claimed attendee. Secondary to the (unclaimed)
   claim CTA — a clear but calmer link, since this viewer has already claimed. Shown in
   the member-summary tier (where a claimed attendee lands) as the route back to /me. */
.recap-mynight[b-annzdwi03a] {
    margin-bottom: 2rem;
    text-align: center;
}

.recap-mynight-link[b-annzdwi03a] {
    display: inline-block;
    font-weight: 700;
    font-size: 1rem;
    color: #1b6ec2;
    text-decoration: none;
    border: 1px solid #bcd4ea;
    border-radius: 0.85rem;
    padding: 0.75rem 1.25rem;
}

.recap-mynight-link:hover[b-annzdwi03a],
.recap-mynight-link:focus-visible[b-annzdwi03a] {
    text-decoration: underline;
}

/* #753: the #633 recap SHARE affordance was removed from SessionRecap.razor (the recap is
   a pure artifact; share/copy live on the in-app dashboard button bar), so its .recap-share*
   rules were dead and have been deleted — mirroring the .recap-org-* removal. */

/* ── Footer / gentle brand CTA. ── */
.recap-foot[b-annzdwi03a] {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.25rem;
    text-align: center;
}

.recap-foot-cta[b-annzdwi03a] {
    margin: 0;
    color: #5e748a;
    font-size: 0.9rem;
}

.recap-foot-cta strong[b-annzdwi03a] {
    color: #1b6ec2;
}

.recap-foot-link[b-annzdwi03a] {
    text-decoration: none;
}

.recap-foot-link:hover strong[b-annzdwi03a],
.recap-foot-link:focus-visible strong[b-annzdwi03a] {
    text-decoration: underline;
}
/* /Components/Pages/SessionSummaryReport.razor.rz.scp.css */
.reports-shell[b-ikaamvmuyr] {
    max-width: 1280px;
    padding-bottom: 2rem;
}

.reports-crumb[b-ikaamvmuyr] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.reports-crumb-link[b-ikaamvmuyr] {
    background: none;
    border: none;
    padding: 0;
    color: #0d2c55;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.reports-crumb-link:hover[b-ikaamvmuyr],
.reports-crumb-link:focus-visible[b-ikaamvmuyr] {
    text-decoration: underline;
    outline: none;
}

.reports-subtitle[b-ikaamvmuyr] {
    color: #4e6f8e;
    margin: -0.25rem 0 1.25rem;
    max-width: 70ch;
}

.reports-available-now-card[b-ikaamvmuyr] {
    background: #ffffff;
    border: 1px solid #d7e0ec;
    border-radius: 0.55rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}

.session-summary-filters[b-ikaamvmuyr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, auto)) 1fr;
    gap: 0.7rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.session-summary-filter[b-ikaamvmuyr] {
    display: flex;
    flex-direction: column;
}

.session-summary-filter .form-label[b-ikaamvmuyr] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #24384f;
    margin-bottom: 0.2rem;
}

.session-summary-filter-actions[b-ikaamvmuyr] {
    flex-direction: row;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: flex-end;
}

.session-summary-count-hint[b-ikaamvmuyr] {
    color: #6c7a8c;
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
}

.session-summary-table thead th[b-ikaamvmuyr] {
    color: #2a2f36;
    border-bottom: 1px solid #1f2b38;
    font-size: 0.95rem;
    white-space: nowrap;
}

.session-summary-table th.sortable-header[b-ikaamvmuyr] {
    cursor: pointer;
    user-select: none;
}

.session-summary-table th.sortable-header:hover[b-ikaamvmuyr] {
    color: #0d2c55;
}

.session-summary-table td[b-ikaamvmuyr],
.session-summary-table th[b-ikaamvmuyr] {
    vertical-align: middle;
}

.session-summary-table .numeric[b-ikaamvmuyr] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .session-summary-filter-actions[b-ikaamvmuyr] {
        justify-content: flex-start;
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-shell[b-6sm8tliamm] {
    padding: 0;
}

.settings-shell h1[b-6sm8tliamm] {
    color: #0d2c55;
    font-size: 1.4rem;
    margin: 0 0 0.6rem;
}

.settings-card[b-6sm8tliamm] {
    background: #f6f8fb;
    border-radius: 0.35rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(13, 44, 85, 0.08);
}

.settings-card h2[b-6sm8tliamm] {
    color: #24384f;
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
}

/* KioskPinSettingsCard is a child component that uses `.club-card` styles
   defined in Members.razor.css — those don't reach across scope, so the card
   was rendering chrome-less with a Bootstrap-default 2rem h2. ::deep applies
   matching settings-card chrome and h2 sizing inside the child component. */
.settings-shell[b-6sm8tliamm]  .kiosk-pin-card {
    background: #f6f8fb;
    border-radius: 0.35rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(13, 44, 85, 0.08);
}

.settings-shell[b-6sm8tliamm]  .kiosk-pin-card h2 {
    color: #24384f;
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
}

.settings-shell[b-6sm8tliamm]  .kiosk-pin-card .club-help-text {
    color: #5f6f80;
    font-size: 0.88rem;
    margin: 0 0 0.6rem;
}

.settings-card-help[b-6sm8tliamm] {
    margin: 0 0 0.65rem;
    color: #5f6f80;
}

/* #474: read-only banner shown when the user can view but not change settings. */
.settings-readonly-banner[b-6sm8tliamm] {
    font-weight: 600;
    color: #6c4a00;
}

.settings-profile-toolbar[b-6sm8tliamm] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 0.65rem;
}

.settings-profile-picker[b-6sm8tliamm] {
    min-width: min(22rem, 100%);
}

.settings-profile-actions[b-6sm8tliamm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.settings-actions[b-6sm8tliamm] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid #d5e2ef;
    padding: 0.6rem 0.75rem;
    margin-top: 0.8rem;
    z-index: 5;
    box-shadow: 0 -2px 6px rgba(13, 44, 85, 0.08);
}

.settings-dirty-indicator[b-6sm8tliamm] {
    color: #b54708;
    font-size: 0.9rem;
    font-weight: 600;
}

.settings-message[b-6sm8tliamm] {
    color: #4f6177;
    font-size: 0.92rem;
}

.settings-delete-confirm[b-6sm8tliamm] {
    border: 1px solid #f0b5b5;
    background: #fff5f5;
    border-radius: 8px;
    padding: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.settings-section[b-6sm8tliamm] {
    border: 1px solid #d5e2ef;
    border-radius: 10px;
    padding: 0.55rem 0.6rem;
    background: rgba(255, 255, 255, 0.7);
    margin-top: 0.6rem;
}

.settings-section-title[b-6sm8tliamm] {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #0d2c55;
    margin-bottom: 0.4rem;
}

.settings-grid[b-6sm8tliamm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 0.45rem 0.6rem;
}

.settings-grid-wide[b-6sm8tliamm] {
    grid-template-columns: 1fr;
}

.settings-field[b-6sm8tliamm] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: #4d5f72;
}

.settings-season-row[b-6sm8tliamm] {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.settings-season-row .settings-field[b-6sm8tliamm] {
    min-width: 7rem;
}

.settings-toggle[b-6sm8tliamm] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: #1f2d3d;
}

.settings-toggle-inline[b-6sm8tliamm] {
    flex-wrap: wrap;
}

.settings-control[b-6sm8tliamm] {
    width: auto;
}

.settings-control-courts[b-6sm8tliamm] {
    max-width: 5.5rem;
}

.settings-control-award[b-6sm8tliamm] {
    max-width: 10rem;
}

.settings-control-score[b-6sm8tliamm] {
    max-width: 6rem;
}

.settings-control-money[b-6sm8tliamm] {
    max-width: 7.5rem;
}

.settings-control-depth[b-6sm8tliamm] {
    max-width: 6rem;
}

.settings-control-name[b-6sm8tliamm] {
    max-width: 18rem;
}

@media (max-width: 760px) {
    .settings-grid[b-6sm8tliamm] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Signup.razor.rz.scp.css */
.signup-shell[b-xlusw96nc4] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem 2rem;
    background:
        radial-gradient(circle at 28% 18%, rgba(140, 190, 240, 0.22) 0%, transparent 55%),
        radial-gradient(circle at 78% 88%, rgba(93, 176, 97, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, #294f76 0%, #1f3d5b 100%);
    margin: -1rem -1.5rem -1rem;
}

/* Match MainLayout's asymmetric .content padding-left at desktop. */
@media (min-width: 1280px) {
    .signup-shell[b-xlusw96nc4] {
        margin-left: -2rem;
    }
}

.signup-brand[b-xlusw96nc4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
}

.signup-brand-mark[b-xlusw96nc4] {
    font-size: 2.4rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.6px;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

/* BL-057 (2026-04-26 v6): split assets — figures + wordmark sized
   independently to match the .login-brand-logo treatment. */
.signup-brand-logo[b-xlusw96nc4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.signup-brand-logo .signup-brand-figures[b-xlusw96nc4] {
    display: block;
    height: 3.5rem;
    width: auto;
}

.signup-brand-logo .signup-brand-wordmark[b-xlusw96nc4] {
    display: block;
    height: 3.5rem;
    width: auto;
    max-width: 100%;
}

.signup-brand-tagline[b-xlusw96nc4] {
    color: #cfe1f3;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.signup-card[b-xlusw96nc4] {
    width: min(34rem, 92vw);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.85rem;
    background: #ffffff;
    padding: 1.5rem 1.5rem 1.3rem;
    box-shadow: 0 14px 32px rgba(8, 24, 50, 0.34);
}

.signup-card h1[b-xlusw96nc4] {
    margin: 0 0 0.35rem;
    color: #1f3f5e;
}

.signup-help[b-xlusw96nc4] {
    color: #5e748a;
    margin: 0 0 0.8rem;
}

.signup-password-hint[b-xlusw96nc4] {
    font-size: 0.82rem;
    margin-bottom: 0;
}

.signup-password-hint-neutral[b-xlusw96nc4] {
    color: #6c757d;
}

.signup-password-hint-short[b-xlusw96nc4] {
    color: #8a5a00;
}

.signup-password-hint-ok[b-xlusw96nc4] {
    color: #1e7e34;
}

.signup-field-error[b-xlusw96nc4] {
    color: #8a2d2d;
    font-size: 0.82rem;
    margin-bottom: 0;
}

.signup-actions[b-xlusw96nc4] {
    margin-top: 0.8rem;
}

.signup-login-link[b-xlusw96nc4] {
    margin-top: 0.75rem;
    color: #4d6177;
    font-size: 0.92rem;
}

.signup-login-link a[b-xlusw96nc4] {
    color: #0f4f8b;
    font-weight: 600;
}

.signup-error[b-xlusw96nc4] {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid #d88f8f;
    background: #f7e3e3;
    color: #8a2d2d;
    border-radius: 0.5rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.9rem;
}

.signup-error-actions[b-xlusw96nc4] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
}

.signup-error-actions a[b-xlusw96nc4] {
    color: #0f4f8b;
    font-weight: 600;
}

/* #683 (portal S9a): the claim-first acknowledgement line above the duplicate-email
   action links. */
.signup-error-note[b-xlusw96nc4] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
}

.signup-error-actions a + a[b-xlusw96nc4] {
    margin-left: 0.25rem;
}

.signup-pilot-footnote[b-xlusw96nc4] {
    margin-top: 1rem;
    margin-bottom: 0;
    font-size: 0.78rem;
    color: #6c757d;
    line-height: 1.5;
}

.signup-pilot-footnote a[b-xlusw96nc4] {
    color: #0f4f8b;
}

/* #269 honeypot: park the decoy field far off-screen. Deliberately NOT
   display:none / visibility:hidden - naive bots skip those; off-screen
   positioning still reads as "fillable" to them while staying invisible
   and untabbable for humans. */
.signup-website-field[b-xlusw96nc4] {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* /Components/Pages/Signups.razor.rz.scp.css */
/* #379 Sign-ups activity report. */
.signups-controls[b-gzeazmun1x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

.signups-window-label[b-gzeazmun1x] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #2e4f6d;
    font-weight: 600;
}

.signups-window-select[b-gzeazmun1x] {
    width: auto;
    min-width: 9rem;
}

.signups-counts[b-gzeazmun1x] {
    color: #2e4f6d;
}

/* Mobile: stack the (already narrow) table into cards so it reads cleanly on a
   phone, matching the Active Sessions pattern. Scoped to this component. */
@media (max-width: 599.98px) {
    .table-responsive[b-gzeazmun1x] {
        overflow-x: visible;
    }

    .clubs-table thead[b-gzeazmun1x] {
        display: none;
    }

    .clubs-table[b-gzeazmun1x],
    .clubs-table tbody[b-gzeazmun1x],
    .clubs-table tr[b-gzeazmun1x],
    .clubs-table td[b-gzeazmun1x] {
        display: block;
        width: 100%;
    }

    .clubs-table tr[b-gzeazmun1x] {
        border: 1px solid #cdd8e6;
        border-radius: 0.6rem;
        background: #fff;
        padding: 0.35rem 0.6rem;
        margin-bottom: 0.6rem;
    }

    .clubs-table td[b-gzeazmun1x] {
        border: none;
        padding: 0.2rem 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.75rem;
        text-align: right;
    }

    .clubs-table td[b-gzeazmun1x]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #557693;
        text-align: left;
    }
}
/* /Components/Pages/StaleSessions.razor.rz.scp.css */
/* #204: confirm-dialog overlay for the stale-session close action. Self-contained
   here because the look-alike .end-session-modal styles on ClubSessionDashboard are
   component-scoped and don't reach this page. */
.stale-confirm-backdrop[b-kb18p64wp6] {
    position: fixed;
    inset: 0;
    background: rgba(18, 30, 44, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2200;
}

.stale-confirm-modal[b-kb18p64wp6] {
    width: min(520px, 94vw);
    background: #ffffff;
    border: 1px solid #c8d4e2;
    border-radius: 0.75rem;
    box-shadow: 0 16px 36px rgba(21, 43, 68, 0.3);
    padding: 1.1rem 1.2rem 1rem;
}
/* /Components/Pages/Support.razor.rz.scp.css */
/* #583: the always-available Community Supporter hub. Reuses the platform's card look; the inner
   ask body is styled by the shared SupporterAsk component, this file owns the page frame + story. */
.support-page[b-ki65q51o0x] {
    max-width: 52rem;
}

.support-card[b-ki65q51o0x] {
    border: 1px solid rgba(92, 119, 145, 0.3);
    border-radius: 0.65rem;
    background: #ffffff;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 0.15rem 0.35rem rgba(17, 35, 53, 0.06);
}

.support-heading[b-ki65q51o0x] {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.support-story[b-ki65q51o0x] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(92, 119, 145, 0.2);
}

.support-story p[b-ki65q51o0x],
.support-body[b-ki65q51o0x] {
    color: #4b5f75;
    font-size: 0.92rem;
    max-width: 46rem;
}

.support-fund-list[b-ki65q51o0x] {
    color: #4b5f75;
    font-size: 0.92rem;
    margin: 0.25rem 0 0.75rem 1.1rem;
}

.support-fund-list li[b-ki65q51o0x] {
    margin-bottom: 0.2rem;
}

.support-promise[b-ki65q51o0x] {
    font-weight: 600;
    color: #2b4a73;
}
/* /Components/Pages/SystemUsers.razor.rz.scp.css */
.system-users-filters[b-bos17xn4ou] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 0.7rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.system-users-filter[b-bos17xn4ou] {
    display: flex;
    flex-direction: column;
}

.system-users-filter .form-label[b-bos17xn4ou] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #24384f;
    margin-bottom: 0.2rem;
}

.system-users-filter-actions[b-bos17xn4ou] {
    flex-direction: row;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: flex-end;
}

.system-users-count-hint[b-bos17xn4ou] {
    color: #6c7a8c;
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
}

.system-users-table thead th[b-bos17xn4ou] {
    color: #2a2f36;
    border-bottom: 1px solid #1f2b38;
    font-size: 0.95rem;
    white-space: nowrap;
}

.system-users-table th.sortable-header[b-bos17xn4ou] {
    cursor: pointer;
    user-select: none;
}

.system-users-table th.sortable-header:hover[b-bos17xn4ou] {
    color: #0d2c55;
}

.system-users-table td[b-bos17xn4ou],
.system-users-table th[b-bos17xn4ou] {
    vertical-align: middle;
}

.system-users-clubs[b-bos17xn4ou] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.system-users-club-chip[b-bos17xn4ou] {
    background: #eef2f7;
    border: 1px solid #d7e0ec;
    border-radius: 0.35rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.82rem;
    white-space: nowrap;
}

.system-users-club-role[b-bos17xn4ou] {
    color: #4e6f8e;
    font-size: 0.78rem;
    font-style: normal;
    margin-left: 0.25rem;
}

@media (max-width: 768px) {
    .system-users-filter-actions[b-bos17xn4ou] {
        justify-content: flex-start;
    }
}
/* /Components/Pages/UserActivity.razor.rz.scp.css */
.activity-controls[b-a29i2ufd7f] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.activity-control[b-a29i2ufd7f] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: #6b7c90;
}

.activity-control select[b-a29i2ufd7f] {
    min-width: 9rem;
}

.activity-export-btn[b-a29i2ufd7f] {
    margin-left: auto;
    align-self: flex-end;
}

.activity-totals[b-a29i2ufd7f] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.activity-total-card[b-a29i2ufd7f] {
    flex: 1 1 8rem;
    border: 1px solid rgba(120, 145, 175, 0.3);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    background: #f7faff;
}

.activity-total-value[b-a29i2ufd7f] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2b4a73;
    line-height: 1.1;
}

.activity-total-label[b-a29i2ufd7f] {
    font-size: 0.78rem;
    color: #6b7c90;
    margin-top: 0.15rem;
}

.activity-proxy[b-a29i2ufd7f] {
    border-top: 1px solid rgba(120, 145, 175, 0.3);
    border-bottom: 1px solid rgba(120, 145, 175, 0.3);
    padding: 1rem 0;
    margin: 0.25rem 0 1.35rem;
}

.activity-proxy-title[b-a29i2ufd7f] {
    font-size: 0.95rem;
    margin: 0 0 0.55rem;
    color: #2b4a73;
}

.activity-proxy-totals[b-a29i2ufd7f] {
    margin-bottom: 0.55rem;
}

.activity-proxy-note[b-a29i2ufd7f] {
    margin: 0;
    color: #6b7c90;
    font-size: 0.78rem;
    line-height: 1.4;
}

.activity-chart-block[b-a29i2ufd7f] {
    margin-top: 1.1rem;
}

.activity-chart-title[b-a29i2ufd7f] {
    font-size: 0.95rem;
    margin: 0 0 0.35rem;
    color: #2b4a73;
}

.activity-chart-box[b-a29i2ufd7f] {
    position: relative;
    height: 220px;
}

.activity-kind-options[b-a29i2ufd7f] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding-bottom: 0.35rem;
}

.activity-kind-toggle[b-a29i2ufd7f] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    margin: 0;
    color: #2b4a73;
}

.activity-detail-card[b-a29i2ufd7f] {
    margin-top: 1rem;
}

.activity-detail-head[b-a29i2ufd7f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.activity-detail-title[b-a29i2ufd7f] {
    font-size: 1.05rem;
    margin: 0;
    color: #2b4a73;
}

.activity-detail-sub[b-a29i2ufd7f] {
    color: #6b7c90;
    font-weight: 400;
    font-size: 0.85rem;
}

.activity-detail-tabs[b-a29i2ufd7f] {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.activity-detail-tab[b-a29i2ufd7f] {
    border: 1px solid rgba(120, 145, 175, 0.4);
    background: #fff;
    color: #4c6f95;
    border-radius: 999px;
    padding: 0.2rem 0.8rem;
    font-size: 0.82rem;
    cursor: pointer;
}

.activity-detail-tab.active[b-a29i2ufd7f] {
    background: linear-gradient(180deg, #6a88aa 0%, #4c6f95 100%);
    color: #fff;
    border-color: #4c6f95;
}

.activity-detail-table[b-a29i2ufd7f] {
    font-size: 0.86rem;
}

.activity-kind-badge[b-a29i2ufd7f] {
    margin-left: 0.4rem;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
/* /Components/Pages/Welcome.razor.rz.scp.css */
/* #775 (player-mode shell A): thin /welcome landing. Reuses the /my-nights + /me centred-card
   language + visual tokens — no new brand. */

.welcome-shell[b-bpzll9w62y] {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    color: #1f2d3d;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.welcome-head[b-bpzll9w62y] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.welcome-wordmark[b-bpzll9w62y] {
    height: 1.75rem;
    width: auto;
}

.welcome-card[b-bpzll9w62y] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 1.6rem 1.35rem;
    text-align: center;
}

.welcome-title[b-bpzll9w62y] {
    font-size: 1.65rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
    color: #16324f;
    line-height: 1.2;
}

.welcome-lead[b-bpzll9w62y] {
    margin: 0 0 1.5rem;
    color: #47586b;
    font-size: 0.98rem;
}

.welcome-actions[b-bpzll9w62y] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
}

.welcome-btn[b-bpzll9w62y] {
    display: block;
    padding: 0.8rem 1rem;
    border-radius: 0.6rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.welcome-btn-primary[b-bpzll9w62y] {
    background: #1b6ec2;
    color: #fff;
    border: 1px solid #1b6ec2;
}

.welcome-btn-primary:hover[b-bpzll9w62y],
.welcome-btn-primary:focus-visible[b-bpzll9w62y] {
    background: #155a9e;
    box-shadow: 0 6px 18px rgba(27, 110, 194, 0.18);
}

.welcome-btn-secondary[b-bpzll9w62y] {
    background: #fff;
    color: #16324f;
    border: 1px solid #cbd8e6;
}

.welcome-btn-secondary:hover[b-bpzll9w62y],
.welcome-btn-secondary:focus-visible[b-bpzll9w62y] {
    border-color: #1b6ec2;
}

.welcome-note[b-bpzll9w62y] {
    margin: 0;
    color: #5e748a;
    font-size: 0.88rem;
    line-height: 1.45;
}
/* /Components/Shared/ClubSessionSettingsEditor.razor.rz.scp.css */
.settings-section[b-gcdp38x259] {
    border: 1px solid #d5e2ef;
    border-radius: 10px;
    padding: 0.55rem 0.6rem;
    background: rgba(255, 255, 255, 0.7);
    margin-top: 0.6rem;
}

.settings-section-title[b-gcdp38x259] {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #0d2c55;
    margin-bottom: 0.4rem;
}

.settings-grid[b-gcdp38x259] {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 0.45rem 0.6rem;
}

.settings-grid-wide[b-gcdp38x259] {
    grid-template-columns: 1fr;
}

.settings-field[b-gcdp38x259] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: #4d5f72;
}

.settings-toggle[b-gcdp38x259] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: #1f2d3d;
}

.settings-toggle-inline[b-gcdp38x259] {
    flex-wrap: wrap;
}

.settings-control[b-gcdp38x259] {
    width: auto;
}

.settings-control-courts[b-gcdp38x259] {
    max-width: 5.5rem;
}

.settings-control-award[b-gcdp38x259] {
    max-width: 10rem;
}

.settings-control-score[b-gcdp38x259] {
    max-width: 6rem;
}

.settings-control-money[b-gcdp38x259] {
    max-width: 7.5rem;
}

.settings-control-depth[b-gcdp38x259] {
    max-width: 6rem;
}

@media (max-width: 760px) {
    .settings-grid[b-gcdp38x259] {
        grid-template-columns: 1fr;
    }
}

/* S2 (#67): Sticky pairs management section. */
.settings-section-help[b-gcdp38x259] {
    font-size: 0.78rem;
    color: #5a6c82;
    margin: 0 0 0.5rem;
    line-height: 1.4;
}

.settings-section-help code[b-gcdp38x259] {
    background: #e3edff;
    color: #0d2c55;
    border-radius: 4px;
    padding: 0 0.25rem;
    font-size: 0.74rem;
}

.sticky-pairs-empty[b-gcdp38x259] {
    font-size: 0.8rem;
    margin: 0 0 0.5rem;
}

.sticky-pairs-list[b-gcdp38x259] {
    list-style: none;
    margin: 0 0 0.6rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sticky-pairs-item[b-gcdp38x259] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c5cfde;
    background: #fff;
    border-radius: 10px;
}

.sticky-pairs-names[b-gcdp38x259] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #1f3f5e;
}

.sticky-pairs-link[b-gcdp38x259] {
    color: #1f4b76;
    font-size: 0.85rem;
}

.sticky-pairs-remove[b-gcdp38x259] {
    margin-left: auto;
}

.sticky-pairs-add[b-gcdp38x259] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sticky-pairs-select[b-gcdp38x259] {
    min-width: 9rem;
    max-width: 12rem;
}

.sticky-pairs-error[b-gcdp38x259] {
    font-size: 0.78rem;
    margin: 0.4rem 0 0;
}

.sticky-pairs-note[b-gcdp38x259] {
    font-size: 0.78rem;
    margin: 0.4rem 0 0;
    line-height: 1.35;
}
/* /Components/Shared/KnockoutBracket.razor.rz.scp.css */
/* Knockout bracket layout (slice 9, net-new per F3). Desktop = a column per round laid out
   left-to-right (a tree read left to right); mobile = the same columns stacked vertically
   (round-by-round) so the whole tree never needs panning. The container scrolls horizontally
   WITHIN ITSELF only (overflow-x: auto), never the whole page. MVP-correct + legible, not
   gold-plated (bracket aesthetics are backlog #217). */

.knockout-bracket[b-nula0rm3fs] {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    align-items: stretch;
}

.knockout-round[b-nula0rm3fs] {
    display: flex;
    flex-direction: column;
    min-width: 13rem;
    flex: 0 0 auto;
}

.knockout-round-name[b-nula0rm3fs] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #5a6b80;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.75rem;
}

/* The round's matches spread to fill the column height so later rounds sit centred against
   their feeders (a legible tree without absolute positioning). */
.knockout-round-matches[b-nula0rm3fs] {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 0.75rem;
    flex: 1 1 auto;
}

.knockout-match[b-nula0rm3fs] {
    border: 1px solid #d7deea;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.knockout-match--complete[b-nula0rm3fs] {
    border-color: #b9d4c2;
}

.knockout-match--bye[b-nula0rm3fs] {
    opacity: 0.85;
}

/* A playable match is a full tap target (44px min via the slot padding) into Match Entry. */
.knockout-match-link[b-nula0rm3fs] {
    display: block;
    text-decoration: none;
    color: inherit;
    min-height: 44px;
}

.knockout-match-link:hover[b-nula0rm3fs],
.knockout-match-link:focus-visible[b-nula0rm3fs] {
    background: #f1f6ff;
    outline: none;
}

.knockout-match-link:focus-visible[b-nula0rm3fs] {
    box-shadow: inset 0 0 0 2px #0d2c55;
}

.knockout-match-static[b-nula0rm3fs] {
    display: block;
}

.knockout-match-slot[b-nula0rm3fs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    min-height: 24px;
    color: #24384f;
    font-size: 0.95rem;
}

.knockout-match-slot--winner .knockout-match-pair[b-nula0rm3fs] {
    font-weight: 700;
    color: #0d2c55;
}

.knockout-match-slot--awaiting .knockout-match-pair[b-nula0rm3fs] {
    /* #5a6b80 on #fff = 4.99:1 (>=4.5:1 AA); was #7a8699 (~3.5:1, failed). Keep italic. */
    color: #5a6b80;
    font-style: italic;
}

.knockout-match-pair[b-nula0rm3fs] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.knockout-match-score[b-nula0rm3fs] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #0d2c55;
}

.knockout-match-vs[b-nula0rm3fs] {
    text-align: center;
    font-size: 0.7rem;
    color: #9aa7b8;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
    line-height: 1.2;
}

.knockout-match-action[b-nula0rm3fs] {
    display: block;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #0d2c55;
    background: #eaf1ff;
    text-align: center;
}

/* The "Correct this result" affordance on a Complete match (Q9.7) — a quieter, secondary tone
   than the primary "Enter score" so it reads as a correction, not the headline action. */
.knockout-match-link--correct .knockout-match-action[b-nula0rm3fs] {
    color: #4a5a70;
    background: #eef2f7;
    font-weight: 500;
}

/* Interactive signal on the muted "Correct this result" action (UX rework R1 polish 7): a
   chevron so it reads as a tap target while staying secondary. Decorative — the action text
   already labels the affordance, so the glyph is aria-hidden via content (not announced). */
.knockout-match-link--correct .knockout-match-action[b-nula0rm3fs]::after {
    content: " ›";
    font-weight: 600;
}

.knockout-match-note[b-nula0rm3fs] {
    display: block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    color: #7a8699;
    text-align: center;
}

/* LR-8a: head start shown INLINE in brackets after the weaker slot's name — "Team (+N)" —
   replacing the LR-2 under-row line. A short, nowrap suffix that does NOT participate in the
   pair-name ellipsis truncation (flex-shrink:0 keeps "(+N)" intact even when the long pair
   name truncates), and sits before the score in the slot row. #3a5072 on #fff = 7.4:1 (AA). */
.knockout-match-headstart-inline[b-nula0rm3fs] {
    flex-shrink: 0;
    color: #3a5072;
    font-weight: 600;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Mobile (<= 700px): stack the rounds vertically (round-by-round). No horizontal scroll of
   the whole tree; each round is a full-width block read top to bottom. */
@media (max-width: 700px) {
    .knockout-bracket[b-nula0rm3fs] {
        flex-direction: column;
        overflow-x: visible;
        gap: 1.25rem;
    }

    .knockout-round[b-nula0rm3fs] {
        min-width: 0;
        width: 100%;
    }

    .knockout-round-matches[b-nula0rm3fs] {
        justify-content: flex-start;
    }

    /* MAJOR 2: the "v" separator collapsed at <=700 (the borders met, the glyph was squeezed
       to an unreadable sliver). Give it a legible height + size on mobile. */
    .knockout-match-vs[b-nula0rm3fs] {
        font-size: 0.8rem;
        padding: 0.15rem 0;
    }
}
/* /Components/Shared/LoggingErrorBoundary.razor.rz.scp.css */
.ui-error-panel[b-f44lfz8suk] {
    margin: 1.25rem auto;
    max-width: 32rem;
    border: 1px solid #e0b4b4;
    background: #fcf3f3;
    border-radius: 0.6rem;
    padding: 1rem 1.25rem;
    color: #6b2a2a;
    text-align: center;
}

.ui-error-title[b-f44lfz8suk] {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.ui-error-text[b-f44lfz8suk] {
    margin: 0 0 0.9rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #7a4a4a;
}
/* /Components/Shared/MemberActivityTimeline.razor.rz.scp.css */
/* #302 Slice 2: member activity timeline — a vertical card feed (newest-first)
   interleaving session and manual-adjustment rows. The session W/L squares and
   rating-journey colours mirror MemberSessionHistoryTable.razor.css but are
   redeclared here because Blazor scoped CSS doesn't cross components. The two row
   types are distinguished THREE ways (not colour alone): leading glyph shape
   (court vs pencil), chip colour (muted blue vs navy), and a "Manual adjustment"
   text badge. */

.member-activity-list[b-ksrdd3hhw8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.member-activity-partial[b-ksrdd3hhw8] {
    color: #b02a2a;
    margin: 0 0 0.55rem;
    font-weight: 600;
}

.member-activity-row[b-ksrdd3hhw8] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border: 1px solid #ccdae8;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.5rem 0.65rem;
}

/* Leading glyph chip — a coloured rounded square carrying the type icon. */
.member-activity-chip[b-ksrdd3hhw8] {
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: #ffffff;
}

/* Session: muted blue chip with a frame/court glyph. */
.member-activity-chip-session[b-ksrdd3hhw8] {
    background: #3d6fa5;
}

/* Manual adjustment: navy chip with a pencil glyph — same navy "a human did this"
   language as the Slice-1 graph marker, so the two surfaces share one visual idea. */
.member-activity-chip-adjustment[b-ksrdd3hhw8] {
    background: #0d2c55;
}

.member-activity-body[b-ksrdd3hhw8] {
    flex: 1;
    min-width: 0;
}

.member-activity-line1[b-ksrdd3hhw8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.member-activity-date[b-ksrdd3hhw8] {
    color: #24384f;
    font-weight: 700;
    font-size: 0.92rem;
}

.member-activity-sep[b-ksrdd3hhw8] {
    color: #8fa1b4;
}

.member-activity-session-name[b-ksrdd3hhw8] {
    color: #46607c;
    font-size: 0.9rem;
}

/* Navy badge (#0d2c55) — matches the adjustment chip and the Slice-1 graph
   marker, so the badge + chip speak the same "a human did this" language.
   bg-secondary grey read as "inactive/low-priority", wrong for an audit signal. */
.member-activity-badge[b-ksrdd3hhw8] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: #0d2c55;
    color: #ffffff;
}

.member-activity-line2[b-ksrdd3hhw8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.7rem;
    margin-top: 0.3rem;
    font-size: 0.88rem;
    color: #24384f;
}

.member-activity-record[b-ksrdd3hhw8] {
    color: #46607c;
}

.member-activity-set[b-ksrdd3hhw8] {
    color: #24384f;
    font-weight: 600;
}

/* #302 Slice 3: the captured actor ("by NAME") on a post-capture adjustment row.
   Muted, secondary weight — the audit "who", not the headline. Absent (no markup)
   on pre-capture rows. */
.member-activity-actor[b-ksrdd3hhw8] {
    color: #46607c;
}

.member-activity-note[b-ksrdd3hhw8] {
    margin-top: 0.25rem;
    color: #46607c;
    font-style: italic;
    font-size: 0.88rem;
    word-break: break-word;
}

/* --- session W/L squares + rating journey (redeclared from the session-history
   table; scoped CSS doesn't cross components) --- */
.session-result-squares[b-ksrdd3hhw8] {
    display: inline-flex;
    gap: 0.2rem;
    flex-wrap: wrap;
}

.session-result-square[b-ksrdd3hhw8] {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
}

.session-result-win[b-ksrdd3hhw8] {
    background: #248c3b;
}

.session-result-loss[b-ksrdd3hhw8] {
    background: #bd2f2f;
}

.member-activity-rating[b-ksrdd3hhw8] {
    white-space: nowrap;
}

.session-rating-arrow[b-ksrdd3hhw8] {
    color: #8fa1b4;
    padding: 0 0.2rem;
}

.session-rating-positive[b-ksrdd3hhw8] {
    color: #1c7a33;
    font-weight: 700;
}

.session-rating-negative[b-ksrdd3hhw8] {
    color: #b02a2a;
    font-weight: 700;
}
/* /Components/Shared/MemberAddModal.razor.rz.scp.css */
/* #437: Add member modal. Backdrop/shell conventions mirror MemberProfileModal
   (this component does not import that page's scoped CSS, so the tokens are
   declared here too so the two modal surfaces read as one family). */

.member-add-modal-backdrop[b-pzekhdww76] {
    position: fixed;
    inset: 0;
    background: rgba(18, 30, 44, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2100;
}

.member-add-modal[b-pzekhdww76] {
    /* Narrower than the profile modal (820px not needed — this is a single-column
       form, no history tables). Subtract the backdrop's 1rem padding each side so
       it never overflows a phone. */
    width: min(640px, calc(100vw - 2rem));
    max-height: 90vh;
    overflow-y: auto;
    background: #f8fbff;
    border: 1px solid #b8c8d8;
    border-radius: 0.75rem;
    box-shadow: 0 16px 36px rgba(21, 43, 68, 0.3);
    padding: 0.85rem;
    padding-bottom: 1rem;
}

.member-add-modal-header[b-pzekhdww76] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.member-add-modal-header h3[b-pzekhdww76] {
    margin: 0;
    color: #253f5b;
    font-size: 1.35rem;
    font-weight: 700;
}

/* #437 UX rework: the header Close button is a tap target like the footer
   buttons, so give it the same 2.75rem (44px) min-height. btn-sm alone left it
   ~31px — under the kiosk touch minimum. The profile modal's own close button is
   a separate ticket and untouched. */
.member-add-close[b-pzekhdww76] {
    min-height: 2.75rem;
}

.member-add-modal-body[b-pzekhdww76] {
    width: 100%;
    min-width: 0;
}

/* The embedded editor's own panel chrome is redundant inside the modal shell —
   drop its border/padding/margin so it reads as the modal body, not a card in a
   card. ::deep pierces the editor component's scoped CSS (the panel is its
   element). Mirrors MemberProfileModal's .member-profile-edit-body treatment. */
.member-add-modal-body[b-pzekhdww76]  .member-editor-panel {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

/* #437 UX rework item 2: the required-field hint that sits directly above the
   action row when Save is disabled (e.g. "Required: name, gender."). Muted but
   legible; the red asterisks on the fields are the at-a-glance cue, this names
   the missing one. */
.member-add-validation-hint[b-pzekhdww76] {
    margin: 0.85rem 0 0;
    color: #6a7a8c;
    font-size: 0.85rem;
}

/* The shell's own three-button row (Cancel / Save and add another / Save and
   close). Wraps on narrow viewports; large touch targets for tablet/kiosk. */
.member-add-modal-actions[b-pzekhdww76] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

/* When the validation hint is shown it already supplies the top gap, so collapse
   the actions row's own top margin to avoid a double gap. */
.member-add-validation-hint + .member-add-modal-actions[b-pzekhdww76] {
    margin-top: 0.4rem;
}

.member-add-modal-actions .btn[b-pzekhdww76] {
    /* Kiosk/tablet fat-finger target — comfortable height across the row. */
    min-height: 2.75rem;
}

/* Save and close is the primary action — push it to the trailing edge so the
   eye lands on it last (right-most in LTR). */
.member-add-save-close[b-pzekhdww76] {
    margin-left: auto;
}

/* On short kiosk/phone viewports the form can push the action row below the fold.
   The modal is the scroll container (overflow-y:auto), so pin the actions while
   the fields scroll behind. Mirrors the MemberEditor modal-actions sticky rule. */
@media (max-height: 700px) {
    .member-add-modal-actions[b-pzekhdww76] {
        position: sticky;
        bottom: 0;
        z-index: 1;
        background: #f8fbff;
        padding: 0.5rem 0;
        margin-top: 0.5rem;
        border-top: 1px solid #d8e0ea;
    }
}

@media (max-width: 560px) {
    /* Stack the actions full-width on a phone; primary stays last in source order
       so it's the bottom button. Clear the auto-margin that right-aligned it. */
    .member-add-save-close[b-pzekhdww76] {
        margin-left: 0;
    }

    .member-add-modal-actions .btn[b-pzekhdww76] {
        flex: 1 1 100%;
    }
}
/* /Components/Shared/MemberEditor.razor.rz.scp.css */
/* #407: shared full member editor. Styles lifted verbatim from
   Members.razor.css (member-editor-panel + the photo/rating/game-preference/
   help-popover/add-grid families) so the component is self-contained — its
   scoped CSS does not import the Members page's. */

.member-editor-panel[b-a8az8byic2] {
    border: 1px solid rgba(13, 44, 85, 0.12);
    border-radius: 0.4rem;
    background: #ffffff;
    padding: 0.75rem;
    margin: 0 0 0.85rem;
}

.member-editor-title[b-a8az8byic2] {
    margin: 0 0 0.6rem;
    color: #2c4560;
    font-size: 1.15rem;
    font-weight: 700;
}

/* #437 UX rework: required-field marker. Add mode only (the editor only renders
   the span when ShowRequiredMarkers, which is gated to Add) — the Edit profile
   editor stays asterisk-free. aria-hidden on the span; the modal's footer hint
   carries the accessible "Required: …" text. */
.member-editor-required[b-a8az8byic2] {
    color: #b3261e;
    margin-left: 0.15rem;
    font-weight: 700;
}

.club-add-actions[b-a8az8byic2] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.member-add-grid[b-a8az8byic2] {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 0.7fr) minmax(10rem, 0.7fr) minmax(10rem, 0.7fr) auto;
    gap: 0.55rem;
    align-items: end;
    margin: 0 0 0.85rem;
}

/* #407 review majors #2/#3: embedded as the modal EDIT body, the editor is
   SINGLE-COLUMN at every width (not the page's 5-col grid that crammed fields
   side-by-side at 1440px). The Save/Cancel actions live in their own block
   below the grid (member-editor-modal-actions), so they sit at the natural
   bottom of the stacked form rather than as a wide grid cell. */
.member-add-grid-modal[b-a8az8byic2] {
    grid-template-columns: 1fr;
    align-items: stretch;
}

.member-editor-modal-actions[b-a8az8byic2] {
    flex-wrap: wrap;
    margin: 0.75rem 0 0;
}

/* #407 review major #5 / #445 niggle 2: the in-modal Save/Cancel row is a sticky
   footer pinned to the bottom of the scrolling modal body, so it stays put while
   the fields scroll behind it. The scroll container is now
   .member-profile-modal-body (#445: the modal body became the sole scroll region,
   previously the whole .member-profile-modal scrolled). With the Member ID now
   rendered ABOVE this row (MemberEditor.razor) the actions are the LAST element in
   the body — so at the very bottom of scroll there is nothing below them to reveal
   and the buttons do not shift. Promoted from @media (max-height:700px) to ALL
   heights: on a tall viewport where the form doesn't scroll, position:sticky is
   inert (the row simply sits in normal flow), so this is safe. Confined to the
   modal context (.member-editor-panel-modal) so the on-page Add form is untouched. */
.member-editor-panel-modal .member-editor-modal-actions[b-a8az8byic2] {
    position: sticky;
    bottom: 0;
    z-index: 1;
    /* opaque so scrolled fields don't bleed through the pinned row */
    background: #f8fbff;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    border-top: 1px solid #d8e0ea;
}

.club-help-text[b-a8az8byic2] {
    margin: 0.75rem 0 0;
    color: #5f6f80;
}

.club-help-text code[b-a8az8byic2] {
    color: #c72576;
    background: transparent;
    padding: 0;
}

.form-label-with-help-text[b-a8az8byic2] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.form-label-help-button[b-a8az8byic2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: #e7eff8;
    color: #1f5a8a;
    border: 1px solid #b9c9db;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.form-label-help-button:hover[b-a8az8byic2] {
    background: #d6e4f3;
    border-color: #94afca;
}

.form-label-help-button:focus[b-a8az8byic2] {
    outline: 2px solid #1b6ec2;
    outline-offset: 1px;
}

.form-help-popover[b-a8az8byic2] {
    margin: 0.4rem 0 0.6rem;
    padding: 0.6rem 0.75rem;
    background: #f3f7fb;
    border: 1px solid #c4d2e0;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #2a4361;
    line-height: 1.4;
}

.form-help-popover-list[b-a8az8byic2] {
    margin: 0.25rem 0 0.5rem;
    padding-left: 1.2rem;
    list-style: disc;
}

.form-help-popover-list li[b-a8az8byic2] {
    margin-bottom: 0.15rem;
}

.form-help-popover-close[b-a8az8byic2] {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.35rem 0.5rem;
    margin-top: 0.5rem;
    text-decoration: none;
    color: #1b6ec2;
    font-weight: 500;
}

.member-photo-field[b-a8az8byic2] {
    margin: 0 0 0.9rem;
}

.member-photo-editor[b-a8az8byic2] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.member-photo-editor-preview[b-a8az8byic2] {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 999px;
    border: 2px solid rgba(31, 43, 56, 0.2);
    object-fit: cover;
    background: #fff;
}

.member-photo-editor-fallback[b-a8az8byic2] {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(38, 66, 97, 0.22);
    background: #ffffff;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    box-sizing: border-box;
}

.member-photo-editor-fallback.male[b-a8az8byic2] {
    border-color: #3d88c8;
    background: #eef6ff;
    color: var(--gender-male);
}

.member-photo-editor-fallback.female[b-a8az8byic2] {
    border-color: #cf75a4;
    background: #fff0f7;
    color: var(--gender-female);
}

.member-photo-editor-fallback.unspecified[b-a8az8byic2] {
    border-color: #8fa1b4;
    background: #f2f6fa;
    color: #5a6d80;
}

.member-photo-editor-controls[b-a8az8byic2] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 16rem;
}

.member-photo-initials[b-a8az8byic2] {
    display: block;
    color: currentColor;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.member-photo-error[b-a8az8byic2] {
    color: #a11b2f;
    font-size: 0.85rem;
    font-weight: 600;
}

.member-rating-readonly[b-a8az8byic2] {
    border: 1px solid #c5d4e2;
    border-radius: 0.35rem;
    background: #f4f8fc;
    padding: 0.45rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.member-rating-value[b-a8az8byic2] {
    color: #213a54;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}

.member-rating-hint[b-a8az8byic2] {
    color: #5d748a;
    font-size: 0.78rem;
}

/* #273 organiser-set game preference radio group. */
.member-game-preference-field .form-check[b-a8az8byic2] {
    margin-bottom: 0.15rem;
}

.member-game-preference-field .club-help-text[b-a8az8byic2] {
    margin-top: 0.25rem;
}

/* #407: recoverable save-failure / partial-save banner (role="alert"). */
.member-editor-save-error[b-a8az8byic2] {
    margin: 0.6rem 0 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid #e2b3bc;
    border-radius: 0.4rem;
    background: #fdf2f4;
    color: #a11b2f;
    font-size: 0.88rem;
    font-weight: 600;
}

@media (max-width: 1100px) {
    .member-add-grid[b-a8az8byic2] {
        grid-template-columns: 1fr 1fr;
    }

    .member-photo-editor[b-a8az8byic2] {
        flex-direction: column;
        align-items: flex-start;
    }

    .member-photo-editor-controls[b-a8az8byic2] {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 700px) {
    .member-add-grid[b-a8az8byic2] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/MemberProfileModal.razor.rz.scp.css */
.member-profile-modal-backdrop[b-vmu2rhjtmw] {
    position: fixed;
    inset: 0;
    background: rgba(18, 30, 44, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2100;
}

.member-profile-modal[b-vmu2rhjtmw] {
    /* The backdrop pads 1rem each side — 94vw overflowed it on phones
       (e.g. 412px Moto: 94vw = 387px > 380px available), forcing a small
       horizontal scroll. Subtract the padding instead. Desktop cap raised
       820px → 1080px so the session-history table fits real-world data
       (long session names, 4-digit rating journeys) without scrolling;
       phones are unaffected — the calc() term governs below ~1112px. */
    width: min(1080px, calc(100vw - 2rem));
    max-height: 90vh;
    /* #445 niggles: the modal is now a flex COLUMN — a pinned header (flex:0 0 auto)
       above a single scrolling body (flex:1 1 auto). Previously the whole modal was
       overflow-y:auto, so scrolling carried the header (and its Close button) off the
       top. The scroll now lives on .member-profile-modal-body alone. */
    display: flex;
    flex-direction: column;
    background: #f8fbff;
    border: 1px solid #b8c8d8;
    border-radius: 0.75rem;
    box-shadow: 0 16px 36px rgba(21, 43, 68, 0.3);
    padding: 0.85rem;
    /* #419 UX: on 1440px the content (Member ID row) crowded the modal floor.
       A touch more clearance at the bottom so content doesn't touch the edge. */
    padding-bottom: 1rem;
}

.member-profile-modal-header[b-vmu2rhjtmw] {
    /* #445: stays pinned at the top while the body scrolls. */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.member-profile-modal-header-actions[b-vmu2rhjtmw] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* #445: the close affordance is now an X icon pinned in the header's top-right
   (the Bootstrap btn-close glyph, as used on PaymentsTab / ClubSessionDashboard /
   SystemUsers). Grow its hit area to a 44px kiosk/touch target (WCAG 2.5.5) while
   keeping the small glyph centred. flex:0 0 auto so it never shrinks beside the
   "Edit details" button in view mode. */
.member-profile-modal-close[b-vmu2rhjtmw] {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-position: center;
}

.member-profile-modal-header h3[b-vmu2rhjtmw] {
    margin: 0;
    color: #253f5b;
    font-size: 1.35rem;
    font-weight: 700;
}

.member-profile-modal-body[b-vmu2rhjtmw] {
    /* #445: the ONLY scroll region now (the modal itself no longer scrolls, so the
       header stays pinned above this). flex:1 1 auto takes the remaining height;
       min-height:0 is REQUIRED — a flex item defaults to min-height:auto, which
       refuses to shrink below its content and would push the whole modal past the
       viewport instead of scrolling here. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0.9rem;
    align-items: start;
}

/* Grid items default to min-width:auto (= their max-content), so any wide
   child — e.g. the six-tab row on phones — silently forces the whole column
   (and every sibling, like the sessions table) wider than the modal,
   producing a horizontal scroll (Moto G75 report). Let children shrink. */
.member-profile-modal-body > *[b-vmu2rhjtmw] {
    min-width: 0;
}

.member-profile-photo[b-vmu2rhjtmw] {
    width: 11rem;
    height: 11rem;
    border-radius: 0.85rem;
    border: 2px solid rgba(37, 63, 91, 0.2);
    object-fit: cover;
    background: #fff;
}

.member-profile-photo-fallback[b-vmu2rhjtmw] {
    width: 11rem;
    height: 11rem;
    border-radius: 0.85rem;
    border: 2px solid rgba(37, 63, 91, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f2f6fa;
    color: #4e657d;
}

.member-profile-photo-fallback.male[b-vmu2rhjtmw] {
    border-color: #3d88c8;
    background: #eef6ff;
    color: #2e6fa9;
}

.member-profile-photo-fallback.female[b-vmu2rhjtmw] {
    border-color: #cf75a4;
    background: #fff0f7;
    color: #a85283;
}

.member-profile-photo-fallback.unspecified[b-vmu2rhjtmw] {
    border-color: #8fa1b4;
    background: #f2f6fa;
    color: #5a6d80;
}

.member-profile-photo-initials[b-vmu2rhjtmw] {
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.member-profile-fields[b-vmu2rhjtmw] {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.8rem;
    grid-column: 1 / -1;
}

.member-profile-fields > div[b-vmu2rhjtmw] {
    border: 1px solid #ccdae8;
    border-radius: 0.45rem;
    background: #ffffff;
    padding: 0.45rem 0.55rem;
}

.member-profile-id-field[b-vmu2rhjtmw] {
    grid-column: 1 / -1;
}

.member-profile-id-field .member-profile-id[b-vmu2rhjtmw] {
    display: block;
    /* Wrap the long GUID across lines rather than forcing a one-line
       horizontal scrollbar (#407 follow-up — the id field read as a tiny
       scrolling box). */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.member-profile-fields dt[b-vmu2rhjtmw] {
    margin: 0;
    color: #60778f;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.member-profile-fields dd[b-vmu2rhjtmw] {
    margin: 0.2rem 0 0;
    color: #24384f;
    font-size: 0.95rem;
    font-weight: 600;
    word-break: break-word;
}

.member-profile-id[b-vmu2rhjtmw] {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.8rem;
}

/* #407 follow-up: the a11y tabpanel wrapper (role="tabpanel", added for the
   tab/panel ARIA wiring) is a direct child of the two-column body grid. Without
   an explicit span it auto-placed into the narrow 11rem photo column, cramming
   the whole Details/Activity/Rating panel — and the Member ID — into ~176px.
   Span both columns so the tab content gets the full content width, as it did
   before the content was wrapped. */
.member-profile-tabpanel[b-vmu2rhjtmw] {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    /* Stable height across tabs: a short tab (Details) vs a taller one (Rating
       chart / Sessions table) otherwise resizes the whole modal — and because
       the backdrop centres it, the box visibly jumps on each tab switch. Floor
       the panel so the common tabs hold one size; taller content still scrolls
       within the modal's max-height:90vh. */
    min-height: 24rem;
}

.member-profile-tabs[b-vmu2rhjtmw] {
    display: flex;
    /* Six tabs (Details..Opponents) exceed a phone's width — wrap onto a
       second line rather than forcing the modal wider than the screen. */
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #d8e0ea;
    grid-column: 1 / -1;
}

.member-profile-tab[b-vmu2rhjtmw] {
    background: transparent;
    border: none;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #60778f;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms ease, border-color 120ms ease;
}

.member-profile-tab:hover[b-vmu2rhjtmw] {
    color: #24384f;
}

.member-profile-tab.active[b-vmu2rhjtmw] {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
}

.member-profile-sessions[b-vmu2rhjtmw] {
    grid-column: 1 / -1;
    max-height: 22rem;
    overflow-y: auto;
}

.member-profile-rating[b-vmu2rhjtmw] {
    grid-column: 1 / -1;
}

/* #304: rating-number header on the Rating tab - the anchor the Settling chip
   reads against. Number is the hero; chip is a quiet neutral signal beside it. */
.member-rating-header[b-vmu2rhjtmw] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.member-rating-header-value[b-vmu2rhjtmw] {
    color: #213a54;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

/* #304: neutral "Settling" chip. Composed from the existing neutral box tokens
   (member-rating-readonly family) - deliberately NOT the coloured badge bg-*
   family, whose status-colour semantics would read as an alarm. The whole chip
   is a button (it becomes the tap target for S2's explainer popover). */
.member-settling-chip[b-vmu2rhjtmw] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.9rem;
    padding: 0.25rem 0.6rem;
    /* WCAG 1.4.11: border must clear 3:1 against its own #f4f8fc fill for the
       chip boundary to be perceivable. #8fa3b8 (the UX note's suggestion) only
       reaches ~2.5:1; #7d90a6 clears it (3.07:1 vs the chip fill, 3.16:1 vs the
       modal bg) while staying a calm neutral grey-blue - no warning semantics. */
    border: 1px solid #7d90a6;
    border-radius: 999px;
    background: #f4f8fc;
    color: #213a54;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.1;
    /* It IS a button and becomes interactive in S2 (tap-to-explain popover);
       pointer avoids a desktop "looks broken" read and an S2 CSS churn. */
    cursor: pointer;
}

/* The chip is a bare <button> (no .btn class), so Bootstrap reboot suppresses
   the default focus outline and the app's .btn focus ring never applies -
   keyboard users got no focus signal. Restore a visible ring, matching the
   .form-label-help-button:focus style on the Members page. */
.member-settling-chip:focus-visible[b-vmu2rhjtmw] {
    outline: 2px solid #1b6ec2;
    outline-offset: 2px;
}

/* ::deep is needed because the glyph comes from a code-behind RenderFragment
   (SettlingChip.Glyph), which Blazor's scoped-CSS rewriter never tags with the
   component's [b-xxxx] attribute - so the icon class can only be reached by
   piercing the scope from the chip element (which IS tagged). */
.member-settling-chip[b-vmu2rhjtmw]  .member-settling-chip-icon {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
}

.member-settling-chip-label[b-vmu2rhjtmw] {
    white-space: nowrap;
}

/* #304 S2: tap-to-explain popover. Reuses the form-help-popover look from the
   Members add-form (same tokens) - this component does not import that page's
   scoped CSS, so the rules are declared here too so the twin surfaces match. */
.form-help-popover[b-vmu2rhjtmw] {
    margin: 0.4rem 0 0.6rem;
    padding: 0.6rem 0.75rem;
    background: #f3f7fb;
    border: 1px solid #c4d2e0;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #2a4361;
    line-height: 1.4;
}

.form-help-popover-close[b-vmu2rhjtmw] {
    /* Kiosk fat-finger target: grow the hit area to ~44px tall (min-height
       2.75rem + vertical padding) while keeping the tidy text-link look.
       inline-flex so the "Got it" text stays vertically centred in the taller
       box. Horizontal padding gives a comfortable side hit area without making
       it read as a button. */
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.35rem 0.5rem;
    margin-top: 0.5rem;
    text-decoration: none;
    color: #1b6ec2;
    font-weight: 500;
}

/* The explainer popover is a calm paragraph + dismiss; cap its width so it reads
   as a tooltip beside the number rather than spanning the whole tab. */
.member-settling-popover[b-vmu2rhjtmw] {
    max-width: 32rem;
}

.member-profile-rating-chart[b-vmu2rhjtmw] {
    position: relative;
    width: 100%;
    height: 18rem;
    padding: 0.5rem 0;
}

.member-profile-rating-chart canvas[b-vmu2rhjtmw] {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 1100px) {
    .member-profile-modal-body[b-vmu2rhjtmw] {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .member-profile-photo[b-vmu2rhjtmw],
    .member-profile-photo-fallback[b-vmu2rhjtmw] {
        width: 9rem;
        height: 9rem;
    }

    .member-profile-fields[b-vmu2rhjtmw] {
        grid-template-columns: 1fr;
        width: 100%;
        justify-self: stretch;
    }

    .member-profile-tabs[b-vmu2rhjtmw],
    .member-profile-sessions[b-vmu2rhjtmw],
    .member-profile-rating[b-vmu2rhjtmw] {
        width: 100%;
        justify-self: stretch;
    }
}

/* #419: Overview tab. Leads with the rating (hero) + glanceable status, then a
   recent-activity snapshot, then the demoted secondary/PII fields. Spans both
   columns of the body grid like the other tab panels. */
.member-profile-overview[b-vmu2rhjtmw] {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

/* The rating is the hero of the Overview. Quiet "Rating" caption above the big
   number (reuses .member-rating-header / .member-rating-header-value from the
   Rating tab so the two surfaces stay visually identical). */
.member-overview-rating[b-vmu2rhjtmw] {
    margin-bottom: 0.85rem;
}

.member-overview-rating-label[b-vmu2rhjtmw] {
    display: block;
    color: #60778f;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.15rem;
}

/* The Overview rating header has no bottom margin of its own — the label + the
   wrapper spacing handle it — so collapse the Rating-tab default here. */
.member-overview-rating .member-rating-header[b-vmu2rhjtmw] {
    margin-bottom: 0;
}

/* #419 UX: on the OVERVIEW the rating is the page hero — it must out-weigh the
   1.5rem body field cards below it so the eye lands on it first. Grow only the
   Overview-scoped number; the Rating *tab*'s own header keeps its 1.5rem size
   (it isn't competing with a field grid there). */
.member-overview-rating .member-rating-header-value[b-vmu2rhjtmw] {
    font-size: 2.3rem;
    line-height: 1.1;
}

/* Recent-activity snapshot block. The timeline component brings its own list
   styling; this just spaces the heading + "See all" affordance. */
.member-overview-recent[b-vmu2rhjtmw] {
    margin-top: 0.9rem;
}

.member-overview-recent-head[b-vmu2rhjtmw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.member-overview-recent-title[b-vmu2rhjtmw] {
    margin: 0;
    color: #60778f;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.member-overview-see-all[b-vmu2rhjtmw] {
    /* Kiosk/touch (and WCAG 2.5.5) hit target: the bare link was a ~45×22px
       sliver. Grow the hit area to ~44px tall (min-height 2.75rem + padding),
       matching the popover-close treatment, while keeping the visual link look. */
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Demoted secondary/PII fields (Email / Phone / Member ID / login / role). A
   light top divider separates them from the value content above. */
.member-profile-secondary-fields[b-vmu2rhjtmw] {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid #d8e0ea;
}

/* #407: full-modal EDIT mode — the shared MemberEditor replaces the profile body
   inside the same shell. The body grid is two-column; the editor spans it. */
.member-profile-edit-body[b-vmu2rhjtmw] {
    grid-column: 1 / -1;
    width: 100%;
}

/* The embedded editor's own panel chrome is redundant inside the modal shell —
   drop its border/padding/margin so it reads as the modal body, not a card in a
   card. ::deep pierces the editor component's scope (the panel is its element). */
.member-profile-edit-body[b-vmu2rhjtmw]  .member-editor-panel {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

/* #407: read-only informational hint (Details tab, CanEdit false). Never a dead
   button — just tells the operator how to get edit access. */
.member-profile-readonly-hint[b-vmu2rhjtmw] {
    grid-column: 1 / -1;
    margin-top: 0.6rem;
    font-style: italic;
}

/* #407: partial-save notice — the member edit landed but a later step (rating /
   game preference) didn't. Honest "saved, but..." amber, not a clean success. */
.member-profile-partial-notice[b-vmu2rhjtmw] {
    grid-column: 1 / -1;
    margin-top: 0.6rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid #e3c98a;
    border-radius: 0.4rem;
    background: #fdf7e7;
    color: #7a5b12;
    font-size: 0.88rem;
    font-weight: 600;
}
/* /Components/Shared/MemberSessionHistoryTable.razor.rz.scp.css */
/* #165: session-history table styling. The result squares mirror the session
   dashboard's attendee-stats squares (AttendeeStatsTab.razor.css) but live
   here because Blazor scoped CSS doesn't cross components. Columns are merged
   (record, rating journey, attendance window) so the table fits the ~820px
   profile panel without horizontal scroll; below 640px the rows restyle into
   stacked cards via the td data-label attributes. */
/* Belt-and-braces: if the table still exceeds its container (very long
   session names on a narrow desktop window), keep a visible horizontal
   scrollbar at the wrapper rather than silently clipping. */
.table-responsive[b-eoj9d6z7zz] {
    overflow-x: auto;
}

.member-session-history-table[b-eoj9d6z7zz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.member-session-history-table thead th[b-eoj9d6z7zz] {
    text-align: left;
    color: #60778f;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid #d8e0ea;
    white-space: nowrap;
}

.member-session-history-table tbody td[b-eoj9d6z7zz] {
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid #e6edf4;
    color: #24384f;
    vertical-align: middle;
}

.member-session-history-table th.numeric[b-eoj9d6z7zz],
.member-session-history-table td.numeric[b-eoj9d6z7zz] {
    text-align: right;
}

.member-session-history-table td.nowrap[b-eoj9d6z7zz] {
    white-space: nowrap;
}

.session-record-percent[b-eoj9d6z7zz] {
    color: #60778f;
    font-size: 0.8rem;
}

.session-rating-arrow[b-eoj9d6z7zz] {
    color: #8fa1b4;
    padding: 0 0.2rem;
}

.session-result-squares[b-eoj9d6z7zz] {
    display: flex;
    gap: 0.2rem;
    min-height: 1.35rem;
    flex-wrap: wrap;
    /* Room for ~5 squares per row before wrapping — without this the column
       collapses to 2-up even for a 4-game session. */
    min-width: 7.2rem;
}

.session-result-square[b-eoj9d6z7zz] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
}

.session-result-win[b-eoj9d6z7zz] {
    background: #248c3b;
}

.session-result-loss[b-eoj9d6z7zz] {
    background: #bd2f2f;
}

.session-rating-positive[b-eoj9d6z7zz] {
    color: #1c7a33;
    font-weight: 700;
}

.session-rating-negative[b-eoj9d6z7zz] {
    color: #b02a2a;
    font-weight: 700;
}

/* Phones: each session becomes a stacked card — no sideways scrolling. The
   header row is hidden and every cell carries its own label (data-label). */
@media (max-width: 640px) {
    .member-session-history-table thead[b-eoj9d6z7zz] {
        display: none;
    }

    .member-session-history-table[b-eoj9d6z7zz],
    .member-session-history-table tbody[b-eoj9d6z7zz],
    .member-session-history-table tbody tr[b-eoj9d6z7zz],
    .member-session-history-table tbody td[b-eoj9d6z7zz] {
        display: block;
        width: 100%;
    }

    .member-session-history-table tbody tr[b-eoj9d6z7zz] {
        border: 1px solid #ccdae8;
        border-radius: 0.5rem;
        background: #ffffff;
        padding: 0.4rem 0.65rem;
        margin-bottom: 0.6rem;
    }

    .member-session-history-table tbody td[b-eoj9d6z7zz] {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.3rem 0.75rem;
        border-bottom: none;
        padding: 0.18rem 0;
        /* Large Android font scaling can make label + value exceed the card
           width — wrap the value onto its own line rather than overflow. */
        flex-wrap: wrap;
    }

    .member-session-history-table tbody td[b-eoj9d6z7zz]::before {
        content: attr(data-label);
        color: #60778f;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        flex-shrink: 0;
    }

    /* Multi-part values (record, rating journey) stay grouped on the right
       instead of being spread across the card line by the flex layout. */
    .session-cell-value[b-eoj9d6z7zz] {
        white-space: nowrap;
    }

    .member-session-history-table td.numeric[b-eoj9d6z7zz] {
        text-align: right;
    }

    .session-result-squares[b-eoj9d6z7zz] {
        justify-content: flex-end;
        min-width: 0;
    }
}
/* /Components/Shared/ScoreEntryGrid.razor.rz.scp.css */
/* LR-3: shared decade-grid score-entry popover (moved from ClubSessionDashboard.razor.css
   lines 1147-1243, ::deep dropped — this component renders its own markup so its scope id
   applies directly). #61/#155 v5: lifted popover (position:fixed, JS-positioned via
   clubSessionDashboard.positionPopover) so it escapes any overflow:auto clip on the consumer.
   WinForms-style decade grid: every value 0..Cap visible at once, ten per row so each row is a
   decade and the data-backed common loser band shares the teens row. */
.score-combo-backdrop[b-n4y31evfv1] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1100;
}

.score-combo-popover[b-n4y31evfv1] {
    position: fixed;
    /* JS positionPopover sets top/left + flips visibility:visible on open. Hidden by default
       to avoid a one-frame flash at the wrong coordinates. */
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1200;
    width: max-content;
    max-width: calc(100vw - 16px);
    background: #ffffff;
    border: 1px solid #b7c8da;
    border-radius: 0.6rem;
    box-shadow: 0 10px 28px rgba(8, 24, 50, 0.28);
    padding: 0.5rem;
    /* Focused on open for digit type-ahead; the popover itself shouldn't show a focus ring
       (the pending chip is the visible keyboard feedback). */
    outline: none;
}

/* Inline variant (rework major 2, desk only): the grid renders in normal document flow
   below its trigger instead of as a fixed JS-positioned overlay, so at narrow widths it
   pushes the steppers/Save DOWN rather than obscuring them. No JS positions it, so it must
   be visible immediately (overriding the fixed variant's visibility:hidden default). Full
   width of its form column; a little breathing room above/below. */
.score-combo-popover-inline[b-n4y31evfv1] {
    position: static;
    visibility: visible;
    width: 100%;
    max-width: 100%;
    margin: 0.5rem 0 1rem;
    box-shadow: 0 2px 10px rgba(8, 24, 50, 0.12);
}

.score-grid[b-n4y31evfv1] {
    display: grid;
    /* 2.75rem ≈ 44px minimum touch target for kiosk fingers. */
    grid-template-columns: repeat(10, minmax(2.75rem, 1fr));
    gap: 0.35rem;
}

/* Desk kiosk sizing: chips meet the desk touch floor (>=48px), matching the desk's other
   kiosk controls (Save 64px, the +/- steppers 48px). */
.score-grid-kiosk[b-n4y31evfv1] {
    grid-template-columns: repeat(10, minmax(3rem, 1fr));
}

.score-combo-chip[b-n4y31evfv1] {
    min-height: 2.75rem;
    width: 100%;
    border: 1px solid #9fb7cf;
    border-radius: 0.4rem;
    background: #ffffff;
    color: #1f3f5e;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.score-grid-kiosk .score-combo-chip[b-n4y31evfv1] {
    min-height: 3rem;
}

.score-combo-chip:hover[b-n4y31evfv1],
.score-combo-chip:focus-visible[b-n4y31evfv1] {
    background: #d9e7f5;
    border-color: #6f93b8;
    outline: none;
}

/* #61: the common loser band, pre-highlighted so the eye lands where ~67% of real losing
   scores live. */
.score-grid-chip-common[b-n4y31evfv1] {
    background: #e3edfb;
    border-color: #5b87c5;
    color: #2156a5;
}

/* Chip matching the pending type-ahead digits — the visible keyboard focus. */
.score-combo-chip.score-grid-chip-pending[b-n4y31evfv1] {
    background: #2156a5;
    border-color: #2156a5;
    color: #ffffff;
}

/* LR-3 finding 3: below-floor cells are visible but un-selectable (greyed, not-allowed, no
   hover) so the organiser sees WHY a head-start floor value can't be picked. */
.score-combo-chip-disabled[b-n4y31evfv1],
.score-combo-chip:disabled[b-n4y31evfv1] {
    background: #eef2f6;
    border-color: #d2dde7;
    color: #9bacbd;
    cursor: not-allowed;
}

.score-combo-chip:disabled:hover[b-n4y31evfv1] {
    background: #eef2f6;
    border-color: #d2dde7;
}

.score-grid-typeahead[b-n4y31evfv1] {
    margin-top: 0.45rem;
    font-size: 0.8rem;
    color: #4d7093;
    text-align: center;
}

@media (max-width: 600px) {
    .score-combo-popover[b-n4y31evfv1] {
        width: calc(100vw - 16px);
    }

    .score-grid[b-n4y31evfv1] {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        gap: 0.25rem;
    }

    .score-combo-chip[b-n4y31evfv1] {
        font-size: 0.85rem;
        min-height: 2.4rem;
    }

    /* Desk kiosk keeps the touch floor even on narrow viewports. */
    .score-grid-kiosk[b-n4y31evfv1] {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }

    .score-grid-kiosk .score-combo-chip[b-n4y31evfv1] {
        min-height: 3rem;
        font-size: 0.95rem;
    }
}

/* #277 (relocated here by LR-33): club kiosks run on tablets (touch / coarse pointer).
   Above the phone breakpoint there's room to make score entry comfortably finger-sized, so
   bump the score-column width and the number-grid chips. These rules originally lived in
   ClubSessionDashboard.razor.css as ::deep overrides, but after LR-3 extracted the base grid
   rules INTO this shared component, the ::deep override (equal specificity, earlier in the
   bundle) lost the cascade to this component's base 44px chip - silently shrinking the SESSION
   score chips on touch. Living here, in the grid's own scope, the enlargement wins for every
   consumer (session lifted popover + competition inline popup) regardless of bundle order.

   Use any-pointer:coarse, not pointer:coarse - a touchscreen laptop's PRIMARY pointer is its
   trackpad (pointer:fine), so pointer:coarse missed it; any-pointer:coarse catches any
   touch-capable device (tablets and touch laptops) while leaving mouse-only desktops alone. */
@media (any-pointer: coarse) and (min-width: 601px) {
    .score-grid[b-n4y31evfv1] {
        grid-template-columns: repeat(10, minmax(2.75rem, 1fr));
        gap: 0.45rem;
    }

    .score-combo-chip[b-n4y31evfv1] {
        min-height: 4rem;
        font-size: 1.5rem;
    }

    /* Give the popover a real width so the 10 chips spread out (1fr) instead of collapsing to
       their min - keeps the numbers wide, not just tall. Capped at 96vw so it still fits a
       narrow device. Applies to the SESSION's fixed/lifted popover; the competition consumes
       the grid Inline (.score-combo-popover-inline, width:100%/max-width:100% above), whose
       same-scope rule keeps overriding this 42rem - the competition popup stays in its own
       34rem container (LR-22) and gains only the chip/grid enlargement, not this width. */
    .score-combo-popover[b-n4y31evfv1] {
        width: min(96vw, 42rem);
        padding: 0.8rem;
    }

    /* Ruling 3: the inline variant (competition popup) must keep width:100% of its own 34rem
       container, NOT jump to 42rem. The base .score-combo-popover-inline width:100% sits
       earlier in this stylesheet than the touch .score-combo-popover above (equal specificity),
       so on a coarse/>=601 viewport the 42rem would otherwise win for the inline element (it
       carries both classes). Re-assert the inline override INSIDE the media query so it wins for
       the competition - which gains only the chip/grid enlargement, never this container width. */
    .score-combo-popover-inline[b-n4y31evfv1] {
        width: 100%;
        max-width: 100%;
    }
}
/* /Components/Shared/SupporterAsk.razor.rz.scp.css */
/* #583: shared "Community Supporter" ask body. The OUTER framing (card tint, dismiss button,
   spacing) belongs to each host (Sessions card, /support hub, dashboard moment); this file styles
   only the shared inner content so the heading/earned-line/body/buttons look identical everywhere. */
.supporterAsk-heading[b-lfdx47njds] {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.supporterAsk-body[b-lfdx47njds] {
    color: #4b5f75;
    font-size: 0.92rem;
    max-width: 46rem;
}

.supporterAsk-earned[b-lfdx47njds] {
    color: #2b4a73;
    font-weight: 600;
    font-size: 0.95rem;
}

.supporterAsk-actions[b-lfdx47njds] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}