/* _content/Quote.UI/Components/Layout/GlobalSearch.razor.rz.scp.css */
/* ===== Global Spotlight search ===== */
.gs-wrap[b-b7gbx3vmox] {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
}

/* ---- The pill field ---- */
.gs-field[b-b7gbx3vmox] {
    position: relative;
    z-index: 1095; /* sit above the click-catching backdrop so the chip ×/clear stay clickable */
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 12px 0 14px;
    background: #f1f5f9;
    border: 1.5px solid transparent;
    border-radius: 12px;
    cursor: text;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.gs-field:hover[b-b7gbx3vmox] { background: rgba(37,99,235,.09); }
.gs-field-active[b-b7gbx3vmox] {
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.gs-field-icon[b-b7gbx3vmox] { color: #94a3b8; font-size: 1rem; flex-shrink: 0; }
.gs-field-active .gs-field-icon[b-b7gbx3vmox] { color: #2563eb; }

.gs-input[b-b7gbx3vmox] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: .9rem;
    color: #0f172a;
    font-family: inherit;
}
.gs-input[b-b7gbx3vmox]::placeholder { color: #94a3b8; }

/* In-field filter chip (e.g. "Invoices ×") */
.gs-scope[b-b7gbx3vmox] {
    display: inline-flex; align-items: center; gap: 5px;
    flex-shrink: 0;
    font-size: .76rem; font-weight: 700;
    padding: 3px 4px 3px 9px;
    border-radius: 8px;
    white-space: nowrap;
}
.gs-scope > i[b-b7gbx3vmox] { font-size: .82rem; }
.gs-scope-x[b-b7gbx3vmox] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px;
    border: none; border-radius: 5px;
    background: rgba(0, 0, 0, .08); color: inherit;
    font-size: .6rem; cursor: pointer; opacity: .8;
}
.gs-scope-x:hover[b-b7gbx3vmox] { opacity: 1; background: rgba(0, 0, 0, .16); }

.gs-kbd[b-b7gbx3vmox] {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 600;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 2px 7px;
    box-shadow: 0 1px 0 #e2e8f0;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.gs-clear[b-b7gbx3vmox] {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: #e2e8f0; color: #475569;
    font-size: .65rem; cursor: pointer;
    transition: background .12s;
}
.gs-clear:hover[b-b7gbx3vmox] { background: #cbd5e1; color: #0f172a; }

.gs-spinner[b-b7gbx3vmox] {
    flex-shrink: 0;
    width: 15px; height: 15px;
    border: 2px solid #cbd5e1;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: gs-spin-b-b7gbx3vmox .6s linear infinite;
}
.gs-spinner-lg[b-b7gbx3vmox] { width: 22px; height: 22px; border-width: 2.5px; }
@keyframes gs-spin-b-b7gbx3vmox { to { transform: rotate(360deg); } }

/* ---- Backdrop + panel ---- */
.gs-backdrop[b-b7gbx3vmox] {
    position: fixed; inset: 0;
    z-index: 1090;
    background: transparent;
}
.gs-panel[b-b7gbx3vmox] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    z-index: 1100;
    background: #fff;
    border: 1px solid #e7ebf0;
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .08);
    overflow: hidden;
    max-height: min(560px, 70vh);
    overflow-y: auto;
    animation: gs-pop-b-b7gbx3vmox .16s cubic-bezier(.16,1,.3,1);
}
@keyframes gs-pop-b-b7gbx3vmox {
    from { opacity: 0; transform: translateY(-6px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Group headers ---- */
.gs-group-head[b-b7gbx3vmox] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px 5px;
    font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #94a3b8;
    position: sticky; top: 0;
    background: linear-gradient(180deg, #fff 70%, transparent);
}
.gs-group-count[b-b7gbx3vmox] {
    background: #f1f5f9; color: #64748b;
    font-size: .62rem; font-weight: 700;
    padding: 1px 7px; border-radius: 999px; letter-spacing: 0;
}
.gs-clear-recent[b-b7gbx3vmox] {
    border: none; background: none; cursor: pointer;
    font-size: .68rem; font-weight: 600; letter-spacing: 0;
    text-transform: none; color: #2563eb;
}
.gs-clear-recent:hover[b-b7gbx3vmox] { text-decoration: underline; }

/* ---- Result rows ---- */
.gs-row[b-b7gbx3vmox] {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 14px;
    margin: 0 6px;
    border-radius: 11px;
    cursor: pointer;
    transition: background .1s;
}
.gs-row-active[b-b7gbx3vmox] { background: #f1f5f9; }
.gs-row-icon[b-b7gbx3vmox] {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.gs-row-body[b-b7gbx3vmox] { flex: 1; min-width: 0; }
.gs-row-title[b-b7gbx3vmox] {
    font-size: .86rem; font-weight: 600; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-row-sub[b-b7gbx3vmox] {
    font-size: .76rem; color: #94a3b8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-row-meta[b-b7gbx3vmox] {
    flex-shrink: 0;
    font-size: .8rem; font-weight: 700; color: #334155;
}
.gs-row-enter[b-b7gbx3vmox] {
    flex-shrink: 0;
    color: #cbd5e1; font-size: .85rem;
    opacity: 0; transition: opacity .12s;
}
.gs-row-active .gs-row-enter[b-b7gbx3vmox] { opacity: 1; }

/* slim "still loading records" row shown under instant page matches */
.gs-loading-more[b-b7gbx3vmox] {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 16px 11px;
    font-size: .76rem; color: #94a3b8;
}

/* ---- States ---- */
.gs-state[b-b7gbx3vmox] {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 6px; padding: 34px 24px;
}
.gs-state-icon[b-b7gbx3vmox] {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; color: #94a3b8; font-size: 1.4rem;
    margin-bottom: 4px;
}
.gs-state-title[b-b7gbx3vmox] { font-size: .92rem; font-weight: 700; color: #1e293b; }
.gs-state-sub[b-b7gbx3vmox] { font-size: .8rem; color: #94a3b8; max-width: 340px; line-height: 1.45; }

/* ---- Category chips (empty state) ---- */
.gs-chips[b-b7gbx3vmox] {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 4px 14px 14px;
}
.gs-chip[b-b7gbx3vmox] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem; font-weight: 600;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--c) 22%, #fff);
    padding: 4px 10px; border-radius: 999px;
    cursor: pointer; font-family: inherit;
    transition: background .12s, transform .08s;
}
.gs-chip:hover[b-b7gbx3vmox] { background: color-mix(in srgb, var(--c) 18%, #fff); }
.gs-chip:active[b-b7gbx3vmox] { transform: scale(.96); }

/* inline code in the empty-state hint */
.gs-state-sub code[b-b7gbx3vmox] {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .74rem;
    background: #f1f5f9; color: #475569;
    padding: 1px 5px; border-radius: 5px;
}

/* ---- Footer hints ---- */
.gs-foot[b-b7gbx3vmox] {
    display: flex; align-items: center; gap: 16px;
    padding: 9px 16px;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
    font-size: .72rem; color: #94a3b8;
}
.gs-foot span[b-b7gbx3vmox] { display: inline-flex; align-items: center; gap: 5px; }
.gs-foot kbd[b-b7gbx3vmox] {
    font-size: .66rem; font-family: ui-monospace, "SF Mono", Menlo, monospace;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 5px;
    padding: 1px 5px; color: #64748b; box-shadow: 0 1px 0 #e2e8f0;
}

/* Hide on small screens — the topbar has its own compact layout there */
@media (max-width: 991.98px) {
    .gs-wrap[b-b7gbx3vmox] { display: none; }
}
/* _content/Quote.UI/Components/Layout/MainLayout.razor.rz.scp.css */
/* App main layout styles are in app.css (global) for reliable application */

/* Email banner styles are in app.css (global) for reliable application */

/* ============================
   FOOTER (Public pages only)
   ============================ */
[b-5n8a4cp3s9] .footer-main {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    margin-top: auto;
}

[b-5n8a4cp3s9] .footer-heading {
    font-weight: 700;
    color: #1f2933;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-5n8a4cp3s9] .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-5n8a4cp3s9] .footer-links li {
    margin-bottom: 0.5rem;
}

[b-5n8a4cp3s9] .footer-links a {
    color: #6b7280;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

[b-5n8a4cp3s9] .footer-links a:hover {
    color: #2563eb;
}

[b-5n8a4cp3s9] .social-links {
    display: flex;
    gap: 0.75rem;
}

[b-5n8a4cp3s9] .social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 108, 251, 0.1);
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

[b-5n8a4cp3s9] .social-link:hover {
    background: #2563eb;
    color: white;
    transform: translateY(-2px);
}

[b-5n8a4cp3s9] .footer-bottom {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ============================
   ERROR UI
   ============================ */
#blazor-error-ui[b-5n8a4cp3s9] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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-5n8a4cp3s9] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* _content/Quote.UI/Components/Layout/NavMenu.razor.rz.scp.css */
/* ============================
   PUBLIC TOP BAR (Unauthenticated)
   ============================ */
.pub-topbar[b-kb0z8oc5v1] {
    position: sticky;
    top: 0;
    z-index: 1100;
    /* Frosted glass lives on ::before — backdrop-filter on the topbar itself would make
       it the containing block for position:fixed descendants (QuickChat dock windows
       anchored bottom:0 ended up hanging off the TOP of the screen). */
    background: transparent;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    box-shadow: 0 4px 20px var(--color-primary-glow-soft, rgba(37, 99, 235, 0.06));
}

.pub-topbar[b-kb0z8oc5v1]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
}

.pub-topbar .container[b-kb0z8oc5v1] {
    height: var(--topbar-height, 68px);
    gap: 1rem;
}

.pub-brand[b-kb0z8oc5v1],
.topbar-brand[b-kb0z8oc5v1] {
    text-decoration: none;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: opacity var(--dur-base, 0.2s) var(--ease-out, ease), transform var(--dur-base, 0.2s) var(--ease-out, ease);
}

.pub-brand:hover[b-kb0z8oc5v1],
.topbar-brand:hover[b-kb0z8oc5v1] {
    opacity: 0.85;
    transform: translateY(-1px);
    text-decoration: none;
}

.brand-mark[b-kb0z8oc5v1] {
    height: 34px;
    width: auto;
    margin-right: 9px;
    flex-shrink: 0;
    display: block;
}

.brand-q[b-kb0z8oc5v1] {
    color: var(--brand-600, #2563eb);
}

.brand-t[b-kb0z8oc5v1] {
    color: var(--neutral-900, #1f2933);
}

.pub-hamburger[b-kb0z8oc5v1] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--neutral-900, #1f2933);
    padding: 8px 10px;
    margin-left: auto;
    line-height: 1;
    border-radius: var(--radius-md, 10px);
    transition: background var(--dur-base, 0.2s) var(--ease-out, ease), color var(--dur-base, 0.2s) var(--ease-out, ease), transform var(--dur-fast, 0.12s) var(--ease-out, ease);
}

.pub-hamburger:hover[b-kb0z8oc5v1] {
    background: var(--brand-50, rgba(37,99,235,.08));
    color: var(--brand-600, #2563eb);
}

.pub-hamburger:active[b-kb0z8oc5v1] {
    transform: scale(0.94);
}

.pub-nav[b-kb0z8oc5v1] {
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    margin-right: auto;
}

.pub-nav-link[b-kb0z8oc5v1] {
    color: var(--neutral-900, #1f2933);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 14px;
    border-radius: var(--radius-md, 10px);
    transition: color var(--dur-base, 0.2s) var(--ease-out, ease), background var(--dur-base, 0.2s) var(--ease-out, ease), transform var(--dur-base, 0.2s) var(--ease-out, ease);
}

.pub-nav-link:hover[b-kb0z8oc5v1] {
    color: var(--brand-600, #2563eb);
    background: var(--color-primary-glow-soft, rgba(37, 99, 235, 0.06));
    transform: translateY(-1px);
    text-decoration: none;
}

.pub-nav-link:active[b-kb0z8oc5v1] {
    transform: translateY(0) scale(0.97);
}

.pub-nav-link.active[b-kb0z8oc5v1] {
    color: var(--brand-600, #2563eb);
    background: var(--brand-50, rgba(37, 99, 235, 0.08));
}

.pub-actions[b-kb0z8oc5v1] {
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Post a Job button in top nav */
.pub-nav .btn-outline-primary[b-kb0z8oc5v1] {
    /* Text links carry 14px invisible padding each side; the pill doesn't —
       this margin makes the visual gap after "News" match the others. */
    margin-left: 14px;
    border: 2px solid var(--brand-600, #2563eb);
    color: var(--brand-600, #2563eb);
    font-weight: 700;
    padding: 8px 18px;
    transition: all var(--dur-base, 0.2s) var(--ease-out, ease);
    box-shadow: 0 2px 8px var(--color-primary-glow-soft, rgba(37, 99, 235, 0.12));
}

.pub-nav .btn-outline-primary:hover[b-kb0z8oc5v1] {
    background: var(--brand-600, #2563eb);
    color: white;
    box-shadow: 0 8px 24px var(--color-primary-glow, rgba(37, 99, 235, 0.3));
    transform: translateY(-1px);
}

.pub-nav .btn-outline-primary:active[b-kb0z8oc5v1] {
    transform: translateY(0) scale(0.98);
}

/* Sign In link in top nav */
.pub-actions .pub-nav-link[b-kb0z8oc5v1] {
    color: var(--neutral-900, #1f2933);
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--radius-md, 10px);
}

.pub-actions .pub-nav-link:hover[b-kb0z8oc5v1] {
    color: var(--brand-600, #2563eb);
    background: var(--color-primary-glow-soft, rgba(37, 99, 235, 0.06));
}

/* Get Started button */
.pub-actions .btn-primary[b-kb0z8oc5v1] {
    font-weight: 700;
    padding: 9px 22px;
    box-shadow: 0 8px 24px var(--color-primary-glow, rgba(37, 99, 235, 0.25));
    transition: all var(--dur-base, 0.2s) var(--ease-out, ease);
}

.pub-actions .btn-primary:hover[b-kb0z8oc5v1] {
    box-shadow: 0 12px 32px var(--color-primary-glow, rgba(37, 99, 235, 0.35));
    transform: translateY(-1px);
}

.pub-actions .btn-primary:active[b-kb0z8oc5v1] {
    transform: translateY(0) scale(0.98);
}

/* Public mobile menu */
.pub-mobile-menu[b-kb0z8oc5v1] {
    background: var(--color-surface, white);
    border-top: 1px solid var(--color-border, #e5e7eb);
    padding: 12px 20px 16px;
    display: flex;
    flex-direction: column;
    animation: slideDown-b-kb0z8oc5v1 var(--dur-base, 0.2s) var(--ease-out, ease);
}

@keyframes slideDown-b-kb0z8oc5v1 {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.pub-mobile-link[b-kb0z8oc5v1] {
    display: block;
    padding: 14px 8px;
    color: var(--neutral-900, #1f2933);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: var(--radius-sm, 8px);
    transition: color var(--dur-base, 0.2s) var(--ease-out, ease), background var(--dur-base, 0.2s) var(--ease-out, ease), transform var(--dur-fast, 0.12s) var(--ease-out, ease);
}

.pub-mobile-link:hover[b-kb0z8oc5v1] {
    color: var(--brand-600, #2563eb);
    background: var(--color-primary-glow-soft, rgba(37, 99, 235, 0.05));
}

.pub-mobile-link:active[b-kb0z8oc5v1] {
    transform: scale(0.98);
}

.pub-mobile-menu hr[b-kb0z8oc5v1] {
    margin: 4px 0;
    opacity: 0.12;
}

/* ============================
   APP TOP BAR (Authenticated)
   ============================ */
.app-topbar[b-kb0z8oc5v1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height, 68px);
    /* Same reason as .pub-topbar above: the frosting goes on ::before, never on the bar itself.
       backdrop-filter makes an element the containing block for position:fixed descendants, so
       anything inside the topbar anchored to bottom:0 resolves against the 68px bar instead of the
       viewport. The public bar was fixed for this; this one wasn't. */
    background: transparent;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    z-index: 1100;
    display: flex;
    align-items: center;
    padding: 0 var(--space-5);
    gap: var(--space-3);
}

.app-topbar[b-kb0z8oc5v1]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
}

.topbar-toggle[b-kb0z8oc5v1] {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #1f2933;
    padding: 8px;
    border-radius: 10px;
    line-height: 1;
    display: none;
    transition: all 0.15s;
}

.topbar-toggle:hover[b-kb0z8oc5v1] {
    background: rgba(37,99,235,.08);
    color: #2563eb;
}

/* Centre column that holds the global search (fills space between brand and actions) */
.topbar-search[b-kb0z8oc5v1] {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    padding: 0 16px;
}

.topbar-actions[b-kb0z8oc5v1] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.topbar-icon-btn[b-kb0z8oc5v1] {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--neutral-600);
    text-decoration: none;
    font-size: 1.25rem;
    transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.topbar-icon-btn:hover[b-kb0z8oc5v1] {
    background: var(--brand-50);
    color: var(--brand-600);
    text-decoration: none;
}

.topbar-icon-btn:active[b-kb0z8oc5v1] {
    transform: scale(0.94);
}

.topbar-badge[b-kb0z8oc5v1] {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #ef4444;
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 999px;
    line-height: 1.4;
    min-width: 16px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

.topbar-user-btn[b-kb0z8oc5v1] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 5px 12px 5px 5px;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.topbar-user-btn:hover[b-kb0z8oc5v1] {
    border-color: var(--brand-300);
    background: var(--brand-50);
    box-shadow: var(--shadow-sm);
}

/* Remove Bootstrap dropdown caret */
.topbar-user-btn[b-kb0z8oc5v1]::after {
    display: none;
}

.topbar-avatar[b-kb0z8oc5v1] {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: white;
    font-weight: var(--weight-bold);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), var(--shadow-xs);
}

[b-kb0z8oc5v1] .topbar-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topbar-username[b-kb0z8oc5v1] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f2933;
}

/* ============================
   SIDEBAR
   ============================ */
.app-sidebar[b-kb0z8oc5v1] {
    position: fixed;
    top: var(--topbar-height, 68px);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width, 260px);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1050;
    padding: var(--space-3) 0;
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-400) transparent;
}

.app-sidebar[b-kb0z8oc5v1]::-webkit-scrollbar {
    width: 4px;
}

.app-sidebar[b-kb0z8oc5v1]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.app-sidebar[b-kb0z8oc5v1]::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.sidebar-overlay[b-kb0z8oc5v1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1040;
    animation: fadeIn-b-kb0z8oc5v1 0.2s ease;
}

@keyframes fadeIn-b-kb0z8oc5v1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Business switcher wrapper */
.sidebar-business[b-kb0z8oc5v1] {
    padding: 4px 12px 10px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 8px;
}

.sidebar-business[b-kb0z8oc5v1]  .dropdown,
.sidebar-business[b-kb0z8oc5v1]  .btn {
    width: 100%;
}

.sidebar-business[b-kb0z8oc5v1]  .btn {
    justify-content: flex-start;
    font-size: 0.85rem;
    padding: 8px 10px;
    border-radius: 10px;
}

.sidebar-business[b-kb0z8oc5v1]  .me-3 {
    margin-right: 0 !important;
}

/* Sidebar nav */
.sidebar-nav[b-kb0z8oc5v1] {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
}

.sidebar-label[b-kb0z8oc5v1] {
    font-size: 0.68rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--neutral-500);
    padding: var(--space-5) var(--space-3) var(--space-2);
    user-select: none;
}

.sidebar-tag[b-kb0z8oc5v1] {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.58rem;
    font-weight: var(--weight-extrabold);
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-500, #3b82f6), var(--brand-700, #1d4ed8));
    padding: 1px 6px;
    border-radius: var(--radius-pill, 999px);
    vertical-align: middle;
}

.sidebar-link[b-kb0z8oc5v1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--neutral-700);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: var(--weight-medium);
    transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.sidebar-link i:first-child[b-kb0z8oc5v1] {
    font-size: 1.15rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    color: var(--neutral-500);
    transition: color var(--dur-base) var(--ease-out);
}

.sidebar-link span[b-kb0z8oc5v1] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-link:hover[b-kb0z8oc5v1] {
    background: var(--neutral-100);
    color: var(--neutral-900);
    text-decoration: none;
}

.sidebar-link:hover i:first-child[b-kb0z8oc5v1] {
    color: var(--brand-600);
}

.sidebar-link.active[b-kb0z8oc5v1] {
    background: linear-gradient(90deg, var(--brand-50), rgba(37, 99, 235, 0.02));
    color: var(--brand-700);
    font-weight: var(--weight-semibold);
}

.sidebar-link.active i:first-child[b-kb0z8oc5v1] {
    color: var(--brand-600);
}

/* Active indicator bar — soft glow for a premium feel */
.sidebar-link.active[b-kb0z8oc5v1]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-600);
    box-shadow: 0 0 8px 0 var(--color-primary-glow);
}

/* Sidebar badge (unread count) — beats `.sidebar-link span { flex: 1 }` so it
   hugs its count instead of stretching across the row. */
.sidebar-link .sidebar-badge[b-kb0z8oc5v1] {
    flex: 0 0 auto;
    min-width: 18px;
    text-align: center;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    line-height: 1.3;
    margin-left: auto;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

/* "SOON" on an unfinished feature. Deliberately not the red of the unread badge — red in this
   sidebar means "there are things waiting for you", and a permanent red pill on a feature that
   does nothing yet trains people to ignore the colour that matters. */
.sidebar-link .sidebar-badge.sidebar-badge-soon[b-kb0z8oc5v1] {
    background: rgba(148, 163, 184, 0.22);
    color: #94a3b8;
    font-size: 0.58rem;
    letter-spacing: 0.05em;
    box-shadow: none;
}

/* ============================
   COLLAPSIBLE SECTIONS
   ============================ */
.sidebar-chevron[b-kb0z8oc5v1] {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    opacity: 0.35;
}

.sidebar-group.expanded > button .sidebar-chevron[b-kb0z8oc5v1] {
    transform: rotate(90deg);
    opacity: 0.6;
}

/* A section heading that is also its own show/hide control. Matches .sidebar-label exactly so the
   sidebar still reads as sections — the only additions are the pointer, the hover, and pushing the
   chevron to the right edge. Used by the customer nav's BUSINESS section. */
.sidebar-label-toggle[b-kb0z8oc5v1] {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-size: 0.68rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--neutral-500);
    padding: var(--space-5) var(--space-3) var(--space-2);
    user-select: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.sidebar-label-toggle:hover[b-kb0z8oc5v1] {
    color: var(--neutral-700);
}

.sidebar-label-toggle .sidebar-chevron[b-kb0z8oc5v1] {
    margin-left: auto;
}

/* Sits next to a collapsed section heading so it reads as closed, not empty. */
.sidebar-count[b-kb0z8oc5v1] {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--radius-pill, 999px);
    background: var(--neutral-200, #e9e9e6);
    color: var(--neutral-600, #6b7280);
    font-size: 0.62rem;
    font-weight: var(--weight-bold, 700);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.sidebar-group.expanded > .sidebar-label-toggle .sidebar-count[b-kb0z8oc5v1] {
    opacity: 0.45;
}

.sidebar-submenu[b-kb0z8oc5v1] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.sidebar-group.expanded .sidebar-submenu[b-kb0z8oc5v1] {
    max-height: 500px;
}

.sidebar-sublink[b-kb0z8oc5v1] {
    display: flex;
    align-items: center;
    padding: 8px 12px 8px 44px;
    color: var(--neutral-600);
    text-decoration: none;
    font-size: 0.825rem;
    font-weight: var(--weight-medium);
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.sidebar-sublink:hover[b-kb0z8oc5v1] {
    background: var(--neutral-100);
    color: var(--neutral-900);
    text-decoration: none;
}

.sidebar-sublink.active[b-kb0z8oc5v1] {
    color: var(--brand-700);
    font-weight: var(--weight-semibold);
    background: var(--brand-50);
}

/* ============================
   MOBILE BOTTOM NAV
   ============================ */
.app-bottomnav.hidden[b-kb0z8oc5v1] {
    display: none !important;
}

.app-bottomnav[b-kb0z8oc5v1] {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottomnav-height, 60px);
    background: white;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
    z-index: 1050;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottomnav-item[b-kb0z8oc5v1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 600;
    gap: 3px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    transition: color 0.15s;
}

.bottomnav-item i[b-kb0z8oc5v1] {
    font-size: 1.35rem;
    transition: transform 0.15s;
}

.bottomnav-item:hover[b-kb0z8oc5v1] {
    color: #2563eb;
}

.bottomnav-item:hover i[b-kb0z8oc5v1] {
    transform: translateY(-1px);
}

.bottomnav-item.active[b-kb0z8oc5v1] {
    color: #2563eb;
}

.bottomnav-item.active i[b-kb0z8oc5v1] {
    transform: translateY(-1px);
}

.bottomnav-badge[b-kb0z8oc5v1] {
    position: absolute;
    top: 4px;
    left: 50%;
    margin-left: 6px;
    background: #ef4444;
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 999px;
    line-height: 1.3;
    min-width: 14px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* ============================
   NOTIFICATION BELL
   ============================ */
.notif-bell-wrapper[b-kb0z8oc5v1] {
    position: relative;
}

.notif-backdrop[b-kb0z8oc5v1] {
    position: fixed;
    inset: 0;
    z-index: 1199;
}

.notif-panel[b-kb0z8oc5v1] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-height: 480px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    animation: notifSlideIn 0.15s ease;
    overflow: hidden;
}

@@keyframes notifSlideIn {
    from[b-kb0z8oc5v1] { opacity: 0; transform: translateY(-6px); }
    to[b-kb0z8oc5v1] { opacity: 1; transform: translateY(0); }
}

.notif-panel-header[b-kb0z8oc5v1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
}

.notif-panel-title[b-kb0z8oc5v1] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1f2933;
}

.notif-mark-all[b-kb0z8oc5v1] {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.notif-mark-all:hover[b-kb0z8oc5v1] {
    background: rgba(37, 99, 235, 0.08);
}

.notif-panel-body[b-kb0z8oc5v1] {
    overflow-y: auto;
    max-height: 400px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.notif-panel-footer[b-kb0z8oc5v1] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.75rem 1rem;
    margin: 0;
    border-top: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff !important;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    transition: filter 0.18s, transform 0.18s, box-shadow 0.18s;
    cursor: pointer;
}
.notif-panel-footer:hover[b-kb0z8oc5v1] {
    filter: brightness(1.08);
    box-shadow: 0 -6px 14px rgba(37, 99, 235, 0.25);
    color: #ffffff !important;
}
.notif-panel-footer:hover i[b-kb0z8oc5v1] { transform: translateX(3px); }
.notif-panel-footer i[b-kb0z8oc5v1] {
    font-size: 0.95rem;
    transition: transform 0.18s;
}

.notif-empty[b-kb0z8oc5v1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #9ca3af;
    gap: 8px;
}

.notif-empty i[b-kb0z8oc5v1] {
    font-size: 2rem;
    opacity: 0.5;
}

.notif-empty span[b-kb0z8oc5v1] {
    font-size: 0.875rem;
    font-weight: 500;
}

.notif-item[b-kb0z8oc5v1] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid #f9fafb;
}

.notif-item:last-child[b-kb0z8oc5v1] {
    border-bottom: none;
}

.notif-item:hover[b-kb0z8oc5v1] {
    background: rgba(37,99,235,.06);
}

.notif-item.unread[b-kb0z8oc5v1] {
    background: rgba(37, 99, 235, 0.03);
}

.notif-item.unread:hover[b-kb0z8oc5v1] {
    background: rgba(37, 99, 235, 0.06);
}

.notif-item-icon[b-kb0z8oc5v1] {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    /* colour + background set inline per notification type (NotificationStyle.For) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.notif-item-content[b-kb0z8oc5v1] {
    flex: 1;
    min-width: 0;
}

.notif-item-title[b-kb0z8oc5v1] {
    font-weight: 600;
    font-size: 0.825rem;
    color: #1f2933;
    line-height: 1.3;
}

.notif-item.unread .notif-item-title[b-kb0z8oc5v1] {
    font-weight: 700;
}

.notif-item-msg[b-kb0z8oc5v1] {
    font-size: 0.775rem;
    color: #6b7280;
    line-height: 1.4;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-item-meta[b-kb0z8oc5v1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.notif-item-cat[b-kb0z8oc5v1] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1;
    /* colour + background set inline per notification type */
}

.notif-item-time[b-kb0z8oc5v1] {
    font-size: 0.7rem;
    color: #9ca3af;
    font-weight: 500;
}

.notif-item-dot[b-kb0z8oc5v1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* colour set inline per notification type */
    flex-shrink: 0;
    margin-top: 6px;
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 991.98px) {
    .notif-panel[b-kb0z8oc5v1] {
        position: fixed;
        left: 10px;
        right: 10px;
        width: auto;
        top: calc(var(--topbar-height, 72px) + 4px);
    }

    .topbar-toggle[b-kb0z8oc5v1] {
        display: flex;
    }

    .app-sidebar[b-kb0z8oc5v1] {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: none;
    }

    .app-sidebar.open[b-kb0z8oc5v1] {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
    }

}

@media (min-width: 992px) {
    .sidebar-overlay[b-kb0z8oc5v1] {
        display: none;
    }
}

/* ---- Phones: the bar has to actually fit -----------------------------------
   Measured at 375 / 393 / 430px, the bar's children needed 486px once padding and gaps were
   counted, so on every phone it was 37-92px too wide. It does not scroll — .app-topbar is a
   fixed, clipped strip — so whatever did not fit was simply gone off the right edge, and the
   profile button is the last thing in the row.

   That is also the whole of the "profile menu opens off screen" bug: the menu is already
   right-aligned (.dropdown-menu-end), but it was anchored to a button sitting past the edge of
   the screen, so it opened into nothing. Fixing the fit fixes the menu.

   The wordmark is 132px of that 486. The brush mark is the logo and carries the brand on its own
   at this size, which is what a mark is for. The username text was already hidden below 576px
   (d-none d-sm-inline), so this breakpoint matches what the markup already assumed. */
@media (max-width: 575.98px) {
    .app-topbar[b-kb0z8oc5v1] {
        padding-left: 12px;
        padding-right: 12px;
        gap: 8px;
    }

    /* The actions are the one thing that must never be pushed off: the profile button is the last
       item in the row, so anything that overflows takes it with it. Pin them and make the search
       the only elastic thing in the bar.
       
       This kept "just fitting" in tests and still arrived cut off on a real device — different text
       metrics, Display Zoom, a font falling back. Rather than chase the last few pixels, the bar
       is now built so nothing CAN push them out. */
    .topbar-actions[b-kb0z8oc5v1] {
        flex-shrink: 0;
    }

    .topbar-search[b-kb0z8oc5v1] {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 4px;
    }

    .topbar-brand .brand-q[b-kb0z8oc5v1],
    .topbar-brand .brand-t[b-kb0z8oc5v1] {
        display: none;
    }

    .brand-mark[b-kb0z8oc5v1] {
        margin-right: 0;
    }

    .topbar-actions[b-kb0z8oc5v1] {
        gap: 2px;
    }
}

/* Belt and braces: whatever the bar does later, a menu opening from it can never be wider than
   the screen, and never hang off the right edge. */
.app-topbar .dropdown-menu[b-kb0z8oc5v1] {
    max-width: calc(100vw - 16px);
}

@media (max-width: 575.98px) {
    .app-topbar .dropdown-menu-end[b-kb0z8oc5v1] {
        right: 0;
        left: auto;
    }
}



/* ---- Installed to a home screen -------------------------------------- */
/* The bar's background fills the status-bar strip while its content sits below the notch.
   --topbar-height already includes --safe-top (see app.css), so the height here follows on its
   own; this only has to push the CONTENT down. Inert in a browser window, where the inset is 0. */
.app-topbar[b-kb0z8oc5v1],
.pub-topbar[b-kb0z8oc5v1] {
    padding-top: var(--safe-top, 0px);
}

/* Landscape on a notched phone puts the cutout on one SIDE, so a bar that runs edge to edge
   loses its first control behind it. */
@media (orientation: landscape) {
    .app-topbar[b-kb0z8oc5v1],
    .pub-topbar[b-kb0z8oc5v1] {
        padding-left: max(var(--space-5, 1rem), env(safe-area-inset-left, 0px));
        padding-right: max(var(--space-5, 1rem), env(safe-area-inset-right, 0px));
    }
}

/* The signed-in app is an app, not a document: no double-tap zoom on its chrome. The pinch
   gesture is refused in reset-zoom.js, because iOS Safari ignores user-scalable=no on purpose
   and only honours preventDefault on the gesture events. */
.app-topbar[b-kb0z8oc5v1],
.app-sidebar[b-kb0z8oc5v1],
.app-shell[b-kb0z8oc5v1] {
    touch-action: manipulation;
}

/* Narrow or display-zoomed phones: drop the search field from the bar altogether. It is the only
   discretionary item there, and losing it buys ~160px — enough that the profile button cannot be
   crowded out no matter how the text renders. */
@media (max-width: 419.98px) {
    .topbar-search[b-kb0z8oc5v1] {
        display: none;
    }
}

/* The profile menu is anchored to the VIEWPORT on a phone, not to its button.
   Anchoring it to the button means a button that is even slightly mispositioned takes the menu
   off screen with it — which is exactly what kept happening. Fixed positioning makes that
   impossible: wherever the button ends up, the menu opens against the right edge of the screen. */
@media (max-width: 575.98px) {
    .app-topbar .dropdown-menu.profile-dropdown[b-kb0z8oc5v1],
    .app-topbar .dropdown-menu[b-kb0z8oc5v1] {
        position: fixed !important;
        top: calc(var(--topbar-height, 68px) + var(--safe-top, 0px) + 4px) !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        /* A menu of four items reading nearly full width looks unfinished; cap it, but never
           wider than the screen. */
        width: min(340px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - var(--topbar-height, 68px) - 24px);
        overflow-y: auto;
    }
}
/* _content/Quote.UI/Components/Pages/Academy/Academy.razor.rz.scp.css */
/* QuoteTrades Academy — catalogue */

.academy-body[b-gnsszhlrhh] {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-16);
}

/* ---- Upgrade prompt for Free/Starter -------------------------------------- */
.ac-upsell[b-gnsszhlrhh] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
    background: linear-gradient(135deg, var(--brand-50), var(--color-surface));
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.ac-upsell-icon[b-gnsszhlrhh] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.25rem;
}

.ac-upsell-text[b-gnsszhlrhh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ac-upsell-text strong[b-gnsszhlrhh] {
    font-size: var(--text-md);
    color: var(--color-text);
}

.ac-upsell-text span[b-gnsszhlrhh] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
}

.ac-upsell-btn[b-gnsszhlrhh] {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out);
}

.ac-upsell-btn:hover[b-gnsszhlrhh] { background: var(--color-primary-hover); }

/* ---- Continue learning ---------------------------------------------------- */
.ac-section[b-gnsszhlrhh] { margin-bottom: var(--space-8); }

.ac-section-head[b-gnsszhlrhh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.ac-section-head h2[b-gnsszhlrhh] {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0;
}

.ac-section-link[b-gnsszhlrhh] {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-primary);
    text-decoration: none;
}

.ac-section-link:hover[b-gnsszhlrhh] { text-decoration: underline; }

.ac-rail[b-gnsszhlrhh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    gap: var(--space-3);
}

.ac-resume[b-gnsszhlrhh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.ac-resume:hover[b-gnsszhlrhh] {
    border-color: var(--brand-300);
    box-shadow: var(--shadow-sm);
}

.ac-resume-top[b-gnsszhlrhh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.ac-resume-title[b-gnsszhlrhh] {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: var(--leading-snug);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ac-resume-pct[b-gnsszhlrhh] {
    flex: 0 0 auto;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.ac-resume-meta[b-gnsszhlrhh] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Progress bar --------------------------------------------------------- */
.ac-bar[b-gnsszhlrhh] {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--neutral-200);
    overflow: hidden;
}

.ac-bar > span[b-gnsszhlrhh] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
    transition: width var(--dur-slow) var(--ease-out);
}

.ac-bar-card[b-gnsszhlrhh] { margin-top: var(--space-3); }

/* Reserves the bar's height without drawing a track. */
.ac-bar.is-empty[b-gnsszhlrhh] { background: transparent; }

/* ---- Filter row ------------------------------------------------------------
   `.filter-bar` / `.fb-search-box` are NOT global in this app — every page that uses those
   class names redefines them in its own <style> block. Without these rules the search input
   renders as a bare, unstyled box. Defined here against the design tokens rather than copied
   from another page's hardcoded hex. */
.filter-bar[b-gnsszhlrhh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-2);
}

.filter-left[b-gnsszhlrhh],
.filter-right[b-gnsszhlrhh] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.filter-right[b-gnsszhlrhh] {
    flex: 1 1 260px;
    justify-content: flex-end;
}

.fb-search-box[b-gnsszhlrhh] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 1 320px;
    min-width: 0;
    padding: 0 var(--space-4);
    height: 40px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.fb-search-box:focus-within[b-gnsszhlrhh] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow-soft);
}

.fb-search-box > i[b-gnsszhlrhh] {
    flex: 0 0 auto;
    font-size: 0.95rem;
    color: var(--neutral-500);
}

.fb-search-box input[b-gnsszhlrhh] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--color-text);
}

.fb-search-box input[b-gnsszhlrhh]::placeholder { color: var(--neutral-500); }

.clear-btn[b-gnsszhlrhh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.clear-btn:hover[b-gnsszhlrhh] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.ac-count[b-gnsszhlrhh] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
}

.ac-count strong[b-gnsszhlrhh] { color: var(--color-text); }

/* ---- Course grid ---------------------------------------------------------- */
.ac-grid[b-gnsszhlrhh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.ac-card[b-gnsszhlrhh] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}

.ac-card:hover[b-gnsszhlrhh] {
    transform: translateY(-2px);
    border-color: var(--brand-200);
    box-shadow: var(--shadow-lg);
}

/* The image is absolutely positioned inside the ratio box on purpose. With `height: 100%` on
   the img instead, a PORTRAIT source resolves its percentage height against an auto-height
   parent, falls back to its intrinsic height and stretches the box — a 16:9 card became 460px
   tall the moment a portrait photo landed in it. */
.ac-card-media[b-gnsszhlrhh] {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--neutral-100);
}

.ac-card-media img[b-gnsszhlrhh] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-slow) var(--ease-out);
}

.ac-card:hover .ac-card-media img[b-gnsszhlrhh] { transform: scale(1.04); }

.ac-card-noimg[b-gnsszhlrhh] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2rem;
    color: var(--neutral-400);
    background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
}

.ac-badge[b-gnsszhlrhh] {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    backdrop-filter: blur(6px);
}

.ac-badge-official[b-gnsszhlrhh] {
    background: rgba(37, 99, 235, 0.92);
    color: #fff;
}

.ac-badge-done[b-gnsszhlrhh] {
    left: auto;
    right: var(--space-3);
    background: rgba(22, 163, 74, 0.92);
    color: #fff;
}

.ac-card-body[b-gnsszhlrhh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-5);
    flex: 1;
}

.ac-card-chips[b-gnsszhlrhh] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ac-chip[b-gnsszhlrhh] {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.ac-chip-soft[b-gnsszhlrhh] {
    background: var(--neutral-100);
    color: var(--color-text-muted);
}

.ac-card-body h3[b-gnsszhlrhh] {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0;
    /* Clamp so a long title can't shove the summary and stats out of alignment across the row,
       and break anywhere so an unspaced string (a part number, a URL) can't overflow the card. */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.ac-card-body p[b-gnsszhlrhh] {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

/* Author byline: one line, always. `min-width: 0` on the flex child is what actually lets the
   ellipsis engage — without it the text sets the track's minimum width and overflows instead. */
.ac-card-author[b-gnsszhlrhh] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    min-width: 0;
}

.ac-card-author > i[b-gnsszhlrhh] { flex: 0 0 auto; }

.ac-card-author > span[b-gnsszhlrhh] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.ac-card-stats[b-gnsszhlrhh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--neutral-200);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.ac-card-stats span[b-gnsszhlrhh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.ac-stars[b-gnsszhlrhh] {
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.ac-stars > i[b-gnsszhlrhh] { color: var(--warning-500); }

.ac-stars-count[b-gnsszhlrhh] {
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
}

@media (max-width: 640px) {
    .academy-body[b-gnsszhlrhh] { padding: var(--space-4) var(--space-3) var(--space-12); }

    .ac-upsell[b-gnsszhlrhh] { flex-wrap: wrap; }
    .ac-upsell-btn[b-gnsszhlrhh] { margin-left: 0; width: 100%; text-align: center; }

    .ac-grid[b-gnsszhlrhh] { grid-template-columns: 1fr; }
}
/* _content/Quote.UI/Components/Pages/Academy/AuthorHome.razor.rz.scp.css */
/* QuoteTrades Academy — author home */

.au-body[b-12m3hbfk6q] {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-16);
}

/* ---- Upsell --------------------------------------------------------------- */
.au-upsell[b-12m3hbfk6q] {
    text-align: center;
    max-width: 520px;
    margin: var(--space-8) auto;
    padding: var(--space-10) var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.au-upsell-icon[b-12m3hbfk6q] {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-5);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--brand-800), var(--brand-600));
    color: #fff;
    font-size: 1.5rem;
}

.au-upsell h2[b-12m3hbfk6q] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.au-upsell p[b-12m3hbfk6q] {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
}

/* ---- Intro steps ---------------------------------------------------------- */
.au-intro[b-12m3hbfk6q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.au-step[b-12m3hbfk6q] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
}

.au-step span[b-12m3hbfk6q] {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

/* ---- AI drafter ----------------------------------------------------------- */
.au-drafter[b-12m3hbfk6q] {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background: linear-gradient(135deg, var(--brand-50), var(--color-surface));
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-lg);
}

.au-drafter-head[b-12m3hbfk6q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.au-drafter-head h2[b-12m3hbfk6q] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}

.au-drafter-head h2 > i[b-12m3hbfk6q] { color: var(--color-primary); }

.au-drafter-head p[b-12m3hbfk6q] {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 62ch;
}

.au-drafter-scope[b-12m3hbfk6q] {
    display: flex;
    gap: 8px;
    margin-top: var(--space-3) !important;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.au-drafter-scope > i[b-12m3hbfk6q] {
    flex: 0 0 auto;
    color: var(--color-primary);
    line-height: 1.5;
}

.au-drafter-scope strong[b-12m3hbfk6q] { color: var(--color-text); }

.au-icon-btn[b-12m3hbfk6q] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.au-icon-btn:hover[b-12m3hbfk6q] { background: var(--color-hover); color: var(--color-text); }

.au-drafter-form[b-12m3hbfk6q] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-3);
}

.au-field-wide[b-12m3hbfk6q] { grid-column: span 1; }

.au-field label[b-12m3hbfk6q] {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: 5px;
}

.au-field input[b-12m3hbfk6q],
.au-field select[b-12m3hbfk6q] {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--color-text);
}

.au-field input:focus[b-12m3hbfk6q],
.au-field select:focus[b-12m3hbfk6q] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow-soft);
}

.au-drafter-actions[b-12m3hbfk6q] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
    flex-wrap: wrap;
}

.au-drafter-note[b-12m3hbfk6q] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.au-drafter-error[b-12m3hbfk6q] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--danger-600);
}

/* Waiting state. The model runs locally on CPU and takes roughly a minute, so this says so
   plainly rather than showing a bare spinner that looks like something has hung. */
.au-drafting[b-12m3hbfk6q] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

.au-drafting div[b-12m3hbfk6q] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.au-drafting strong[b-12m3hbfk6q] { font-size: var(--text-md); color: var(--color-text); }

.au-drafting span[b-12m3hbfk6q] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    max-width: 58ch;
}

.au-spinner[b-12m3hbfk6q] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--brand-200);
    border-top-color: var(--color-primary);
    animation: au-spin-b-12m3hbfk6q 0.8s linear infinite;
}

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

/* Live outline — each section fades in as it arrives. */
.au-draft-live[b-12m3hbfk6q] {
    list-style: none;
    counter-reset: draft-section;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.au-draft-live > li[b-12m3hbfk6q] {
    counter-increment: draft-section;
    position: relative;
    padding: var(--space-3) var(--space-4) var(--space-3) 46px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    animation: au-draft-in-b-12m3hbfk6q var(--dur-slow) var(--ease-out);
}

.au-draft-live > li[b-12m3hbfk6q]::before {
    content: counter(draft-section);
    position: absolute;
    left: var(--space-4);
    top: var(--space-3);
    width: 22px;
    height: 22px;
    border-radius: var(--radius-xs);
    display: grid;
    place-items: center;
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    font-weight: var(--weight-bold);
}

.au-draft-live > li > strong[b-12m3hbfk6q] {
    display: block;
    font-size: var(--text-base);
    color: var(--color-text);
    margin-bottom: 4px;
}

/* A section whose lessons are still being written. */
.au-draft-live > li.pending[b-12m3hbfk6q] { opacity: 0.62; }

.au-draft-pending[b-12m3hbfk6q] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

.au-draft-live ul[b-12m3hbfk6q] {
    margin: 0;
    padding-left: 1.1rem;
}

.au-draft-live ul li[b-12m3hbfk6q] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

@keyframes au-draft-in-b-12m3hbfk6q {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .au-draft-live > li[b-12m3hbfk6q] { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .au-spinner[b-12m3hbfk6q] { animation-duration: 2.4s; }
}

/* ---- Course rows ---------------------------------------------------------- */
.au-list[b-12m3hbfk6q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.au-row[b-12m3hbfk6q] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.au-row-main[b-12m3hbfk6q] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.au-row-title[b-12m3hbfk6q] {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

.au-row-title:hover[b-12m3hbfk6q] { color: var(--color-primary); }

.au-row-meta[b-12m3hbfk6q] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.au-feedback[b-12m3hbfk6q] {
    display: flex;
    gap: 8px;
    margin-top: var(--space-2);
    padding: var(--space-3);
    background: var(--danger-50);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text);
}

.au-feedback > i[b-12m3hbfk6q] { color: var(--danger-600); }

.au-status[b-12m3hbfk6q] {
    flex: 0 0 auto;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    white-space: nowrap;
}

.au-status.draft[b-12m3hbfk6q] { background: var(--neutral-100); color: var(--color-text-muted); }
.au-status.review[b-12m3hbfk6q] { background: var(--warning-50); color: var(--warning-600); }
.au-status.changes[b-12m3hbfk6q] { background: var(--danger-50); color: var(--danger-600); }
.au-status.live[b-12m3hbfk6q] { background: var(--success-50); color: var(--success-600); }
.au-status.archived[b-12m3hbfk6q] { background: var(--neutral-200); color: var(--neutral-600); }

.au-row-actions[b-12m3hbfk6q] { flex: 0 0 auto; }

.au-btn-sm[b-12m3hbfk6q] {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out);
}

.au-btn-sm:hover[b-12m3hbfk6q] { background: var(--color-hover); }

.au-btn-sm.danger[b-12m3hbfk6q] {
    color: var(--danger-600);
    border-color: var(--danger-500);
    background: var(--danger-50);
}

.au-btn-sm.danger:hover[b-12m3hbfk6q] { background: #fde2e2; }

.au-row-actions[b-12m3hbfk6q] { display: flex; gap: var(--space-2); align-items: center; }

.au-btn-primary[b-12m3hbfk6q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.au-btn-primary:hover[b-12m3hbfk6q] { background: var(--color-primary-hover); }

@media (max-width: 860px) {
    .au-drafter-form[b-12m3hbfk6q] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .au-body[b-12m3hbfk6q] { padding: var(--space-4) var(--space-3) var(--space-12); }
    .au-row[b-12m3hbfk6q] { flex-wrap: wrap; }
    .au-row-main[b-12m3hbfk6q] { flex: 1 1 100%; }
    .au-drafting[b-12m3hbfk6q] { align-items: flex-start; }
}
/* _content/Quote.UI/Components/Pages/Academy/CourseBuilder.razor.rz.scp.css */
/* QuoteTrades Academy — course builder */

.builder-page[b-wauqusvwr2] {
    min-height: 100vh;
    background: var(--color-canvas);
}

/* ---- Top bar -------------------------------------------------------------- */
.bd-topbar[b-wauqusvwr2] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.bd-topbar-left[b-wauqusvwr2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.bd-back[b-wauqusvwr2] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out);
}

.bd-back:hover[b-wauqusvwr2] { background: var(--color-hover); }

.bd-topbar-title[b-wauqusvwr2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.bd-topbar-title > span:first-child[b-wauqusvwr2] {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bd-status[b-wauqusvwr2] {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.bd-status.draft[b-wauqusvwr2] { background: var(--neutral-100); color: var(--color-text-muted); }
.bd-status.review[b-wauqusvwr2] { background: var(--warning-50); color: var(--warning-600); }
.bd-status.changes[b-wauqusvwr2] { background: var(--danger-50); color: var(--danger-600); }
.bd-status.live[b-wauqusvwr2] { background: var(--success-50); color: var(--success-600); }

.bd-topbar-right[b-wauqusvwr2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.bd-saved[b-wauqusvwr2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--success-600);
}

.bd-locked[b-wauqusvwr2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--warning-50);
    border-bottom: 1px solid var(--warning-500);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.bd-locked > i[b-wauqusvwr2] { color: var(--warning-600); }

/* ---- Layout --------------------------------------------------------------- */
.bd-layout[b-wauqusvwr2] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--space-5);
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-5);
    align-items: start;
}

/* ---- Outline -------------------------------------------------------------- */
.bd-outline[b-wauqusvwr2] {
    position: sticky;
    top: 74px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.bd-outline-label[b-wauqusvwr2] {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--neutral-500);
    padding: var(--space-4) var(--space-2) var(--space-2);
}

.bd-outline-item[b-wauqusvwr2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    text-align: left;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}

.bd-outline-item:hover[b-wauqusvwr2] { background: var(--color-hover); }

.bd-outline-item.active[b-wauqusvwr2] {
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: var(--weight-semibold);
}

.bd-outline-count[b-wauqusvwr2] {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--neutral-100);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
}

.bd-outline-module[b-wauqusvwr2] {
    padding: var(--space-2) 0;
    border-top: 1px solid var(--neutral-200);
    margin-top: var(--space-2);
}

.bd-outline-module:first-of-type[b-wauqusvwr2] { border-top: none; margin-top: 0; }

.bd-outline-mhead[b-wauqusvwr2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
}

.bd-outline-mnum[b-wauqusvwr2] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-xs);
    display: grid;
    place-items: center;
    background: var(--color-text);
    color: #fff;
    font-size: 11px;
    font-weight: var(--weight-bold);
}

.bd-outline-mtitle[b-wauqusvwr2] {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Editable section name. Looks like text until you touch it — the outline shouldn't read as a
   form, but renaming shouldn't need a trip to a modal either. */
.bd-outline-mtitle-input[b-wauqusvwr2] {
    flex: 1;
    min-width: 0;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.bd-outline-mtitle-input:hover[b-wauqusvwr2] { border-color: var(--color-border); }

.bd-outline-mtitle-input:focus[b-wauqusvwr2] {
    outline: none;
    background: var(--color-surface);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow-soft);
}

/* Move/delete buttons stay out of the way until the row is hovered or focused: the outline
   reads as navigation first and an editor second, and the section name gets the full width
   instead of being squeezed into a clipped input by three permanent buttons. */
.bd-outline-mtools[b-wauqusvwr2],
.bd-outline-ltools[b-wauqusvwr2] {
    display: flex;
    gap: 1px;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
}

.bd-outline-mhead:hover .bd-outline-mtools[b-wauqusvwr2],
.bd-outline-mhead:focus-within .bd-outline-mtools[b-wauqusvwr2],
.bd-outline-lrow:hover .bd-outline-ltools[b-wauqusvwr2],
.bd-outline-lrow:focus-within .bd-outline-ltools[b-wauqusvwr2] { opacity: 1; }

.bd-outline-lrow[b-wauqusvwr2] {
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding-right: 4px;
}

.bd-outline-lrow:hover[b-wauqusvwr2] { background: var(--color-hover); }

.bd-outline-lrow.active[b-wauqusvwr2] { background: var(--brand-50); }

.bd-outline-lesson[b-wauqusvwr2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
    padding: 7px 12px 7px 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
}

.bd-outline-lesson span[b-wauqusvwr2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bd-outline-lrow:hover .bd-outline-lesson[b-wauqusvwr2] { color: var(--color-text); }

.bd-outline-lrow.active .bd-outline-lesson[b-wauqusvwr2] {
    color: var(--brand-700);
    font-weight: var(--weight-semibold);
}

.bd-outline-add[b-wauqusvwr2] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: calc(100% - 24px);
    margin: 4px 12px 0 32px;
    padding: 6px 0;
    border: none;
    background: transparent;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

.bd-outline-add:hover[b-wauqusvwr2] { text-decoration: underline; }

.bd-outline-add.section[b-wauqusvwr2] {
    margin: var(--space-3) 12px 0;
    width: calc(100% - 24px);
    justify-content: center;
    padding: 9px 0;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
}

.bd-outline-add.section:hover[b-wauqusvwr2] {
    text-decoration: none;
    border-color: var(--color-primary);
    background: var(--brand-50);
}

/* ---- Editor panel --------------------------------------------------------- */
.bd-panel[b-wauqusvwr2] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.bd-panel h2[b-wauqusvwr2] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}

.bd-panel-sub[b-wauqusvwr2] {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
}

.bd-field[b-wauqusvwr2] { margin-bottom: var(--space-5); }

.bd-field label[b-wauqusvwr2] {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: 6px;
}

.bd-field input[type="text"][b-wauqusvwr2],
.bd-field input[type="number"][b-wauqusvwr2],
.bd-field select[b-wauqusvwr2],
.bd-field textarea[b-wauqusvwr2],
.bd-block-body textarea[b-wauqusvwr2],
.bd-block-caption[b-wauqusvwr2],
.bd-option-row input[b-wauqusvwr2] {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-base);
    font-family: inherit;
    line-height: var(--leading-normal);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.bd-field input:focus[b-wauqusvwr2],
.bd-field select:focus[b-wauqusvwr2],
.bd-field textarea:focus[b-wauqusvwr2],
.bd-block-body textarea:focus[b-wauqusvwr2],
.bd-block-caption:focus[b-wauqusvwr2],
.bd-option-row input:focus[b-wauqusvwr2] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow-soft);
}

.bd-field input:disabled[b-wauqusvwr2],
.bd-field select:disabled[b-wauqusvwr2],
.bd-field textarea:disabled[b-wauqusvwr2],
.bd-block-body textarea:disabled[b-wauqusvwr2] {
    background: var(--neutral-50);
    color: var(--color-text-muted);
    cursor: default;
}

.bd-field textarea[b-wauqusvwr2] { resize: vertical; }

.bd-hint[b-wauqusvwr2] {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 5px;
}

.bd-field > .bd-hint:first-of-type[b-wauqusvwr2] { margin: 0 0 var(--space-2); }

.bd-req[b-wauqusvwr2] {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--warning-50);
    color: var(--warning-600);
    font-size: 10px;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.bd-field-row[b-wauqusvwr2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.bd-panel-actions[b-wauqusvwr2] {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

/* ---- Cover image ---------------------------------------------------------- */
.bd-cover[b-wauqusvwr2] {
    position: relative;
    max-width: 420px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.bd-cover img[b-wauqusvwr2] { width: 100%; display: block; }

.bd-cover-remove[b-wauqusvwr2] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    cursor: pointer;
}

.bd-upload[b-wauqusvwr2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--space-4) var(--space-5);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out);
}

.bd-upload:hover[b-wauqusvwr2] { border-color: var(--color-primary); color: var(--color-primary); }
.bd-upload.small[b-wauqusvwr2] { padding: var(--space-3) var(--space-4); }
.bd-upload input[type="file"][b-wauqusvwr2] { display: none; }

/* ---- Lesson editor -------------------------------------------------------- */
.bd-lesson-head[b-wauqusvwr2] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.bd-flex1[b-wauqusvwr2] { flex: 1; margin-bottom: 0; }
.bd-narrow[b-wauqusvwr2] { width: 110px; flex: 0 0 auto; margin-bottom: 0; }

.bd-blocks[b-wauqusvwr2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bd-blocks-empty[b-wauqusvwr2] {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    margin: 0;
}

.bd-block[b-wauqusvwr2] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.bd-block-bar[b-wauqusvwr2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px var(--space-3);
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
}

.bd-block-type[b-wauqusvwr2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

.bd-block-tools[b-wauqusvwr2] { display: flex; gap: 2px; }

.bd-icon-btn[b-wauqusvwr2] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}

.bd-icon-btn:hover:not(:disabled)[b-wauqusvwr2] { background: var(--neutral-200); color: var(--color-text); }
.bd-icon-btn:disabled[b-wauqusvwr2] { opacity: 0.35; cursor: default; }
.bd-icon-btn.danger:hover[b-wauqusvwr2] { background: var(--danger-50); color: var(--danger-600); }

.bd-block-body[b-wauqusvwr2] {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bd-block-body textarea[b-wauqusvwr2] { resize: vertical; }

.bd-block-img[b-wauqusvwr2] {
    width: 100%;
    max-width: 420px;
    border-radius: var(--radius-sm);
    display: block;
}

/* ---- Add-block chips ------------------------------------------------------ */
.bd-add-blocks[b-wauqusvwr2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.bd-add-label[b-wauqusvwr2] {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    margin-right: var(--space-1);
}

.bd-add-chip[b-wauqusvwr2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}

.bd-add-chip:hover[b-wauqusvwr2] {
    border-color: var(--color-primary);
    background: var(--brand-50);
    color: var(--brand-700);
}

/* ---- Quiz builder --------------------------------------------------------- */
.bd-question[b-wauqusvwr2] {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.bd-question-head[b-wauqusvwr2] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.bd-question-num[b-wauqusvwr2] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-text);
    color: #fff;
    font-size: 11px;
    font-weight: var(--weight-bold);
}

.bd-question-prompt[b-wauqusvwr2] {
    flex: 1;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--color-text);
}

.bd-question-options[b-wauqusvwr2] {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding-left: 34px;
}

.bd-question-options li[b-wauqusvwr2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: 5px;
}

.bd-question-options li.correct[b-wauqusvwr2] {
    color: var(--success-600);
    font-weight: var(--weight-semibold);
}

.bd-question-why[b-wauqusvwr2] {
    margin: var(--space-2) 0 0;
    padding-left: 34px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

.bd-newq[b-wauqusvwr2] {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.bd-newq h3[b-wauqusvwr2] {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-4);
}

.bd-option-row[b-wauqusvwr2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.bd-correct-btn[b-wauqusvwr2] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--neutral-400);
    font-size: 1.1rem;
    cursor: pointer;
}

.bd-correct-btn.on[b-wauqusvwr2] { color: var(--success-600); }

.bd-error[b-wauqusvwr2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--danger-600);
    margin: var(--space-3) 0;
}

/* ---- Buttons -------------------------------------------------------------- */
.bd-btn-primary[b-wauqusvwr2],
.bd-btn-danger[b-wauqusvwr2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}

.bd-btn-primary[b-wauqusvwr2] { background: var(--color-primary); color: #fff; }
.bd-btn-primary:hover:not(:disabled)[b-wauqusvwr2] { background: var(--color-primary-hover); }
.bd-btn-primary:disabled[b-wauqusvwr2] { opacity: 0.6; cursor: default; }

.bd-btn-danger[b-wauqusvwr2] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--danger-600);
    padding: 10px 14px;
}

.bd-btn-danger:hover[b-wauqusvwr2] { background: var(--danger-50); border-color: var(--danger-500); }

/* ---- Toast ---------------------------------------------------------------- */
.bd-toast[b-wauqusvwr2] {
    position: fixed;
    left: 50%;
    bottom: var(--space-6);
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xl);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.bd-toast.error[b-wauqusvwr2] { background: var(--danger-600); color: #fff; }

.bd-toast button[b-wauqusvwr2] {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.8;
}

@media (max-width: 960px) {
    .bd-layout[b-wauqusvwr2] { grid-template-columns: 1fr; }
    .bd-outline[b-wauqusvwr2] { position: static; }
    .bd-field-row[b-wauqusvwr2] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .bd-topbar[b-wauqusvwr2] { flex-wrap: wrap; }
    .bd-layout[b-wauqusvwr2] { padding: var(--space-3); }
    .bd-panel[b-wauqusvwr2] { padding: var(--space-4); }
    .bd-lesson-head[b-wauqusvwr2] { flex-wrap: wrap; }
    .bd-flex1[b-wauqusvwr2] { flex: 1 1 100%; }
}
/* _content/Quote.UI/Components/Pages/Academy/CourseDetail.razor.rz.scp.css */
/* QuoteTrades Academy — course detail */

/* ---- Hero ----------------------------------------------------------------- */
.cp-hero[b-x4j2jx6tqu] {
    position: relative;
    isolation: isolate;
    background: linear-gradient(160deg, var(--neutral-900), #16283d 55%, var(--brand-900));
    color: #fff;
    padding: var(--space-6) var(--space-5) var(--space-10);
    overflow: hidden;
}

/* Photo layer + navy veil, mirroring HeroHeader's treatment so the course page reads as part
   of the same system. The veil is doing legibility work — don't lighten it without re-checking
   the subtitle contrast against a bright cover photo. */
.cp-hero-photo[b-x4j2jx6tqu] {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--cp-photo);
    background-size: cover;
    background-position: center;
    opacity: 0.35;
}

.cp-hero-veil[b-x4j2jx6tqu] {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(160deg, rgba(15, 25, 36, 0.92), rgba(22, 40, 61, 0.82) 55%, rgba(30, 58, 138, 0.88));
}

.cp-hero-inner[b-x4j2jx6tqu] {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
}

.cp-back[b-x4j2jx6tqu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    margin-bottom: var(--space-5);
    transition: color var(--dur-fast) var(--ease-out);
}

.cp-back:hover[b-x4j2jx6tqu] { color: #fff; }

.cp-hero-grid[b-x4j2jx6tqu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-8);
    align-items: start;
}

.cp-chips[b-x4j2jx6tqu] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-4);
}

.cp-chip[b-x4j2jx6tqu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.cp-chip-official[b-x4j2jx6tqu] { background: var(--brand-600); }
.cp-chip-soft[b-x4j2jx6tqu] { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); }

.cp-hero-text h1[b-x4j2jx6tqu] {
    font-size: var(--text-3xl);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-3);
    overflow-wrap: anywhere;
}

.cp-summary[b-x4j2jx6tqu] {
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 var(--space-5);
    max-width: 62ch;
}

.cp-meta[b-x4j2jx6tqu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-6);
}

.cp-meta span[b-x4j2jx6tqu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* A long business name shouldn't push the lesson count and duration off the row.
   The truncation lives on the inner span, not the wrapper: text-overflow is ignored on an
   inline-flex box, so putting it on the wrapper clips the name with no visible ellipsis. */
.cp-meta-author > span[b-x4j2jx6tqu] {
    /* `display: block` overrides the inline-flex from `.cp-meta span` above — text-overflow is
       ignored on a flex box, so without this the name is clipped with no ellipsis at all. */
    display: block;
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-actions[b-x4j2jx6tqu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.cp-btn-primary[b-x4j2jx6tqu],
.cp-btn-ghost[b-x4j2jx6tqu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.cp-btn-primary[b-x4j2jx6tqu] {
    background: var(--brand-600);
    color: #fff;
}

.cp-btn-primary:hover[b-x4j2jx6tqu] { background: var(--brand-500); }

.cp-btn-ghost[b-x4j2jx6tqu] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
}

.cp-btn-ghost:hover[b-x4j2jx6tqu] { background: rgba(255, 255, 255, 0.16); }

.cp-progress[b-x4j2jx6tqu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    max-width: 420px;
}

.cp-progress-bar[b-x4j2jx6tqu] {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.cp-progress-bar > span[b-x4j2jx6tqu] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #fff;
}

.cp-progress-label[b-x4j2jx6tqu] {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
}

/* Same ratio-box rule as the catalogue card: absolutely position the image so a portrait
   source can't stretch the box. */
.cp-hero-media[b-x4j2jx6tqu] {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-2xl);
    background: rgba(255, 255, 255, 0.06);
}

.cp-hero-media img[b-x4j2jx6tqu] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cp-noimg[b-x4j2jx6tqu] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.35);
}

/* ---- Body ----------------------------------------------------------------- */
.cp-body[b-x4j2jx6tqu] {
    max-width: 1140px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-5) var(--space-16);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-8);
    align-items: start;
}

.cp-lock-note[b-x4j2jx6tqu] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-md);
}

.cp-lock-note > i[b-x4j2jx6tqu] {
    font-size: 1.25rem;
    color: var(--color-primary);
}

.cp-lock-note div[b-x4j2jx6tqu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cp-lock-note strong[b-x4j2jx6tqu] { font-size: var(--text-base); color: var(--color-text); }
.cp-lock-note span[b-x4j2jx6tqu] { font-size: var(--text-sm); color: var(--color-text-muted); }

.cp-lock-btn[b-x4j2jx6tqu] {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

/* ---- Rating ---------------------------------------------------------------- */
.cp-rate[b-x4j2jx6tqu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.cp-rate-head[b-x4j2jx6tqu] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.cp-rate-head strong[b-x4j2jx6tqu] {
    font-size: var(--text-md);
    color: var(--color-text);
}

.cp-rate-head span[b-x4j2jx6tqu] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}

.cp-rate-stars[b-x4j2jx6tqu] { display: flex; gap: 2px; }

.cp-star-btn[b-x4j2jx6tqu] {
    border: none;
    background: transparent;
    padding: 2px;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--neutral-400);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.cp-star-btn:hover:not(:disabled)[b-x4j2jx6tqu] { transform: scale(1.12); }
.cp-star-btn.on[b-x4j2jx6tqu] { color: var(--warning-500); }
.cp-star-btn:disabled[b-x4j2jx6tqu] { cursor: default; opacity: 0.6; }

.cp-rate-note[b-x4j2jx6tqu] {
    flex: 1 1 100%;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.cp-rate-input[b-x4j2jx6tqu] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    resize: vertical;
}

.cp-rate-input:focus[b-x4j2jx6tqu] {
    outline: none;
    border-color: var(--color-primary);
}

.cp-rate-save[b-x4j2jx6tqu] {
    flex: 0 0 auto;
    padding: 9px 16px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: #fff;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}

.cp-rate-save:hover:not(:disabled)[b-x4j2jx6tqu] { background: var(--color-primary-hover); }
.cp-rate-save:disabled[b-x4j2jx6tqu] { opacity: 0.45; cursor: not-allowed; }

.cp-rate-error[b-x4j2jx6tqu] {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--danger-600);
}

.cp-star[b-x4j2jx6tqu] { color: var(--warning-500); }

/* ---- Reviews --------------------------------------------------------------- */
.cp-reviews[b-x4j2jx6tqu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--space-3);
}

.cp-review[b-x4j2jx6tqu] {
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.cp-review-stars[b-x4j2jx6tqu] {
    color: var(--warning-500);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.cp-review p[b-x4j2jx6tqu] {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
    overflow-wrap: anywhere;
}

.cp-review-by[b-x4j2jx6tqu] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.cp-section[b-x4j2jx6tqu] { margin-bottom: var(--space-8); }

.cp-section h2[b-x4j2jx6tqu] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}

.cp-section-sub[b-x4j2jx6tqu] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
}

.cp-desc[b-x4j2jx6tqu] {
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--color-text);
    white-space: pre-line;
    margin: 0;
}

/* ---- Modules + lessons ---------------------------------------------------- */
.cp-modules[b-x4j2jx6tqu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cp-module[b-x4j2jx6tqu] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cp-module-head[b-x4j2jx6tqu] {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
}

.cp-module-num[b-x4j2jx6tqu] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: var(--color-text);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

.cp-module-head h3[b-x4j2jx6tqu] {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0;
}

.cp-module-head p[b-x4j2jx6tqu] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 2px 0 0;
}

.cp-lessons[b-x4j2jx6tqu] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-lesson + .cp-lesson[b-x4j2jx6tqu] { border-top: 1px solid var(--neutral-200); }

.cp-lesson-row[b-x4j2jx6tqu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    text-decoration: none;
    color: var(--color-text);
    transition: background var(--dur-fast) var(--ease-out);
}

a.cp-lesson-row:hover[b-x4j2jx6tqu] { background: var(--color-primary-glow-soft); }

.cp-lesson-icon[b-x4j2jx6tqu] {
    flex: 0 0 auto;
    font-size: 1.05rem;
    color: var(--color-primary);
}

.cp-lesson.done .cp-lesson-icon[b-x4j2jx6tqu] { color: var(--success-600); }
.cp-lesson.locked .cp-lesson-icon[b-x4j2jx6tqu] { color: var(--neutral-400); }

.cp-lesson-title[b-x4j2jx6tqu] {
    flex: 1;
    min-width: 0;
    font-size: var(--text-base);
    line-height: var(--leading-snug);
}

.cp-lesson.locked .cp-lesson-title[b-x4j2jx6tqu] { color: var(--color-text-muted); }

.cp-free-tag[b-x4j2jx6tqu] {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--success-50);
    color: var(--success-600);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

.cp-lesson-time[b-x4j2jx6tqu] {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- Sidebar -------------------------------------------------------------- */
.cp-side[b-x4j2jx6tqu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: var(--space-5);
}

.cp-card[b-x4j2jx6tqu] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
}

.cp-card-icon[b-x4j2jx6tqu] {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    background: var(--brand-50);
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-bottom: var(--space-3);
}

.cp-card h3[b-x4j2jx6tqu] {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}

.cp-card p[b-x4j2jx6tqu] {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}

.cp-author[b-x4j2jx6tqu] {
    font-weight: var(--weight-semibold);
    color: var(--color-text) !important;
}

.cp-card-btn[b-x4j2jx6tqu] {
    display: block;
    text-align: center;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.cp-card-btn.ghost[b-x4j2jx6tqu] {
    background: var(--neutral-100);
    color: var(--color-text);
}

.cp-card-state[b-x4j2jx6tqu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.cp-card-state.done[b-x4j2jx6tqu] { color: var(--success-600); }

.cp-disclaimer[b-x4j2jx6tqu] {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--neutral-500);
    margin: 0;
    padding: 0 var(--space-2);
}

@media (max-width: 960px) {
    .cp-hero-grid[b-x4j2jx6tqu] { grid-template-columns: 1fr; }
    .cp-hero-media[b-x4j2jx6tqu] { max-width: 480px; }
    .cp-body[b-x4j2jx6tqu] { grid-template-columns: 1fr; }
    .cp-side[b-x4j2jx6tqu] { position: static; }
}

@media (max-width: 640px) {
    .cp-hero[b-x4j2jx6tqu] { padding: var(--space-5) var(--space-4) var(--space-8); }
    .cp-hero-text h1[b-x4j2jx6tqu] { font-size: var(--text-2xl); }
    .cp-body[b-x4j2jx6tqu] { padding: var(--space-6) var(--space-4) var(--space-12); }
}
/* _content/Quote.UI/Components/Pages/Academy/Learn.razor.rz.scp.css */
/* QuoteTrades Academy — public catalogue (/learn)
   Scoped CSS can't be shared between components, and this app's convention is that every page
   redefines .filter-bar / .fb-search-box itself (see the note in Academy.razor.css). The card
   rules below mirror the signed-in catalogue deliberately so the two surfaces look like the same
   product. */

.learn-body[b-0wihbyvyv0] {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-16);
}

/* ---- Intro copy (this is the page's SEO body, not decoration) -------------- */
.ln-intro[b-0wihbyvyv0] {
    max-width: 720px;
    margin: 0 auto var(--space-2);
    text-align: center;
}

.ln-intro h2[b-0wihbyvyv0] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.ln-intro p[b-0wihbyvyv0] {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}

.ln-intro-note[b-0wihbyvyv0] {
    font-size: var(--text-sm) !important;
    color: var(--color-text-muted);
    padding-top: var(--space-2);
}

/* ---- Filter row ------------------------------------------------------------ */
.filter-bar[b-0wihbyvyv0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-2);
}

.filter-left[b-0wihbyvyv0],
.filter-right[b-0wihbyvyv0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.filter-right[b-0wihbyvyv0] {
    flex: 1 1 260px;
    justify-content: flex-end;
}

.fb-search-box[b-0wihbyvyv0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 1 320px;
    min-width: 0;
    padding: 0 var(--space-4);
    height: 40px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.fb-search-box:focus-within[b-0wihbyvyv0] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow-soft);
}

.fb-search-box > i[b-0wihbyvyv0] {
    flex: 0 0 auto;
    font-size: 0.95rem;
    color: var(--neutral-500);
}

.fb-search-box input[b-0wihbyvyv0] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--color-text);
}

.fb-search-box input[b-0wihbyvyv0]::placeholder { color: var(--neutral-500); }

.clear-btn[b-0wihbyvyv0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.clear-btn:hover[b-0wihbyvyv0] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.ln-count[b-0wihbyvyv0] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: var(--space-4) 0 0;
}

.ln-count strong[b-0wihbyvyv0] { color: var(--color-text); }

/* ---- Course grid ----------------------------------------------------------- */
.ln-grid[b-0wihbyvyv0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.ln-card[b-0wihbyvyv0] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}

.ln-card:hover[b-0wihbyvyv0] {
    transform: translateY(-2px);
    border-color: var(--brand-200);
    box-shadow: var(--shadow-lg);
}

/* Absolutely positioned so a portrait source can't stretch the ratio box — see the longer note
   on the same rule in Academy.razor.css. */
.ln-card-media[b-0wihbyvyv0] {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--neutral-100);
}

.ln-card-media img[b-0wihbyvyv0] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-slow) var(--ease-out);
}

.ln-card:hover .ln-card-media img[b-0wihbyvyv0] { transform: scale(1.04); }

.ln-card-noimg[b-0wihbyvyv0] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2rem;
    color: var(--neutral-400);
    background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
}

.ln-badge[b-0wihbyvyv0] {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: rgba(37, 99, 235, 0.92);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    backdrop-filter: blur(6px);
}

.ln-card-body[b-0wihbyvyv0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-5);
    flex: 1;
}

.ln-card-chips[b-0wihbyvyv0] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ln-chip[b-0wihbyvyv0] {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.ln-chip-soft[b-0wihbyvyv0] {
    background: var(--neutral-100);
    color: var(--color-text-muted);
}

.ln-card-body h3[b-0wihbyvyv0] {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.ln-card-body p[b-0wihbyvyv0] {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.ln-card-author[b-0wihbyvyv0] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    min-width: 0;
}

.ln-card-author > i[b-0wihbyvyv0] { flex: 0 0 auto; }

.ln-card-author > span[b-0wihbyvyv0] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.ln-card-stats[b-0wihbyvyv0] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--neutral-200);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.ln-card-stats span[b-0wihbyvyv0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.ln-stars[b-0wihbyvyv0] {
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.ln-stars > i[b-0wihbyvyv0] { color: var(--warning-500); }

/* ---- Closing call to action ------------------------------------------------ */
.ln-cta[b-0wihbyvyv0] {
    max-width: 720px;
    margin: var(--space-16) auto 0;
    padding: var(--space-8) var(--space-6);
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.ln-cta h2[b-0wihbyvyv0] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.ln-cta p[b-0wihbyvyv0] {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-5);
}

.ln-cta-actions[b-0wihbyvyv0] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.ln-btn-primary[b-0wihbyvyv0],
.ln-btn-ghost[b-0wihbyvyv0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 var(--space-6);
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.ln-btn-primary[b-0wihbyvyv0] {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}

.ln-btn-primary:hover[b-0wihbyvyv0] { background: var(--color-primary-hover); }

.ln-btn-ghost[b-0wihbyvyv0] {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.ln-btn-ghost:hover[b-0wihbyvyv0] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (max-width: 720px) {
    .learn-body[b-0wihbyvyv0] { padding: var(--space-5) var(--space-3) var(--space-12); }
    .ln-cta[b-0wihbyvyv0] { padding: var(--space-6) var(--space-4); }
    .ln-btn-primary[b-0wihbyvyv0],
    .ln-btn-ghost[b-0wihbyvyv0] { width: 100%; }
}
/* _content/Quote.UI/Components/Pages/Academy/LearnCourse.razor.rz.scp.css */
/* QuoteTrades Academy — public course page (/learn/{slug}) */

.lc-loading[b-dlfd80rfl7] {
    display: grid;
    place-items: center;
    min-height: 50vh;
}

/* ---- Hero ------------------------------------------------------------------ */
.lc-hero[b-dlfd80rfl7] {
    background: linear-gradient(135deg, #0f2942, #17395c);
    color: #fff;
    padding: var(--space-10) var(--space-5) var(--space-12);
}

.lc-hero-inner[b-dlfd80rfl7] {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-10);
}

.lc-hero-text[b-dlfd80rfl7] { flex: 1 1 480px; min-width: 0; }

.lc-hero-img[b-dlfd80rfl7] {
    flex: 0 1 460px;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.lc-hero-img img[b-dlfd80rfl7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lc-back[b-dlfd80rfl7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.lc-back:hover[b-dlfd80rfl7] { color: #fff; }

.lc-chips[b-dlfd80rfl7] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-4);
}

.lc-chip[b-dlfd80rfl7] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.lc-chip-official[b-dlfd80rfl7] { background: var(--color-primary); }
.lc-chip-soft[b-dlfd80rfl7] { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); }

.lc-hero h1[b-dlfd80rfl7] {
    font-size: var(--text-4xl);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-3);
    overflow-wrap: anywhere;
}

.lc-summary[b-dlfd80rfl7] {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 var(--space-5);
    max-width: 620px;
}

.lc-meta[b-dlfd80rfl7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.8);
}

.lc-meta span[b-dlfd80rfl7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.lc-star[b-dlfd80rfl7] { color: var(--warning-500); }

.lc-actions[b-dlfd80rfl7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.lc-btn-primary[b-dlfd80rfl7],
.lc-btn-ghost[b-dlfd80rfl7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 var(--space-6);
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.lc-btn-primary[b-dlfd80rfl7] {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}

.lc-btn-primary:hover[b-dlfd80rfl7] { background: var(--color-primary-hover); }

.lc-btn-ghost[b-dlfd80rfl7] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.lc-btn-ghost:hover[b-dlfd80rfl7] { background: rgba(255, 255, 255, 0.16); }

/* ---- Body ------------------------------------------------------------------ */
.lc-body[b-dlfd80rfl7] {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-5) var(--space-16);
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
}

.lc-main[b-dlfd80rfl7] { flex: 1 1 auto; min-width: 0; }
.lc-side[b-dlfd80rfl7] { flex: 0 0 320px; position: sticky; top: var(--space-5); }

.lc-section[b-dlfd80rfl7] { margin-bottom: var(--space-8); }

.lc-section h2[b-dlfd80rfl7] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.lc-desc[b-dlfd80rfl7] {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
    margin: 0;
    white-space: pre-line;
}

.lc-outline-note[b-dlfd80rfl7] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
}

/* ---- Outline --------------------------------------------------------------- */
.lc-modules[b-dlfd80rfl7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.lc-module[b-dlfd80rfl7] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.lc-module-head[b-dlfd80rfl7] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.lc-module-num[b-dlfd80rfl7] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

.lc-module-head h3[b-dlfd80rfl7] {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
    overflow-wrap: anywhere;
}

.lc-module-head p[b-dlfd80rfl7] {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 3px 0 0;
}

.lc-lessons[b-dlfd80rfl7] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lc-lesson + .lc-lesson[b-dlfd80rfl7] { border-top: 1px solid var(--color-border); }

.lc-lesson a[b-dlfd80rfl7],
.lc-lesson div[b-dlfd80rfl7] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 11px var(--space-5);
    text-decoration: none;
    color: var(--color-text-muted);
}

.lc-lesson a[b-dlfd80rfl7] {
    color: var(--color-text);
    transition: background var(--dur-fast) var(--ease-out);
}

.lc-lesson a:hover[b-dlfd80rfl7] { background: var(--color-hover); }

.lc-lesson > * > i[b-dlfd80rfl7] { flex: 0 0 auto; font-size: 0.9rem; }
.lc-lesson.is-free > a > i[b-dlfd80rfl7] { color: var(--success-600); }

.lc-lesson-title[b-dlfd80rfl7] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.lc-free-tag[b-dlfd80rfl7] {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--success-50);
    color: var(--success-600);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

.lc-lesson-mins[b-dlfd80rfl7] {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ---- Sidebar --------------------------------------------------------------- */
.lc-card[b-dlfd80rfl7] {
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.lc-card h3[b-dlfd80rfl7] {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.lc-list[b-dlfd80rfl7] {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lc-list li[b-dlfd80rfl7] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
}

.lc-list li > i[b-dlfd80rfl7] {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--success-600);
}

.lc-btn-block[b-dlfd80rfl7] { width: 100%; }

.lc-side-link[b-dlfd80rfl7] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-primary);
    text-decoration: none;
}

.lc-side-link:hover[b-dlfd80rfl7] { text-decoration: underline; }

.lc-author-name[b-dlfd80rfl7] {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.lc-author-bio[b-dlfd80rfl7] {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 4px 0 0;
}

.lc-disclaimer[b-dlfd80rfl7] {
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
    margin: 0;
    padding: 0 var(--space-2);
}

@media (max-width: 1000px) {
    .lc-hero-inner[b-dlfd80rfl7] { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
    .lc-hero-img[b-dlfd80rfl7] { flex: 1 1 auto; width: 100%; }
    .lc-body[b-dlfd80rfl7] { flex-direction: column; }
    .lc-side[b-dlfd80rfl7] { flex: 1 1 auto; width: 100%; position: static; }
}

@media (max-width: 720px) {
    .lc-hero[b-dlfd80rfl7] { padding: var(--space-6) var(--space-4) var(--space-8); }
    .lc-hero h1[b-dlfd80rfl7] { font-size: var(--text-2xl); }
    .lc-summary[b-dlfd80rfl7] { font-size: var(--text-base); }
    .lc-body[b-dlfd80rfl7] { padding: var(--space-6) var(--space-3) var(--space-12); }
    .lc-btn-primary[b-dlfd80rfl7], .lc-btn-ghost[b-dlfd80rfl7] { width: 100%; }
}
/* _content/Quote.UI/Components/Pages/Academy/LearnLesson.razor.rz.scp.css */
/* QuoteTrades Academy — public free-preview lesson (/learn/{slug}/{lessonSlug})
   Content rules mirror Lesson.razor.css so a preview reads exactly like the real thing —
   scoped CSS can't be shared between components, so they're restated here. */

.ll-loading[b-817cckzwrk] {
    display: grid;
    place-items: center;
    min-height: 50vh;
}

.ll-wrap[b-817cckzwrk] {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-5) var(--space-16);
}

.ll-back[b-817cckzwrk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.ll-back:hover[b-817cckzwrk] { color: var(--color-primary); }

/* ---- Head ------------------------------------------------------------------ */
.ll-head[b-817cckzwrk] { margin-bottom: var(--space-8); }

.ll-eyebrow[b-817cckzwrk] {
    display: inline-block;
    margin-bottom: var(--space-2);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--success-50);
    color: var(--success-600);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.ll-head h1[b-817cckzwrk] {
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
    overflow-wrap: anywhere;
}

.ll-readtime[b-817cckzwrk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ---- Content --------------------------------------------------------------- */
.ll-content[b-817cckzwrk] { font-size: 1.0625rem; }

.ll-p[b-817cckzwrk] {
    line-height: 1.75;
    color: var(--color-text);
    margin: 0 0 var(--space-5);
    overflow-wrap: anywhere;
}

.ll-h2[b-817cckzwrk] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: var(--space-8) 0 var(--space-3);
}

.ll-figure[b-817cckzwrk] { margin: var(--space-6) 0; }

.ll-figure img[b-817cckzwrk] {
    width: 100%;
    border-radius: var(--radius-md);
    display: block;
    box-shadow: var(--shadow-sm);
}

.ll-figure figcaption[b-817cckzwrk] {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

/* ---- Callouts -------------------------------------------------------------- */
.ll-callout[b-817cckzwrk] {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    margin: var(--space-6) 0;
    border-radius: var(--radius-md);
    border-left: 4px solid;
}

.ll-callout > i[b-817cckzwrk] {
    flex: 0 0 auto;
    font-size: 1.1rem;
    line-height: 1.5;
}

.ll-callout strong[b-817cckzwrk] {
    display: block;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: 4px;
}

.ll-callout p[b-817cckzwrk] {
    margin: 0;
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--color-text);
}

.ll-callout.tip[b-817cckzwrk] {
    background: var(--brand-50);
    border-left-color: var(--brand-600);
}

.ll-callout.tip > i[b-817cckzwrk],
.ll-callout.tip strong[b-817cckzwrk] { color: var(--brand-700); }

.ll-callout.warning[b-817cckzwrk] {
    background: var(--warning-50);
    border-left-color: var(--warning-600);
}

.ll-callout.warning > i[b-817cckzwrk],
.ll-callout.warning strong[b-817cckzwrk] { color: var(--warning-600); }

/* ---- Lists ----------------------------------------------------------------- */
.ll-list[b-817cckzwrk] {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.ll-list h3[b-817cckzwrk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}

.ll-list ul[b-817cckzwrk],
.ll-list ol[b-817cckzwrk] {
    margin: 0;
    padding-left: 1.35rem;
}

.ll-list li[b-817cckzwrk] {
    font-size: var(--text-md);
    line-height: 1.65;
    color: var(--color-text);
    margin-bottom: 6px;
}

.ll-list li:last-child[b-817cckzwrk] { margin-bottom: 0; }

.ll-list.steps ol[b-817cckzwrk] {
    counter-reset: step;
    list-style: none;
    padding-left: 0;
}

.ll-list.steps li[b-817cckzwrk] {
    counter-increment: step;
    position: relative;
    padding-left: 2.25rem;
    margin-bottom: var(--space-3);
}

.ll-list.steps li[b-817cckzwrk]::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

/* ---- The wall -------------------------------------------------------------- */
.ll-wall[b-817cckzwrk] {
    margin-top: var(--space-10);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.ll-wall > i[b-817cckzwrk] {
    font-size: 2rem;
    color: var(--color-primary);
}

.ll-wall h2[b-817cckzwrk] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: var(--space-3) 0 var(--space-2);
}

.ll-wall p[b-817cckzwrk] {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
}

.ll-wall p strong[b-817cckzwrk] { color: var(--color-text); }

.ll-wall-sub[b-817cckzwrk] {
    font-size: var(--text-sm) !important;
    margin-bottom: var(--space-5) !important;
}

.ll-wall-actions[b-817cckzwrk] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.ll-btn-primary[b-817cckzwrk],
.ll-btn-ghost[b-817cckzwrk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 var(--space-6);
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.ll-btn-primary[b-817cckzwrk] {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}

.ll-btn-primary:hover[b-817cckzwrk] { background: var(--color-primary-hover); }

.ll-btn-ghost[b-817cckzwrk] {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.ll-btn-ghost:hover[b-817cckzwrk] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.ll-disclaimer[b-817cckzwrk] {
    margin: var(--space-6) 0 0;
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
    text-align: center;
}

@media (max-width: 720px) {
    .ll-wrap[b-817cckzwrk] { padding: var(--space-6) var(--space-3) var(--space-12); }
    .ll-wall[b-817cckzwrk] { padding: var(--space-6) var(--space-4); }
    .ll-btn-primary[b-817cckzwrk], .ll-btn-ghost[b-817cckzwrk] { width: 100%; }
}
/* _content/Quote.UI/Components/Pages/Academy/Lesson.razor.rz.scp.css */
/* QuoteTrades Academy — lesson reader.
   Reading is the whole job here: one measured column, generous line height, and callouts
   that stand out on a phone in bad light without shouting. */

.lesson-page[b-b4woy9yjse] {
    min-height: 60vh;
    background: var(--color-surface);
}

/* ---- Top bar -------------------------------------------------------------- */
.ls-topbar[b-b4woy9yjse] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}

.ls-crumb[b-b4woy9yjse] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    min-width: 0;
}

.ls-crumb span[b-b4woy9yjse] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ls-crumb:hover[b-b4woy9yjse] { color: var(--color-primary); }

.ls-topbar-progress[b-b4woy9yjse] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.ls-topbar-progress span[b-b4woy9yjse] {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.ls-bar[b-b4woy9yjse] {
    width: 120px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--neutral-200);
    overflow: hidden;
}

.ls-bar > span[b-b4woy9yjse] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
    transition: width var(--dur-slow) var(--ease-out);
}

/* ---- Article -------------------------------------------------------------- */
.ls-article[b-b4woy9yjse] {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-5) var(--space-16);
}

.ls-head[b-b4woy9yjse] { margin-bottom: var(--space-8); }

.ls-head h1[b-b4woy9yjse] {
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}

.ls-readtime[b-b4woy9yjse] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.ls-content[b-b4woy9yjse] { font-size: 1.0625rem; }

.ls-p[b-b4woy9yjse] {
    line-height: 1.75;
    color: var(--color-text);
    margin: 0 0 var(--space-5);
}

.ls-h2[b-b4woy9yjse] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: var(--space-8) 0 var(--space-3);
}

.ls-empty[b-b4woy9yjse] {
    color: var(--color-text-muted);
    font-style: italic;
}

/* ---- Images --------------------------------------------------------------- */
.ls-figure[b-b4woy9yjse] {
    margin: var(--space-6) 0;
}

.ls-figure img[b-b4woy9yjse] {
    width: 100%;
    border-radius: var(--radius-md);
    display: block;
    box-shadow: var(--shadow-sm);
}

.ls-figure figcaption[b-b4woy9yjse] {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

/* ---- Callouts ------------------------------------------------------------- */
.ls-callout[b-b4woy9yjse] {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    margin: var(--space-6) 0;
    border-radius: var(--radius-md);
    border-left: 4px solid;
}

.ls-callout > i[b-b4woy9yjse] {
    flex: 0 0 auto;
    font-size: 1.1rem;
    line-height: 1.5;
}

.ls-callout strong[b-b4woy9yjse] {
    display: block;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: 4px;
}

.ls-callout p[b-b4woy9yjse] {
    margin: 0;
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--color-text);
}

.ls-callout.tip[b-b4woy9yjse] {
    background: var(--brand-50);
    border-left-color: var(--brand-600);
}

.ls-callout.tip > i[b-b4woy9yjse],
.ls-callout.tip strong[b-b4woy9yjse] { color: var(--brand-700); }

.ls-callout.warning[b-b4woy9yjse] {
    background: var(--warning-50);
    border-left-color: var(--warning-600);
}

.ls-callout.warning > i[b-b4woy9yjse],
.ls-callout.warning strong[b-b4woy9yjse] { color: var(--warning-600); }

/* ---- Lists ---------------------------------------------------------------- */
.ls-list[b-b4woy9yjse] {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.ls-list h3[b-b4woy9yjse] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}

.ls-list ul[b-b4woy9yjse],
.ls-list ol[b-b4woy9yjse] {
    margin: 0;
    padding-left: 1.35rem;
}

.ls-list li[b-b4woy9yjse] {
    font-size: var(--text-md);
    line-height: 1.65;
    color: var(--color-text);
    margin-bottom: 6px;
}

.ls-list li:last-child[b-b4woy9yjse] { margin-bottom: 0; }

.ls-list.steps ol[b-b4woy9yjse] {
    counter-reset: step;
    list-style: none;
    padding-left: 0;
}

.ls-list.steps li[b-b4woy9yjse] {
    counter-increment: step;
    position: relative;
    padding-left: 2.25rem;
    margin-bottom: var(--space-3);
}

.ls-list.steps li[b-b4woy9yjse]::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

/* ---- Footer --------------------------------------------------------------- */
.ls-footer[b-b4woy9yjse] {
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.ls-done[b-b4woy9yjse] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--success-600);
}

.ls-nav[b-b4woy9yjse] {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
}

.ls-nav-btn[b-b4woy9yjse] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out);
}

.ls-nav-btn:hover[b-b4woy9yjse] { background: var(--color-hover); }

.ls-nav-btn.primary[b-b4woy9yjse] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.ls-nav-btn.primary:hover[b-b4woy9yjse] { background: var(--color-primary-hover); }

.ls-btn-primary[b-b4woy9yjse],
.ls-btn-ghost[b-b4woy9yjse] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out);
}

.ls-btn-primary[b-b4woy9yjse] {
    background: var(--color-primary);
    color: #fff;
}

.ls-btn-primary:hover:not(:disabled)[b-b4woy9yjse] { background: var(--color-primary-hover); }
.ls-btn-primary:disabled[b-b4woy9yjse] { opacity: 0.6; cursor: default; }

.ls-btn-ghost[b-b4woy9yjse] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.ls-btn-ghost:hover[b-b4woy9yjse] { background: var(--color-hover); }

/* ---- Upgrade wall --------------------------------------------------------- */
.ls-wall[b-b4woy9yjse] {
    display: grid;
    place-items: center;
    padding: var(--space-16) var(--space-5);
    min-height: 60vh;
}

.ls-wall-card[b-b4woy9yjse] {
    max-width: 520px;
    text-align: center;
    padding: var(--space-10) var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.ls-wall-icon[b-b4woy9yjse] {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-5);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--brand-800), var(--brand-600));
    color: #fff;
    font-size: 1.6rem;
}

.ls-wall-card h1[b-b4woy9yjse] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.ls-wall-card p[b-b4woy9yjse] {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
}

.ls-wall-actions[b-b4woy9yjse] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

@media (max-width: 640px) {
    .ls-article[b-b4woy9yjse] { padding: var(--space-6) var(--space-4) var(--space-12); }
    .ls-bar[b-b4woy9yjse] { width: 72px; }
    .ls-footer[b-b4woy9yjse] { flex-direction: column; align-items: stretch; }
    .ls-nav[b-b4woy9yjse] { margin-left: 0; }
    .ls-nav-btn[b-b4woy9yjse] { flex: 1; justify-content: center; }
}
/* _content/Quote.UI/Components/Pages/Academy/MyLearning.razor.rz.scp.css */
/* QuoteTrades Academy — my learning */

.ml-body[b-v4z2j9u7w6] {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-16);
}

.ml-section[b-v4z2j9u7w6] { margin-bottom: var(--space-10); }

.ml-section h2[b-v4z2j9u7w6] {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}

.ml-sub[b-v4z2j9u7w6] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
}

.ml-list[b-v4z2j9u7w6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ml-row[b-v4z2j9u7w6] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.ml-row:hover[b-v4z2j9u7w6] {
    border-color: var(--brand-300);
    box-shadow: var(--shadow-sm);
}

.ml-row.assigned[b-v4z2j9u7w6] { border-left: 3px solid var(--color-primary); }

.ml-row-main[b-v4z2j9u7w6] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ml-row-title[b-v4z2j9u7w6] {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

/* Course title + author are user-supplied and unbounded — keep the meta to one line so the
   progress bar and status chip stay aligned down the column. */
.ml-row-meta[b-v4z2j9u7w6] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ml-row-progress[b-v4z2j9u7w6] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 150px;
}

.ml-bar[b-v4z2j9u7w6] {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--neutral-200);
    overflow: hidden;
}

.ml-bar > span[b-v4z2j9u7w6] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.ml-pct[b-v4z2j9u7w6] {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 34px;
    text-align: right;
}

.ml-status[b-v4z2j9u7w6] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    background: var(--neutral-100);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.ml-status.done[b-v4z2j9u7w6] { background: var(--success-50); color: var(--success-600); }
.ml-status.overdue[b-v4z2j9u7w6] { background: var(--danger-50); color: var(--danger-600); }

/* ---- Certificates --------------------------------------------------------- */
.ml-certs[b-v4z2j9u7w6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
    gap: var(--space-3);
}

.ml-cert[b-v4z2j9u7w6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.ml-cert-icon[b-v4z2j9u7w6] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--warning-500), var(--warning-600));
    color: #fff;
    font-size: 1.1rem;
}

/* Basis keeps the title on one or two lines before the actions wrap below it, rather than
   the actions holding their width and squeezing the name into a narrow column. */
.ml-cert-text[b-v4z2j9u7w6] {
    flex: 1 1 180px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ml-cert-title[b-v4z2j9u7w6] {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

.ml-cert-meta[b-v4z2j9u7w6] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ml-cert-actions[b-v4z2j9u7w6] {
    flex: 0 0 auto;
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
}

.ml-cert-btn[b-v4z2j9u7w6] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}

.ml-cert-btn:hover[b-v4z2j9u7w6] { background: var(--color-hover); }

/* Secondary to the PDF download — the same shape, quieter ink, so the primary action
   still reads first. */
.ml-cert-btn-ghost[b-v4z2j9u7w6] {
    color: var(--color-text-muted);
    text-decoration: none;
}

.ml-cert-btn-ghost:hover[b-v4z2j9u7w6] { color: var(--color-text); }

@media (max-width: 720px) {
    .ml-body[b-v4z2j9u7w6] { padding: var(--space-4) var(--space-3) var(--space-12); }

    .ml-row[b-v4z2j9u7w6] { flex-wrap: wrap; }
    .ml-row-main[b-v4z2j9u7w6] { flex: 1 1 100%; }
    .ml-row-progress[b-v4z2j9u7w6] { width: auto; flex: 1; }
    .ml-certs[b-v4z2j9u7w6] { grid-template-columns: 1fr; }
}
/* _content/Quote.UI/Components/Pages/Academy/Quiz.razor.rz.scp.css */
/* QuoteTrades Academy — quiz + result */

.quiz-page[b-x4h4rjic4b] {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-5) var(--space-16);
}

/* ---- Taking the quiz ------------------------------------------------------ */
.qz-head[b-x4h4rjic4b] { margin-bottom: var(--space-8); }

.qz-back[b-x4h4rjic4b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    margin-bottom: var(--space-4);
}

.qz-back:hover[b-x4h4rjic4b] { color: var(--color-primary); }

.qz-head h1[b-x4h4rjic4b] {
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}

.qz-head p[b-x4h4rjic4b] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.qz-questions[b-x4h4rjic4b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.qz-q[b-x4h4rjic4b] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin: 0;
    background: var(--color-surface);
    transition: border-color var(--dur-fast) var(--ease-out);
}

.qz-q.missing[b-x4h4rjic4b] { border-color: var(--warning-500); }

.qz-q legend[b-x4h4rjic4b] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--color-text);
    padding: 0;
    margin-bottom: var(--space-4);
}

.qz-q-num[b-x4h4rjic4b] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-text);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

.qz-option[b-x4h4rjic4b] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}

.qz-option:last-child[b-x4h4rjic4b] { margin-bottom: 0; }

.qz-option:hover[b-x4h4rjic4b] { border-color: var(--brand-300); background: var(--color-primary-glow-soft); }

.qz-option.selected[b-x4h4rjic4b] {
    border-color: var(--color-primary);
    background: var(--brand-50);
}

.qz-option input[b-x4h4rjic4b] { position: absolute; opacity: 0; pointer-events: none; }

.qz-option-mark[b-x4h4rjic4b] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--neutral-400);
    position: relative;
    transition: border-color var(--dur-fast) var(--ease-out);
}

.qz-option.selected .qz-option-mark[b-x4h4rjic4b] { border-color: var(--color-primary); }

.qz-option.selected .qz-option-mark[b-x4h4rjic4b]::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--color-primary);
}

.qz-option-text[b-x4h4rjic4b] {
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--color-text);
}

.qz-warn[b-x4h4rjic4b] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: var(--space-5) 0 0;
    padding: var(--space-3) var(--space-4);
    background: var(--warning-50);
    border: 1px solid var(--warning-500);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--warning-600);
    font-weight: var(--weight-medium);
}

.qz-submit[b-x4h4rjic4b] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.qz-answered[b-x4h4rjic4b] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- Buttons -------------------------------------------------------------- */
.qz-btn-primary[b-x4h4rjic4b],
.qz-btn-ghost[b-x4h4rjic4b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out);
}

.qz-btn-primary[b-x4h4rjic4b] { background: var(--color-primary); color: #fff; }
.qz-btn-primary:hover:not(:disabled)[b-x4h4rjic4b] { background: var(--color-primary-hover); }
.qz-btn-primary:disabled[b-x4h4rjic4b] { opacity: 0.6; cursor: default; }

.qz-btn-ghost[b-x4h4rjic4b] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.qz-btn-ghost:hover[b-x4h4rjic4b] { background: var(--color-hover); }

/* ---- Result --------------------------------------------------------------- */
.qz-result-card[b-x4h4rjic4b] {
    text-align: center;
    padding: var(--space-10) var(--space-8);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-8);
}

.qz-result-card.pass[b-x4h4rjic4b] { border-color: var(--success-500); }
.qz-result-card.fail[b-x4h4rjic4b] { border-color: var(--warning-500); }

.qz-result-icon[b-x4h4rjic4b] {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: #fff;
}

.qz-result-card.pass .qz-result-icon[b-x4h4rjic4b] { background: var(--success-600); }
.qz-result-card.fail .qz-result-icon[b-x4h4rjic4b] { background: var(--warning-600); }

.qz-score[b-x4h4rjic4b] {
    display: block;
    font-size: var(--text-4xl);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.qz-result-card h1[b-x4h4rjic4b] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: var(--space-2) 0 var(--space-3);
}

.qz-result-card p[b-x4h4rjic4b] {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 0 auto var(--space-6);
    max-width: 46ch;
}

.qz-result-actions[b-x4h4rjic4b] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.qz-review h2[b-x4h4rjic4b] {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-4);
}

.qz-review-item[b-x4h4rjic4b] {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-3);
    background: var(--color-surface);
}

.qz-review-item.right[b-x4h4rjic4b] { border-left: 4px solid var(--success-600); }
.qz-review-item.wrong[b-x4h4rjic4b] { border-left: 4px solid var(--danger-600); }

.qz-review-head[b-x4h4rjic4b] {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}

.qz-review-head i[b-x4h4rjic4b] { line-height: 1.5; }
.qz-review-item.right .qz-review-head i[b-x4h4rjic4b] { color: var(--success-600); }
.qz-review-item.wrong .qz-review-head i[b-x4h4rjic4b] { color: var(--danger-600); }

.qz-review-q[b-x4h4rjic4b] {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    color: var(--color-text);
}

.qz-review-correct[b-x4h4rjic4b],
.qz-review-why[b-x4h4rjic4b] {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin: var(--space-2) 0 0;
    padding-left: 1.5rem;
}

.qz-review-correct[b-x4h4rjic4b] { color: var(--color-text); }
.qz-review-why[b-x4h4rjic4b] { color: var(--color-text-muted); }

@media (max-width: 640px) {
    .quiz-page[b-x4h4rjic4b] { padding: var(--space-5) var(--space-4) var(--space-12); }
    .qz-submit[b-x4h4rjic4b] { flex-direction: column; align-items: stretch; }
    .qz-btn-primary[b-x4h4rjic4b] { justify-content: center; }
    .qz-answered[b-x4h4rjic4b] { text-align: center; }
}
/* _content/Quote.UI/Components/Pages/Academy/TeamTraining.razor.rz.scp.css */
/* QuoteTrades Academy — team training */

.tt-body[b-x419v1zlkq] {
    max-width: 940px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-16);
}

.tt-toast[b-x419v1zlkq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--success-50);
    color: var(--success-600);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.tt-toast button[b-x419v1zlkq] {
    margin-left: auto;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* ---- Upsell --------------------------------------------------------------- */
.tt-upsell[b-x419v1zlkq] {
    text-align: center;
    max-width: 520px;
    margin: var(--space-8) auto;
    padding: var(--space-10) var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.tt-upsell-icon[b-x419v1zlkq] {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-5);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--brand-800), var(--brand-600));
    color: #fff;
    font-size: 1.5rem;
}

.tt-upsell h2[b-x419v1zlkq] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.tt-upsell p[b-x419v1zlkq] {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
}

/* ---- Summary -------------------------------------------------------------- */
.tt-summary[b-x419v1zlkq] {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.tt-stat[b-x419v1zlkq] {
    flex: 1;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
}

.tt-stat.alert[b-x419v1zlkq] { border-color: var(--danger-500); background: var(--danger-50); }

.tt-stat-val[b-x419v1zlkq] {
    display: block;
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.tt-stat.alert .tt-stat-val[b-x419v1zlkq] { color: var(--danger-600); }

.tt-stat-lbl[b-x419v1zlkq] {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
}

/* ---- Course groups -------------------------------------------------------- */
.tt-list[b-x419v1zlkq] { display: flex; flex-direction: column; gap: var(--space-4); }

.tt-course[b-x419v1zlkq] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.tt-course-head[b-x419v1zlkq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
}

.tt-course-head h3[b-x419v1zlkq] {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tt-course-head span[b-x419v1zlkq] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.tt-person[b-x419v1zlkq] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--neutral-200);
}

.tt-person:last-child[b-x419v1zlkq] { border-bottom: none; }

.tt-person-name[b-x419v1zlkq] {
    flex: 1;
    min-width: 0;
    font-size: var(--text-base);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-person-progress[b-x419v1zlkq] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 140px;
}

.tt-bar[b-x419v1zlkq] {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--neutral-200);
    overflow: hidden;
}

.tt-bar > span[b-x419v1zlkq] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.tt-pct[b-x419v1zlkq] {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}

.tt-due[b-x419v1zlkq] {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.tt-status[b-x419v1zlkq] {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--neutral-100);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.tt-status.done[b-x419v1zlkq] { background: var(--success-50); color: var(--success-600); }
.tt-status.overdue[b-x419v1zlkq] { background: var(--danger-50); color: var(--danger-600); }
.tt-status.active[b-x419v1zlkq] { background: var(--brand-50); color: var(--brand-700); }

.tt-icon-btn[b-x419v1zlkq] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.tt-icon-btn:hover[b-x419v1zlkq] { background: var(--danger-50); color: var(--danger-600); }

/* ---- Assign modal --------------------------------------------------------- */
.tt-overlay[b-x419v1zlkq] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 23, 42, 0.5);
    display: grid;
    place-items: center;
    padding: var(--space-4);
}

.tt-modal[b-x419v1zlkq] {
    width: min(560px, 100%);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
}

.tt-modal-head[b-x419v1zlkq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.tt-modal-head h2[b-x419v1zlkq] {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0;
}

.tt-modal-body[b-x419v1zlkq] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
}

.tt-field[b-x419v1zlkq] { margin-bottom: var(--space-5); }

.tt-field label[b-x419v1zlkq] {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: 6px;
}

.tt-field select[b-x419v1zlkq],
.tt-field input[type="text"][b-x419v1zlkq],
.tt-field input[type="date"][b-x419v1zlkq] {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--color-surface);
}

.tt-field select:focus[b-x419v1zlkq],
.tt-field input:focus[b-x419v1zlkq] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow-soft);
}

.tt-people[b-x419v1zlkq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.tt-person-pick[b-x419v1zlkq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}

.tt-person-pick:hover[b-x419v1zlkq] { background: var(--color-hover); }
.tt-person-pick.on[b-x419v1zlkq] { background: var(--brand-50); }

.tt-person-pick input[b-x419v1zlkq] { position: absolute; opacity: 0; pointer-events: none; }

.tt-check[b-x419v1zlkq] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-xs);
    border: 2px solid var(--neutral-400);
    display: grid;
    place-items: center;
    color: transparent;
    font-size: 12px;
}

.tt-person-pick.on .tt-check[b-x419v1zlkq] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.tt-person-pick-name[b-x419v1zlkq] {
    flex: 1;
    font-size: var(--text-base);
    color: var(--color-text);
}

.tt-person-pick-role[b-x419v1zlkq] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.tt-none[b-x419v1zlkq] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: var(--space-2);
}

.tt-error[b-x419v1zlkq] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--danger-600);
    margin: 0;
}

.tt-modal-foot[b-x419v1zlkq] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-2);
}

.tt-btn-primary[b-x419v1zlkq],
.tt-btn-ghost[b-x419v1zlkq] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}

.tt-btn-primary[b-x419v1zlkq] { background: var(--color-primary); color: #fff; }
.tt-btn-primary:hover:not(:disabled)[b-x419v1zlkq] { background: var(--color-primary-hover); }
.tt-btn-primary:disabled[b-x419v1zlkq] { opacity: 0.6; cursor: default; }

.tt-btn-ghost[b-x419v1zlkq] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.tt-btn-ghost:hover[b-x419v1zlkq] { background: var(--color-hover); }

@media (max-width: 640px) {
    .tt-body[b-x419v1zlkq] { padding: var(--space-4) var(--space-3) var(--space-12); }
    .tt-summary[b-x419v1zlkq] { flex-wrap: wrap; }
    .tt-person[b-x419v1zlkq] { flex-wrap: wrap; }
    .tt-person-name[b-x419v1zlkq] { flex: 1 1 100%; }
}
/* _content/Quote.UI/Components/Pages/Academy/VerifyCertificate.razor.rz.scp.css */
.vc-wrap[b-vr7wx3oi3l] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    background: var(--color-canvas);
}

.vc-card[b-vr7wx3oi3l] {
    width: 100%;
    max-width: 560px;
    padding: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.vc-brand[b-vr7wx3oi3l] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--brand-600);
}

.vc-brand i[b-vr7wx3oi3l] { font-size: 1.1rem; }

.vc-card h1[b-vr7wx3oi3l] {
    margin: 0 0 6px;
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.vc-lede[b-vr7wx3oi3l] {
    margin: 0 0 var(--space-5);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
}

/* ---- Form ------------------------------------------------------------------ */
.vc-form[b-vr7wx3oi3l] { display: flex; gap: var(--space-2); }

.vc-input[b-vr7wx3oi3l] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 14px;
    font-size: var(--text-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.04em;
    color: var(--color-text);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.vc-input:focus[b-vr7wx3oi3l] {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-100);
}

.vc-input[b-vr7wx3oi3l]::placeholder { color: var(--color-text-muted); letter-spacing: normal; }

.vc-btn[b-vr7wx3oi3l] {
    flex: 0 0 auto;
    min-width: 96px;
    padding: 11px 20px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: #fff;
    background: var(--brand-600);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}

.vc-btn:hover:not(:disabled)[b-vr7wx3oi3l] { background: var(--brand-700); }
.vc-btn:disabled[b-vr7wx3oi3l] { opacity: 0.55; cursor: not-allowed; }

/* ---- Result banner --------------------------------------------------------- */
.vc-result[b-vr7wx3oi3l] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
}

.vc-result i[b-vr7wx3oi3l] { font-size: 1.4rem; line-height: 1.2; flex: 0 0 auto; }
.vc-result div[b-vr7wx3oi3l] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vc-result strong[b-vr7wx3oi3l] { font-size: var(--text-md); }
.vc-result span[b-vr7wx3oi3l] { font-size: var(--text-sm); line-height: var(--leading-normal); }
.vc-result code[b-vr7wx3oi3l] {
    padding: 1px 5px;
    font-size: 0.85em;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
}

.vc-valid[b-vr7wx3oi3l] {
    background: var(--success-50);
    border-color: var(--success-500);
    color: var(--success-600);
}

.vc-notfound[b-vr7wx3oi3l] {
    background: var(--danger-50);
    border-color: var(--danger-500);
    color: var(--danger-600);
}

.vc-error[b-vr7wx3oi3l] {
    background: var(--warning-50);
    border-color: var(--warning-500);
    color: var(--warning-600);
}

/* The body copy under each headline carries the actual instruction ("check for typos…"),
   so it stays readable ink rather than inheriting the banner's status colour. */
.vc-result span[b-vr7wx3oi3l] { color: var(--color-text); }

/* ---- Details --------------------------------------------------------------- */
.vc-details[b-vr7wx3oi3l] {
    margin: var(--space-5) 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vc-details > div[b-vr7wx3oi3l] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 11px 0;
    border-bottom: 1px solid var(--color-border);
}

.vc-details > div:last-child[b-vr7wx3oi3l] { border-bottom: none; }

.vc-details dt[b-vr7wx3oi3l] {
    flex: 0 0 auto;
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
}

.vc-details dd[b-vr7wx3oi3l] {
    margin: 0;
    text-align: right;
    font-size: var(--text-sm);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.vc-strong[b-vr7wx3oi3l] { font-weight: var(--weight-semibold); font-size: var(--text-md) !important; }
.vc-mono[b-vr7wx3oi3l] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.03em; }

.vc-disclaimer[b-vr7wx3oi3l] {
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

.vc-foot[b-vr7wx3oi3l] {
    margin-top: var(--space-6);
    text-align: center;
}

.vc-foot a[b-vr7wx3oi3l] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-decoration: none;
}

.vc-foot a:hover[b-vr7wx3oi3l] { color: var(--brand-600); }

@media (max-width: 560px) {
    .vc-card[b-vr7wx3oi3l] { padding: var(--space-5); }
    .vc-form[b-vr7wx3oi3l] { flex-direction: column; }
    .vc-btn[b-vr7wx3oi3l] { width: 100%; }
    .vc-details > div[b-vr7wx3oi3l] { flex-direction: column; align-items: flex-start; gap: 2px; }
    .vc-details dd[b-vr7wx3oi3l] { text-align: left; }
}
/* _content/Quote.UI/Components/Pages/Admin/AcademyQueue.razor.rz.scp.css */
/* Admin — Academy moderation queue */

.aq-body[b-iopk4u5xam] { padding: var(--space-6) var(--space-5) var(--space-16); max-width: 1200px; margin: 0 auto; }

.aq-toast[b-iopk4u5xam] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-4);
}

.aq-toast.success[b-iopk4u5xam] { background: var(--success-50); color: var(--success-600); }
.aq-toast.error[b-iopk4u5xam] { background: var(--danger-50); color: var(--danger-600); }

.aq-toast button[b-iopk4u5xam] {
    margin-left: auto;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.aq-filters[b-iopk4u5xam] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

/* ---- Rows ----------------------------------------------------------------- */
.aq-list[b-iopk4u5xam] { display: flex; flex-direction: column; gap: var(--space-2); }

.aq-row[b-iopk4u5xam] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.aq-row.pending[b-iopk4u5xam] { border-left: 3px solid var(--warning-500); }

.aq-row-main[b-iopk4u5xam] { flex: 1; min-width: 0; }

.aq-row-title[b-iopk4u5xam] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

/* Author name + email + counts on one line — clamp it so the status chip and action buttons
   don't get shunted around by a long business name. */
.aq-row-meta[b-iopk4u5xam] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aq-tag[b-iopk4u5xam] {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

.aq-tag.official[b-iopk4u5xam] { background: var(--brand-50); color: var(--brand-700); }
.aq-tag.featured[b-iopk4u5xam] { background: var(--warning-50); color: var(--warning-600); }

.aq-status[b-iopk4u5xam] {
    flex: 0 0 auto;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    white-space: nowrap;
}

.aq-status.draft[b-iopk4u5xam] { background: var(--neutral-100); color: var(--color-text-muted); }
.aq-status.review[b-iopk4u5xam] { background: var(--warning-50); color: var(--warning-600); }
.aq-status.changes[b-iopk4u5xam] { background: var(--danger-50); color: var(--danger-600); }
.aq-status.live[b-iopk4u5xam] { background: var(--success-50); color: var(--success-600); }
.aq-status.archived[b-iopk4u5xam] { background: var(--neutral-200); color: var(--neutral-600); }

.aq-row-actions[b-iopk4u5xam] { display: flex; gap: var(--space-2); flex: 0 0 auto; }

.aq-btn[b-iopk4u5xam] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}

.aq-btn:hover:not(:disabled)[b-iopk4u5xam] { background: var(--color-hover); }
.aq-btn:disabled[b-iopk4u5xam] { opacity: 0.6; cursor: default; }

.aq-btn.primary[b-iopk4u5xam] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.aq-btn.primary:hover:not(:disabled)[b-iopk4u5xam] { background: var(--color-primary-hover); }

.aq-btn.danger[b-iopk4u5xam] { color: var(--danger-600); border-color: var(--danger-500); }
.aq-btn.danger:hover:not(:disabled)[b-iopk4u5xam] { background: var(--danger-50); }

.aq-icon-btn[b-iopk4u5xam] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.aq-icon-btn:hover[b-iopk4u5xam] { background: var(--color-hover); color: var(--color-text); }

/* ---- Review drawer -------------------------------------------------------- */
.aq-overlay[b-iopk4u5xam] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    justify-content: flex-end;
}

.aq-drawer[b-iopk4u5xam] {
    width: min(760px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    box-shadow: var(--shadow-2xl);
}

.aq-drawer-head[b-iopk4u5xam] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.aq-drawer-head h2[b-iopk4u5xam] {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 3px;
}

.aq-drawer-sub[b-iopk4u5xam] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.aq-drawer-body[b-iopk4u5xam] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
}

.aq-rv-section[b-iopk4u5xam] {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--neutral-200);
}

.aq-rv-section:last-child[b-iopk4u5xam] { border-bottom: none; }

.aq-rv-section h3[b-iopk4u5xam] {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.aq-rv-section > p[b-iopk4u5xam] {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.aq-rv-desc[b-iopk4u5xam] { color: var(--color-text-muted) !important; white-space: pre-line; }

.aq-rv-cover[b-iopk4u5xam] {
    max-width: 320px;
    width: 100%;
    border-radius: var(--radius-md);
    display: block;
}

.aq-rv-lesson[b-iopk4u5xam] {
    padding: var(--space-4);
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.aq-rv-lesson h4[b-iopk4u5xam] {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.aq-rv-lesson h4 span[b-iopk4u5xam] {
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
}

.aq-rv-block[b-iopk4u5xam] {
    padding: var(--space-2) 0 var(--space-2) var(--space-3);
    border-left: 2px solid var(--color-border);
    margin-bottom: var(--space-2);
}

.aq-rv-block.warning[b-iopk4u5xam] { border-left-color: var(--warning-500); }
.aq-rv-block.tip[b-iopk4u5xam] { border-left-color: var(--brand-500); }

.aq-rv-btype[b-iopk4u5xam] {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: var(--weight-bold);
    color: var(--neutral-500);
    margin-bottom: 3px;
}

.aq-rv-block p[b-iopk4u5xam],
.aq-rv-block li[b-iopk4u5xam] {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text);
    margin: 0 0 4px;
}

.aq-rv-block ul[b-iopk4u5xam] { margin: 0; padding-left: 1.2rem; }

.aq-rv-block img[b-iopk4u5xam] {
    max-width: 260px;
    width: 100%;
    border-radius: var(--radius-sm);
    display: block;
}

.aq-rv-block em[b-iopk4u5xam] {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 3px;
}

.aq-rv-empty[b-iopk4u5xam] {
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--danger-600);
    margin: 0;
}

.aq-rv-q[b-iopk4u5xam] {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}

.aq-rv-q strong[b-iopk4u5xam] {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.aq-rv-q ul[b-iopk4u5xam] { margin: 0; padding-left: 1.2rem; }

.aq-rv-q li[b-iopk4u5xam] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.aq-rv-q li.correct[b-iopk4u5xam] {
    color: var(--success-600);
    font-weight: var(--weight-semibold);
}

.aq-rv-q em[b-iopk4u5xam] {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

.aq-drawer-foot[b-iopk4u5xam] {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-2);
}

.aq-drawer-foot textarea[b-iopk4u5xam] {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-sm);
    resize: vertical;
    margin-bottom: var(--space-3);
}

.aq-drawer-foot textarea:focus[b-iopk4u5xam] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow-soft);
}

.aq-drawer-actions[b-iopk4u5xam] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

@media (max-width: 720px) {
    .aq-body[b-iopk4u5xam] { padding: var(--space-4) var(--space-3) var(--space-12); }
    .aq-row[b-iopk4u5xam] { flex-wrap: wrap; }
    .aq-row-main[b-iopk4u5xam] { flex: 1 1 100%; }
    .aq-drawer[b-iopk4u5xam] { width: 100%; }
}
/* _content/Quote.UI/Components/Pages/Admin/MarketplaceHealth.razor.rz.scp.css */
.mh-page[b-94g5zc72wo] { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.mh-head[b-94g5zc72wo] { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
.mh-eyebrow[b-94g5zc72wo] { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-600, #2563eb); }
.mh-head h1[b-94g5zc72wo] { font-size: 1.6rem; font-weight: 800; margin: 0.3rem 0 0.4rem; color: #0f172a; }
.mh-lead[b-94g5zc72wo] { color: #64748b; margin: 0; max-width: 56ch; font-size: 0.92rem; }

.mh-range[b-94g5zc72wo] { display: flex; gap: 0.35rem; }
.mh-range-btn[b-94g5zc72wo] { border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: 8px; padding: 0.35rem 0.7rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.mh-range-btn.is-on[b-94g5zc72wo] { background: var(--brand-600, #2563eb); border-color: var(--brand-600, #2563eb); color: #fff; }

/* The headline. Colour carries the verdict so it can't be skimmed past. */
.mh-hero[b-94g5zc72wo] { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 1.75rem; border-radius: 18px; margin-bottom: 1.25rem; border: 1px solid transparent; }
.mh-hero.is-bad[b-94g5zc72wo] { background: #fef2f2; border-color: #fecaca; }
.mh-hero.is-warn[b-94g5zc72wo] { background: #fffbeb; border-color: #fde68a; }
.mh-hero.is-ok[b-94g5zc72wo] { background: #f0fdf4; border-color: #bbf7d0; }
/* No data is grey, never green. Green on an empty window reads as a passing grade. */
.mh-hero.is-empty[b-94g5zc72wo] { background: #f8fafc; border-color: #e2e8f0; }
.mh-hero.is-empty .mh-hero-num[b-94g5zc72wo] { color: #94a3b8; }
.mh-hero-icon[b-94g5zc72wo] { font-size: 2.4rem; color: #94a3b8; line-height: 1; flex-shrink: 0; }
.mh-hero-num[b-94g5zc72wo] { font-size: 3.4rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mh-hero.is-bad .mh-hero-num[b-94g5zc72wo] { color: #b91c1c; }
.mh-hero.is-warn .mh-hero-num[b-94g5zc72wo] { color: #b45309; }
.mh-hero.is-ok .mh-hero-num[b-94g5zc72wo] { color: #15803d; }
.mh-hero-title[b-94g5zc72wo] { font-weight: 700; color: #0f172a; font-size: 1.02rem; }
.mh-hero-sub[b-94g5zc72wo] { color: #475569; font-size: 0.88rem; margin-top: 0.25rem; max-width: 62ch; }

.mh-kpis[b-94g5zc72wo] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.mh-kpi[b-94g5zc72wo] { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.mh-kpi-label[b-94g5zc72wo] { font-size: 0.76rem; color: #64748b; font-weight: 600; }
.mh-kpi-value[b-94g5zc72wo] { font-size: 1.5rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.mh-kpi-sub[b-94g5zc72wo] { font-size: 0.85rem; color: #64748b; font-weight: 600; }

.mh-grid[b-94g5zc72wo] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 1rem; margin-bottom: 1rem; }

.mh-card[b-94g5zc72wo] { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1.15rem 1.25rem; margin-bottom: 1rem; }
.mh-card h2[b-94g5zc72wo] { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0 0 0.15rem; }
.mh-card-sub[b-94g5zc72wo] { font-size: 0.83rem; color: #64748b; margin: 0 0 0.9rem; }

.mh-stat-row[b-94g5zc72wo] { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 0.75rem; }
.mh-stat[b-94g5zc72wo] { display: flex; flex-direction: column; }
.mh-stat-value[b-94g5zc72wo] { font-size: 1.45rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.mh-stat-label[b-94g5zc72wo] { font-size: 0.78rem; color: #64748b; }

.mh-note[b-94g5zc72wo] { font-size: 0.83rem; color: #64748b; margin: 0.9rem 0 0; line-height: 1.5; }
.mh-note-good[b-94g5zc72wo] { background: #f0f9ff; border: 1px solid #bae6fd; color: #075985; border-radius: 10px; padding: 0.6rem 0.75rem; }
.mh-note-good i[b-94g5zc72wo] { margin-right: 0.35rem; }

.mh-supply[b-94g5zc72wo] { margin-top: 0.5rem; }
.mh-bar[b-94g5zc72wo] { height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.mh-bar-fill[b-94g5zc72wo] { height: 100%; background: linear-gradient(90deg, #2563eb, #60a5fa); }
.mh-supply-num[b-94g5zc72wo] { font-size: 0.88rem; color: #475569; margin-top: 0.5rem; }
.mh-supply-list[b-94g5zc72wo] { list-style: none; padding: 0; margin: 0.85rem 0 0; }
.mh-supply-list li[b-94g5zc72wo] { display: flex; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px solid #f1f5f9; font-size: 0.85rem; color: #475569; }
.mh-supply-list li:last-child[b-94g5zc72wo] { border-bottom: none; }
.mh-supply-list strong[b-94g5zc72wo] { color: #0f172a; font-variant-numeric: tabular-nums; }

/* Wide tables scroll inside their own box rather than pushing the page sideways. */
.mh-table-scroll[b-94g5zc72wo] { overflow-x: auto; }
.mh-table[b-94g5zc72wo] { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.mh-table th[b-94g5zc72wo] { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; font-weight: 700; padding: 0.5rem 0.6rem; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.mh-table td[b-94g5zc72wo] { padding: 0.55rem 0.6rem; border-bottom: 1px solid #f1f5f9; color: #334155; font-variant-numeric: tabular-nums; }
.mh-table tr:last-child td[b-94g5zc72wo] { border-bottom: none; }
.mh-job-title[b-94g5zc72wo] { font-weight: 600; color: #0f172a; max-width: 320px; }

.mh-pill[b-94g5zc72wo] { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-weight: 700; font-size: 0.78rem; }
.mh-pill.bad[b-94g5zc72wo] { background: #fee2e2; color: #b91c1c; }
.mh-pill.warn[b-94g5zc72wo] { background: #fef3c7; color: #b45309; }
.mh-pill.ok[b-94g5zc72wo] { background: #dcfce7; color: #15803d; }

/* Zero matchable tradies is the sharpest signal on the page — a job with nobody to send it to. */
.mh-zero[b-94g5zc72wo] { color: #b91c1c; font-weight: 700; }

@media (max-width: 640px) {
    .mh-hero[b-94g5zc72wo] { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .mh-hero-num[b-94g5zc72wo] { font-size: 2.6rem; }
}

/* Verdict strip: three counts that each imply a different action. */
.mh-verdict-strip[b-94g5zc72wo] { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0 1rem; }
.mh-verdict[b-94g5zc72wo] { flex: 1 1 150px; border-radius: 12px; padding: 0.75rem 0.9rem; border: 1px solid; }
.mh-verdict-num[b-94g5zc72wo] { display: block; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mh-verdict-label[b-94g5zc72wo] { font-size: 0.78rem; font-weight: 600; }
.mh-verdict.is-beachhead[b-94g5zc72wo] { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.mh-verdict.is-supply[b-94g5zc72wo] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.mh-verdict.is-demand[b-94g5zc72wo] { background: #fffbeb; border-color: #fde68a; color: #b45309; }
/* _content/Quote.UI/Components/Pages/Admin/TenderReadiness.razor.rz.scp.css */
.tr-page[b-9413sk2vf4] { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.tr-head[b-9413sk2vf4] { margin-bottom: 1.4rem; }
.tr-eyebrow[b-9413sk2vf4] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-600, #2563eb); }
.tr-head h1[b-9413sk2vf4] { margin: 0.25rem 0 0.4rem; font-size: 1.6rem; font-weight: 800; color: #0f172a; }
.tr-lead[b-9413sk2vf4] { margin: 0; color: #475569; font-size: 0.94rem; line-height: 1.55; max-width: 68ch; }

.tr-stats[b-9413sk2vf4] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 0.85rem; margin-bottom: 1rem; }
.tr-stat[b-9413sk2vf4] { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 0.9rem 1.05rem; display: flex; flex-direction: column; gap: 0.15rem; }
.tr-stat-num[b-9413sk2vf4] { font-size: 1.9rem; font-weight: 800; color: #0f172a; line-height: 1; font-variant-numeric: tabular-nums; }
.tr-stat-label[b-9413sk2vf4] { font-size: 0.8rem; font-weight: 700; color: #334155; }
.tr-stat-sub[b-9413sk2vf4] { font-size: 0.73rem; color: #94a3b8; line-height: 1.4; }
/* Colour only where it carries the go/no-go. A dashboard where every tile is green teaches nothing. */
.tr-stat.is-good[b-9413sk2vf4] { border-color: #a7f3d0; background: #f0fdf4; }
.tr-stat.is-good .tr-stat-num[b-9413sk2vf4] { color: #047857; }
.tr-stat.is-flat .tr-stat-num[b-9413sk2vf4] { color: #64748b; }

.tr-verdict[b-9413sk2vf4] { display: flex; flex-direction: column; gap: 0.25rem; border-radius: 12px; padding: 0.9rem 1.05rem; margin-bottom: 1.6rem; font-size: 0.9rem; line-height: 1.55; }
.tr-verdict strong[b-9413sk2vf4] { font-size: 0.98rem; }
.tr-verdict.is-go[b-9413sk2vf4] { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.tr-verdict.is-nogo[b-9413sk2vf4] { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }

.tr-section-label[b-9413sk2vf4] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; margin: 1.6rem 0 0.5rem; }
.tr-section-sub[b-9413sk2vf4] { margin: -0.2rem 0 0.7rem; font-size: 0.86rem; color: #64748b; max-width: 68ch; }

/* Wide content scrolls inside its own container so the page body never scrolls sideways. */
.tr-table-scroll[b-9413sk2vf4] { overflow-x: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; }
.tr-table[b-9413sk2vf4] { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tr-table th[b-9413sk2vf4] { text-align: left; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; padding: 0.65rem 0.9rem; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.tr-table td[b-9413sk2vf4] { padding: 0.6rem 0.9rem; border-bottom: 1px solid #f1f5f9; color: #334155; white-space: nowrap; }
.tr-table tr:last-child td[b-9413sk2vf4] { border-bottom: none; }
.tr-trade[b-9413sk2vf4] { font-weight: 600; color: #0f172a; }
.tr-num[b-9413sk2vf4] { text-align: right; font-variant-numeric: tabular-nums; }
.tr-strong[b-9413sk2vf4] { font-weight: 800; color: #0f172a; }
.tr-warn[b-9413sk2vf4] { color: #a16207; }

.tr-pill[b-9413sk2vf4] { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.16rem 0.5rem; border-radius: 999px; background: #f1f5f9; color: #64748b; }
.tr-pill-competitive[b-9413sk2vf4] { background: #ecfdf5; color: #047857; }
.tr-pill-thin[b-9413sk2vf4] { background: #fffbeb; color: #92400e; }

.tr-empty[b-9413sk2vf4] { background: #fff; border: 1px dashed #e2e8f0; border-radius: 14px; padding: 2rem 1.5rem; text-align: center; color: #64748b; }

/* The send bar. Deliberately plain — this dispatches real email to real tradies, and a button
   styled like a call to action invites a click that shouldn't be casual. */
.tr-nudge-bar[b-9413sk2vf4] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 0.7rem 0.95rem; margin-bottom: 0.7rem; }
.tr-check[b-9413sk2vf4] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.87rem; color: #334155; cursor: pointer; }
.tr-btn-primary[b-9413sk2vf4] { background: var(--brand-600, #2563eb); color: #fff; border: none; border-radius: 9px; padding: 0.5rem 1.1rem; font-weight: 700; font-size: 0.88rem; cursor: pointer; }
.tr-btn-primary:disabled[b-9413sk2vf4] { background: #cbd5e1; cursor: not-allowed; }
.tr-nudge-result[b-9413sk2vf4] { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 9px; padding: 0.55rem 0.8rem; font-size: 0.86rem; color: #166534; margin-bottom: 0.7rem; }
/* _content/Quote.UI/Components/Pages/Admin/Walkthroughs.razor.rz.scp.css */
/* Admin view of how the walkthroughs are performing.
   Built on design-tokens.css so it follows the rest of the product when the brand is retuned. */

.wt-grid[b-1xpnf1fp31] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: var(--space-4);
}

.wt-card[b-1xpnf1fp31] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.wt-card-head[b-1xpnf1fp31] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.wt-card-title[b-1xpnf1fp31] {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: var(--leading-snug);
}

.wt-card-path[b-1xpnf1fp31] {
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

/* The completion rate, sized to be the thing you read first. Tabular figures so a column of
   cards doesn't jitter as the numbers change width. */
.wt-rate[b-1xpnf1fp31] {
    flex: none;
    font-size: var(--text-xl);
    font-weight: var(--weight-extrabold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
}

.wt-rate-good[b-1xpnf1fp31] { color: var(--success-700); }
.wt-rate-ok[b-1xpnf1fp31]   { color: var(--warning-700); }
.wt-rate-bad[b-1xpnf1fp31]  { color: var(--danger-700); }
.wt-rate-none[b-1xpnf1fp31] { color: var(--neutral-400); }

.wt-card-none[b-1xpnf1fp31] {
    font-size: var(--text-sm);
    color: var(--neutral-500);
}

.wt-figs[b-1xpnf1fp31] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    font-size: var(--text-sm);
    color: var(--neutral-600);
}

.wt-figs strong[b-1xpnf1fp31] {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* The sentence that names the step losing people — the only line on the card you can act on. */
.wt-dropoff[b-1xpnf1fp31] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-surface-2);
    border-left: 3px solid var(--warning-500);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--neutral-700);
}

.wt-dropoff i[b-1xpnf1fp31] {
    flex: none;
    margin-top: 2px;
    color: var(--warning-500);
}

/* One column per step: where people stopped. Deliberately small — it's a shape to glance at,
   with the detail in the tooltip and the headline already stated in words above. */
.wt-bars[b-1xpnf1fp31] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 60px;
    padding-top: var(--space-2);
}

.wt-bar[b-1xpnf1fp31] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.wt-bar-fill[b-1xpnf1fp31] {
    background: var(--neutral-300);
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    transition: height var(--dur-base) var(--ease-out);
}

.wt-bar-worst[b-1xpnf1fp31] { background: var(--warning-500); }

.wt-bar-lbl[b-1xpnf1fp31] {
    margin-top: 4px;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--neutral-500);
    font-variant-numeric: tabular-nums;
}

.wt-note[b-1xpnf1fp31] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--neutral-700);
}

.wt-note i[b-1xpnf1fp31] { flex: none; margin-top: 2px; color: var(--color-primary); }
.wt-note-warn[b-1xpnf1fp31] { background: var(--warning-50); color: var(--warning-700); }
.wt-note-warn i[b-1xpnf1fp31] { color: var(--warning-700); }
.wt-note-bad[b-1xpnf1fp31] { background: var(--danger-50); color: var(--danger-700); }
.wt-note-bad i[b-1xpnf1fp31] { color: var(--danger-700); }

.wt-grid + .wt-note[b-1xpnf1fp31] { margin-top: var(--space-4); }
/* _content/Quote.UI/Components/Pages/Business/TenderCompare.razor.rz.scp.css */
/* Comparing bids and awarding — the client's side.
   The recommendation is sticky because the whole argument of this layout is that the cheapest bid
   isn't always the compliant one, and the client must not lose that while digging into detail. */

.tc-page[b-sv0aannbss] { background: var(--color-canvas, #f4f4f2); min-height: 100vh; }
.tc-loading[b-sv0aannbss] { display: flex; justify-content: center; padding: 5rem 0; }
.tc-shell[b-sv0aannbss] { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.tc-back[b-sv0aannbss] { display: inline-flex; align-items: center; gap: .4rem; color: var(--neutral-600, #6b7280);
           font-size: .83rem; font-weight: 600; text-decoration: none; margin-bottom: 1rem; }
.tc-back:hover[b-sv0aannbss] { color: var(--brand-600, #2563eb); }

/* ── sealed state ─────────────────────────────────────────────────────────── */
.tc-sealed-card[b-sv0aannbss] { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
                  border-radius: var(--radius-xl, 20px); padding: 3rem 2rem; text-align: center; }
.tc-sealed-card i[b-sv0aannbss] { font-size: 2.2rem; color: var(--neutral-400, #cbd0d6); }
.tc-sealed-card h1[b-sv0aannbss] { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: .8rem 0 .5rem; }
.tc-sealed-card p[b-sv0aannbss] { font-size: .92rem; color: var(--neutral-600, #6b7280); max-width: 56ch;
                    margin: 0 auto; line-height: 1.65; }
.tc-sealed-count[b-sv0aannbss] { margin-top: 1.6rem; }
.tc-sealed-count b[b-sv0aannbss] { display: block; font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tc-sealed-count span[b-sv0aannbss] { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
                        font-weight: 700; color: var(--neutral-500, #9aa3ad); }

/* ── recommendation ───────────────────────────────────────────────────────── */
.tc-rec[b-sv0aannbss] { position: sticky; top: .6rem; z-index: 20; border-radius: var(--radius-xl, 20px);
          overflow: hidden; color: #fff; padding: 1.5rem 1.6rem; margin-bottom: .9rem;
          background: linear-gradient(125deg, #12305e, #0d1b34 62%, #08101f);
          box-shadow: 0 14px 34px -20px rgba(8,15,30,.7); }
.tc-rec[b-sv0aannbss]::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(900px 300px at 85% -35%, rgba(34,197,94,.34), transparent 60%),
                repeating-linear-gradient(118deg, rgba(255,255,255,.045) 0 2px, transparent 2px 26px); }
.tc-rec > *[b-sv0aannbss] { position: relative; z-index: 1; }
.tc-rec.mini[b-sv0aannbss] { padding: .8rem 1.2rem; }

.tc-flag[b-sv0aannbss] { display: inline-flex; gap: .4rem; align-items: center; font-size: .66rem; font-weight: 800;
           letter-spacing: .11em; text-transform: uppercase; color: #bbf7d0;
           background: rgba(34,197,94,.18); border: 1px solid rgba(34,197,94,.4);
           padding: .28rem .68rem; border-radius: 999px; }
.tc-flag.warn[b-sv0aannbss] { color: #fde68a; background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.42); }
.tc-rec-name[b-sv0aannbss] { font-size: clamp(1.25rem, 2.5vw, 1.7rem); font-weight: 800; letter-spacing: -.028em;
               margin: .7rem 0 .28rem; }
.tc-rec.mini .tc-rec-name[b-sv0aannbss] { font-size: 1.02rem; margin: .3rem 0 .55rem; }
.tc-rec-why[b-sv0aannbss] { color: rgba(255,255,255,.76); font-size: .87rem; max-width: 64ch; margin: 0; }
.tc-rec-stats[b-sv0aannbss] { display: flex; gap: 1.9rem; flex-wrap: wrap; margin: 1.1rem 0 1.2rem; }
.tc-rec-stats b[b-sv0aannbss] { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em;
                  font-variant-numeric: tabular-nums; }
.tc-rec-stats span[b-sv0aannbss] { font-size: .63rem; text-transform: uppercase; letter-spacing: .1em;
                     font-weight: 700; color: rgba(255,255,255,.58); }
.tc-rec-actions[b-sv0aannbss] { display: flex; gap: .55rem; flex-wrap: wrap; }
.tc-rec-hint[b-sv0aannbss] { margin: .85rem 0 0; font-size: .76rem; line-height: 1.55;
               color: rgba(255,255,255,.62); max-width: 74ch; }
.tc-rec-hint b[b-sv0aannbss] { color: rgba(255,255,255,.9); font-weight: 700; }

/* ── ranked list ──────────────────────────────────────────────────────────── */
.tc-list[b-sv0aannbss] { display: flex; flex-direction: column; gap: .45rem; }
.tc-card[b-sv0aannbss] { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
           border-radius: var(--radius-lg, 16px); }
.tc-row[b-sv0aannbss] { display: grid; grid-template-columns: 30px 1.35fr 1.9fr auto auto auto; gap: .9rem;
          align-items: center; padding: .78rem .95rem; cursor: pointer;
          transition: background-color .14s ease; }
.tc-row:hover[b-sv0aannbss] { background: var(--brand-50, #eff6ff); }
.tc-row.open[b-sv0aannbss] { background: var(--brand-50, #eff6ff); }
.tc-pos[b-sv0aannbss] { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center;
          justify-content: center; font-weight: 800; font-size: .78rem;
          background: var(--neutral-50, #f8f8f7); color: var(--neutral-500, #9aa3ad); }
.tc-row.win .tc-pos[b-sv0aannbss] { background: var(--success-600, #16a34a); color: #fff; }
.tc-name b[b-sv0aannbss] { display: block; font-size: .88rem; letter-spacing: -.01em; }
.tc-name span[b-sv0aannbss] { font-size: .72rem; color: var(--neutral-500, #9aa3ad); }

.tc-bar[b-sv0aannbss] { position: relative; height: 24px; background: var(--neutral-50, #f8f8f7);
          border-radius: 6px; overflow: hidden; }
.tc-bar i[b-sv0aannbss] { position: absolute; inset: 0 auto 0 0; background: var(--brand-500, #3b82f6); opacity: .82; }
.tc-row.win .tc-bar i[b-sv0aannbss] { background: var(--success-600, #16a34a); }
.tc-row.risk .tc-bar i[b-sv0aannbss] { background: var(--warning-500, #f59e0b); }
.tc-bar b[b-sv0aannbss] { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
            font-size: .79rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tc-delta[b-sv0aannbss] { font-size: .75rem; color: var(--neutral-500, #9aa3ad); text-align: right; min-width: 68px;
            font-variant-numeric: tabular-nums; }
.tc-delta b[b-sv0aannbss] { display: block; color: var(--danger-600, #dc2626); }
.tc-caret[b-sv0aannbss] { color: var(--neutral-400, #cbd0d6); font-size: .8rem; transition: transform .18s ease; }
.tc-row.open .tc-caret[b-sv0aannbss] { transform: rotate(180deg); }

.tc-chip[b-sv0aannbss] { font-size: .67rem; font-weight: 700; padding: .18rem .48rem; border-radius: 5px;
           display: inline-flex; gap: .2rem; align-items: center; }
.tc-chip.ok[b-sv0aannbss] { background: var(--success-50, #f0fdf4); color: var(--success-700, #15803d); }
.tc-chip.warn[b-sv0aannbss] { background: var(--warning-50, #fffbeb); color: var(--warning-700, #b45309); }

/* expanded */
.tc-detail[b-sv0aannbss] { padding: 0 .95rem 1rem; }
.tc-dgrid[b-sv0aannbss] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1.1rem;
            padding-top: .9rem; border-top: 1px dashed var(--color-border, #e5e7eb); }
.tc-dh[b-sv0aannbss] { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
         color: var(--neutral-500, #9aa3ad); margin-bottom: .45rem; }
.tc-dline[b-sv0aannbss] { display: flex; justify-content: space-between; gap: .7rem; font-size: .79rem;
            padding: .16rem 0; }
.tc-dline span[b-sv0aannbss] { color: var(--neutral-600, #6b7280); }
.tc-dline em[b-sv0aannbss] { opacity: .6; font-style: normal; }
.tc-dline b[b-sv0aannbss] { font-variant-numeric: tabular-nums; }
.tc-dline b.low[b-sv0aannbss] { color: var(--success-700, #15803d); }
.tc-dtext[b-sv0aannbss] { font-size: .82rem; color: var(--neutral-700, #4b5563); line-height: 1.6; }
.tc-dmeta[b-sv0aannbss] { margin-top: .7rem; display: flex; flex-direction: column; gap: .35rem; font-size: .79rem; }
.tc-dmeta > div[b-sv0aannbss] { display: flex; justify-content: space-between; gap: .6rem; align-items: center; }
.tc-dmeta span[b-sv0aannbss] { color: var(--neutral-500, #9aa3ad); }
.tc-warnline[b-sv0aannbss] { font-size: .78rem; color: var(--warning-700, #b45309); display: flex; gap: .35rem; }

/* ── scorecard ────────────────────────────────────────────────────────────── */
.tc-sheet-wrap[b-sv0aannbss] { margin-top: 1rem; background: var(--color-surface, #fff);
                 border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-lg, 16px);
                 padding: 1rem 1.1rem; }
.tc-sheet-h[b-sv0aannbss] { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
              color: var(--neutral-500, #9aa3ad); margin-bottom: .7rem; }
.tc-sheet[b-sv0aannbss] { overflow-x: auto; }
.tc-sc[b-sv0aannbss] { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .82rem; }
.tc-sc th[b-sv0aannbss], .tc-sc td[b-sv0aannbss] { padding: .55rem .7rem; border-bottom: 1px solid var(--color-border, #e5e7eb);
                       text-align: right; font-variant-numeric: tabular-nums; }
.tc-sc th:first-child[b-sv0aannbss], .tc-sc td:first-child[b-sv0aannbss] { text-align: left; font-variant-numeric: normal; }
.tc-sc thead th[b-sv0aannbss] { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
                  color: var(--neutral-500, #9aa3ad); background: var(--neutral-50, #f8f8f7); }
.tc-sc td.low[b-sv0aannbss] { background: var(--success-50, #f0fdf4); color: var(--success-700, #15803d); font-weight: 800; }
.tc-sc-name[b-sv0aannbss] { font-weight: 600; color: var(--neutral-800, #333d47); }
.tc-sc-total td[b-sv0aannbss] { border-top: 2px solid var(--neutral-900, #1f2933); font-weight: 800; font-size: .9rem; }

/* ── buttons, alerts ──────────────────────────────────────────────────────── */
.tc-btn[b-sv0aannbss] { border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: .84rem;
          border-radius: 9px; padding: .55rem 1rem; text-decoration: none;
          display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
          transition: background-color .15s ease; }
.tc-btn.sm[b-sv0aannbss] { padding: .4rem .8rem; font-size: .78rem; }
.tc-btn.ok[b-sv0aannbss] { background: var(--success-600, #16a34a); color: #fff; }
.tc-btn.ok:hover:not(:disabled)[b-sv0aannbss] { background: var(--success-700, #15803d); }
.tc-btn.ghost[b-sv0aannbss] { background: var(--neutral-50, #f8f8f7); color: var(--neutral-700, #4b5563);
                border: 1px solid var(--color-border, #e5e7eb); }
.tc-btn.onnavy[b-sv0aannbss] { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.32); }
.tc-btn.onnavy:hover[b-sv0aannbss] { background: rgba(255,255,255,.12); }
.tc-btn:disabled[b-sv0aannbss] { opacity: .55; cursor: not-allowed; }

.tc-alert[b-sv0aannbss] { display: flex; gap: .9rem; align-items: center; padding: .95rem 1.15rem;
            border-radius: var(--radius-lg, 16px); margin-bottom: 1.1rem;
            background: var(--warning-50, #fffbeb); border: 1px solid #fde68a;
            color: var(--warning-700, #b45309); }
.tc-alert.inline[b-sv0aannbss] { margin-bottom: 1rem; }
.tc-alert i[b-sv0aannbss] { font-size: 1.15rem; }
.tc-alert div[b-sv0aannbss] { display: flex; flex-direction: column; }
.tc-alert strong[b-sv0aannbss] { font-size: .9rem; }
.tc-alert span[b-sv0aannbss] { font-size: .82rem; opacity: .9; }

/* ── modals ───────────────────────────────────────────────────────────────── */
.tc-backdrop[b-sv0aannbss] { position: fixed; inset: 0; z-index: 60; background: rgba(8,15,30,.55);
               backdrop-filter: blur(3px); padding: 1.5rem; overflow-y: auto;
               display: flex; align-items: flex-start; justify-content: center; }
.tc-modal[b-sv0aannbss] { background: var(--color-surface, #fff); border-radius: var(--radius-xl, 20px);
            max-width: 720px; width: 100%; margin: auto; overflow: hidden;
            box-shadow: 0 30px 70px -30px rgba(8,15,30,.8); }
.tc-modal.narrow[b-sv0aannbss] { max-width: 580px; }
.tc-modal-head[b-sv0aannbss] { padding: 1.15rem 1.35rem; color: #fff;
                 background: linear-gradient(125deg, #12305e, #0d1b34); }
.tc-modal-head.bafo[b-sv0aannbss] { background: linear-gradient(125deg, #7c4a08, #3f2408); }
.tc-modal-head b[b-sv0aannbss] { display: block; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.tc-modal-head span[b-sv0aannbss] { font-size: .82rem; color: rgba(255,255,255,.74); }
.tc-modal-body[b-sv0aannbss] { padding: 1.2rem 1.35rem; }
.tc-modal-foot[b-sv0aannbss] { padding: 1rem 1.35rem; border-top: 1px solid var(--color-border, #e5e7eb);
                 display: flex; gap: .6rem; justify-content: flex-end; align-items: center;
                 background: var(--neutral-50, #f8f8f7); }

.tc-mh[b-sv0aannbss] { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
         color: var(--neutral-500, #9aa3ad); margin: 0 0 .45rem; }
.tc-mnote[b-sv0aannbss] { font-size: .82rem; color: var(--neutral-600, #6b7280); line-height: 1.55; margin: 0 0 .7rem; }
.tc-input[b-sv0aannbss] { width: 100%; box-sizing: border-box; font-family: inherit; font-size: .86rem;
            color: var(--neutral-900, #1f2933); background: var(--color-surface, #fff);
            border: 1px solid var(--color-border, #e5e7eb); border-radius: 9px; padding: .55rem .7rem; }
.tc-input:focus[b-sv0aannbss] { outline: none; border-color: var(--brand-400, #60a5fa);
                  box-shadow: 0 0 0 3px rgba(37,99,235,.14); }

.tc-losers[b-sv0aannbss] { display: flex; flex-direction: column; gap: .5rem; }
.tc-loser[b-sv0aannbss] { border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-md, 12px);
            padding: .7rem .85rem; }
.tc-loser-top[b-sv0aannbss] { display: flex; align-items: center; gap: .7rem; }
.tc-loser-top b[b-sv0aannbss] { font-size: .86rem; }
.tc-loser-top span[b-sv0aannbss] { font-size: .8rem; color: var(--neutral-500, #9aa3ad);
                     font-variant-numeric: tabular-nums; margin-left: auto; }
.tc-addnote[b-sv0aannbss] { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: .75rem;
              font-weight: 700; color: var(--brand-600, #2563eb); white-space: nowrap; padding: .2rem 0; }
.tc-preview[b-sv0aannbss] { font-size: .77rem; color: var(--neutral-500, #9aa3ad); margin-top: .35rem; font-style: italic; }

.tc-rule[b-sv0aannbss] { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem;
           color: var(--neutral-600, #6b7280); line-height: 1.55; margin-bottom: .7rem; }
.tc-rule > span[b-sv0aannbss] { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
                  background: var(--success-50, #f0fdf4); color: var(--success-700, #15803d);
                  font-weight: 800; font-size: .72rem; display: flex; align-items: center;
                  justify-content: center; margin-top: .1rem; }
.tc-rule b[b-sv0aannbss] { color: var(--neutral-900, #1f2933); }

@media (max-width: 860px) {
    .tc-row[b-sv0aannbss] { grid-template-columns: 26px 1fr auto auto; row-gap: .5rem; }
    .tc-bar[b-sv0aannbss] { grid-column: 1 / -1; }
    .tc-delta[b-sv0aannbss] { grid-column: 2; text-align: left; }
    .tc-rec-stats[b-sv0aannbss] { gap: 1.2rem; }
}

/* ── Suggested additions ─────────────────────────────────────────────────────
   Below the bids, and visually distinct from them, because none of this money is in any bid total
   above. Presenting it inline with the prices would make the comparison look inconsistent. */
.tc-sugs[b-sv0aannbss] { margin-top: 1.1rem; background: var(--color-surface, #fff);
           border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-lg, 16px);
           padding: 1.1rem 1.2rem; }
.tc-sug-head[b-sv0aannbss] { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .85rem; }
.tc-sug-head h2[b-sv0aannbss] { font-size: 1rem; font-weight: 800; margin: 0; letter-spacing: -.015em;
                  display: flex; align-items: center; gap: .45rem; }
.tc-sug-head h2 i[b-sv0aannbss] { color: #7c3aed; }
.tc-sug-pill[b-sv0aannbss] { font-size: .68rem; font-weight: 800; background: #7c3aed; color: #fff;
               padding: .14rem .5rem; border-radius: 999px; }
.tc-sug-note[b-sv0aannbss] { font-size: .77rem; color: var(--neutral-500, #9aa3ad); margin-left: auto; }

/* The signal no single quote could give: bidders agreeing without seeing each other. */
.tc-cluster[b-sv0aannbss] { background: #f5f3ff; border: 1px solid #ede9fe; border-left: 3px solid #7c3aed;
              border-radius: var(--radius-md, 12px); padding: .8rem .95rem; margin-bottom: .6rem; }
.tc-cluster b[b-sv0aannbss] { display: block; font-size: .85rem; color: #6d28d9; }
.tc-cluster span[b-sv0aannbss] { font-size: .81rem; color: var(--neutral-600, #6b7280); line-height: 1.55; }

.tc-sug[b-sv0aannbss] { border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-md, 12px);
          padding: .85rem 1rem; margin-bottom: .5rem; }
.tc-sug.decided[b-sv0aannbss] { background: var(--neutral-50, #f8f8f7); }
.tc-sug-top[b-sv0aannbss] { display: flex; align-items: flex-start; gap: .9rem; flex-wrap: wrap; }
.tc-sug-t[b-sv0aannbss] { flex: 1; min-width: 180px; }
.tc-sug-t b[b-sv0aannbss] { display: block; font-size: .89rem; }
.tc-sug-t span[b-sv0aannbss] { font-size: .75rem; color: var(--neutral-500, #9aa3ad); }
.tc-sug-nums[b-sv0aannbss] { display: flex; gap: 1.3rem; text-align: right; }
.tc-sug-nums span[b-sv0aannbss] { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .07em;
                    font-weight: 700; color: var(--neutral-500, #9aa3ad); }
.tc-sug-nums b[b-sv0aannbss] { font-size: .96rem; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Their claim, not ours — coloured differently so it never reads as a verified figure. */
.tc-sug-nums .val b[b-sv0aannbss] { color: #6d28d9; }
.tc-sug-why[b-sv0aannbss] { font-size: .83rem; color: var(--neutral-700, #4b5563); line-height: 1.6;
              margin: .7rem 0 0; padding-top: .7rem; border-top: 1px dashed var(--color-border, #e5e7eb); }
.tc-sug-acts[b-sv0aannbss] { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .8rem; }
.tc-sug-decided[b-sv0aannbss] { margin-top: .7rem; font-size: .82rem; color: var(--success-700, #15803d);
                  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.tc-sug-decided span[b-sv0aannbss] { color: var(--neutral-500, #9aa3ad); font-size: .77rem; margin-left: .3rem; }

.tc-ack[b-sv0aannbss] { display: flex; gap: .5rem; align-items: flex-start; font-size: .84rem;
          margin: .2rem 0 .6rem; cursor: pointer; }
.tc-ack input[b-sv0aannbss] { margin-top: .2rem; flex-shrink: 0; }
/* _content/Quote.UI/Components/Pages/Business/TenderCreate.razor.rz.scp.css */
/* Creating a tender.
   One sheet rather than a stepped wizard: a facilities manager runs tenders repeatedly and would
   hate clicking through five screens by the third one. The rail on the right stays honest about
   whether it can be published, so nothing is a surprise at the end. */

.nt-page[b-sh1c0b0b8c] { background: var(--color-canvas, #f4f4f2); min-height: 100vh; }
.nt-shell[b-sh1c0b0b8c] { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.nt-back[b-sh1c0b0b8c] { display: inline-flex; align-items: center; gap: .4rem; color: var(--neutral-600, #6b7280);
           font-size: .83rem; font-weight: 600; text-decoration: none; }
.nt-back:hover[b-sh1c0b0b8c] { color: var(--brand-600, #2563eb); }
.nt-h1[b-sh1c0b0b8c] { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.028em;
         margin: .9rem 0 .3rem; }
.nt-lede[b-sh1c0b0b8c] { font-size: .93rem; color: var(--neutral-600, #6b7280); max-width: 62ch; margin: 0 0 1.5rem; }

.nt-sheet[b-sh1c0b0b8c] { display: grid; grid-template-columns: 1fr 340px; gap: 1.1rem; align-items: start; }
.nt-blocks[b-sh1c0b0b8c] { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }

.nt-block[b-sh1c0b0b8c] { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
            border-radius: var(--radius-lg, 16px); padding: 1.1rem 1.25rem; }
.nt-block h2[b-sh1c0b0b8c] { font-size: 1rem; font-weight: 800; letter-spacing: -.015em; margin: 0 0 .95rem;
               display: flex; align-items: center; gap: .5rem; }
.nt-block h2 .n[b-sh1c0b0b8c] { width: 21px; height: 21px; border-radius: 6px; background: var(--brand-50, #eff6ff);
                  color: var(--brand-700, #1d4ed8); font-size: .72rem; font-weight: 800;
                  display: flex; align-items: center; justify-content: center; }

.nt-fld[b-sh1c0b0b8c] { margin-bottom: .9rem; }
.nt-row2[b-sh1c0b0b8c] { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.nt-lbl[b-sh1c0b0b8c] { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .06em;
          text-transform: uppercase; color: var(--neutral-500, #9aa3ad); margin: 0 0 .3rem; }
.nt-inp[b-sh1c0b0b8c] { width: 100%; box-sizing: border-box; font-family: inherit; font-size: .87rem;
          color: var(--neutral-900, #1f2933); background: var(--color-surface, #fff);
          border: 1px solid var(--color-border, #e5e7eb); border-radius: 9px; padding: .55rem .7rem;
          transition: border-color .15s ease, box-shadow .15s ease; }
.nt-inp:focus[b-sh1c0b0b8c] { outline: none; border-color: var(--brand-400, #60a5fa);
                box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.nt-inp-sm[b-sh1c0b0b8c] { max-width: 110px; margin-top: .4rem; padding: .35rem .5rem; font-size: .82rem; }
.nt-hint[b-sh1c0b0b8c] { font-size: .77rem; color: var(--neutral-500, #9aa3ad); margin-top: .32rem; line-height: 1.55; }

.nt-seg[b-sh1c0b0b8c] { display: inline-flex; background: var(--neutral-50, #f8f8f7);
          border: 1px solid var(--color-border, #e5e7eb); border-radius: 9px; padding: 3px; gap: 3px; }
.nt-seg button[b-sh1c0b0b8c] { border: 0; background: none; cursor: pointer; font-family: inherit; font-size: .81rem;
                 font-weight: 700; padding: .42rem .9rem; border-radius: 7px;
                 color: var(--neutral-500, #9aa3ad); }
.nt-seg button.on[b-sh1c0b0b8c] { background: var(--brand-600, #2563eb); color: #fff; }

/* rate lines */
.nt-lot-head[b-sh1c0b0b8c] { display: grid; grid-template-columns: 1fr 116px 92px 30px; gap: .5rem;
               font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
               color: var(--neutral-500, #9aa3ad); margin: 1rem 0 .3rem; }
.nt-lots[b-sh1c0b0b8c] { display: flex; flex-direction: column; gap: .4rem; }
.nt-lot[b-sh1c0b0b8c] { display: grid; grid-template-columns: 1fr 116px 92px 30px; gap: .5rem; align-items: center; }
.nt-lot .nt-inp[b-sh1c0b0b8c] { padding: .42rem .6rem; font-size: .83rem; }
.nt-lot-x[b-sh1c0b0b8c] { background: none; border: 0; cursor: pointer; color: var(--neutral-400, #cbd0d6);
            font-size: 1.15rem; line-height: 1; }
.nt-lot-x:hover[b-sh1c0b0b8c] { color: var(--danger-600, #dc2626); }

.nt-toggles[b-sh1c0b0b8c] { display: flex; flex-direction: column; gap: .6rem; }
.nt-tg[b-sh1c0b0b8c] { display: flex; gap: .6rem; align-items: flex-start; font-size: .86rem; cursor: pointer; }
.nt-tg input[b-sh1c0b0b8c] { margin-top: .25rem; flex-shrink: 0; }
.nt-tg b[b-sh1c0b0b8c] { font-weight: 700; }
.nt-tg span[b-sh1c0b0b8c] { display: block; font-size: .77rem; color: var(--neutral-500, #9aa3ad); line-height: 1.5; }

/* ── the rail ─────────────────────────────────────────────────────────────── */
.nt-rail[b-sh1c0b0b8c] { position: sticky; top: .7rem; display: flex; flex-direction: column; gap: .7rem; }
.nt-card[b-sh1c0b0b8c] { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
           border-radius: var(--radius-lg, 16px); padding: 1rem 1.1rem; }
.nt-card h3[b-sh1c0b0b8c] { font-size: .9rem; font-weight: 800; margin: 0 0 .75rem; letter-spacing: -.01em; }

.nt-gate[b-sh1c0b0b8c] { border-radius: var(--radius-md, 12px); padding: .85rem .95rem; display: flex; gap: .75rem;
           align-items: flex-start; }
.nt-gate.yes[b-sh1c0b0b8c] { background: var(--success-50, #f0fdf4); border: 1px solid #bbf7d0; }
.nt-gate.no[b-sh1c0b0b8c] { background: var(--warning-50, #fffbeb); border: 1px solid #fde68a; }
.nt-gate.idle[b-sh1c0b0b8c] { background: var(--neutral-50, #f8f8f7); border: 1px solid var(--color-border, #e5e7eb); }
.nt-gate-n[b-sh1c0b0b8c] { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
             font-variant-numeric: tabular-nums; }
.nt-gate.yes .nt-gate-n[b-sh1c0b0b8c] { color: var(--success-700, #15803d); }
.nt-gate.no .nt-gate-n[b-sh1c0b0b8c] { color: var(--warning-700, #b45309); }
.nt-gate.idle .nt-gate-n[b-sh1c0b0b8c] { color: var(--neutral-400, #cbd0d6); }
.nt-gate b[b-sh1c0b0b8c] { display: block; font-size: .85rem; }
.nt-gate.yes b[b-sh1c0b0b8c] { color: var(--success-700, #15803d); }
.nt-gate.no b[b-sh1c0b0b8c] { color: var(--warning-700, #b45309); }
.nt-gate span[b-sh1c0b0b8c] { font-size: .79rem; color: var(--neutral-600, #6b7280); line-height: 1.5; }

/* A refusal that only says no is the cheap version — give them a way to get the work done now,
   and a way to be told when tendering becomes possible. */
.nt-outs[b-sh1c0b0b8c] { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }

.nt-checks[b-sh1c0b0b8c] { display: flex; flex-direction: column; gap: .1rem; margin-top: .8rem; }
.nt-check[b-sh1c0b0b8c] { display: flex; gap: .55rem; align-items: flex-start; font-size: .82rem; padding: .26rem 0; }
.nt-check .m[b-sh1c0b0b8c] { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; font-size: .62rem;
               display: flex; align-items: center; justify-content: center; font-weight: 800;
               margin-top: .16rem; }
.nt-check.ok .m[b-sh1c0b0b8c] { background: var(--success-50, #f0fdf4); color: var(--success-700, #15803d); }
.nt-check.todo .m[b-sh1c0b0b8c] { background: var(--neutral-200, #e9e9e6); color: var(--neutral-500, #9aa3ad); }
.nt-check.never .m[b-sh1c0b0b8c] { background: var(--neutral-100, #f4f4f2); color: var(--neutral-500, #9aa3ad); }
.nt-check.ok b[b-sh1c0b0b8c] { color: var(--neutral-900, #1f2933); font-weight: 600; }
.nt-check.todo b[b-sh1c0b0b8c] { color: var(--neutral-500, #9aa3ad); font-weight: 500; }
.nt-check.never b[b-sh1c0b0b8c] { color: var(--neutral-600, #6b7280); font-weight: 600; }

.nt-err[b-sh1c0b0b8c] { background: var(--danger-50, #fef2f2); border: 1px solid #fecaca;
          color: var(--danger-600, #dc2626); border-radius: 9px; padding: .6rem .8rem; font-size: .81rem; }

.nt-btn[b-sh1c0b0b8c] { border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: .85rem;
          border-radius: 9px; padding: .6rem 1.05rem; text-decoration: none;
          display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
          transition: background-color .15s ease; }
.nt-btn.sm[b-sh1c0b0b8c] { font-size: .8rem; padding: .48rem .8rem; }
.nt-btn.block[b-sh1c0b0b8c] { width: 100%; }
.nt-btn.primary[b-sh1c0b0b8c] { background: var(--brand-600, #2563eb); color: #fff; }
.nt-btn.primary:hover:not(:disabled)[b-sh1c0b0b8c] { background: var(--brand-700, #1d4ed8); }
.nt-btn.ghost[b-sh1c0b0b8c] { background: var(--neutral-50, #f8f8f7); color: var(--neutral-700, #4b5563);
                border: 1px solid var(--color-border, #e5e7eb); }
.nt-btn.ghost:hover:not(:disabled)[b-sh1c0b0b8c] { border-color: var(--brand-300, #93c5fd); color: var(--brand-600, #2563eb); }
.nt-btn:disabled[b-sh1c0b0b8c] { opacity: .5; cursor: not-allowed; }

@media (max-width: 940px) {
    .nt-sheet[b-sh1c0b0b8c] { grid-template-columns: 1fr; }
    .nt-rail[b-sh1c0b0b8c] { position: static; }
    .nt-row2[b-sh1c0b0b8c] { grid-template-columns: 1fr; }
    .nt-lot[b-sh1c0b0b8c] { grid-template-columns: 1fr 90px 70px 26px; }
}

/* ---- Narrow phones ---------------------------------------------------------
   The rate-line row is `1fr 116px 92px 30px` — 238px of fixed track plus gaps
   before the description column gets anything at all. That cannot fit a 320px
   screen, so the last column was pushed off the edge and clipped.

   Below 380px it becomes two lines: the description across the top, then qty /
   unit / remove beneath it. Same fields, same order, just folded. */
@media (max-width: 379.98px) {
    .nt-lot-head[b-sh1c0b0b8c] {
        display: none;   /* column headings make no sense once the row has folded */
    }

    .nt-lot[b-sh1c0b0b8c] {
        grid-template-columns: 1fr 92px 30px;
        grid-template-areas:
            "desc desc desc"
            "qty  unit del";
        row-gap: .35rem;
    }

    .nt-lot > *:nth-child(1)[b-sh1c0b0b8c] { grid-area: desc; }
    .nt-lot > *:nth-child(2)[b-sh1c0b0b8c] { grid-area: qty; }
    .nt-lot > *:nth-child(3)[b-sh1c0b0b8c] { grid-area: unit; }
    .nt-lot > *:nth-child(4)[b-sh1c0b0b8c] { grid-area: del; }
}
/* _content/Quote.UI/Components/Pages/Business/TenderInvite.razor.rz.scp.css */
/* Choosing who bids.
   Its own screen rather than a field on the create form: picking people is a different job from
   describing work, and the verified credentials shown here are the one thing a job board
   structurally cannot do — so they deserve the room. */

.iv-page[b-2gsw8vg346] { background: var(--color-canvas, #f4f4f2); min-height: 100vh; }
.iv-shell[b-2gsw8vg346] { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.iv-loading[b-2gsw8vg346] { display: flex; justify-content: center; padding: 4rem 0; }

.iv-back[b-2gsw8vg346] { display: inline-flex; align-items: center; gap: .4rem; color: var(--neutral-600, #6b7280);
           font-size: .83rem; font-weight: 600; text-decoration: none; }
.iv-back:hover[b-2gsw8vg346] { color: var(--brand-600, #2563eb); }
.iv-h1[b-2gsw8vg346] { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.028em;
         margin: .9rem 0 .3rem; }
.iv-lede[b-2gsw8vg346] { font-size: .93rem; color: var(--neutral-600, #6b7280); max-width: 66ch; margin: 0 0 1.4rem; }

.iv-cols[b-2gsw8vg346] { display: grid; grid-template-columns: 1fr 320px; gap: 1.1rem; align-items: start; }
.iv-main[b-2gsw8vg346] { min-width: 0; }

.iv-filter[b-2gsw8vg346] { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
             margin-bottom: .7rem; }
.iv-check[b-2gsw8vg346] { display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem;
            font-weight: 600; color: var(--neutral-700, #4b5563); cursor: pointer; }
.iv-count[b-2gsw8vg346] { font-size: .78rem; color: var(--neutral-500, #9aa3ad); font-variant-numeric: tabular-nums; }

.iv-list[b-2gsw8vg346] { display: flex; flex-direction: column; gap: .5rem; }
.iv-card[b-2gsw8vg346] { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
           border-radius: var(--radius-lg, 16px); padding: .85rem 1rem; cursor: pointer;
           display: grid; grid-template-columns: 26px 1.1fr 1.6fr auto; gap: 1rem; align-items: center;
           transition: border-color .15s ease, background-color .15s ease; }
.iv-card:hover[b-2gsw8vg346] { border-color: var(--brand-300, #93c5fd); }
.iv-card.picked[b-2gsw8vg346] { border-color: var(--brand-500, #3b82f6); background: var(--brand-50, #eff6ff); }
.iv-card.blocked[b-2gsw8vg346] { opacity: .82; }

.iv-tick[b-2gsw8vg346] { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--color-border, #e5e7eb);
           background: var(--color-surface, #fff); display: flex; align-items: center;
           justify-content: center; font-size: .74rem; font-weight: 800; color: #fff; }
.iv-card.picked .iv-tick[b-2gsw8vg346] { background: var(--brand-600, #2563eb); border-color: var(--brand-600, #2563eb); }

.iv-who b[b-2gsw8vg346] { display: block; font-size: .89rem; letter-spacing: -.01em; }
.iv-who span[b-2gsw8vg346] { font-size: .75rem; color: var(--neutral-500, #9aa3ad); }

.iv-creds[b-2gsw8vg346] { display: flex; gap: .35rem; flex-wrap: wrap; }
.iv-chip[b-2gsw8vg346] { font-size: .69rem; font-weight: 700; padding: .22rem .55rem; border-radius: 6px;
           display: inline-flex; gap: .25rem; align-items: center; white-space: nowrap; }
.iv-chip.ok[b-2gsw8vg346] { background: var(--success-50, #f0fdf4); color: var(--success-700, #15803d); }
.iv-chip.warn[b-2gsw8vg346] { background: var(--warning-50, #fffbeb); color: var(--warning-700, #b45309); }

.iv-jobs[b-2gsw8vg346] { text-align: right; }
.iv-jobs b[b-2gsw8vg346] { display: block; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums;
             letter-spacing: -.02em; }
.iv-jobs span[b-2gsw8vg346] { font-size: .68rem; color: var(--neutral-500, #9aa3ad); text-transform: uppercase;
                letter-spacing: .05em; font-weight: 700; }

.iv-empty[b-2gsw8vg346] { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
            border-radius: var(--radius-lg, 16px); padding: 2.5rem 1.5rem; text-align: center;
            display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.iv-empty i[b-2gsw8vg346] { font-size: 1.7rem; color: var(--neutral-400, #cbd0d6); }
.iv-empty strong[b-2gsw8vg346] { font-size: .95rem; }
.iv-empty span[b-2gsw8vg346] { font-size: .84rem; color: var(--neutral-500, #9aa3ad); max-width: 46ch; line-height: 1.55; }

/* ── rail ─────────────────────────────────────────────────────────────────── */
.iv-rail[b-2gsw8vg346] { position: sticky; top: .7rem; display: flex; flex-direction: column; gap: .7rem; }
.iv-panel[b-2gsw8vg346] { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
            border-radius: var(--radius-lg, 16px); padding: 1.05rem 1.15rem; }
.iv-panel h3[b-2gsw8vg346] { font-size: .9rem; font-weight: 800; margin: 0 0 .3rem; }
.iv-big[b-2gsw8vg346] { font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.05;
          font-variant-numeric: tabular-nums; color: var(--brand-600, #2563eb); }
.iv-note[b-2gsw8vg346] { font-size: .82rem; color: var(--neutral-600, #6b7280); line-height: 1.55; margin: .4rem 0 0; }

.iv-warnbox[b-2gsw8vg346] { margin-top: .8rem; background: var(--warning-50, #fffbeb); border: 1px solid #fde68a;
              color: var(--warning-700, #b45309); border-radius: 9px; padding: .6rem .75rem;
              font-size: .79rem; line-height: 1.5; display: flex; gap: .45rem; }

.iv-facts[b-2gsw8vg346] { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--color-border, #e5e7eb);
            display: flex; flex-direction: column; gap: .5rem; }
.iv-facts > div[b-2gsw8vg346] { display: flex; flex-direction: column; gap: .1rem; }
.iv-facts span[b-2gsw8vg346] { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
                 color: var(--neutral-500, #9aa3ad); }
.iv-facts b[b-2gsw8vg346] { font-size: .8rem; color: var(--neutral-800, #333d47); font-weight: 600; }

.iv-note-box[b-2gsw8vg346] { background: var(--warning-50, #fffbeb); border: 1px solid #fde68a;
               color: var(--warning-700, #b45309); border-radius: 9px; padding: .65rem .8rem;
               font-size: .81rem; line-height: 1.5; }
.iv-err[b-2gsw8vg346] { background: var(--danger-50, #fef2f2); border: 1px solid #fecaca;
          color: var(--danger-600, #dc2626); border-radius: 9px; padding: .7rem .9rem; font-size: .84rem; }

.iv-btn[b-2gsw8vg346] { border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: .85rem;
          border-radius: 9px; padding: .62rem 1.05rem; display: inline-flex; align-items: center;
          justify-content: center; gap: .4rem; transition: background-color .15s ease; }
.iv-btn.block[b-2gsw8vg346] { width: 100%; }
.iv-btn.primary[b-2gsw8vg346] { background: var(--brand-600, #2563eb); color: #fff; }
.iv-btn.primary:hover:not(:disabled)[b-2gsw8vg346] { background: var(--brand-700, #1d4ed8); }
.iv-btn.ghost[b-2gsw8vg346] { background: var(--neutral-50, #f8f8f7); color: var(--neutral-700, #4b5563);
                border: 1px solid var(--color-border, #e5e7eb); }
.iv-btn:disabled[b-2gsw8vg346] { opacity: .5; cursor: not-allowed; }

@media (max-width: 900px) {
    .iv-cols[b-2gsw8vg346] { grid-template-columns: 1fr; }
    .iv-rail[b-2gsw8vg346] { position: static; }
    .iv-card[b-2gsw8vg346] { grid-template-columns: 24px 1fr auto; row-gap: .5rem; }
    .iv-creds[b-2gsw8vg346] { grid-column: 2 / -1; }
}
/* _content/Quote.UI/Components/Pages/Business/TenderList.razor.rz.scp.css */
/* Tenders the business has run. Counts only — there is no state of this page that shows a price
   before a tender closes. */

.tl-page[b-5joun28atf] { background: var(--color-canvas, #f4f4f2); min-height: 100vh; }
.tl-shell[b-5joun28atf] { max-width: 1120px; margin: 0 auto; padding: 1.8rem 1.25rem 4rem; }
.tl-loading[b-5joun28atf] { display: flex; justify-content: center; padding: 4rem 0; }

.tl-head[b-5joun28atf] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
           flex-wrap: wrap; margin-bottom: 1.5rem; }
.tl-h1[b-5joun28atf] { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.028em; margin: 0 0 .3rem; }
.tl-lede[b-5joun28atf] { font-size: .92rem; color: var(--neutral-600, #6b7280); max-width: 60ch; margin: 0; }

.tl-list[b-5joun28atf] { display: flex; flex-direction: column; gap: .5rem; }
.tl-card[b-5joun28atf] { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
           border-radius: var(--radius-lg, 16px); padding: .9rem 1.1rem; text-decoration: none;
           color: inherit; display: grid; grid-template-columns: auto 1fr auto auto 16px;
           gap: 1.2rem; align-items: center;
           transition: border-color .15s ease, transform .15s ease; }
.tl-card:hover[b-5joun28atf] { border-color: var(--brand-300, #93c5fd); transform: translateX(2px); color: inherit; }

.tl-status[b-5joun28atf] { font-size: .68rem; font-weight: 800; letter-spacing: .04em; padding: .3rem .6rem;
             border-radius: 6px; white-space: nowrap; }
.tl-status.draft[b-5joun28atf] { background: var(--neutral-100, #f4f4f2); color: var(--neutral-600, #6b7280); }
.tl-status.open[b-5joun28atf] { background: var(--brand-50, #eff6ff); color: var(--brand-700, #1d4ed8); }
.tl-status.ready[b-5joun28atf] { background: var(--warning-50, #fffbeb); color: var(--warning-700, #b45309); }
.tl-status.awarded[b-5joun28atf] { background: var(--success-50, #f0fdf4); color: var(--success-700, #15803d); }
.tl-status.closed[b-5joun28atf] { background: var(--neutral-100, #f4f4f2); color: var(--neutral-500, #9aa3ad); }

.tl-main[b-5joun28atf] { min-width: 0; }
.tl-main b[b-5joun28atf] { display: block; font-size: .92rem; letter-spacing: -.012em; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.tl-main span[b-5joun28atf] { font-size: .76rem; color: var(--neutral-500, #9aa3ad); }
.tl-main code[b-5joun28atf] { font-size: .74rem; color: var(--neutral-600, #6b7280); }

.tl-nums[b-5joun28atf] { display: flex; gap: 1.1rem; }
.tl-nums > div[b-5joun28atf] { text-align: center; }
.tl-nums b[b-5joun28atf] { display: block; font-size: .98rem; font-weight: 800; font-variant-numeric: tabular-nums;
             letter-spacing: -.02em; }
.tl-nums span[b-5joun28atf] { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
                color: var(--neutral-500, #9aa3ad); }

.tl-when[b-5joun28atf] { text-align: right; font-size: .82rem; font-weight: 700;
           font-variant-numeric: tabular-nums; color: var(--neutral-700, #4b5563); white-space: nowrap; }
.tl-when.soon[b-5joun28atf] { color: var(--warning-700, #b45309); }
.tl-when small[b-5joun28atf] { display: block; font-weight: 600; font-size: .68rem;
                 color: var(--neutral-500, #9aa3ad); }
.tl-go[b-5joun28atf] { color: var(--neutral-400, #cbd0d6); font-size: .85rem; }

.tl-empty[b-5joun28atf] { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
            border-radius: var(--radius-xl, 20px); padding: 3rem 1.5rem; text-align: center;
            display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.tl-empty i[b-5joun28atf] { font-size: 1.9rem; color: var(--neutral-400, #cbd0d6); }
.tl-empty strong[b-5joun28atf] { font-size: 1.02rem; }
.tl-empty span[b-5joun28atf] { font-size: .87rem; color: var(--neutral-500, #9aa3ad); max-width: 52ch; line-height: 1.6; }
.tl-empty .tl-btn[b-5joun28atf] { margin-top: .6rem; }

.tl-err[b-5joun28atf] { background: var(--danger-50, #fef2f2); border: 1px solid #fecaca;
          color: var(--danger-600, #dc2626); border-radius: 9px; padding: .8rem 1rem; font-size: .85rem; }

.tl-btn[b-5joun28atf] { border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: .85rem;
          border-radius: 9px; padding: .6rem 1.1rem; text-decoration: none;
          display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.tl-btn.primary[b-5joun28atf] { background: var(--brand-600, #2563eb); color: #fff; }
.tl-btn.primary:hover[b-5joun28atf] { background: var(--brand-700, #1d4ed8); color: #fff; }

@media (max-width: 820px) {
    .tl-card[b-5joun28atf] { grid-template-columns: auto 1fr auto; row-gap: .55rem; }
    .tl-nums[b-5joun28atf] { grid-column: 2; }
    .tl-when[b-5joun28atf] { grid-column: 3; }
    .tl-go[b-5joun28atf] { display: none; }
}
/* _content/Quote.UI/Components/Pages/Hire/FindWorkers.razor.rz.scp.css */
.fw-page[b-5070bzo953] { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.fw-head[b-5070bzo953] { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
.fw-eyebrow[b-5070bzo953] { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-600, #2563eb); }
.fw-head h1[b-5070bzo953] { font-size: 1.6rem; font-weight: 800; margin: 0.3rem 0 0.4rem; color: #0f172a; }
.fw-lead[b-5070bzo953] { color: #64748b; margin: 0; max-width: 62ch; font-size: 0.92rem; }

.fw-pool[b-5070bzo953] { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 14px; padding: 0.7rem 1.1rem; text-align: center; }
.fw-pool-num[b-5070bzo953] { display: block; font-size: 1.8rem; font-weight: 800; color: #15803d; line-height: 1; font-variant-numeric: tabular-nums; }
.fw-pool-label[b-5070bzo953] { font-size: 0.76rem; color: #166534; font-weight: 600; }

.fw-body[b-5070bzo953] { display: grid; grid-template-columns: 280px 1fr; gap: 1.25rem; align-items: start; }

/* Filters */
.fw-filters[b-5070bzo953] { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1rem; position: sticky; top: 1rem; }
.fw-filter-group[b-5070bzo953] { margin-bottom: 1.1rem; }
.fw-label[b-5070bzo953] { display: block; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #475569; margin-bottom: 0.4rem; }
.fw-input[b-5070bzo953] { width: 100%; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.45rem 0.6rem; font-size: 0.86rem; margin-bottom: 0.4rem; }
.fw-input:focus[b-5070bzo953] { outline: 2px solid var(--brand-500, #3b82f6); outline-offset: -1px; }
.fw-row[b-5070bzo953] { display: flex; gap: 0.5rem; }
.fw-hint[b-5070bzo953] { font-size: 0.74rem; color: #94a3b8; margin: 0.15rem 0 0; }

.fw-check[b-5070bzo953] { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: #334155; padding: 0.15rem 0; cursor: pointer; }
.fw-check input[b-5070bzo953] { flex-shrink: 0; }
.fw-check-sub[b-5070bzo953] { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid #f1f5f9; color: #64748b; font-size: 0.8rem; }
/* Counts sit right-aligned so the eye can scan where the people actually are. */
.fw-count[b-5070bzo953] { margin-left: auto; font-size: 0.75rem; color: #94a3b8; font-variant-numeric: tabular-nums; }

.fw-actions[b-5070bzo953] { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.fw-btn-primary[b-5070bzo953] { background: var(--brand-600, #2563eb); color: #fff; border: none; border-radius: 9px; padding: 0.5rem 1rem; font-weight: 700; font-size: 0.86rem; cursor: pointer; }
.fw-btn-primary:disabled[b-5070bzo953] { background: #cbd5e1; cursor: not-allowed; }
.fw-btn-sm[b-5070bzo953] { padding: 0.35rem 0.7rem; font-size: 0.8rem; }
.fw-btn-ghost[b-5070bzo953] { background: #fff; color: #475569; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.86rem; cursor: pointer; }

/* Results */
.fw-results-head[b-5070bzo953] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; color: #475569; font-size: 0.9rem; }
.fw-sort[b-5070bzo953] { border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.35rem 0.5rem; font-size: 0.84rem; }

.fw-card[b-5070bzo953] { display: flex; gap: 1rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1rem 1.15rem; margin-bottom: 0.75rem; }
.fw-card-main[b-5070bzo953] { flex: 1; min-width: 0; }
.fw-card-side[b-5070bzo953] { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; flex-shrink: 0; }

.fw-card-top[b-5070bzo953] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.fw-name[b-5070bzo953] { font-weight: 800; color: #0f172a; font-size: 1rem; }
.fw-role[b-5070bzo953] { font-size: 0.85rem; color: #2563eb; font-weight: 600; }
.fw-trade[b-5070bzo953] { font-size: 0.76rem; background: #eff6ff; color: #1d4ed8; padding: 0.1rem 0.5rem; border-radius: 999px; font-weight: 600; }

.fw-headline[b-5070bzo953] { color: #475569; font-size: 0.88rem; margin: 0.35rem 0 0.5rem; }
.fw-meta[b-5070bzo953] { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.8rem; color: #64748b; }
.fw-meta i[b-5070bzo953] { margin-right: 0.2rem; }

.fw-tickets[b-5070bzo953] { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.fw-ticket[b-5070bzo953] { font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.fw-ticket.is-verified[b-5070bzo953] { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
/* An expired ticket is shown, not hidden — but never as though it were current. */
.fw-ticket.is-expired[b-5070bzo953] { background: #fef2f2; color: #b91c1c; border-color: #fecaca; text-decoration: line-through; }
.fw-ticket.is-expired em[b-5070bzo953] { font-style: normal; margin-left: 0.25rem; font-weight: 700; text-decoration: none; }

.fw-limited[b-5070bzo953] { font-size: 0.8rem; color: #64748b; margin: 0.6rem 0 0; }
.fw-rate[b-5070bzo953] { font-size: 1.1rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.fw-rate span[b-5070bzo953] { font-size: 0.78rem; font-weight: 600; color: #94a3b8; }
.fw-avail[b-5070bzo953] { font-size: 0.78rem; color: #64748b; }

/* The rescue for an empty result — where the people actually are. */
.fw-elsewhere[b-5070bzo953] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 1rem; }
.fw-elsewhere-label[b-5070bzo953] { font-size: 0.82rem; color: #64748b; font-weight: 600; margin-right: 0.25rem; }
.fw-chip[b-5070bzo953] { background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.82rem; color: #334155; cursor: pointer; }
.fw-chip span[b-5070bzo953] { color: #94a3b8; margin-left: 0.3rem; font-variant-numeric: tabular-nums; }
.fw-chip:hover[b-5070bzo953] { border-color: var(--brand-400, #60a5fa); color: #1d4ed8; }


/* Proof of work — the badges that say what QuoteTrades has actually checked.
   Deliberately calm: these are facts, not decoration, and a card lit up like a slot machine
   would make an employer trust all of them less. */
.fw-proof[b-5070bzo953] { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; }
.fw-proof-badge[b-5070bzo953] { display: inline-flex; align-items: center; gap: 0.28rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.76rem; color: #475569; font-weight: 600; }
.fw-proof-badge i[b-5070bzo953] { font-size: 0.8rem; }
/* Only the licence gets colour. It is the one an employer is legally exposed by getting wrong. */
.fw-proof-badge.is-strong[b-5070bzo953] { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }

/* The plain-English box. Sits above the filters rather than replacing them, because the filters
   stay the source of truth — this only fills them in, visibly. */
.fw-ask[b-5070bzo953] { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 0.85rem 1rem; margin-bottom: 1rem; }
.fw-ask-row[b-5070bzo953] { display: flex; gap: 0.5rem; }
.fw-ask-input[b-5070bzo953] { flex: 1; min-width: 0; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.55rem 0.75rem; font-size: 0.92rem; font-family: inherit; }
.fw-ask-input:focus[b-5070bzo953] { outline: 2px solid var(--brand-500, #3b82f6); outline-offset: -1px; }

.fw-ask-chips[b-5070bzo953] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.7rem; }
.fw-ask-label[b-5070bzo953] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; margin-right: 0.25rem; }
/* Every chip carries its own × — a parser that gets one thing wrong shouldn't cost the whole query. */
.fw-ask-chip[b-5070bzo953] { display: inline-flex; align-items: center; gap: 0.3rem; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px; padding: 0.22rem 0.35rem 0.22rem 0.65rem; font-size: 0.8rem; color: #1d4ed8; font-weight: 600; }
.fw-ask-chip button[b-5070bzo953] { background: none; border: none; color: #60a5fa; font-size: 0.95rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; }
.fw-ask-chip button:hover[b-5070bzo953] { color: #1d4ed8; }
.fw-ask-miss[b-5070bzo953] { margin-top: 0.6rem; font-size: 0.83rem; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px; padding: 0.5rem 0.7rem; line-height: 1.5; }

/* Full width under the filters, because it's the answer to an empty result — the moment an
   employer would otherwise close the tab and not come back. */
.fw-save-search[b-5070bzo953] { width: 100%; margin-top: 0.75rem; background: #f8fafc; color: #334155; border: 1px dashed #cbd5e1; border-radius: 9px; padding: 0.55rem 0.75rem; font-size: 0.84rem; font-weight: 600; cursor: pointer; text-align: center; }
.fw-save-search:hover[b-5070bzo953] { border-color: var(--brand-400, #60a5fa); color: #1d4ed8; background: #f0f7ff; }
.fw-save-search i[b-5070bzo953] { margin-right: 0.3rem; }

.fw-head-side[b-5070bzo953] { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; flex-shrink: 0; }
.fw-head-side a[b-5070bzo953] { text-decoration: none; display: inline-block; }

/* Already approached — a settled state, not a disabled action. Greying out the primary button
   would read as "broken"; this reads as "done". */
.fw-btn-sent[b-5070bzo953] { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; border-radius: 9px; font-weight: 700; cursor: default; }

/* Outreach composer */
.fw-modal-backdrop[b-5070bzo953] { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 1050; }
.fw-modal[b-5070bzo953] { background: #fff; border-radius: 16px; width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25); }
.fw-modal-head[b-5070bzo953] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem 0.75rem; border-bottom: 1px solid #f1f5f9; }
.fw-modal-head h2[b-5070bzo953] { margin: 0; font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.fw-modal-sub[b-5070bzo953] { margin: 0.2rem 0 0; font-size: 0.84rem; color: #64748b; }
.fw-modal-x[b-5070bzo953] { background: none; border: none; font-size: 1.5rem; line-height: 1; color: #94a3b8; cursor: pointer; padding: 0 0.2rem; }
.fw-modal-x:hover[b-5070bzo953] { color: #475569; }
.fw-modal-body[b-5070bzo953] { padding: 1rem 1.25rem; overflow-y: auto; }
.fw-modal-body .fw-label[b-5070bzo953] { margin-top: 0.85rem; }
.fw-modal-body .fw-label:first-child[b-5070bzo953] { margin-top: 0; }
.fw-optional[b-5070bzo953] { font-weight: 600; text-transform: none; letter-spacing: 0; color: #94a3b8; margin-left: 0.35rem; }
.fw-textarea[b-5070bzo953] { resize: vertical; min-height: 6.5rem; font-family: inherit; line-height: 1.5; }

/* Stated plainly, next to the send button, because this is the promise the whole feature rests on. */
.fw-privacy-note[b-5070bzo953] { margin-top: 0.85rem; background: #f8fafc; border-left: 3px solid var(--brand-400, #60a5fa); border-radius: 0 8px 8px 0; padding: 0.6rem 0.75rem; font-size: 0.82rem; color: #475569; line-height: 1.5; }
.fw-modal-error[b-5070bzo953] { margin-top: 0.85rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; padding: 0.6rem 0.75rem; font-size: 0.84rem; color: #b91c1c; }
.fw-modal-foot[b-5070bzo953] { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.85rem 1.25rem; border-top: 1px solid #f1f5f9; }

.fw-toast[b-5070bzo953] { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff; border-radius: 999px; padding: 0.6rem 1.2rem; font-size: 0.86rem; font-weight: 600; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3); z-index: 1060; }

@media (max-width: 900px) {
    .fw-body[b-5070bzo953] { grid-template-columns: 1fr; }
    .fw-filters[b-5070bzo953] { position: static; }
    .fw-card[b-5070bzo953] { flex-direction: column; }
    .fw-card-side[b-5070bzo953] { align-items: flex-start; flex-direction: row; }
}
/* _content/Quote.UI/Components/Pages/Hire/SentApproaches.razor.rz.scp.css */
.so-page[b-numaguprcq] { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.so-head[b-numaguprcq] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.so-eyebrow[b-numaguprcq] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-600, #2563eb); }
.so-head h1[b-numaguprcq] { margin: 0.25rem 0 0.4rem; font-size: 1.6rem; font-weight: 800; color: #0f172a; }
.so-lead[b-numaguprcq] { margin: 0; color: #475569; font-size: 0.94rem; line-height: 1.55; }

.so-section-label[b-numaguprcq] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; margin: 1.4rem 0 0.6rem; }
.so-section-label:first-of-type[b-numaguprcq] { margin-top: 0; }

.so-card[b-numaguprcq] { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1rem 1.15rem; margin-bottom: 0.75rem; }
.so-card-head[b-numaguprcq] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.so-name[b-numaguprcq] { font-size: 1rem; font-weight: 800; color: #0f172a; }
.so-meta[b-numaguprcq] { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.2rem; font-size: 0.81rem; color: #64748b; }
.so-role[b-numaguprcq] { color: var(--brand-600, #2563eb); font-weight: 600; }

.so-status[b-numaguprcq] { flex-shrink: 0; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.22rem 0.55rem; border-radius: 999px; background: #f1f5f9; color: #64748b; }
.so-status-accepted[b-numaguprcq] { background: #ecfdf5; color: #047857; }
.so-status-sent[b-numaguprcq], .so-status-viewed[b-numaguprcq] { background: #eff6ff; color: #1d4ed8; }

.so-message[b-numaguprcq] { margin: 0.75rem 0 0; color: #475569; font-size: 0.88rem; line-height: 1.6; white-space: pre-wrap; }
.so-reply[b-numaguprcq] { margin-top: 0.7rem; background: #f8fafc; border-radius: 9px; padding: 0.55rem 0.75rem; font-size: 0.86rem; color: #334155; line-height: 1.55; }
.so-reply span[b-numaguprcq] { font-weight: 700; color: #64748b; margin-right: 0.3rem; }

.so-contact[b-numaguprcq] { margin-top: 0.85rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 0.7rem 0.9rem; }
.so-contact-title[b-numaguprcq] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #047857; margin-bottom: 0.35rem; }
.so-contact-row[b-numaguprcq] { font-size: 0.9rem; color: #334155; line-height: 1.6; }
.so-contact-row a[b-numaguprcq] { color: var(--brand-600, #2563eb); text-decoration: none; }
.so-contact-row a:hover[b-numaguprcq] { text-decoration: underline; }

.so-btn-primary[b-numaguprcq] { display: inline-block; margin-top: 0.9rem; background: var(--brand-600, #2563eb); color: #fff; border: none; border-radius: 9px; padding: 0.5rem 1.1rem; font-weight: 700; font-size: 0.88rem; text-decoration: none; }
.so-btn-ghost[b-numaguprcq] { flex-shrink: 0; background: #fff; color: #475569; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.45rem 0.9rem; font-weight: 600; font-size: 0.86rem; text-decoration: none; }
.so-btn-ghost:hover[b-numaguprcq] { border-color: #cbd5e1; color: #0f172a; }

.so-empty[b-numaguprcq] { background: #fff; border: 1px dashed #e2e8f0; border-radius: 14px; padding: 2rem 1.5rem; text-align: center; color: #64748b; font-size: 0.92rem; line-height: 1.6; }
.so-empty-title[b-numaguprcq] { font-size: 1.05rem; font-weight: 800; color: #334155; margin-bottom: 0.4rem; }
.so-empty p[b-numaguprcq] { margin: 0; max-width: 34rem; margin-inline: auto; }

@media (max-width: 640px) {
    .so-head[b-numaguprcq] { flex-direction: column; }
    .so-card-head[b-numaguprcq] { flex-direction: column; gap: 0.5rem; }
}

/* Two-up on a desktop. Appended at the end of the file deliberately: these rules override the base
   card rules above, and same-specificity means whichever comes last wins. */
@media (min-width: 860px) {
.so-page[b-numaguprcq] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.15rem; align-items: start; }
    .so-page > .so-head[b-numaguprcq],
    .so-page > .so-section-label[b-numaguprcq],
    .so-page > .so-empty[b-numaguprcq] { grid-column: 1 / -1; }
    .so-card[b-numaguprcq] { margin-bottom: 0; height: 100%; }
}
/* _content/Quote.UI/Components/Pages/Hire/TalentPools.razor.rz.scp.css */
.tp-page[b-wgtjyege6n] { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.tp-head[b-wgtjyege6n] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; }
.tp-eyebrow[b-wgtjyege6n] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-600, #2563eb); }
.tp-head h1[b-wgtjyege6n] { margin: 0.25rem 0 0.4rem; font-size: 1.6rem; font-weight: 800; color: #0f172a; }
.tp-lead[b-wgtjyege6n] { margin: 0; color: #475569; font-size: 0.94rem; line-height: 1.55; }

.tp-back[b-wgtjyege6n] { background: none; border: none; color: var(--brand-600, #2563eb); font-size: 0.86rem; cursor: pointer; padding: 0 0 0.6rem; }
.tp-back:hover[b-wgtjyege6n] { text-decoration: underline; }
.tp-detail-head[b-wgtjyege6n] { margin-bottom: 1rem; }
.tp-detail-head h2[b-wgtjyege6n] { margin: 0; font-size: 1.3rem; font-weight: 800; color: #0f172a; }
.tp-notes[b-wgtjyege6n] { margin: 0.3rem 0 0; font-size: 0.9rem; color: #475569; }
.tp-meta[b-wgtjyege6n] { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; font-size: 0.82rem; color: #64748b; }
/* Amber, not red: people leaving a list is normal, not a failure. */
.tp-gone[b-wgtjyege6n] { color: #a16207; }

.tp-card[b-wgtjyege6n] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 0.9rem 1.1rem; margin-bottom: 0.7rem; width: 100%; text-align: left; }
.tp-card-button[b-wgtjyege6n] { cursor: pointer; font: inherit; }
.tp-card-button:hover[b-wgtjyege6n] { border-color: var(--brand-400, #60a5fa); }
.tp-name[b-wgtjyege6n] { font-size: 1rem; font-weight: 800; color: #0f172a; }
.tp-sub[b-wgtjyege6n] { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.2rem; font-size: 0.82rem; color: #64748b; }
.tp-verified[b-wgtjyege6n] { color: #047857; font-weight: 600; }
.tp-count[b-wgtjyege6n] { font-size: 1.4rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }

.tp-remove[b-wgtjyege6n] { background: none; border: none; color: #94a3b8; font-size: 0.82rem; font-weight: 600; cursor: pointer; flex-shrink: 0; }
.tp-remove:hover[b-wgtjyege6n] { color: #b91c1c; }

.tp-btn-ghost[b-wgtjyege6n] { flex-shrink: 0; background: #fff; color: #475569; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.45rem 0.9rem; font-weight: 600; font-size: 0.86rem; text-decoration: none; }

.tp-empty[b-wgtjyege6n] { background: #fff; border: 1px dashed #e2e8f0; border-radius: 14px; padding: 2rem 1.5rem; text-align: center; color: #64748b; font-size: 0.92rem; line-height: 1.6; }
.tp-empty-title[b-wgtjyege6n] { font-size: 1.05rem; font-weight: 800; color: #334155; margin-bottom: 0.4rem; }
.tp-empty p[b-wgtjyege6n] { margin: 0; max-width: 34rem; margin-inline: auto; }
.tp-empty a[b-wgtjyege6n] { color: var(--brand-600, #2563eb); }

@media (max-width: 640px) {
    .tp-head[b-wgtjyege6n] { flex-direction: column; }
}

/* Two-up on a desktop. Appended at the end of the file deliberately: these rules override the base
   card rules above, and same-specificity means whichever comes last wins. */
@media (min-width: 860px) {
.tp-page[b-wgtjyege6n] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.15rem; align-items: start; }
    .tp-page > .tp-head[b-wgtjyege6n],
    .tp-page > .tp-back[b-wgtjyege6n],
    .tp-page > .tp-detail-head[b-wgtjyege6n],
    .tp-page > .tp-empty[b-wgtjyege6n] { grid-column: 1 / -1; }
    .tp-card[b-wgtjyege6n] { margin-bottom: 0; height: 100%; }
}
/* _content/Quote.UI/Components/Pages/Hire/Vacancies.razor.rz.scp.css */
.vc-page[b-huigy3wzvi] { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.vc-head[b-huigy3wzvi] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; }
.vc-eyebrow[b-huigy3wzvi] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-600, #2563eb); }
.vc-head h1[b-huigy3wzvi] { margin: 0.25rem 0 0.4rem; font-size: 1.6rem; font-weight: 800; color: #0f172a; }
.vc-lead[b-huigy3wzvi] { margin: 0; color: #475569; font-size: 0.94rem; line-height: 1.55; }
.vc-lead a[b-huigy3wzvi] { color: var(--brand-600, #2563eb); }

.vc-card[b-huigy3wzvi] { display: flex; gap: 1rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1rem 1.15rem; margin-bottom: 0.75rem; }
.vc-card-main[b-huigy3wzvi] { flex: 1; min-width: 0; }
.vc-card-side[b-huigy3wzvi] { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; flex-shrink: 0; }
.vc-card-top[b-huigy3wzvi] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.vc-title[b-huigy3wzvi] { font-size: 1.02rem; font-weight: 800; color: #0f172a; }
.vc-meta[b-huigy3wzvi] { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.3rem; font-size: 0.81rem; color: #64748b; }

.vc-status[b-huigy3wzvi] { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.2rem 0.5rem; border-radius: 999px; background: #f1f5f9; color: #64748b; }
.vc-status-open[b-huigy3wzvi] { background: #ecfdf5; color: #047857; }
.vc-status-draft[b-huigy3wzvi] { background: #fff7ed; color: #9a3412; }
.vc-status-filled[b-huigy3wzvi] { background: #eff6ff; color: #1d4ed8; }

.vc-applicants[b-huigy3wzvi] { text-align: right; }
.vc-applicants-num[b-huigy3wzvi] { display: block; font-size: 1.5rem; font-weight: 800; color: #0f172a; line-height: 1; font-variant-numeric: tabular-nums; }
.vc-applicants-label[b-huigy3wzvi] { font-size: 0.75rem; color: #94a3b8; }
.vc-new[b-huigy3wzvi] { display: block; font-size: 0.75rem; font-weight: 700; color: var(--brand-600, #2563eb); margin-top: 0.15rem; }
.vc-card-actions[b-huigy3wzvi] { display: flex; gap: 0.4rem; }

.vc-label[b-huigy3wzvi] { display: block; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #475569; margin: 0.9rem 0 0.35rem; }
.vc-label:first-child[b-huigy3wzvi] { margin-top: 0; }
.vc-optional[b-huigy3wzvi] { font-weight: 600; text-transform: none; letter-spacing: 0; color: #94a3b8; margin-left: 0.35rem; }
.vc-input[b-huigy3wzvi] { width: 100%; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.5rem 0.65rem; font-size: 0.9rem; font-family: inherit; }
.vc-input:focus[b-huigy3wzvi] { outline: 2px solid var(--brand-500, #3b82f6); outline-offset: -1px; }
.vc-input-sm[b-huigy3wzvi] { flex: 0 0 7rem; }
.vc-textarea[b-huigy3wzvi] { resize: vertical; line-height: 1.55; }
.vc-hint[b-huigy3wzvi] { font-size: 0.79rem; color: #94a3b8; margin-top: 0.3rem; }

.vc-row[b-huigy3wzvi] { display: flex; gap: 0.5rem; }
.vc-col[b-huigy3wzvi] { flex: 1; min-width: 0; }
.vc-col .vc-label[b-huigy3wzvi] { margin-top: 0; }
.vc-checks[b-huigy3wzvi] { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; }
.vc-check[b-huigy3wzvi] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: #334155; padding: 0.28rem 0; cursor: pointer; }
.vc-check input[b-huigy3wzvi] { flex-shrink: 0; }

.vc-btn-primary[b-huigy3wzvi] { background: var(--brand-600, #2563eb); color: #fff; border: none; border-radius: 9px; padding: 0.5rem 1.1rem; font-weight: 700; font-size: 0.88rem; cursor: pointer; text-decoration: none; display: inline-block; flex-shrink: 0; }
.vc-btn-primary:disabled[b-huigy3wzvi] { background: #cbd5e1; cursor: not-allowed; }
.vc-btn-ghost[b-huigy3wzvi] { background: #fff; color: #475569; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.vc-btn-sm[b-huigy3wzvi] { padding: 0.35rem 0.85rem; font-size: 0.82rem; }

.vc-modal-backdrop[b-huigy3wzvi] { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 1050; }
.vc-modal[b-huigy3wzvi] { background: #fff; border-radius: 16px; width: 100%; max-width: 600px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25); }
.vc-modal-head[b-huigy3wzvi] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem 0.85rem; border-bottom: 1px solid #f1f5f9; }
.vc-modal-head h2[b-huigy3wzvi] { margin: 0; font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.vc-modal-x[b-huigy3wzvi] { background: none; border: none; font-size: 1.5rem; line-height: 1; color: #94a3b8; cursor: pointer; padding: 0 0.2rem; }
.vc-modal-body[b-huigy3wzvi] { padding: 1rem 1.25rem; overflow-y: auto; }
.vc-modal-error[b-huigy3wzvi] { margin-top: 0.85rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; padding: 0.6rem 0.75rem; font-size: 0.84rem; color: #b91c1c; }
.vc-modal-foot[b-huigy3wzvi] { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.85rem 1.25rem; border-top: 1px solid #f1f5f9; }

.vc-empty[b-huigy3wzvi] { background: #fff; border: 1px dashed #e2e8f0; border-radius: 14px; padding: 2rem 1.5rem; text-align: center; color: #64748b; font-size: 0.92rem; line-height: 1.6; }
.vc-empty-title[b-huigy3wzvi] { font-size: 1.05rem; font-weight: 800; color: #334155; margin-bottom: 0.4rem; }
.vc-empty p[b-huigy3wzvi] { margin: 0; max-width: 34rem; margin-inline: auto; }

@media (max-width: 640px) {
    .vc-head[b-huigy3wzvi] { flex-direction: column; }
    .vc-card[b-huigy3wzvi] { flex-direction: column; }
    .vc-card-side[b-huigy3wzvi] { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
    .vc-row[b-huigy3wzvi] { flex-direction: column; }
    .vc-input-sm[b-huigy3wzvi] { flex: 1; }
    .vc-modal-foot[b-huigy3wzvi] { flex-wrap: wrap; }
}

/* Guardrail prompts. Amber, not red — these are things worth checking, and colouring them like
   errors would train employers to click past the one that actually matters. */
.vc-warnings[b-huigy3wzvi] { margin-top: 0.9rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 0.75rem 0.85rem; }
.vc-warnings-title[b-huigy3wzvi] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #92400e; margin-bottom: 0.45rem; }
.vc-warning[b-huigy3wzvi] { font-size: 0.85rem; color: #78350f; line-height: 1.55; padding: 0.3rem 0; border-top: 1px solid #fef3c7; }
.vc-warning:first-of-type[b-huigy3wzvi] { border-top: none; }
/* Underpayment is the one that isn't merely advice. */
.vc-warning.is-serious[b-huigy3wzvi] { color: #991b1b; font-weight: 600; }
.vc-warnings-foot[b-huigy3wzvi] { font-size: 0.78rem; color: #a16207; margin-top: 0.45rem; }

/* Two-up on a desktop. Appended at the end of the file deliberately: these rules override the base
   card rules above, and same-specificity means whichever comes last wins. */
@media (min-width: 860px) {
.vc-page[b-huigy3wzvi] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.15rem; align-items: start; }
    .vc-page > .vc-head[b-huigy3wzvi],
    .vc-page > .vc-empty[b-huigy3wzvi] { grid-column: 1 / -1; }
    .vc-card[b-huigy3wzvi] { margin-bottom: 0; height: 100%; }
}
/* _content/Quote.UI/Components/Pages/Hire/VacancyPipeline.razor.rz.scp.css */
.vp-page[b-yj4pd2logb] { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.vp-head[b-yj4pd2logb] { margin-bottom: 1.4rem; }
.vp-back[b-yj4pd2logb] { font-size: 0.84rem; color: var(--brand-600, #2563eb); text-decoration: none; }
.vp-back:hover[b-yj4pd2logb] { text-decoration: underline; }
.vp-head h1[b-yj4pd2logb] { margin: 0.4rem 0 0.3rem; font-size: 1.5rem; font-weight: 800; color: #0f172a; }
.vp-meta[b-yj4pd2logb] { display: flex; flex-wrap: wrap; gap: 0.6rem; font-size: 0.85rem; color: #64748b; }

.vp-section-label[b-yj4pd2logb] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; margin: 1.4rem 0 0.6rem; }
.vp-section-label:first-of-type[b-yj4pd2logb] { margin-top: 0; }

.vp-card[b-yj4pd2logb] { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1rem 1.15rem; margin-bottom: 0.75rem; }
/* Unopened applications, so nobody sits unread for a week. */
.vp-card.is-new[b-yj4pd2logb] { border-color: var(--brand-300, #93c5fd); }

.vp-card-head[b-yj4pd2logb] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.vp-name[b-yj4pd2logb] { font-size: 1.02rem; font-weight: 800; color: #0f172a; }
.vp-sub[b-yj4pd2logb] { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.2rem; font-size: 0.81rem; color: #64748b; }

/* Deliberately plain. It is a count of the ad's own requirements, not a ranking, and it must not
   look like a verdict on a person. */
.vp-match[b-yj4pd2logb] { flex-shrink: 0; font-size: 0.76rem; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 0.22rem 0.6rem; white-space: nowrap; }
.vp-match.is-full[b-yj4pd2logb] { background: #ecfdf5; color: #047857; }

.vp-headline[b-yj4pd2logb] { margin-top: 0.6rem; font-size: 0.89rem; color: #334155; }
.vp-cover[b-yj4pd2logb] { margin: 0.6rem 0 0; font-size: 0.88rem; color: #475569; line-height: 1.6; white-space: pre-wrap; background: #f8fafc; border-radius: 9px; padding: 0.6rem 0.75rem; }

.vp-facts[b-yj4pd2logb] { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.65rem; }
.vp-ticket[b-yj4pd2logb], .vp-fact[b-yj4pd2logb] { background: #f1f5f9; border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.76rem; color: #475569; }
.vp-ticket.is-expired[b-yj4pd2logb] { background: #fef2f2; color: #b91c1c; }

.vp-contact[b-yj4pd2logb] { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.7rem; font-size: 0.87rem; }
.vp-contact a[b-yj4pd2logb] { color: var(--brand-600, #2563eb); text-decoration: none; }
.vp-contact a:hover[b-yj4pd2logb] { text-decoration: underline; }

.vp-actions[b-yj4pd2logb] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px solid #f1f5f9; }
.vp-btn-primary[b-yj4pd2logb] { background: var(--brand-600, #2563eb); color: #fff; border: none; border-radius: 9px; padding: 0.5rem 1.1rem; font-weight: 700; font-size: 0.88rem; cursor: pointer; }
.vp-btn-primary:disabled[b-yj4pd2logb] { background: #cbd5e1; cursor: not-allowed; }
.vp-btn-ghost[b-yj4pd2logb] { background: #fff; color: #475569; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.vp-btn-sm[b-yj4pd2logb] { padding: 0.35rem 0.85rem; font-size: 0.82rem; }
/* Pushed to the end and never coloured red — passing on someone is routine, not a punishment. */
.vp-btn-pass[b-yj4pd2logb] { margin-left: auto; color: #94a3b8; }
.vp-btn-pass:hover:not(:disabled)[b-yj4pd2logb] { color: #475569; }

.vp-waiting[b-yj4pd2logb] { margin-top: 0.8rem; font-size: 0.86rem; color: #1d4ed8; font-weight: 600; }
.vp-hired[b-yj4pd2logb] { margin-top: 0.8rem; font-size: 0.86rem; color: #047857; font-weight: 600; }

.vp-label[b-yj4pd2logb] { display: block; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #475569; margin: 0.9rem 0 0.35rem; }
.vp-label:first-child[b-yj4pd2logb] { margin-top: 0; }
.vp-optional[b-yj4pd2logb] { font-weight: 600; text-transform: none; letter-spacing: 0; color: #94a3b8; margin-left: 0.35rem; }
.vp-input[b-yj4pd2logb] { width: 100%; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.5rem 0.65rem; font-size: 0.9rem; font-family: inherit; }
.vp-input:focus[b-yj4pd2logb] { outline: 2px solid var(--brand-500, #3b82f6); outline-offset: -1px; }
.vp-textarea[b-yj4pd2logb] { resize: vertical; line-height: 1.55; }
.vp-hint[b-yj4pd2logb] { font-size: 0.79rem; color: #94a3b8; margin-top: 0.3rem; line-height: 1.5; }

.vp-modal-backdrop[b-yj4pd2logb] { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 1050; }
.vp-modal[b-yj4pd2logb] { background: #fff; border-radius: 16px; width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25); }
.vp-modal-head[b-yj4pd2logb] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem 0.85rem; border-bottom: 1px solid #f1f5f9; }
.vp-modal-head h2[b-yj4pd2logb] { margin: 0; font-size: 1.02rem; font-weight: 800; color: #0f172a; }
.vp-modal-x[b-yj4pd2logb] { background: none; border: none; font-size: 1.5rem; line-height: 1; color: #94a3b8; cursor: pointer; padding: 0 0.2rem; }
.vp-modal-body[b-yj4pd2logb] { padding: 1rem 1.25rem; overflow-y: auto; }
.vp-modal-error[b-yj4pd2logb] { margin-top: 0.85rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; padding: 0.6rem 0.75rem; font-size: 0.84rem; color: #b91c1c; }
.vp-modal-foot[b-yj4pd2logb] { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.85rem 1.25rem; border-top: 1px solid #f1f5f9; }

.vp-empty[b-yj4pd2logb] { background: #fff; border: 1px dashed #e2e8f0; border-radius: 14px; padding: 2rem 1.5rem; text-align: center; color: #64748b; font-size: 0.92rem; line-height: 1.6; }
.vp-empty-title[b-yj4pd2logb] { font-size: 1.05rem; font-weight: 800; color: #334155; margin-bottom: 0.4rem; }
.vp-empty p[b-yj4pd2logb] { margin: 0; max-width: 34rem; margin-inline: auto; }
.vp-empty a[b-yj4pd2logb] { color: var(--brand-600, #2563eb); }

@media (max-width: 640px) {
    .vp-card-head[b-yj4pd2logb] { flex-direction: column; gap: 0.5rem; }
    .vp-actions[b-yj4pd2logb] { flex-direction: column; }
    .vp-actions button[b-yj4pd2logb] { width: 100%; }
    .vp-btn-pass[b-yj4pd2logb] { margin-left: 0; }
}

/* Two-up on a desktop. Appended at the end of the file deliberately: these rules override the base
   card rules above, and same-specificity means whichever comes last wins. */
@media (min-width: 860px) {
.vp-page[b-yj4pd2logb] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.15rem; align-items: start; }
    .vp-page > .vp-head[b-yj4pd2logb],
    .vp-page > .vp-section-label[b-yj4pd2logb],
    .vp-page > .vp-empty[b-yj4pd2logb] { grid-column: 1 / -1; }
    .vp-card[b-yj4pd2logb] { margin-bottom: 0; height: 100%; }
}
/* _content/Quote.UI/Components/Pages/PublicProposal.razor.rz.scp.css */
/* The customer's quote page. Styled to read as the tradie's document, not ours — the accent
   colour comes from their branding via the --pp-brand variable set on the wrapper. */

.pp-wrap[b-3ug9kublf1] {
    --pp-brand: #2563eb;
    --pp-ink: #0f172a;
    --pp-body: #475569;
    --pp-muted: #94a3b8;
    --pp-line: #e2e8f0;
    --pp-surface: #ffffff;

    min-height: 100vh;
    padding: var(--space-6) var(--space-4) var(--space-16);
    background: #f6f7f9;
    color: var(--pp-ink);
}

.pp-center[b-3ug9kublf1] {
    display: grid;
    place-items: center;
    min-height: 60vh;
    text-align: center;
}

.pp-msg[b-3ug9kublf1] { gap: var(--space-2); }
.pp-msg > i[b-3ug9kublf1] { font-size: 2.5rem; color: var(--pp-muted); }
.pp-msg h3[b-3ug9kublf1] { margin: var(--space-3) 0 var(--space-2); font-weight: 700; }
.pp-msg p[b-3ug9kublf1] { color: var(--pp-body); max-width: 420px; margin: 0 auto; }

.pp-sheet[b-3ug9kublf1] {
    max-width: 940px;
    margin: 0 auto;
    padding: var(--space-8);
    background: var(--pp-surface);
    border: 1px solid var(--pp-line);
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
}

/* ---- Header ---------------------------------------------------------------- */
.pp-head[b-3ug9kublf1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    border-bottom: 2px solid var(--pp-brand);
}

.pp-brand[b-3ug9kublf1] { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.pp-brand img[b-3ug9kublf1] { max-height: 46px; max-width: 170px; object-fit: contain; }
.pp-brand > div[b-3ug9kublf1] { display: flex; flex-direction: column; min-width: 0; }
.pp-brand strong[b-3ug9kublf1] { font-size: 1.05rem; overflow-wrap: anywhere; }
.pp-brand span[b-3ug9kublf1] { font-size: 0.78rem; color: var(--pp-muted); }

.pp-ref[b-3ug9kublf1] { display: flex; flex-direction: column; text-align: right; font-size: 0.82rem; color: var(--pp-body); }

/* ---- Status banners --------------------------------------------------------- */
.pp-banner[b-3ug9kublf1] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding: var(--space-4);
    border-radius: 12px;
    border: 1px solid transparent;
}

.pp-banner > i[b-3ug9kublf1] { font-size: 1.3rem; flex: 0 0 auto; line-height: 1.3; }
.pp-banner div[b-3ug9kublf1] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-banner strong[b-3ug9kublf1] { font-size: 0.98rem; }
.pp-banner span[b-3ug9kublf1] { font-size: 0.88rem; line-height: 1.55; color: var(--pp-body); }

.pp-banner.accepted[b-3ug9kublf1] { background: #f0fdf4; border-color: #86efac; }
.pp-banner.accepted > i[b-3ug9kublf1], .pp-banner.accepted strong[b-3ug9kublf1] { color: #16a34a; }
.pp-banner.declined[b-3ug9kublf1] { background: #f8fafc; border-color: var(--pp-line); }
.pp-banner.declined > i[b-3ug9kublf1], .pp-banner.declined strong[b-3ug9kublf1] { color: var(--pp-body); }
.pp-banner.expired[b-3ug9kublf1] { background: #fffbeb; border-color: #fcd34d; }
.pp-banner.expired > i[b-3ug9kublf1], .pp-banner.expired strong[b-3ug9kublf1] { color: #d97706; }

/* ---- Intro ------------------------------------------------------------------ */
.pp-title[b-3ug9kublf1] {
    margin: var(--space-6) 0 4px;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.pp-for[b-3ug9kublf1] { margin: 0 0 var(--space-4); font-size: 0.9rem; color: var(--pp-muted); }

.pp-desc[b-3ug9kublf1] {
    margin: 0 0 var(--space-6);
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--pp-body);
    white-space: pre-line;
}

.pp-sheet h2[b-3ug9kublf1] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pp-muted);
    margin: 0 0 var(--space-3);
}

/* ---- Shared scope ----------------------------------------------------------- */
.pp-shared[b-3ug9kublf1] {
    margin-bottom: var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: #f8fafc;
    border-radius: 12px;
}

.pp-shared ul[b-3ug9kublf1], .pp-lines[b-3ug9kublf1] { list-style: none; margin: 0; padding: 0; }

.pp-shared li[b-3ug9kublf1], .pp-lines li[b-3ug9kublf1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 6px 0;
    font-size: 0.9rem;
    color: var(--pp-body);
}

.pp-amt[b-3ug9kublf1] { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--pp-ink); }

/* ---- Options ---------------------------------------------------------------- */
.pp-option-grid[b-3ug9kublf1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-4);
}

.pp-options.single .pp-option-grid[b-3ug9kublf1] { grid-template-columns: 1fr; }

.pp-option[b-3ug9kublf1] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    background: var(--pp-surface);
    border: 2px solid var(--pp-line);
    border-radius: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.pp-option.chosen[b-3ug9kublf1] {
    border-color: var(--pp-brand);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.pp-option.accepted[b-3ug9kublf1] { border-color: #16a34a; background: #f0fdf4; }

/* The options not taken stay legible but recede, so the accepted one reads as the record. */
.pp-option.faded[b-3ug9kublf1] { opacity: 0.45; }

.pp-rec[b-3ug9kublf1] {
    position: absolute;
    top: -11px;
    left: var(--space-5);
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--pp-brand);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.pp-option-head[b-3ug9kublf1] { margin-bottom: var(--space-3); }
.pp-option-head h3[b-3ug9kublf1] { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }

.pp-price[b-3ug9kublf1] {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pp-gst[b-3ug9kublf1] { font-size: 0.75rem; color: var(--pp-muted); }

.pp-option-desc[b-3ug9kublf1] {
    margin: 0 0 var(--space-3);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--pp-body);
}

.pp-lines[b-3ug9kublf1] { margin-bottom: var(--space-4); }
.pp-lines li[b-3ug9kublf1] { border-bottom: 1px solid var(--pp-line); }
.pp-lines li:last-child[b-3ug9kublf1] { border-bottom: none; }

.pp-choose[b-3ug9kublf1] {
    margin-top: auto;
    padding: 11px;
    border: 1px solid var(--pp-brand);
    border-radius: 10px;
    background: transparent;
    color: var(--pp-brand);
    font-size: 0.92rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pp-choose:hover[b-3ug9kublf1] { background: rgba(37, 99, 235, 0.06); }
.pp-choose.is-chosen[b-3ug9kublf1] { background: var(--pp-brand); color: #fff; }

/* ---- Extras ----------------------------------------------------------------- */
.pp-extras[b-3ug9kublf1] { margin-top: var(--space-6); }

.pp-extras-sub[b-3ug9kublf1] {
    margin: -6px 0 var(--space-3);
    font-size: 0.85rem;
    color: var(--pp-body);
}

.pp-extra[b-3ug9kublf1] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 11px var(--space-4);
    margin-bottom: 8px;
    border: 1px solid var(--pp-line);
    border-radius: 10px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pp-extra:hover[b-3ug9kublf1] { border-color: var(--pp-brand); }
.pp-extra.on[b-3ug9kublf1] { border-color: var(--pp-brand); background: rgba(37, 99, 235, 0.04); }
.pp-extra input[b-3ug9kublf1] { flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--pp-brand); cursor: pointer; }
.pp-extra-label[b-3ug9kublf1] { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--pp-body); }

/* ---- Accept ----------------------------------------------------------------- */
.pp-accept[b-3ug9kublf1] {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: #f8fafc;
    border-radius: 14px;
}

.pp-total-row[b-3ug9kublf1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--pp-line);
    font-size: 0.95rem;
    color: var(--pp-body);
}

.pp-total-row strong[b-3ug9kublf1] {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--pp-ink);
    font-variant-numeric: tabular-nums;
}

.pp-name[b-3ug9kublf1] { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; color: var(--pp-body); }

.pp-name input[b-3ug9kublf1], .pp-decline-box textarea[b-3ug9kublf1] {
    padding: 11px 13px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--pp-ink);
    background: var(--pp-surface);
    border: 1px solid var(--pp-line);
    border-radius: 10px;
}

.pp-name input:focus[b-3ug9kublf1], .pp-decline-box textarea:focus[b-3ug9kublf1] {
    outline: none;
    border-color: var(--pp-brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.pp-error[b-3ug9kublf1] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-3) 0 0;
    font-size: 0.85rem;
    color: #dc2626;
}

.pp-actions[b-3ug9kublf1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.pp-btn-accept[b-3ug9kublf1], .pp-btn-decline[b-3ug9kublf1], .pp-btn-decline-confirm[b-3ug9kublf1], .pp-btn-cancel[b-3ug9kublf1] {
    padding: 13px var(--space-6);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.pp-btn-accept[b-3ug9kublf1] {
    flex: 1 1 220px;
    border: none;
    background: var(--pp-brand);
    color: #fff;
}

.pp-btn-accept:disabled[b-3ug9kublf1] { opacity: 0.45; cursor: not-allowed; }

.pp-btn-decline[b-3ug9kublf1], .pp-btn-cancel[b-3ug9kublf1] {
    border: 1px solid var(--pp-line);
    background: transparent;
    color: var(--pp-body);
}

.pp-btn-decline:hover[b-3ug9kublf1], .pp-btn-cancel:hover[b-3ug9kublf1] { background: rgba(15, 23, 42, 0.03); }

.pp-fineprint[b-3ug9kublf1] {
    margin: var(--space-4) 0 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--pp-muted);
}

.pp-decline-box[b-3ug9kublf1] {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--pp-line);
}

.pp-decline-box label[b-3ug9kublf1] { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; color: var(--pp-body); }
.pp-decline-actions[b-3ug9kublf1] { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.pp-btn-decline-confirm[b-3ug9kublf1] { border: none; background: var(--pp-ink); color: #fff; }

/* ---- Notes, terms, footer ---------------------------------------------------- */
.pp-notes[b-3ug9kublf1], .pp-terms[b-3ug9kublf1] { margin-top: var(--space-6); }

.pp-notes p[b-3ug9kublf1], .pp-terms p[b-3ug9kublf1] {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--pp-body);
    white-space: pre-line;
}

.pp-terms p[b-3ug9kublf1] { font-size: 0.8rem; color: var(--pp-muted); }

.pp-foot[b-3ug9kublf1] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--pp-line);
    font-size: 0.78rem;
    color: var(--pp-muted);
}

@media (max-width: 720px) {
    .pp-wrap[b-3ug9kublf1] { padding: var(--space-3) var(--space-2) var(--space-10); }
    .pp-sheet[b-3ug9kublf1] { padding: var(--space-5) var(--space-4); border-radius: 14px; }
    .pp-head[b-3ug9kublf1] { border-bottom-width: 1px; }
    .pp-ref[b-3ug9kublf1] { text-align: left; }
    .pp-title[b-3ug9kublf1] { font-size: 1.45rem; }
    .pp-btn-accept[b-3ug9kublf1], .pp-btn-decline[b-3ug9kublf1] { flex: 1 1 100%; }
}
/* _content/Quote.UI/Components/Pages/Tradie/AskData.razor.rz.scp.css */
/* Ask your data — plain-English questions over the business's own numbers */

.ask-body[b-vvl7cvn0qd] {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-16);
}

/* ---- Question box ---------------------------------------------------------- */
.ask-box[b-vvl7cvn0qd] {
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.ask-input-row[b-vvl7cvn0qd] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    height: 52px;
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.ask-input-row:focus-within[b-vvl7cvn0qd] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow-soft);
}

.ask-input-row > i[b-vvl7cvn0qd] {
    flex: 0 0 auto;
    color: var(--neutral-500);
}

.ask-input-row input[b-vvl7cvn0qd] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--color-text);
}

.ask-input-row input[b-vvl7cvn0qd]::placeholder { color: var(--neutral-500); }

.ask-btn[b-vvl7cvn0qd] {
    flex: 0 0 auto;
    min-width: 84px;
    height: 38px;
    padding: 0 var(--space-5);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}

.ask-btn:hover:not(:disabled)[b-vvl7cvn0qd] { background: var(--color-primary-hover); }
.ask-btn:disabled[b-vvl7cvn0qd] { opacity: 0.5; cursor: not-allowed; }

/* ---- Suggestions ----------------------------------------------------------- */
.ask-suggestions[b-vvl7cvn0qd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.ask-chip[b-vvl7cvn0qd] {
    padding: 6px 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}

.ask-chip:hover:not(:disabled)[b-vvl7cvn0qd] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--brand-50);
}

.ask-chip:disabled[b-vvl7cvn0qd] { opacity: 0.5; cursor: not-allowed; }

/* ---- Error ----------------------------------------------------------------- */
.ask-error[b-vvl7cvn0qd] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: var(--danger-50);
    color: var(--danger-600);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

/* ---- Answer ---------------------------------------------------------------- */
.ask-answer[b-vvl7cvn0qd] {
    margin-top: var(--space-5);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.ask-answer.is-unknown[b-vvl7cvn0qd] { background: var(--color-surface-2); }

.ask-answer-head[b-vvl7cvn0qd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

/* What the router thought was asked, shown back so a misread question is obvious before the
   figure below it gets trusted. */
.ask-understood[b-vvl7cvn0qd] {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-text-muted);
    min-width: 0;
    overflow-wrap: anywhere;
}

.ask-period[b-vvl7cvn0qd] {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.ask-facts[b-vvl7cvn0qd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--space-3);
}

.ask-fact[b-vvl7cvn0qd] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-canvas);
    border-radius: var(--radius-md);
    min-width: 0;
}

.ask-fact-label[b-vvl7cvn0qd] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.ask-fact-value[b-vvl7cvn0qd] {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    /* Tabular figures so a column of dollar amounts lines up on the decimal. */
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Explanations and caveats read as sentences, not statistics. */
.ask-fact.is-note[b-vvl7cvn0qd] {
    grid-column: 1 / -1;
    background: var(--warning-50);
}

.ask-fact.is-note .ask-fact-value[b-vvl7cvn0qd] {
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    color: var(--color-text);
    font-variant-numeric: normal;
}

.ask-prose[b-vvl7cvn0qd] {
    margin: var(--space-4) 0 0;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

.ask-footnote[b-vvl7cvn0qd] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
}

.ask-footnote > i[b-vvl7cvn0qd] { flex: 0 0 auto; margin-top: 1px; }

@media (max-width: 720px) {
    .ask-body[b-vvl7cvn0qd] { padding: var(--space-5) var(--space-3) var(--space-12); }
    .ask-input-row[b-vvl7cvn0qd] { height: auto; flex-wrap: wrap; padding: var(--space-3); border-radius: var(--radius-lg); }
    .ask-input-row input[b-vvl7cvn0qd] { flex: 1 1 100%; order: -1; padding: var(--space-2) 0; }
    .ask-input-row > i[b-vvl7cvn0qd] { display: none; }
    .ask-btn[b-vvl7cvn0qd] { width: 100%; }
}
/* _content/Quote.UI/Components/Pages/Tradie/CostRates.razor.rz.scp.css */
/* The cost model setup page */

.cr-body[b-z0tnjbl3ps] {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-16);
}

/* ---- Missing-rate warning --------------------------------------------------- */
.cr-warn[b-z0tnjbl3ps] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: var(--warning-50);
    border: 1px solid var(--warning-500);
    border-radius: var(--radius-md);
}

.cr-warn > i[b-z0tnjbl3ps] { flex: 0 0 auto; font-size: 1.2rem; color: var(--warning-600); margin-top: 1px; }
.cr-warn div[b-z0tnjbl3ps] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-warn strong[b-z0tnjbl3ps] { font-size: var(--text-md); color: var(--warning-600); }
.cr-warn span[b-z0tnjbl3ps] { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text); }

/* ---- Sections --------------------------------------------------------------- */
.cr-section[b-z0tnjbl3ps] { margin-bottom: var(--space-10); }

.cr-section-head[b-z0tnjbl3ps] { margin-bottom: var(--space-4); }

.cr-section-head h2[b-z0tnjbl3ps] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0 0 4px;
}

.cr-section-head p[b-z0tnjbl3ps] {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 640px;
}

/* ---- Existing rates ---------------------------------------------------------- */
.cr-rates[b-z0tnjbl3ps] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.cr-rate[b-z0tnjbl3ps] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.cr-rate-head[b-z0tnjbl3ps] {
    grid-column: 1;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.cr-rate-head strong[b-z0tnjbl3ps] { font-size: var(--text-md); color: var(--color-text); }

.cr-rate-cost[b-z0tnjbl3ps] {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.cr-rate-build[b-z0tnjbl3ps] {
    grid-column: 1;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.cr-rate-del[b-z0tnjbl3ps] {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    width: 32px; height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--neutral-400);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.cr-rate-del:hover[b-z0tnjbl3ps] { background: var(--danger-50); color: var(--danger-600); }

/* ---- Form -------------------------------------------------------------------- */
.cr-form[b-z0tnjbl3ps] {
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.cr-form h3[b-z0tnjbl3ps] {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-4);
}

.cr-grid[b-z0tnjbl3ps] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: var(--space-3);
}

.cr-grid label[b-z0tnjbl3ps] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.cr-grid input[b-z0tnjbl3ps], .cr-grid select[b-z0tnjbl3ps] {
    padding: 9px 11px;
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-variant-numeric: tabular-nums;
}

.cr-grid input:focus[b-z0tnjbl3ps], .cr-grid select:focus[b-z0tnjbl3ps] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow-soft);
}

.cr-hint[b-z0tnjbl3ps] {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
    max-width: 620px;
}

/* ---- Live working ------------------------------------------------------------ */
.cr-preview[b-z0tnjbl3ps] {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-canvas);
    border-radius: var(--radius-md);
}

.cr-preview-row[b-z0tnjbl3ps] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 3px 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.cr-preview-total[b-z0tnjbl3ps] {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.cr-error[b-z0tnjbl3ps] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--danger-600);
}

.cr-save[b-z0tnjbl3ps] {
    margin-top: var(--space-4);
    padding: 11px var(--space-6);
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}

.cr-save:hover:not(:disabled)[b-z0tnjbl3ps] { background: var(--color-primary-hover); }
.cr-save:disabled[b-z0tnjbl3ps] { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 720px) {
    .cr-body[b-z0tnjbl3ps] { padding: var(--space-5) var(--space-3) var(--space-12); }
    .cr-save[b-z0tnjbl3ps] { width: 100%; }
}

/* ---- Plant ------------------------------------------------------------------- */
.cr-plant[b-z0tnjbl3ps] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cr-plant-row[b-z0tnjbl3ps] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.cr-plant-row.editing[b-z0tnjbl3ps] { border-color: var(--color-primary); }

.cr-plant-main[b-z0tnjbl3ps] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-plant-main strong[b-z0tnjbl3ps] { font-size: var(--text-md); color: var(--color-text); }

.cr-plant-build[b-z0tnjbl3ps] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

/* An unpriced asset is stated plainly rather than shown as a zero, which would read as free. */
.cr-plant-none[b-z0tnjbl3ps] { color: var(--warning-600); font-weight: var(--weight-medium); }

.cr-plant-edit[b-z0tnjbl3ps] {
    align-self: center;
    padding: 7px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.cr-plant-edit:hover[b-z0tnjbl3ps] { border-color: var(--color-primary); color: var(--color-primary); }

.cr-plant-form[b-z0tnjbl3ps] {
    grid-column: 1 / -1;
    margin-top: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
/* _content/Quote.UI/Components/Pages/Tradie/DocumentCentre.razor.rz.scp.css */
/* §7 — brand-gradient modal headers (Upload + New Folder).
   The page otherwise leans on globally-styled bootstrap form controls, which
   app.css already brand-aligns; only the modal headers were plain. */
.modal-header[b-vmsfh3gmbv] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    border-bottom: none;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

.modal-header .modal-title[b-vmsfh3gmbv] {
    color: #fff;
    font-weight: 700;
}

/* Make bootstrap's dark close glyph legible on the gradient. */
.modal-header .btn-close[b-vmsfh3gmbv] {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.85;
}

.modal-header .btn-close:hover[b-vmsfh3gmbv] {
    opacity: 1;
}
/* _content/Quote.UI/Components/Pages/Tradie/Margins.razor.rz.scp.css */
/* Margin analytics */

.mg-body[b-c1e9nuhtsn] {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-16);
}

.mg-controls[b-c1e9nuhtsn] { margin-bottom: var(--space-4); }

.mg-controls label[b-c1e9nuhtsn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.mg-controls select[b-c1e9nuhtsn] {
    padding: 8px 11px;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* ---- Uncosted-hours warning ------------------------------------------------- */
.mg-warn[b-c1e9nuhtsn] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--warning-50);
    border: 1px solid var(--warning-500);
    border-radius: var(--radius-md);
}

.mg-warn > i[b-c1e9nuhtsn] { flex: 0 0 auto; font-size: 1.2rem; color: var(--warning-600); margin-top: 1px; }
.mg-warn div[b-c1e9nuhtsn] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mg-warn strong[b-c1e9nuhtsn] { font-size: var(--text-md); color: var(--warning-600); }
.mg-warn span[b-c1e9nuhtsn] { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text); }
.mg-warn a[b-c1e9nuhtsn] { color: var(--color-primary); }

/* ---- KPIs -------------------------------------------------------------------- */
.mg-kpis[b-c1e9nuhtsn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.mg-kpi[b-c1e9nuhtsn] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.mg-kpi span[b-c1e9nuhtsn] { font-size: var(--text-xs); color: var(--color-text-muted); }

.mg-kpi strong[b-c1e9nuhtsn] {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
}

.mg-kpi.pos strong[b-c1e9nuhtsn] { color: var(--success-600); }
.mg-kpi.neg strong[b-c1e9nuhtsn] { color: var(--danger-600); }

/* ---- Tabs -------------------------------------------------------------------- */
.mg-tabs[b-c1e9nuhtsn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.mg-tab[b-c1e9nuhtsn] {
    padding: 7px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}

.mg-tab:hover[b-c1e9nuhtsn] { border-color: var(--color-primary); color: var(--color-primary); }
.mg-tab.active[b-c1e9nuhtsn] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.mg-note[b-c1e9nuhtsn] {
    margin: 0 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-canvas);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
}

/* ---- Table ------------------------------------------------------------------- */
.mg-table[b-c1e9nuhtsn] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.mg-row[b-c1e9nuhtsn] {
    display: grid;
    grid-template-columns: 2fr 1.3fr 1fr 1fr 1fr 70px;
    gap: var(--space-3);
    align-items: baseline;
    padding: 11px var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}

.mg-row:last-child[b-c1e9nuhtsn] { border-bottom: none; }

.mg-head[b-c1e9nuhtsn] {
    background: var(--color-canvas);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

.mg-name[b-c1e9nuhtsn] {
    color: var(--color-text);
    font-weight: var(--weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.mg-sub[b-c1e9nuhtsn] { color: var(--color-text-muted); overflow-wrap: anywhere; }

.mg-num[b-c1e9nuhtsn] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.mg-pct[b-c1e9nuhtsn] { font-weight: var(--weight-bold); }

/* A job losing money is the whole reason to open this page — it shouldn't take squinting. */
.mg-row.is-neg .mg-num[b-c1e9nuhtsn] { color: var(--danger-600); }
.mg-row.is-neg[b-c1e9nuhtsn] { background: var(--danger-50); }

@media (max-width: 860px) {
    .mg-body[b-c1e9nuhtsn] { padding: var(--space-5) var(--space-3) var(--space-12); }
    .mg-row[b-c1e9nuhtsn] { grid-template-columns: 1.6fr 1fr 1fr 60px; }
    /* Customer and true cost drop out first — revenue, margin and percent are the decision. */
    .mg-row > :nth-child(2)[b-c1e9nuhtsn], .mg-row > :nth-child(4)[b-c1e9nuhtsn] { display: none; }
}

/* A margin that only exists because nothing was costed is labelled, not printed as a percentage. */
.mg-nocost[b-c1e9nuhtsn] {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--warning-600);
    white-space: nowrap;
}
/* _content/Quote.UI/Components/Pages/Tradie/PurchaseMatch.razor.rz.scp.css */
/* Three-way match */

.pm-body[b-olc57qax1u] {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-16);
}

.pm-controls[b-olc57qax1u] { margin-bottom: var(--space-4); }

.pm-toggle[b-olc57qax1u] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    cursor: pointer;
}

.pm-toggle input[b-olc57qax1u] { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }

.pm-note[b-olc57qax1u] {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-canvas);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
}

.pm-list[b-olc57qax1u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pm-card[b-olc57qax1u] {
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* A flagged order should be findable by scanning, not by reading. */
.pm-card.has-flags[b-olc57qax1u] { border-color: var(--warning-500); background: var(--warning-50); }

.pm-card-head[b-olc57qax1u] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.pm-card-head > div[b-olc57qax1u] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-card-head strong[b-olc57qax1u] { font-size: var(--text-md); color: var(--color-text); }
.pm-supplier[b-olc57qax1u] { font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }

.pm-status[b-olc57qax1u] {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-canvas);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.pm-figures[b-olc57qax1u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.pm-figures > div[b-olc57qax1u] { display: flex; flex-direction: column; gap: 2px; }
.pm-figures span[b-olc57qax1u] { font-size: var(--text-xs); color: var(--color-text-muted); }

.pm-figures strong[b-olc57qax1u] {
    font-size: var(--text-md);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.pm-flags[b-olc57qax1u] {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pm-flags li[b-olc57qax1u] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text);
}

.pm-flags i[b-olc57qax1u] { flex: 0 0 auto; margin-top: 2px; color: var(--warning-600); }

.pm-clean[b-olc57qax1u] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--success-600);
}

@media (max-width: 720px) {
    .pm-body[b-olc57qax1u] { padding: var(--space-5) var(--space-3) var(--space-12); }
}
/* _content/Quote.UI/Components/Pages/Tradie/TenderDetail.razor.rz.scp.css */
/* Tender detail — the bidder's view.
   Two columns on desktop: the work on the left, the bid on the right and sticky, because a tradie
   reads the scope and prices at the same time rather than one after the other. */

.td-page[b-uyit728xzd] { background: var(--color-canvas, #f4f4f2); min-height: 100vh; }
.td-loading[b-uyit728xzd] { display: flex; justify-content: center; padding: 5rem 0; }
.td-shell[b-uyit728xzd] { max-width: 1180px; margin: 0 auto; padding: 1.4rem 1.25rem 4rem; }

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.td-hero[b-uyit728xzd] { position: relative; color: #fff; padding: 1.6rem 0 1.9rem; overflow: hidden; }
.td-hero[b-uyit728xzd]::after {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(180deg, rgba(8,15,30,.25) 0%, rgba(8,15,30,.82) 100%),
        repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 24px);
}
.td-hero-inner[b-uyit728xzd] { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }

/* Same eight tones as the board, so a tender looks like itself on both screens. */
.tone-1[b-uyit728xzd] { background: linear-gradient(140deg,#fbbf24,#b45309 55%,#6b2c0d); }
.tone-2[b-uyit728xzd] { background: linear-gradient(140deg,#38bdf8,#0369a1 55%,#0b2740); }
.tone-3[b-uyit728xzd] { background: linear-gradient(140deg,#34d399,#0f766e 55%,#0d2320); }
.tone-4[b-uyit728xzd] { background: linear-gradient(140deg,#818cf8,#4338ca 55%,#1e1b4b); }
.tone-5[b-uyit728xzd] { background: linear-gradient(140deg,#22d3ee,#0e7490 55%,#0a2a33); }
.tone-6[b-uyit728xzd] { background: linear-gradient(140deg,#fb7185,#9f1239 55%,#3f0d1c); }
.tone-7[b-uyit728xzd] { background: linear-gradient(140deg,#a78bfa,#6d28d9 55%,#2e1065); }
.tone-8[b-uyit728xzd] { background: linear-gradient(140deg,#94a3b8,#334155 55%,#0f172a); }

.td-back[b-uyit728xzd] {
    display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.82);
    font-size: .82rem; font-weight: 600; text-decoration: none; margin-bottom: 1rem;
}
.td-back:hover[b-uyit728xzd] { color: #fff; }

.td-client[b-uyit728xzd] { display: flex; align-items: center; gap: .65rem; margin-bottom: .9rem; }
.td-logo[b-uyit728xzd] {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; object-fit: contain;
    background: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.5); padding: 4px;
}
.td-logo-fb[b-uyit728xzd] {
    display: flex; align-items: center; justify-content: center; padding: 0;
    font-size: .92rem; font-weight: 800; color: #1d4ed8; letter-spacing: -.02em;
}
.td-client-name[b-uyit728xzd] { font-weight: 700; font-size: .95rem; }
.td-client-sub[b-uyit728xzd] { font-size: .78rem; color: rgba(255,255,255,.7); }

.td-title[b-uyit728xzd] {
    font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800; letter-spacing: -.028em;
    line-height: 1.14; margin: 0 0 .4rem; max-width: 24ch; text-wrap: balance;
}
.td-ref code[b-uyit728xzd] { font-size: .78rem; color: rgba(255,255,255,.62); }

.td-hero-stats[b-uyit728xzd] { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.35rem; }
.td-stat b[b-uyit728xzd] {
    display: block; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; line-height: 1.15;
}
.td-stat span[b-uyit728xzd] {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
    color: rgba(255,255,255,.6);
}
.td-stat.soon b[b-uyit728xzd] { color: #fbbf24; }
.td-stat.critical b[b-uyit728xzd] { color: #fca5a5; }
.td-stat.closed b[b-uyit728xzd] { color: rgba(255,255,255,.55); }

/* ── Alerts ─────────────────────────────────────────────────────────────────── */
.td-alert[b-uyit728xzd] {
    display: flex; align-items: center; gap: .9rem; padding: .95rem 1.15rem;
    border-radius: var(--radius-lg, 16px); margin-bottom: 1.1rem; border: 1px solid;
}
.td-alert i[b-uyit728xzd] { font-size: 1.2rem; flex-shrink: 0; }
.td-alert div[b-uyit728xzd] { flex: 1; display: flex; flex-direction: column; }
.td-alert strong[b-uyit728xzd] { font-size: .92rem; }
.td-alert span[b-uyit728xzd] { font-size: .83rem; opacity: .88; }
.td-alert.warn[b-uyit728xzd] { background: var(--warning-50, #fffbeb); border-color: #fde68a; color: var(--warning-700, #b45309); }
.td-alert.ok[b-uyit728xzd] { background: var(--success-50, #f0fdf4); border-color: #bbf7d0; color: var(--success-700, #15803d); }

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.td-cols[b-uyit728xzd] { display: grid; grid-template-columns: 1fr 380px; gap: 1.15rem; align-items: start; }
.td-main[b-uyit728xzd] { display: flex; flex-direction: column; gap: 1.15rem; min-width: 0; }
.td-side[b-uyit728xzd] { position: sticky; top: 1rem; }

.td-card[b-uyit728xzd] {
    background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, 16px); padding: 1.2rem 1.3rem;
}
.td-h2[b-uyit728xzd] {
    display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem;
    font-size: 1rem; font-weight: 800; letter-spacing: -.015em; color: var(--neutral-900, #1f2933);
}
.td-h2 i[b-uyit728xzd] { color: var(--brand-600, #2563eb); }
.td-count[b-uyit728xzd] {
    font-size: .7rem; font-weight: 800; background: var(--brand-50, #eff6ff);
    color: var(--brand-700, #1d4ed8); padding: .1rem .45rem; border-radius: 999px;
}
.td-hint[b-uyit728xzd] { font-size: .8rem; color: var(--neutral-500, #9aa3ad); margin: 0 0 .9rem; line-height: 1.5; }
.td-scope[b-uyit728xzd] { font-size: .92rem; line-height: 1.65; color: var(--neutral-800, #333d47); margin: 0 0 1.1rem;
            white-space: pre-wrap; }

.td-facts[b-uyit728xzd] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: .75rem;
            padding-top: 1rem; border-top: 1px solid var(--color-border, #e5e7eb); }
.td-facts div[b-uyit728xzd] { display: flex; flex-direction: column; gap: .1rem; }
.td-facts span[b-uyit728xzd] { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
                 color: var(--neutral-500, #9aa3ad); }
.td-facts b[b-uyit728xzd] { font-size: .86rem; color: var(--neutral-900, #1f2933); }

.td-reqs[b-uyit728xzd] { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin-top: 1rem;
           padding-top: 1rem; border-top: 1px solid var(--color-border, #e5e7eb); }
.td-req-label[b-uyit728xzd] { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
                color: var(--neutral-500, #9aa3ad); margin-right: .2rem; }
.td-req[b-uyit728xzd] { font-size: .74rem; font-weight: 600; background: var(--neutral-50, #f8f8f7);
          border: 1px solid var(--color-border, #e5e7eb); padding: .24rem .6rem; border-radius: 6px;
          color: var(--neutral-700, #4b5563); }

/* ── Addenda ────────────────────────────────────────────────────────────────── */
.td-addenda[b-uyit728xzd] { display: flex; flex-direction: column; gap: .7rem; }
.td-add[b-uyit728xzd] { display: flex; gap: .75rem; padding: .8rem .9rem; background: var(--neutral-50, #f8f8f7);
          border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-md, 12px); }
.td-add-n[b-uyit728xzd] {
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; font-size: .76rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-600, #2563eb); color: #fff;
}
.td-add-q[b-uyit728xzd] { font-size: .86rem; font-weight: 700; color: var(--neutral-900, #1f2933); }
.td-add-a[b-uyit728xzd] { font-size: .85rem; color: var(--neutral-700, #4b5563); margin-top: .2rem; line-height: 1.55; }
.td-add-d[b-uyit728xzd] { font-size: .7rem; color: var(--neutral-500, #9aa3ad); margin-top: .35rem; }
.td-empty-sm[b-uyit728xzd] { font-size: .84rem; color: var(--neutral-500, #9aa3ad); padding: .6rem 0; }

.td-ask[b-uyit728xzd] { display: flex; gap: .5rem; align-items: flex-start; margin-top: 1rem; }
.td-ask .td-input[b-uyit728xzd] { flex: 1; }

/* ── Bid panel ──────────────────────────────────────────────────────────────── */
.td-label[b-uyit728xzd] { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: .06em; color: var(--neutral-500, #9aa3ad); margin: .9rem 0 .3rem; }
.td-input[b-uyit728xzd] {
    width: 100%; font-family: inherit; font-size: .88rem; color: var(--neutral-900, #1f2933);
    background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 9px; padding: .55rem .7rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.td-input:focus[b-uyit728xzd] { outline: none; border-color: var(--brand-400, #60a5fa);
                  box-shadow: 0 0 0 3px rgba(37,99,235,.14); }

.td-lots[b-uyit728xzd] { display: flex; flex-direction: column; gap: .5rem; }
.td-lot[b-uyit728xzd] { display: flex; align-items: center; gap: .7rem; padding: .55rem 0;
          border-bottom: 1px dashed var(--color-border, #e5e7eb); }
.td-lot:last-child[b-uyit728xzd] { border-bottom: 0; }
.td-lot-d[b-uyit728xzd] { flex: 1; min-width: 0; }
.td-lot-d b[b-uyit728xzd] { display: block; font-size: .83rem; font-weight: 700; color: var(--neutral-900, #1f2933);
              line-height: 1.3; }
.td-lot-d span[b-uyit728xzd] { font-size: .73rem; color: var(--neutral-500, #9aa3ad); }
.td-lot-r[b-uyit728xzd] { position: relative; width: 116px; flex-shrink: 0; }
.td-lot-r-lg[b-uyit728xzd] { width: 100%; }
.td-cur[b-uyit728xzd] { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
          font-size: .85rem; font-weight: 700; color: var(--neutral-500, #9aa3ad); }
.td-rate[b-uyit728xzd] { padding-left: 1.5rem; text-align: right; font-variant-numeric: tabular-nums;
           font-weight: 700; }

.td-total[b-uyit728xzd] { display: flex; align-items: baseline; justify-content: space-between;
            margin-top: .9rem; padding-top: .8rem; border-top: 2px solid var(--neutral-900, #1f2933); }
.td-total span[b-uyit728xzd] { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
                 color: var(--neutral-500, #9aa3ad); }
.td-total b[b-uyit728xzd] { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em;
              font-variant-numeric: tabular-nums; color: var(--neutral-900, #1f2933); }

.td-inbadge[b-uyit728xzd] {
    display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border-radius: 10px;
    background: var(--success-50, #f0fdf4); border: 1px solid #bbf7d0; margin-bottom: .3rem;
}
.td-inbadge i[b-uyit728xzd] { font-size: 1.15rem; color: var(--success-600, #16a34a); }
.td-inbadge strong[b-uyit728xzd] { display: block; font-size: .86rem; color: var(--success-700, #15803d); }
.td-inbadge span[b-uyit728xzd] { font-size: .8rem; color: var(--success-700, #15803d); opacity: .85;
                   font-variant-numeric: tabular-nums; }

.td-sealed[b-uyit728xzd] { text-align: center; padding: 1.4rem .8rem; }
.td-sealed i[b-uyit728xzd] { font-size: 1.6rem; color: var(--neutral-400, #cbd0d6); }
.td-sealed strong[b-uyit728xzd] { display: block; margin-top: .5rem; font-size: .92rem; color: var(--neutral-900, #1f2933); }
.td-sealed span[b-uyit728xzd] { display: block; margin-top: .25rem; font-size: .82rem; color: var(--neutral-500, #9aa3ad);
                  line-height: 1.5; }

.td-problems[b-uyit728xzd] { margin-top: .8rem; padding: .65rem .8rem; border-radius: 9px;
               background: var(--warning-50, #fffbeb); border: 1px solid #fde68a; }
.td-problems div[b-uyit728xzd] { font-size: .82rem; color: var(--warning-700, #b45309); display: flex;
                   align-items: center; }
.td-note[b-uyit728xzd] { margin-top: .7rem; font-size: .82rem; color: var(--neutral-600, #6b7280); }

.td-actions[b-uyit728xzd] { display: flex; gap: .5rem; margin-top: 1.1rem; }
.td-btn[b-uyit728xzd] {
    border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: .86rem;
    border-radius: 10px; padding: .6rem 1.05rem; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    transition: background-color .15s ease, color .15s ease;
}
.td-btn.primary[b-uyit728xzd] { background: var(--brand-600, #2563eb); color: #fff; flex: 1; }
.td-btn.primary:hover:not(:disabled)[b-uyit728xzd] { background: var(--brand-700, #1d4ed8); }
.td-btn.ghost[b-uyit728xzd] { background: var(--neutral-50, #f8f8f7); color: var(--neutral-700, #4b5563);
                border: 1px solid var(--color-border, #e5e7eb); }
.td-btn.ghost:hover:not(:disabled)[b-uyit728xzd] { border-color: var(--brand-300, #93c5fd); color: var(--brand-600, #2563eb); }
.td-btn.warn[b-uyit728xzd] { background: var(--warning-600, #d97706); color: #fff; }
.td-btn.danger-link[b-uyit728xzd] { background: transparent; color: var(--danger-600, #dc2626); padding: .5rem 0;
                      font-size: .82rem; width: 100%; margin-top: .4rem; }
.td-btn:disabled[b-uyit728xzd] { opacity: .55; cursor: not-allowed; }

/* The honest wording: access-controlled, not cryptographically sealed. */
.td-seal-note[b-uyit728xzd] {
    margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--color-border, #e5e7eb);
    font-size: .74rem; color: var(--neutral-500, #9aa3ad); line-height: 1.5;
    display: flex; gap: .45rem; align-items: flex-start;
}
.td-seal-note i[b-uyit728xzd] { color: var(--brand-600, #2563eb); margin-top: .1rem; }

@media (max-width: 900px) {
    .td-cols[b-uyit728xzd] { grid-template-columns: 1fr; }
    .td-side[b-uyit728xzd] { position: static; }
    .td-hero-stats[b-uyit728xzd] { gap: 1.4rem; }
}

/* ── Suggested additions ─────────────────────────────────────────────────────
   Below the price and visually distinct, because the whole point is that this is NOT part of the
   number being compared. If it read as part of the bid, a bidder would rightly worry that flagging
   a gap makes them look dearer than someone who stayed quiet. */
.td-sugs[b-uyit728xzd] { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--color-border, #e5e7eb); }

.td-sug-intro[b-uyit728xzd] { font-size: .78rem; line-height: 1.55; color: var(--neutral-500, #9aa3ad);
                margin-bottom: .8rem; }
.td-sug-intro strong[b-uyit728xzd] { display: block; color: var(--neutral-900, #1f2933); font-size: .84rem;
                       margin-bottom: .15rem; }

.td-sug[b-uyit728xzd] { background: #f5f3ff; border: 1px solid #ede9fe; border-radius: var(--radius-md, 12px);
          padding: .7rem .85rem; margin-bottom: .5rem; }
.td-sug-top[b-uyit728xzd] { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.td-sug-top b[b-uyit728xzd] { font-size: .85rem; color: #6d28d9; }
.td-sug-x[b-uyit728xzd] { background: none; border: 0; cursor: pointer; color: var(--neutral-400, #cbd0d6);
            font-size: 1.05rem; line-height: 1; }
.td-sug-x:hover[b-uyit728xzd] { color: var(--danger-600, #dc2626); }
.td-sug-nums[b-uyit728xzd] { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .3rem; font-size: .75rem;
               color: var(--neutral-600, #6b7280); }
.td-sug-nums b[b-uyit728xzd] { color: var(--neutral-900, #1f2933); font-variant-numeric: tabular-nums; }
.td-sug-why[b-uyit728xzd] { font-size: .78rem; color: var(--neutral-700, #4b5563); line-height: 1.55;
              margin: .45rem 0 0; }

.td-sug-form[b-uyit728xzd] { background: var(--neutral-50, #f8f8f7); border: 1px dashed #ede9fe;
               border-radius: var(--radius-md, 12px); padding: .85rem .95rem; }
.td-sug-row[b-uyit728xzd] { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .3rem; }
.td-sug-hint[b-uyit728xzd] { font-size: .72rem; color: var(--neutral-500, #9aa3ad); margin-top: .25rem;
               line-height: 1.45; }

.td-sug-add[b-uyit728xzd] { width: 100%; background: none; border: 1px dashed #ddd6fe; color: #6d28d9;
              border-radius: 9px; padding: .55rem .9rem; font-family: inherit; font-size: .83rem;
              font-weight: 700; cursor: pointer; }
.td-sug-add:hover[b-uyit728xzd] { background: #f5f3ff; }

@media (max-width: 900px) { .td-sug-row[b-uyit728xzd] { grid-template-columns: 1fr; } }
/* _content/Quote.UI/Components/Pages/Work/Alerts.razor.rz.scp.css */
.al-page[b-w3ln3mpus3] { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.al-head[b-w3ln3mpus3] { margin-bottom: 1.4rem; }
.al-eyebrow[b-w3ln3mpus3] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-600, #2563eb); }
.al-head h1[b-w3ln3mpus3] { margin: 0.25rem 0 0.4rem; font-size: 1.6rem; font-weight: 800; color: #0f172a; }
.al-lead[b-w3ln3mpus3] { margin: 0; color: #475569; font-size: 0.94rem; line-height: 1.55; }

.al-section-label[b-w3ln3mpus3] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; margin: 1.4rem 0 0.6rem; }
.al-section-label:first-of-type[b-w3ln3mpus3] { margin-top: 0; }

.al-card[b-w3ln3mpus3] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 0.9rem 1.1rem; margin-bottom: 0.7rem; }
/* Paused, not broken — visibly quieter but still plainly there, so turning it back on is obvious. */
.al-card.is-off[b-w3ln3mpus3] { background: #f8fafc; }
.al-card.is-off .al-name[b-w3ln3mpus3] { color: #64748b; }

.al-card-main[b-w3ln3mpus3] { flex: 1; min-width: 0; }
.al-name[b-w3ln3mpus3] { font-size: 0.98rem; font-weight: 700; color: #0f172a; }
.al-meta[b-w3ln3mpus3] { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.2rem; font-size: 0.8rem; color: #64748b; }

.al-card-side[b-w3ln3mpus3] { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.al-select[b-w3ln3mpus3] { border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.35rem 0.5rem; font-size: 0.82rem; color: #334155; background: #fff; }
.al-select:focus[b-w3ln3mpus3] { outline: 2px solid var(--brand-500, #3b82f6); outline-offset: -1px; }
.al-delete[b-w3ln3mpus3] { background: none; border: none; color: #94a3b8; font-size: 0.82rem; font-weight: 600; cursor: pointer; padding: 0.35rem 0.2rem; }
.al-delete:hover[b-w3ln3mpus3] { color: #b91c1c; }

.al-empty[b-w3ln3mpus3] { background: #fff; border: 1px dashed #e2e8f0; border-radius: 14px; padding: 2rem 1.5rem; text-align: center; color: #64748b; font-size: 0.92rem; line-height: 1.6; }
.al-empty-title[b-w3ln3mpus3] { font-size: 1.05rem; font-weight: 800; color: #334155; margin-bottom: 0.4rem; }
.al-empty p[b-w3ln3mpus3] { margin: 0; max-width: 34rem; margin-inline: auto; }
.al-empty a[b-w3ln3mpus3] { color: var(--brand-600, #2563eb); }

@media (max-width: 640px) {
    .al-card[b-w3ln3mpus3] { flex-direction: column; align-items: stretch; }
    .al-card-side[b-w3ln3mpus3] { justify-content: space-between; }
    .al-select[b-w3ln3mpus3] { flex: 1; }
}

/* Cards two-up once there's room to do it.
   These are independent records, not a document, so a single narrow column left most of a desktop
   empty and made a short list feel long. Headings and empty states span the full width; the cards
   themselves fill it. */
@media (min-width: 860px) {
.al-page[b-w3ln3mpus3] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.15rem; align-items: start; }
    .al-page > .al-head[b-w3ln3mpus3],
    .al-page > .al-section-label[b-w3ln3mpus3],
    .al-page > .al-empty[b-w3ln3mpus3] { grid-column: 1 / -1; }
    .al-card[b-w3ln3mpus3] { margin-bottom: 0; height: 100%; }
}
/* _content/Quote.UI/Components/Pages/Work/Approaches.razor.rz.scp.css */
.ap-page[b-7h2qdodccz] { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.ap-head[b-7h2qdodccz] { margin-bottom: 1.5rem; }
.ap-eyebrow[b-7h2qdodccz] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-600, #2563eb); }
.ap-head h1[b-7h2qdodccz] { margin: 0.25rem 0 0.4rem; font-size: 1.6rem; font-weight: 800; color: #0f172a; }
.ap-lead[b-7h2qdodccz] { margin: 0; color: #475569; font-size: 0.94rem; line-height: 1.55; max-width: 46rem; }

.ap-count[b-7h2qdodccz] { font-size: 0.82rem; font-weight: 700; color: var(--brand-700, #1d4ed8); margin-bottom: 0.75rem; }

.ap-card[b-7h2qdodccz] { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1.1rem 1.25rem; margin-bottom: 0.85rem; }
/* An unanswered approach is the only thing on this page that needs attention. */
.ap-card.is-new[b-7h2qdodccz] { border-color: var(--brand-300, #93c5fd); box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08); }

.ap-card-head[b-7h2qdodccz] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ap-biz[b-7h2qdodccz] { font-size: 1.02rem; font-weight: 800; color: #0f172a; }
.ap-meta[b-7h2qdodccz] { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.2rem; font-size: 0.82rem; color: #64748b; }
.ap-role[b-7h2qdodccz] { color: var(--brand-600, #2563eb); font-weight: 600; }

.ap-status[b-7h2qdodccz] { flex-shrink: 0; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.22rem 0.55rem; border-radius: 999px; background: #f1f5f9; color: #64748b; }
.ap-status-sent[b-7h2qdodccz], .ap-status-viewed[b-7h2qdodccz] { background: #eff6ff; color: #1d4ed8; }
.ap-status-accepted[b-7h2qdodccz] { background: #ecfdf5; color: #047857; }

.ap-message[b-7h2qdodccz] { margin: 0.85rem 0 0; color: #334155; font-size: 0.92rem; line-height: 1.6; white-space: pre-wrap; }

.ap-actions[b-7h2qdodccz] { display: flex; gap: 0.5rem; margin-top: 1rem; }
.ap-btn-primary[b-7h2qdodccz] { background: var(--brand-600, #2563eb); color: #fff; border: none; border-radius: 9px; padding: 0.5rem 1.1rem; font-weight: 700; font-size: 0.88rem; cursor: pointer; }
.ap-btn-primary:disabled[b-7h2qdodccz] { background: #cbd5e1; cursor: not-allowed; }
/* Declining is given equal visual weight — a faint "no" next to a bold "yes" is a nudge, and
   nudging someone into a conversation about their job is not this page's business. */
.ap-btn-ghost[b-7h2qdodccz] { background: #fff; color: #475569; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.5rem 1.1rem; font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.ap-btn-ghost:hover:not(:disabled)[b-7h2qdodccz] { border-color: #cbd5e1; color: #0f172a; }

.ap-note[b-7h2qdodccz] { margin-top: 0.65rem; font-size: 0.79rem; color: #94a3b8; line-height: 1.5; }

.ap-contact[b-7h2qdodccz] { margin-top: 1rem; background: #f8fafc; border-radius: 10px; padding: 0.75rem 0.9rem; }
.ap-contact-title[b-7h2qdodccz] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #047857; margin-bottom: 0.4rem; }
.ap-contact-row[b-7h2qdodccz] { font-size: 0.9rem; color: #334155; line-height: 1.6; }
.ap-contact-row a[b-7h2qdodccz] { color: var(--brand-600, #2563eb); text-decoration: none; }
.ap-contact-row a:hover[b-7h2qdodccz] { text-decoration: underline; }

.ap-empty[b-7h2qdodccz] { background: #fff; border: 1px dashed #e2e8f0; border-radius: 14px; padding: 2rem 1.5rem; text-align: center; color: #64748b; font-size: 0.92rem; line-height: 1.6; }
.ap-empty-title[b-7h2qdodccz] { font-size: 1.05rem; font-weight: 800; color: #334155; margin-bottom: 0.4rem; }
.ap-empty p[b-7h2qdodccz] { margin: 0; max-width: 34rem; margin-inline: auto; }

@media (max-width: 640px) {
    .ap-card-head[b-7h2qdodccz] { flex-direction: column; gap: 0.5rem; }
    .ap-actions[b-7h2qdodccz] { flex-direction: column; }
    .ap-actions button[b-7h2qdodccz] { width: 100%; }
}

/* Cards two-up once there's room to do it.
   These are independent records, not a document, so a single narrow column left most of a desktop
   empty and made a short list feel long. Headings and empty states span the full width; the cards
   themselves fill it. */
@media (min-width: 860px) {
.ap-page[b-7h2qdodccz] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.15rem; align-items: start; }
    .ap-page > .ap-head[b-7h2qdodccz],
    .ap-page > .ap-count[b-7h2qdodccz],
    .ap-page > .ap-empty[b-7h2qdodccz] { grid-column: 1 / -1; }
    .ap-card[b-7h2qdodccz] { margin-bottom: 0; height: 100%; }
}
/* _content/Quote.UI/Components/Pages/Work/CandidateProfile.razor.rz.scp.css */
/* Two columns on a desktop, one on a phone.
   The form is a set of independent cards, not a sequence, so stacking them in a single 680px
   ribbon wasted two thirds of the screen and made a short form feel long. Full-width items are
   the ones that govern everything below them: the switch, the banner, and the save bar. */
.cp-page[b-zremsddxp6] { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1.25rem 6rem;
           display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: 1rem 1.25rem; align-items: start; }
.cp-page > .cp-head[b-zremsddxp6],
.cp-page > .cp-banner[b-zremsddxp6],
.cp-page > .cp-card-switch[b-zremsddxp6],
.cp-page > .cp-save-bar[b-zremsddxp6],
.cp-page > .cp-empty[b-zremsddxp6] { grid-column: 1 / -1; }

.cp-head[b-zremsddxp6] { margin-bottom: 0.5rem; }
.cp-eyebrow[b-zremsddxp6] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-600, #2563eb); }
.cp-head h1[b-zremsddxp6] { margin: 0.25rem 0 0.4rem; font-size: 1.6rem; font-weight: 800; color: #0f172a; }
/* Prose keeps a readable measure even though the page is now wide. */
.cp-lead[b-zremsddxp6] { margin: 0; color: #475569; font-size: 0.94rem; line-height: 1.55; max-width: 62ch; }

.cp-banner[b-zremsddxp6] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 0.8rem 1rem; text-decoration: none; color: #1d4ed8; font-size: 0.9rem; }
.cp-banner:hover[b-zremsddxp6] { background: #dbeafe; }

.cp-card[b-zremsddxp6] { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1.15rem 1.25rem; }
.cp-card h2[b-zremsddxp6] { margin: 0 0 0.15rem; font-size: 1.02rem; font-weight: 800; color: #0f172a; }
.cp-card-sub[b-zremsddxp6] { margin: 0 0 0.9rem; font-size: 0.85rem; color: #64748b; line-height: 1.55; }
.cp-card h2 + .cp-label[b-zremsddxp6] { margin-top: 0.9rem; }

/* The switch that decides whether any of this is visible at all. */
.cp-card-switch[b-zremsddxp6] { border-color: #cbd5e1; }
.cp-switch-row[b-zremsddxp6] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cp-switch-title[b-zremsddxp6] { font-size: 1.02rem; font-weight: 800; color: #0f172a; }
.cp-switch-sub[b-zremsddxp6] { font-size: 0.85rem; color: #64748b; margin-top: 0.15rem; }

.cp-toggle[b-zremsddxp6] { position: relative; flex-shrink: 0; width: 46px; height: 26px; }
.cp-toggle input[b-zremsddxp6] { opacity: 0; width: 0; height: 0; }
.cp-toggle span[b-zremsddxp6] { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; cursor: pointer; transition: background 0.15s; }
.cp-toggle span[b-zremsddxp6]::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.15s; }
.cp-toggle input:checked + span[b-zremsddxp6] { background: var(--brand-600, #2563eb); }
.cp-toggle input:checked + span[b-zremsddxp6]::before { transform: translateX(20px); }

.cp-visibility[b-zremsddxp6] { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f1f5f9; }
.cp-radio[b-zremsddxp6] { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0; cursor: pointer; }
.cp-radio input[b-zremsddxp6] { margin-top: 0.25rem; flex-shrink: 0; }
.cp-radio strong[b-zremsddxp6] { display: block; font-size: 0.9rem; font-weight: 700; color: #0f172a; }
.cp-radio em[b-zremsddxp6] { display: block; font-style: normal; font-size: 0.82rem; color: #64748b; line-height: 1.5; margin-top: 0.1rem; }

.cp-label[b-zremsddxp6] { display: block; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #475569; margin: 0.9rem 0 0.35rem; }
.cp-optional[b-zremsddxp6] { font-weight: 600; text-transform: none; letter-spacing: 0; color: #94a3b8; margin-left: 0.35rem; }
.cp-input[b-zremsddxp6] { width: 100%; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.5rem 0.65rem; font-size: 0.9rem; font-family: inherit; }
.cp-input:focus[b-zremsddxp6] { outline: 2px solid var(--brand-500, #3b82f6); outline-offset: -1px; }
.cp-textarea[b-zremsddxp6] { resize: vertical; line-height: 1.55; }
.cp-hint[b-zremsddxp6] { font-size: 0.79rem; color: #94a3b8; margin-top: 0.3rem; line-height: 1.5; }

.cp-row[b-zremsddxp6] { display: flex; gap: 0.6rem; align-items: flex-end; }
.cp-row .cp-input[b-zremsddxp6] { margin: 0; }
.cp-col[b-zremsddxp6] { flex: 1; min-width: 0; }
.cp-col-sm[b-zremsddxp6] { flex: 0 0 6.5rem; }
.cp-col .cp-label[b-zremsddxp6] { margin-top: 0; }

.cp-checks[b-zremsddxp6] { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; }
.cp-check[b-zremsddxp6] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.89rem; color: #334155; padding: 0.28rem 0; cursor: pointer; }
.cp-check input[b-zremsddxp6] { flex-shrink: 0; }

.cp-tickets[b-zremsddxp6] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.cp-ticket[b-zremsddxp6] { display: inline-flex; align-items: center; gap: 0.35rem; background: #f1f5f9; border-radius: 999px; padding: 0.28rem 0.35rem 0.28rem 0.7rem; font-size: 0.82rem; color: #334155; }
.cp-ticket em[b-zremsddxp6] { font-style: normal; font-weight: 700; color: #059669; }
/* An expired ticket is worse than none — it's what gets someone turned away at the gate. */
.cp-ticket.is-expired[b-zremsddxp6] { background: #fef2f2; color: #b91c1c; }
.cp-ticket.is-expired em[b-zremsddxp6] { color: #b91c1c; font-size: 0.75rem; }
.cp-ticket button[b-zremsddxp6] { background: none; border: none; color: #94a3b8; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; }
.cp-ticket button:hover[b-zremsddxp6] { color: #475569; }
.cp-ticket-add[b-zremsddxp6] { margin-top: 0.5rem; }

.cp-card-block[b-zremsddxp6] { border-color: #cbd5e1; }
.cp-blocked[b-zremsddxp6] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.cp-blocked-chip[b-zremsddxp6] { display: inline-flex; align-items: center; gap: 0.35rem; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 999px; padding: 0.28rem 0.35rem 0.28rem 0.7rem; font-size: 0.82rem; color: #9a3412; }
.cp-blocked-chip button[b-zremsddxp6] { background: none; border: none; color: #c2410c; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; }

.cp-employer-results[b-zremsddxp6] { border: 1px solid #e2e8f0; border-radius: 10px; margin-top: 0.4rem; overflow: hidden; }
.cp-employer-row[b-zremsddxp6] { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; width: 100%; background: #fff; border: none; border-bottom: 1px solid #f1f5f9; padding: 0.55rem 0.75rem; font-size: 0.88rem; color: #334155; text-align: left; cursor: pointer; }
.cp-employer-row:last-child[b-zremsddxp6] { border-bottom: none; }
.cp-employer-row:hover[b-zremsddxp6] { background: #f8fafc; }
.cp-employer-row span[b-zremsddxp6] { font-size: 0.8rem; color: #94a3b8; }

.cp-save-bar[b-zremsddxp6] { position: sticky; bottom: 0; display: flex; align-items: center; gap: 0.75rem; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(6px); border-top: 1px solid #e2e8f0; padding: 0.85rem 0; margin-top: 0.5rem; }
.cp-btn-primary[b-zremsddxp6] { background: var(--brand-600, #2563eb); color: #fff; border: none; border-radius: 9px; padding: 0.55rem 1.3rem; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.cp-btn-primary:disabled[b-zremsddxp6] { background: #cbd5e1; cursor: not-allowed; }
.cp-btn-ghost[b-zremsddxp6] { background: #fff; color: #475569; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.88rem; cursor: pointer; flex-shrink: 0; }
.cp-saved[b-zremsddxp6] { font-size: 0.85rem; color: #059669; font-weight: 600; }
.cp-save-error[b-zremsddxp6] { font-size: 0.85rem; color: #b91c1c; }

.cp-empty[b-zremsddxp6] { background: #fff; border: 1px dashed #e2e8f0; border-radius: 14px; padding: 2rem 1.5rem; text-align: center; color: #64748b; }

/* Below the two-column breakpoint the cards return to a single stack — this is the layout that
   was previously being served to desktop as well. */
@media (max-width: 900px) {
    .cp-page[b-zremsddxp6] { grid-template-columns: 1fr; max-width: 720px; }
}

@media (max-width: 640px) {
    .cp-row[b-zremsddxp6] { flex-direction: column; align-items: stretch; }
    .cp-col-sm[b-zremsddxp6] { flex: 1; }
    .cp-btn-ghost[b-zremsddxp6] { width: 100%; }
}
/* _content/Quote.UI/Components/Pages/Work/JobBoard.razor.rz.scp.css */
.jb-page[b-gqtxykw1q0] { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.jb-head[b-gqtxykw1q0] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.jb-eyebrow[b-gqtxykw1q0] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-600, #2563eb); }
.jb-head h1[b-gqtxykw1q0] { margin: 0.25rem 0 0.4rem; font-size: 1.6rem; font-weight: 800; color: #0f172a; }
.jb-lead[b-gqtxykw1q0] { margin: 0; color: #475569; font-size: 0.94rem; }

/* Filters in a rail, results beside them — the same shape as the employer-side search. Stacking
   these full-width above a 820px column was a phone layout being served to a desktop. */
.jb-body[b-gqtxykw1q0] { display: grid; grid-template-columns: 260px 1fr; gap: 1.25rem; align-items: start; }
.jb-filters[b-gqtxykw1q0] { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1rem; position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.jb-filter-label[b-gqtxykw1q0] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #475569; margin-top: 0.5rem; }
.jb-filter-label:first-child[b-gqtxykw1q0] { margin-top: 0; }
.jb-btn-block[b-gqtxykw1q0] { width: 100%; margin-top: 0.7rem; }
.jb-results[b-gqtxykw1q0] { min-width: 0; }

.jb-save-search[b-gqtxykw1q0] { width: 100%; margin-top: 0.6rem; background: #f8fafc; color: #334155; border: 1px dashed #cbd5e1; border-radius: 9px; padding: 0.55rem 0.7rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.jb-save-search:hover[b-gqtxykw1q0] { border-color: var(--brand-400, #60a5fa); color: #1d4ed8; background: #f0f7ff; }
.jb-save-search i[b-gqtxykw1q0] { margin-right: 0.3rem; }
.jb-input[b-gqtxykw1q0] { border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.5rem 0.65rem; font-size: 0.9rem; font-family: inherit; width: 100%; }
.jb-input:focus[b-gqtxykw1q0] { outline: 2px solid var(--brand-500, #3b82f6); outline-offset: -1px; }
.jb-textarea[b-gqtxykw1q0] { resize: vertical; line-height: 1.55; }

.jb-count[b-gqtxykw1q0] { font-size: 0.84rem; color: #64748b; margin-bottom: 0.7rem; }

/* Column, not row: inside a grid cell the pay and Apply button belong pinned to the bottom so
   cards of different heights still line up along their action row. */
.jb-card[b-gqtxykw1q0] { display: flex; flex-direction: column; gap: 0.35rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1rem 1.15rem; margin-bottom: 0.75rem; }
.jb-card-main[b-gqtxykw1q0] { flex: 1; min-width: 0; }
.jb-card-side[b-gqtxykw1q0] { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; margin-top: auto; padding-top: 0.85rem; }

.jb-card-top[b-gqtxykw1q0] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.jb-title[b-gqtxykw1q0] { font-size: 1.02rem; font-weight: 800; color: #0f172a; }
.jb-role[b-gqtxykw1q0] { font-size: 0.82rem; color: var(--brand-600, #2563eb); font-weight: 600; }
.jb-biz[b-gqtxykw1q0] { font-size: 0.88rem; color: #475569; margin-top: 0.1rem; }
.jb-meta[b-gqtxykw1q0] { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.35rem; font-size: 0.81rem; color: #64748b; }

.jb-reqs[b-gqtxykw1q0] { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.55rem; }
.jb-req[b-gqtxykw1q0] { background: #f1f5f9; border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.76rem; color: #475569; }

.jb-pay[b-gqtxykw1q0] { font-size: 1.05rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Neutral, not alarming — plenty of good ads leave the rate out. It's still worth naming. */
.jb-nopay[b-gqtxykw1q0] { font-size: 0.78rem; color: #94a3b8; white-space: nowrap; }

.jb-btn-primary[b-gqtxykw1q0] { background: var(--brand-600, #2563eb); color: #fff; border: none; border-radius: 9px; padding: 0.5rem 1.1rem; font-weight: 700; font-size: 0.88rem; cursor: pointer; }
.jb-btn-primary:disabled[b-gqtxykw1q0] { background: #cbd5e1; cursor: not-allowed; }
.jb-btn-sm[b-gqtxykw1q0] { padding: 0.35rem 0.9rem; font-size: 0.82rem; }
.jb-btn-ghost[b-gqtxykw1q0] { flex-shrink: 0; background: #fff; color: #475569; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.45rem 0.9rem; font-weight: 600; font-size: 0.86rem; text-decoration: none; cursor: pointer; }
.jb-btn-sent[b-gqtxykw1q0] { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.35rem 0.9rem; font-weight: 700; font-size: 0.82rem; cursor: default; }

.jb-empty[b-gqtxykw1q0] { background: #fff; border: 1px dashed #e2e8f0; border-radius: 14px; padding: 2rem 1.5rem; text-align: center; color: #64748b; font-size: 0.92rem; line-height: 1.6; }
.jb-empty-title[b-gqtxykw1q0] { font-size: 1.05rem; font-weight: 800; color: #334155; margin-bottom: 0.4rem; }
.jb-empty p[b-gqtxykw1q0] { margin: 0; max-width: 34rem; margin-inline: auto; }
.jb-empty a[b-gqtxykw1q0] { color: var(--brand-600, #2563eb); }

.jb-modal-backdrop[b-gqtxykw1q0] { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 1050; }
.jb-modal[b-gqtxykw1q0] { background: #fff; border-radius: 16px; width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25); }
.jb-modal-head[b-gqtxykw1q0] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem 0.75rem; border-bottom: 1px solid #f1f5f9; }
.jb-modal-head h2[b-gqtxykw1q0] { margin: 0; font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.jb-modal-sub[b-gqtxykw1q0] { margin: 0.2rem 0 0; font-size: 0.84rem; color: #64748b; }
.jb-modal-x[b-gqtxykw1q0] { background: none; border: none; font-size: 1.5rem; line-height: 1; color: #94a3b8; cursor: pointer; padding: 0 0.2rem; }
.jb-modal-body[b-gqtxykw1q0] { padding: 1rem 1.25rem; overflow-y: auto; }
.jb-desc[b-gqtxykw1q0] { font-size: 0.89rem; color: #334155; line-height: 1.6; white-space: pre-wrap; padding-bottom: 0.9rem; margin-bottom: 0.3rem; border-bottom: 1px solid #f1f5f9; }
.jb-label[b-gqtxykw1q0] { display: block; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #475569; margin: 0.85rem 0 0.35rem; }
.jb-optional[b-gqtxykw1q0] { font-weight: 600; text-transform: none; letter-spacing: 0; color: #94a3b8; margin-left: 0.35rem; }
.jb-note[b-gqtxykw1q0] { margin-top: 0.85rem; background: #f8fafc; border-left: 3px solid var(--brand-400, #60a5fa); border-radius: 0 8px 8px 0; padding: 0.6rem 0.75rem; font-size: 0.82rem; color: #475569; line-height: 1.5; }
.jb-modal-error[b-gqtxykw1q0] { margin-top: 0.85rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; padding: 0.6rem 0.75rem; font-size: 0.84rem; color: #b91c1c; }
.jb-modal-foot[b-gqtxykw1q0] { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.85rem 1.25rem; border-top: 1px solid #f1f5f9; }

.jb-toast[b-gqtxykw1q0] { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff; border-radius: 999px; padding: 0.6rem 1.2rem; font-size: 0.86rem; font-weight: 600; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3); z-index: 1060; }

/* Two across once there's room. A job card is a scannable unit, not prose. */
@media (min-width: 1100px) {
    .jb-results[b-gqtxykw1q0] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-content: start; }
    .jb-results > .jb-count[b-gqtxykw1q0],
    .jb-results > .jb-empty[b-gqtxykw1q0] { grid-column: 1 / -1; }
    .jb-card[b-gqtxykw1q0] { margin-bottom: 0; height: 100%; }
}

@media (max-width: 900px) {
    .jb-body[b-gqtxykw1q0] { grid-template-columns: 1fr; }
    .jb-filters[b-gqtxykw1q0] { position: static; }
}

@media (max-width: 640px) {
    .jb-head[b-gqtxykw1q0] { flex-direction: column; }
}
/* _content/Quote.UI/Components/Pages/Work/MyApplications.razor.rz.scp.css */
.ma-page[b-0zn9vndhxx] { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.ma-head[b-0zn9vndhxx] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; }
.ma-eyebrow[b-0zn9vndhxx] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-600, #2563eb); }
.ma-head h1[b-0zn9vndhxx] { margin: 0.25rem 0 0.4rem; font-size: 1.6rem; font-weight: 800; color: #0f172a; }
.ma-lead[b-0zn9vndhxx] { margin: 0; color: #475569; font-size: 0.94rem; }

.ma-section-label[b-0zn9vndhxx] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; margin: 1.4rem 0 0.6rem; }
.ma-section-label:first-of-type[b-0zn9vndhxx] { margin-top: 0; }

.ma-card[b-0zn9vndhxx] { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1rem 1.15rem; margin-bottom: 0.75rem; }
/* An offer is the only thing on this page that needs a decision. */
.ma-card.is-offer[b-0zn9vndhxx] { border-color: #86efac; box-shadow: 0 2px 14px rgba(5, 150, 105, 0.1); }

.ma-card-head[b-0zn9vndhxx] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ma-title[b-0zn9vndhxx] { font-size: 1.02rem; font-weight: 800; color: #0f172a; }
.ma-meta[b-0zn9vndhxx] { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.2rem; font-size: 0.81rem; color: #64748b; }

.ma-status[b-0zn9vndhxx] { flex-shrink: 0; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.22rem 0.55rem; border-radius: 999px; background: #f1f5f9; color: #64748b; }
.ma-status-offered[b-0zn9vndhxx] { background: #ecfdf5; color: #047857; }
.ma-status-shortlisted[b-0zn9vndhxx], .ma-status-interviewing[b-0zn9vndhxx] { background: #eff6ff; color: #1d4ed8; }
.ma-status-hired[b-0zn9vndhxx] { background: #ecfdf5; color: #047857; }

.ma-offer[b-0zn9vndhxx] { margin-top: 0.9rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 0.85rem 0.95rem; }
.ma-offer-title[b-0zn9vndhxx] { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #047857; }
.ma-offer-terms[b-0zn9vndhxx] { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; font-size: 0.95rem; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.ma-offer-message[b-0zn9vndhxx] { margin: 0.55rem 0 0; font-size: 0.88rem; color: #334155; line-height: 1.6; white-space: pre-wrap; }

.ma-actions[b-0zn9vndhxx] { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.ma-btn-primary[b-0zn9vndhxx] { background: #059669; color: #fff; border: none; border-radius: 9px; padding: 0.5rem 1.1rem; font-weight: 700; font-size: 0.88rem; cursor: pointer; }
.ma-btn-primary:disabled[b-0zn9vndhxx] { background: #cbd5e1; cursor: not-allowed; }
/* Equal weight to turning it down. Nudging someone into accepting a job is not this page's business. */
.ma-btn-ghost[b-0zn9vndhxx] { background: #fff; color: #475569; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0.5rem 1.1rem; font-weight: 600; font-size: 0.88rem; cursor: pointer; text-decoration: none; flex-shrink: 0; }
.ma-btn-ghost:hover:not(:disabled)[b-0zn9vndhxx] { border-color: #cbd5e1; color: #0f172a; }
.ma-btn-sm[b-0zn9vndhxx] { padding: 0.35rem 0.85rem; font-size: 0.82rem; }

.ma-note[b-0zn9vndhxx] { margin-top: 0.65rem; font-size: 0.79rem; color: #64748b; line-height: 1.5; }
.ma-hired[b-0zn9vndhxx] { margin-top: 0.75rem; font-size: 0.88rem; color: #047857; font-weight: 600; }

.ma-empty[b-0zn9vndhxx] { background: #fff; border: 1px dashed #e2e8f0; border-radius: 14px; padding: 2rem 1.5rem; text-align: center; color: #64748b; font-size: 0.92rem; line-height: 1.6; }
.ma-empty-title[b-0zn9vndhxx] { font-size: 1.05rem; font-weight: 800; color: #334155; margin-bottom: 0.4rem; }
.ma-empty p[b-0zn9vndhxx] { margin: 0; max-width: 34rem; margin-inline: auto; }
.ma-empty a[b-0zn9vndhxx] { color: var(--brand-600, #2563eb); }

.ma-toast[b-0zn9vndhxx] { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff; border-radius: 999px; padding: 0.6rem 1.2rem; font-size: 0.86rem; font-weight: 600; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3); z-index: 1060; }

@media (max-width: 640px) {
    .ma-head[b-0zn9vndhxx] { flex-direction: column; }
    .ma-card-head[b-0zn9vndhxx] { flex-direction: column; gap: 0.5rem; }
    .ma-actions[b-0zn9vndhxx] { flex-direction: column; }
    .ma-actions button[b-0zn9vndhxx] { width: 100%; }
}

/* Cards two-up once there's room to do it.
   These are independent records, not a document, so a single narrow column left most of a desktop
   empty and made a short list feel long. Headings and empty states span the full width; the cards
   themselves fill it. */
@media (min-width: 860px) {
.ma-page[b-0zn9vndhxx] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.15rem; align-items: start; }
    .ma-page > .ma-head[b-0zn9vndhxx],
    .ma-page > .ma-section-label[b-0zn9vndhxx],
    .ma-page > .ma-empty[b-0zn9vndhxx] { grid-column: 1 / -1; }
    .ma-card[b-0zn9vndhxx] { margin-bottom: 0; height: 100%; }
}
/* _content/Quote.UI/Components/Shared/AlarmManagerModal.razor.rz.scp.css */
/* ===== Alarms & timers modal (playbook §7 gradient-header modal) ===== */

.alm-overlay[b-smep791iko] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.alm-container[b-smep791iko] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.alm-header[b-smep791iko] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    padding: 1rem 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    color: white;
}

.alm-header-left[b-smep791iko] { display: flex; align-items: center; gap: 0.8rem; }

.alm-header-icon[b-smep791iko] {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}

.alm-eyebrow[b-smep791iko] {
    font-size: 0.6rem; font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase; letter-spacing: 0.12em;
}

.alm-title[b-smep791iko] { font-size: 1rem; font-weight: 700; color: white; margin: 0.15rem 0 0; }

.alm-body[b-smep791iko] { padding: 1.1rem 1.4rem 1.35rem; overflow-y: auto; }

/* Push opt-in strip */
.alm-push-strip[b-smep791iko] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.9rem;
}

.alm-push-text[b-smep791iko] {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.8rem; font-weight: 600; color: #1e3a5f;
}

.alm-push-text i[b-smep791iko] { color: #2563eb; font-size: 0.95rem; }

.alm-push-btn[b-smep791iko] {
    border: none; border-radius: 9px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white; font-size: 0.75rem; font-weight: 700;
    padding: 0.4rem 0.85rem; cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.alm-push-btn:hover:not(:disabled)[b-smep791iko] { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(37, 99, 235, 0.3); }
.alm-push-btn:disabled[b-smep791iko] { opacity: 0.7; cursor: default; }

.alm-push-error[b-smep791iko] {
    font-size: 0.72rem; color: #991b1b;
    background: #fee2e2; border-radius: 8px;
    padding: 0.4rem 0.6rem; margin: -0.5rem 0 0.9rem;
}

/* Segmented control */
.alm-seg[b-smep791iko] {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.25rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    padding: 0.25rem;
    margin-bottom: 1rem;
}

.alm-seg-btn[b-smep791iko] {
    border: none; background: transparent;
    border-radius: 8px;
    padding: 0.5rem 0.4rem;
    font-size: 0.8rem; font-weight: 600; color: #64748b;
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    cursor: pointer;
    transition: all 0.15s;
}

.alm-seg-btn:hover[b-smep791iko] { color: #2563eb; }

.alm-seg-active[b-smep791iko] {
    background: white;
    color: #1d4ed8 !important;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

.alm-seg-badge[b-smep791iko] {
    font-size: 0.62rem; font-weight: 800;
    background: #e2e8f0; color: #475569;
    border-radius: 999px;
    padding: 0.08rem 0.4rem;
    font-variant-numeric: tabular-nums;
}

.alm-seg-active .alm-seg-badge[b-smep791iko] { background: #dbeafe; color: #1d4ed8; }

.alm-seg-badge-live[b-smep791iko] { background: #dcfce7; color: #16a34a; }

/* Loading / retry */
.alm-loading[b-smep791iko] {
    text-align: center; color: #94a3b8;
    font-size: 0.83rem; padding: 2rem 0;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}

.alm-link-btn[b-smep791iko] {
    border: none; background: none;
    color: #2563eb; font-weight: 700; font-size: 0.83rem;
    cursor: pointer; padding: 0;
}

/* Empty state (§6) */
.alm-empty[b-smep791iko] { text-align: center; padding: 1.75rem 1rem 1.25rem; }

.alm-empty-icon[b-smep791iko] {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #2563eb;
    font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 0.9rem;
}

.alm-empty h6[b-smep791iko] { font-size: 0.95rem; font-weight: 800; color: #1e293b; margin: 0 0 0.35rem; }
.alm-empty p[b-smep791iko] { font-size: 0.8rem; color: #64748b; margin: 0 auto 1rem; max-width: 330px; }
.alm-empty-actions[b-smep791iko] { display: flex; gap: 0.6rem; justify-content: center; }

/* Buttons */
.alm-btn-primary[b-smep791iko] {
    border: none; border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white; font-size: 0.82rem; font-weight: 700;
    padding: 0.55rem 1rem; cursor: pointer;
    display: inline-flex; align-items: center;
    transition: all 0.15s;
}

.alm-btn-primary:hover:not(:disabled)[b-smep791iko] { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.3); }
.alm-btn-primary:disabled[b-smep791iko] { opacity: 0.65; cursor: default; }

.alm-btn-secondary[b-smep791iko] {
    border: 1.5px solid #e2e8f0; border-radius: 10px;
    background: white; color: #475569;
    font-size: 0.82rem; font-weight: 700;
    padding: 0.55rem 1rem; cursor: pointer;
    display: inline-flex; align-items: center;
    transition: all 0.15s;
}

.alm-btn-secondary:hover[b-smep791iko] { border-color: #2563eb; color: #2563eb; }

/* Alarm rows */
.alm-list[b-smep791iko] { display: flex; flex-direction: column; gap: 0.5rem; }

.alm-row[b-smep791iko] {
    display: flex; align-items: center; gap: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.65rem 0.8rem;
    background: white;
    transition: all 0.15s;
}

.alm-row:hover[b-smep791iko] { border-color: #bfdbfe; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.07); }

.alm-row-off[b-smep791iko] { opacity: 0.55; background: #f8fafc; }

.alm-row-icon[b-smep791iko] {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 10px;
    background: #eff6ff; color: #2563eb;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}

.alm-row-icon-timer[b-smep791iko] { background: #f0fdf4; color: #16a34a; }

.alm-row-main[b-smep791iko] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }

.alm-row-label[b-smep791iko] {
    font-size: 0.85rem; font-weight: 700; color: #1e293b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.alm-row-meta[b-smep791iko] { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

.alm-days[b-smep791iko] { display: inline-flex; gap: 0.18rem; }

.alm-day[b-smep791iko] {
    width: 17px; height: 17px;
    border-radius: 5px;
    font-size: 0.56rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f5f9; color: #94a3b8;
}

.alm-day-on[b-smep791iko] { background: #dbeafe; color: #1d4ed8; }

.alm-chip[b-smep791iko] {
    font-size: 0.6rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em;
    background: #e2e8f0; color: #475569;
    border-radius: 999px;
    padding: 0.14rem 0.5rem;
}

.alm-chip-timer[b-smep791iko] { background: #dcfce7; color: #16a34a; }
.alm-chip-snooze[b-smep791iko] { background: #fef3c7; color: #92400e; text-transform: none; letter-spacing: 0; }

.alm-chip-live[b-smep791iko] {
    background: #dcfce7; color: #16a34a;
    display: inline-flex; align-items: center; gap: 0.32rem;
}

.alm-live-dot[b-smep791iko] {
    width: 6px; height: 6px; border-radius: 50%;
    background: #16a34a;
    animation: alm-blink-b-smep791iko 1.4s ease-in-out infinite;
}

@keyframes alm-blink-b-smep791iko {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.alm-row-time[b-smep791iko] {
    font-size: 0.95rem; font-weight: 800; color: #1e293b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.alm-row-countdown[b-smep791iko] { color: #16a34a; font-size: 1.05rem; }

/* Toggle switch */
.alm-toggle[b-smep791iko] { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; flex-shrink: 0; margin: 0; }
.alm-toggle input[b-smep791iko] { opacity: 0; width: 0; height: 0; }

.alm-toggle-slider[b-smep791iko] {
    position: absolute; inset: 0;
    background: #cbd5e1; border-radius: 22px;
    transition: all 0.25s;
}

.alm-toggle-slider[b-smep791iko]::before {
    content: ''; position: absolute;
    width: 16px; height: 16px;
    left: 3px; bottom: 3px;
    background: white; border-radius: 50%;
    transition: all 0.25s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.alm-toggle input:checked + .alm-toggle-slider[b-smep791iko] { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.alm-toggle input:checked + .alm-toggle-slider[b-smep791iko]::before { transform: translateX(18px); }

.alm-row-del[b-smep791iko] {
    border: none; background: none;
    color: #cbd5e1; font-size: 0.9rem;
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

.alm-row-del:hover[b-smep791iko] { background: #fee2e2; color: #dc2626; }

/* New alarm form */
.alm-form[b-smep791iko] { display: flex; flex-direction: column; gap: 0.85rem; }
.alm-form-row[b-smep791iko] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.alm-field[b-smep791iko] { display: flex; flex-direction: column; gap: 0.3rem; }

.alm-field label[b-smep791iko] {
    font-size: 0.7rem; font-weight: 700; color: #475569;
    text-transform: uppercase; letter-spacing: 0.05em;
}

.alm-field input[type=text][b-smep791iko],
.alm-field input[type=time][b-smep791iko] {
    border: 1.5px solid #e2e8f0; border-radius: 9px;
    padding: 0.55rem 0.8rem; font-size: 0.88rem; outline: none;
    background: #f8fafc;
    font-variant-numeric: tabular-nums;
}

.alm-field input:focus[b-smep791iko] {
    border-color: #2563eb; background: white;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.alm-mini-seg[b-smep791iko] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem;
    background: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: 9px; padding: 0.22rem;
}

.alm-mini-seg button[b-smep791iko] {
    border: none; background: transparent;
    border-radius: 7px;
    padding: 0.38rem 0.4rem;
    font-size: 0.8rem; font-weight: 600; color: #64748b;
    cursor: pointer; transition: all 0.15s;
}

.alm-mini-seg button:hover[b-smep791iko] { color: #2563eb; }

.alm-mini-active[b-smep791iko] {
    background: white !important;
    color: #1d4ed8 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

.alm-daypick[b-smep791iko] { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.alm-daypick-btn[b-smep791iko] {
    border: 1.5px solid #e2e8f0; border-radius: 999px;
    background: white; color: #64748b;
    font-size: 0.74rem; font-weight: 700;
    padding: 0.35rem 0.7rem;
    cursor: pointer; transition: all 0.15s;
}

.alm-daypick-btn:hover[b-smep791iko] { border-color: #93c5fd; color: #2563eb; }

.alm-daypick-on[b-smep791iko] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #1d4ed8;
    color: white;
}

.alm-check[b-smep791iko] {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8rem; color: #475569; font-weight: 500;
    cursor: pointer; margin: 0;
}

.alm-check input[b-smep791iko] { accent-color: #2563eb; width: 15px; height: 15px; cursor: pointer; }

.alm-form-error[b-smep791iko] {
    font-size: 0.75rem; color: #991b1b;
    background: #fee2e2; border-radius: 8px;
    padding: 0.45rem 0.65rem;
}

.alm-form-actions[b-smep791iko] { display: flex; justify-content: flex-end; }

/* Timers tab */
.alm-timers[b-smep791iko] { display: flex; flex-direction: column; gap: 0.75rem; }

.alm-section-label[b-smep791iko] {
    font-size: 0.68rem; font-weight: 700; color: #475569;
    text-transform: uppercase; letter-spacing: 0.07em;
    display: flex; align-items: center; gap: 0.4rem;
    margin-top: 0.2rem;
}

.alm-section-label i[b-smep791iko] { color: #2563eb; }

.alm-preset-grid[b-smep791iko] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem; }

.alm-preset[b-smep791iko] {
    border: 1.5px solid #e2e8f0; border-radius: 12px;
    background: white;
    padding: 0.7rem 0.4rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
    cursor: pointer; transition: all 0.15s;
}

.alm-preset:hover:not(:disabled)[b-smep791iko] {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb, 0 8px 20px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

.alm-preset:disabled[b-smep791iko] { opacity: 0.6; cursor: default; }

.alm-preset-num[b-smep791iko] {
    font-size: 1.35rem; font-weight: 800; color: #1d4ed8;
    line-height: 1; font-variant-numeric: tabular-nums;
}

.alm-preset-unit[b-smep791iko] {
    font-size: 0.62rem; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.08em;
}

.alm-custom-row[b-smep791iko] {
    display: grid; grid-template-columns: 110px 1fr auto; gap: 0.55rem;
    align-items: center;
}

.alm-custom-row input[b-smep791iko] {
    border: 1.5px solid #e2e8f0; border-radius: 9px;
    padding: 0.52rem 0.75rem; font-size: 0.85rem; outline: none;
    background: #f8fafc;
}

.alm-custom-row input:focus[b-smep791iko] {
    border-color: #2563eb; background: white;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.alm-timers-hint[b-smep791iko] {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.75rem; color: #64748b;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
}

.alm-timers-hint i[b-smep791iko] { color: #2563eb; }

@media (max-width: 560px) {
    .alm-overlay[b-smep791iko] { padding: 0.75rem; }
    .alm-form-row[b-smep791iko] { grid-template-columns: 1fr; }
    .alm-custom-row[b-smep791iko] { grid-template-columns: 1fr; }
    .alm-preset-grid[b-smep791iko] { grid-template-columns: repeat(2, 1fr); }
}
/* _content/Quote.UI/Components/Shared/AlarmRingOverlay.razor.rz.scp.css */
/* ===== Full-screen alarm ringing overlay ===== */

.aro-overlay[b-2qtgv2vnyv] {
    position: fixed;
    inset: 0;
    z-index: 5000; /* above every modal (page modals sit ~1200) */
    background: rgba(8, 15, 34, 0.82);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: aro-fade-in-b-2qtgv2vnyv 0.25s ease;
}

@keyframes aro-fade-in-b-2qtgv2vnyv {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.aro-card[b-2qtgv2vnyv] {
    position: relative;
    background: linear-gradient(160deg, #0f1e3d 0%, #1e3a5f 55%, #1d4ed8 160%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(37, 99, 235, 0.25);
    padding: 2.75rem 2.5rem 2.25rem;
    width: 100%;
    max-width: 440px;
    text-align: center;
    color: white;
    animation: aro-card-in-b-2qtgv2vnyv 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes aro-card-in-b-2qtgv2vnyv {
    from { opacity: 0; transform: scale(0.9) translateY(14px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.aro-more-chip[b-2qtgv2vnyv] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fde68a;
    background: rgba(245, 158, 11, 0.22);
    border: 1px solid rgba(245, 158, 11, 0.4);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

/* Bell + expanding pulse rings */
.aro-bell-wrap[b-2qtgv2vnyv] {
    position: relative;
    width: 118px;
    height: 118px;
    margin: 0 auto 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aro-pulse[b-2qtgv2vnyv] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(96, 165, 250, 0.55);
    animation: aro-pulse-b-2qtgv2vnyv 1.6s ease-out infinite;
    opacity: 0;
}

.aro-pulse-2[b-2qtgv2vnyv] { animation-delay: 0.4s; }
.aro-pulse-3[b-2qtgv2vnyv] { animation-delay: 0.8s; }

@keyframes aro-pulse-b-2qtgv2vnyv {
    0%   { transform: scale(0.72); opacity: 0.9; }
    100% { transform: scale(1.55); opacity: 0; }
}

.aro-bell[b-2qtgv2vnyv] {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: aro-ring-shake-b-2qtgv2vnyv 1.6s ease-in-out infinite;
}

.aro-bell i[b-2qtgv2vnyv] {
    font-size: 2.6rem;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

@keyframes aro-ring-shake-b-2qtgv2vnyv {
    0%, 55%, 100% { transform: rotate(0); }
    60%  { transform: rotate(-9deg); }
    68%  { transform: rotate(8deg); }
    76%  { transform: rotate(-6deg); }
    84%  { transform: rotate(4deg); }
    92%  { transform: rotate(-2deg); }
}

.aro-kind[b-2qtgv2vnyv] {
    display: block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #93c5fd;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.aro-label[b-2qtgv2vnyv] {
    font-size: 1.7rem;
    font-weight: 800;
    color: white;
    margin: 0 0 0.35rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.aro-time[b-2qtgv2vnyv] {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    font-variant-numeric: tabular-nums;
    margin-bottom: 1.75rem;
}

.aro-actions[b-2qtgv2vnyv] {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
}

.aro-btn-snooze[b-2qtgv2vnyv] {
    flex: 1;
    min-width: 108px;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.aro-btn-snooze:hover:not(:disabled)[b-2qtgv2vnyv] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.aro-btn-dismiss[b-2qtgv2vnyv] {
    flex: 1.4;
    min-width: 140px;
    padding: 0.7rem 1.1rem;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.45);
    transition: all 0.15s;
}

.aro-btn-dismiss:hover:not(:disabled)[b-2qtgv2vnyv] {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.55);
}

.aro-btn-snooze:disabled[b-2qtgv2vnyv],
.aro-btn-dismiss:disabled[b-2qtgv2vnyv] { opacity: 0.6; cursor: default; }

@media (max-width: 480px) {
    .aro-card[b-2qtgv2vnyv] { padding: 2.25rem 1.5rem 1.75rem; }
    .aro-actions[b-2qtgv2vnyv] { flex-direction: column; }
    .aro-btn-snooze[b-2qtgv2vnyv], .aro-btn-dismiss[b-2qtgv2vnyv] { width: 100%; }
}
/* _content/Quote.UI/Components/Shared/ConfirmDialog.razor.rz.scp.css */
.cd-overlay[b-e99vswmm3y] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 12000;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    animation: cd-fade-b-e99vswmm3y 0.15s ease-out;
}

.cd-box[b-e99vswmm3y] {
    background: #fff;
    border-radius: 18px;
    width: 100%; max-width: 420px;
    padding: 2rem 1.75rem 1.5rem;
    text-align: center;
    box-shadow: 0 25px 60px -15px rgba(0,0,0,0.4);
    animation: cd-pop-b-e99vswmm3y 0.2s ease-out;
    --cd-fg: #dc2626; --cd-bg1: #fef2f2; --cd-bg2: #fee2e2;
}
.cd-warning[b-e99vswmm3y] { --cd-fg: #d97706; --cd-bg1: #fffbeb; --cd-bg2: #fef3c7; }
.cd-info[b-e99vswmm3y] { --cd-fg: #2563eb; --cd-bg1: #eff6ff; --cd-bg2: #dbeafe; }

.cd-icon[b-e99vswmm3y] {
    width: 56px; height: 56px; border-radius: 50%;
    margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--cd-bg1), var(--cd-bg2));
    color: var(--cd-fg); font-size: 1.5rem;
}

.cd-title[b-e99vswmm3y] { font-size: 1.2rem; font-weight: 800; color: #1e293b; margin-bottom: 0.4rem; }
.cd-message[b-e99vswmm3y] { color: #64748b; font-size: 0.92rem; margin: 0 auto 1.5rem; max-width: 340px; line-height: 1.5; }

.cd-actions[b-e99vswmm3y] { display: flex; gap: 0.6rem; justify-content: center; }
.cd-cancel[b-e99vswmm3y], .cd-confirm[b-e99vswmm3y] {
    flex: 1; max-width: 160px;
    border-radius: 11px; padding: 0.7rem 1rem;
    font-weight: 700; font-size: 0.92rem; cursor: pointer;
    transition: all 0.15s;
}
.cd-cancel[b-e99vswmm3y] { background: #fff; border: 1px solid #e2e8f0; color: #475569; }
.cd-cancel:hover[b-e99vswmm3y] { background: rgba(37,99,235,.06); border-color: #93c5fd; }
.cd-confirm[b-e99vswmm3y] {
    border: none; color: #fff;
    background: linear-gradient(135deg, var(--cd-fg), color-mix(in srgb, var(--cd-fg) 78%, #000));
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--cd-fg) 90%, transparent);
}
.cd-confirm:hover[b-e99vswmm3y] { transform: translateY(-1px); filter: brightness(1.05); }

@keyframes cd-fade-b-e99vswmm3y { from { opacity: 0; } to { opacity: 1; } }
@keyframes cd-pop-b-e99vswmm3y { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
/* _content/Quote.UI/Components/Shared/EmergencyAlertBanner.razor.rz.scp.css */
/* Emergency alert banner — a real HD bushfire photo as the card face.
   ------------------------------------------------------------------------
   The alert card IS the photo (emergency-bg.jpg — a burning tree line): SHARP,
   never blurred. The card carries the image as its own background, cropped to the
   tree-line silhouette, in the register of a national emergency broadcast (the
   AusAlert language the domain mirrors: Advice / Watch and Act / Emergency).

   DO NOT put a backdrop-filter blur over the photo — that frosts the HD tree line
   into an anonymous orange smear ("it just looks like fire"). Legibility comes from
   a LEFT-WEIGHTED scrim (dark behind the text, clear on the right) + text-shadow,
   not from blur. Swap the picture by pointing --eab-photo at a new url(...). */

.eab-banner[b-3gjkisjfe7] {
    /* Per-tone tokens (defaults = Emergency). A tone is one block of values. */
    --eab-glow-1: rgba(255, 149, 71, 0.50);   /* warm ember glow, top-right */
    --eab-glow-2: rgba(198, 47, 25, 0.40);
    --eab-accent: #ff4a38;                     /* level chip + severity accent */
    --eab-accent-ink: #ffffff;
    --eab-ink: #ffffff;
    --eab-ink-quiet: rgba(255, 255, 255, 0.80);
    --eab-glass: rgba(26, 16, 12, 0.30);       /* frosted panel fill (dark = legible) */
    --eab-border: rgba(255, 255, 255, 0.22);
    --eab-highlight: rgba(255, 255, 255, 0.32);/* inner top-edge light on the glass */
    /* Default photo (used if a category has no mapping below). Each hazard category gets
       its own picture via the .eab-cat-* rules further down. --eab-photo is the JPEG and is
       what actually renders; --eab-photo-webp is preferred by browsers that support image-set
       (see the @supports block under the category list). */
    --eab-photo: url('/images/emergency/other.jpg?v=4');
    --eab-photo-webp: url('/images/emergency/other.webp?v=4');
    /* `center`, not a percentage: each file is now pre-cropped to the band the banner shows,
       so the framing lives in the image rather than in a number tuned against it. */
    --eab-photo-pos: center;

    /* OVERLAYS the page under the topbar — it must NOT reserve a block of layout
       height (position:sticky did, which shoved the hero down into a second "hero"
       band). Fixed takes it out of flow so it floats over the top of the page
       content and rides the scroll; a life-safety warning that scrolls away is one
       you can miss. Sits below the topbar's 1100 and above the page's ~1070 so page
       content can't cut through.

       The banner itself is TRANSPARENT — the smoky photo lives on the alert CARD,
       contained to its width, so the colour never bleeds full-width to the screen
       edges like a hero. The page simply shows through at the sides. */
    position: fixed;
    top: var(--topbar-height, 72px);
    left: 0;
    right: 0;
    z-index: 1090;
    pointer-events: none;   /* let the page under the gutters stay clickable */
    padding: 12px 0 14px;
    color: var(--eab-ink);
    background: transparent;

    /* The alert arrives — one motion moment, on entry only; nothing loops, because
       a banner you can't dismiss must not nag. */
    animation: eab-drop-b-3gjkisjfe7 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    font-size: 0.875rem;
}

/* ---- The photo-backed glass cards ------------------------------------ */
/* The bushfire photo is the card's OWN background (contained to the card), kept SHARP,
   with nothing painted in the side gutters. A ::before scrim (NOT a blur) sits over it
   for text legibility. The dark base colour shows if the photo is ever missing. */
.eab-main[b-3gjkisjfe7],
.eab-slim[b-3gjkisjfe7],
.eab-stack[b-3gjkisjfe7] {
    position: relative;
    overflow: hidden;
    pointer-events: auto;   /* re-enable on the card (wrapper is pointer-events:none) */
    background-color: #1b100b;
    background-image: var(--eab-photo);
    background-size: cover;
    background-position: var(--eab-photo-pos, center);   /* the files are pre-cropped, so centre them */
    border: 1px solid var(--eab-border);
    box-shadow:
        inset 0 1px 0 var(--eab-highlight),
        0 14px 36px -16px rgba(0, 0, 0, 0.7);
}

.eab-main[b-3gjkisjfe7]::before,
.eab-slim[b-3gjkisjfe7]::before,
.eab-stack[b-3gjkisjfe7]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* NO blur. The HD tree-line photo must stay crisp — a backdrop-filter blur here
       frosted it into an anonymous orange smear (the "just looks like fire" bug). This
       is a plain left-weighted scrim only: dark behind the text on the left, easing to
       fully clear by the right third so the burning tree-line silhouette reads sharply. */
    background: linear-gradient(90deg, rgba(12, 8, 4, 0.82) 0%, rgba(14, 9, 5, 0.55) 30%, rgba(16, 10, 6, 0.14) 62%, rgba(16, 10, 6, 0) 100%);
}

/* Content rides above the frost. */
.eab-main > *[b-3gjkisjfe7],
.eab-slim > *[b-3gjkisjfe7],
.eab-stack > *[b-3gjkisjfe7] {
    position: relative;
    z-index: 1;
}

/* Signature: a slow specular sheen sweeps across the frosted glass — light catching the
   glass edge. Ambient and premium, deliberately NOT an alarm: it passes once then rests
   for several seconds before repeating, sits at low opacity, and honours reduced-motion.
   Only the main expanded card carries it (clipped by the card's overflow:hidden). */
.eab-main[b-3gjkisjfe7]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    z-index: 2;
    pointer-events: none;
    /* Premium specular light-sweep: a bright narrow core with a soft glow, `screen`-blended
       so it lightens the photo as it glides. Driven by transform:translateX (GPU-composited,
       buttery smooth) so it glides the FULL width of the card edge-to-edge, then rests. */
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.00) 36%,
        rgba(255, 255, 255, 0.12) 46%,
        rgba(255, 255, 255, 0.34) 50%,
        rgba(255, 255, 255, 0.12) 54%,
        rgba(255, 255, 255, 0.00) 64%,
        transparent 100%);
    mix-blend-mode: screen;
    transform: translateX(-160%) skewX(-16deg);
    /* !important defeats the GLOBAL reduced-motion rule in app.css that force-sets EVERY
       animation-duration to 0.001ms — that site-wide override (not the banner's own rule) is
       what froze this sweep on reduce-motion machines. Higher specificity + !important wins.
       Slow cycle with a long rest so it's a subtle ambient glint, not a repeating flash. */
    animation: eab-sheen-b-3gjkisjfe7 8s cubic-bezier(0.4, 0.0, 0.2, 1) infinite !important;
    will-change: transform;
}

@keyframes eab-sheen-b-3gjkisjfe7 {
    0%   { transform: translateX(-160%) skewX(-16deg); }
    30%  { transform: translateX(320%)  skewX(-16deg); }
    100% { transform: translateX(320%)  skewX(-16deg); }
}

@keyframes eab-drop-b-3gjkisjfe7 {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* AWS levels. Only the ember-glow hue and the accent change — the field stays dark
   smoke, so white text works on every level and the tone reads by accent + label. */
.eab-emergency[b-3gjkisjfe7] {
    --eab-glow-1: rgba(255, 149, 71, 0.50);
    --eab-glow-2: rgba(198, 47, 25, 0.40);
    --eab-accent: #ff4a38;
    --eab-accent-ink: #ffffff;
}

.eab-watch[b-3gjkisjfe7] {
    --eab-glow-1: rgba(255, 176, 74, 0.46);
    --eab-glow-2: rgba(200, 110, 20, 0.36);
    --eab-accent: #ff9425;
    --eab-accent-ink: #1a1206;
}

.eab-advice[b-3gjkisjfe7] {
    --eab-glow-1: rgba(255, 208, 110, 0.42);
    --eab-glow-2: rgba(190, 150, 40, 0.28);
    --eab-accent: #ffc82e;
    --eab-accent-ink: #1a1206;
}

/* ---- Per-category photo ---------------------------------------------- */
/* Each hazard shows its own picture. The razor puts an .eab-cat-<category> class on the
   banner (category lowercased; anything unknown → "other"). To add a hazard's image, drop a
   file at /images/emergency/<category>.jpg — it appears automatically. Until a file exists
   the request 404s and the card falls back to its dark ember base (#1b100b), which is fine.
   All hazards below have an image except workcondition, which falls back to other.jpg.

   Each file is pre-cropped to a 2.5:1 band centred on the part of the photo worth showing, so
   there is no per-category --eab-photo-pos any more — the framing is in the image. If you add a
   picture, crop it to about 2.5:1 yourself; a tall photo will simply show its middle.

   NOT cropped to the ~8.3:1 the desktop card measures. The same photo backs .eab-slim and, under
   640px, a wrapped .eab-main nearer 2:1. Under background-size:cover an image flatter in ratio
   than its box loses its sides — an 8.3:1 crop would look right on a desktop and show a zoomed
   centre sliver on a phone, which is where an emergency alert actually gets read. */
.eab-cat-fire[b-3gjkisjfe7]          { --eab-photo: url('/images/emergency/fire.jpg?v=4');          --eab-photo-webp: url('/images/emergency/fire.webp?v=4'); }
.eab-cat-flood[b-3gjkisjfe7]         { --eab-photo: url('/images/emergency/flood.jpg?v=4');         --eab-photo-webp: url('/images/emergency/flood.webp?v=4'); }
.eab-cat-storm[b-3gjkisjfe7]         { --eab-photo: url('/images/emergency/storm.jpg?v=4');         --eab-photo-webp: url('/images/emergency/storm.webp?v=4'); }
.eab-cat-cyclone[b-3gjkisjfe7]       { --eab-photo: url('/images/emergency/cyclone.jpg?v=4');       --eab-photo-webp: url('/images/emergency/cyclone.webp?v=4'); }
.eab-cat-tsunami[b-3gjkisjfe7]       { --eab-photo: url('/images/emergency/tsunami.jpg?v=4');       --eab-photo-webp: url('/images/emergency/tsunami.webp?v=4'); }
.eab-cat-heat[b-3gjkisjfe7]          { --eab-photo: url('/images/emergency/heat.jpg?v=4');          --eab-photo-webp: url('/images/emergency/heat.webp?v=4'); }
.eab-cat-wind[b-3gjkisjfe7]          { --eab-photo: url('/images/emergency/wind.jpg?v=4');          --eab-photo-webp: url('/images/emergency/wind.webp?v=4'); }
.eab-cat-weather[b-3gjkisjfe7]       { --eab-photo: url('/images/emergency/weather.jpg?v=4');       --eab-photo-webp: url('/images/emergency/weather.webp?v=4'); }
.eab-cat-biosecurity[b-3gjkisjfe7]   { --eab-photo: url('/images/emergency/biosecurity.jpg?v=4');   --eab-photo-webp: url('/images/emergency/biosecurity.webp?v=4'); }
.eab-cat-hazmat[b-3gjkisjfe7]        { --eab-photo: url('/images/emergency/hazmat.jpg?v=4');        --eab-photo-webp: url('/images/emergency/hazmat.webp?v=4'); }
.eab-cat-landslide[b-3gjkisjfe7]     { --eab-photo: url('/images/emergency/landslide.jpg?v=4');     --eab-photo-webp: url('/images/emergency/landslide.webp?v=4'); }
.eab-cat-workcondition[b-3gjkisjfe7] { --eab-photo: url('/images/emergency/other.jpg?v=4');         --eab-photo-webp: url('/images/emergency/other.webp?v=4'); }
.eab-cat-other[b-3gjkisjfe7]         { --eab-photo: url('/images/emergency/other.jpg?v=4');         --eab-photo-webp: url('/images/emergency/other.webp?v=4'); }

/* WebP where it's understood, JPEG everywhere else — the same picture at roughly 27% less weight.
   Gated behind @supports rather than relying on image-set's own fallback: --eab-photo-webp is a
   custom property, and a custom property holding a value the browser can't parse is still
   "valid" until it's substituted, at which point background-image drops out entirely and the card
   loses its photo. The feature query tests the real thing and old browsers never see it. */
@supports (background-image: image-set(url('/images/emergency/other.webp') type('image/webp'))) {
    .eab-main[b-3gjkisjfe7],
    .eab-slim[b-3gjkisjfe7],
    .eab-stack[b-3gjkisjfe7] {
        background-image: image-set(var(--eab-photo-webp) type('image/webp'),
                                    var(--eab-photo) type('image/jpeg'));
    }
}

/* ---- The glass card -------------------------------------------------- */
/* .eab-main is Bootstrap's .container too — max-width + gutters put the card on the
   topbar's grid, and the atmosphere frames it above/below (and at the sides on wide
   screens). backdrop-filter frosts the dark atmosphere behind it. */
.eab-main[b-3gjkisjfe7] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    border-radius: 16px;
}

.eab-content[b-3gjkisjfe7] {
    flex: 1;
    min-width: 0;
    max-width: 82ch;   /* cap the measure so the summary stays glanceable */
}

/* ---- Meta line: level chip + facts ----------------------------------- */
.eab-meta[b-3gjkisjfe7] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

/* The level chip carries the severity colour and the hazard glyph. Archivo (a signage
   grotesque, already self-hosted) is the right voice for a warning level. */
.eab-level[b-3gjkisjfe7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Archivo', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.42rem 0.62rem;
    border-radius: 9px;
    background: var(--eab-accent);
    color: var(--eab-accent-ink);
    box-shadow:
        0 6px 18px -6px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    flex-shrink: 0;
}

.eab-level i[b-3gjkisjfe7] {
    font-size: 0.95rem;
    line-height: 1;
}

/* What + where at full ink; source + age recede in .eab-provenance. */
.eab-facts[b-3gjkisjfe7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--eab-ink);
    min-width: 0;
}

.eab-fact-quiet[b-3gjkisjfe7] {
    color: var(--eab-ink-quiet);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.01em;
}

.eab-provenance[b-3gjkisjfe7] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.15rem;
    font-weight: 500;
    opacity: 0.85;
}

.eab-dot[b-3gjkisjfe7] {
    color: var(--eab-ink-quiet);
    opacity: 0.55;
}

/* ---- Message --------------------------------------------------------- */
.eab-title[b-3gjkisjfe7] {
    font-family: 'Archivo', 'Inter', system-ui, sans-serif;
    font-weight: 750;
    font-size: 1.3125rem;
    line-height: 1.15;
    letter-spacing: -0.011em;
    color: var(--eab-ink);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);   /* holds over any bright glow bloom */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Summary is EMERGENCY-ONLY and single-line, so banner HEIGHT scales with severity. */
.eab-summary[b-3gjkisjfe7] {
    display: none;
}

.eab-emergency .eab-summary[b-3gjkisjfe7] {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--eab-ink-quiet);
    line-height: 1.4;
    margin-top: 0.3rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- Actions --------------------------------------------------------- */
.eab-actions[b-3gjkisjfe7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 1.25rem;
    position: relative;
}

.eab-actions[b-3gjkisjfe7]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 34px;
    background: rgba(255, 255, 255, 0.18);
}

/* Primary action — a bright glass pill (the reference's URL-pill register). */
.eab-cta[b-3gjkisjfe7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 38px;
    padding: 0 1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 10px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    white-space: nowrap;
    transition: transform 0.12s ease, background 0.12s ease;
}

.eab-cta:hover[b-3gjkisjfe7] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.27);
}

.eab-cta:active[b-3gjkisjfe7] {
    transform: translateY(1px);
}

/* Secondary controls — quieter frosted pills. */
.eab-ghost[b-3gjkisjfe7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 38px;
    padding: 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--eab-ink);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 10px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease;
}

.eab-ghost:hover[b-3gjkisjfe7] {
    background: rgba(255, 255, 255, 0.18);
}

.eab-icon-btn[b-3gjkisjfe7] {
    width: 38px;
    height: 38px;
    padding: 0;
    flex-shrink: 0;
}

/* The X removes a life-safety warning, so it stays the quietest control until hovered. */
.eab-dismiss[b-3gjkisjfe7] {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
}

.eab-dismiss:hover[b-3gjkisjfe7] {
    border-color: rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.14);
}

.eab-cta:focus-visible[b-3gjkisjfe7],
.eab-ghost:focus-visible[b-3gjkisjfe7] {
    outline: 2px solid var(--eab-ink);
    outline-offset: 2px;
}

/* ---- Stacked "+N more" rows ------------------------------------------ */
/* A second glass panel below the main card. */
.eab-stack[b-3gjkisjfe7] {
    margin-top: 8px;
    padding-top: 0.35rem;
    padding-bottom: 0.4rem;
    border-radius: 14px;
}

.eab-row[b-3gjkisjfe7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
}

.eab-row + .eab-row[b-3gjkisjfe7] {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.eab-row-icon[b-3gjkisjfe7] {
    font-size: 0.9rem;
    color: var(--eab-ink);
    flex-shrink: 0;
    width: 1.1rem;
    text-align: center;
}

.eab-level-sm[b-3gjkisjfe7] {
    font-size: 0.6rem;
    padding: 0.2rem 0.42rem;
    letter-spacing: 0.07em;
    border-radius: 6px;
}

/* Each stacked row keeps its OWN level colour on the chip only. */
.eab-row-emergency .eab-level[b-3gjkisjfe7] { background: #ff4a38; color: #ffffff; }
.eab-row-watch .eab-level[b-3gjkisjfe7] { background: #ff9425; color: #1a1206; }
.eab-row-advice .eab-level[b-3gjkisjfe7] { background: #ffc82e; color: #1a1206; }

.eab-row-title[b-3gjkisjfe7] {
    font-weight: 600;
    font-size: 0.84rem;
    color: var(--eab-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.eab-row-facts[b-3gjkisjfe7] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--eab-ink-quiet);
    white-space: nowrap;
    flex-shrink: 0;
}

.eab-row-link[b-3gjkisjfe7] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--eab-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.eab-row-link:hover[b-3gjkisjfe7] {
    color: var(--eab-ink);
    opacity: 0.8;
}

/* ---- Collapsed slim strip -------------------------------------------- */
.eab-slim[b-3gjkisjfe7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 12px;
}

.eab-slim-title[b-3gjkisjfe7] {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--eab-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.eab-slim-more[b-3gjkisjfe7] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--eab-ink-quiet);
    white-space: nowrap;
    flex-shrink: 0;
}

.eab-slim .eab-icon-btn[b-3gjkisjfe7] {
    margin-left: auto;
    width: 30px;
    height: 30px;
}

.eab-slim .eab-dismiss[b-3gjkisjfe7] {
    margin-left: 0;
}

/* ---- Mobile ----------------------------------------------------------- */
@media (max-width: 640px) {
    .eab-main[b-3gjkisjfe7] {
        flex-wrap: wrap;
        gap: 0.7rem;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
        border-radius: 14px;
    }

    .eab-title[b-3gjkisjfe7] {
        font-size: 1.0625rem;
        line-height: 1.25;
        white-space: normal;
    }

    .eab-provenance[b-3gjkisjfe7] {
        display: none;
    }

    .eab-slim-more[b-3gjkisjfe7] {
        display: none;
    }

    .eab-actions[b-3gjkisjfe7] {
        width: 100%;
        justify-content: flex-end;
        padding-left: 0;
    }

    .eab-actions[b-3gjkisjfe7]::before {
        display: none;
    }

    .eab-row[b-3gjkisjfe7] {
        flex-wrap: wrap;
    }

    .eab-row-link[b-3gjkisjfe7] {
        margin-left: 0;
    }
}

/* Reduced motion: quiet the entry drop + hovers. The specular sweep is deliberately LEFT
   running — it's a slow, single-pass ambient glint (not an alarm), and it's wanted as the
   card's premium signature even on machines with "reduce animations" enabled (that setting
   was previously hiding it entirely, which is why it looked missing on some PCs). */
@media (prefers-reduced-motion: reduce) {
    .eab-banner[b-3gjkisjfe7] { animation: none; }
    .eab-cta[b-3gjkisjfe7], .eab-ghost[b-3gjkisjfe7] { transition: none; }
}
/* _content/Quote.UI/Components/Shared/EmptyState.razor.rz.scp.css */
.es[b-g2f5tws3hv] {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
    /* default accent = blue */
    --es-fg: #2563eb;
    --es-bg1: #eff6ff;
    --es-bg2: #dbeafe;
}
.es-compact[b-g2f5tws3hv] { padding: 2.25rem 1.25rem; }

.es-green[b-g2f5tws3hv]  { --es-fg: #047857; --es-bg1: #ecfdf5; --es-bg2: #d1fae5; }
.es-violet[b-g2f5tws3hv] { --es-fg: #7c3aed; --es-bg1: #f5f3ff; --es-bg2: #ede9fe; }
.es-gold[b-g2f5tws3hv]   { --es-fg: #b7791f; --es-bg1: #fef9ec; --es-bg2: #fdebc8; }
.es-red[b-g2f5tws3hv]    { --es-fg: #dc2626; --es-bg1: #fef2f2; --es-bg2: #fee2e2; }
.es-slate[b-g2f5tws3hv]  { --es-fg: #475569; --es-bg1: #f1f5f9; --es-bg2: #e2e8f0; }

.es-icon[b-g2f5tws3hv] {
    width: 64px; height: 64px; border-radius: 50%;
    margin: 0 auto 1.1rem;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--es-bg1), var(--es-bg2));
    color: var(--es-fg); font-size: 1.6rem;
}

.es h3[b-g2f5tws3hv] { font-size: 1.3rem; font-weight: 800; color: #1e293b; margin-bottom: 0.5rem; }
.es p[b-g2f5tws3hv] { color: #64748b; margin: 0 auto 1.4rem; max-width: 440px; }

.es-chips[b-g2f5tws3hv] { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.6rem; }
.es-chip[b-g2f5tws3hv] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: #f8fafc; border: 1px solid #e8edf3; border-radius: 999px;
    font-size: 0.82rem; font-weight: 600; color: #475569;
}
.es-chip i[b-g2f5tws3hv] { color: var(--es-fg); }

.es-actions[b-g2f5tws3hv] { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.es-primary[b-g2f5tws3hv] {
    border: none; border-radius: 10px; padding: 0.7rem 1.2rem;
    font-weight: 700; font-size: 0.9rem; cursor: pointer; color: #fff;
    background: linear-gradient(135deg, var(--es-fg), color-mix(in srgb, var(--es-fg) 78%, #000));
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--es-fg) 90%, transparent);
    transition: all 0.15s;
}
.es-primary:hover[b-g2f5tws3hv] { transform: translateY(-1px); filter: brightness(1.05); }
.es-secondary[b-g2f5tws3hv] {
    border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.7rem 1.2rem;
    font-weight: 700; font-size: 0.9rem; cursor: pointer;
    background: #fff; color: #475569; transition: all 0.15s;
}
.es-secondary:hover[b-g2f5tws3hv] { background: rgba(37,99,235,.06); border-color: #93c5fd; }
/* _content/Quote.UI/Components/Shared/FilterDropdown.razor.rz.scp.css */
/* ===== Triple-A filter dropdown ===== */
.fd-wrap[b-8enfdk7jxp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.fd-label[b-8enfdk7jxp] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.fd-label-icon[b-8enfdk7jxp] {
    margin-right: 0.4rem;
    font-size: 0.85rem;
    color: #2563eb;
}

.fd-control[b-8enfdk7jxp] {
    position: relative;
}

/* ===== Block (full-width, stacked) variant ===== */
.fd-wrap-block[b-8enfdk7jxp] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    width: 100%;
}

.fd-wrap-block .fd-label[b-8enfdk7jxp] {
    display: inline-flex;
    align-items: center;
}

.fd-wrap-block .fd-control[b-8enfdk7jxp] {
    width: 100%;
}

.fd-wrap-block .fd-trigger[b-8enfdk7jxp] {
    width: 100%;
    min-width: 0;
    padding: 0.7rem 0.95rem;
    border-radius: 12px;
    font-size: 0.92rem;
}

.fd-wrap-block .fd-menu[b-8enfdk7jxp] {
    width: 100%;
    max-width: none;
}

/* ===== Dark theme (for dark backgrounds) ===== */
.fd-wrap-dark .fd-label[b-8enfdk7jxp] {
    color: #cbd5e1;
}

.fd-wrap-dark .fd-label-icon[b-8enfdk7jxp] {
    color: #60a5fa;
}

.fd-wrap-dark .fd-trigger[b-8enfdk7jxp] {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(148, 163, 184, 0.28);
    color: #f1f5f9;
}

.fd-wrap-dark .fd-trigger:hover[b-8enfdk7jxp] {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(148, 163, 184, 0.5);
}

.fd-wrap-dark .fd-trigger.fd-open[b-8enfdk7jxp] {
    background: rgba(15, 23, 42, 0.85);
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.fd-wrap-dark .fd-trigger-icon[b-8enfdk7jxp] { color: #60a5fa; }
.fd-wrap-dark .fd-caret[b-8enfdk7jxp] { color: #94a3b8; }
.fd-wrap-dark .fd-trigger.fd-open .fd-caret[b-8enfdk7jxp] { color: #60a5fa; }

.fd-wrap-dark .fd-menu[b-8enfdk7jxp] {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.6), 0 4px 12px -8px rgba(0, 0, 0, 0.5);
}

.fd-wrap-dark .fd-option[b-8enfdk7jxp] { color: #cbd5e1; }
.fd-wrap-dark .fd-option:hover[b-8enfdk7jxp] { background: #273449; }
.fd-wrap-dark .fd-option-active[b-8enfdk7jxp] { background: rgba(37, 99, 235, 0.22); color: #93c5fd; }
.fd-wrap-dark .fd-option-active:hover[b-8enfdk7jxp] { background: rgba(37, 99, 235, 0.3); }
.fd-wrap-dark .fd-option-icon[b-8enfdk7jxp] { color: #64748b; }
.fd-wrap-dark .fd-option-active .fd-option-icon[b-8enfdk7jxp] { color: #60a5fa; }
.fd-wrap-dark .fd-check[b-8enfdk7jxp] { color: #60a5fa; }

/* Trigger */
.fd-trigger[b-8enfdk7jxp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 9.5rem;
    padding: 0.5rem 0.8rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.fd-trigger:hover[b-8enfdk7jxp] {
    border-color: #93c5fd;
    background: rgba(37,99,235,.06);
}

.fd-trigger.fd-open[b-8enfdk7jxp] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    background: #fff;
}

.fd-trigger-icon[b-8enfdk7jxp] {
    font-size: 0.9rem;
    color: #2563eb;
}

.fd-trigger-text[b-8enfdk7jxp] {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fd-caret[b-8enfdk7jxp] {
    font-size: 0.7rem;
    color: #94a3b8;
    transition: transform 0.18s ease;
}

.fd-trigger.fd-open .fd-caret[b-8enfdk7jxp] {
    transform: rotate(180deg);
    color: #2563eb;
}

/* Count chip (shared by trigger + options) */
.fd-count[b-8enfdk7jxp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.fd-count-danger[b-8enfdk7jxp] {
    background: #fee2e2;
    color: #991b1b;
}

/* Backdrop catches the outside click */
.fd-backdrop[b-8enfdk7jxp] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

/* Menu */
.fd-menu[b-8enfdk7jxp] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    min-width: 100%;
    width: max-content;
    max-width: 18rem;
    padding: 5px;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    box-shadow: 0 18px 44px -16px rgba(15, 23, 42, 0.35), 0 4px 12px -8px rgba(15, 23, 42, 0.2);
    animation: fd-pop-b-8enfdk7jxp 0.13s ease-out;
}

@keyframes fd-pop-b-8enfdk7jxp {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Options */
.fd-option[b-8enfdk7jxp] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}

.fd-option:hover[b-8enfdk7jxp] {
    background: rgba(37,99,235,.09);
}

.fd-option-active[b-8enfdk7jxp] {
    background: #eff6ff;
    color: #1d4ed8;
}

.fd-option-active:hover[b-8enfdk7jxp] {
    background: #dbeafe;
}

.fd-option-icon[b-8enfdk7jxp] {
    font-size: 0.9rem;
    color: #94a3b8;
    width: 1.1rem;
    text-align: center;
}

.fd-option-active .fd-option-icon[b-8enfdk7jxp] {
    color: #2563eb;
}

.fd-option-label[b-8enfdk7jxp] {
    flex: 1;
    white-space: nowrap;
}

.fd-check[b-8enfdk7jxp] {
    font-size: 0.95rem;
    color: #2563eb;
}

@media (max-width: 768px) {
    .fd-trigger[b-8enfdk7jxp] { min-width: 0; }
    .fd-wrap[b-8enfdk7jxp] { width: 100%; }
    .fd-control[b-8enfdk7jxp] { flex: 1; }
    .fd-trigger[b-8enfdk7jxp] { width: 100%; }
}
/* _content/Quote.UI/Components/Shared/FilterPills.razor.rz.scp.css */
.fp-row[b-aqrz7o4xku] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.fp-pill[b-aqrz7o4xku] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.fp-pill:hover[b-aqrz7o4xku] { border-color: #93c5fd; background: rgba(37,99,235,.06); color: #475569; }
.fp-pill.fp-sm[b-aqrz7o4xku] { padding: 0.35rem 0.8rem; font-size: 0.78rem; }

/* Optional leading status dot — keeps its colour in both active and inactive states. */
.fp-dot[b-aqrz7o4xku] { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }
.fp-pill.fp-active[b-aqrz7o4xku] {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(37, 99, 235, 0.7);
}

/* Per-status accents — recolour the ACTIVE background only. Inactive pills stay neutral. */
.fp-pill.fp-active.fp-accent-success[b-aqrz7o4xku] { border-color: #10b981; background: #10b981; box-shadow: 0 6px 16px -8px rgba(16, 185, 129, 0.7); }
.fp-pill.fp-active.fp-accent-info[b-aqrz7o4xku]    { border-color: #06b6d4; background: #06b6d4; box-shadow: 0 6px 16px -8px rgba(6, 182, 212, 0.7); }
.fp-pill.fp-active.fp-accent-slate[b-aqrz7o4xku]   { border-color: #64748b; background: #64748b; box-shadow: 0 6px 16px -8px rgba(100, 116, 139, 0.7); }
.fp-pill.fp-active.fp-accent-danger[b-aqrz7o4xku]  { border-color: #dc2626; background: #dc2626; box-shadow: 0 6px 16px -8px rgba(220, 38, 38, 0.7); }
/* fp-accent-primary is the brand-blue default — no override needed. */

.fp-count[b-aqrz7o4xku] {
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(15, 23, 42, 0.08);
    color: inherit;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    min-width: 1.1rem;
    text-align: center;
}
.fp-pill.fp-active .fp-count[b-aqrz7o4xku] { background: rgba(255, 255, 255, 0.25); }

/* Danger count badge — red even when the pill is inactive (e.g. overdue count). */
.fp-count-danger[b-aqrz7o4xku] { background: #dc2626; color: #fff; }
.fp-pill.fp-active .fp-count-danger[b-aqrz7o4xku] { background: rgba(255, 255, 255, 0.25); color: #fff; }
/* _content/Quote.UI/Components/Shared/HeroHeader.razor.rz.scp.css */
/* ===== Shared Hero Header (single source of truth) =====
   Default (deep navy → brand-blue) matches the unified app hero in
   section-accents.css, so public/unauthenticated pages outside main.app-main
   render the same premium hero as the rest of the app. */
.hero-header[b-5ljfgjucdu] {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 380px at 6% -10%, rgba(59,130,246,0.32), transparent 70%),
        radial-gradient(700px 320px at 96% -20%, rgba(37,99,235,0.24), transparent 70%),
        linear-gradient(135deg, #0b1220 0%, #0f1b2c 48%, #13294a 100%);
    color: white;
    padding: 2.35rem 0 0;
}

/* On-brand blueprint grid texture — fine draughting lines, brightest near the
   top-right glow and masked to fade out, so the hero reads layered/premium
   rather than bare. Used on every hero (app via section-accents, public here). */
.hero-bg[b-5ljfgjucdu] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px);
    /* minor 44px grid + a heavier 220px "module" grid for blueprint depth */
    background-size: 44px 44px, 44px 44px, 220px 220px, 220px 220px;
    -webkit-mask-image: radial-gradient(135% 110% at 88% -25%, #000 0%, rgba(0,0,0,0.55) 38%, transparent 74%);
    mask-image: radial-gradient(135% 110% at 88% -25%, #000 0%, rgba(0,0,0,0.55) 38%, transparent 74%);
}

/* Optional photographic background (opt-in via BgImage). Sits at the very back; a navy
   veil above it keeps text legible on the left and lets the photo read on the right, and
   the blueprint grid (.hero-bg, rendered after these in the DOM) stays on top of it. */
.hero-photo[b-5ljfgjucdu] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--hero-photo);
    background-size: cover;
    background-position: center 30%;
    /* pull the warm stock photo toward the cool navy brand, but keep enough light that the
       tools actually read as a real photo (not a near-black wash) */
    filter: saturate(0.78) brightness(0.82) contrast(1.04);
}
.hero-photo-veil[b-5ljfgjucdu] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Top layers = the app's signature brand-blue glow (top-left + top-right), so the photo
       hero keeps the same branded tint as every other hero. Below that, deep navy on the left
       for the title, easing off through the middle so the tools show, with a gentle top/bottom
       darken to seat the tab strip. */
    background:
        radial-gradient(920px 400px at 4% -14%, rgba(59,130,246,0.34), transparent 66%),
        radial-gradient(760px 360px at 99% -20%, rgba(37,99,235,0.30), transparent 70%),
        linear-gradient(90deg, #0b1220 0%, rgba(11,18,32,0.9) 22%, rgba(12,22,40,0.46) 52%, rgba(15,32,60,0.24) 100%),
        linear-gradient(180deg, rgba(11,18,32,0.18) 0%, rgba(11,18,32,0) 44%, rgba(11,18,32,0.46) 100%);
}
/* Keep the signature white crosshatch grid readable over the photo — brighter draughting
   lines than the default (the photo would otherwise swallow the fainter ones). */
.hero-has-photo .hero-bg[b-5ljfgjucdu] {
    opacity: 1;
    background-image:
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.15) 1px, transparent 1px);
}

/* ===== Animated "energy flow" through the crosshatch grid (opt-in via AnimatedGrid) =====
   A luminous blue beam sweeps diagonally across the hero, lighting the draughting grid lines
   only where it passes — a Halo-style shimmer flowing through the crosshatch. GPU-cheap: one
   masked grid layer animating mask-position + one soft travelling bloom riding the same
   diagonal. Honours prefers-reduced-motion (falls back to a faint static glow). */
/* Clip wrapper — carries the DIAGONAL cut as a SINGLE-layer mask (transparent on the LEFT/upper
   side, solid on the RIGHT/lower side) so both beams inside are kept RIGHT of the diagonal and
   deleted to its left. Masking the parent clips the whole subtree, which intersects the diagonal
   with each beam's own mask WITHOUT `mask-composite` — the latter has incompatible keyword sets
   between WebKit (Safari) and Blink (Chrome/Edge), so it silently broke on PC. Single-layer masks
   render identically everywhere. Global 50% opacity + screen blend live here too. */
.hero-animated .hero-grid-clip[b-5ljfgjucdu] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.25;
    mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(43deg,
        transparent 50%, rgba(0,0,0,0.22) 60%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.82) 79%, #000 88%);
    mask-image: linear-gradient(43deg,
        transparent 50%, rgba(0,0,0,0.22) 60%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.82) 79%, #000 88%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.hero-animated .hero-grid-flow[b-5ljfgjucdu] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Same crosshatch geometry as .hero-bg, but bright cyan-blue so lit lines read as "charged".
       Minor 44px grid + brighter 220px module grid. Every 5th VERTICAL line (the 220px module
       column, last layer) is drawn thicker + full white so it reads as a prominent gridline.
       Line alphas held at 0.7 (30% dimmer than solid) so the glow carries the energy. */
    background-image:
        linear-gradient(rgba(191,219,254,0.7) 1.2px, transparent 1.2px),
        linear-gradient(90deg, rgba(191,219,254,0.7) 1.2px, transparent 1.2px),
        linear-gradient(rgba(224,242,254,0.7) 1.4px, transparent 1.4px),
        linear-gradient(90deg, rgba(255,255,255,0.7) 2.6px, transparent 2.6px);
    background-size: 44px 44px, 44px 44px, 220px 220px, 220px 220px;
    /* Stronger bloom on the lit lines — the glow now does more of the work than the lines. */
    filter: drop-shadow(0 0 6px rgba(96,165,250,1)) drop-shadow(0 0 14px rgba(59,130,246,0.85));
    /* SINGLE-layer beam mask — a HORIZONTAL band that sweeps top→bottom (mask-size 100% wide ×
       250% tall = vertical travel room; the 180deg gradient reads as one horizontal light bar).
       The diagonal clip is applied by the parent .hero-grid-clip (no mask-composite needed). */
    -webkit-mask-image: linear-gradient(180deg,
        transparent 0%, transparent 38%,
        rgba(0,0,0,0.55) 44%, #000 50%, rgba(0,0,0,0.55) 56%,
        transparent 62%, transparent 100%);
    mask-image: linear-gradient(180deg,
        transparent 0%, transparent 38%,
        rgba(0,0,0,0.55) 44%, #000 50%, rgba(0,0,0,0.55) 56%,
        transparent 62%, transparent 100%);
    -webkit-mask-size: 100% 250%;
    mask-size: 100% 250%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50% 100%;
    mask-position: 50% 100%;
    animation: heroGridFlow-b-5ljfgjucdu 6.5s linear infinite;
}

/* Soft glow riding the beam DOWN the kept region (right of the diagonal) — a descending bloom
   that adds the "energy" without lighting the left/title region. */
.hero-animated .hero-grid-flow[b-5ljfgjucdu]::after {
    content: "";
    position: absolute;
    left: 60%; right: -3%;
    top: 0; height: 44%;
    background: radial-gradient(closest-side,
        rgba(96,165,250,0.48), rgba(96,165,250,0.16) 55%, transparent 78%);
    filter: blur(30px);
    mix-blend-mode: screen;
    animation: heroBloomFlow-b-5ljfgjucdu 6.5s linear infinite;
}

/* Vertical band sweeps top→bottom. */
@keyframes heroGridFlow-b-5ljfgjucdu {
    from { -webkit-mask-position: 50% 100%; mask-position: 50% 100%; }
    to   { -webkit-mask-position: 50% 0%;   mask-position: 50% 0%; }
}

/* Second beam — a VERTICAL band that sweeps right→left at the same time as the horizontal one,
   so the two cross like a scanner. Reuses the base grid/drop-shadow/diagonal-clip; only the beam
   orientation (115deg band, 250%-wide travel) and its animation differ. Its radial bloom is
   hidden so the two beams don't double up glows. */
.hero-animated .hero-grid-flow-x[b-5ljfgjucdu] {
    -webkit-mask-image: linear-gradient(115deg,
        transparent 0%, transparent 40%,
        rgba(0,0,0,0.55) 45%, #000 50%, rgba(0,0,0,0.55) 55%,
        transparent 60%, transparent 100%);
    mask-image: linear-gradient(115deg,
        transparent 0%, transparent 40%,
        rgba(0,0,0,0.55) 45%, #000 50%, rgba(0,0,0,0.55) 55%,
        transparent 60%, transparent 100%);
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    -webkit-mask-position: 0% 50%;
    mask-position: 0% 50%;
    animation: heroGridFlowX-b-5ljfgjucdu 6.5s linear infinite;
}
.hero-animated .hero-grid-flow-x[b-5ljfgjucdu]::after { display: none; }

/* Right→left horizontal sweep for the second beam. */
@keyframes heroGridFlowX-b-5ljfgjucdu {
    from { -webkit-mask-position: 0% 50%;   mask-position: 0% 50%; }
    to   { -webkit-mask-position: 100% 50%; mask-position: 100% 50%; }
}

@keyframes heroBloomFlow-b-5ljfgjucdu {
    0%   { transform: translateY(-80%); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(240%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-animated .hero-grid-clip[b-5ljfgjucdu] { opacity: 0.06; }
    .hero-animated .hero-grid-flow[b-5ljfgjucdu] { animation: none; -webkit-mask-image: none; mask-image: none; }
    .hero-animated .hero-grid-flow-x[b-5ljfgjucdu] { animation: none; }
    .hero-animated .hero-grid-flow[b-5ljfgjucdu]::after { animation: none; opacity: 0.3; }
}

.hero-wave[b-5ljfgjucdu] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    pointer-events: none;
}
/* No faux wave over a real photo — it muddies the image */
.hero-has-photo .hero-wave[b-5ljfgjucdu] { display: none; }

.hero-inner[b-5ljfgjucdu] {
    position: relative;
    z-index: 1;
}

.hero-top[b-5ljfgjucdu] {
    display: flex;
    /* Centre the right rail (actions + stats) against the title block so the
       cluster never hangs off the hero's top edge looking squashed. */
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 0 0.85rem;
    flex-wrap: wrap;
}

/* Centered variant — marketing-style public heroes (eyebrow/title/subtitle centered).
   Any actions float into the bottom-right corner so they don't grow the hero height
   (keeps it the same compact size whether or not a page has actions).
   Opt-in via <HeroHeader Centered="true" />. */
.hero-centered .hero-top[b-5ljfgjucdu] {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
}
.hero-centered .hero-top-left[b-5ljfgjucdu] { flex: 0 1 auto; }
.hero-centered .hero-lead-text[b-5ljfgjucdu] { display: flex; flex-direction: column; align-items: center; }
.hero-centered .hero-top h1[b-5ljfgjucdu],
.hero-centered .hero-top p[b-5ljfgjucdu] { margin-left: auto; margin-right: auto; }
.hero-centered .hero-top p[b-5ljfgjucdu] { max-width: 620px; }
.hero-centered .hero-top-right[b-5ljfgjucdu] {
    position: absolute;
    right: 1.5rem;
    bottom: 1.1rem;
    align-items: flex-end;
    margin: 0;
    z-index: 2;
}
.hero-centered .hero-actions[b-5ljfgjucdu] { justify-content: flex-end; }

.hero-top-left[b-5ljfgjucdu] {
    flex: 1;
    min-width: 0;
}

/* Optional leading avatar/logo (e.g. Profile) sits to the left of the title block */
.hero-top-left.hero-has-lead[b-5ljfgjucdu] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.hero-leading[b-5ljfgjucdu] { flex-shrink: 0; }
.hero-lead-text[b-5ljfgjucdu] { min-width: 0; }

.hero-top-right[b-5ljfgjucdu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Real breathing room between the action buttons and the stat tray */
    gap: 0.7rem;
    flex-shrink: 0;
}

a.hero-back-link[b-5ljfgjucdu] {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.75) !important;
    text-decoration: none !important;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
    transition: color 0.15s, transform 0.15s;
}

a.hero-back-link:hover[b-5ljfgjucdu] {
    color: white !important;
    transform: translateX(-2px);
}

a.hero-back-link i[b-5ljfgjucdu] {
    font-size: 0.95rem;
}

.hero-eyebrow[b-5ljfgjucdu] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 0.32rem 0.9rem;
    border-radius: 20px;
    margin-bottom: 0.85rem;
    text-transform: uppercase;
}

.hero-top h1[b-5ljfgjucdu] {
    font-family: var(--font-display, 'Archivo', sans-serif);
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.018em;
    color: white;
    margin: 0 0 0.5rem;
    line-height: 1.12;
    /* Title Case page titles (e.g. "Your Build History"); preserves acronyms (SWMS/JSAs). */
    text-transform: capitalize;
}

.hero-top p[b-5ljfgjucdu] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    line-height: 1.55;
    max-width: 600px;
}

.hero-actions[b-5ljfgjucdu] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Stats row (right side, below actions).
   When it holds standard stat cards it becomes a frosted tray — the design the
   AAA hubs (Fleet, Materials, Assets…) used to duplicate locally — with proper
   gaps so cards never sit glued together. Bespoke stat content (e.g. the
   dashboard's ambient date/clock cluster) keeps a plain flex row. */
.hero-stats-row[b-5ljfgjucdu] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hero-stats-row:has(> .hero-stat-card)[b-5ljfgjucdu] {
    gap: 0.35rem;
    padding: 0.35rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 13px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 28px -10px rgba(15,23,42,0.30);
}

/* Hide the tray entirely if a page's <Stats> renders no cards */
.hero-stats-row:empty[b-5ljfgjucdu] { display: none; }

[b-5ljfgjucdu] .hero-stat-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0.5rem 0.85rem 0.55rem;
    /* Fixed, uniform size across every hero banner so the stat tray reads as a clean grid
       (matches hero-photo.css). The mobile rule below (flex:1) overrides on small screens. */
    flex: 0 0 142px;
    max-width: 142px;
    min-height: 62px;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    /* Same pop-up glow on hover as the job/stat cards in the page body
       (card-hover.css): lift + brand-blue outline + soft blue glow halo. */
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease,
                outline-color .16s ease, background-color .16s ease;
}

[b-5ljfgjucdu] .hero-stat-card:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.09);
    border-color: rgba(96,165,250,0.45);
    outline: 1.5px solid rgba(96,165,250,0.55);
    outline-offset: -1px;
    box-shadow: 0 16px 34px -18px rgba(37,99,235,0.85);
    position: relative;
    z-index: 1;
}

[b-5ljfgjucdu] .hero-stat-label {
    font-size: 0.58rem;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 600;
    white-space: nowrap;
}

[b-5ljfgjucdu] .hero-stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

[b-5ljfgjucdu] .hero-stat-sub {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
}

/* Tabs strip (bottom of hero) — a segmented control with the same frosted
   DNA as the stat tray, so the hero's two clusters read as one family.
   Active tab is a solid brand pill: unmissable on the navy surface. */
.hero-tabs[b-5ljfgjucdu] {
    display: inline-flex;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 13px;
    padding: 4px;
    margin: 1.5rem 0.85rem 0;
    gap: 4px;
    flex-wrap: wrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 28px -10px rgba(15,23,42,0.30);
}

[b-5ljfgjucdu] .hero-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    /* Match the site-wide card-hover interaction language (lift + glow + outline). */
    transition: transform .16s ease, background-color .16s ease, color .16s ease,
                outline-color .16s ease, box-shadow .16s ease, border-color .16s ease;
    white-space: nowrap;
    text-decoration: none;
}

[b-5ljfgjucdu] .hero-tab:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.10);
    /* Same "pop-up glow" as the site's card hover: lift + blue outline + a soft blue
       glow halo (matches card-hover.css geometry 0 16px 34px -18px, opacity nudged up
       so the halo reads on the dark hero). */
    transform: translateY(-2px);
    outline: 1.5px solid rgba(96,165,250,0.55);
    outline-offset: -1px;
    box-shadow: 0 16px 34px -18px rgba(37,99,235,0.85);
    position: relative;
    z-index: 1;
}

[b-5ljfgjucdu] .hero-tab-active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    box-shadow: 0 4px 14px -4px rgba(37,99,235,0.55);
}

[b-5ljfgjucdu] .hero-tab-active:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -14px rgba(37,99,235,0.9);
    position: relative;
    z-index: 1;
}

[b-5ljfgjucdu] .hero-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.45rem;
    margin-left: 0.4rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

[b-5ljfgjucdu] .hero-tab-active .hero-tab-badge {
    background: rgba(255,255,255,0.25);
}

/* When a hub row sits above local view tabs, pull the second row in close */
.hero-hubtabs + .hero-tabs[b-5ljfgjucdu] { margin-top: 0.5rem; }

/* Bottom seam: floating segmented tabs need clearance; tab-less heroes need more */
.hero-header:has(.hero-tabs)[b-5ljfgjucdu] {
    padding-bottom: 1.4rem;
}

.hero-header:not(:has(.hero-tabs))[b-5ljfgjucdu] {
    padding-bottom: 2.35rem;
}

/* ===== Action buttons (used via class on <a> or <button> inside <Actions>) ===== */
[b-5ljfgjucdu] .hero-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1.05rem;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    text-decoration: none;
    backdrop-filter: blur(4px);
}

[b-5ljfgjucdu] .hero-action-btn:hover {
    background: rgba(255,255,255,0.18);
    color: white;
    transform: translateY(-1px);
}

[b-5ljfgjucdu] .hero-action-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1.05rem;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 10px;
    background: rgba(255,255,255,0.2);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    text-decoration: none;
    backdrop-filter: blur(4px);
}

[b-5ljfgjucdu] .hero-action-btn-primary:hover {
    background: rgba(255,255,255,0.3);
    color: white;
    transform: translateY(-1px);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .hero-header[b-5ljfgjucdu] { padding: 1.5rem 0 0; }
    .hero-top[b-5ljfgjucdu] { flex-direction: column; align-items: stretch; gap: 1rem; }
    .hero-top-right[b-5ljfgjucdu] { align-items: flex-start; }
    .hero-top h1[b-5ljfgjucdu] { font-size: 1.35rem; }
    .hero-stats-row[b-5ljfgjucdu] { width: 100%; justify-content: flex-start; }
    /* Stat cards share the tray width evenly on small screens */
    [b-5ljfgjucdu] .hero-stats-row .hero-stat-card { flex: 1; min-width: 84px; }
    /* The label/sub are nowrap so the desktop tray reads as a tidy grid. Once the cards shrink
       to ~84px that nowrap has nowhere to go and the text was cut mid-word with no ellipsis —
       "Enters today" lost 38px. Let it wrap onto a second line at phone widths instead. */
    [b-5ljfgjucdu] .hero-stats-row .hero-stat-label,
    [b-5ljfgjucdu] .hero-stats-row .hero-stat-sub { white-space: normal; }
    .hero-tabs[b-5ljfgjucdu] { width: 100%; justify-content: flex-start; overflow-x: auto; }
}

/* ---- Phone fit -------------------------------------------------------------
   .hero-header sets overflow:hidden so the gradient and its rounded seam stay
   inside the box. That is correct for the background and dangerous for the
   content: anything wider than the screen is silently cut off rather than
   scrolling, which is how the tab strip could sit 2px over the edge on every
   page with a hero and never show a scrollbar to say so.

   The background still clips; the content is simply never allowed to get wide
   enough to need it. */
@media (max-width: 767.98px) {
    .hero-header > *[b-5ljfgjucdu] {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* The tab strip is inline-flex with side margins, so max-width:100% still
       overflows by the margins. Take them off the width. */
    .hero-tabs[b-5ljfgjucdu],
    .hero-hubtabs[b-5ljfgjucdu] {
        max-width: calc(100% - 1.7rem);
        box-sizing: border-box;
    }

    /* Long headings and blurbs break rather than push. */
    .hero-title[b-5ljfgjucdu],
    .hero-subtitle[b-5ljfgjucdu] {
        overflow-wrap: break-word;
    }
}
/* _content/Quote.UI/Components/Shared/OfflineBanner.razor.rz.scp.css */
/* Pinned under the topbar, above everything else. Uses the same safe-area variable the topbar
   does so it clears the notch on a phone rather than sliding under it. */
.offline-banner[b-fhv1wt2ela] {
    position: fixed;
    top: var(--topbar-height, 72px);
    left: 0;
    right: 0;
    z-index: 1035;

    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;

    font-size: 0.85rem;
    line-height: 1.3;
    color: #fff;

    /* No backdrop-filter here on purpose: it would make this element the containing block for any
       position:fixed descendant, which is the bug that put a docked panel in the wrong place. */
    background: #b45309;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);

    animation: offline-banner-in-b-fhv1wt2ela 180ms ease-out;
}

.offline-banner.is-pending[b-fhv1wt2ela] {
    background: #15803d;   /* recovering, not broken */
}

.offline-dot[b-fhv1wt2ela] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.9;
}

.offline-banner.is-offline .offline-dot[b-fhv1wt2ela] {
    animation: offline-pulse-b-fhv1wt2ela 1.6s ease-in-out infinite;
}

.offline-text[b-fhv1wt2ela] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.offline-detail[b-fhv1wt2ela] {
    opacity: 0.9;
}

.offline-pill[b-fhv1wt2ela] {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@keyframes offline-banner-in-b-fhv1wt2ela {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

@keyframes offline-pulse-b-fhv1wt2ela {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .offline-banner[b-fhv1wt2ela] { animation: none; }
    .offline-banner.is-offline .offline-dot[b-fhv1wt2ela] { animation: none; opacity: 1; }
}
/* _content/Quote.UI/Components/Shared/QuickToolsDock.razor.rz.scp.css */
/* ===== Recent numbers =====

   The dock panel is frosted WHITE — rgba(255,255,255,0.82) with a blur, and plain #ffffff where
   backdrop-filter isn't supported. So this palette matches the dock's other controls: dark text on
   pale chips.

   The first version of this file used light text on translucent-white chips, written for a dark
   panel that doesn't exist here. It rendered as near-invisible white-on-white. */

.qt-recent[b-kpm4xuu91u] { padding: 0.15rem 0 0.25rem; min-height: 0; }
.qt-recent-empty[b-kpm4xuu91u] { font-size: 0.82rem; color: #64748b; line-height: 1.55; padding: 1rem 0.25rem; text-align: center; }

.qt-recent-list[b-kpm4xuu91u] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.qt-recent-row[b-kpm4xuu91u] { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.1rem; border-top: 1px solid #eef2f7; }
.qt-recent-row:first-child[b-kpm4xuu91u] { border-top: none; }

/* Tabular figures so a column of references lines up and can be scanned rather than read. */
.qt-recent-num[b-kpm4xuu91u] { display: inline-flex; align-items: center; gap: 0.28rem; flex-shrink: 0;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums; font-size: 0.75rem; font-weight: 700;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px;
    padding: 0.24rem 0.5rem; color: #0f172a; cursor: pointer; }
.qt-recent-num:hover[b-kpm4xuu91u] { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.qt-recent-num i[b-kpm4xuu91u] { font-size: 0.78rem; color: #94a3b8; }
.qt-recent-num:hover i[b-kpm4xuu91u] { color: #2563eb; }
.qt-recent-num.is-copied[b-kpm4xuu91u] { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.qt-recent-num.is-copied i[b-kpm4xuu91u] { color: #047857; }
.qt-recent-num em[b-kpm4xuu91u] { font-style: normal; font-size: 0.68rem; font-weight: 700; }

.qt-recent-body[b-kpm4xuu91u] { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; }
.qt-recent-party[b-kpm4xuu91u] { font-size: 0.82rem; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qt-recent-body:hover .qt-recent-party[b-kpm4xuu91u] { color: #2563eb; }
.qt-recent-meta[b-kpm4xuu91u] { font-size: 0.7rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.qt-recent-status[b-kpm4xuu91u] { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 0.14rem 0.45rem; }
/* _content/Quote.UI/Components/Shared/Toast.razor.rz.scp.css */
.toast-stack[b-cuabkqmv2f] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 11000;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    pointer-events: none;
}

.toast-item[b-cuabkqmv2f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    max-width: 440px;
    min-width: 280px;
    pointer-events: auto;
}

.toast-success[b-cuabkqmv2f] { border: 2px solid #bbf7d0; }
.toast-error[b-cuabkqmv2f] { border: 2px solid #fecaca; }
.toast-warning[b-cuabkqmv2f] { border: 2px solid #fde68a; }
.toast-info[b-cuabkqmv2f] { border: 2px solid #bfdbfe; }

.toast-icon[b-cuabkqmv2f] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.toast-icon-success[b-cuabkqmv2f] { background: #dcfce7; color: #16a34a; }
.toast-icon-error[b-cuabkqmv2f] { background: #fef2f2; color: #dc2626; }
.toast-icon-warning[b-cuabkqmv2f] { background: #fffbeb; color: #d97706; }
.toast-icon-info[b-cuabkqmv2f] { background: #eff6ff; color: #2563eb; }

.toast-content[b-cuabkqmv2f] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.toast-content strong[b-cuabkqmv2f] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

.toast-content span[b-cuabkqmv2f] {
    font-size: 0.8rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.toast-dismiss[b-cuabkqmv2f] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}

.toast-dismiss:hover[b-cuabkqmv2f] { color: #475569; }

.toast-animate[b-cuabkqmv2f] {
    animation: toast-slide-b-cuabkqmv2f 0.35s ease-out;
}

@keyframes toast-slide-b-cuabkqmv2f {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
    .toast-stack[b-cuabkqmv2f] {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }
    .toast-item[b-cuabkqmv2f] { max-width: none; min-width: 0; }
}
/* _content/Quote.UI/Components/Shared/UnsavedChangesBar.razor.rz.scp.css */
.ucb-bar[b-n6pcjwv4ez] {
    position: sticky; bottom: 16px;
    z-index: 100;
    margin-top: 1rem;
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    color: #fff;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15,23,42,0.35);
    animation: ucb-in-b-n6pcjwv4ez 0.18s ease-out;
}

@keyframes ucb-in-b-n6pcjwv4ez {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.ucb-text[b-n6pcjwv4ez] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; flex-wrap: wrap; }
.ucb-text i[b-n6pcjwv4ez] { color: #fbbf24; }
.ucb-which[b-n6pcjwv4ez] {
    background: rgba(255,255,255,0.12); padding: 0.1rem 0.6rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.85);
}

.ucb-actions[b-n6pcjwv4ez] { display: flex; gap: 0.4rem; flex-shrink: 0; }
.ucb-btn[b-n6pcjwv4ez] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    border-radius: 9px; padding: 0.45rem 0.9rem;
    font-size: 0.82rem; font-weight: 700; cursor: pointer;
    border: none; transition: all 0.15s;
}
.ucb-btn:disabled[b-n6pcjwv4ez] { opacity: 0.6; cursor: not-allowed; }
.ucb-discard[b-n6pcjwv4ez] { background: rgba(255,255,255,0.12); color: #fff; }
.ucb-discard:hover:not(:disabled)[b-n6pcjwv4ez] { background: rgba(255,255,255,0.2); }
.ucb-save[b-n6pcjwv4ez] { background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; }
.ucb-save:hover:not(:disabled)[b-n6pcjwv4ez] { filter: brightness(1.08); transform: translateY(-1px); }

.ucb-spinner[b-n6pcjwv4ez] {
    width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
    animation: ucb-spin-b-n6pcjwv4ez 0.6s linear infinite;
}
@keyframes ucb-spin-b-n6pcjwv4ez { to { transform: rotate(360deg); } }
/* _content/Quote.UI/Components/Tours/TourIndex.razor.rz.scp.css */
/* The walkthrough index. Token-only, and built to sit inside the existing Help page without
   fighting it — same card language, same spacing rhythm as the rest of the app. */

.ti-wrap[b-3sponp8vmw] { margin-bottom: var(--space-8); }

.ti-head[b-3sponp8vmw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.ti-title[b-3sponp8vmw] {
    margin: 0 0 var(--space-1);
    font-size: var(--text-xl);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
}

.ti-sub[b-3sponp8vmw] {
    margin: 0;
    max-width: 62ch;              /* measure — long lines are what make help text unread */
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--neutral-600);
}

/* Progress deserves to be a number, not a bar: "3 of 5" is checkable, a bar is decoration. */
.ti-count[b-3sponp8vmw] {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.ti-count-num[b-3sponp8vmw] {
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-primary);
    font-feature-settings: "tnum";     /* tabular figures so the number doesn't jitter */
}

.ti-count-of[b-3sponp8vmw] {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--neutral-500);
}

/* auto-FIT, not auto-fill: auto-fill holds empty tracks open, so with one walkthrough the card
   sat marooned at 340px in a 1300px row. The 480px ceiling stops a lone card stretching into a
   banner — these are menu entries, and a menu entry the width of the screen reads as a mistake. */
.ti-grid[b-3sponp8vmw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 480px));
    justify-content: start;
    gap: var(--space-3);
}

.ti-card[b-3sponp8vmw] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.ti-card:hover[b-3sponp8vmw] {
    border-color: var(--brand-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.ti-card-icon[b-3sponp8vmw] {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: var(--text-md);
}

.ti-done .ti-card-icon[b-3sponp8vmw] { background: var(--success-50); color: var(--success-700); }
.ti-part .ti-card-icon[b-3sponp8vmw] { background: var(--warning-50); color: var(--warning-700); }

.ti-card-body[b-3sponp8vmw] { flex: 1 1 auto; min-width: 0; }

.ti-card-title[b-3sponp8vmw] {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.ti-card-sub[b-3sponp8vmw] {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--neutral-600);
    /* Three lines then stop — the card is a menu entry, not the content itself. Two clipped the
       summaries mid-word, which looks like a bug rather than a deliberate cut. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ti-card-meta[b-3sponp8vmw] { flex: none; }

.ti-chip[b-3sponp8vmw] {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    color: var(--neutral-600);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    white-space: nowrap;
}

.ti-chip-done[b-3sponp8vmw] { background: var(--success-50); color: var(--success-700); }
.ti-chip-part[b-3sponp8vmw] { background: var(--warning-50); color: var(--warning-700); }

@media (max-width: 700px) {
    .ti-head[b-3sponp8vmw] { flex-direction: column; }
    .ti-grid[b-3sponp8vmw] { grid-template-columns: 1fr; }
    .ti-card-meta[b-3sponp8vmw] { display: none; }   /* the icon already carries the state on a phone */
}
/* _content/Quote.UI/Components/Tours/TourInvitation.razor.rz.scp.css */
/* Offered, not imposed. Reads as a helpful aside on the page rather than something blocking the
   way — someone who came here to write a quote must be able to ignore it entirely.

   Token-only, like the overlay: refine the brand ramp and this follows. */

.tour-invite[b-kbyl4pv0x6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, var(--brand-50) 0%, var(--color-surface-2) 100%);
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.tour-invite-icon[b-kbyl4pv0x6] {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    background: var(--brand-100);
    color: var(--brand-700);
    font-size: var(--text-md);
}

.tour-invite-body[b-kbyl4pv0x6] { flex: 1 1 auto; min-width: 0; }

.tour-invite-title[b-kbyl4pv0x6] {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.tour-invite-sub[b-kbyl4pv0x6] {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--neutral-700);
}

.tour-invite-go[b-kbyl4pv0x6] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--neutral-0);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--shadow-brand);
    transition: background var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.tour-invite-go:hover[b-kbyl4pv0x6] { background: var(--color-primary-hover); }
.tour-invite-go:active[b-kbyl4pv0x6] { transform: translateY(1px); }

/* Quiet, but a real answer — not a cross that leaves you wondering if it'll be back tomorrow. */
.tour-invite-no[b-kbyl4pv0x6] {
    flex: none;
    padding: var(--space-2) var(--space-2);
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--neutral-600);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.tour-invite-no:hover[b-kbyl4pv0x6] { background: var(--neutral-200); color: var(--neutral-700); }

@media (max-width: 700px) {
    .tour-invite[b-kbyl4pv0x6] { flex-wrap: wrap; }
    .tour-invite-body[b-kbyl4pv0x6] { flex: 1 1 100%; order: 2; }
    .tour-invite-go[b-kbyl4pv0x6], .tour-invite-no[b-kbyl4pv0x6] { order: 3; }
}
/* _content/Quote.UI/Components/Tours/TourLauncher.razor.rz.scp.css */
/* The permanent way in. Token-only so it inherits any refinement to the brand. */

.tour-launch[b-morawx6hh0] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-pill);
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.tour-launch:hover[b-morawx6hh0] {
    background: var(--brand-100);
    border-color: var(--brand-300);
}

.tour-launch:active[b-morawx6hh0] { transform: translateY(1px); }

.tour-launch i[b-morawx6hh0] { font-size: var(--text-sm); }

/* For a dark hero or a crowded toolbar: same shape, borrowed colour, so it reads as one of the
   page's own actions rather than a sticker applied on top of it. */
.tour-launch-subtle[b-morawx6hh0] {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .12);
    color: inherit;
}

.tour-launch-subtle:hover[b-morawx6hh0] {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .40);
}

@media (max-width: 700px) {
    /* The wording carries the meaning on a phone; the icon alone would be a mystery button. */
    .tour-launch[b-morawx6hh0] { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
}
/* _content/Quote.UI/Components/Tours/TourOverlay.razor.rz.scp.css */
/* Walkthrough overlay.

   Built entirely on design-tokens.css. Nothing here picks its own blue, its own radius or its own
   easing — refine a ramp in the tokens and the walkthrough follows the rest of the app. It used to
   be 26 hard-coded hex values, which meant it would have quietly drifted away from the product the
   first time the brand was retuned.

   The dimming is four panels around the target rather than one panel with a CSS cut-out, because
   a real hole leaves the control underneath clickable. That is the difference between doing the
   thing and watching a demo of it. */

.tour-root[b-q4e90qipma] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    /* The root must not eat clicks — only the card does. */
    pointer-events: none;
}

.tour-dim[b-q4e90qipma] {
    position: fixed;
    /* Deep neutral rather than pure black: the canvas is warm, and a black scrim over it reads
       grey and dead. */
    background: rgba(31, 41, 51, 0.55);
    /* Dimmed areas DO block clicks, so the only thing they can touch is the spotlit control. */
    pointer-events: auto;
    /* Deliberately NOT transitioned. These four panels have to tile exactly around the target, and
       animating them independently means that for 180ms they don't — each one eases at its own
       rate, so pale seams open and close between them as the spotlight moves. The panels snap;
       the ring is the thing that glides, and that's what the eye follows anyway. */
}

.tour-dim-all[b-q4e90qipma] { inset: 0; }

.tour-ring[b-q4e90qipma] {
    position: fixed;
    border: 3px solid var(--brand-500);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 4px var(--color-primary-glow);
    pointer-events: none;
    transition: all var(--dur-base) var(--ease-out);
    animation: tour-pulse-ring-b-q4e90qipma 2s ease-in-out infinite;
}

@keyframes tour-pulse-ring-b-q4e90qipma {
    0%, 100% { box-shadow: 0 0 0 4px var(--color-primary-glow); }
    50%      { box-shadow: 0 0 0 9px var(--color-primary-glow-soft); }
}

/* What else is on this part of the screen. Visually quieter than the instruction above it, but
   present on every step - this is the part people actually learn from. */
.tour-tip[b-q4e90qipma] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface-2);
    border-left: 3px solid var(--neutral-400);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--neutral-700);
}

.tour-tip i[b-q4e90qipma] {
    flex: none;
    margin-top: 2px;
    color: var(--warning-500);
}

/* ---- Card ------------------------------------------------------------------- */
/* 480px rather than 360: the same tip text went from eight lines to four, which is what keeps the
   card clear of the control on a laptop-height window. Position (top/bottom/left/max-height) is
   set inline — it's measured against the target. */
.tour-card[b-q4e90qipma] {
    position: fixed;
    width: min(480px, calc(100vw - var(--space-8)));
    padding: var(--space-5) var(--space-5) var(--space-5);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2xl);
    pointer-events: auto;
    z-index: 3001;
    /* Column so the reading matter can scroll while the buttons stay put. */
    display: flex;
    flex-direction: column;
    /* Glides with the ring when the page reflows under it — adding a line item pushes the button
       down and the card used to teleport after it. Only the offsets, so resizing content doesn't
       animate. */
    transition: top var(--dur-base) var(--ease-out),
                bottom var(--dur-base) var(--ease-out),
                left var(--dur-base) var(--ease-out);
}

/* The resume prompt has no target to sit beside, so it goes to the middle of the screen. */
.tour-card-centred[b-q4e90qipma] {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* The only part that scrolls when the card is squeezed. min-height:0 is required — a flex child
   defaults to min-content height and would refuse to shrink, pushing the buttons out instead. */
.tour-card-body[b-q4e90qipma] {
    overflow-y: auto;
    min-height: 0;
}

.tour-card-head[b-q4e90qipma] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.tour-progress[b-q4e90qipma] {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-primary);
}

.tour-close[b-q4e90qipma] {
    width: 28px; height: 28px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--neutral-500);
    cursor: pointer;
    font-size: var(--text-xs);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.tour-close:hover[b-q4e90qipma] { background: var(--color-hover); color: var(--color-text); }

.tour-card h3[b-q4e90qipma] {
    margin: 0 0 var(--space-1);
    font-size: var(--text-lg);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    line-height: var(--leading-snug);
}

.tour-card p[b-q4e90qipma] {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--neutral-700);
}

.tour-missing[b-q4e90qipma] {
    margin-top: var(--space-3) !important;
    padding: var(--space-3);
    background: var(--warning-50);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm) !important;
    color: var(--warning-700) !important;
}

.tour-next[b-q4e90qipma] {
    flex: none;
    width: 100%;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--neutral-0);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--shadow-brand);
    transition: background var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.tour-next:hover[b-q4e90qipma] { background: var(--color-primary-hover); }
.tour-next:active[b-q4e90qipma] { transform: translateY(1px); }

/* Back on the left, the Enter hint on the right. The hint keeps margin-left:auto so it stays put
   on step 1, where there is no Back to sit beside it. */
.tour-foot[b-q4e90qipma] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.tour-back[b-q4e90qipma] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    margin-left: calc(var(--space-2) * -1);   /* optical alignment with the card's text edge */
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--neutral-600);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.tour-back:hover[b-q4e90qipma] { background: var(--color-hover); color: var(--neutral-700); }

.tour-back i[b-q4e90qipma] { font-size: var(--text-xs); }

.tour-enter-hint[b-q4e90qipma] {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--neutral-600);
}

.tour-enter-hint kbd[b-q4e90qipma] {
    padding: 1px var(--space-1);
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    border-radius: var(--radius-xs);
    background: var(--color-surface-2);
    color: var(--neutral-700);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

@media (max-width: 720px) {
    .tour-card[b-q4e90qipma] {
        left: var(--space-4) !important;
        right: var(--space-4);
        width: auto;
        transform: none !important;
    }

    .tour-card-centred[b-q4e90qipma] { top: 50%; transform: translateY(-50%) !important; }
}

/* "It's below you", not "it's gone". A scroll away is not a broken feature. */
.tour-offscreen[b-q4e90qipma] {
    margin-top: var(--space-3) !important;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--brand-50);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm) !important;
    color: var(--brand-700) !important;
}