/* /Components/Account/ProfileImageUpload.razor.rz.scp.css */
/* Profile media uploader (profile-equipment WP2 — mock ".drop-zone" / "#crop-dialog").
   Scoped CSS, so none of this can leak into the rest of the profile page; WP3/WP5 own platform.css and the page
   layout around it. Every colour comes from the existing --mp-* / --mp-control-* tokens (WP0 finding 15) with a
   literal fallback, so this component is correct whether or not it ends up inside .mp-profile-scope. */

.mp-media-block[b-h0vq9xjtrh] {
    --mp-media-border: var(--mp-border, #2d333b);
    --mp-media-surface: var(--mp-nested-surface, #141b24);
    --mp-media-accent: var(--mp-accent, #f0a500);
    --mp-media-muted: var(--mp-muted, #9aa7b4);

    display: block;
}

    .mp-media-block + .mp-media-block[b-h0vq9xjtrh] {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--mp-media-border);
    }

/* ---- header ------------------------------------------------------------------------------------------- */

.mp-media-head[b-h0vq9xjtrh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

    .mp-media-head strong[b-h0vq9xjtrh] {
        font-size: 0.85rem;
    }

.mp-media-spec[b-h0vq9xjtrh] {
    color: var(--mp-media-muted);
    font-size: 0.72rem;
}

/* ---- drop zone ---------------------------------------------------------------------------------------- */

.mp-drop-zone[b-h0vq9xjtrh] {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 100%;
    border: 1px dashed var(--mp-control-border, #354253);
    border-radius: 11px;
    background: var(--mp-media-surface);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
}

    .mp-drop-zone:hover[b-h0vq9xjtrh],
    .mp-drop-zone.dragging[b-h0vq9xjtrh] {
        border-color: var(--mp-media-accent);
        background: var(--mp-control-bg-hover, #1a222d);
    }

    .mp-drop-zone.dragging[b-h0vq9xjtrh] {
        transform: scale(1.01);
    }

    /* Focus must be clearly visible on a control that is only a div (spec §10). */
    .mp-drop-zone:focus-visible[b-h0vq9xjtrh] {
        outline: 2px solid var(--mp-control-border-focus, #f0b94d);
        outline-offset: 2px;
    }

    .mp-drop-zone.avatar[b-h0vq9xjtrh] {
        min-height: 228px;
    }

    .mp-drop-zone.stream[b-h0vq9xjtrh] {
        aspect-ratio: 16 / 9;
        min-height: 150px;
    }

.mp-media-preview[b-h0vq9xjtrh] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-avatar-placeholder[b-h0vq9xjtrh] {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    border: 1px solid var(--mp-control-border, #354253);
    border-radius: 50%;
    background: linear-gradient(145deg, #273240, #151d27);
    color: var(--mp-media-muted);
}

    .mp-avatar-placeholder svg[b-h0vq9xjtrh] {
        width: 52px;
        height: 52px;
    }

.mp-stream-placeholder[b-h0vq9xjtrh] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 26%, rgba(240, 165, 0, .18), transparent 32%),
        linear-gradient(145deg, #26303b, #10161d 72%);
}

.mp-drop-overlay[b-h0vq9xjtrh] {
    position: absolute;
    inset: auto 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    background: rgba(7, 10, 14, .78);
    color: #e4eaf1;
    backdrop-filter: blur(8px);
    font-size: 0.7rem;
    font-weight: 700;
}

    .mp-drop-overlay svg[b-h0vq9xjtrh] {
        width: 16px;
        height: 16px;
        color: var(--mp-media-accent);
    }

/* ---- guidance, actions, state ------------------------------------------------------------------------- */

.mp-media-help[b-h0vq9xjtrh] {
    margin: 0.4rem 0 0;
    color: var(--mp-media-muted);
    font-size: 0.72rem;
}

.mp-media-actions[b-h0vq9xjtrh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 0.6rem;
}

.mp-media-formats[b-h0vq9xjtrh],
.mp-media-confirm[b-h0vq9xjtrh] {
    color: var(--mp-media-muted);
    font-size: 0.68rem;
}

.mp-media-formats[b-h0vq9xjtrh] {
    margin-left: auto;
}

.mp-media-progress[b-h0vq9xjtrh] {
    margin-top: 0.55rem;
}

.mp-progress[b-h0vq9xjtrh] {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mp-control-bg, #171e28);
}

.mp-progress-bar[b-h0vq9xjtrh] {
    height: 100%;
    background: var(--mp-media-accent);
    transition: width .15s linear;
}

.mp-media-status[b-h0vq9xjtrh],
.mp-media-error[b-h0vq9xjtrh] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0.45rem 0 0;
    font-size: 0.74rem;
}

.mp-media-status[b-h0vq9xjtrh] {
    color: var(--mp-media-muted);
    min-height: 1.1rem; /* reserve the line so state changes don't shift the layout */
}

    .mp-media-status.is-saved[b-h0vq9xjtrh] {
        color: var(--mp-good, #2ea043);
    }

.mp-media-error[b-h0vq9xjtrh] {
    color: #ffb4af;
}

/* The icon is a redundant cue next to the text — never the only signal (spec §10). */
.mp-status-icon[b-h0vq9xjtrh] {
    font-weight: 800;
    line-height: 1.35;
}

.mp-media-note[b-h0vq9xjtrh] {
    margin: 0.35rem 0 0;
    color: var(--mp-media-muted);
    font-size: 0.68rem;
}

.mp-visually-hidden[b-h0vq9xjtrh] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- buttons (local to this island; WP3/WP5 own the page-wide button system) --------------------------- */

.mp-media-btn[b-h0vq9xjtrh] {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--mp-control-border, #354253);
    border-radius: 8px;
    background: var(--mp-surface-2, #1f2630);
    color: var(--mp-text, #e6edf3);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
}

    .mp-media-btn:hover[b-h0vq9xjtrh] {
        border-color: #5b6878;
        background: var(--mp-control-bg-hover, #1a222d);
    }

    .mp-media-btn:focus-visible[b-h0vq9xjtrh] {
        outline: 2px solid var(--mp-control-border-focus, #f0b94d);
        outline-offset: 2px;
    }

    .mp-media-btn.ghost[b-h0vq9xjtrh] {
        background: transparent;
    }

    .mp-media-btn.primary[b-h0vq9xjtrh] {
        border-color: #d79300;
        background: var(--mp-media-accent);
        color: #18130a;
    }

    .mp-media-btn.danger[b-h0vq9xjtrh] {
        color: #ffb4af;
        border-color: rgba(248, 81, 73, .36);
        background: rgba(248, 81, 73, .07);
    }

.mp-media-icon-btn[b-h0vq9xjtrh] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--mp-control-border, #354253);
    border-radius: 8px;
    background: transparent;
    color: var(--mp-media-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

    .mp-media-icon-btn:hover[b-h0vq9xjtrh] {
        color: var(--mp-text, #e6edf3);
    }

/* ---- crop dialog -------------------------------------------------------------------------------------- */

.mp-crop-dialog[b-h0vq9xjtrh] {
    width: min(680px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    padding: 0;
    border: 1px solid var(--mp-control-border, #354253);
    border-radius: 14px;
    background: var(--mp-surface, #161b22);
    color: var(--mp-text, #e6edf3);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .68);
}

    .mp-crop-dialog[b-h0vq9xjtrh]::backdrop {
        background: rgba(3, 6, 9, .78);
        backdrop-filter: blur(5px);
    }

.mp-modal-head[b-h0vq9xjtrh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--mp-media-border);
}

    .mp-modal-head h2[b-h0vq9xjtrh] {
        margin: 0;
        font-size: 1rem;
    }

    .mp-modal-head p[b-h0vq9xjtrh] {
        margin: 3px 0 0;
        color: var(--mp-media-muted);
        font-size: 0.7rem;
    }

.mp-modal-body[b-h0vq9xjtrh] {
    overflow: auto;
    padding: 18px;
}

.mp-crop-stage[b-h0vq9xjtrh] {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 340px;
    overflow: hidden;
    border: 1px solid var(--mp-control-border, #354253);
    border-radius: 10px;
    background-color: #0b0f14;
    background-image:
        linear-gradient(45deg, #151b22 25%, transparent 25%),
        linear-gradient(-45deg, #151b22 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #151b22 75%),
        linear-gradient(-45deg, transparent 75%, #151b22 75%);
    background-size: 22px 22px;
    background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}

.mp-crop-frame[b-h0vq9xjtrh] {
    position: relative;
    overflow: hidden;
    width: min(310px, 82%);
    aspect-ratio: 1;
    border: 2px solid var(--mp-media-accent);
    border-radius: 8px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, .5);
}

    .mp-crop-frame.stream[b-h0vq9xjtrh] {
        width: 88%;
        aspect-ratio: 16 / 9;
    }

    /* The preview IS the crop: object-fit/position + transform are exactly what the module inverts to build the
       normalized rect it posts, so what the lifter frames here is what the server saves. */
    .mp-crop-frame img[b-h0vq9xjtrh] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
        transform: scale(1);
        transition: transform .05s;
    }

    .mp-crop-frame[b-h0vq9xjtrh]::before,
    .mp-crop-frame[b-h0vq9xjtrh]::after {
        content: "";
        position: absolute;
        z-index: 2;
        pointer-events: none;
    }

    .mp-crop-frame[b-h0vq9xjtrh]::before {
        inset: 33.333% 0;
        border-top: 1px solid rgba(255, 255, 255, .45);
        border-bottom: 1px solid rgba(255, 255, 255, .45);
    }

    .mp-crop-frame[b-h0vq9xjtrh]::after {
        inset: 0 33.333%;
        border-left: 1px solid rgba(255, 255, 255, .45);
        border-right: 1px solid rgba(255, 255, 255, .45);
    }

.mp-crop-controls[b-h0vq9xjtrh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.mp-range-control label[b-h0vq9xjtrh] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    color: var(--mp-media-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.mp-range-control input[b-h0vq9xjtrh] {
    width: 100%;
    accent-color: var(--mp-media-accent);
}

.mp-crop-error[b-h0vq9xjtrh] {
    margin: 12px 0 0;
    color: #ffb4af;
    font-size: 0.74rem;
}

.mp-modal-actions[b-h0vq9xjtrh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 18px;
    border-top: 1px solid var(--mp-media-border);
}

@media (max-width: 720px) {
    .mp-crop-stage[b-h0vq9xjtrh] {
        min-height: 260px;
    }

    .mp-crop-controls[b-h0vq9xjtrh] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mp-drop-zone.avatar[b-h0vq9xjtrh] {
        min-height: 200px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mp-drop-zone[b-h0vq9xjtrh],
    .mp-crop-frame img[b-h0vq9xjtrh],
    .mp-progress-bar[b-h0vq9xjtrh] {
        transition: none;
    }

    .mp-drop-zone.dragging[b-h0vq9xjtrh] {
        transform: none;
    }
}
/* /Components/AttemptPlanning/AttemptPlanEditor.razor.rz.scp.css */
/*
    Scoped styles for the shared attempt-plan editor (attempt-planning spec §3.1/§9). The component owns its own
    presentation rather than pushing rules into the host pages' inline styles, so the lifter surface and the handler
    surface cannot drift apart visually.

    Three rules drive most of what follows:
      - every interactive target is at least 44 px (spec §3.1);
      - the attempt matrix scrolls HORIZONTALLY on narrow screens instead of shrinking inputs to an unusable size;
      - focus is always visible, because this is a keyboard-heavy grid of small numeric fields.
*/

/*
    `min-width: 0` + `max-width: 100%` are load-bearing, not cosmetic. The editor is dropped into host cards that are
    flex/grid items, and a flex/grid item's default `min-width: auto` sizes it to its CONTENT — so the 46rem attempt
    matrix pushed the whole document wide and the PAGE scrolled horizontally instead of the matrix. Constraining the
    component here is what confines the overflow to `.mp-plan-scroll`.
*/
.mp-plan[b-596e2yeaac] {
    display: block;
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--mp-line, #2b343f);
    border-radius: 14px;
    background: var(--mp-panel, #11151a);
    padding: 1rem;
}

.mp-plan-head[b-596e2yeaac] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.mp-plan-head h2[b-596e2yeaac] {
    margin: 0;
    font-size: 1.15rem;
}

.mp-plan-sub[b-596e2yeaac] {
    margin: 0.25rem 0 0;
    color: var(--mp-muted, #98a3af);
    font-size: 0.82rem;
}

.mp-plan-badge-dirty[b-596e2yeaac] {
    border-color: rgba(244, 209, 61, 0.4);
    color: var(--mp-accent, #f4d13d);
    background: rgba(244, 209, 61, 0.08);
}

.mp-plan-badge-primary[b-596e2yeaac] {
    border-color: rgba(244, 209, 61, 0.4);
    color: var(--mp-accent, #f4d13d);
    background: rgba(244, 209, 61, 0.08);
}

/* ---- Banners ---- */

.mp-plan-alert[b-596e2yeaac] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--mp-line, #2b343f);
    border-radius: 11px;
    font-size: 0.87rem;
}

.mp-plan-alert strong[b-596e2yeaac] { flex: 0 0 auto; }
.mp-plan-alert span[b-596e2yeaac] { flex: 1 1 14rem; color: var(--mp-muted, #98a3af); }

.mp-plan-alert-error[b-596e2yeaac] { border-color: rgba(255, 107, 114, 0.45); background: rgba(255, 107, 114, 0.08); }
.mp-plan-alert-warn[b-596e2yeaac] { border-color: rgba(244, 209, 61, 0.42); background: rgba(244, 209, 61, 0.07); }
.mp-plan-alert-note[b-596e2yeaac] { border-color: rgba(108, 184, 255, 0.32); background: rgba(108, 184, 255, 0.08); }

.mp-plan-loading[b-596e2yeaac] {
    padding: 1rem 0;
    color: var(--mp-muted, #98a3af);
}

/* ---- Lift tabs ---- */

.mp-plan-lift-tabs[b-596e2yeaac] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    margin-bottom: 0.85rem;
    padding-bottom: 2px;
}

.mp-plan-tab[b-596e2yeaac] {
    flex: 1 1 auto;
    min-width: 7rem;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--mp-line, #2b343f);
    border-radius: 11px;
    background: transparent;
    color: var(--mp-muted, #98a3af);
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.mp-plan-tab.is-active[b-596e2yeaac] {
    border-color: rgba(244, 209, 61, 0.55);
    background: var(--mp-accent, #f4d13d);
    color: #111;
}

/* ---- The attempt matrix ---- */

.mp-plan-scroll[b-596e2yeaac] {
    overflow-x: auto;
    /* Same reason as .mp-plan above: without these the scroller grows to its table instead of scrolling it. */
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--mp-line, #2b343f);
    border-radius: 12px;
    /* The scroller is focusable so keyboard users can pan it; give it a real focus ring. */
    scrollbar-width: thin;
}

.mp-plan-table[b-596e2yeaac] {
    width: 100%;
    /* Wider than a phone on purpose: the cells scroll rather than collapsing. */
    min-width: 46rem;
    border-collapse: collapse;
}

.mp-plan-table th[b-596e2yeaac],
.mp-plan-table td[b-596e2yeaac] {
    padding: 0.7rem;
    border-right: 1px solid var(--mp-line, #2b343f);
    border-bottom: 1px solid var(--mp-line, #2b343f);
    text-align: left;
    vertical-align: top;
}

.mp-plan-table thead th[b-596e2yeaac] {
    color: var(--mp-muted, #98a3af);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mp-plan-table th:last-child[b-596e2yeaac],
.mp-plan-table td:last-child[b-596e2yeaac] { border-right: 0; }

.mp-plan-table tbody tr:last-child th[b-596e2yeaac],
.mp-plan-table tbody tr:last-child td[b-596e2yeaac] { border-bottom: 0; }

.mp-plan-strategy[b-596e2yeaac] { width: 13rem; min-width: 13rem; font-weight: 400; }

.mp-plan-strategy-top[b-596e2yeaac] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

/*
    The radio's own BOX must reach 44 px, not just the space around it. An earlier version used a 20 px control with
    12 px margins and claimed the row padding supplied the touch target — margin is not part of the rendered or
    clickable box, so the real hit area stayed 20 px. Padding the box out is what actually makes the target 44 px.
*/
.mp-plan-strategy-top input[type="radio"][b-596e2yeaac] {
    /* A native radio paints itself across the whole border box, so simply sizing it to 44 px produced a huge disc.
       Suppressing the native appearance lets the CONTROL keep its 44 px hit area while the visible dot stays 18 px. */
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    flex: none;
    display: grid;
    place-content: center;
    cursor: pointer;
}

.mp-plan-strategy-top input[type="radio"][b-596e2yeaac]::before {
    content: "";
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid var(--mp-line, #52606d);
    border-radius: 50%;
}

.mp-plan-strategy-top input[type="radio"]:checked[b-596e2yeaac]::before {
    border-color: var(--mp-accent, #f4d13d);
    background: var(--mp-accent, #f4d13d);
    /* The inset ring is what reads as a "selected" radio rather than a filled blob. */
    box-shadow: inset 0 0 0 3px var(--mp-panel, #11151a);
}

.mp-plan-name[b-596e2yeaac] {
    width: 100%;
    min-height: 44px;
    padding: 0 0.6rem;
    border: 1px solid var(--mp-line, #3a4652);
    border-radius: 9px;
    background: var(--mp-input, #0a0d10);
    color: inherit;
    font: inherit;
    font-weight: 700;
}

.mp-plan-strategy-actions[b-596e2yeaac] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.4rem;
}

.mp-plan-icon[b-596e2yeaac] {
    width: 44px;
    height: 44px;
    border: 1px solid var(--mp-line, #46515d);
    border-radius: 9px;
    background: transparent;
    color: var(--mp-muted, #98a3af);
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.mp-plan-icon-danger[b-596e2yeaac] { border-color: rgba(255, 107, 114, 0.4); color: #ffb9bc; }

.mp-plan-cell[b-596e2yeaac] { min-width: 11rem; }

.mp-plan-cell-label[b-596e2yeaac] {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--mp-muted, #98a3af);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mp-plan-weight[b-596e2yeaac] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--mp-line, #3a4652);
    border-radius: 9px;
    background: var(--mp-input, #0a0d10);
    padding-right: 0.5rem;
}

.mp-plan-weight input[b-596e2yeaac] {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 0.6rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
}

/* nowrap + flex:none: the unit is two characters and was breaking to "k / g" when the cell tightened. */
.mp-plan-weight span[b-596e2yeaac] {
    flex: none;
    white-space: nowrap;
    color: var(--mp-muted, #98a3af);
    font-size: 0.78rem;
}

.mp-plan-backups[b-596e2yeaac] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.mp-plan-backup[b-596e2yeaac] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.mp-plan-backup input[b-596e2yeaac] {
    width: 5.5rem;
    min-height: 44px;
    padding: 0 0.5rem;
    border: 1px solid rgba(108, 184, 255, 0.4);
    border-radius: 999px;
    background: rgba(108, 184, 255, 0.08);
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
}

.mp-plan-add-backup[b-596e2yeaac] {
    min-height: 44px;
    padding: 0 0.7rem;
    border: 1px dashed var(--mp-line, #52606d);
    border-radius: 999px;
    background: transparent;
    color: var(--mp-muted, #98a3af);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

/* ---- Actions, notes, save bar ---- */

.mp-plan-actions[b-596e2yeaac] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.mp-plan-notes[b-596e2yeaac] { margin-top: 1rem; }

.mp-plan-notes label[b-596e2yeaac] {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.mp-plan-notes textarea[b-596e2yeaac] {
    width: 100%;
    min-height: 5.5rem;
    padding: 0.6rem;
    border: 1px solid var(--mp-line, #3a4652);
    border-radius: 10px;
    background: var(--mp-input, #0a0d10);
    color: inherit;
    font: inherit;
    line-height: 1.5;
    resize: vertical;
}

.mp-plan-savebar[b-596e2yeaac] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--mp-line, #2b343f);
}

.mp-plan-save[b-596e2yeaac] { min-height: 44px; }

/* Keep the control reachable and legible when the editor is disabled rather than hiding it. */
.mp-plan button:disabled[b-596e2yeaac],
.mp-plan input:disabled[b-596e2yeaac],
.mp-plan textarea:disabled[b-596e2yeaac] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Visible focus everywhere — this is a dense grid of numeric inputs driven largely by keyboard. */
.mp-plan button:focus-visible[b-596e2yeaac],
.mp-plan input:focus-visible[b-596e2yeaac],
.mp-plan textarea:focus-visible[b-596e2yeaac],
.mp-plan-scroll:focus-visible[b-596e2yeaac] {
    outline: 3px solid rgba(244, 209, 61, 0.45);
    outline-offset: 2px;
}

.mp-plan-visually-hidden[b-596e2yeaac] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 680px) {
    .mp-plan[b-596e2yeaac] { padding: 0.75rem; }

    .mp-plan-savebar[b-596e2yeaac] { align-items: stretch; flex-direction: column; }
    .mp-plan-savebar .mp-plan-save[b-596e2yeaac] { width: 100%; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-1v0klb7hx8] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-1v0klb7hx8] {
    flex: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

    #blazor-error-ui .dismiss[b-1v0klb7hx8] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-3zljx3pcdu],
.components-reconnect-repeated-attempt-visible[b-3zljx3pcdu],
.components-reconnect-failed-visible[b-3zljx3pcdu],
.components-pause-visible[b-3zljx3pcdu],
.components-resume-failed-visible[b-3zljx3pcdu],
.components-rejoining-animation[b-3zljx3pcdu] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-3zljx3pcdu {
    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/Meets/Director/ManageOverviewPanel.razor.rz.scp.css */
/* Email notifications WP6: the start-competition dialog's chrome. StartCompetitionDialog is rendered as a CHILD of
   this component, so Blazor CSS isolation tags its root <dialog> with THIS file's scope attribute — the same
   `::deep` + wrapper-class technique ResultsWorkspace.razor.css uses for PublishResultsDialog (see that file's own
   header comment: isolation would not otherwise reach a child component's markup at all). Kept independent of
   ResultsWorkspace's .mp-rw-dialog rules (never applies here — isolation scopes to elements THAT component
   renders) and of .mp-comms-dialog (same reason), matching that file's own "own chrome, not a shared class"
   precedent. Reuses --mp-* tokens and the existing .mp-card/.mp-btn/.mp-badge/.mp-ring/.mp-checklist* system —
   platform.css itself is untouched by this rule set. */

.mp-overview-scope[b-szqwh4nimf] {
    display: contents;
}

.mp-overview-scope[b-szqwh4nimf]  dialog.mp-start-dialog {
    background: var(--mp-surface); color: var(--mp-text); border: 1px solid var(--mp-border);
    border-radius: 12px; padding: 1.25rem 1.4rem; width: min(34rem, calc(100vw - 2rem)); max-width: 34rem;
    max-height: calc(100vh - 4rem); overflow-y: auto;
}
.mp-overview-scope[b-szqwh4nimf]  dialog.mp-start-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.mp-overview-scope[b-szqwh4nimf]  dialog.mp-start-dialog h3 { margin-top: 0; }

.mp-overview-scope[b-szqwh4nimf]  .mp-start-summary { display: flex; align-items: center; gap: 1rem; margin: 0.9rem 0; }
.mp-overview-scope[b-szqwh4nimf]  .mp-start-summary-headline { font-weight: 800; font-size: 1.05rem; }

.mp-overview-scope[b-szqwh4nimf]  .mp-start-consent {
    display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1rem; font-size: 0.85rem; cursor: pointer;
}
.mp-overview-scope[b-szqwh4nimf]  .mp-start-consent input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; flex-shrink: 0; }
.mp-overview-scope[b-szqwh4nimf]  .mp-start-consent-sub { display: block; margin-top: 0.2rem; }

.mp-overview-scope[b-szqwh4nimf]  dialog.mp-start-dialog .form-control {
    display: block; width: 100%; min-height: 2.6rem; margin-top: 0.4rem; padding: 0.5rem 0.75rem; color: var(--mp-text);
    background: var(--mp-control-bg); border: 1px solid var(--mp-control-border); border-radius: 8px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); outline: none; font: inherit;
}
.mp-overview-scope[b-szqwh4nimf]  dialog.mp-start-dialog .form-control:focus-visible,
.mp-overview-scope[b-szqwh4nimf]  dialog.mp-start-dialog .form-control:focus {
    border-color: var(--mp-control-border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-control-border-focus) 22%, transparent), inset 0 1px 1px rgba(0, 0, 0, 0.2);
}

.mp-overview-scope[b-szqwh4nimf]  .mp-start-dialog-error { color: var(--mp-nolift); font-weight: 700; margin-top: 0.8rem; }
.mp-overview-scope[b-szqwh4nimf]  .mp-start-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.1rem; }

@media (max-width: 640px) {
    .mp-overview-scope[b-szqwh4nimf]  dialog.mp-start-dialog { padding: 1rem; }
}
/* /Components/Meets/Director/Results/ResultsPublicationHistoryTable.razor.rz.scp.css */
/* This component renders the 7-column publication history table (version / state / published / by / source rev. /
   note-or-reason / view). Its wrapper carries `.table-wrap`, a class name taken from the reference HTML mock — where
   it IS defined as `width:100%; overflow-x:auto`. This repository has no such class (its own convention is a
   feature-prefixed wrapper, e.g. `.mp-res-table-wrap`, `.mp-sb-condensed-wrap`), so the wrapper was inert and the
   table's intrinsic width pushed the WHOLE page to scrollWidth 715 at a 390px viewport — page-level horizontal
   overflow, which is forbidden. The table must scroll inside its own card instead.

   Scoped to this component deliberately: the element lives here, so no `::deep` is needed from the parent's
   stylesheet, and the rule cannot leak onto any other `.table-wrap` elsewhere in the app. */
.table-wrap[b-hpuphazzq0] {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* /Components/Meets/Director/Results/ResultsWorkspace.razor.rz.scp.css */
/* Director results workspace (WP3b, spec §10). ALL new styling for the feature lives in this one scoped file —
   `::deep` is used throughout so a single stylesheet can reach markup rendered by the presentational children
   (ResultsReadinessCard, PublishResultsDialog, ResultsSnapshotView, ResultsPublicationHistoryTable) as well as
   markup written directly here, without needing a matching .razor.css beside every one of them. Reuses the
   existing --mp-* tokens and the global .mp-card/.mp-btn/.mp-badge/.mp-table/.mp-overflow/.mp-muted system —
   platform.css itself is untouched (owned by another agent right now). Full viewport width throughout; no
   max-width cap is introduced anywhere below. */

.mp-rw-scope[b-gr2ngrifer] {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mp-rw-header[b-gr2ngrifer] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mp-rw-header h2[b-gr2ngrifer] { margin: 0 0 0.2rem; }
.mp-rw-header-actions[b-gr2ngrifer] { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-start; }

.mp-rw-status[b-gr2ngrifer] { border-radius: 10px; padding: 0.7rem 0.9rem; font-weight: 700; }
.mp-rw-status.success[b-gr2ngrifer] {
    border: 1px solid var(--mp-good); color: var(--mp-good);
    background: color-mix(in srgb, var(--mp-good) 12%, var(--mp-surface));
}
.mp-rw-status.error[b-gr2ngrifer] {
    border: 1px solid var(--mp-nolift); color: var(--mp-nolift);
    background: color-mix(in srgb, var(--mp-nolift) 12%, var(--mp-surface));
}

/* ---- Readiness card (ResultsReadinessCard.razor) ---- */
.mp-rw-scope[b-gr2ngrifer]  .mp-rw-readiness-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mp-rw-scope[b-gr2ngrifer]  .mp-rw-warnings { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.mp-rw-scope[b-gr2ngrifer]  .mp-rw-warnings li { padding: 0.5rem 0.7rem; border-radius: 8px; background: var(--mp-surface-2); font-size: 0.85rem; }
.mp-rw-scope[b-gr2ngrifer]  .mp-rw-warnings li.blocking { border-left: 3px solid var(--mp-nolift); }
.mp-rw-scope[b-gr2ngrifer]  .mp-rw-warnings li.blocking strong { color: var(--mp-nolift); }
.mp-rw-scope[b-gr2ngrifer]  .mp-rw-warnings li.advisory { border-left: 3px solid var(--mp-accent); }
.mp-rw-scope[b-gr2ngrifer]  .mp-rw-warnings li.advisory strong { color: var(--mp-accent); }
.mp-rw-scope[b-gr2ngrifer]  .mp-rw-warnings a { margin-left: 0.4rem; white-space: nowrap; }

/* ---- Shared card-head + public preview + history ---- */
.mp-rw-card-head[b-gr2ngrifer] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.mp-rw-card-head h2[b-gr2ngrifer] { margin: 0; font-size: 1.05rem; }

.mp-rw-preview-actions[b-gr2ngrifer] { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.mp-rw-iframe-wrap[b-gr2ngrifer] { border: 1px solid var(--mp-border); border-radius: 10px; overflow: hidden; height: 420px; background: var(--mp-surface-2); }
.mp-rw-iframe-wrap iframe[b-gr2ngrifer] { width: 100%; height: 100%; border: 0; }

.mp-rw-vis-controls[b-gr2ngrifer] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.mp-rw-row-actions[b-gr2ngrifer] { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ---- Dialogs (PublishResultsDialog.razor / ResultsSnapshotView.razor) ----
   platform.css's .mp-dirty-dialog is a fixed 26rem — too narrow for a form with textareas, and there's no wide
   variant for the full-content preview — so both get their own chrome here rather than reusing/growing that class. */
.mp-rw-scope[b-gr2ngrifer]  dialog.mp-rw-dialog {
    background: var(--mp-surface); color: var(--mp-text); border: 1px solid var(--mp-border);
    border-radius: 12px; padding: 1.25rem 1.4rem; width: min(30rem, calc(100vw - 2rem)); max-width: 30rem;
}
.mp-rw-scope[b-gr2ngrifer]  dialog.mp-rw-dialog.mp-rw-dialog-wide {
    width: min(58rem, calc(100vw - 2rem)); max-width: 58rem; max-height: calc(100vh - 4rem); overflow-y: auto;
}
.mp-rw-scope[b-gr2ngrifer]  dialog.mp-rw-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.mp-rw-scope[b-gr2ngrifer]  dialog.mp-rw-dialog h3 { margin-top: 0; }
.mp-rw-scope[b-gr2ngrifer]  dialog.mp-rw-dialog h4 { margin: 1rem 0 0.4rem; font-size: 0.9rem; }
.mp-rw-scope[b-gr2ngrifer]  dialog.mp-rw-dialog label.mp-muted { display: block; margin: 0.75rem 0 0.3rem; font-size: 0.78rem; font-weight: 650; }

.mp-rw-scope[b-gr2ngrifer]  dialog.mp-rw-dialog .form-control {
    display: block; width: 100%; min-height: 2.6rem; padding: 0.5rem 0.75rem; color: var(--mp-text);
    background: var(--mp-control-bg); border: 1px solid var(--mp-control-border); border-radius: 8px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); outline: none; font: inherit;
}
.mp-rw-scope[b-gr2ngrifer]  dialog.mp-rw-dialog .form-control::placeholder { color: var(--mp-control-placeholder); opacity: 1; }
.mp-rw-scope[b-gr2ngrifer]  dialog.mp-rw-dialog .form-control:focus-visible,
.mp-rw-scope[b-gr2ngrifer]  dialog.mp-rw-dialog .form-control:focus {
    border-color: var(--mp-control-border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-control-border-focus) 22%, transparent), inset 0 1px 1px rgba(0, 0, 0, 0.2);
}
.mp-rw-scope[b-gr2ngrifer]  dialog.mp-rw-dialog textarea.form-control { min-height: 4.5rem; resize: vertical; }

.mp-rw-scope[b-gr2ngrifer]  .mp-rw-check { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; font-size: 0.85rem; }
.mp-rw-scope[b-gr2ngrifer]  .mp-rw-check input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }
.mp-rw-scope[b-gr2ngrifer]  .mp-rw-dialog-error { color: var(--mp-nolift); font-weight: 700; margin-top: 0.7rem; }
.mp-rw-scope[b-gr2ngrifer]  .mp-rw-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.1rem; }
.mp-rw-scope[b-gr2ngrifer]  .mp-rw-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.3rem; }

@media (max-width: 640px) {
    .mp-rw-iframe-wrap[b-gr2ngrifer] { height: 300px; }
    .mp-rw-scope[b-gr2ngrifer]  dialog.mp-rw-dialog { padding: 1rem; }
    .mp-rw-header[b-gr2ngrifer] { flex-direction: column; align-items: stretch; }
}
/* /Components/Meets/Director/Setup/MeetRackSelector.razor.rz.scp.css */
/* Chrome for one meet-wide rack selector row (WP4, mock "setup-view": .selected-equipment strip + equipment
   dialog). Scoped CSS rather than a platform.css addition on purpose — platform.css is owned by WP3/WP5 in the
   programme's file split, and every rule here belongs to exactly this component's markup. The autocomplete's own
   .mp-rea/.suggestions chrome already lives in platform.css (added by WP3 and deliberately NOT scoped there, so it
   can be reused here unchanged). */

.mp-rack-selector[b-tszglgp0gr] {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.mp-rack-selected[b-tszglgp0gr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--mp-control-border, #3a4657);
    border-radius: 8px;
    background: var(--mp-nested-surface, #141b24);
}

.mp-rack-selected strong[b-tszglgp0gr] {
    display: block;
    font-size: 0.78rem;
}

.mp-rack-selected span span[b-tszglgp0gr] {
    display: block;
    color: var(--mp-muted);
    font-size: 0.66rem;
}

.mp-rack-selected-actions[b-tszglgp0gr] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.mp-rack-badge-good[b-tszglgp0gr] {
    border-color: var(--mp-good);
    color: var(--mp-good);
}

.mp-rack-clear[b-tszglgp0gr] {
    padding: 0.25rem 0.55rem;
    font-size: 0.68rem;
}

.mp-rack-empty[b-tszglgp0gr] {
    margin: 0;
    color: var(--mp-muted);
    font-size: 0.68rem;
}

.mp-rack-error[b-tszglgp0gr] {
    margin: 0;
    color: var(--mp-nolift);
    font-size: 0.7rem;
    font-weight: 700;
}

.mp-rack-notice[b-tszglgp0gr] {
    margin: 0;
    color: var(--mp-good);
    font-size: 0.7rem;
}

/* ---- Create-equipment dialog ---- */

.mp-rack-dialog[b-tszglgp0gr] {
    width: min(30rem, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    background: var(--mp-surface);
    color: var(--mp-text);
}

.mp-rack-dialog[b-tszglgp0gr]::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.mp-rack-dialog-head[b-tszglgp0gr] {
    padding: 1rem 1.1rem 0.6rem;
    border-bottom: 1px solid var(--mp-border);
}

.mp-rack-dialog-head h3[b-tszglgp0gr] {
    margin: 0 0 0.2rem;
    font-size: 1rem;
}

.mp-rack-dialog-head p[b-tszglgp0gr] {
    margin: 0;
    font-size: 0.7rem;
}

.mp-rack-dialog-body[b-tszglgp0gr] {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
}

.mp-rack-dialog-field label[b-tszglgp0gr],
.mp-rack-dialog-field > span[b-tszglgp0gr] {
    display: block;
    margin-bottom: 0.22rem;
    color: var(--mp-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.mp-rack-dialog-field p[b-tszglgp0gr] {
    margin: 0.2rem 0 0;
    font-size: 0.7rem;
}

.mp-rack-dialog-lifts[b-tszglgp0gr] {
    color: var(--mp-accent);
    font-weight: 700;
}

.mp-rack-dialog-actions[b-tszglgp0gr] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.1rem 1rem;
    border-top: 1px solid var(--mp-border);
}
/* /Components/Meets/Director/Setup/SessionPlatformEquipmentSection.razor.rz.scp.css */
/* Chrome for "Equipment by session & platform" (spec §7, mock card "10"). Scoped rather than a platform.css
   addition — same rationale as MeetRackSelector.razor.css: every rule here belongs to exactly this component's
   markup, and it already reuses the shared .mp-card/.mp-setup-sec/.mp-setup-head/.mp-badge/.mp-btn/.form-control
   system for everything else. */

.mp-spe-callout[b-dfl1e3frnj] {
    margin: 0 1.1rem 0.9rem;
    padding: 0.7rem 0.85rem;
    border: 1px dashed var(--mp-control-border, #354253);
    border-radius: 9px;
    background: var(--mp-nested-surface, #141b24);
    color: var(--mp-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.mp-spe-callout strong[b-dfl1e3frnj] { color: var(--mp-text); }

.mp-spe-notice[b-dfl1e3frnj] {
    margin: 0 1.1rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.mp-spe-notice.error[b-dfl1e3frnj] { color: var(--mp-nolift); }
.mp-spe-notice.good[b-dfl1e3frnj] { color: var(--mp-good); }

.mp-spe-toolbar[b-dfl1e3frnj] {
    display: flex;
    align-items: end;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mp-spe-toolbar-field[b-dfl1e3frnj] { display: grid; gap: 0.22rem; min-width: 11rem; }
.mp-spe-toolbar-field label[b-dfl1e3frnj] { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.015em; }
.mp-spe-toolbar-save[b-dfl1e3frnj] { margin-left: auto; }

.mp-spe-session-copy[b-dfl1e3frnj] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--mp-border);
    border-radius: 9px;
    background: var(--mp-nested-surface, #141b24);
}

.mp-spe-session-copy select[b-dfl1e3frnj] { max-width: 14rem; }

.mp-spe-platforms[b-dfl1e3frnj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
}

.mp-spe-platform[b-dfl1e3frnj] {
    border: 1px solid var(--mp-border);
    border-radius: 11px;
    padding: 0.85rem;
    background: var(--mp-nested-surface, #141b24);
    min-width: 0;
}

.mp-spe-platform-head[b-dfl1e3frnj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

.mp-spe-platform-head strong[b-dfl1e3frnj] { font-size: 0.92rem; }

.mp-spe-lifts[b-dfl1e3frnj] { display: grid; gap: 0.55rem; }

.mp-spe-lift-hdr[b-dfl1e3frnj] {
    display: grid;
    grid-template-columns: 4.5rem 1fr 5.5rem 1fr;
    gap: 0.5rem;
    color: var(--mp-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mp-spe-lift-row[b-dfl1e3frnj] {
    display: grid;
    grid-template-columns: 4.5rem 1fr 5.5rem 1fr;
    gap: 0.5rem;
    align-items: start;
}

.mp-spe-lift-label[b-dfl1e3frnj] { font-weight: 700; padding-top: 0.5rem; }

.mp-spe-field[b-dfl1e3frnj] { display: grid; gap: 0.2rem; min-width: 0; }
.mp-spe-field input.form-control[b-dfl1e3frnj] { min-width: 0; }

.mp-spe-source[b-dfl1e3frnj] {
    font-size: 0.64rem;
    color: var(--mp-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mp-spe-rack-selected[b-dfl1e3frnj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--mp-control-border, #354253);
    border-radius: 7px;
    background: var(--mp-surface);
    font-size: 0.78rem;
}

.mp-spe-rack-selected .mp-btn.ghost[b-dfl1e3frnj] { padding: 0.15rem 0.45rem; font-size: 0.68rem; }

.mp-spe-actions[b-dfl1e3frnj] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--mp-border);
}

.mp-spe-copy-to[b-dfl1e3frnj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.mp-spe-copy-target[b-dfl1e3frnj] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    color: var(--mp-muted);
}

@media (max-width: 640px) {
    .mp-spe-lift-hdr[b-dfl1e3frnj], .mp-spe-lift-row[b-dfl1e3frnj] { grid-template-columns: 1fr 1fr; }
    .mp-spe-lift-label[b-dfl1e3frnj] { grid-column: 1 / -1; padding-top: 0; }
    .mp-spe-copy-to[b-dfl1e3frnj] { margin-left: 0; }
}
/* /Components/Pages/Meets/Results.razor.rz.scp.css */
/* Public results page (WP3a rebuild, governing spec §9). Scoped to Results.razor.

   IMPORTANT: almost all of this page's markup is rendered by CHILD COMPONENTS under
   Components/Meets/Results/** (HighlightsPanel, CategoryResultsPanel, OverallResultsPanel, AllLiftersPanel,
   ResultsFilterBar, PublicationStrip, AttemptGrid, NoMatchesCard). Blazor's CSS isolation only stamps this file's
   scope attribute onto elements literally written IN Results.razor — it does not propagate across a child
   component's own render output, and PageLoadState (Components/Shared) renders its ChildContent with no wrapping
   element of its own, so without help every one of those children's elements would end up a SIBLING of this file's
   own scoped elements, never a descendant. Results.razor wraps its entire body in one literal `<div class=
   "mp-res-page">`, which DOES get the scope attribute — every selector below is anchored `.mp-res-page ::deep …`
   so it reaches through into the child components' own markup via that one real scoped ancestor (see
   https://learn.microsoft.com/aspnet/core/blazor/components/css-isolation — "::deep combinator"). Every one of our
   own classes is uniquely prefixed `mp-res-`, so this can't collide with anything on another page — the few rules
   that also touch a shared GLOBAL class (`.mp-card`, `.mp-btn`, `.mp-muted`, `.mp-board-row`, …) always pair it
   with one of our own `mp-res-*` classes on the same element or as the scoped ancestor, never a bare global
   selector, so nothing here can leak onto or override another page (platform.css itself stays untouched).

   Page-level padding/width already come from the shared .mp-container in MainLayout (platform.css, not owned by
   this WP) — deliberately NOT re-introducing a max-width cap here. Tables scroll horizontally inside their own
   .mp-res-table-wrap; the page itself must never gain a horizontal scrollbar. */

.mp-res-page[b-xe836d8bhu]  .mp-res-head { margin: 0.5rem 0 1rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-head h1 { margin: 0.2rem 0 0.35rem; font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -0.02em; }
.mp-res-page[b-xe836d8bhu]  .mp-res-meta { font-size: 0.9rem; }

/* ---- Publication strip ---- */
.mp-res-page[b-xe836d8bhu]  .mp-res-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-strip-info { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; min-width: 0; }
.mp-res-page[b-xe836d8bhu]  .mp-res-strip-frozen { font-size: 0.78rem; font-weight: 700; color: var(--mp-text); }
/* Re-purposes director-ui.js's .mp-board-row/.mp-board-copy-status hook (see PublicationStrip.razor) for this
   strip's own flex layout rather than the board-launcher grid it was originally styled for. */
.mp-res-page[b-xe836d8bhu]  .mp-res-strip-actions.mp-board-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0; grid-template-columns: none;
}
.mp-res-page[b-xe836d8bhu]  .mp-res-strip-actions .mp-board-copy-status { font-size: 0.72rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-copy .mp-res-copy-done { display: none; }
.mp-res-page[b-xe836d8bhu]  .mp-res-copy.mp-copied .mp-res-copy-default { display: none; }
.mp-res-page[b-xe836d8bhu]  .mp-res-copy.mp-copied .mp-res-copy-done { display: inline; }
.mp-res-page[b-xe836d8bhu]  .mp-res-strip-actions .mp-btn { min-height: 38px; display: inline-flex; align-items: center; }

/* ---- Tabs ---- */
.mp-res-page[b-xe836d8bhu]  .mp-res-tabs {
    display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 1rem 0 0.75rem;
    border-bottom: 1px solid var(--mp-border);
}
.mp-res-page[b-xe836d8bhu]  .mp-res-tabs a {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 0.85rem;
    color: var(--mp-muted); text-decoration: none; font-weight: 700; font-size: 0.9rem;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mp-res-page[b-xe836d8bhu]  .mp-res-tabs a:hover { color: var(--mp-text); }
.mp-res-page[b-xe836d8bhu]  .mp-res-tabs a.active { color: var(--mp-accent); border-bottom-color: var(--mp-accent); }
.mp-res-page[b-xe836d8bhu]  .mp-res-tabs a:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; }

/* ---- Filter bar ---- */
.mp-res-page[b-xe836d8bhu]  .mp-res-filterbar { position: sticky; top: 0; z-index: 5; margin-bottom: 1rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-filter-row { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-filter-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.72rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-filter-field select, .mp-res-page[b-xe836d8bhu]  .mp-res-filter-field input {
    min-height: 38px; padding: 0.4rem 0.6rem; border-radius: 7px; border: 1px solid var(--mp-border);
    background: var(--mp-bg); color: var(--mp-text); font: inherit;
}
.mp-res-page[b-xe836d8bhu]  .mp-res-filter-field select:focus-visible, .mp-res-page[b-xe836d8bhu]  .mp-res-filter-field input:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 1px; }
.mp-res-page[b-xe836d8bhu]  .mp-res-filter-search { flex: 1 1 14rem; min-width: 10rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-filter-search input { width: 100%; box-sizing: border-box; }
.mp-res-page[b-xe836d8bhu]  .mp-res-filter-actions { display: flex; gap: 0.5rem; align-items: center; }
.mp-res-page[b-xe836d8bhu]  .mp-res-filter-actions .mp-btn { min-height: 38px; }

.mp-res-page[b-xe836d8bhu]  .mp-res-more summary {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 0.7rem; cursor: pointer;
    color: var(--mp-muted); font-size: 0.78rem; font-weight: 700; list-style: none;
    border: 1px dashed var(--mp-border); border-radius: 7px; align-self: end;
}
.mp-res-page[b-xe836d8bhu]  .mp-res-more summary::-webkit-details-marker { display: none; }
.mp-res-page[b-xe836d8bhu]  .mp-res-more[open] summary { color: var(--mp-accent); border-color: var(--mp-accent); }
.mp-res-page[b-xe836d8bhu]  .mp-res-more-body { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }

/* Progressive disclosure, CSS-only (no JS): at wide viewports the "More filters" details is forced open and its
   summary hidden, so equipment/division/weight class sit inline in the SAME toolbar row as everything else —
   never dropped, only relocated below ~1180px where they collapse behind the disclosure. */
@media (min-width: 1180px) {
    .mp-res-page[b-xe836d8bhu]  .mp-res-more, .mp-res-page[b-xe836d8bhu]  .mp-res-more-body { display: contents; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-more summary { display: none; }
}

.mp-res-page[b-xe836d8bhu]  .mp-res-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.7rem 0 0; padding: 0; }
.mp-res-page[b-xe836d8bhu]  .mp-res-chip {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.3rem 0.2rem 0.65rem;
    background: var(--mp-surface-2); border: 1px solid var(--mp-border); border-radius: 999px; font-size: 0.78rem;
}
.mp-res-page[b-xe836d8bhu]  .mp-res-chip-x {
    display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem;
    border-radius: 50%; color: var(--mp-muted); text-decoration: none; font-size: 0.95rem; line-height: 1;
}
.mp-res-page[b-xe836d8bhu]  .mp-res-chip-x:hover { background: var(--mp-nolift); color: #fff; }
.mp-res-page[b-xe836d8bhu]  .mp-res-chip-x:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 1px; }

/* ---- Shared empty / calm states ---- */
.mp-res-page[b-xe836d8bhu]  .mp-res-state h2 { margin-top: 0; }
.mp-res-page[b-xe836d8bhu]  .mp-res-empty { text-align: center; padding: 2rem 1rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-empty-title { font-size: 1.05rem; }

.mp-res-page[b-xe836d8bhu]  .mp-res-section-head { font-size: 1.1rem; margin: 1.25rem 0 0.6rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-section-head:first-child { margin-top: 0; }

/* ---- Highlights: award cards ---- */
.mp-res-page[b-xe836d8bhu]  .mp-res-award-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-award-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-award-card-head h3 { margin: 0; }
.mp-res-page[b-xe836d8bhu]  .mp-res-award-badges { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.mp-res-page[b-xe836d8bhu]  .mp-res-podium-list { list-style: none; margin: 0.75rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-podium-row { display: grid; grid-template-columns: 3rem 1fr; gap: 0.15rem 0.6rem; align-items: baseline; }
.mp-res-page[b-xe836d8bhu]  .mp-res-podium-row.mp-res-first { font-weight: 800; }
.mp-res-page[b-xe836d8bhu]  .mp-res-podium-place { color: var(--mp-accent); font-weight: 800; }
.mp-res-page[b-xe836d8bhu]  .mp-res-podium-name { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.mp-res-page[b-xe836d8bhu]  .mp-res-podium-row .mp-muted { grid-column: 2; font-size: 0.78rem; }

/* ---- Highlights: category champion tiles ---- */
.mp-res-page[b-xe836d8bhu]  .mp-res-champ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-champ-axes { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
.mp-res-page[b-xe836d8bhu]  .mp-res-champ-name { font-size: 1.1rem; font-weight: 800; margin: 0.25rem 0; }

/* ---- Category results ---- */
.mp-res-page[b-xe836d8bhu]  .mp-res-cat-card { margin-bottom: 1rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-cat-head { margin: 0 0 0.6rem; font-size: 1rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.mp-res-page[b-xe836d8bhu]  tr.mp-res-row-unranked { opacity: 0.75; }
.mp-res-page[b-xe836d8bhu]  .mp-res-attempts summary {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 0.6rem; cursor: pointer;
    color: var(--mp-accent); font-weight: 700; font-size: 0.78rem; list-style: none; white-space: nowrap;
}
.mp-res-page[b-xe836d8bhu]  .mp-res-attempts summary::-webkit-details-marker { display: none; }
/* Explicit, author-level collapse — belt-and-braces alongside the browser's own native closed-<details> hiding.
   Current Chromium hides collapsed <details> content via content-visibility:hidden rather than display:none, which
   still computes REAL box geometry for the hidden subtree (unlike display:none, which computes none at all) — that
   geometry was silently growing this table's natural/intrinsic width measurement (picked up by the existing
   grid-resize.js column-resize script AND by document.documentElement.scrollWidth) even while visually collapsed.
   An explicit display:none here is a normal author rule, so it wins outright and gives genuinely zero geometry. */
.mp-res-page[b-xe836d8bhu]  .mp-res-attempts:not([open]) > *:not(summary) { display: none; }
.mp-res-page[b-xe836d8bhu]  .mp-res-attempt-table { margin-top: 0.5rem; min-width: 28rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-attempt-table th, .mp-res-page[b-xe836d8bhu]  .mp-res-attempt-table td { white-space: nowrap; }

/* ---- Overall results ---- */
.mp-res-page[b-xe836d8bhu]  .mp-res-award-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-award-chip {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 0.85rem; border-radius: 999px;
    background: var(--mp-surface-2); border: 1px solid var(--mp-border); color: var(--mp-text);
    text-decoration: none; font-weight: 700; font-size: 0.85rem;
}
.mp-res-page[b-xe836d8bhu]  .mp-res-award-chip.active { background: var(--mp-accent); color: #1a1300; border-color: var(--mp-accent); }
.mp-res-page[b-xe836d8bhu]  .mp-res-award-chip:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; }
.mp-res-page[b-xe836d8bhu]  .mp-res-overall-meta h2 { margin: 0 0 0.3rem; font-size: 1.15rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-overall-meta p { max-width: 70ch; font-size: 0.85rem; line-height: 1.5; }
/* The award's OWN published rules (formula / age coefficient / sex split / included divisions). A <dl> of label+value
   pairs that wrap freely, so a long division list never forces the card wider than the page. */
.mp-res-page[b-xe836d8bhu]  .mp-res-award-rules {
    display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 0 0 0.6rem; padding: 0; min-width: 0;
}
.mp-res-page[b-xe836d8bhu]  .mp-res-award-rules > div { min-width: 0; max-width: 100%; }
.mp-res-page[b-xe836d8bhu]  .mp-res-award-rules dt {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mp-muted);
}
.mp-res-page[b-xe836d8bhu]  .mp-res-award-rules dd {
    margin: 0.1rem 0 0; font-size: 0.85rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere;
}

/* ---- All lifters (expanded-result redesign, powerlifting-results-lifters-expanded-spec.md) ----
   One collapsed <details> row per Pub.LifterIndex entry, expanding into: performance strip, category-standing
   cards, overall-standing rows, then the attempt table — in that order, never overlapping. Every element in the
   expanded body is contained (min-width:0; max-width:100%; box-sizing:border-box) and long text (names, team,
   reasons, six-axis labels, award names) wraps via overflow-wrap:anywhere, so a card grid or an award-row grid
   track can never be forced wider than its column by its own content. */
.mp-res-page[b-xe836d8bhu]  .mp-res-lifter-list { display: flex; flex-direction: column; gap: 0.6rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-lifter { padding: 0; }
/* Open state: a STRONGER (not accent) border plus subtle elevation — color-mix lightens the existing --mp-border
   token toward --mp-text rather than hard-coding a new shade, so it stays theme-consistent with no new token. Only
   the chevron itself (below) takes the accent colour when open. */
.mp-res-page[b-xe836d8bhu]  .mp-res-lifter[open] { border-color: color-mix(in srgb, var(--mp-border) 45%, var(--mp-text)); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28); }

.mp-res-page[b-xe836d8bhu]  .mp-res-lifter-summary {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    min-height: 72px; padding: 12px 16px; list-style: none; cursor: pointer;
}
.mp-res-page[b-xe836d8bhu]  .mp-res-lifter-summary::-webkit-details-marker { display: none; }
.mp-res-page[b-xe836d8bhu]  .mp-res-lifter-summary:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: -3px; border-radius: 10px; }

.mp-res-page[b-xe836d8bhu]  .mp-res-chevron {
    display: grid; width: 28px; height: 28px; min-width: 0; place-items: center;
    border: 1px solid var(--mp-border); border-radius: 50%; color: var(--mp-muted);
    transition: transform 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.mp-res-page[b-xe836d8bhu]  .mp-res-lifter[open] .mp-res-chevron { transform: rotate(90deg); border-color: var(--mp-accent); color: var(--mp-accent); }
@media (prefers-reduced-motion: reduce) {
    .mp-res-page[b-xe836d8bhu]  .mp-res-chevron { transition: none; }
}

.mp-res-page[b-xe836d8bhu]  .mp-res-identity { min-width: 0; }
.mp-res-page[b-xe836d8bhu]  .mp-res-lifter-name { display: block; overflow-wrap: anywhere; font-weight: 800; font-size: 1rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-lifter-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin-top: 0.15rem; min-width: 0; color: var(--mp-muted); font-size: 0.78rem; }
.mp-res-page[b-xe836d8bhu]  .mp-res-lifter-meta span { overflow-wrap: anywhere; }
.mp-res-page[b-xe836d8bhu]  .mp-res-lifter-meta span + span::before { margin-right: 0.6rem; content: "·"; }

.mp-res-page[b-xe836d8bhu]  .mp-res-lifter-counts { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-self: end; }
.mp-res-page[b-xe836d8bhu]  .mp-res-count-chip {
    display: inline-flex; align-items: center; min-height: 26px; padding: 0.15rem 0.6rem; border-radius: 999px;
    border: 1px solid var(--mp-border); background: var(--mp-surface-2); color: var(--mp-muted);
    font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.mp-res-page[b-xe836d8bhu]  .mp-res-count-chip strong { margin-right: 0.25rem; color: var(--mp-text); }

/* Explicit-collapse belt-and-braces (see .mp-res-attempts above) — an All-lifters card's performance/category/
   award/attempt content must contribute zero geometry while collapsed, not just be visually hidden. */
.mp-res-page[b-xe836d8bhu]  .mp-res-lifter:not([open]) > *:not(summary) { display: none; }
.mp-res-page[b-xe836d8bhu]  .mp-res-lifter-body {
    display: grid; gap: 14px; min-width: 0; max-width: 100%; box-sizing: border-box;
    padding: 0 16px 16px; overflow: visible;
}

/* ---- Performance summary ---- */
.mp-res-page[b-xe836d8bhu]  .mp-res-performance {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; min-width: 0; max-width: 100%;
    margin: 0; overflow: hidden; border: 1px solid var(--mp-border); border-radius: 10px; background: var(--mp-border);
}
.mp-res-page[b-xe836d8bhu]  .mp-res-metric { min-width: 0; box-sizing: border-box; margin: 0; padding: 12px 14px; background: var(--mp-surface-2); }
.mp-res-page[b-xe836d8bhu]  .mp-res-metric dt { color: var(--mp-muted); font-size: 0.63rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.mp-res-page[b-xe836d8bhu]  .mp-res-metric dd { margin: 0.25rem 0 0; overflow-wrap: anywhere; font-size: 1.1rem; font-weight: 800; }
.mp-res-page[b-xe836d8bhu]  .mp-res-metric dd small { color: var(--mp-muted); font-size: 0.68rem; font-weight: 700; }

/* ---- Shared section shell (category standings / overall standings / attempts) ---- */
.mp-res-page[b-xe836d8bhu]  .mp-res-section {
    min-width: 0; max-width: 100%; box-sizing: border-box; padding: 14px;
    border: 1px solid var(--mp-border); border-radius: 10px; background: var(--mp-bg);
}
.mp-res-page[b-xe836d8bhu]  .mp-res-section-title { margin: 0 0 0.65rem; font-size: 0.85rem; letter-spacing: -0.005em; }

/* ---- Category standings ---- */
.mp-res-page[b-xe836d8bhu]  .mp-res-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 10px; min-width: 0; }
.mp-res-page[b-xe836d8bhu]  .mp-res-category-card {
    display: grid; gap: 0.75rem; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 13px;
    border: 1px solid var(--mp-border); border-radius: 9px; background: var(--mp-surface-2);
}
.mp-res-page[b-xe836d8bhu]  .mp-res-category-title { margin: 0; overflow-wrap: anywhere; font-size: 0.9rem; line-height: 1.35; }
.mp-res-page[b-xe836d8bhu]  .mp-res-category-axes { display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; }
/* white-space: normal is load-bearing: the chips also carry the global .mp-badge, whose nowrap otherwise makes a
   long axis value (a verbose division name) force the PAGE wider — +119px of document overflow at a 320px
   viewport. overflow-wrap alone cannot help while wrapping is forbidden. */
.mp-res-page[b-xe836d8bhu]  .mp-res-category-axes .mp-res-axis { overflow-wrap: anywhere; white-space: normal; }

.mp-res-page[b-xe836d8bhu]  .mp-res-standings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0; min-width: 0; }
.mp-res-page[b-xe836d8bhu]  .mp-res-standing { min-width: 0; }
.mp-res-page[b-xe836d8bhu]  .mp-res-standing dt { color: var(--mp-muted); font-size: 0.62rem; font-weight: 780; text-transform: uppercase; }
.mp-res-page[b-xe836d8bhu]  .mp-res-standing dd { margin: 0.2rem 0 0; overflow-wrap: anywhere; font-size: 0.88rem; font-weight: 800; }

.mp-res-page[b-xe836d8bhu]  .mp-res-reason {
    margin: 0; padding-top: 0.55rem; min-width: 0; border-top: 1px solid var(--mp-border);
    color: var(--mp-muted); font-size: 0.75rem; overflow-wrap: anywhere;
}

/* ---- Overall standings ---- */
.mp-res-page[b-xe836d8bhu]  .mp-res-award-list { display: grid; gap: 8px; min-width: 0; }
.mp-res-page[b-xe836d8bhu]  .mp-res-award-row {
    display: grid; grid-template-columns: minmax(180px, 1.8fr) repeat(3, minmax(80px, .5fr)); gap: 12px;
    align-items: center; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 11px 13px;
    border: 1px solid var(--mp-border); border-radius: 9px; background: var(--mp-surface-2);
}
.mp-res-page[b-xe836d8bhu]  .mp-res-award-name { min-width: 0; }
.mp-res-page[b-xe836d8bhu]  .mp-res-award-name strong { display: block; overflow-wrap: anywhere; }
.mp-res-page[b-xe836d8bhu]  .mp-res-award-name small { display: block; margin-top: 0.15rem; overflow-wrap: anywhere; color: var(--mp-muted); }
/* dt/dd, not span/strong: the stats are a real <dl> per the spec's label/value-metrics rule. margin: 0 resets the
   UA's default dl/dd indents so the grid placement is identical to the previous div markup. */
.mp-res-page[b-xe836d8bhu]  .mp-res-award-stat { min-width: 0; margin: 0; }
.mp-res-page[b-xe836d8bhu]  .mp-res-award-stat dt { display: block; color: var(--mp-muted); font-size: 0.62rem; font-weight: 780; text-transform: uppercase; }
.mp-res-page[b-xe836d8bhu]  .mp-res-award-stat dd { display: block; margin: 0.2rem 0 0; font-weight: 800; overflow-wrap: anywhere; }

/* ---- Attempts ---- */
.mp-res-page[b-xe836d8bhu]  .mp-res-attempt-scroll {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--mp-border); border-radius: 9px;
}
.mp-res-page[b-xe836d8bhu]  .mp-res-attempt-scroll:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: -2px; }
/* More specific than the generic .mp-res-attempt-table rule above (which also styles CategoryResultsPanel's
   per-row attempts detail) — scoping under .mp-res-attempt-scroll keeps this override to the All-lifters view only.
   The table's own min-width (650px/520px per whether a 4th record-attempt column exists) is set inline by
   AttemptGrid.razor itself, which knows the real column count; this just resets the shared rule's margin. */
.mp-res-page[b-xe836d8bhu]  .mp-res-attempt-scroll .mp-res-attempt-table { margin: 0; background: var(--mp-surface-2); }
.mp-res-page[b-xe836d8bhu]  .mp-res-attempt-weight { display: block; font-size: 0.85rem; font-weight: 800; }
.mp-res-page[b-xe836d8bhu]  .mp-res-attempt-result { display: block; margin-top: 0.1rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }

/* ---- All lifters: tablet/phone reflow ---- */
@media (max-width: 720px) {
    .mp-res-page[b-xe836d8bhu]  .mp-res-lifter-summary { grid-template-columns: 28px minmax(0, 1fr); min-height: 76px; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-lifter-counts { grid-column: 2; justify-self: start; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-performance { grid-template-columns: 1fr 1fr; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-standings { grid-template-columns: 1fr 1fr; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-award-row { grid-template-columns: 1fr 1fr; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-award-name { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
    .mp-res-page[b-xe836d8bhu]  .mp-res-lifter-body { padding: 0 10px 12px; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-section { padding: 11px; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-lifter-meta span { width: 100%; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-lifter-meta span + span::before { content: none; }
}

/* Every card-shaped container on this page (all also carry the global .mp-card) never overflows its own box, and
   never lets a wide table inside it push the PAGE wider — the table scrolls internally via .mp-res-table-wrap
   above instead. min-width:0 is required here because several of these sit inside CSS grid/flex layouts
   (.mp-res-award-grid/.mp-res-champ-grid), where a grid/flex item's default min-width:auto would otherwise let its
   widest descendant (a data table) force the whole track wider than the viewport. */
.mp-res-page[b-xe836d8bhu]  .mp-res-strip, .mp-res-page[b-xe836d8bhu]  .mp-res-cat-card, .mp-res-page[b-xe836d8bhu]  .mp-res-champ-tile,
.mp-res-page[b-xe836d8bhu]  .mp-res-award-card, .mp-res-page[b-xe836d8bhu]  .mp-res-empty, .mp-res-page[b-xe836d8bhu]  .mp-res-overall-card,
.mp-res-page[b-xe836d8bhu]  .mp-res-state, .mp-res-page[b-xe836d8bhu]  .mp-res-lifter {
    min-width: 0; max-width: 100%; box-sizing: border-box;
}

/* Every disclosure's collapsed content must never affect page layout/scrollWidth even though modern Chromium hides
   closed <details> content via content-visibility:hidden rather than display:none (the former still computes real
   box geometry for the hidden subtree, unlike the latter) — an explicit width cap here is what actually keeps a
   wide attempt grid from silently growing document.documentElement.scrollWidth while collapsed.
   .mp-res-lifter-body is DELIBERATELY not in this rule (expanded-result redesign spec): the All-lifters body has
   no horizontal overflow of its own — it is overflow:visible (see the All-lifters section above) — because
   category/award content is now cards/definition lists, not tables, and the ONE remaining table (attempts) carries
   its own dedicated scroller, .mp-res-attempt-scroll. Two competing horizontal scrollers (body + table wrapper) was
   the page's second layout defect; there is now exactly one. */
.mp-res-page[b-xe836d8bhu]  .mp-res-attempts { max-width: 100%; overflow-x: auto; }

/* ---- Motion ---- */
.mp-res-page[b-xe836d8bhu]  .mp-res-tabs a, .mp-res-page[b-xe836d8bhu]  .mp-res-award-chip, .mp-res-page[b-xe836d8bhu]  .mp-res-chip-x { transition: color 0.12s, background-color 0.12s, border-color 0.12s; }
@media (prefers-reduced-motion: reduce) {
    .mp-res-page[b-xe836d8bhu]  .mp-res-tabs a, .mp-res-page[b-xe836d8bhu]  .mp-res-award-chip, .mp-res-page[b-xe836d8bhu]  .mp-res-chip-x { transition: none; }
}

/* ---- Small viewports ---- */
@media (max-width: 640px) {
    .mp-res-page[b-xe836d8bhu]  .mp-res-filter-row { align-items: stretch; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-filter-field, .mp-res-page[b-xe836d8bhu]  .mp-res-more { width: 100%; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-more summary { align-self: stretch; justify-content: center; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-filter-actions { width: 100%; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-filter-actions .mp-btn { flex: 1; }
}

/* ---- Print (save as PDF) ---- */
@media print {
    .mp-res-page[b-xe836d8bhu]  .mp-res-tabs, .mp-res-page[b-xe836d8bhu]  .mp-res-filterbar,
    .mp-res-page[b-xe836d8bhu]  .mp-res-strip-actions, .mp-res-page[b-xe836d8bhu]  .mp-res-chips { display: none !important; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-filterbar { position: static; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-strip, .mp-res-page[b-xe836d8bhu]  .mp-res-cat-card, .mp-res-page[b-xe836d8bhu]  .mp-res-champ-tile,
    .mp-res-page[b-xe836d8bhu]  .mp-res-award-card, .mp-res-page[b-xe836d8bhu]  .mp-res-overall-card,
    .mp-res-page[b-xe836d8bhu]  .mp-res-lifter, .mp-res-page[b-xe836d8bhu]  .mp-res-category-card,
    .mp-res-page[b-xe836d8bhu]  .mp-res-award-row { break-inside: avoid; border-color: #999; }
    /* Force every disclosure open so nothing is missing from the printed/PDF output, regardless of on-screen state. */
    .mp-res-page[b-xe836d8bhu]  .mp-res-attempts:not([open]) > *:not(summary),
    .mp-res-page[b-xe836d8bhu]  .mp-res-lifter:not([open]) > *:not(summary) { display: block !important; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-attempts summary { display: none !important; }
    /* The lifter summary PRINTS: it is the only place the lifter's name/team/country appear, and hiding it produced
       an anonymous results printout. Print it as a static block and hide only the interactive chrome (chevron) and
       the on-screen count chips, which duplicate what the printed sections below already show in full. */
    .mp-res-page[b-xe836d8bhu]  .mp-res-lifter-summary { display: block !important; cursor: default; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-chevron, .mp-res-page[b-xe836d8bhu]  .mp-res-lifter-counts { display: none !important; }
    /* The attempt table must print complete, not clipped to its on-screen scroller: let it lay out at its natural
       width instead of scrolling internally (a printed page has no interactive scrollbar to reach the rest).
       AttemptGrid.razor sets the table's on-screen min-width via an INLINE style (it's the one place that knows
       the real column count), so overriding it for print needs !important — the only thing in this stylesheet
       that does, and only to beat that one inline style. */
    .mp-res-page[b-xe836d8bhu]  .mp-res-attempt-scroll { overflow: visible; max-width: none; }
    .mp-res-page[b-xe836d8bhu]  .mp-res-attempt-scroll .mp-res-attempt-table { min-width: 0 !important; }
}
/* /Components/Pages/Scoreboard.razor.rz.scp.css */
/* results-scoreboard-workspace ADR-1 §5: attempt-cell action lane replacing the removed ✓/✗ .mp-sb-glyph spans.
   .mp-sb-attempt-content is an inline-flex pair (weight, action) so it shares the line with the badge stack that
   follows it (same "stay on one line" reasoning as .mp-sb-annot-stack below). The action slot is ALWAYS rendered —
   either the real .mp-lift-video/.mp-sb-clip-action anchor or an inert .mp-sb-clip-slot spacer of the same
   footprint — so weights and buttons line up column-to-column whether or not a given cell has a clip.

   The spacer/lane width intentionally matches .mp-lift-video's existing 44px touch target (platform.css) rather
   than literally shrinking the button to the mock-up's 28-30px: GridFullscreenUiTests/ScoreboardCondensedUiTests'
   `Play_link_renders_in_condensed_and_full_modes_with_correct_href_and_aria_label` asserts a >=44 CSS px bounding
   box (spec §3.1's own touch-target rule), and shrinking the real hit area to match a 28-30px visual lane would
   have broken that pre-existing, still-correct accessibility assertion. The lane is still fixed-width and still
   reserved when empty, which is the alignment property the ADR actually needs. */
.mp-sb-attempt-content[b-loojv4u9p8] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
    vertical-align: middle;
}

/* Typography is inherited from the shared `.mp-sb .mp-board-table td` rule in platform.css — deliberately NO
   font-size/font-weight override here, so an attempt value's weight span, a collapsed-best cell, and every plain
   Total/DOTS/IPF GL/Wilks/Points <td> resolve to the exact same computed size/weight/line-height (ADR-1 §5 "ONE
   token"; never shrink Total/DOTS). `font: inherit` makes that explicit and defensive rather than relying on the
   cascade doing nothing to it by accident. */
.mp-sb-attempt-weight[b-loojv4u9p8] {
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.mp-sb-attempt-weight.good[b-loojv4u9p8] { color: var(--mp-good, #16a34a); }
/* Colour is never the only signal (spec §2.3/§9): a no-lift weight also gets a line-through, thick enough to
   read at venue text scales (the same --mp-display-unit token the rest of the board's type scale uses). */
.mp-sb-attempt-weight.nolift[b-loojv4u9p8] {
    color: var(--mp-nolift, #dc2626);
    text-decoration: line-through;
    text-decoration-thickness: max(2px, calc(2 * var(--mp-display-unit, 1px)));
    text-underline-offset: 2px;
}

/* Inert placeholder for an attempt cell with no playable clip (pending/unavailable/processing/outside-stream) —
   same footprint as the real action button so the weight column still lines up. */
.mp-sb-clip-slot[b-loojv4u9p8] {
    display: inline-block;
    width: 44px;
    height: 1px;
    flex: 0 0 44px;
}
.mp-sb-clip-action[b-loojv4u9p8] {
    flex: 0 0 auto;
}
.mp-sb-clip-action svg[b-loojv4u9p8] {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
@media (max-width: 480px) {
    /* Finding 7 (cross-review): reserving a full 44px lane in EVERY attempt cell at 390px meant a clip-less cell
       paid 44px of width purely for an empty spacer, on a board already tight for space (spec §3.1 "must fit
       390px"). Narrow the RESERVED SLOT (both the inert spacer and the real action's own layout footprint) to the
       mock-up's compact size here; the real action's actual TAP TARGET still meets the repo's >=44 CSS px touch-
       target rule via the ::before hit-extension below, never by shrinking the anchor's own box at the WIDER
       viewports GridFullscreenUiTests/ScoreboardCondensedUiTests' existing BoundingBoxAsync assertion runs at
       (that test never narrows the viewport, so it is untouched by this block). */
    .mp-sb-clip-slot[b-loojv4u9p8] { width: 28px; flex: 0 0 28px; }
    .mp-sb-clip-action[b-loojv4u9p8] {
        width: 28px; height: 28px; flex: 0 0 28px; position: relative;
    }
    /* Invisible hit-extension: a 44x44 region centred on the 28x28 visual button. Absolutely positioned, so it
       contributes nothing to layout (the reserved slot above stays 28px) while still being part of the anchor's
       own box for click purposes — a pointer press anywhere in this region reaches the real <a>. */
    .mp-sb-clip-action[b-loojv4u9p8]::before {
        content: ''; position: absolute; inset: -8px;
    }
    .mp-sb-clip-action svg[b-loojv4u9p8] { width: 14px; height: 14px; }
}

/* §6.8 scoreboard PB / national-record cell badges (WP5; RP WP4 adds effective filtering, and the badges now render
   inline instead of reserving a row-height slot). Meaning is never carried by colour alone: each kind has its own
   glyph (★ PB / ▲ national record), the full wording lives in title/aria-label, and .mp-sb-annot-legend keys the
   glyphs above the board. Present in full, condensed and Present modes — badges are display content, unlike the
   interactive clip link. Theme-aware: the board's --mp-* custom properties (set by MeetThemeStyle) cascade into these
   scoped rules, with hard fallbacks for safety. */

/* Badges sit on the SAME text line as the weight/glyph — never on a line of their own — so a badged cell is never
   taller than its badge-less neighbours and attempt rows keep their natural height. Three things make that hold on a
   real board, and all three are load-bearing (each was measured against the seeded showcase meet):
     1. display:inline, NOT inline-flex. An atomic inline box establishes its own line box inside the cell even when
        it is empty, which grew annotated rows by a full line (68px -> 92px). A plain inline span costs nothing when
        it has no badges, so the stack can keep rendering unconditionally.
     2. white-space:nowrap on the cells that actually carry a badge (see the td rule below), so a badge can never be
        pushed onto a second line when weight + result glyph + badges exceed the column width. Without it, 8 of 14
        badges on the showcase board still wrapped under the weight.
     3. Icon-only badges in these dense cells (.mp-sb-annot-label is hidden). Attempt columns are 70-110px under
        table-layout:fixed, which cannot fit a weight, a result glyph and two "★PB"/"▲NR" pills on one line — with
        the type word shown, the badges overhung the next column by up to 42px. The word is not lost: it stays in
        every badge's title/aria-label, and .mp-sb-annot-legend spells both glyphs out above the board. */
.mp-sb-annot-stack[b-loojv4u9p8] {
    display: inline;
}

/* Only cells that really carry a badge opt out of wrapping — badge-less cells (and the lifter/team name columns,
   which share this stack markup) keep their normal wrapping behaviour and their natural row height. */
td:has(.mp-sb-annot)[b-loojv4u9p8] {
    white-space: nowrap;
}

/* One visual definition shared by the real cell badges and the legend's sample glyphs. They deliberately do NOT share
   the .mp-sb-annot class: that class means "this attempt earned an indicator", and tests/queries count it. */
/* display-board-typography §7.3: the PB / national-record glyph is the smallest thing on the board that still has
   to be READ from the back of a hall, so it gets a real token instead of the old fixed 0.6rem (9.6px — invisible on
   a 65-inch panel). 13 design px x the 1.25 "Audience 65in" preset = 16.25px, clearing the §7.3 minimum of 16.
   var(--mp-display-unit) is declared on .mp-sb in platform.css and INHERITS into this scoped stylesheet perfectly
   well — Blazor's scoping only appends an attribute selector, it does not isolate the cascade. The fallback keeps
   these badges legible on any surface that renders them outside a .mp-sb root. */
.mp-sb-annot[b-loojv4u9p8],
.mp-sb-legend-glyph[b-loojv4u9p8] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0 0.3rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: calc(13 * var(--mp-display-unit, 1px));
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.55;
    white-space: nowrap;
    vertical-align: middle;
}

/* Separation from the weight applies to cell badges only — the legend supplies its own spacing. */
.mp-sb-annot[b-loojv4u9p8] {
    margin-left: 0.2rem;
}

/* Icon-only inside board cells (see note 3 above). The label is kept in the DOM for assistive tech that exposes it,
   and every badge still carries the full wording in title/aria-label. */
.mp-sb-annot-label[b-loojv4u9p8] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Glyph key for the icon-only badges — rendered next to the Indicators control, and only for the kinds currently
   visible, so the board never explains a badge it is not showing. */
.mp-sb-annot-legend[b-loojv4u9p8] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    /* The key has to be readable wherever the glyphs it explains are (§7.3), so it rides the same unit. */
    font-size: calc(14 * var(--mp-display-unit, 1px));
    color: var(--mp-muted, #9ca3af);
}

.mp-sb-annot-legend > span[b-loojv4u9p8] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Kind: PB (star) vs national record (triangle) — distinct hues, distinct icons, distinct text ("PB" / "NR"). */
.mp-sb-annot.annot-pb[b-loojv4u9p8], .mp-sb-legend-glyph.annot-pb[b-loojv4u9p8] { color: var(--mp-accent, #eab308); }
.mp-sb-annot.annot-record[b-loojv4u9p8], .mp-sb-legend-glyph.annot-record[b-loojv4u9p8] { color: #b57bff; }

/* Status shading layered on top (secondary to the always-present type text + icon). Ordered after the kind rules so
   the muted failed/superseded treatment wins at equal specificity. */
.mp-sb-annot.annot-ratified[b-loojv4u9p8] { background: color-mix(in srgb, var(--mp-good, #16a34a) 20%, transparent); }
.mp-sb-annot.annot-pending[b-loojv4u9p8] { background: color-mix(in srgb, currentColor 15%, transparent); }
.mp-sb-annot.annot-failed[b-loojv4u9p8] { color: var(--mp-muted, #9ca3af); opacity: 0.7; text-decoration: line-through; }
.mp-sb-annot.annot-superseded[b-loojv4u9p8] { color: var(--mp-muted, #9ca3af); opacity: 0.7; }

/* §5.1 tri-state Indicators popover (RP WP4). Razor-native (no new JS): a position:relative wrapper around the
   toggle button plus an absolutely-positioned panel, opened/closed purely by Blazor onclick/onkeydown state — no
   floating-UI library, no <details>. Reuses the app's existing .mp-card/.mp-btn/.mp-badge/.mp-segmented primitives
   (defined in platform.css) for visual consistency with the rest of the toolbar; only positioning/sizing is scoped
   here to this component. */
/* display-board-typography: the Text size control wants the same anchored-popover geometry but is a DIFFERENT
   control, so it gets its own names alongside these rather than reusing them — `.mp-ind-wrap > button` is how
   several UI tests locate the Indicators toggle, and a second control wearing that class makes every one of those
   locators ambiguous. Shared look, separate name. */
.mp-ind-wrap[b-loojv4u9p8], .mp-scale-wrap[b-loojv4u9p8] { position: relative; display: inline-flex; }

.mp-ind-popover[b-loojv4u9p8], .mp-scale-popover[b-loojv4u9p8] {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    width: min(22rem, 90vw);
    margin-bottom: 0;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
}

.mp-ind-row[b-loojv4u9p8] { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.mp-ind-row > span[b-loojv4u9p8] { font-size: 0.8rem; font-weight: 700; }
.mp-ind-popover .mp-segmented[b-loojv4u9p8] { width: 100%; }
.mp-ind-popover .mp-segmented button[b-loojv4u9p8] { flex: 1; justify-content: center; }

@media (max-width: 650px) {
    .mp-ind-popover[b-loojv4u9p8], .mp-scale-popover[b-loojv4u9p8] { position: fixed; left: 0.75rem; right: 0.75rem; top: 4.5rem; width: auto; }
}

/* display-board-typography §3.4/§7.4: the "Use audience layout" block inside the Text size popover. Visually
   SEPARATED from the four presets above it — its own rule, its own explanation, primary (not secondary) button —
   because it is the only control here that also changes Full/Condensed and auto-scroll. A preset that quietly
   rearranged the board would be a trap; this one announces exactly what it is going to do before it does it. */
.mp-sb-audience[b-loojv4u9p8] {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--mp-border, #2a3441);
}

.mp-sb-audience .mp-btn[b-loojv4u9p8] { width: 100%; min-height: 44px; }
.mp-sb-audience p[b-loojv4u9p8] { margin: 0.35rem 0 0; font-size: 0.76rem; line-height: 1.35; }

/* Phones (mirrors platform.css's own 480px scoreboard block): the condensed board is designed to fit a 390px
   screen, so the badges stay at their original compact size there rather than following the venue token. */
@media (max-width: 480px) {
    .mp-sb-annot[b-loojv4u9p8],
    .mp-sb-legend-glyph[b-loojv4u9p8] { font-size: 0.6rem; }

    .mp-sb-annot-legend[b-loojv4u9p8] { font-size: 0.7rem; }
}