/* /Components/Layout/MainLayout.razor.rz.scp.css */
/*
    The footer link row. The flex container in the markup decides that links wrap between each
    other rather than mid-phrase; this decides that a single link can never split, however narrow
    the viewport gets.

    Both halves are needed. Flex alone still allows an individual flex item to wrap internally, so
    at the narrowest widths "Terms & Conditions" or "How We Decide Countries" would break across
    two lines and read as two links, each separately clickable — which is the fault reported in
    #271, just at a smaller breakpoint than it was first noticed.
*/
.footer-links a[b-c7awxu8cds] {
    white-space: nowrap;
}
/* /Components/Map.razor.rz.scp.css */
/* /Components/Pages/HostSession.razor.rz.scp.css */
.stats-card[b-1q136y6lpn] {
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.2s ease-in-out;
}

    .stats-card:hover[b-1q136y6lpn] {
        transform: translateY(-2px);
    }

.stats-icon[b-1q136y6lpn] {
    font-size: 2rem;
    margin-bottom: 1rem;
    float: right;
    color: inherit;
}

.stats-number[b-1q136y6lpn] {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0.5rem;
    color: #fff;
}

.stats-label[b-1q136y6lpn] {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
    color: #fff;
}

.session-code[b-1q136y6lpn] {
    font-family: monospace;
    font-weight: bold;
    font-size: 1.1rem;
}

.session-date[b-1q136y6lpn] {
    line-height: 1.2;
}

.status-badge[b-1q136y6lpn] {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-active[b-1q136y6lpn] {
    background-color: #d1ecf1;
    color: #0c5460;
}

.status-closed[b-1q136y6lpn] {
    background-color: #fff3cd;
    color: #856404;
}

.btn-group-sm .btn[b-1q136y6lpn] {
    padding: 0.25rem 0.5rem;
}
/* /Components/Pages/JoinSession.razor.rz.scp.css */
/*
    The colour swatch is a div with an inline background colour, and the real <input type="color">
    sits inside it at opacity: 0. Two things were wrong with that.

    A transparent element is still focusable, so the control was in the tab order with nothing
    visible to show it had focus - WCAG 2.4.7 (#292). :focus-within puts the ring on the visible
    swatch rather than the invisible input, drawn with an outline and an offset so it reads against
    any swatch colour, including one matching the page background.

    And the swatch had no styling at all, while the hint beside it reads "Click the circle to choose
    a color". Instructions that name a shape the page does not draw are their own small failure, so
    the swatch is now the circle the copy has always promised.
*/
.color-preview[b-65zmlu0mri] {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.color-preview:focus-within[b-65zmlu0mri] {
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
}

/* The input is rendered by InputText, so it carries that component's scope rather than this one's. */
.color-preview[b-65zmlu0mri]  input {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
}

/* Windows High Contrast Mode discards author colours, so the ring must be system-drawn there. */
@media (forced-colors: active) {
    .color-preview:focus-within[b-65zmlu0mri] {
        outline-color: Highlight;
    }
}
/* /Components/Pages/Members/MembersNavMenu.razor.rz.scp.css */
.nav .nav-link[b-ru17o52qzd] {
    white-space: nowrap;
    margin-bottom: 0.25rem;
}
/* /Components/Pages/Members/MembersSessions.razor.rz.scp.css */
.stats-card[b-hc85z5o7ry] {
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.2s ease-in-out;
}

    .stats-card:hover[b-hc85z5o7ry] {
        transform: translateY(-2px);
    }

.stats-icon[b-hc85z5o7ry] {
    font-size: 2rem;
    margin-bottom: 1rem;
    float: right;
    color: inherit;
}

.stats-number[b-hc85z5o7ry] {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0.5rem;
    color: #fff;
}

.stats-label[b-hc85z5o7ry] {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
    color: #fff;
}

.session-code[b-hc85z5o7ry] {
    font-family: monospace;
    font-weight: bold;
    font-size: 1.1rem;
}

.session-date[b-hc85z5o7ry] {
    line-height: 1.2;
}

.status-badge[b-hc85z5o7ry] {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-active[b-hc85z5o7ry] {
    background-color: #d1ecf1;
    color: #0c5460;
}

.status-closed[b-hc85z5o7ry] {
    background-color: #fff3cd;
    color: #856404;
}

.btn-group-sm .btn[b-hc85z5o7ry] {
    padding: 0.25rem 0.5rem;
}
/* /Components/Pages/Members/MembersTravelStats.razor.rz.scp.css */
/* The map's own height. Leaflet needs a measurable container before it will draw anything, and a
   div with no content has none - the symptom is a single grey tile rather than an error. (#377) */
.travel-map[b-1wqy88x3m3] {
    height: 420px;
    width: 100%;
    border-radius: 0 0 20px 20px;
}

@media (max-width: 768px) {
    .travel-map[b-1wqy88x3m3] {
        height: 320px;
    }
}

/* Leaflet renders popup content outside this component's markup, so ::deep is what reaches it. */
[b-1wqy88x3m3] .travel-map-popup {
    min-width: 160px;
}

[b-1wqy88x3m3] .travel-map-note {
    margin-top: 0.35rem;
    font-style: italic;
}
/* /Components/Pages/Members/SessionInvite.razor.rz.scp.css */
/*
    The code is the point of this screen. It gets read off a projector, a shared screen or a phone
    held up across a room, so it is sized in vw with a floor and a ceiling rather than at a fixed
    rem: a laptop driving a large display and a phone in someone's hand are the same page.

    letter-spacing matters more than size here — eight characters with no word shape are read one
    glyph at a time, and a tabular font stops 8/B and 2/Z collapsing into each other at distance.
*/
.session-invite-code[b-gscs3v3075] {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;

    /* The trailing letter-space would otherwise push the string visibly off centre. */
    text-indent: 0.12em;

    /* Never wrap. A code broken across two lines reads as two codes. */
    white-space: nowrap;
    overflow-x: auto;

    /*
        Both axes are stated, deliberately. Per CSS Overflow, an axis left `visible` beside one that
        is `auto` computes to `auto` as well - so `overflow-x: auto` on its own silently made this
        scrollable vertically too, and nobody wrote that.

        It only showed because `line-height: 1.1` is shorter than the glyph box the font asks for:
        at 72px that is a 79px content box for an 84px glyph box, and 2px of overflow was enough for
        Chrome to draw a vertical scrollbar and reserve 15px for it. That 15px came out of the
        horizontal space `overflow-x: auto` exists to protect, and shifted the code off centre
        against the QR code beneath it - on the one screen whose whole job is showing eight
        characters cleanly to a room.

        `hidden` rather than a taller line-height, which also fixes it but changes the vertical
        rhythm against the QR code. Safe because the 2px clipped is empty font padding rather than
        glyph: measured on production, the ink of an eight-character code sits 16.6px to 64.6px
        inside the 79px content box, so there is over 14px of clearance at each end. (#374)
    */
    overflow-y: hidden;
}
/* /Components/Pages/Session.razor.rz.scp.css */
/* Animation for panel transitions */
@keyframes slideInRight-b-g8t6q16jmq {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slideInUp-b-g8t6q16jmq {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Expandable/collapsable content.
   nth-child counts every sibling, and the panel header div is child 1, so the first participant
   row is child 2 and "show the first three participants" means hiding from child 5. This was
   n+4, which hid from the SECOND participant and made the razor's hiddenCount arithmetic - which
   assumes three visible - overstate what was shown and undercount "Show N more" by one (#320).
   The razor computes visibleCount from the same three-visible assumption; change one, change
   both. */
.participants-list.collapsed .participant-item:nth-child(n+5):not(.current-user)[b-g8t6q16jmq] {
    display: none;
}
.participants-list.collapsed .participant-item.current-user[b-g8t6q16jmq] {
    display: flex !important;
}
/* Chat panel - bottom-left, clearing the host controls (bottom-right), the participants panel
   (top-right) and the map controls (top-left). The same floating chrome as the participants
   panel, duplicated in name rather than shared, because the participants selectors are keyed to
   .participants-list.floating-panel and a shared class is how #320's collapse rules ended up
   defined twice and disagreeing. */
.chat-panel[b-g8t6q16jmq] {
    position: absolute;
    bottom: 30px;
    left: 30px;
    width: 320px;
    max-width: calc(100vw - 60px);
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15);
    border: 1px solid rgba(79, 70, 229, 0.1);
    z-index: 1000;
    animation: slideInUp-b-g8t6q16jmq 0.3s ease-out;
}

.chat-messages[b-g8t6q16jmq] {
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-message[b-g8t6q16jmq] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.chat-initials[b-g8t6q16jmq] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.chat-body[b-g8t6q16jmq] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.chat-sender[b-g8t6q16jmq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
}

.chat-text[b-g8t6q16jmq] {
    font-size: 0.9rem;
    color: #1f2937;
    /* anywhere so a very long token cannot widen the panel past the map edge. */
    overflow-wrap: anywhere;
}

.chat-input-row[b-g8t6q16jmq] {
    display: flex;
    gap: 8px;
}

.chat-unread-badge[b-g8t6q16jmq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .chat-panel[b-g8t6q16jmq] {
        left: 20px;
        bottom: 20px;
        width: min(320px, calc(100vw - 40px));
    }
}

@media (prefers-color-scheme: dark) {
    .chat-panel[b-g8t6q16jmq] {
        background: rgba(30, 30, 30, 0.98);
        border-color: rgba(255,255,255,0.1);
    }
    .chat-sender[b-g8t6q16jmq] {
        color: #9ca3af;
    }
    .chat-text[b-g8t6q16jmq] {
        color: #e5e7eb;
    }
    /* The same near-black-on-dark failure .confirm-body .text-muted needed !important to escape:
       an unscoped global `p` colour beats inheriting from the panel. */
    .chat-panel .text-muted[b-g8t6q16jmq] {
        color: #adb5bd !important;
    }
    .chat-panel .form-control[b-g8t6q16jmq] {
        background: rgba(0, 0, 0, 0.6);
        border-color: rgba(255,255,255,0.2);
        color: #e5e7eb;
    }
    .chat-panel .form-control[b-g8t6q16jmq]::placeholder {
        color: #6b7280;
    }
}

/* Session status alert overlay - floats over the map without affecting map height */
.session-status-alert[b-g8t6q16jmq] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    margin: 0;
    border-radius: 0;
}
/* Map controls overlay */
.map-controls[b-g8t6q16jmq] {
    position: absolute;
    top: 80px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}
/* Host controls overlay */
.host-controls[b-g8t6q16jmq] {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border: 1px solid rgba(220, 38, 38, 0.2);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.host-controls-label[b-g8t6q16jmq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #dc2626;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.host-controls-buttons[b-g8t6q16jmq] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.host-controls-error[b-g8t6q16jmq] {
    font-size: 0.75rem;
    color: #dc2626;
}
    .instructions-content h4[b-g8t6q16jmq] {
        color: #1f2937;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e5e7eb;
    }
    .shortcuts-grid kbd[b-g8t6q16jmq] {
        border: 1px solid #d1d5db;
        border-radius: 4px;
        padding: 4px 8px;
        font-size: 0.75rem;
        font-weight: 600;
        min-width: 30px;
        text-align: center;
    }
.btn-outline-secondary[b-g8t6q16jmq] {
    color: #6b7280;
    border: 2px solid #d1d5db;
    background: transparent;
}
.btn-outline-secondary:hover[b-g8t6q16jmq] {
    color: #374151;
    background: rgba(107, 114, 128, 0.1);
    border-color: #9ca3af;
    transform: translateY(-2px);
}
.btn-primary[b-g8t6q16jmq] {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
}
.btn-primary:hover[b-g8t6q16jmq] {
    background: linear-gradient(135deg, #3730a3 0%, #6D28D9 100%);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.5);
    transform: translateY(-2px);
}
/* Modal animations */
@keyframes modalFadeIn-b-g8t6q16jmq {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes modalSlideIn-b-g8t6q16jmq {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* Mobile responsiveness for note editor modal */
@media (max-width: 768px) {
    .note-editor-content[b-g8t6q16jmq] {
        width: 95%;
        margin: 1rem;
        max-height: 90vh;
    }
    .note-editor-header[b-g8t6q16jmq] {
        padding: 1.25rem 1.5rem;
    }
    .note-editor-header h5[b-g8t6q16jmq] {
        font-size: 1.1rem;
    }
    .note-editor-body[b-g8t6q16jmq] {
        padding: 1.5rem;
    }
    .note-editor-body textarea[b-g8t6q16jmq] {
        font-size: 16px; /* Prevent zoom on iOS */
        min-height: 100px;
    }
    .note-editor-footer[b-g8t6q16jmq] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    .note-editor-actions[b-g8t6q16jmq] {
        justify-content: flex-end;
        flex-direction: row;
    }
    .note-editor-actions .btn[b-g8t6q16jmq] {
        flex: 1;
        text-align: center;
    }
}
/* Focus styles for accessibility */
.note-editor-modal :focus-visible[b-g8t6q16jmq] {
    outline: 2px solid #4F46E5;
    outline-offset: 2px;
}
/* Dark mode considerations (if implemented) */
@media (prefers-color-scheme: dark) {
    .control-item[b-g8t6q16jmq] {
        background: rgba(0,0,0,0.8);
        border-color: rgba(255,255,255,0.1);
    }
    .session-tips[b-g8t6q16jmq] {
        background: rgba(79, 70, 229, 0.1);
    }
    .keyboard-shortcuts[b-g8t6q16jmq] {
        background: rgba(79, 70, 229, 0.15);
    }
    .shortcuts-grid kbd[b-g8t6q16jmq] {
        background: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.2);
        color: #e5e7eb;
    }
    .note-editor-content[b-g8t6q16jmq] {
        background: rgba(0, 0, 0, 0.95);
        border-color: rgba(255, 255, 255, 0.1);
    }
    .note-editor-header[b-g8t6q16jmq] {
        background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
    .note-editor-header h5[b-g8t6q16jmq] {
        color: #c4b5fd;
    }
    .note-editor-body textarea[b-g8t6q16jmq] {
        background: rgba(0, 0, 0, 0.8);
        border-color: rgba(255, 255, 255, 0.2);
        color: #e5e7eb;
    }
    .note-editor-body textarea:focus[b-g8t6q16jmq] {
        border-color: #4F46E5;
        background: rgba(0, 0, 0, 0.9);
    }
    .note-editor-body textarea[b-g8t6q16jmq]::placeholder {
        color: #6b7280;
    }
    .note-editor-footer[b-g8t6q16jmq] {
        border-top-color: rgba(255, 255, 255, 0.1);
    }
    .btn-outline-secondary[b-g8t6q16jmq] {
        color: #9ca3af;
        border-color: #6b7280;
    }
    .btn-outline-secondary:hover[b-g8t6q16jmq] {
        color: #e5e7eb;
        background: rgba(107, 114, 128, 0.2);
        border-color: #9ca3af;
    }
}
@keyframes shake-b-g8t6q16jmq {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}
@keyframes contextMenuSlideIn-b-g8t6q16jmq {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
@keyframes cursorPulse-b-g8t6q16jmq {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}
/* Participant context menu */
.participant-context-menu[b-g8t6q16jmq] {
    position: fixed;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.1);
    z-index: 3000;
    overflow: hidden;
    min-width: 180px;
    animation: contextMenuSlideIn-b-g8t6q16jmq 0.2s ease-out;
}
.context-menu-backdrop[b-g8t6q16jmq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2999;
}
/* Participant confirmation dialog */
.participant-confirm-overlay[b-g8t6q16jmq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn-b-g8t6q16jmq 0.2s ease-out;
}
.participant-confirm-dialog[b-g8t6q16jmq] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    max-width: 360px;
    width: 90%;
    overflow: hidden;
    animation: modalSlideIn-b-g8t6q16jmq 0.2s ease-out;
}
.confirm-header[b-g8t6q16jmq] {
    padding: 16px 20px;
    font-weight: 600;
    font-size: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
}
.confirm-body[b-g8t6q16jmq] {
    padding: 16px 20px;
    font-size: 0.9rem;
    color: #374151;
}
    .confirm-body p:first-child[b-g8t6q16jmq] {
        margin-bottom: 8px;
    }
.confirm-footer[b-g8t6q16jmq] {
    padding: 12px 20px;
    border-top: 1px solid rgba(0,0,0,0.08);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
@media (prefers-color-scheme: dark) {
    .participant-context-menu[b-g8t6q16jmq] {
        background: rgba(30, 30, 30, 0.98);
        border-color: rgba(255,255,255,0.1);
    }
    .participant-confirm-dialog[b-g8t6q16jmq] {
        background: #1e1e1e;
    }
    .confirm-header[b-g8t6q16jmq] {
        border-bottom-color: rgba(255,255,255,0.1);
    }
    .confirm-body[b-g8t6q16jmq] {
        color: #e5e7eb;
    }
    /*
       Bootstrap's .text-muted is tuned for light backgrounds: it computes to
       rgba(33, 37, 41, 0.75), which is near-black. The rule above recolours the body text for the
       dark dialog but does nothing for .text-muted, so the small print rendered near-black on the
       #1e1e1e dialog — around 1:1 contrast, and effectively invisible.

       It affects both confirmations. On "Remove Participant" the lost line is "this will remove all
       their tags"; on "Finish Session" it is the line saying nothing is lost and that the action
       cannot be undone. In each case the hidden sentence is the one describing the consequence.

       Scoped to .confirm-body so it cannot leak into the rest of the page.
    */
    .confirm-body .text-muted[b-g8t6q16jmq] {
        color: #adb5bd !important;
    }
    /*
       The title and the question line, which the rule above could never have reached — and neither
       is a .text-muted problem, which is why the first fix looked complete and was not. Measured in
       the browser against the rendered #1e1e1e: title 1.62:1, question 2.21:1, against a 4.5:1 AA
       requirement. The title is the worse of the two and is effectively invisible.

       They fail for different reasons, and the difference decides the selectors.

       The title has no colour rule of its own ANYWHERE. .confirm-header sets padding, weight and a
       border; the dark block recolours only that border. So it inherits the app default, and
       global.css has no @media (prefers-color-scheme) block at all — every colour it defines is a
       light-mode colour applied unconditionally.

       The question line is not inheriting at all. global.css:424 sets `p, .body-text { color:
       #4b5563 }`, unscoped and outside any media query, and a rule targeting the element beats
       inheriting from an ancestor however specific that ancestor's rule is. That is why
       `.confirm-body { color: #e5e7eb }` above recolours the container while the paragraph inside
       it stays a light-mode grey, and why the fix has to name the paragraph rather than the box.

       Both dialogs on this page share the markup, so both are fixed by these two rules. The muted
       small print keeps #adb5bd: `.confirm-body .text-muted` is both more specific and !important.
    */
    .confirm-header[b-g8t6q16jmq] {
        color: #f8f9fa;
    }
    .confirm-body p[b-g8t6q16jmq] {
        color: #e5e7eb;
    }
    .confirm-footer[b-g8t6q16jmq] {
        border-top-color: rgba(255,255,255,0.1);
    }
}
/* /Components/QrCode.razor.rz.scp.css */
/*
    The generated <svg> arrives as raw markup, so it carries no scope attribute of its own and
    cannot be selected directly from here. ::deep compiles to `.qr-code[b-xxxxxxxxxx] svg`, which
    does match it, because scoped CSS stamps the attribute on the wrapper this component renders.

    Width comes from the inline style the component sets; this only makes the SVG fill it and stay
    square. Without it the SVG renders at the replaced-element default of 300x150.
*/
.qr-code[b-5pnbzbl6zo]  svg {
    display: block;
    width: 100%;
    height: auto;
}