@import '_content/BrandedMark.Components.Browser/BrandedMark.Components.Browser.uizy7dkbwa.bundle.scp.css';
@import '_content/BrandedMark.Components.Experience.Runtime/BrandedMark.Components.Experience.Runtime.bcor4k102w.bundle.scp.css';

/* /Components/RecallScanGate.razor.rz.scp.css */
/* Recall scan gate — a safety surface. Severity colours are theme-independent (each card sets
   --recall-accent inline); this sheet owns the two card treatments, layout, focus, and motion.

   Two deliberate registers:
   - calm  (default): quiet white surface, dark text, severity carried by a 4px accent rail,
     the eyebrow colour, and the primary button. Sentence case throughout — a safety notice
     should read with authority, not shout.
   - alarm (outstanding stop-use / critical only): the full severity-colour slab with white
     text. These recalls withhold the experience and MUST be unmissable. */

.recall-scan-gate[b-ea1ctz7m4n] {
    padding: 12px 16px;
}

/* A single, still-outstanding stop-use recall dominates the viewport (nothing else renders). */
.recall-scan-gate--block[b-ea1ctz7m4n] {
    padding: 24px 16px;
    min-height: 60vh;
}

/* A non-blocking recall (CorrectiveAction / SafetyNotice / Advisory) leaves the experience visible
   below, so pin the banner to the top while the customer browses. The themed background keeps
   scrolling content from showing through the gate's padding once it's stuck. */
.recall-scan-gate--sticky[b-ea1ctz7m4n] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--mud-palette-background, #fff);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.recall-stack[b-ea1ctz7m4n] {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Shared calm surface (roll-up, calm cards, handled rows) ─────── */
.recall-rollup[b-ea1ctz7m4n],
.recall-card--calm[b-ea1ctz7m4n],
.recall-row[b-ea1ctz7m4n] {
    background: #fff;
    color: #22292f;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--recall-accent, #546e7a);
    border-radius: 12px;
}

/* ── Roll-up summary ─────────────────────────────────────────────── */
.recall-rollup[b-ea1ctz7m4n] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.recall-rollup__icon[b-ea1ctz7m4n] {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--recall-accent, #546e7a);
}

.recall-rollup__count[b-ea1ctz7m4n] {
    font-size: 14px;
    font-weight: 700;
}

.recall-rollup__summary[b-ea1ctz7m4n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 13px;
}

.recall-pill[b-ea1ctz7m4n] {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    padding: 2px 10px;
    font-weight: 600;
    white-space: nowrap;
}

.recall-rollup__handled[b-ea1ctz7m4n] {
    opacity: 0.65;
}

/* ── Cards ───────────────────────────────────────────────────────── */
.recall-card[b-ea1ctz7m4n] {
    border-radius: 12px;
    overflow: hidden;
}

.recall-card--alarm[b-ea1ctz7m4n] {
    background: var(--recall-accent, #b00020);
    color: #fff;
}

.recall-card__body[b-ea1ctz7m4n] {
    padding: 14px 16px;
}

.recall-card__body--big[b-ea1ctz7m4n] {
    padding: 20px;
}

.recall-card__body--row[b-ea1ctz7m4n] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.recall-card__icon[b-ea1ctz7m4n] {
    flex: 0 0 auto;
    display: inline-flex;
}

.recall-card--calm .recall-card__icon[b-ea1ctz7m4n] {
    color: var(--recall-accent, #546e7a);
}

.recall-eyebrow[b-ea1ctz7m4n] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1px;
}

.recall-card--calm .recall-eyebrow[b-ea1ctz7m4n] {
    color: var(--recall-accent, #546e7a);
}

.recall-card--alarm .recall-eyebrow[b-ea1ctz7m4n] {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.6px;
    opacity: 0.92;
}

.recall-ref[b-ea1ctz7m4n] {
    opacity: 0.75;
    font-weight: 500;
}

/* Tiny provenance line at the card foot — present but never competing with the message. */
.recall-refline[b-ea1ctz7m4n] {
    margin-top: 12px;
    font-size: 11px;
    opacity: 0.55;
    word-break: break-all;
}

.recall-title[b-ea1ctz7m4n] {
    margin: 10px 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.recall-title--big[b-ea1ctz7m4n] {
    font-size: 21px;
}

.recall-desc[b-ea1ctz7m4n] {
    margin: 0 0 8px;
    line-height: 1.5;
}

.recall-risk[b-ea1ctz7m4n] {
    margin: 0;
    line-height: 1.5;
}

.recall-card--calm .recall-risk[b-ea1ctz7m4n],
.recall-card--calm .recall-desc[b-ea1ctz7m4n] {
    color: rgba(34, 41, 47, 0.85);
    font-size: 14px;
}

.recall-todo[b-ea1ctz7m4n] {
    border-radius: 8px;
    padding: 12px 14px;
    margin: 12px 0 0;
    line-height: 1.5;
}

.recall-card--calm .recall-todo[b-ea1ctz7m4n],
.recall-row .recall-todo[b-ea1ctz7m4n] {
    background: rgba(0, 0, 0, 0.045);
    font-size: 14px;
}

.recall-card--alarm .recall-todo[b-ea1ctz7m4n] {
    background: rgba(255, 255, 255, 0.12);
}

.recall-todo__label[b-ea1ctz7m4n] {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 4px;
}

.recall-card--calm .recall-todo__label[b-ea1ctz7m4n],
.recall-row .recall-todo__label[b-ea1ctz7m4n] {
    color: var(--recall-accent, #546e7a);
}

.recall-resolved__text[b-ea1ctz7m4n] {
    flex: 1;
}

.recall-resolved__title[b-ea1ctz7m4n] {
    font-weight: 600;
    margin-top: 2px;
}

.recall-resolved__desc[b-ea1ctz7m4n] {
    opacity: 0.8;
    font-size: 14px;
    margin-top: 2px;
}

/* ── Actions ─────────────────────────────────────────────────────── */
.recall-actions[b-ea1ctz7m4n] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.recall-btn[b-ea1ctz7m4n] {
    font: inherit;
    font-weight: 600;
    border: 0;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: filter 0.12s ease, background-color 0.12s ease;
}

.recall-card--calm .recall-btn--primary[b-ea1ctz7m4n] {
    background: var(--recall-accent, #546e7a);
    color: #fff;
}

.recall-card--calm .recall-btn--ghost[b-ea1ctz7m4n] {
    background: transparent;
    color: var(--recall-accent, #546e7a);
    border: 1px solid var(--recall-accent, #546e7a);
}

.recall-card--alarm .recall-btn--primary[b-ea1ctz7m4n] {
    background: #fff;
    color: #111;
}

.recall-card--alarm .recall-btn--ghost[b-ea1ctz7m4n] {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.recall-btn--primary:hover:not(:disabled)[b-ea1ctz7m4n] {
    filter: brightness(0.92);
}

.recall-card--calm .recall-btn--ghost:hover:not(:disabled)[b-ea1ctz7m4n] {
    background: rgba(0, 0, 0, 0.05);
}

.recall-card--alarm .recall-btn--ghost:hover:not(:disabled)[b-ea1ctz7m4n] {
    background: rgba(255, 255, 255, 0.14);
}

.recall-btn:disabled[b-ea1ctz7m4n] {
    opacity: 0.7;
    cursor: default;
}

.recall-chip[b-ea1ctz7m4n] {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    align-self: center;
}

.recall-card--calm .recall-chip[b-ea1ctz7m4n] {
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
}

.recall-card--alarm .recall-chip[b-ea1ctz7m4n] {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.recall-chip--link[b-ea1ctz7m4n] {
    text-decoration: underline;
    cursor: pointer;
}

.recall-note[b-ea1ctz7m4n] {
    opacity: 0.75;
    font-size: 13px;
    align-self: center;
}

.recall-card--alarm .recall-note[b-ea1ctz7m4n] {
    color: #fff;
    opacity: 0.85;
}

/* ── Handled rows (acknowledged / resolved) — calm surface, severity kept on the edge ── */
.recall-handled[b-ea1ctz7m4n] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recall-handled__label[b-ea1ctz7m4n] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    opacity: 0.55;
    margin: 6px 2px 0;
}

.recall-row[b-ea1ctz7m4n] {
    border-radius: 8px;
    overflow: hidden;
}

.recall-row__toggle[b-ea1ctz7m4n] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.recall-row__title[b-ea1ctz7m4n] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.recall-row__severity[b-ea1ctz7m4n] {
    font-size: 12px;
    font-weight: 600;
    color: var(--recall-accent, #546e7a);
}

.recall-row__name[b-ea1ctz7m4n] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recall-row__state[b-ea1ctz7m4n] {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.6;
    flex: 0 0 auto;
}

.recall-row__chevron[b-ea1ctz7m4n] {
    flex: 0 0 auto;
    display: inline-flex;
    opacity: 0.5;
    transition: transform 0.15s ease;
}

.recall-row__chevron--open[b-ea1ctz7m4n] {
    transform: rotate(180deg);
}

.recall-row__body[b-ea1ctz7m4n] {
    padding: 0 14px 12px 14px;
    line-height: 1.5;
    font-size: 14px;
    color: rgba(34, 41, 47, 0.85);
}

.recall-row__body p[b-ea1ctz7m4n] {
    margin: 0 0 8px;
}

.recall-row__body .recall-todo[b-ea1ctz7m4n] {
    margin: 0 0 8px;
}

.recall-row__link[b-ea1ctz7m4n] {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
    font-size: 13px;
}

/* ── Keyboard focus ───────────────────────────────────────────────── */
.recall-card--calm .recall-btn:focus-visible[b-ea1ctz7m4n],
.recall-card--calm .recall-chip--link:focus-visible[b-ea1ctz7m4n],
.recall-row__link:focus-visible[b-ea1ctz7m4n] {
    outline: 3px solid var(--recall-accent, #546e7a);
    outline-offset: 2px;
}

.recall-card--alarm .recall-btn:focus-visible[b-ea1ctz7m4n],
.recall-card--alarm .recall-chip--link:focus-visible[b-ea1ctz7m4n] {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.recall-row__toggle:focus-visible[b-ea1ctz7m4n] {
    outline: 3px solid var(--recall-accent, #546e7a);
    outline-offset: -3px;
}

@media (max-width: 600px) {
    .recall-card__body--big[b-ea1ctz7m4n] {
        padding: 16px;
    }

    .recall-title--big[b-ea1ctz7m4n] {
        font-size: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .recall-btn[b-ea1ctz7m4n],
    .recall-row__chevron[b-ea1ctz7m4n] {
        transition: none;
    }
}
/* /Layout/ChatOverlayHost.razor.rz.scp.css */
/*
    The chat sheet's chrome. This was inline styles — a `style` attribute on every element plus a
    GetChatSheetStyle() that concatenated three strings in C# — which is why the display states are
    modifier classes here rather than a computed string: the sheet has exactly three, and a class per
    state says so where a concatenation did not.

    The `.chat-sheet-overlay` class was already on the root element and was styling nothing: the only
    other rule for it lives in ExperienceRenderer.razor.css, which is scoped to THAT component's
    markup. Everything the sheet looked like came from the inline string.
*/

.chat-sheet-overlay[b-9o78mkqbcy] {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    background: var(--mud-palette-surface);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
    z-index: 800; /* Below ActionSheet (900+), above page content. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
}

/*
    Dismissed: keep the component alive in the DOM but invisible, so AiChatRuntime keeps its SignalR
    connection and conversation history. visibility:hidden rather than off-screen positioning, which
    would extend the document's scroll height.
*/
.chat-sheet-overlay.is-dismissed[b-9o78mkqbcy] {
    bottom: 0;
    left: 0;
    transform: none;
    border: none; /* a 0x0 box with a border is still 2px of document */
    box-shadow: none;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
}

/*
    Expanded (full-screen): anchored to the TOP, not the bottom. On iOS Safari a bottom-anchored
    100vh/dvh sheet is taller than the visible viewport and its top — the header with the
    collapse/close buttons — is pushed up behind the browser chrome and clipped. top:0 keeps the
    header on-screen; 100dvh fills down to the bottom of the visible area (paired with the body
    scroll-lock so the chrome stays stable, and safe-area padding on the input row).

    dvh rather than vh throughout: on mobile browsers vh resolves to the full layout viewport, as if
    the address bar were hidden, so a vh-sized sheet is taller than what the user can see. dvh tracks
    the actual visible viewport as the browser chrome shows and hides.
*/
.chat-sheet-overlay.is-expanded[b-9o78mkqbcy] {
    top: 0;
    height: 100dvh;
    border-top: none;
}

/*
    Collapsed: a bottom half-sheet. Height is a floored 50% rather than a raw 50dvh snap. On a short
    viewport (e.g. iPhone SE) 50dvh isn't tall enough to fit the header + message list + suggested
    questions + input row, so the input was clipped below the fold with nothing to scroll it into
    view. Floor at 460px so the full chat chrome always fits, grow to 50dvh on taller phones, and cap
    at 88dvh so a strip of the page behind stays visible — it still reads as a half-sheet, not a
    fullscreen. Pairs with the message list's min-height:0 so the list is the sole scroll region and
    the input row is never pushed off-screen.
*/
.chat-sheet-overlay.is-collapsed[b-9o78mkqbcy] {
    bottom: 0;
    height: min(88dvh, max(50dvh, 460px));
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    transition: height 0.3s ease;
}

/*
    Always visible so the user can collapse/expand/close. touch-action:none stops a drag on this
    non-scrolling strip from scrolling the page behind a full-screen sheet.
*/
.chat-sheet-header[b-9o78mkqbcy] {
    flex-shrink: 0;
    touch-action: none;
}

.chat-sheet-titlebar[b-9o78mkqbcy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.chat-sheet-title[b-9o78mkqbcy] {
    font-weight: 600;
    font-size: 16px;
}

.chat-sheet-actions[b-9o78mkqbcy] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-sheet-action[b-9o78mkqbcy] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--mud-palette-text-secondary);
}

.chat-sheet-body[b-9o78mkqbcy] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* /Layout/GroupLayout.razor.rz.scp.css */
/* Layout only — colours come from the MudBlazor theme palette and the base-theme.css
   bm-* utilities. The .gl-state / .gl-notfound classes sit on plain elements and match
   the scope attribute directly; classes on the MudBlazor children need ::deep. */

.gl-state[b-u4gnza2928] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

/* Replaces MudStack Spacing="2" between the icon, title and description. */
.gl-notfound[b-u4gnza2928] {
    gap: 8px;
}

.gl-notfound[b-u4gnza2928]  .gl-notfound-icon {
    font-size: 56px;
}

.gl-notfound[b-u4gnza2928]  .gl-notfound-desc {
    max-width: 320px;
}
/* /Pages/Account/Orders/RaiseOrderCasePage.razor.rz.scp.css */
.raise-case-column[b-e9sm8ntyil] {
    max-width: 600px;
    margin: 0 auto;
}

.about-card-tile[b-e9sm8ntyil] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--mud-palette-info-hover);
    color: var(--mud-palette-info);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* /Pages/Account/Products/Components/ProductListItemComponent.razor.rz.scp.css */
.product-list-item[b-p1n7zamzr0] {
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    overflow: hidden;
    border-radius: var(--mud-default-borderradius);
}

.product-list-item:hover[b-p1n7zamzr0] {
    transform: translateY(-1px);
    box-shadow: var(--mud-elevation-3);
}

.product-list-item:active[b-p1n7zamzr0] {
    transform: translateY(0);
}

.product-card-inner[b-p1n7zamzr0] {
    display: flex;
    flex-direction: row;
}

.product-accent[b-p1n7zamzr0] {
    width: 4px;
    flex-shrink: 0;
    border-radius: 4px 0 0 4px;
    transition: width 0.2s ease;
}

.product-list-item:hover .product-accent[b-p1n7zamzr0] {
    width: 5px;
}

.product-card-body[b-p1n7zamzr0] {
    flex: 1;
    padding: 12px 16px;
    min-width: 0;
}

.product-serial[b-p1n7zamzr0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
    margin-top: 4px;
}

.product-serial[b-p1n7zamzr0]  .product-serial-icon {
    font-size: 14px;
}

.product-serial[b-p1n7zamzr0]  .product-serial-text {
    letter-spacing: 0.5px;
}

.product-list-item[b-p1n7zamzr0]  .product-date-text {
    white-space: nowrap;
    flex-shrink: 0;
}

.product-list-item[b-p1n7zamzr0]  .product-chevron {
    transition: transform 0.15s ease;
}

.product-list-item:hover[b-p1n7zamzr0]  .product-chevron {
    transform: translateX(2px);
}
/* /Pages/Account/Products/ProductDetailPage.razor.rz.scp.css */
.product-hero-image[b-clbjnqopfm] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 16px;
    background: linear-gradient(135deg, var(--mud-palette-background-gray) 0%, var(--mud-palette-surface) 100%);
    min-height: 180px;
    position: relative;
}

.serial-badge[b-clbjnqopfm] {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
}

/* Warranty status banners */
.warranty-banner[b-clbjnqopfm] {
    padding: 10px 14px;
    border-radius: var(--mud-default-borderradius);
}

.warranty-banner-active[b-clbjnqopfm] {
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
    color: var(--mud-palette-success);
}

.warranty-banner-expired[b-clbjnqopfm] {
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
    color: var(--mud-palette-warning);
}

.warranty-banner-none[b-clbjnqopfm] {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

/* Media gallery */
.media-grid[b-clbjnqopfm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.media-item[b-clbjnqopfm] {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
    transition: transform 0.15s ease;
}

.media-item:hover[b-clbjnqopfm] {
    transform: scale(1.03);
}
.serial-badge[b-clbjnqopfm]  .serial-badge-text {
    letter-spacing: 0.5px;
}
/* /Pages/Account/Products/ProductListPage.razor.rz.scp.css */
.product-list-page[b-w10r9j8wkl]  .product-count-chip {
    min-width: 28px;
    justify-content: center;
}

.empty-state-icon[b-w10r9j8wkl] {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mud-palette-background-gray);
}

.empty-state-icon[b-w10r9j8wkl]  .empty-state-icon-glyph {
    font-size: 48px;
}

.product-list-page[b-w10r9j8wkl]  .refresh-spinning {
    animation: product-list-refresh-spin-b-w10r9j8wkl 0.8s linear infinite;
}

@keyframes product-list-refresh-spin-b-w10r9j8wkl {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Pages/Account/Returns/ReturnLabelPage.razor.rz.scp.css */
.return-label-column[b-u6wiguoe16] {
    max-width: 600px;
    margin: 0 auto;
}
/* /Pages/Checkout/CheckoutBillingAddressComponent.razor.rz.scp.css */
/*
    Was an inline <style> block in the .razor, duplicated almost verbatim in
    CheckoutDeliveryAddressComponent and CheckoutContactComponent. Scoped CSS + palette variables
    instead; the .use-same-address margin became MudBlazor's own mb-4, because a class handed to a
    child component's Class= is outside this component's scope and a scoped rule would never match it.
*/

.address-display[b-6084evt6h0] {
    padding: 16px 20px;
    background-color: var(--mud-palette-background-gray);
    border-radius: 12px;
    transition: background 0.2s ease;
}

/*
    --mud-palette-action-default-hover is a translucent overlay (alpha .06), not a colour: setting it
    as `background` would replace the base and leave the row lighter on hover than off it. Layered as
    a background-image over the base colour it darkens in light mode and lightens in dark, which is
    what the token is for.
*/
.address-display:hover[b-6084evt6h0] {
    background-image: linear-gradient(var(--mud-palette-action-default-hover), var(--mud-palette-action-default-hover));
}

/* It is a role="button" now, so it can be tabbed to and must say so. */
.address-display:focus-visible[b-6084evt6h0] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.address-display-text[b-6084evt6h0] {
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    line-height: 1.5;
}

.required-indicator[b-6084evt6h0] {
    color: var(--mud-palette-error);
    margin-left: 4px;
}
/* /Pages/Checkout/CheckoutDeliveryAddressComponent.razor.rz.scp.css */
/*
    Was an inline <style> block in the .razor, duplicated almost verbatim in
    CheckoutBillingAddressComponent and CheckoutContactComponent — so /checkout shipped the same rules
    three times and each copy hard-coded light-mode hex. Scoped CSS + palette variables instead:
    the summary row now follows the tenant's theme.
*/

.address-display[b-757nn9l1by] {
    padding: 16px 20px;
    background-color: var(--mud-palette-background-gray);
    border-radius: 12px;
    transition: background 0.2s ease;
}

/*
    --mud-palette-action-default-hover is a translucent overlay (alpha .06), not a colour: setting it
    as `background` would replace the base and leave the row lighter on hover than off it. Layered as
    a background-image over the base colour it darkens in light mode and lightens in dark, which is
    what the token is for.
*/
.address-display:hover[b-757nn9l1by] {
    background-image: linear-gradient(var(--mud-palette-action-default-hover), var(--mud-palette-action-default-hover));
}

/* It is a role="button" now, so it can be tabbed to and must say so. */
.address-display:focus-visible[b-757nn9l1by] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.address-display-text[b-757nn9l1by] {
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    line-height: 1.5;
}

.required-indicator[b-757nn9l1by] {
    color: var(--mud-palette-error);
    margin-left: 4px;
}
/* /Pages/Groups/GroupActionsBar.razor.rz.scp.css */
/* Group scan actions — layout only; colours come from the MudBlazor palette.

   The pinned mobile bar and the ≥1080 rail are the same idea at two widths, so both
   live here rather than being re-expressed per page.

   Classes on plain elements are matched by the scope attribute directly; classes
   passed to MudBlazor components need ::deep. */

.gab[b-lu7bqfuux2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}

.gab-buttons[b-lu7bqfuux2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The rail card chrome (title + description) only appears on desktop. */
.gab[b-lu7bqfuux2]  .gab-title,
.gab[b-lu7bqfuux2]  .gab-desc {
    display: none;
}

.gab-support-short[b-lu7bqfuux2] {
    display: none;
}

/* ─── < 720px — pinned to the bottom ──────────────────────────────
   Same recipe as StickySubmitBarComponent: sticky (not fixed), so the bar reserves
   its own flow space and the translucent surface + blur does the job of a scroll
   fade. The host sets --bm-sticky-bottom-gap to its own bottom padding so the
   resting position matches the pinned one. */

@media (max-width: 719.98px) {
    .gab[b-lu7bqfuux2] {
        position: sticky;
        bottom: 0;
        z-index: 10;
        gap: 6px;
        margin: 0 calc(-1 * var(--bm-sticky-side-gap, 16px)) calc(-1 * var(--bm-sticky-bottom-gap, 0px));
        padding: 10px var(--bm-sticky-side-gap, 16px) calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--mud-palette-surface); /* fallback for engines without color-mix */
        background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid var(--mud-palette-lines-default);
    }

    .gab-buttons[b-lu7bqfuux2] {
        flex-direction: row;
        gap: 8px;
    }

    .gab-buttons[b-lu7bqfuux2]  .gab-primary {
        flex: 1;
    }

    /* The secondary action takes a fixed narrow slot so the primary keeps the width. */
    .gab-buttons[b-lu7bqfuux2]  .gab-secondary {
        flex: 0 0 104px;
    }

    .gab-support-full[b-lu7bqfuux2] {
        display: none;
    }

    .gab-support-short[b-lu7bqfuux2] {
        display: inline;
    }

    .gab[b-lu7bqfuux2]  .gab-note {
        display: none;
    }
}

/* ─── ≥ 720px — back in the flow, buttons paired ──────────────── */

@media (min-width: 720px) {
    .gab-buttons[b-lu7bqfuux2] {
        flex-direction: row-reverse;
    }

    .gab-buttons[b-lu7bqfuux2]  .mud-button-root {
        flex: 1;
    }
}

/* ─── ≥ 1080px — the action rail ──────────────────────────────── */

@media (min-width: 1080px) {
    .gab[b-lu7bqfuux2] {
        position: sticky;
        top: 16px;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: var(--mud-default-borderradius);
        padding: 16px;
        /* Clears the items column's overline label so the rail top-aligns with the cards. */
        margin-top: 28px;
    }

    .gab-buttons[b-lu7bqfuux2] {
        flex-direction: column;
    }

    .gab[b-lu7bqfuux2]  .gab-title,
    .gab[b-lu7bqfuux2]  .gab-desc {
        display: block;
    }
}
/* /Pages/Groups/GroupRecallSheet.razor.rz.scp.css */
/* Layout only — colors come from MudBlazor theme palette variables and the
   base-theme.css bm-* utilities. */

.grs-body[b-0v24q0cqql] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.grs-eyebrow[b-0v24q0cqql] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.grs-recall[b-0v24q0cqql] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* /Pages/Groups/GroupReportDialog.razor.rz.scp.css */
/* Layout only — colors come from MudBlazor theme palette variables and the
   base-theme.css bm-* utilities. Framing (sheet vs page vs centered dialog)
   is the chrome's job (bm-sheet--page); this file owns the step content.
   Width reflow happens at the design system's single 720 boundary: scope
   choices two-up, reasons two columns, description + photos side by side. */

.grd-body[b-q26t05b88m] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ─── Selection cards ─────────────────────────────────────────────
   Left radio-dot indicator; the selected card tints toward primary.
   Classes land on MudPaper, so the selected recipe needs ::deep. */

.grd-radio[b-q26t05b88m] {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 1px;
    border-radius: 999px;
    border: 2px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
}

.grd-radio--on[b-q26t05b88m] {
    border: 6px solid var(--mud-palette-primary);
}

/* Line rows are multi-select, so their marker is a tick rather than a dot. Decorative for the
   same reason .grd-radio is: a real checkbox absorbs the pointer event and dead-spots the row
   it sits inside, so clicking the box does nothing while clicking around it works. */

.grd-check[b-q26t05b88m] {
    box-sizing: border-box;
    position: relative;
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 1px;
    border-radius: 4px;
    border: 2px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
}

.grd-check--on[b-q26t05b88m] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
}

.grd-check--on[b-q26t05b88m]::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 5px;
    height: 9px;
    border: solid var(--mud-palette-primary-text);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.grd-body[b-q26t05b88m]  .grd-card--selected {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

.grd-choice-grid[b-q26t05b88m] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.grd-reasons[b-q26t05b88m] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
}

.grd-detail-grid[b-q26t05b88m] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 720px) {
    .grd-choice-grid[b-q26t05b88m] {
        grid-template-columns: 1fr 1fr;
    }

    .grd-reasons[b-q26t05b88m] {
        grid-template-columns: 1fr 1fr;
    }

    .grd-detail-grid[b-q26t05b88m] {
        grid-template-columns: 1fr 210px;
        align-items: start;
    }
}

/* ─── Per-line detail (serial pick / quantity stepper) ────────────── */

.grd-line-detail[b-q26t05b88m] {
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* The chip grid draws its own divider; inside the report it always sits
   under a head row that already drew one. */
.grd-body[b-q26t05b88m]  .guc-grid {
    border-top: none;
    margin-top: 0;
    padding-top: 8px;
}

.grd-stem[b-q26t05b88m] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* Bulk affordance pills — "All 20", "Enter a range", "Select all 120". */
.grd-bulk[b-q26t05b88m] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.grd-pill[b-q26t05b88m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary-darken);
    font-size: 12.5px;
    font-weight: 600;
}

.grd-pill:hover[b-q26t05b88m] {
    border-color: var(--mud-palette-primary);
}

.grd-pill:focus-visible[b-q26t05b88m] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.grd-range-row[b-q26t05b88m] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 9px;
}

.grd-body[b-q26t05b88m]  .grd-step-btn {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    width: 30px;
    height: 30px;
}

.grd-body[b-q26t05b88m]  .grd-qty {
    min-width: 32px;
    text-align: center;
}

/* Wide enough for a four-digit count plus a short unit adornment, narrow enough that the
   steppers stay on the same row on a phone. */
.grd-body[b-q26t05b88m]  .grd-qty-field {
    max-width: 108px;
}

.grd-body[b-q26t05b88m]  .grd-qty-field input {
    text-align: center;
}

/* ─── Picker step ─────────────────────────────────────────────────── */

/* Phone-only head row (count + stem) — the ≥720 subtitle already carries it.
   Flex lives here, not on d-flex, whose !important would beat the sheet's
   bm-sheet-mobile-only hide. */
.grd-picker-meta[b-q26t05b88m] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Search + bulk pills: stacked on the phone (pills lead, rev 5), one row
   with the search growing from 720px (rev 6). column-reverse keeps the
   phone's pills-above-search order with the search first in the DOM. */
.grd-picker-controls[b-q26t05b88m] {
    display: flex;
    flex-direction: column-reverse;
    gap: 9px;
}

.grd-picker-controls .grd-bulk[b-q26t05b88m] {
    margin-top: 0;
}

@media (min-width: 720px) {
    .grd-picker-controls[b-q26t05b88m] {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .grd-picker-controls[b-q26t05b88m]  .grd-picker-search {
        flex: 1 1 auto;
        min-width: 0;
    }

    .grd-picker-controls .grd-bulk[b-q26t05b88m] {
        flex: none;
        flex-wrap: nowrap;
    }
}

/* Pinned selection summary — count + ranges + Clear, primary-tinted. */
.grd-picker-summary[b-q26t05b88m] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 10px;
    padding: 9px 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

.grd-picker-ranges[b-q26t05b88m] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Reason step ─────────────────────────────────────────────────── */

.grd-sum-row[b-q26t05b88m] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.grd-sum-row + .grd-sum-row[b-q26t05b88m] {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.grd-sum-count[b-q26t05b88m] {
    flex: none;
    white-space: nowrap;
}

/* Verified-destination display (read-only; mobile body — the centered
   dialog states it in the footer note instead). */
.grd-dest[b-q26t05b88m] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.grd-dest-email[b-q26t05b88m] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* /Pages/Groups/GroupScanPage.razor.rz.scp.css */
/* Layout only — colors come from MudBlazor theme palette variables and the
   base-theme.css bm-* utilities.

   Three breakpoint anchors (per the Group Scan design):
   - < 720px  mobile baseline: single column, header + reference share one surface,
              and the two actions leave the scroll to pin to the bottom.
   - ≥ 720px  centred 640px column; the tenant bar spans the viewport and the
              reference row moves onto the page background; the actions return to the
              flow and the two buttons pair up side by side.
   - ≥ 1080px content caps at 1040px: items column + 300px action rail.

   Units themselves render through GroupUnitChipGrid at every breakpoint — the pinned
   bar and the ≥1080 rail are one pattern reflowing, not a mobile special case.

   Classes on plain HTML elements are matched by the scope attribute directly;
   classes passed to MudBlazor components need ::deep. */

.gsp-page[b-xd7akrltgr] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.gsp-inner[b-xd7akrltgr] {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ─── Header surfaces ─────────────────────────────────────────── */

.gsp-topbar[b-xd7akrltgr] {
    background: var(--mud-palette-surface);
}

.gsp-topbar > .gsp-inner[b-xd7akrltgr] {
    padding: 16px 16px 8px;
}

/* Awaiting-data has no reference row, so the bar carries the closing border. */
.gsp-topbar-solo[b-xd7akrltgr] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.gsp-topbar-solo > .gsp-inner[b-xd7akrltgr] {
    padding-bottom: 16px;
}

.gsp-head[b-xd7akrltgr] {
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.gsp-head > .gsp-inner[b-xd7akrltgr] {
    padding: 0 16px 12px;
}

/* Carrier logo/name + tracking number + packages/weight + PO roll-up. */
.gsp-tracking[b-xd7akrltgr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ─── Content ─────────────────────────────────────────────────── */

.gsp-content[b-xd7akrltgr] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gsp-fill[b-xd7akrltgr] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gsp-page[b-xd7akrltgr]  .gsp-awaiting {
    flex: 1;
}

.gsp-body[b-xd7akrltgr] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Read by the pinned action bar below 720px so it rests flush at full scroll. */
    --bm-sticky-bottom-gap: 16px;
}

.gsp-main[b-xd7akrltgr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gsp-lines[b-xd7akrltgr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ─── Lot row ─────────────────────────────────────────────────────
   Unchanged by the rev-5 density work: one row per lot was never the problem. */

.gsp-lot[b-xd7akrltgr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

/* ─── Summary row (lines past the inline unit limit) ──────────── */

.gsp-summary[b-xd7akrltgr] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--mud-palette-lines-default);
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.gsp-summary-main[b-xd7akrltgr] {
    flex: 1;
    min-width: 0;
}

.gsp-summary-head[b-xd7akrltgr] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.gsp-summary-recall[b-xd7akrltgr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 32%, var(--mud-palette-surface));
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface));
    color: var(--mud-palette-warning-darken);
    font-size: 11.5px;
    font-weight: 700;
}

.gsp-page[b-xd7akrltgr]  .gsp-summary-recall-icon {
    font-size: 13px;
}

/* The actions block itself (pinned bar / paired row / rail) lives in
   GroupActionsBar.razor.css — it is shared with the unit screen. */

/* ─── ≥ 720px — centred column, paired buttons ────────────────── */

@media (min-width: 720px) {
    .gsp-topbar[b-xd7akrltgr] {
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    /* The bar spans the viewport; its content caps at the desktop width, not the
       640px reading column. */
    .gsp-topbar > .gsp-inner[b-xd7akrltgr] {
        max-width: 1040px;
        padding: 12px 24px;
    }

    .gsp-head[b-xd7akrltgr] {
        background: transparent;
        border-bottom: none;
    }

    .gsp-head > .gsp-inner[b-xd7akrltgr] {
        padding: 20px 24px 0;
    }

    .gsp-body[b-xd7akrltgr] {
        padding: 16px 24px 24px;
    }
}

/* ─── ≥ 1080px — items column + action rail ───────────────────── */

@media (min-width: 1080px) {
    .gsp-inner[b-xd7akrltgr] {
        max-width: 1040px;
    }

    .gsp-topbar > .gsp-inner[b-xd7akrltgr] {
        padding: 12px 28px;
    }

    .gsp-head > .gsp-inner[b-xd7akrltgr] {
        padding: 22px 28px 0;
    }

    .gsp-body[b-xd7akrltgr] {
        padding: 14px 28px 28px;
    }

    /* The lines column and the GroupActionsBar rail auto-place into the two tracks. */
    .gsp-main[b-xd7akrltgr] {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 20px;
        align-items: start;
    }
}
/* /Pages/Groups/GroupUnitsPage.razor.rz.scp.css */
/* Unit screen — layout only; colours come from the MudBlazor theme palette and the
   base-theme.css bm-* utilities. Mirrors GroupScanPage's column and breakpoints; the
   pinned action bar comes from GroupActionsBar.razor.css.

   Classes on plain elements are matched by the scope attribute directly; classes
   passed to MudBlazor components need ::deep. */

.gup-page[b-hlujdrbswt] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.gup-inner[b-hlujdrbswt] {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    box-sizing: border-box;
}

.gup-topbar[b-hlujdrbswt] {
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.gup-topbar > .gup-inner[b-hlujdrbswt] {
    padding: 8px 8px 8px 4px;
}

.gup-title[b-hlujdrbswt] {
    min-width: 0;
}

.gup-content[b-hlujdrbswt] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gup-body[b-hlujdrbswt] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Read by the pinned action bar below 720px so it rests flush at full scroll. */
    --bm-sticky-bottom-gap: 16px;
}

.gup-lead[b-hlujdrbswt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.gup-section[b-hlujdrbswt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* ─── Needs attention ─────────────────────────────────────────────
   Full rows, not chips: at row scale the RECALL pill reads, and these are the units
   the customer came here to act on. */

.gup-attention[b-hlujdrbswt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gup-attention-row[b-hlujdrbswt] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 32%, var(--mud-palette-surface));
    border-radius: 10px;
    background: var(--mud-palette-surface);
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.gup-attention-row:focus-visible[b-hlujdrbswt] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ─── ≥ 720px ─────────────────────────────────────────────────── */

@media (min-width: 720px) {
    .gup-topbar > .gup-inner[b-hlujdrbswt] {
        max-width: 1040px;
        padding: 8px 20px 8px 12px;
    }

    .gup-body[b-hlujdrbswt] {
        padding: 16px 24px 24px;
    }
}

/* ─── ≥ 1080px ────────────────────────────────────────────────── */

@media (min-width: 1080px) {
    .gup-topbar > .gup-inner[b-hlujdrbswt] {
        padding: 8px 24px 8px 16px;
    }

    .gup-body[b-hlujdrbswt] {
        padding: 14px 28px 28px;
        max-width: 1040px;
    }
}
/* /Shared/Components/AccountPageHeaderComponent.razor.rz.scp.css */
.account-page-header-title[b-6cxro1yjm0] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Shared/Components/IdentityPromptCard.razor.rz.scp.css */
.identity-prompt-card[b-9hd52u62tt] {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 16px;
}

.identity-prompt-accent[b-9hd52u62tt] {
    width: 4px;
    flex-shrink: 0;
    background: var(--mud-palette-primary);
    border-radius: 4px 0 0 4px;
}

.identity-prompt-content[b-9hd52u62tt] {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    flex: 1;
    min-width: 0;
}

.identity-prompt-icon[b-9hd52u62tt] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    margin-top: 1px;
}

.identity-prompt-body[b-9hd52u62tt] {
    flex: 1;
    min-width: 0;
}

.identity-prompt-actions[b-9hd52u62tt] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
}
/* /Shared/Components/JourneyStepperComponent.razor.rz.scp.css */
.journey[b-sci6t7p4tz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.journey-track[b-sci6t7p4tz] {
    display: flex;
    align-items: flex-start;
}

.journey-step[b-sci6t7p4tz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.journey-line[b-sci6t7p4tz] {
    flex: 1 1 auto;
    height: 2px;
    border-radius: 2px;
    margin-top: 14px;
    background: var(--mud-palette-lines-default);
}

.journey-line--done[b-sci6t7p4tz] {
    background: var(--mud-palette-primary);
}

.journey-node[b-sci6t7p4tz] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.journey-node--done[b-sci6t7p4tz] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.journey-node--active[b-sci6t7p4tz] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    box-shadow: 0 0 0 4px var(--mud-palette-primary-hover);
}

.journey-node--paused[b-sci6t7p4tz] {
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    box-shadow: 0 0 0 4px var(--mud-palette-warning-hover);
}

.journey-dot[b-sci6t7p4tz] {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--mud-palette-lines-default);
}

.journey-node[b-sci6t7p4tz]  .journey-node-icon {
    font-size: 17px;
    width: 17px;
    height: 17px;
}

/* Per-node labels only fit on md+; small screens get the centred active caption instead. */
.journey-label[b-sci6t7p4tz] {
    display: none;
    font-size: 11.5px;
    line-height: 1.2;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.journey-label--done[b-sci6t7p4tz] {
    color: var(--mud-palette-text-primary);
}

.journey-label--active[b-sci6t7p4tz] {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

.journey-label--paused[b-sci6t7p4tz] {
    color: var(--mud-palette-warning);
    font-weight: 700;
}

.journey-caption[b-sci6t7p4tz] {
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.journey-caption--paused[b-sci6t7p4tz] {
    color: var(--mud-palette-warning);
}

@media (min-width: 960px) {
    .journey-step[b-sci6t7p4tz] {
        min-width: 84px;
    }

    .journey-label[b-sci6t7p4tz] {
        display: block;
    }

    .journey-caption[b-sci6t7p4tz] {
        display: none;
    }
}
/* /Shared/Components/NothingNeededStripComponent.razor.rz.scp.css */
.nothing-needed-strip[b-yckscnetad] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--mud-palette-background-gray);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.nothing-needed-tile[b-yckscnetad] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nothing-needed-tile[b-yckscnetad]  .nothing-needed-icon {
    font-size: 15px;
    width: 15px;
    height: 15px;
}

.nothing-needed-text[b-yckscnetad] {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}
/* /Shared/Components/StickySubmitBarComponent.razor.rz.scp.css */
/* Kept below TagExperienceUtilityDock (z-index 750) so the floating dock stays reachable.

   --bm-sticky-bottom-gap: hosting containers with bottom padding set this to that padding so
   the bar's resting (fully-scrolled) position is flush with the page bottom — identical to its
   pinned position. Without it the bar detaches in the last pixels of scroll and slides up by
   the padding ("jiggle"). */
.sticky-submit-bar[b-c7k0mxwhzp] {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-bottom: calc(-1 * var(--bm-sticky-bottom-gap, 0px));
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--mud-palette-surface); /* fallback for engines without color-mix */
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--mud-palette-lines-default);
}
/* /Shared/Components/SupportQuestionBubbleComponent.razor.rz.scp.css */
.question-bubble-row[b-2lnq122dga] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.question-bubble-col[b-2lnq122dga] {
    flex: 1;
    min-width: 0;
}

.question-bubble[b-2lnq122dga] {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px 12px 12px 12px;
    padding: 10px 12px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
}

.question-bubble-meta[b-2lnq122dga] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}
/* /Shared/Components/YourTurnCardComponent.razor.rz.scp.css */
.your-turn-card[b-o590gxbc4n] {
    background: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
    box-shadow: var(--mud-elevation-2);
}

.your-turn-header[b-o590gxbc4n] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--mud-palette-primary-hover);
    border-bottom: 1px solid var(--mud-palette-primary-hover);
}

.your-turn-icon-tile[b-o590gxbc4n] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.your-turn-icon-tile[b-o590gxbc4n]  .your-turn-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.your-turn-title[b-o590gxbc4n] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.your-turn-body[b-o590gxbc4n] {
    padding: 16px;
}