/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* Sign in (issue 224, UX-3.2) — on top of the shared .auth-* rules in app.css. Inputs and the passkey button are rendered by child
   components (InputText, PasskeySubmit), so they're reached with ::deep. */

/* vertically centred card (UX-3.2-2) */
.auth[b-yprlz7cxvw] { align-items: center; padding-top: 32px; padding-bottom: 48px; }
.auth h1[b-yprlz7cxvw] { font-size: 1.6rem; margin: 0 0 4px; }
.auth-lede[b-yprlz7cxvw] { margin: 0 0 18px; font-size: 14px; color: var(--mud-palette-text-secondary); }

/* 14px sentence-case labels (UX-3.2-3) */
.auth-field > span[b-yprlz7cxvw], .auth-field label > span[b-yprlz7cxvw] { display: block; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: 1; margin-bottom: 6px; color: var(--mud-palette-text-primary); }
.auth-field > label[b-yprlz7cxvw] { display: block; }

/* password with show / hide */
.auth-pw[b-yprlz7cxvw] { position: relative; }
.auth-pw[b-yprlz7cxvw]  input { padding-right: 72px; }
.auth-pw-toggle[b-yprlz7cxvw] {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; border-radius: 6px;
    padding: 6px 10px; font: inherit; font-size: 14px; font-weight: 500; color: var(--mud-palette-primary); cursor: pointer;
}
.auth-pw-toggle:hover[b-yprlz7cxvw] { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.auth-pw-toggle:focus-visible[b-yprlz7cxvw] { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }

/* "or" + full-width outlined passkey button (UX-3.2-4) */
.auth-or[b-yprlz7cxvw] { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 14px; color: var(--mud-palette-text-secondary); }
.auth-or[b-yprlz7cxvw]::before, .auth-or[b-yprlz7cxvw]::after { content: ""; flex: 1; height: 1px; background: var(--mud-palette-lines-default); }
.auth-passkey[b-yprlz7cxvw]  .auth-passkey-btn {
    width: 100%; font: inherit; font-size: 1rem; font-weight: 600; padding: 11px; border-radius: 8px; cursor: pointer; text-decoration: none;
    border: 1px solid var(--mud-palette-primary); background: transparent; color: var(--mud-palette-primary);
}
.auth-passkey[b-yprlz7cxvw]  .auth-passkey-btn:hover { background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }

/* help text 14px, tappable phone (UX-3.2-6) */
.auth-foot[b-yprlz7cxvw] { font-size: 14px; opacity: 1; color: var(--mud-palette-text-secondary); }
.auth-foot p[b-yprlz7cxvw] { margin: 0 0 6px; }
.auth-foot p:last-child[b-yprlz7cxvw] { margin-bottom: 0; }
.auth-foot a[b-yprlz7cxvw] { color: var(--mud-palette-primary); text-decoration: underline; }
.auth-foot .auth-legal[b-yprlz7cxvw] { margin-top: 10px; font-size: 13px; }   /* issue 680 */
/* /Components/Fleet/LoadRowCard.razor.rz.scp.css */
/* Issue 229 / UX-3.7: the two-tier load row (Loads list). Primary line on one row on a wide screen; under 900px the lane,
   status and driver drop under the load # / total; the details live in the expander. */
.lr2-main[b-9ycductyy4] {
    display: grid;
    grid-template-columns: auto minmax(110px, 1fr) minmax(0, 2.4fr) auto minmax(90px, .9fr) auto auto;
    grid-template-areas: "menu id lane status driver money more";
    align-items: center;
    gap: 4px 16px;
    min-height: 40px;
}
.lr2-menu[b-9ycductyy4] { grid-area: menu; }
.lr2-id[b-9ycductyy4] { grid-area: id; min-width: 0; }
.lr2-lane[b-9ycductyy4] { grid-area: lane; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; }
.lr2-status[b-9ycductyy4] { grid-area: status; white-space: nowrap; }
.lr2-driver[b-9ycductyy4] { grid-area: driver; min-width: 0; display: flex; align-items: center; }
.lr2-money[b-9ycductyy4] { grid-area: money; display: flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.lr2-more[b-9ycductyy4] { grid-area: more; }

@media (max-width: 899.95px) {
    .lr2-main[b-9ycductyy4] {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "menu id money more"
            ". lane lane lane"
            ". status driver driver";
    }
    .lr2-status[b-9ycductyy4] { justify-self: start; }
}

.lr2-line[b-9ycductyy4] { display: flex; align-items: center; gap: 4px; min-width: 0; }
.lr2-ellipsis[b-9ycductyy4] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lr2-none[b-9ycductyy4] { flex: 0 0 auto; }
/* issue 254: the load number never truncates */
.lr2-loadno[b-9ycductyy4] { flex: 0 0 auto; white-space: nowrap; }
.lr2-sub[b-9ycductyy4] { font-size: .875rem; color: var(--mud-palette-text-secondary); }
.lr2-stop[b-9ycductyy4] { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.lr2-city[b-9ycductyy4] { font-weight: 600; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; }
.lr2-when[b-9ycductyy4] { font-size: .8125rem; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.lr2-arrow[b-9ycductyy4] { color: var(--mud-palette-text-secondary); }
.lr2-muted[b-9ycductyy4] { color: var(--mud-palette-text-secondary); }

.lr2-detail[b-9ycductyy4] {
    display: flex; flex-wrap: wrap; gap: 4px 20px;
    margin: 8px 0 2px; padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: .8125rem; cursor: default;
}
.lr2-field[b-9ycductyy4] { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lr2-label[b-9ycductyy4] { color: var(--mud-palette-text-secondary); margin-right: 4px; }
.lr2-click[b-9ycductyy4] { cursor: pointer; }
.lr2-link[b-9ycductyy4] { color: inherit; text-decoration: underline; }
.lr2-paper[b-9ycductyy4] { position: relative; margin-right: 10px; }
.lr2-dot[b-9ycductyy4] { position: absolute; top: -1px; right: -7px; width: 6px; height: 6px; border-radius: 50%; background: var(--mud-palette-error); }

/* UX-3.7-2: visually hidden text (read by screen readers and kept on copy) */
.lr2-vh[b-9ycductyy4] {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lr-sep[b-9ycductyy4] { opacity: .6; }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Nav is standard MudNavMenu inside a MudDrawer — styling comes from the MudBlazor theme. */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* UX-C8 (issue 222): the reconnect notice is a small toast at the bottom of the window — fixed, so the page never moves; no
   backdrop, so nothing is covered. ReconnectModal.razor.js decides when it opens (debounced) and when it says "Back online". */
/* Issue 665: MudBlazor.min.css (loaded after this bundle) ships its own rules for this element id:
     #components-reconnect-modal { background-color: var(--mud-palette-background) !important }
     #components-reconnect-modal button { color: …; text-transform: uppercase; margin: 40px auto !important; … }
   Without an !important of our own the toast went light (our near-white text and button label became invisible, the headings with
   them) and the button sat 40px below the text. The rules below that fight those carry !important; the scoped attribute makes them
   more specific than MudBlazor's, so they win. */
.components-reconnect-first-attempt-visible[b-gcnjew5c3g],
.components-reconnect-repeated-attempt-visible[b-gcnjew5c3g],
.components-reconnect-failed-visible[b-gcnjew5c3g],
.components-pause-visible[b-gcnjew5c3g],
.components-resume-failed-visible[b-gcnjew5c3g],
.components-back-online-visible[b-gcnjew5c3g],
.components-rejoining-animation[b-gcnjew5c3g] {
    display: none;
}

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

#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-gcnjew5c3g],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-gcnjew5c3g] {
    display: inline-block;
}

/* Issue 665: Blazor ADDS "retrying" next to "show" (it never removes "show" while it retries), so the first-attempt line must step
   aside or both lines show at once. */
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-first-attempt-visible[b-gcnjew5c3g] { display: none; }

/* Issue 676: "Trying again in Ns" only while Blazor waits between attempts (ReconnectModal.razor.js sets nslogi-countdown); the toast
   escalates by the clock during Blazor's back-to-back first attempts, when the count would read 0. */
#components-reconnect-modal .nslogi-next-attempt[b-gcnjew5c3g] { display: none; }
#components-reconnect-modal.nslogi-countdown .nslogi-next-attempt[b-gcnjew5c3g] { display: inline; }

/* Issue 665: once the health poll sees the server back, the toast says only that (ReconnectModal.razor.js adds nslogi-reloading). */
#components-reconnect-modal.nslogi-reloading .components-reconnect-first-attempt-visible[b-gcnjew5c3g],
#components-reconnect-modal.nslogi-reloading .components-reconnect-repeated-attempt-visible[b-gcnjew5c3g],
#components-reconnect-modal.nslogi-reloading .components-reconnect-failed-visible[b-gcnjew5c3g],
#components-reconnect-modal.nslogi-reloading .components-pause-visible[b-gcnjew5c3g],
#components-reconnect-modal.nslogi-reloading .components-resume-failed-visible[b-gcnjew5c3g],
#components-reconnect-modal.nslogi-reloading .components-reconnect-actions[b-gcnjew5c3g] { display: none; }
#components-reconnect-modal.nslogi-reloading .components-reconnect-status[b-gcnjew5c3g] { font-size: .875rem; font-weight: 700; color: #fff !important; }
#components-reconnect-modal.nslogi-reloading .components-reconnect-text[b-gcnjew5c3g] { flex-basis: auto; }
#components-reconnect-modal.nslogi-reloading .components-rejoining-animation[b-gcnjew5c3g] { display: inline-block; }
/* a status toast, not a control: no focus ring around the whole card when show() focuses it */
#components-reconnect-modal:focus[b-gcnjew5c3g], #components-reconnect-modal:focus-visible[b-gcnjew5c3g] { outline: none; }

/* While the toast says "Back online", nothing else in it shows. */
#components-reconnect-modal.nslogi-back-online .components-back-online-visible[b-gcnjew5c3g] { display: block; }
#components-reconnect-modal.nslogi-back-online .components-reconnect-first-attempt-visible[b-gcnjew5c3g],
#components-reconnect-modal.nslogi-back-online .components-reconnect-repeated-attempt-visible[b-gcnjew5c3g],
#components-reconnect-modal.nslogi-back-online .components-reconnect-failed-visible[b-gcnjew5c3g],
#components-reconnect-modal.nslogi-back-online .components-pause-visible[b-gcnjew5c3g],
#components-reconnect-modal.nslogi-back-online .components-resume-failed-visible[b-gcnjew5c3g],
#components-reconnect-modal.nslogi-back-online .components-rejoining-animation[b-gcnjew5c3g],
#components-reconnect-modal.nslogi-back-online .components-reconnect-actions[b-gcnjew5c3g],
#components-reconnect-modal.nslogi-back-online .components-reconnect-status[b-gcnjew5c3g] { display: none; }
#components-reconnect-modal.nslogi-back-online[b-gcnjew5c3g] { border-left-color: var(--success, #15803D); }

#components-reconnect-modal[b-gcnjew5c3g] {
    position: fixed;
    inset: auto 0 calc(16px + env(safe-area-inset-bottom, 0px)) 0;
    margin: 0 auto;
    z-index: 3000;
    width: max-content;
    max-width: min(560px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 10px 14px;
    border: 0;
    border-left: 4px solid var(--brand-600, #4F46E5);
    border-radius: 10px;
    background-color: var(--gray-900, #111827) !important;
    color: #F9FAFB;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: .875rem;
    line-height: 1.45;
}

#components-reconnect-modal[open][b-gcnjew5c3g] {
    animation: components-reconnect-toast-in-b-gcnjew5c3g .25s ease-out both;
}

@keyframes components-reconnect-toast-in-b-gcnjew5c3g {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

.components-reconnect-container[b-gcnjew5c3g] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.components-reconnect-text[b-gcnjew5c3g] { flex: 1 1 220px; min-width: 0; }
#components-reconnect-modal .components-reconnect-text b[b-gcnjew5c3g] { color: #fff; font-weight: 700; }
#components-reconnect-modal .components-reconnect-text span[b-gcnjew5c3g] { color: #D1D5DB; }
.components-reconnect-actions[b-gcnjew5c3g] { display: flex; gap: 8px; }
.components-reconnect-status[b-gcnjew5c3g] { display: block; font-size: .75rem; color: #9CA3AF !important; }
.components-reconnect-status:empty[b-gcnjew5c3g] { display: none; }

#components-reconnect-modal button[b-gcnjew5c3g] {
    border: 1px solid #4B5563;
    background-color: transparent;
    color: #F9FAFB;
    padding: 4px 12px;
    margin: 0 !important;
    min-width: 0;
    border-radius: 6px;
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}
#components-reconnect-modal button.primary[b-gcnjew5c3g] { background-color: var(--brand-600, #4F46E5); border-color: var(--brand-600, #4F46E5); }
#components-reconnect-modal button:hover[b-gcnjew5c3g] { filter: brightness(1.1); background-color: rgba(255, 255, 255, .1); }
#components-reconnect-modal button.primary:hover[b-gcnjew5c3g] { background-color: var(--brand-600, #4F46E5); }
/* The action buttons follow the state classes like the text does. */
#components-reconnect-modal .components-reconnect-actions button[b-gcnjew5c3g] { display: none; }
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-actions .components-reconnect-repeated-attempt-visible[b-gcnjew5c3g],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-actions .components-reconnect-failed-visible[b-gcnjew5c3g],
#components-reconnect-modal.components-reconnect-paused .components-reconnect-actions .components-pause-visible[b-gcnjew5c3g],
#components-reconnect-modal.components-reconnect-resume-failed .components-reconnect-actions .components-resume-failed-visible[b-gcnjew5c3g] {
    display: inline-block;
}

/* A small spinner instead of the big rings. */
.components-rejoining-animation[b-gcnjew5c3g] {
    width: 16px;
    height: 16px;
    flex: none;
    border: 2px solid rgba(255, 255, 255, .25);
    border-top-color: #A5B4FC;
    border-radius: 50%;
    animation: components-rejoining-spin-b-gcnjew5c3g .8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[open][b-gcnjew5c3g], .components-rejoining-animation[b-gcnjew5c3g] { animation: none; }
}
/* /Components/Marketing/CarrierLanding.razor.rz.scp.css */
/* Carrier home (issue 223, UX-3.1). Builds on marketing.css (.mk, .mk-hero, .mk-btn); everything here is scoped to this page. */

/* ---- hero: left-to-right dark overlay so white type reads on the yard photo (H1 ≥ 3:1, body ≥ 4.5:1) ---- */
.cl-hero[b-yiwm1rq3dz] { min-height: 0; }
.cl-hero[b-yiwm1rq3dz]::after {
    background:
        linear-gradient(90deg, rgba(8, 10, 22, .92) 0%, rgba(8, 10, 22, .82) 38%, rgba(8, 10, 22, .45) 72%, rgba(8, 10, 22, .30) 100%),
        linear-gradient(180deg, rgba(8, 10, 22, 0) 55%, rgba(8, 10, 22, .55) 100%);
}
.cl-eyebrow[b-yiwm1rq3dz] { color: rgba(255, 255, 255, .72); }
.cl-h1[b-yiwm1rq3dz] { max-width: 18ch; }
.cl-lead[b-yiwm1rq3dz] { color: #E5E7EB; font-weight: 400; }
/* one amber CTA, same style everywhere, no glow (UX-3.1-2) */
.cl-cta .mk-btn.primary[b-yiwm1rq3dz] { box-shadow: none; }
.cl-trust[b-yiwm1rq3dz] {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 8px 14px; border-radius: 10px;
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-size: 14px; font-weight: 500;
    text-decoration: none; line-height: 1.3;
}
.cl-trust:hover[b-yiwm1rq3dz], .cl-trust:focus-visible[b-yiwm1rq3dz] { background: rgba(255, 255, 255, .18); text-decoration: underline; }
.cl-trust .material-icons[b-yiwm1rq3dz] { font-size: 20px; color: #86efac; }

/* ---- "what you can do here" ---- */
.cl-cards[b-yiwm1rq3dz] { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 28px; }
.cl-card[b-yiwm1rq3dz] { background: var(--mk-surface); border: 1px solid var(--mk-line); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; }
.cl-card h3[b-yiwm1rq3dz] { margin-top: 4px; }
.cl-card p[b-yiwm1rq3dz] { color: var(--mk-muted); margin: 0; font-size: .95rem; line-height: 1.6; }
.cl-ic[b-yiwm1rq3dz] { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--mk-primary) 12%, transparent); color: var(--mk-primary); margin-bottom: 10px; font-size: 22px; }
.cl-track[b-yiwm1rq3dz] { border-color: color-mix(in srgb, var(--mk-primary) 40%, var(--mk-line)); }
.cl-track-form[b-yiwm1rq3dz] { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cl-track-form input[b-yiwm1rq3dz] {
    flex: 1 1 160px; min-width: 0; padding: 10px 12px; border: 1px solid var(--mk-line); border-radius: 8px; font: inherit; font-size: 1rem;
    background: var(--mk-surface); color: var(--mk-ink);
}
.cl-track-form input:focus[b-yiwm1rq3dz] { outline: 2px solid var(--mk-primary); outline-offset: 1px; border-color: var(--mk-primary); }
.cl-track-form .mk-btn[b-yiwm1rq3dz] { border: 0; cursor: pointer; padding: 10px 18px; }

/* inline links look like links (UX-3.1-6) */
.cl-link[b-yiwm1rq3dz] { color: var(--mk-primary); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.cl-link:hover[b-yiwm1rq3dz] { text-decoration-thickness: 2px; }

.cl-muted[b-yiwm1rq3dz] { color: var(--mk-muted); }
.cl-body[b-yiwm1rq3dz] { color: var(--mk-muted); font-size: 1.05rem; line-height: 1.6; max-width: 62ch; }
.cl-pre[b-yiwm1rq3dz] { white-space: pre-line; }
.cl-note[b-yiwm1rq3dz] { margin-top: 16px; font-size: .9rem; }
.cl-sr[b-yiwm1rq3dz] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.cl-two[b-yiwm1rq3dz] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }

/* ---- lanes + state map ---- */
.cl-lanes[b-yiwm1rq3dz] { list-style: none; padding: 0; margin: 18px 0 0; max-width: 420px; }
.cl-lanes li[b-yiwm1rq3dz] { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--mk-line); }
.cl-lanes li:first-child[b-yiwm1rq3dz] { border-top: 0; }
.cl-lanes li span[b-yiwm1rq3dz] { color: var(--mk-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-map[b-yiwm1rq3dz] { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; max-width: 620px; width: 100%; }
.cl-map div[b-yiwm1rq3dz] {
    aspect-ratio: 1; border-radius: 4px; display: grid; place-items: center; font-size: .75rem; font-weight: 600;   /* UX-C4: 12px floor */
    background: color-mix(in srgb, var(--mk-ink) 7%, transparent); color: var(--mk-muted);
}
.cl-map div.on[b-yiwm1rq3dz] { background: var(--mk-primary); color: #fff; }
/* issue 289: declared states the real data hasn't reached yet — a lighter shade of the same colour ("we also serve") */
.cl-map div.also[b-yiwm1rq3dz] { background: color-mix(in srgb, var(--mk-primary) 28%, transparent); color: var(--mk-ink); }
.cl-key[b-yiwm1rq3dz] { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.cl-key.also[b-yiwm1rq3dz] { background: color-mix(in srgb, var(--mk-primary) 28%, transparent); }
.cl-since[b-yiwm1rq3dz] { margin-top: 12px; color: rgba(255, 255, 255, .85); font-size: 14px; font-weight: 500; }

/* ---- tiles (equipment, safety) ---- */
.cl-tiles[b-yiwm1rq3dz] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 24px; }
.cl-tile[b-yiwm1rq3dz] { background: var(--mk-surface); border: 1px solid var(--mk-line); border-radius: 14px; padding: 18px 20px; }
.cl-tile b[b-yiwm1rq3dz] { display: block; font-family: 'Sora', 'Roboto', sans-serif; font-size: 2rem; line-height: 1.15; color: var(--mk-ink); font-variant-numeric: tabular-nums; }
.cl-tile b.cl-tile-text[b-yiwm1rq3dz] { font-size: 1.25rem; padding: 6px 0 4px; }
.cl-tile span[b-yiwm1rq3dz] { display: block; margin-top: 4px; color: var(--mk-muted); font-size: .9rem; }
.cl-tile.wide[b-yiwm1rq3dz] { grid-column: span 2; }

/* ---- recruiting ---- */
.cl-recruit[b-yiwm1rq3dz] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cl-recruit > div:first-child[b-yiwm1rq3dz] { flex: 1 1 420px; }
.cl-recruit .mk-btn.primary[b-yiwm1rq3dz] { box-shadow: none; }

/* ---- testimonials ---- */
.cl-quotes[b-yiwm1rq3dz] { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 24px; }
.cl-quote[b-yiwm1rq3dz] { margin: 0; background: var(--mk-surface); border: 1px solid var(--mk-line); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.cl-quote blockquote[b-yiwm1rq3dz] { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--mk-ink); }
.cl-quote figcaption b[b-yiwm1rq3dz] { display: block; }
.cl-quote figcaption span[b-yiwm1rq3dz] { display: block; color: var(--mk-muted); font-size: .9rem; }

@media (max-width: 860px) {
    .cl-two[b-yiwm1rq3dz] { grid-template-columns: 1fr; gap: 24px; }
    .cl-tile.wide[b-yiwm1rq3dz] { grid-column: auto; }
}

/* ---- phones (UX-3.1-8): no logo tile (the app bar carries the brand), tighter top, 2–3 line H1, stacked full-width CTAs ---- */
@media (max-width: 639.98px) {
    .cl-logo[b-yiwm1rq3dz] { display: none; }
    .cl-hero .mk-wrap[b-yiwm1rq3dz] { padding-block: 24px 32px; }
    .cl-h1[b-yiwm1rq3dz] { font-size: clamp(2rem, 8vw, 2.5rem); max-width: none; }
    .cl-cta[b-yiwm1rq3dz] { flex-direction: column; align-items: stretch; }
    .cl-cta .mk-btn[b-yiwm1rq3dz] { justify-content: center; width: 100%; }
    .cl-hero[b-yiwm1rq3dz]::after { background: linear-gradient(180deg, rgba(8, 10, 22, .78) 0%, rgba(8, 10, 22, .88) 100%); }
    .cl-trust[b-yiwm1rq3dz] { font-size: 14px; }
}
/* /Components/Marketing/CarrierQuoteForm.razor.rz.scp.css */
.qf[b-4yorx3kyrb] { background: var(--mk-surface); border: 1px solid var(--mk-line); border-radius: 14px; padding: 22px; }
.qf-errors[b-4yorx3kyrb] { color: var(--mud-palette-error); margin: 12px 0 0; padding-left: 18px; font-size: .92rem; }
/* the page's one CTA colour (amber), no glow */
.qf[b-4yorx3kyrb]  .qf-send { background: var(--mk-amber); color: #1a1200; text-transform: none; font-weight: 600; box-shadow: none; }
.qf[b-4yorx3kyrb]  .qf-send:hover { background: #e48f06; }
.qf-help[b-4yorx3kyrb] { margin: 12px 0 0; font-size: 14px; color: var(--mk-muted); }
.qf-help a[b-4yorx3kyrb] { color: var(--mk-primary); text-decoration: underline; }
.qf-fields[b-4yorx3kyrb] { border: 0; margin: 0; padding: 0; min-width: 0; }   /* issue 275: plain wrapper; disabled until the page is live */
.qf-fields:disabled[b-4yorx3kyrb] { opacity: .6; }
/* /Components/Marketing/LandingContent.razor.rz.scp.css */
/* Product home (issue 225, UX-3.3). Builds on marketing.css; scoped to this page. */

/* ---- hero: one 20px sentence, an inline check list instead of chips ---- */
.lc-hero[b-j4mgbp4fua]::after {
    background:
        linear-gradient(90deg, rgba(8, 10, 22, .85) 0%, rgba(8, 10, 22, .55) 55%, rgba(8, 10, 22, .25) 100%),
        linear-gradient(180deg, rgba(8, 10, 22, 0) 50%, rgba(8, 10, 22, .7) 100%);
}
.lc-eyebrow[b-j4mgbp4fua] { color: rgba(255, 255, 255, .75); }
.lc-lead[b-j4mgbp4fua] { font-size: 20px; line-height: 1.5; color: #E5E7EB; max-width: 46ch; margin: 18px 0 0; }
.lc-checks[b-j4mgbp4fua] { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 22px 0 0; font-size: 15px; color: #fff; }
.lc-checks li[b-j4mgbp4fua] { display: inline-flex; align-items: center; gap: 6px; }
.lc-checks li[b-j4mgbp4fua]::before { content: "✓"; color: #86efac; font-weight: 700; }

/* ---- six steps as 3 × 2 (never six squeezed in a row) ---- */
.lc-steps[b-j4mgbp4fua] { grid-template-columns: repeat(auto-fit, minmax(max(260px, calc((100% - 28px) / 3)), 1fr)); gap: 22px 14px; margin-top: 30px; }
.lc-steps .mk-step span[b-j4mgbp4fua] { font-size: .95rem; }

/* ---- features: more room for the screenshot ---- */
.lc-feature[b-j4mgbp4fua] { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.lc-feature.flip[b-j4mgbp4fua] { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.lc-callouts[b-j4mgbp4fua] { counter-reset: callout; list-style: none; padding: 0; margin: 16px 0 0; }
.lc-callouts li[b-j4mgbp4fua] { counter-increment: callout; position: relative; padding: 6px 0 6px 40px; color: var(--mk-ink); line-height: 1.5; }
.lc-callouts li[b-j4mgbp4fua]::before {
    content: counter(callout); position: absolute; left: 0; top: 4px; width: 28px; height: 28px; border-radius: 50%;
    background: var(--mk-primary); color: #fff; font-weight: 700; font-size: 14px; display: grid; place-items: center;
}
.lc-more[b-j4mgbp4fua] { color: var(--mk-muted); font-size: .95rem; margin: 14px 0 0; }

/* ---- AI: a before / after built in HTML instead of a stock photo ---- */
.lc-ai-grid[b-j4mgbp4fua] { align-items: center; }
.lc-ai[b-j4mgbp4fua] { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.lc-ai figcaption[b-j4mgbp4fua] { grid-column: 1 / -1; text-align: center; color: var(--mk-muted); font-size: 13px; }
.lc-doc[b-j4mgbp4fua], .lc-draft[b-j4mgbp4fua] { border-radius: 12px; border: 1px solid var(--mk-line); background: var(--mk-surface); padding: 14px; font-size: 13px; box-shadow: 0 10px 30px rgba(17, 24, 39, .08); }
.lc-doc[b-j4mgbp4fua] { background: color-mix(in srgb, var(--mk-surface) 92%, #f5ecd7); }
.lc-doc-head[b-j4mgbp4fua], .lc-draft-head[b-j4mgbp4fua] { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 10px; color: var(--mk-ink); }
.lc-doc-head > span:first-child[b-j4mgbp4fua] { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.lc-tag[b-j4mgbp4fua] { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--mk-ink) 10%, transparent); color: var(--mk-ink); white-space: nowrap; }
.lc-tag.amber[b-j4mgbp4fua] { background: #FEF3C7; color: #78350F; }
.lc-doc dl[b-j4mgbp4fua] { margin: 0; }
.lc-doc dl > div[b-j4mgbp4fua] { display: grid; grid-template-columns: 72px 1fr; gap: 6px; padding: 3px 0; }
.lc-doc dt[b-j4mgbp4fua] { color: var(--mk-muted); }
.lc-doc dd[b-j4mgbp4fua] { margin: 0; color: var(--mk-ink); }
.lc-doc mark[b-j4mgbp4fua] { background: color-mix(in srgb, var(--mk-primary) 16%, transparent); color: inherit; padding: 0 3px; border-radius: 3px; }
.lc-lines[b-j4mgbp4fua] { margin-top: 10px; display: grid; gap: 5px; }
.lc-lines i[b-j4mgbp4fua] { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--mk-ink) 10%, transparent); }
.lc-lines i:nth-child(2)[b-j4mgbp4fua] { width: 82%; } .lc-lines i:nth-child(3)[b-j4mgbp4fua] { width: 64%; }
.lc-arrow[b-j4mgbp4fua] { display: grid; justify-items: center; color: var(--mk-primary); }
.lc-arrow .material-icons[b-j4mgbp4fua] { font-size: 32px; }
.lc-arrow small[b-j4mgbp4fua] { color: var(--mk-muted); font-size: 12px; white-space: nowrap; }
.lc-stops[b-j4mgbp4fua] { list-style: none; padding: 0; margin: 0 0 8px; }
.lc-stops li[b-j4mgbp4fua] { padding: 3px 0; color: var(--mk-ink); }
.lc-stops b[b-j4mgbp4fua] { display: inline-block; min-width: 38px; color: var(--mk-primary); }
.lc-stops small[b-j4mgbp4fua] { color: var(--mk-muted); margin-left: 4px; }
.lc-row[b-j4mgbp4fua] { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--mk-line); }
.lc-row span[b-j4mgbp4fua] { color: var(--mk-muted); }
.lc-row b[b-j4mgbp4fua] { text-align: right; font-weight: 600; color: var(--mk-ink); }
.lc-ok[b-j4mgbp4fua] { display: block; font-weight: 500; font-size: 12px; color: #15803d; }
.lc-save[b-j4mgbp4fua] { margin-top: 10px; text-align: center; background: var(--mk-primary); color: #fff; border-radius: 8px; padding: 7px; font-weight: 600; }

/* ---- pricing: tighter bottom, secondary compare button ---- */
.lc-pricing[b-j4mgbp4fua] { padding-bottom: 56px; }
.lc-compare[b-j4mgbp4fua] { margin-top: 24px; }

@media (max-width: 860px) {
    .lc-feature[b-j4mgbp4fua], .lc-feature.flip[b-j4mgbp4fua] { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .lc-ai[b-j4mgbp4fua] { grid-template-columns: 1fr; }
    .lc-arrow .material-icons[b-j4mgbp4fua] { transform: rotate(90deg); }
    .lc-lead[b-j4mgbp4fua] { font-size: 18px; }
}
/* /Components/Marketing/MarketingFooter.razor.rz.scp.css */
/* Footer pieces (issue 223 / 225). Base layout (.mk-footer, .cols, link blocks) is in marketing.css. */
.mf-name[b-rj48j5s9ey] { font-weight: 700; color: var(--mk-ink); font-size: 1.1rem; }
.mf-mark[b-rj48j5s9ey] { display: flex; align-items: center; gap: 8px; }
.mf-mark img[b-rj48j5s9ey] { height: 24px; width: 24px; border-radius: 6px; }
.mf-p[b-rj48j5s9ey] { margin: 6px 0 0; color: var(--mk-muted); }
.mf-h[b-rj48j5s9ey] { display: block; color: var(--mk-ink); margin-bottom: 4px; }
.mf-line[b-rj48j5s9ey] { display: block; padding: 2px 0; }
.mf-cols[b-rj48j5s9ey] { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* legal links on one line, separators drawn by CSS so none is ever left alone on a line (UX-3.1-7) */
.mf-inline[b-rj48j5s9ey] { display: flex; flex-wrap: wrap; column-gap: 6px; row-gap: 2px; }
.mf-inline a[b-rj48j5s9ey] { display: inline; }
.mf-inline a + a[b-rj48j5s9ey]::before { content: "·"; margin-right: 6px; color: var(--mk-muted); }
.mf-bottom[b-rj48j5s9ey] { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; color: var(--mk-muted); }
.mf-bottom .mf-credit[b-rj48j5s9ey] { display: inline; padding: 0; text-decoration: underline; }
/* /Components/Marketing/Shot.razor.rz.scp.css */
/* Screenshot crop, callouts and zoom (issue 225, UX-3.3-4). The frame itself (.mk-shot, .bar) is in marketing.css. */
.shot-zoom[b-9feaoi33m7] { position: relative; display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.shot-zoom:focus-visible[b-9feaoi33m7] { outline: 3px solid var(--mk-primary); outline-offset: -3px; }
.shot-crop[b-9feaoi33m7] { position: relative; display: block; width: 100%; overflow: hidden; }
.shot-crop img[b-9feaoi33m7] { position: absolute; max-width: none; height: auto; display: block; }
.shot-pin[b-9feaoi33m7] {
    position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--mk-primary); color: #fff; font: 700 15px/1 'Roboto', sans-serif; box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0, 0, 0, .25);
}
.shot-hint[b-9feaoi33m7] {
    position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px; border-radius: 999px;
    background: rgba(17, 24, 39, .78); color: #fff; font-size: 13px; opacity: 0; transition: opacity .15s ease;
}
.shot-hint .material-icons[b-9feaoi33m7] { font-size: 18px; }
.shot-zoom:hover .shot-hint[b-9feaoi33m7], .shot-zoom:focus-visible .shot-hint[b-9feaoi33m7] { opacity: 1; }
@media (hover: none) { .shot-hint[b-9feaoi33m7] { opacity: 1; } }

.shot-dialog[b-9feaoi33m7] { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1600px); max-height: 96vh; cursor: zoom-out; overflow: visible; }
.shot-dialog[b-9feaoi33m7]::backdrop { background: rgba(8, 10, 22, .82); }
.shot-dialog img[b-9feaoi33m7] { display: block; max-width: min(96vw, 1600px); max-height: calc(96vh - 32px); width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); background: #fff; }
.shot-close[b-9feaoi33m7] { display: block; text-align: center; color: #E5E7EB; font-size: 13px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .shot-hint[b-9feaoi33m7] { transition: none; } }
/* /Components/Pages/Admin/AccessMonitor.razor.rz.scp.css */
/* UX-3.15 Access Monitor — component-scoped. */
.am-sub[b-8klboz0r3b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-bottom: 4px;
}
.am-disclosure[b-8klboz0r3b] {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .85rem;
    color: var(--mud-palette-primary);
    border-radius: 4px;
    padding: 2px 4px;
}
.am-disclosure:hover[b-8klboz0r3b] { text-decoration: underline; }
.am-disclosure:focus-visible[b-8klboz0r3b] { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.am-recorded[b-8klboz0r3b] {
    font-size: .85rem;
    color: var(--mud-palette-text-secondary);
    border-left: 3px solid var(--mud-palette-info);
    padding: 6px 12px;
    margin: 4px 0 8px;
    background: var(--mud-palette-background-gray);
    border-radius: 0 6px 6px 0;
}
.am-recorded ul[b-8klboz0r3b] { margin: 0 0 4px; padding-left: 18px; }

.am-filters[b-8klboz0r3b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 12px 0;
}
.am-filters[b-8klboz0r3b]  .am-search { flex: 1 1 220px; }
.am-filters[b-8klboz0r3b]  .am-company { min-width: 240px; max-width: 320px; }
.am-filters[b-8klboz0r3b]  .am-window { width: 140px; }
.am-filters[b-8klboz0r3b]  .am-type { width: 200px; }

.am-tag[b-8klboz0r3b] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    font-size: .75rem;   /* UX-C4: 12px floor */
    line-height: 1.5;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

@media (max-width: 760px) {
    .am-filters[b-8klboz0r3b]  .am-company,
    .am-filters[b-8klboz0r3b]  .am-search { flex: 1 1 100%; max-width: none; }
    .am-filters[b-8klboz0r3b]  .am-window,
    .am-filters[b-8klboz0r3b]  .am-type { flex: 1 1 40%; width: auto; }
}
/* /Components/Pages/Admin/Settings.razor.rz.scp.css */
/* UX-3.13 Settings → Carrier profile. Component-scoped; MudBlazor children are reached with ::deep. */

/* #4 tabs: 14px sentence case, muted grey (theme-aware so dark mode stays readable), 2px primary underline on the active tab */
.settings-tabs[b-6t6u1hkl24]  .mud-tab {
    text-transform: none;
    font-size: 14px;
    letter-spacing: normal;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}
.settings-tabs[b-6t6u1hkl24]  .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);
}
.settings-tabs[b-6t6u1hkl24]  .mud-tab-slider {
    height: 2px !important;
    background-color: var(--mud-palette-primary);
}

/* #1 layout: sticky section nav + content */
.cp-layout[b-6t6u1hkl24] {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
}
.cp-nav[b-6t6u1hkl24] {
    position: sticky;
    top: 72px;               /* below the app bar */
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cp-nav-item[b-6t6u1hkl24] {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 2px solid transparent;
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
}
.cp-nav-item:hover[b-6t6u1hkl24] { background: var(--mud-palette-action-default-hover); }
.cp-nav-item:focus-visible[b-6t6u1hkl24] { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.cp-nav-active[b-6t6u1hkl24] {
    color: var(--mud-palette-primary);
    border-left-color: var(--mud-palette-primary);
    font-weight: 600;
}
.cp-body[b-6t6u1hkl24] { min-width: 0; }

.cp-section[b-6t6u1hkl24] {
    scroll-margin-top: 80px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.cp-heading[b-6t6u1hkl24] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 12px;
}
.cp-intro[b-6t6u1hkl24] {
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
    margin: -4px 0 12px;
}

/* #3 strict three-column grid */
.cp-grid[b-6t6u1hkl24] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: start;
}
.cp-grid[b-6t6u1hkl24]  .cp-span-2 { grid-column: span 2; }
.cp-grid[b-6t6u1hkl24]  .cp-span-3 { grid-column: 1 / -1; }

.cp-row-label[b-6t6u1hkl24] {
    font-size: .875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}
.cp-muted[b-6t6u1hkl24] { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.cp-tag[b-6t6u1hkl24] {
    display: inline-block;
    font-size: .75rem;   /* UX-C4: 12px floor */
    font-weight: 500;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

/* read-only FMCSA status row */
.cp-fmcsa[b-6t6u1hkl24] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: 12px 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--mud-palette-lines-default);
}
.cp-fmcsa-status[b-6t6u1hkl24] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cp-status[b-6t6u1hkl24] { font-size: .85rem; display: inline-flex; align-items: center; gap: 6px; }
.cp-status[b-6t6u1hkl24]::before {
    content: "";
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--mud-palette-text-disabled);
}
.cp-status-good[b-6t6u1hkl24]::before { background: var(--mud-palette-success); }
.cp-status-warn[b-6t6u1hkl24]::before { background: var(--mud-palette-warning); }
.cp-status-bad[b-6t6u1hkl24]::before { background: var(--mud-palette-error); }

/* #2 the one free-mail helper under the e-mail */
.cp-helper[b-6t6u1hkl24] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 4px 8px 12px;
    border-radius: 6px;
    font-size: .85rem;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
}
.cp-helper span[b-6t6u1hkl24] { flex: 1 1 auto; padding-top: 2px; }

/* 240: SendGrid domain — label, field, button on one row; result lines right under */
.cp-domain[b-6t6u1hkl24] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 16px;
    margin-top: 16px;
}
.cp-domain[b-6t6u1hkl24]  .cp-domain-field { margin: 0; }
.cp-domain-result[b-6t6u1hkl24] { margin-top: 4px; }

/* #1 sticky save bar, only while dirty */
.cp-savebar[b-6t6u1hkl24] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 10px 16px;
    margin: 0 -8px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
}
.cp-savebar span[b-6t6u1hkl24] { margin-right: auto; font-size: .9rem; }

@media (max-width: 900px) {
    .cp-layout[b-6t6u1hkl24] { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 12px; }
    .cp-nav[b-6t6u1hkl24] {
        top: 56px;
        z-index: 4;
        flex-direction: row;
        overflow-x: auto;
        background: var(--mud-palette-surface);
        padding: 4px 0;
    }
    .cp-nav-item[b-6t6u1hkl24] { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; border-radius: 0; }
    .cp-nav-active[b-6t6u1hkl24] { border-bottom-color: var(--mud-palette-primary); }
    .cp-grid[b-6t6u1hkl24] { grid-template-columns: minmax(0, 1fr); }
    .cp-grid[b-6t6u1hkl24]  .cp-span-2 { grid-column: auto; }
    .cp-fmcsa[b-6t6u1hkl24], .cp-domain[b-6t6u1hkl24] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* UX-3.5: neutral stat tiles (colour only for state), 32px numerals, whole tile clickable. */
.dash-tiles[b-3oxiun70lh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}
.dash-tile[b-3oxiun70lh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    text-align: left;
    font: inherit;
    min-width: 0;
}
a.dash-tile[b-3oxiun70lh], button.dash-tile[b-3oxiun70lh] { cursor: pointer; }
a.dash-tile:hover[b-3oxiun70lh], button.dash-tile:hover[b-3oxiun70lh] { border-color: var(--mud-palette-primary); }
a.dash-tile:focus-visible[b-3oxiun70lh], button.dash-tile:focus-visible[b-3oxiun70lh] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.dash-tile-num[b-3oxiun70lh] { font-size: 32px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-tile-label[b-3oxiun70lh] { font-size: 14px; font-weight: 600; }
.dash-tile-sub[b-3oxiun70lh] { font-size: 13px; color: var(--mud-palette-text-secondary); }

.dash-quiet[b-3oxiun70lh] { font-size: 14px; color: var(--mud-palette-text-secondary); border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius, 4px); background: var(--mud-palette-surface); }

/* Past issues: one line per load, money/day counts right-aligned. */
.dash-table th[b-3oxiun70lh], .dash-table td[b-3oxiun70lh] { white-space: nowrap; font-size: 14px; }
.dash-table td.ellipsis[b-3oxiun70lh] { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.dash-table .num[b-3oxiun70lh] { text-align: right; font-variant-numeric: tabular-nums; }
/* /Components/Pages/Fleet/AllLoads.razor.rz.scp.css */
/* Issue 229: the compact Loads table. Row height, nowrap headers and .money come from the shared .dense-table (wwwroot/css/density.css);
   here only the page's own columns: ids/dates never wrap, long names one line with an ellipsis, the total bold. */
.loads-table-wrap[b-lnt3qmarln]  .lt-nowrap { white-space: nowrap; }
.loads-table-wrap[b-lnt3qmarln]  .lt-money { font-weight: 700; }
.loads-table-wrap[b-lnt3qmarln]  .lt-ellipsis { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* /Components/Pages/Fleet/DatSearch.razor.rz.scp.css */
/* Issue 236 (UX-3.14). Component-scoped; app.css keeps the base .lane-tab look. */

/* 1. ~340px filter column, results take the rest; one column under 960px */
.fl-layout[b-zqajh7q2g3] { display: grid; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.fl-filters[b-zqajh7q2g3], .fl-results[b-zqajh7q2g3] { min-width: 0; }
@media (max-width: 959.95px) {
    .fl-layout[b-zqajh7q2g3] { grid-template-columns: minmax(0, 1fr); }
}

/* 2. the lane-tab strip wraps (at most MaxVisibleTabs tabs, so two lines) instead of scrolling sideways; narrower tabs */
.lane-tabs.fl-tabs[b-zqajh7q2g3] { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
.fl-tabs .lane-tab[b-zqajh7q2g3] { min-width: 150px; max-width: 220px; }

/* 3. the empty results area: an action, not a paragraph */
.fl-empty[b-zqajh7q2g3] { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px; text-align: center; }

/* 4/6. neutral connection chips with a status dot */
.fl-conn[b-zqajh7q2g3] {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 12px;
    font-size: .8125rem; color: var(--mud-palette-text-primary); white-space: nowrap;
}
.fl-dot[b-zqajh7q2g3] { width: 8px; height: 8px; border-radius: 50%; background: var(--mud-palette-text-disabled); flex: none; }
.fl-dot-ok[b-zqajh7q2g3] { background: var(--mud-palette-success); }
.fl-dot-warn[b-zqajh7q2g3] { background: var(--mud-palette-warning); }

/* Issue 250 (b): phones show MaxPhoneTabs lane tabs and their own "+N more"; wider screens keep MaxVisibleTabs */
.fl-more-narrow[b-zqajh7q2g3] { display: none; }
@media (max-width: 599.98px) {
    .fl-tabs .lane-tab.fl-tab-wide[b-zqajh7q2g3], .fl-more-wide[b-zqajh7q2g3] { display: none; }
    .fl-more-narrow[b-zqajh7q2g3] { display: inline-flex; }
}
/* /Components/Pages/Fleet/Loads.razor.rz.scp.css */
/* UX-3.6-2: one toolbar — title, search, "New load ▾" on one row (wraps only on phones). */
.lb-toolbar[b-tptjfv7lia] {
    display: flex;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
}
.lb-toolbar[b-tptjfv7lia]  .lb-title { flex: 1 1 auto; white-space: nowrap; }
.lb-search[b-tptjfv7lia] { flex: 0 1 320px; min-width: 200px; }
.lb-toolbar[b-tptjfv7lia]  .lb-new { flex: 0 0 auto; }

/* UX-3.6-4: the trailer drawer sits beside the board and pushes it (no overlap, nothing clipped). */
.lb-layout[b-tptjfv7lia] { display: flex; align-items: flex-start; gap: 16px; }
.lb-main[b-tptjfv7lia] { flex: 1 1 auto; min-width: 0; }
.lb-rail[b-tptjfv7lia] {
    flex: 0 0 280px;
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-surface);
}
.lb-scrim[b-tptjfv7lia] { display: none; }
.lb-trailer[b-tptjfv7lia] {
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius, 4px);
}

/* Narrow screens: the drawer overlays from the right with a scrim (tap outside to close). */
@media (max-width: 959.98px) {
    .lb-rail[b-tptjfv7lia] {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 85vw);
        max-height: none;
        z-index: 1300;
        border-radius: 0;
        box-shadow: var(--mud-elevation-8);
    }
    .lb-scrim[b-tptjfv7lia] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1299;
        background: rgba(0, 0, 0, .32);
    }
}

/* UX-3.6-5: end-of-list line (the empty board uses the shared EmptyState). */
.lb-end[b-tptjfv7lia] {
    padding: 12px 0;
    text-align: center;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    border-top: 1px solid var(--mud-palette-lines-default);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* UX-3.4: the "Today" home. */
.home-head[b-sy9hi0kr3y] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.home-card[b-sy9hi0kr3y] {
    height: 100%;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-surface);
}
.home-card-title[b-sy9hi0kr3y] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
}
.home-row[b-sy9hi0kr3y] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 4px 4px;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    font-size: 14px;
}
.home-row:hover[b-sy9hi0kr3y] { background: var(--mud-palette-action-default-hover); }
.home-row:focus-visible[b-sy9hi0kr3y] { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.home-row-label[b-sy9hi0kr3y] { flex: 1 1 auto; min-width: 0; }
.home-row-value[b-sy9hi0kr3y] { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-row-value.tone-bad[b-sy9hi0kr3y] { color: var(--mud-palette-error); }
.home-row-value.tone-warn[b-sy9hi0kr3y] { color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); }
.home-clear[b-sy9hi0kr3y] { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mud-palette-text-secondary); padding: 8px 0; }
.home-note[b-sy9hi0kr3y] { font-size: 13px; color: var(--mud-palette-text-secondary); margin-top: 8px; }

/* Compact launcher below the day: grouped, 64px tiles, the whole tile is the link. */
.home-group[b-sy9hi0kr3y] {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}
.home-tiles[b-sy9hi0kr3y] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.home-tile[b-sy9hi0kr3y] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px;
    padding: 0 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.home-tile:hover[b-sy9hi0kr3y] { border-color: var(--mud-palette-primary); }
.home-tile:focus-visible[b-sy9hi0kr3y] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
/* /Components/Pages/Money/Invoices.razor.rz.scp.css */
/* Issue 230 (UX-3.8): 44px rows, nowrap headers and .money come from the shared .dense-table (wwwroot/css/density.css); here the
   page's own column min-widths, ellipsis cells and the paper icons. Component-scoped (no app.css edits). */
.inv-money[b-3kitxfrmgt] { font-variant-numeric: tabular-nums; }

.inv-grid[b-3kitxfrmgt]  .inv-col-number { white-space: nowrap; min-width: 104px; }
.inv-grid[b-3kitxfrmgt]  .inv-col-load { min-width: 150px; max-width: 260px; }
.inv-grid[b-3kitxfrmgt]  .inv-col-status { white-space: nowrap; min-width: 96px; }
.inv-grid[b-3kitxfrmgt]  .inv-col-date { white-space: nowrap; min-width: 96px; font-variant-numeric: tabular-nums; }
.inv-grid[b-3kitxfrmgt]  .inv-col-money { white-space: nowrap; min-width: 100px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.inv-nowrap[b-3kitxfrmgt] { white-space: nowrap; }
.inv-ellipsis[b-3kitxfrmgt] { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-lane[b-3kitxfrmgt] { font-size: .8125rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.inv-sub[b-3kitxfrmgt] { font-size: .75rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }

/* papers: neutral icon + label, a small red dot only when that paper is missing */
.inv-paper[b-3kitxfrmgt] { position: relative; display: inline-flex; align-items: center; gap: 2px; margin-right: 12px; color: var(--mud-palette-text-secondary); }
.inv-dot[b-3kitxfrmgt] { position: absolute; top: 0; right: -8px; width: 7px; height: 7px; border-radius: 50%; background: var(--mud-palette-error); }
.inv-vh[b-3kitxfrmgt] { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* /Components/Pages/Reports.razor.rz.scp.css */
/* UX-3.12-1: one aligned filter grid — every field the same width and baseline, Run report on the same row. */
.report-filter-grid[b-rs23fdpyu5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
}

.report-run[b-rs23fdpyu5] {
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
}