/* All visual values come from the token pipeline (tokens.css). No hardcoded colours,
   spacing, radii, or type values — CI enforces this (contract 11). */

body {
    margin: 0;
    font-family: var(--lm-font-family-base);
    font-size: var(--lm-font-size-md);
    color: var(--lm-color-text-primary);
    background: var(--lm-color-surface-sunken);
}

h1:focus {
    outline: none;
}

/* App bar */
.lm-appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--lm-color-surface-inverse);
    color: var(--lm-color-text-inverse);
    padding: var(--lm-space-3) var(--lm-space-6);
    box-shadow: var(--lm-shadow-md);
}

.lm-brand {
    display: flex;
    align-items: center;
    gap: var(--lm-space-2);
    font-size: var(--lm-font-size-lg);
    font-weight: var(--lm-font-weight-bold);
}

.lm-appbar nav {
    display: flex;
    gap: var(--lm-space-4);
}

.lm-appbar nav a {
    color: var(--lm-color-navy-100);
    text-decoration: none;
    font-weight: var(--lm-font-weight-medium);
}

.lm-appbar nav a:hover {
    color: var(--lm-color-action-accent);
}

/* Console rail (adoption S10): fixed left shell, manifest-rendered. The rail owns the
   left edge; signed-in mains offset via the sibling selector. Collapses to icon-only
   below the wide breakpoint so workspaces keep their pixels. */
.lm-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 14rem;
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-4);
    background: var(--lm-color-surface-inverse);
    color: var(--lm-color-text-inverse);
    padding: var(--lm-space-4) var(--lm-space-3);
    box-sizing: border-box;
    overflow-y: auto;
    box-shadow: var(--lm-shadow-md);
}

.lm-rail-brand {
    padding: var(--lm-space-1) var(--lm-space-2);
}

.lm-rail-nav {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-4);
    flex: 1;
}

.lm-rail-group {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-05);
}

.lm-rail-group-label {
    font-size: var(--lm-font-size-xs);
    font-weight: var(--lm-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--lm-font-letterSpacing-wide);
    color: var(--lm-color-navy-300);
    padding: var(--lm-space-1) var(--lm-space-2);
}

.lm-rail-item {
    display: flex;
    align-items: center;
    gap: var(--lm-space-2);
    padding: var(--lm-space-2);
    border-radius: var(--lm-radius-md);
    color: var(--lm-color-navy-100);
    text-decoration: none;
    font-weight: var(--lm-font-weight-medium);
    font-size: var(--lm-font-size-sm);
}

.lm-rail-item:hover {
    background: var(--lm-color-navy-700);
    color: var(--lm-color-text-inverse);
}

.lm-rail-item.lm-rail-active {
    background: var(--lm-color-navy-600);
    color: var(--lm-color-text-inverse);
}

.lm-rail-user {
    border-top: 1px solid var(--lm-color-navy-700);
    padding-top: var(--lm-space-2);
}

.lm-rail ~ .lm-main {
    margin-left: 14rem;
}

@media (max-width: 64rem) {
    .lm-rail {
        width: 4rem;
        padding: var(--lm-space-4) var(--lm-space-2);
        align-items: center;
    }

    .lm-rail-brand span,
    .lm-rail-item-label,
    .lm-rail-group-label {
        display: none;
    }

    .lm-rail ~ .lm-main {
        margin-left: 4rem;
    }
}

.lm-rail-search {
    background: var(--lm-color-navy-800);
    border: 1px solid var(--lm-color-navy-700);
    cursor: pointer;
    width: 100%;
    font-family: inherit;
}

.lm-rail-kbd {
    margin-left: auto;
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-navy-300);
    border: 1px solid var(--lm-color-navy-600);
    border-radius: var(--lm-radius-sm);
    padding: 0 var(--lm-space-1);
    font-family: inherit;
}

@media (max-width: 64rem) {
    .lm-rail-kbd {
        display: none;
    }
}

/* Command palette (adoption S12): Ctrl+K, navigate-only v1 */
.lm-palette-backdrop {
    position: fixed;
    inset: 0;
    background: var(--lm-color-surface-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--lm-space-16);
    z-index: 100;
}

.lm-palette {
    width: min(34rem, 90vw);
    background: var(--lm-color-surface-raised);
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-lg);
    overflow: hidden;
}

.lm-palette-inputrow {
    display: flex;
    align-items: center;
    gap: var(--lm-space-2);
    padding: var(--lm-space-3) var(--lm-space-4);
    border-bottom: 1px solid var(--lm-color-border-default);
    color: var(--lm-color-text-secondary);
}

.lm-palette-inputrow input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--lm-font-size-md);
    font-family: inherit;
    color: var(--lm-color-text-primary);
    background: transparent;
}

.lm-palette-inputrow kbd {
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-text-faint);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-sm);
    padding: 0 var(--lm-space-1);
    font-family: inherit;
}

.lm-palette-results {
    list-style: none;
    margin: 0;
    padding: var(--lm-space-2);
    max-height: 40vh;
    overflow-y: auto;
}

.lm-palette-results li {
    display: flex;
    align-items: center;
    gap: var(--lm-space-2);
    padding: var(--lm-space-2) var(--lm-space-3);
    border-radius: var(--lm-radius-md);
    cursor: pointer;
    color: var(--lm-color-text-primary);
}

.lm-palette-results li.lm-palette-selected {
    background: var(--lm-color-navy-50);
}

.lm-palette-group {
    margin-left: auto;
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-text-faint);
    text-transform: uppercase;
}

.lm-palette-empty {
    color: var(--lm-color-text-secondary);
    cursor: default;
}

/* Field shell (adoption S11): sticky one-hand header for driver surfaces; no rail. */
.lm-field-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--lm-color-surface-inverse);
    color: var(--lm-color-text-inverse);
    padding: var(--lm-space-3) var(--lm-space-4);
    box-shadow: var(--lm-shadow-md);
    z-index: 50;
}

.lm-field-header-right {
    display: flex;
    align-items: center;
    gap: var(--lm-space-3);
}

.lm-field-header-link {
    color: var(--lm-color-navy-100);
    display: inline-flex;
    padding: var(--lm-space-2);
}

.lm-field-header-link:hover {
    color: var(--lm-color-text-inverse);
}

.lm-field-main {
    max-width: 48rem;
}

/* Public shell (adoption S11): brand header + footer for anonymous surfaces. */
.lm-public {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.lm-public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--lm-color-surface-inverse);
    color: var(--lm-color-text-inverse);
    padding: var(--lm-space-3) var(--lm-space-6);
}

.lm-public-poweredby {
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-navy-200);
}

.lm-public-main {
    flex: 1;
    max-width: 42rem;
}

.lm-public-footer {
    /* text-secondary, not text-faint: faint (#94a3b8) on the near-white shell is 2.45:1, far below WCAG
       AA 4.5:1; text-secondary (#64748b) is 4.63:1, so the anonymous footer stays legible (a11y, tick 366). */
    color: var(--lm-color-text-secondary);
    font-size: var(--lm-font-size-xs);
    padding: var(--lm-space-4) var(--lm-space-6);
    border-top: 1px solid var(--lm-color-border-default);
}

/* AppNav organism: grouped primary navigation */
.lm-brand {
    color: inherit;
    text-decoration: none;
}

.lm-nav {
    display: flex;
    gap: var(--lm-space-8);
    flex: 1;
    margin: 0 var(--lm-space-8);
}

.lm-nav-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lm-nav-group-label {
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-navy-300);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.lm-nav-items {
    display: flex;
    gap: var(--lm-space-3);
}

.lm-nav-items a {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    padding: var(--lm-space-1) var(--lm-space-2);
    border-radius: var(--lm-radius-sm);
}

.lm-nav-items a.lm-nav-active {
    background: var(--lm-color-navy-500);
    color: var(--lm-color-neutral-white);
}

.lm-nav-user a {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
}

/* Main content */
.lm-main {
    padding: var(--lm-space-8);
    max-width: 72rem;
    margin: 0 auto;
}

.lm-subtitle {
    color: var(--lm-color-text-secondary);
}

.lm-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--lm-space-4);
    margin-top: var(--lm-space-6);
}

.lm-card {
    background: var(--lm-color-surface-primary);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-lg);
    padding: var(--lm-space-6);
    box-shadow: var(--lm-shadow-sm);
    transition: box-shadow var(--lm-motion-duration-base) var(--lm-motion-easing-standard);
}

.lm-card:hover {
    box-shadow: var(--lm-shadow-md);
}

.lm-card h2 {
    font-size: var(--lm-font-size-lg);
    margin: var(--lm-space-2) 0;
}

.lm-release-notes {
    background: var(--lm-color-surface-primary);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-md);
    padding: var(--lm-space-6);
    overflow-x: auto;
}

.lm-release-notes pre {
    font-family: var(--lm-font-family-mono);
    font-size: var(--lm-font-size-sm);
    white-space: pre-wrap;
}

/* Universal focus ring (adoption S6): every interactive element, one visible language.
   WCAG 2.4.7/2.4.11; the ring token pairs with action.focusRing in both themes. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--lm-shadow-focus);
    border-radius: var(--lm-radius-sm);
}

/* Button variant set (inspo 04-components LmButton; adoption S6).
   primary/secondary unchanged visually; accent is the "act here" button (never white on amber). */
.lm-btn-primary,
.lm-btn-secondary,
.lm-btn-accent,
.lm-btn-ghost,
.lm-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    border-radius: var(--lm-radius-md);
    padding: var(--lm-space-2) var(--lm-space-4);
    font-weight: var(--lm-font-weight-medium);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--lm-motion-duration-instant) var(--lm-motion-easing-standard);
}

.lm-btn-primary {
    background: var(--lm-color-action-primary);
    color: var(--lm-color-text-inverse);
}

.lm-btn-primary:hover:not(:disabled) {
    background: var(--lm-color-action-primaryHover);
}

.lm-btn-secondary {
    background: var(--lm-color-surface-primary);
    color: var(--lm-color-text-primary);
    border-color: var(--lm-color-border-default);
}

.lm-btn-secondary:hover:not(:disabled) {
    border-color: var(--lm-color-border-strong);
    background: var(--lm-color-surface-sunken);
}

.lm-btn-accent {
    background: var(--lm-color-action-accent);
    color: var(--lm-color-action-accentText);
}

.lm-btn-accent:hover:not(:disabled) {
    background: var(--lm-color-action-accentHover);
}

.lm-btn-ghost {
    background: transparent;
    color: var(--lm-color-text-primary);
}

.lm-btn-ghost:hover:not(:disabled) {
    background: var(--lm-color-surface-sunken);
}

.lm-btn-danger {
    background: var(--lm-color-action-danger);
    color: var(--lm-color-text-inverse);
}

.lm-btn-primary:disabled,
.lm-btn-secondary:disabled,
.lm-btn-accent:disabled,
.lm-btn-ghost:disabled,
.lm-btn-danger:disabled {
    background: var(--lm-color-neutral-200);
    color: var(--lm-color-text-secondary);
    border-color: transparent;
    cursor: not-allowed;
}

/* Molecules (adoption S7: Storybook-first; pages consume in Phase 3) */
.lm-route-health {
    display: flex;
    height: var(--lm-space-2);
    border-radius: var(--lm-radius-full);
    overflow: hidden;
    background: var(--lm-color-neutral-200);
}

.lm-route-health__done { background: var(--lm-signal-stop-completed); }
.lm-route-health__failed { background: var(--lm-signal-stop-failed); }

.lm-kpi-tile {
    background: var(--lm-color-surface-raised);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-lg);
    padding: var(--lm-space-4);
    box-shadow: var(--lm-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-1);
    min-width: 11rem;
}

.lm-kpi-tile__label {
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--lm-font-letterSpacing-wide);
    font-weight: var(--lm-font-weight-medium);
}

.lm-kpi-tile__value {
    font-size: var(--lm-font-size-3xl);
    line-height: var(--lm-font-lineHeight-tight);
    font-weight: var(--lm-font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.lm-kpi-tile__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-05);
    font-size: var(--lm-font-size-xs);
    font-weight: var(--lm-font-weight-semibold);
    border-radius: var(--lm-radius-full);
    padding: 0 var(--lm-space-2);
    width: fit-content;
}

/* The delta badges use the STATUS token pairs, not the raw diverging-viz palette: the status subtle+text
   pairs are AA-tuned as a pair AND carry dark-theme overrides, where the viz tokens have neither, so the
   worse badge cleared only 3.4:1 (b91c1c on fca5a5) against the 4.5:1 AA floor (found tick 861, fixed 862). */
.lm-kpi-tile__delta--better { color: var(--lm-color-status-successText); background: var(--lm-color-status-successSubtle); }
.lm-kpi-tile__delta--worse { color: var(--lm-color-status-dangerText); background: var(--lm-color-status-dangerSubtle); }
/* text-secondary, not text-faint: the KPI tile is a dark card (surface-raised = #14243a in the dark token
   set), where dark text-faint (#5d7290) is only 3.18:1 — below WCAG AA 4.5:1. text-secondary is #aebccf in
   the dark set (~7:1 on the tile) and #64748b in light, so the caption stays legible either way (a11y, tick 372). */
.lm-kpi-tile__caption { font-size: var(--lm-font-size-xs); color: var(--lm-color-text-secondary); }

.lm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lm-space-2);
    text-align: center;
    padding: var(--lm-space-12) var(--lm-space-6);
    color: var(--lm-color-text-secondary);
}

.lm-empty-state h2 {
    margin: 0;
    color: var(--lm-color-text-primary);
    font-size: var(--lm-font-size-lg);
}

/* Loading skeleton (inspo screen 10 loading state): token-driven placeholder bars. The shimmer only
   runs when the user has not asked for reduced motion; without it the bars are a calm static tint. */
.lm-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-3);
    padding: var(--lm-space-6);
}

.lm-skeleton__bar {
    height: var(--lm-space-4);
    border-radius: var(--lm-radius-sm);
    background: var(--lm-color-surface-sunken);
}

.lm-skeleton__bar:nth-child(3) { width: 92%; }
.lm-skeleton__bar:nth-child(4) { width: 78%; }
.lm-skeleton__bar:last-child { width: 60%; }

@media (prefers-reduced-motion: no-preference) {
    .lm-skeleton__bar {
        background: linear-gradient(90deg, var(--lm-color-surface-sunken) 25%, var(--lm-color-border-default) 37%, var(--lm-color-surface-sunken) 63%);
        background-size: 400% 100%;
        animation: lm-shimmer 1.4s var(--lm-motion-easing-standard) infinite;
    }
}

@keyframes lm-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* Block-level error state (inspo screen 10 error state): a whole surface failed to load. Distinct
   from the inline .lm-form-error (single field/action). Mirrors .lm-empty-state layout; only the
   glyph carries the danger colour so the heading and body stay high-contrast. */
.lm-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lm-space-2);
    text-align: center;
    padding: var(--lm-space-12) var(--lm-space-6);
    color: var(--lm-color-text-secondary);
}

.lm-error-state > .ti { color: var(--lm-color-status-dangerText); }

.lm-error-state h2 {
    margin: 0;
    color: var(--lm-color-text-primary);
    font-size: var(--lm-font-size-lg);
}

/* Driver-run anatomy (adoption S16): one big primary action + the COD banner
   (ZA-reality band: cash on delivery is normal, so it is loud and unmissable). */
.lm-action-touch {
    min-height: var(--lm-size-touch-primary);
    padding-left: var(--lm-space-6);
    padding-right: var(--lm-space-6);
    font-size: var(--lm-font-size-md);
}

.lm-cod-banner {
    display: flex;
    align-items: center;
    gap: var(--lm-space-2);
    margin: var(--lm-space-2) 0 0;
    padding: var(--lm-space-2) var(--lm-space-3);
    background: var(--lm-color-navy-50);
    border: 1px solid var(--lm-signal-severity-medium);
    border-radius: var(--lm-radius-md);
    font-size: var(--lm-font-size-sm);
    font-variant-numeric: tabular-nums;
}

/* Cash-collected input at the stop (S-E004-F06-S02): a compact numeric field beside the POD. */
.lm-cod-collected {
    max-width: var(--lm-space-20);
    font-variant-numeric: tabular-nums;
}

/* Short-collection warning on a COD stop: delivering short fails as no-cash (S-E004-F06-S02 T2). */
.lm-cod-shortfall-warn {
    display: block;
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-amber-700);
}

/* At-door payment method picker on a COD stop (S-E004-F06-S02): cash, card or instant EFT. */
.lm-cod-method {
    max-width: var(--lm-space-20);
}

/* Change-given input on a cash overpayment (S-E004-F06-S02): audit of the change handed back. */
.lm-cod-change {
    max-width: var(--lm-space-16);
    font-variant-numeric: tabular-nums;
}

/* Optional suspect-note flag on a COD collection (S-E004-F06-S02 T3): opens a variance case early. */
.lm-cod-suspect {
    max-width: var(--lm-space-20);
}

/* COD-suspended driver marker on the plan board (S-E004-F07-S03 T3): unbanked cash overdue. */
.lm-driver-suspended {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    margin-left: var(--lm-space-2);
    color: var(--lm-color-amber-700);
    font-size: var(--lm-font-size-xs);
}

/* Suspect-collection review signals on the cash reconciliation (S-E004-F06-S02 T3). */
.lm-recon-suspect-banner {
    display: flex;
    align-items: center;
    gap: var(--lm-space-2);
    color: var(--lm-color-amber-700);
    font-size: var(--lm-font-size-sm);
}

.lm-recon-suspect {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    margin-left: var(--lm-space-2);
    color: var(--lm-color-amber-700);
    font-variant-numeric: tabular-nums;
}

/* COD amendment indicator on the driver banner (S-E004-F06-S01 T2). */
.lm-cod-amended {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-amber-700);
}

.lm-jobcard-weight {
    font-size: var(--lm-font-size-xs);
    font-variant-numeric: tabular-nums;
}

/* Promised-window urgency chip on an unplanned job card, so the dispatcher plans the pressing ones first.
   Uses the subtle-warning/danger pairings (WCAG-AA in both themes): due-soon is a warning, an already
   passed window is a danger. */
.lm-jobcard-urgency {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    padding: 0 var(--lm-space-2);
    border-radius: var(--lm-radius-sm);
    font-size: var(--lm-font-size-xs);
    font-weight: var(--lm-font-weight-semibold);
}

.lm-jobcard-urgency--soon {
    background: var(--lm-color-status-warningSubtle);
    color: var(--lm-color-status-warningText);
}

.lm-jobcard-urgency--overdue {
    background: var(--lm-color-status-dangerSubtle);
    color: var(--lm-color-status-dangerText);
}

/* Recalled from a broken-down route (S-E003-F06-S02): urgent re-plan flag on the ready jobcard. */
.lm-jobcard-recalled {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    padding: 0 var(--lm-space-2);
    border-radius: var(--lm-radius-sm);
    font-size: var(--lm-font-size-xs);
    font-weight: var(--lm-font-weight-semibold);
    background: var(--lm-color-status-dangerSubtle);
    color: var(--lm-color-status-dangerText);
}

/* Nearest re-home route for a recalled stop (S-E003-F06-S02 T1): advisory proximity hint. */
.lm-jobcard-nearest {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    padding: 0 var(--lm-space-2);
    border-radius: var(--lm-radius-sm);
    font-size: var(--lm-font-size-xs);
    font-weight: var(--lm-font-weight-semibold);
    background: var(--lm-color-status-infoSubtle);
    color: var(--lm-color-status-infoText);
}

/* Remedial workflow rows (S-E007-F06-S01): failure class -> its fix */
.lm-remedy-rows {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-2);
    max-width: 36rem;
}

.lm-remedy-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--lm-space-3);
    padding: var(--lm-space-2) var(--lm-space-3);
    background: var(--lm-color-surface-raised);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-md);
    font-size: var(--lm-font-size-sm);
}

/* Insights range + export row */
.lm-insights-range {
    margin-bottom: var(--lm-space-4);
    align-items: center;
}

.lm-insights-range label {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-2);
    font-size: var(--lm-font-size-sm);
    color: var(--lm-color-text-secondary);
}

/* Failure-reason bars (S-E007-F01-S01): Okabe-Ito viz scale, one hue — magnitude only */
.lm-failure-bars {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-2);
    max-width: 36rem;
}

.lm-failure-bar {
    display: grid;
    grid-template-columns: 8rem 1fr 3rem;
    align-items: center;
    gap: var(--lm-space-3);
    font-size: var(--lm-font-size-sm);
}

.lm-failure-bar__track {
    height: var(--lm-space-3);
    background: var(--lm-color-navy-50);
    border-radius: var(--lm-radius-full);
    overflow: hidden;
}

.lm-failure-bar__fill {
    display: block;
    height: 100%;
    background: var(--lm-viz-categorical-1);
    border-radius: var(--lm-radius-full);
}

.lm-failure-bar__count {
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--lm-color-text-secondary);
}

/* Completion-rate bar on the driver league (design uplift, inspo viz.diverging): a scannable
   leaderboard cell — a value read at a glance by length and colour, not just the number. */
.lm-rate {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-2);
    min-width: 7rem;
}

.lm-rate__track {
    flex: 1;
    height: var(--lm-space-2);
    min-width: 3rem;
    background: var(--lm-color-navy-50);
    border-radius: var(--lm-radius-full);
    overflow: hidden;
}

.lm-rate__fill {
    display: block;
    height: 100%;
    border-radius: var(--lm-radius-full);
    transition: width var(--lm-motion-deliberate, 240ms) ease;
}

.lm-rate__value {
    font-variant-numeric: tabular-nums;
    color: var(--lm-color-text-secondary);
    min-width: 2.5rem;
    text-align: right;
}

/* Notification trigger rules (S-E005-F01-S02) */
.lm-rules-card {
    margin-bottom: var(--lm-space-4);
}

.lm-rules-title {
    margin: 0;
    font-size: var(--lm-font-size-md);
}

.lm-rules-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lm-space-2);
}

/* Customer-email preview (before mail is switched on): a language picker over a list of the composed
   sample mails, each rendering the real subject + HTML body so staff review the copy and its translation. */
.lm-preview-card {
    margin-bottom: var(--lm-space-4);
}

.lm-preview-lang {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-2);
    margin: var(--lm-space-2) 0 var(--lm-space-3);
    font-size: var(--lm-font-size-sm);
    color: var(--lm-color-text-secondary);
}

.lm-preview-list {
    display: grid;
    gap: var(--lm-space-3);
}

.lm-preview-item {
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-md);
    padding: var(--lm-space-3);
    background: var(--lm-color-surface-sunken);
}

.lm-preview-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--lm-space-2);
    margin-bottom: var(--lm-space-2);
}

.lm-preview-item__body {
    font-size: var(--lm-font-size-sm);
    color: var(--lm-color-text-primary);
}

/* Capacity meter (adoption S15): load vs vehicle envelope, over-capacity flagged */
.lm-capacity-meter {
    height: var(--lm-space-2);
    background: var(--lm-color-navy-100);
    border-radius: var(--lm-radius-full);
    overflow: hidden;
    margin-top: var(--lm-space-2);
}

.lm-capacity-meter__fill {
    display: block;
    height: 100%;
    background: var(--lm-signal-stop-completed);
    border-radius: var(--lm-radius-full);
}

.lm-capacity-meter__fill--over {
    background: var(--lm-signal-severity-high);
}

.lm-capacity-caption {
    font-size: var(--lm-font-size-xs);
    font-variant-numeric: tabular-nums;
}

/* Route cash-on-delivery exposure before dispatch (S-E004-F06-S04): muted by default, high-severity when
   it would breach the assigned driver's cash caps. */
.lm-cash-exposure {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    font-size: var(--lm-font-size-xs);
    font-variant-numeric: tabular-nums;
}

.lm-cash-exposure--over {
    color: var(--lm-signal-severity-high);
    font-weight: var(--lm-font-weight-medium);
}

/* Optimiser proposal panel (S-E002-F02-S01 T2): review before apply */
.lm-plan-proposal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lm-space-2);
    background: var(--lm-color-navy-50);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-md);
    padding: var(--lm-space-2) var(--lm-space-3);
    margin: var(--lm-space-2) 0;
    font-size: var(--lm-font-size-sm);
}

.lm-plan-proposal__text {
    margin: 0;
    flex: 1;
    min-width: 16rem;
}

/* Exception card idiom (adoption S14): severity-edged cards for triage-shaped work.
   Never a full coloured card — the edge and chip carry the signal (inspo colour economy). */
.lm-exception-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    gap: var(--lm-space-4);
}

.lm-exception-card {
    background: var(--lm-color-surface-raised);
    border: 1px solid var(--lm-color-border-default);
    border-left: 3px solid var(--lm-signal-severity-medium);
    border-radius: var(--lm-radius-lg);
    padding: var(--lm-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-2);
}

.lm-exception-card--critical { border-left-color: var(--lm-signal-severity-critical); }
.lm-exception-card--high { border-left-color: var(--lm-signal-severity-high); }
.lm-exception-card--medium { border-left-color: var(--lm-signal-severity-medium); }
.lm-exception-card--low { border-left-color: var(--lm-signal-severity-low); }

.lm-exception-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lm-space-2);
}

.lm-exception-card__body {
    margin: 0;
}

.lm-exception-card__meta {
    margin: 0;
    font-size: var(--lm-font-size-xs);
}

.lm-exception-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lm-space-2);
    margin-top: var(--lm-space-2);
}

/* Honesty primitives (adoption S8: Storybook soak; tracking page + console drawer consume in Phase 3) */
.lm-eta-pill {
    display: inline-flex;
    flex-direction: column;
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-full);
    padding: var(--lm-space-1) var(--lm-space-4);
    background: var(--lm-color-surface-raised);
    box-shadow: var(--lm-shadow-sm);
}

.lm-eta-pill__window {
    font-size: var(--lm-font-size-lg);
    font-weight: var(--lm-font-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--lm-font-lineHeight-tight);
}

.lm-eta-pill__caption {
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-text-faint);
}



.lm-stops-meter {
    display: flex;
    align-items: center;
    gap: var(--lm-space-2);
}

.lm-stops-meter__dots {
    display: flex;
    gap: var(--lm-space-1);
}

.lm-stops-meter__dot {
    width: var(--lm-space-2);
    height: var(--lm-space-2);
    border-radius: var(--lm-radius-full);
    background: var(--lm-color-neutral-300);
    transition: background var(--lm-motion-duration-deliberate) var(--lm-motion-easing-standard);
}

.lm-stops-meter__dot--passed { background: var(--lm-signal-stop-completed); }
.lm-stops-meter__dot--current { background: var(--lm-signal-stop-enRoute); }

.lm-stops-meter__text {
    font-weight: var(--lm-font-weight-semibold);
    font-size: var(--lm-font-size-sm);
}

.lm-stop-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lm-stop-timeline li {
    position: relative;
    padding: 0 0 var(--lm-space-4) var(--lm-space-6);
}

.lm-stop-timeline li::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--lm-space-2) - 1px);
    top: var(--lm-space-4);
    bottom: 0;
    width: 2px;
    background: var(--lm-color-border-default);
}

.lm-stop-timeline li:last-child::before { display: none; }

.lm-stop-timeline__dot {
    position: absolute;
    inset-inline-start: 0;
    top: var(--lm-space-05);
    width: var(--lm-space-4);
    height: var(--lm-space-4);
    border-radius: var(--lm-radius-full);
    background: var(--lm-color-neutral-300);
    border: 2px solid var(--lm-color-surface-primary);
}

.lm-stop-timeline__dot--completed { background: var(--lm-signal-stop-completed); }
.lm-stop-timeline__dot--current { background: var(--lm-signal-stop-enRoute); }
.lm-stop-timeline__dot--failed { background: var(--lm-signal-stop-failed); }

@media (prefers-reduced-motion: no-preference) {
    .lm-stop-timeline__dot--current { animation: lm-pulse 2s var(--lm-motion-easing-standard) infinite; }
}

@keyframes lm-pulse {
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--lm-signal-stop-enRoute) 25%, transparent); }
}

.lm-stop-timeline__title { font-weight: var(--lm-font-weight-medium); }
.lm-stop-timeline__time {
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Page head + forms + tables (orders Block surfaces) */
.lm-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lm-space-4);
}

.lm-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.lm-form-card {
    background: var(--lm-color-surface-primary);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-lg);
    padding: var(--lm-space-6);
    box-shadow: var(--lm-shadow-sm);
    margin: var(--lm-space-4) 0;
}

.lm-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--lm-space-3);
}

/* .lm-field-label is the same caption-above-control pattern used outside a form grid (the checklist and
   defect forms), so it shares this rule rather than carrying a near-duplicate set. It matched no rule at
   all before, so those captions rendered at body size and weight instead of the muted label treatment
   every other form uses (tick 827). */
.lm-form-grid label,
.lm-field-label {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-1);
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-font-weight-medium);
    color: var(--lm-color-text-secondary);
}

/* Two of those captions are on a <fieldset>, and nothing in this stylesheet resets fieldset chrome, so
   they drew the browser's default groove border and inset padding in the middle of a flat form. */
fieldset.lm-field-label {
    border: none;
    margin: 0;
    padding: 0;
}

/* .lm-input is the shared text-input hook (19 admin pages). The same chrome is already spelled out by
   the container rules .lm-form-grid input, .lm-drive-stop input and .lm-fleet-add input, but an input
   whose only class was .lm-input matched none of them and fell back to browser-default chrome: a system
   font and a different border and radius from every styled input beside it. Container rules stay more
   specific, so where one applies it still wins on width, padding and size. */
.lm-input,
.lm-jobs-search {
    font-family: var(--lm-font-family-base);
    font-size: var(--lm-font-size-sm);
    color: var(--lm-color-text-primary);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-sm);
    padding: var(--lm-space-1) var(--lm-space-2);
}

/* Wide enough that "Search reference or contact" is readable rather than clipped at the default width. */
.lm-jobs-search {
    min-width: 18rem;
    margin-bottom: var(--lm-space-2);
}

/* A checkbox and its caption in one label: without this the box sits on the text baseline with no gap. */
.lm-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
}

.lm-form-grid input {
    font-family: var(--lm-font-family-base);
    font-size: var(--lm-font-size-md);
    color: var(--lm-color-text-primary);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-sm);
    padding: var(--lm-space-2);
}

.lm-span-2 {
    grid-column: span 2;
}

.lm-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--lm-space-2);
    margin-top: var(--lm-space-4);
}

.lm-form-error {
    color: var(--lm-color-status-danger);
    background: var(--lm-color-status-dangerSubtle);
    border-radius: var(--lm-radius-sm);
    padding: var(--lm-space-2) var(--lm-space-3);
}

.lm-table-wrap {
    overflow-x: auto;
    background: var(--lm-color-surface-primary);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-lg);
    margin-top: var(--lm-space-4);
    /* Lift the list off the page so it reads as a surface, not a flat block (design uplift, phase B). */
    box-shadow: var(--lm-shadow-sm);
}

.lm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--lm-font-size-sm);
}

/* Count-by-status summary strip above a list (design uplift, phase B). */
.lm-summary-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lm-space-2) var(--lm-space-4);
    margin-top: var(--lm-space-4);
    padding: var(--lm-space-3) var(--lm-space-4);
    background: var(--lm-color-surface-primary);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-sm);
}

.lm-summary-strip__total {
    font-weight: var(--lm-font-weight-semibold);
    color: var(--lm-color-text-secondary);
}

.lm-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-2);
    font-variant-numeric: tabular-nums;
}

/* The status count pills double as one-click list filters. Reset the button chrome so they still read
   like the count pills, reveal clickability on hover/focus, and ring the active filter so it is obvious
   which status the list is narrowed to.
   --action (the "need re-planning" pill) is the same kind of control, a toggle that narrows the same
   list, so it shares these rules rather than carrying a near-duplicate set. It previously matched no
   rule at all, which left it with default browser button chrome beside its reset siblings and, worse,
   gave its aria-pressed="true" state no ring: the list was filtered with nothing on screen saying so
   (tick 826). */
.lm-summary-pill--filter,
.lm-summary-pill--action {
    padding: var(--lm-space-1) var(--lm-space-2);
    border: none;
    border-radius: var(--lm-radius-md);
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.lm-summary-pill--filter:hover,
.lm-summary-pill--filter:focus-visible,
.lm-summary-pill--action:hover,
.lm-summary-pill--action:focus-visible {
    background: var(--lm-color-navy-50);
}

.lm-summary-pill--filter[aria-pressed="true"],
.lm-summary-pill--action[aria-pressed="true"] {
    background: var(--lm-color-navy-100);
    outline: 2px solid var(--lm-color-action-accent);
    outline-offset: -1px;
}

.lm-table th {
    text-align: left;
    /* text-primary, not text-secondary: header labels on a zebra-striped even row (navy-50 #f2f5f9) put
       text-secondary (#64748b) at 4.35:1 — just below WCAG AA 4.5:1 (caught on the shared-dispute table).
       text-primary is theme-adaptive and clears it with a wide margin, and stronger headers scan better. */
    color: var(--lm-color-text-primary);
    font-weight: var(--lm-font-weight-semibold);
    font-size: var(--lm-font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--lm-font-letterSpacing-wide);
    padding: var(--lm-space-3) var(--lm-space-4);
    border-bottom: 1px solid var(--lm-color-border-default);
}

.lm-table td {
    padding: var(--lm-space-3) var(--lm-space-4);
    border-bottom: 1px solid var(--lm-color-border-default);
    vertical-align: top;
    font-variant-numeric: tabular-nums;
}

/* Zebra striping so dense rows are scannable across, with hover a stronger tint that still wins
   over the stripe (design uplift, phase B). */
.lm-table tbody tr:nth-child(2n) {
    background: var(--lm-color-navy-50);
}

.lm-table tbody tr:hover {
    background: var(--lm-color-navy-100);
}

/* Reference/identity column emphasis (S13 table idiom) */
.lm-td-ref {
    font-weight: var(--lm-font-weight-semibold);
}

/* The driver-league CSV export button sits above its table, with room to breathe. */
.lm-drivers-export {
    margin-bottom: var(--lm-space-3);
}

.lm-td-actions {
    text-align: right;
    white-space: nowrap;
}

.lm-table tbody tr:last-child td {
    border-bottom: none;
}

.lm-muted {
    color: var(--lm-color-text-secondary);
}

/* Muted text inside a table sits on the zebra-stripe tint (navy-50 #f2f5f9) where text-secondary is only
   4.35:1 — below WCAG AA. text-strong (neutral-600 #475569 light / navy-200 dark) is 6.9:1 on the stripe
   and 7.6:1 on a plain row, so table detail cells stay legible on either row colour (a11y, tick 373). */
.lm-table .lm-muted {
    color: var(--lm-color-text-strong);
}

/* Click-to-call phone link (dispatcher surfaces): inherits its surrounding colour, reveals it is
   actionable on hover/focus so a dispatcher can call the recipient straight from the card. */
.lm-tel {
    color: inherit;
    text-decoration: none;
}

.lm-tel:hover,
.lm-tel:focus-visible {
    color: var(--lm-color-action-accent);
    text-decoration: underline;
}

/* Delivery reference that drills into that delivery's live tracking (dispatcher surfaces): inherits its
   surrounding colour so it reads as the reference, and reveals it is actionable on hover/focus. */
.lm-deliveryref {
    color: inherit;
    text-decoration: none;
}

.lm-deliveryref:hover,
.lm-deliveryref:focus-visible {
    color: var(--lm-color-action-accent);
    text-decoration: underline;
}

.lm-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    border-radius: var(--lm-radius-full);
    padding: 0 var(--lm-space-2);
    font-size: var(--lm-font-size-xs);
    font-weight: var(--lm-font-weight-medium);
    line-height: 1.6;
    margin-left: var(--lm-space-1);
}

/* Ops today-first dashboard (S-E007-F05-S01). Tokens only. */
.lm-ops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--lm-space-3);
    margin-bottom: var(--lm-space-4);
}

.lm-ops-tile {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-1);
    padding: var(--lm-space-4);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-color-surface-primary);
    text-decoration: none;
    color: var(--lm-color-text-primary);
}

.lm-ops-tile:hover {
    border-color: var(--lm-color-border-strong);
}

.lm-ops-tile--alert {
    border-color: var(--lm-color-status-warning);
    background: var(--lm-color-amber-50);
}

.lm-ops-tile__label {
    font-size: var(--lm-font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--lm-font-letterSpacing-wide);
    color: var(--lm-color-text-secondary);
}

.lm-ops-tile__value {
    font-size: var(--lm-font-size-xl);
    font-weight: var(--lm-font-weight-bold);
}

.lm-ops-tile__sub {
    font-size: var(--lm-font-size-xs);
    /* text-secondary, not text-faint: the ops-tile subtitle over the white/amber tile puts text-faint
       (#94a3b8) at ~2.5:1 — well below WCAG AA 4.5:1. text-secondary (#64748b) is 4.76:1 on white and
       4.59:1 on the amber alert tile, so the KPI captions stay legible (a11y, tick 371). */
    color: var(--lm-color-text-secondary);
}

.lm-ops-spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 2rem;
    margin-top: var(--lm-space-1);
}

.lm-ops-spark__bar {
    flex: 1;
    min-height: 2px;
    background: var(--lm-color-amber-400);
    border-radius: var(--lm-radius-sm) var(--lm-radius-sm) 0 0;
}

/* 13-week failure trend mini bar-chart (S-E007-F06-S01 T3). Tokens only. */
.lm-trend {
    display: flex;
    align-items: flex-end;
    gap: var(--lm-space-1);
    height: 8rem;
    padding-top: var(--lm-space-2);
}

.lm-trend-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
    min-width: 0;
}

/* Delivery progress stepper on the customer tracking page (design uplift, phase D). */
.lm-track-stepper {
    display: flex;
    list-style: none;
    padding: 0;
    margin: var(--lm-space-4) 0;
}

.lm-track-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lm-space-1);
    position: relative;
    text-align: center;
}

/* The connector runs from the previous dot to this one, coloured when the path is reached. */
.lm-track-step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0.75rem;
    inset-inline-end: 50%;
    inset-inline-start: -50%;
    height: 2px;
    background: var(--lm-color-border-default);
    z-index: 0;
}

.lm-track-step--done:not(:first-child)::before,
.lm-track-step--active:not(:first-child)::before {
    background: var(--lm-color-status-success);
}

.lm-track-step--exception:not(:first-child)::before {
    background: var(--lm-color-status-danger);
}

.lm-track-step__dot {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--lm-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lm-color-surface-primary);
    border: 2px solid var(--lm-color-border-default);
    color: var(--lm-color-text-inverse);
    position: relative;
    z-index: 1;
    transition: background var(--lm-motion-deliberate, 240ms) ease;
}

.lm-track-step--done .lm-track-step__dot {
    background: var(--lm-color-status-success);
    border-color: var(--lm-color-status-success);
}

.lm-track-step--active .lm-track-step__dot {
    border-color: var(--lm-color-action-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--lm-color-action-accent) 30%, transparent);
}

.lm-track-step--exception .lm-track-step__dot {
    background: var(--lm-color-status-danger);
    border-color: var(--lm-color-status-danger);
}

.lm-track-step__label {
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-text-secondary);
    max-width: 6rem;
}

.lm-track-step--upcoming .lm-track-step__label {
    /* Keep upcoming labels at text-secondary, not text-faint: faint (#94a3b8) is only 2.45:1 on the
       near-white tracking surface (below WCAG AA 4.5:1). The future-vs-done distinction is carried by the
       step DOT (filled/green when done, hollow when upcoming), so the label stays legible (a11y, tick 367). */
    color: var(--lm-color-text-secondary);
}

/* On-time sparkline (design uplift, phase A): a compact trend with a target rule. */
.lm-sparkline-card {
    display: flex;
    align-items: center;
    gap: var(--lm-space-3);
    flex-wrap: wrap;
    margin-top: var(--lm-space-3);
    padding: var(--lm-space-3) var(--lm-space-4);
    background: var(--lm-color-surface-primary);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-sm);
}

.lm-sparkline-card__label {
    font-weight: var(--lm-font-weight-semibold);
    color: var(--lm-color-text-secondary);
}

.lm-sparkline-card__hint {
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-text-faint);
}

.lm-sparkline {
    width: 15rem;
    height: 2.5rem;
    max-width: 100%;
}

.lm-sparkline__line {
    fill: none;
    stroke: var(--lm-viz-categorical-3);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.lm-sparkline__target {
    stroke: var(--lm-color-text-faint);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}

/* Stacked reason-mix column (design uplift, inspo viz.categorical): each week's bar is split by
   failure class so the mix, not just the total, reads over time. */
.lm-trend-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 2px;
    border-radius: var(--lm-radius-sm) var(--lm-radius-sm) 0 0;
    overflow: hidden;
}

.lm-trend-seg {
    width: 100%;
    min-height: 1px;
}

.lm-trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lm-space-1) var(--lm-space-3);
    margin-top: var(--lm-space-3);
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-text-secondary);
}

.lm-trend-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
}

.lm-trend-legend__swatch {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--lm-radius-xs, 2px);
    flex: none;
}

.lm-trend-label {
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-text-faint);
    margin-top: var(--lm-space-1);
    white-space: nowrap;
}

/* Failure drilldown class chips (S-E007-F06-S01): each links to its remedial workflow. */
.lm-drilldown-classes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lm-space-1);
}

.lm-drilldown-classes .lm-chip {
    margin-left: 0;
    text-decoration: none;
    cursor: pointer;
    background: var(--lm-color-surface-sunken);
    color: var(--lm-color-text-primary);
}

.lm-drilldown-classes .lm-chip:hover {
    background: var(--lm-color-amber-100);
}

/* Restatement flag (S-E007-F03-S03): a settled day that changed after locking. */
.lm-chip-warn {
    background: var(--lm-color-amber-100);
    color: var(--lm-color-amber-700);
    margin-left: 0;
}

.lm-row-restated {
    background: var(--lm-color-amber-50);
}

/* A short cash variance (declared less than expected) reads in the danger colour. */
.lm-variance-short {
    color: var(--lm-color-status-danger);
    font-weight: 600;
}

.lm-restatement-list {
    margin: 0;
    padding-left: var(--lm-space-4);
    font-size: var(--lm-font-size-sm);
    color: var(--lm-color-text-secondary);
}

.lm-restatement-list li {
    margin-bottom: var(--lm-space-1);
}

.lm-coord-inputs {
    display: flex;
    gap: var(--lm-space-1);
}

.lm-coord-inputs input {
    width: 7rem;
    font-family: var(--lm-font-family-mono);
    font-size: var(--lm-font-size-xs);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-sm);
    padding: var(--lm-space-1);
}

.lm-row-actions {
    display: flex;
    gap: var(--lm-space-1);
    flex-wrap: wrap;
}

.lm-row-actions button {
    font-size: var(--lm-font-size-xs);
    padding: var(--lm-space-1) var(--lm-space-2);
}

/* LmStatusChip signal modifiers (adoption S5): fg from signal/status tokens,
   backgrounds mixed from the same token so both themes resolve automatically. */
.lm-chip--routeHealth-ontime { color: var(--lm-signal-routeHealth-onTime); background: color-mix(in srgb, var(--lm-signal-routeHealth-onTime) 13%, transparent); }
.lm-chip--routeHealth-atrisk { color: var(--lm-signal-routeHealth-atRisk); background: color-mix(in srgb, var(--lm-signal-routeHealth-atRisk) 13%, transparent); }
.lm-chip--routeHealth-late { color: var(--lm-signal-routeHealth-late); background: color-mix(in srgb, var(--lm-signal-routeHealth-late) 13%, transparent); }
.lm-chip--routeHealth-exception { color: var(--lm-signal-routeHealth-exception); background: color-mix(in srgb, var(--lm-signal-routeHealth-exception) 13%, transparent); }
.lm-chip--routeHealth-idle { color: var(--lm-signal-routeHealth-idle); background: color-mix(in srgb, var(--lm-signal-routeHealth-idle) 13%, transparent); }
.lm-chip--routeHealth-done { color: var(--lm-signal-routeHealth-done); background: color-mix(in srgb, var(--lm-signal-routeHealth-done) 13%, transparent); }
/* Signal chips (tick 375): the 13% tint background is darker than the -100 status-subtle bgs, so the raw
   signal colour as text is only ~2.3-4.4:1. The text is mixed 60% toward text-primary (theme-adaptive:
   darkens on a light stop card, lightens on a dark one) for a WCAG-AA-safe, still-coloured pill; the map
   dot keeps the raw signal token. sync-* chips sit on the always-dark driver header, so they mix toward
   white (light text) instead. All variants clear 4.5:1 in both themes. */
.lm-chip--stop-pending { color: color-mix(in srgb, var(--lm-signal-stop-pending) 60%, var(--lm-color-text-primary)); background: color-mix(in srgb, var(--lm-signal-stop-pending) 13%, transparent); }
/* The en-route chip text uses the AA-safe theme-adaptive info blue (blue-700 light / #60a5fa dark), not the
   raw signal blue (#2563eb = 4.12 on its light tint), keeping the signal token for the map dot untouched.
   The tinted bg stays the signal colour so the pill still reads as "en route" (a11y, tick 374). */
.lm-chip--stop-enroute { color: color-mix(in srgb, var(--lm-signal-stop-enRoute) 60%, var(--lm-color-text-primary)); background: color-mix(in srgb, var(--lm-signal-stop-enRoute) 13%, transparent); }
.lm-chip--stop-arrived { color: color-mix(in srgb, var(--lm-signal-stop-arrived) 60%, var(--lm-color-text-primary)); background: color-mix(in srgb, var(--lm-signal-stop-arrived) 13%, transparent); }
.lm-chip--stop-completed { color: color-mix(in srgb, var(--lm-signal-stop-completed) 60%, var(--lm-color-text-primary)); background: color-mix(in srgb, var(--lm-signal-stop-completed) 13%, transparent); }
.lm-chip--stop-failed { color: color-mix(in srgb, var(--lm-signal-stop-failed) 60%, var(--lm-color-text-primary)); background: color-mix(in srgb, var(--lm-signal-stop-failed) 13%, transparent); }
.lm-chip--stop-skipped { color: color-mix(in srgb, var(--lm-signal-stop-skipped) 60%, var(--lm-color-text-primary)); background: color-mix(in srgb, var(--lm-signal-stop-skipped) 13%, transparent); }
.lm-chip--severity-critical { color: var(--lm-signal-severity-critical); background: color-mix(in srgb, var(--lm-signal-severity-critical) 13%, transparent); }
.lm-chip--severity-high { color: var(--lm-signal-severity-high); background: color-mix(in srgb, var(--lm-signal-severity-high) 13%, transparent); }
.lm-chip--severity-medium { color: var(--lm-signal-severity-medium); background: color-mix(in srgb, var(--lm-signal-severity-medium) 13%, transparent); }
.lm-chip--severity-low { color: var(--lm-signal-severity-low); background: color-mix(in srgb, var(--lm-signal-severity-low) 13%, transparent); }
.lm-chip--severity-info { color: var(--lm-signal-severity-info); background: color-mix(in srgb, var(--lm-signal-severity-info) 13%, transparent); }
/* The synced chip sits on the dark driver header (its 13% tint over a dark surface), so its text is the
   lighter green-500 (6.4:1 on that dark tint), not the raw signal green (#16a34a = 4.44). The signal token
   still drives the map dot; only the pill text changes (a11y, tick 374). */
.lm-chip--sync-synced { color: color-mix(in srgb, var(--lm-signal-sync-synced) 60%, var(--lm-color-neutral-white)); background: color-mix(in srgb, var(--lm-signal-sync-synced) 13%, transparent); }
.lm-chip--sync-pending { color: color-mix(in srgb, var(--lm-signal-sync-pending) 60%, var(--lm-color-neutral-white)); background: color-mix(in srgb, var(--lm-signal-sync-pending) 13%, transparent); }
.lm-chip--sync-offline { color: color-mix(in srgb, var(--lm-signal-sync-offline) 60%, var(--lm-color-neutral-white)); background: color-mix(in srgb, var(--lm-signal-sync-offline) 13%, transparent); }
/* Status chips use the AA-safe *Text token (green/blue-700 on the light subtle bg, mirroring the existing
   warningText), not the general status colour, so the pill text clears WCAG AA 4.5:1 (a11y, tick 373). */
.lm-chip--status-success { color: var(--lm-color-status-successText); background: var(--lm-color-status-successSubtle); }
.lm-chip--status-warning { color: var(--lm-color-status-warningText); background: var(--lm-color-status-warningSubtle); }
.lm-chip--status-danger { color: var(--lm-color-status-dangerText); background: var(--lm-color-status-dangerSubtle); }
.lm-chip--status-info { color: var(--lm-color-status-infoText); background: var(--lm-color-status-infoSubtle); }
/* The neutral chip has an always-light base background (neutral-200), so its text is the always-dark
   neutral-700 (8.4:1 in both themes), not the theme-adaptive text-secondary which went light-on-light. */
.lm-chip--status-neutral { color: var(--lm-color-neutral-700); background: var(--lm-color-neutral-200); }

.lm-chip--sm { font-size: 0.65rem; }


/* Planning board (routing Block) */
.lm-main-wide {
    max-width: 96rem;
}

.lm-plan-controls {
    display: flex;
    gap: var(--lm-space-2);
    align-items: center;
}

.lm-plan-controls input {
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-sm);
    padding: var(--lm-space-2);
    font-family: var(--lm-font-family-base);
}

.lm-plan-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lm-space-2) var(--lm-space-4);
    margin-top: var(--lm-space-4);
    padding: var(--lm-space-2) var(--lm-space-4);
    background: var(--lm-color-surface-sunken);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-md);
}

.lm-plan-kpi {
    font-size: var(--lm-font-size-sm);
    color: var(--lm-color-text-secondary);
}

.lm-plan-kpi strong {
    font-variant-numeric: tabular-nums;
    color: var(--lm-color-text-primary);
}

.lm-plan-board {
    display: grid;
    grid-template-columns: 1fr 1.4fr 0.8fr;
    gap: var(--lm-space-4);
    margin-top: var(--lm-space-4);
    align-items: start;
}

.lm-plan-pool, .lm-plan-fleet {
    background: var(--lm-color-surface-primary);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-lg);
    padding: var(--lm-space-4);
}

.lm-plan-pool h2, .lm-plan-fleet h2 {
    font-size: var(--lm-font-size-md);
    margin-top: 0;
}

.lm-plan-fleet h3 {
    font-size: var(--lm-font-size-sm);
    color: var(--lm-color-text-secondary);
    margin-bottom: var(--lm-space-1);
}

.lm-plan-jobcard {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-1);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-md);
    padding: var(--lm-space-2) var(--lm-space-3);
    margin-bottom: var(--lm-space-2);
    background: var(--lm-color-surface-sunken);
}

.lm-plan-routes {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-3);
}

.lm-plan-route {
    background: var(--lm-color-surface-primary);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-lg);
    padding: var(--lm-space-3) var(--lm-space-4);
}

.lm-plan-route-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lm-plan-stops {
    margin: var(--lm-space-2) 0;
    padding-left: var(--lm-space-6);
    font-size: var(--lm-font-size-sm);
}

.lm-plan-assign {
    display: flex;
    gap: var(--lm-space-2);
    flex-wrap: wrap;
    align-items: center;
}

.lm-plan-assign select {
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-sm);
    padding: var(--lm-space-1) var(--lm-space-2);
    font-family: var(--lm-font-family-base);
    font-size: var(--lm-font-size-sm);
}

.lm-fleet-add {
    display: flex;
    gap: var(--lm-space-1);
    margin: var(--lm-space-2) 0 var(--lm-space-3);
    flex-wrap: wrap;
}

.lm-fleet-add input {
    width: 7.5rem;
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-sm);
    padding: var(--lm-space-1);
    font-size: var(--lm-font-size-xs);
    font-family: var(--lm-font-family-base);
}

/* Dispatch overview (inspo dispatch-overview surface) */
.lm-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--lm-space-4);
    margin-top: var(--lm-space-4);
}

.lm-overview-h2 {
    margin-top: var(--lm-space-8);
    font-size: var(--lm-font-size-lg);
}

.lm-overview-routes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--lm-space-3);
}

.lm-route-health-caption {
    font-size: var(--lm-font-size-xs);
}

/* Live map (live-ops Block) */
.lm-map {
    height: 70vh;
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-lg);
    margin-top: var(--lm-space-4);
    overflow: hidden;
}

.lm-map-marker {
    width: var(--lm-space-4);
    height: var(--lm-space-4);
    border-radius: var(--lm-radius-full);
    border: 2px solid var(--lm-color-surface-primary);
    box-shadow: var(--lm-shadow-sm);
    cursor: pointer;
}

/* Draggable correction pin for the address review queue (S-E001-F02-S02). */
.lm-map-marker--pin {
    width: var(--lm-space-5);
    height: var(--lm-space-5);
    background: var(--lm-color-action-accent);
    cursor: grab;
}

.lm-review-map {
    height: 20rem;
    margin-top: var(--lm-space-3);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-md);
    overflow: hidden;
}

.lm-review-map__hint {
    margin-top: var(--lm-space-2);
    font-size: var(--lm-font-size-xs);
}

/* Drive view (pod Block) */
.lm-drive-stops {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-2);
    margin-top: var(--lm-space-3);
}

.lm-drive-stop {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-2);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-md);
    padding: var(--lm-space-2) var(--lm-space-3);
    background: var(--lm-color-surface-sunken);
}

/* An arrival estimate that lands after the promised window. The markup has always applied this
   modifier (Drive.razor flags it from eta.MissesWindow) but no rule existed, so a late stop looked
   exactly like an on-time one and the only signal was the trailing "after window" text. Matches the
   treatment .lm-variance-short already uses for a number that needs attention. */
.lm-drive-eta--late {
    color: var(--lm-color-status-danger);
    font-weight: 600;
}

.lm-drive-stop input {
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-sm);
    padding: var(--lm-space-1) var(--lm-space-2);
    font-family: var(--lm-font-family-base);
    font-size: var(--lm-font-size-sm);
    width: 11rem;
}

.lm-drive-stop select {
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-sm);
    padding: var(--lm-space-1);
    font-size: var(--lm-font-size-xs);
}

/* Route activity trail (S-E002-F07-S05): a lazy-loaded audit timeline per route */
.lm-route-audit {
    margin-top: var(--lm-space-2);
    border-top: 1px solid var(--lm-color-border-default);
    padding-top: var(--lm-space-2);
}

.lm-route-audit summary {
    cursor: pointer;
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-font-weight-semibold);
    color: var(--lm-color-text-secondary);
}

/* WCAG 2.2 target-size (2.5.8, tick 381): a <details> expander's clickable summary must be at least 24px
   tall. The app's summaries carry a custom Icon + label on one ~20px line, so make the clickable box at
   least 24px and centre the content; the custom Icon stands in for the native disclosure marker. */
summary {
    min-height: 24px;
    display: flex;
    align-items: center;
}
summary::-webkit-details-marker { display: none; }

/* Visually-hidden but screen-reader-available (used for icon-only / empty-header labels). */
.lm-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lm-route-audit .lm-stop-timeline {
    margin-top: var(--lm-space-3);
}

.lm-route-audit .lm-muted {
    margin-top: var(--lm-space-2);
    font-size: var(--lm-font-size-sm);
    color: var(--lm-color-text-secondary);
}

/* CSV import (orders Block) */
.lm-file-label {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
}

.lm-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.lm-import-errors {
    margin: var(--lm-space-2) 0 0;
    padding-left: var(--lm-space-6);
    font-size: var(--lm-font-size-sm);
    color: var(--lm-color-status-danger);
}

/* Feedback FAB (contract 28) */
.lm-fab-container {
    position: fixed;
    right: var(--lm-space-6);
    bottom: var(--lm-space-6);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--lm-space-3);
    z-index: 1000;
}

.lm-fab {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--lm-radius-full);
    background: var(--lm-color-action-accent);
    color: var(--lm-color-navy-900);
    border: none;
    box-shadow: var(--lm-shadow-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--lm-motion-duration-fast) var(--lm-motion-easing-standard);
}

.lm-fab:hover {
    transform: scale(1.06);
}

.lm-fab-panel {
    background: var(--lm-color-surface-primary);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-lg);
    padding: var(--lm-space-4);
    width: 20rem;
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-3);
}

.lm-fab-panel h3 {
    margin: 0;
    font-size: var(--lm-font-size-lg);
}

.lm-fab-panel textarea {
    font-family: var(--lm-font-family-base);
    font-size: var(--lm-font-size-sm);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-sm);
    padding: var(--lm-space-2);
    resize: vertical;
}

.lm-fab-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--lm-space-2);
}

.lm-fab-thanks {
    color: var(--lm-color-status-success);
}

.lm-fab-attach {
    display: flex;
    align-items: center;
    gap: var(--lm-space-2);
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-text-secondary);
    flex-wrap: wrap;
    cursor: pointer;
}

/* The native file input stays functional but invisible; the styled span is the control. */
.lm-fab-attach input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.lm-fab-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-sm);
    padding: var(--lm-space-1) var(--lm-space-2);
    color: var(--lm-color-text-primary);
    background: var(--lm-color-surface-sunken);
    font-weight: var(--lm-font-weight-medium);
}

.lm-fab-attach:hover .lm-fab-attach-btn {
    border-color: var(--lm-color-border-strong);
}

.lm-fab-files {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-1);
    font-size: var(--lm-font-size-xs);
}

.lm-fab-files li {
    display: flex;
    align-items: center;
    gap: var(--lm-space-1);
}

.lm-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lm-space-1);
    margin-top: var(--lm-space-1);
}

.lm-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-full);
    padding: 0 var(--lm-space-2);
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-text-primary);
    text-decoration: none;
    background: var(--lm-color-surface-sunken);
}

.lm-attachment-chip:hover {
    border-color: var(--lm-color-border-strong);
}

/* Marketing site (anonymous surface) — adoption S18, inspo marketing-landing.md.
   The one surface allowed spaciousness; same ramps, same icons, same chips. */
.lm-marketing {
    line-height: var(--lm-font-lineHeight-base);
}

.lm-mkt-wrap {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--lm-space-6);
}

.lm-mkt-nav {
    display: flex;
    align-items: center;
    gap: var(--lm-space-6);
}

.lm-mkt-nav a {
    color: var(--lm-color-text-inverse);
    text-decoration: none;
    font-weight: var(--lm-font-weight-medium);
}

.lm-mkt-nav a.lm-btn-accent {
    color: var(--lm-color-action-accentText);
}

/* Ghost button in the marketing header (mockup's btn-ghost): the sign-in affordance. */
.lm-mkt-nav a.lm-mkt-ghost {
    border: 1px solid var(--lm-color-border-strong);
    border-radius: var(--lm-radius-md);
    padding: var(--lm-space-2) var(--lm-space-5);
    font-weight: var(--lm-font-weight-semibold);
}

/* Language + country switchers (owner directive 2026-07-15): accessible dropdowns in the dark appbar. */
.lm-mkt-switchers {
    display: flex;
    align-items: flex-end;
    gap: var(--lm-space-4);
}
.lm-switch {
    display: flex;
    align-items: center;
    gap: var(--lm-space-1);
}
.lm-switch-label {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    color: var(--lm-color-navy-100);
    font-size: var(--lm-font-size-xs);
    font-weight: var(--lm-font-weight-semibold);
    letter-spacing: var(--lm-font-letterSpacing-wide);
}
.lm-switch-select {
    background: var(--lm-color-navy-700);
    color: var(--lm-color-text-inverse);
    border: 1px solid var(--lm-color-border-strong);
    border-radius: var(--lm-radius-md);
    padding: var(--lm-space-1) var(--lm-space-2);
    font-family: var(--lm-font-family-base);
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-font-weight-medium);
    max-width: 12rem;
}
.lm-switch-select:focus-visible {
    outline: 2px solid var(--lm-color-action-accent);
    outline-offset: 2px;
}
.lm-switch-go {
    background: var(--lm-color-navy-600);
    color: var(--lm-color-text-inverse);
    border: 1px solid var(--lm-color-border-strong);
    border-radius: var(--lm-radius-md);
    padding: var(--lm-space-1) var(--lm-space-3);
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-font-weight-semibold);
    cursor: pointer;
}
.lm-cap-input {
    max-width: 8rem;
    margin-inline-start: var(--lm-space-2);
}
.lm-switch-go:hover {
    background: var(--lm-color-navy-700);
}

.lm-mkt-hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--lm-space-12);
    align-items: center;
    padding-top: var(--lm-space-20);
    padding-bottom: var(--lm-space-16);
}

/* Secondary marketing pages (product, plans, security) lead with a single-column hero, no console
   miniature, so the copy carries the top of the page on its own. */
.lm-mkt-hero--solo {
    grid-template-columns: 1fr;
    max-width: 42rem;
}

/* Active marketing-nav link: the page you are on reads as current, not a target. */
.lm-mkt-nav a.lm-mkt-current {
    color: var(--lm-color-text-strong);
    font-weight: var(--lm-font-weight-semibold);
}

/* Centred call-to-action band (reuses the honesty section's surface). */
.lm-mkt-band {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lm-space-4);
}

/* Persona role label above a persona card title (marketing /for). */
.lm-mkt-role {
    display: inline-block;
    font-size: var(--lm-font-size-xs);
    font-weight: var(--lm-font-weight-semibold);
    letter-spacing: var(--lm-font-letterSpacing-wide);
    text-transform: uppercase;
    color: var(--lm-color-text-secondary);
}

/* Pricing tier cards (marketing /plans). Token-driven; the featured tier lifts with the accent. */
.lm-mkt-plan {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-2);
    padding: var(--lm-space-6);
    background: var(--lm-color-surface-raised);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-lg);
}

.lm-mkt-plan--featured {
    border-color: var(--lm-color-action-accent);
    box-shadow: var(--lm-shadow-md);
}

.lm-mkt-plan__name {
    margin: var(--lm-space-2) 0 0;
    font-size: var(--lm-font-size-lg);
    font-weight: var(--lm-font-weight-semibold);
    color: var(--lm-color-text-strong);
}

.lm-mkt-plan__price {
    margin: 0;
    font-size: var(--lm-font-size-xl);
    font-weight: var(--lm-font-weight-bold);
    color: var(--lm-color-text-primary);
}

.lm-mkt-plan__for {
    margin: 0 0 var(--lm-space-2);
    color: var(--lm-color-text-secondary);
    font-size: var(--lm-font-size-sm);
}

.lm-mkt-plan__list {
    list-style: none;
    margin: 0 0 var(--lm-space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-2);
    flex: 1;
}

.lm-mkt-plan__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--lm-space-2);
    color: var(--lm-color-text-primary);
}

.lm-mkt-plan__list li .ti {
    color: var(--lm-color-status-success);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ETA panel (/dispatch/routes): one section per active route, its stops and arrival estimates. */
.lm-eta-route {
    margin-top: var(--lm-space-6);
}

.lm-eta-route__head {
    display: flex;
    align-items: center;
    gap: var(--lm-space-3);
    margin-bottom: var(--lm-space-2);
}

.lm-eta-route__head h2 {
    margin: 0;
    font-size: var(--lm-font-size-lg);
    font-weight: var(--lm-font-weight-semibold);
    color: var(--lm-color-text-strong);
}

/* Role dashboards (/insights/roles): one card per role, each a few headline numbers + a way in. */
.lm-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--lm-space-4);
    margin-top: var(--lm-space-4);
}

.lm-role-card {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-3);
    padding: var(--lm-space-5);
    background: var(--lm-color-surface-raised);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-lg);
}

.lm-role-card__head {
    display: flex;
    align-items: center;
    gap: var(--lm-space-2);
}

.lm-role-card__head h2 {
    margin: 0;
    font-size: var(--lm-font-size-lg);
    font-weight: var(--lm-font-weight-semibold);
    color: var(--lm-color-text-strong);
}

.lm-role-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lm-space-4);
    margin-top: auto;
}

.lm-role-stat {
    display: flex;
    flex-direction: column;
}

.lm-role-stat__value {
    font-size: var(--lm-font-size-xl);
    font-weight: var(--lm-font-weight-bold);
    color: var(--lm-color-text-primary);
    font-variant-numeric: tabular-nums;
}

.lm-role-stat__label {
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-text-secondary);
}

/* Demo request form (marketing /demo): a narrow, centred static mailto form. */
.lm-mkt-demo {
    max-width: 34rem;
}

.lm-mkt-form {
    display: grid;
    gap: var(--lm-space-4);
    margin: var(--lm-space-6) 0 var(--lm-space-3);
}

.lm-mkt-field {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-1);
}

.lm-mkt-field > span {
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-font-weight-medium);
    color: var(--lm-color-text-primary);
}

.lm-mkt-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    font-size: var(--lm-font-size-xs);
    font-weight: var(--lm-font-weight-semibold);
    letter-spacing: var(--lm-font-letterSpacing-wide);
    text-transform: uppercase;
    color: var(--lm-color-amber-700);
    background: var(--lm-color-amber-100);
    border-radius: var(--lm-radius-full);
    padding: var(--lm-space-1) var(--lm-space-3);
}

.lm-mkt-hero h1 {
    font-size: var(--lm-font-size-display);
    line-height: var(--lm-font-lineHeight-tight);
    letter-spacing: var(--lm-font-letterSpacing-tight);
    font-weight: var(--lm-font-weight-bold);
    margin: var(--lm-space-4) 0;
    color: var(--lm-color-action-primary);
}

.lm-mkt-sub {
    font-size: var(--lm-font-size-lg);
    color: var(--lm-color-text-secondary);
    line-height: var(--lm-font-lineHeight-relaxed);
    max-width: 34rem;
}

.lm-mkt-ctas {
    display: flex;
    gap: var(--lm-space-3);
    margin-top: var(--lm-space-8);
}

.lm-mkt-ctas a {
    text-decoration: none;
}

/* Console miniature: the dark token set inside the light page (data-lm-theme="dark"
   on the frame), proving both themes coexist from one token pipeline. */
.lm-mkt-mini {
    background: var(--lm-color-surface-sunken);
    border-radius: var(--lm-radius-xl);
    box-shadow: var(--lm-shadow-lg);
    padding: var(--lm-space-4);
    color: var(--lm-color-text-primary);
    font-size: var(--lm-font-size-xs);
}

.lm-mkt-mini__bar {
    display: flex;
    gap: var(--lm-space-4);
    padding: var(--lm-space-2) var(--lm-space-3);
    background: var(--lm-color-surface-primary);
    border-radius: var(--lm-radius-md);
    margin-bottom: var(--lm-space-3);
    font-variant-numeric: tabular-nums;
}

.lm-mkt-mini__bar b {
    font-size: var(--lm-font-size-md);
}

.lm-mkt-mini__warn b {
    color: var(--lm-signal-routeHealth-atRisk);
}

.lm-mkt-mini__map {
    position: relative;
    height: 12rem;
    border-radius: var(--lm-radius-md);
    overflow: hidden;
    background: var(--lm-color-surface-primary);
}

.lm-mkt-mini__map svg {
    width: 100%;
    height: 100%;
}

.lm-mkt-mini__exc {
    margin-top: var(--lm-space-3);
    background: var(--lm-color-surface-primary);
    border-inline-start: 3px solid var(--lm-signal-routeHealth-late);
    border-radius: var(--lm-radius-md);
    padding: var(--lm-space-2) var(--lm-space-3);
    display: flex;
    align-items: center;
    gap: var(--lm-space-2);
}

.lm-mkt-mini__exc > .ti {
    color: var(--lm-signal-routeHealth-late);
}

.lm-mkt-mini__act {
    margin-inline-start: auto;
    background: var(--lm-color-action-accent);
    color: var(--lm-color-action-accentText);
    border-radius: var(--lm-radius-md);
    padding: var(--lm-space-1) var(--lm-space-2);
    font-weight: var(--lm-font-weight-semibold);
}

/* Section rhythm */
.lm-mkt-sect-kicker {
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-font-weight-semibold);
    color: var(--lm-color-amber-700);
    text-transform: uppercase;
    letter-spacing: var(--lm-font-letterSpacing-wide);
}

.lm-mkt-sect {
    font-size: var(--lm-font-size-2xl);
    line-height: var(--lm-font-lineHeight-snug);
    font-weight: var(--lm-font-weight-bold);
    color: var(--lm-color-action-primary);
    margin-top: var(--lm-space-2);
}

.lm-mkt-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lm-space-6);
    margin-top: var(--lm-space-8);
}

.lm-mkt-pillars {
    padding: var(--lm-space-16) 0;
    border-top: 1px solid var(--lm-color-border-default);
}

.lm-mkt-pillar {
    background: var(--lm-color-surface-sunken);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-xl);
    padding: var(--lm-space-8) var(--lm-space-6);
}

.lm-mkt-pillar > .ti {
    color: var(--lm-color-action-primary);
}

.lm-mkt-pillar h3 {
    font-size: var(--lm-font-size-lg);
    margin: var(--lm-space-3) 0 var(--lm-space-2);
}

.lm-mkt-pillar p {
    color: var(--lm-color-text-secondary);
    line-height: var(--lm-font-lineHeight-relaxed);
}

.lm-mkt-num {
    margin-top: var(--lm-space-4);
    font-weight: var(--lm-font-weight-semibold);
    /* green-700, not green-600: the metric text sits on the near-white pillar surface, where green-600
       (#16a34a) is only 3.14:1 — below WCAG AA 4.5:1. green-700 (#15803d) is 4.88:1 (a11y fix, tick 366). */
    color: var(--lm-color-green-700);
    display: flex;
    align-items: center;
    gap: var(--lm-space-1);
    font-size: var(--lm-font-size-sm);
}

/* ZA-reality band: the market-fit section on the inverse surface */
.lm-mkt-za {
    background: var(--lm-color-surface-inverse);
    color: var(--lm-color-text-inverse);
    padding: var(--lm-space-16) 0;
}

.lm-mkt-za .lm-mkt-sect {
    color: var(--lm-color-text-inverse);
}

.lm-mkt-za .lm-mkt-sect-kicker {
    color: var(--lm-color-amber-400);
}

.lm-mkt-za-item {
    border: 1px solid var(--lm-color-navy-700);
    border-radius: var(--lm-radius-lg);
    padding: var(--lm-space-6);
}

.lm-mkt-za-item > .ti {
    color: var(--lm-color-amber-400);
}

.lm-mkt-za-item h3 {
    margin: var(--lm-space-3) 0 var(--lm-space-2);
    font-size: var(--lm-font-size-md);
}

.lm-mkt-za-item p {
    color: var(--lm-color-navy-200);
    font-size: var(--lm-font-size-sm);
    line-height: var(--lm-font-lineHeight-relaxed);
}

/* Capabilities: the commercial model as a visual */
.lm-mkt-capabilities {
    padding: var(--lm-space-16) 0;
}

.lm-mkt-captiles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lm-space-3);
    margin-top: var(--lm-space-8);
}

.lm-mkt-captile {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-2);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-full);
    padding: var(--lm-space-2) var(--lm-space-5);
    font-weight: var(--lm-font-weight-semibold);
    color: var(--lm-color-text-secondary);
}

.lm-mkt-captile--on {
    background: var(--lm-color-navy-700);
    color: var(--lm-color-text-inverse);
    border-color: var(--lm-color-navy-700);
}

.lm-mkt-captile--on .ti {
    color: var(--lm-color-amber-400);
}

.lm-mkt-note {
    margin-top: var(--lm-space-4);
    color: var(--lm-color-text-secondary);
}

/* Honesty manifesto strip */
.lm-mkt-honesty {
    background: var(--lm-color-surface-sunken);
    border-top: 1px solid var(--lm-color-border-default);
    border-bottom: 1px solid var(--lm-color-border-default);
    padding: var(--lm-space-12) 0;
    text-align: center;
}

.lm-mkt-honesty blockquote {
    font-size: var(--lm-font-size-xl);
    line-height: var(--lm-font-lineHeight-snug);
    font-weight: var(--lm-font-weight-medium);
    color: var(--lm-color-action-primary);
    max-width: 44rem;
    margin: 0 auto;
}

.lm-mkt-who {
    margin-top: var(--lm-space-3);
    color: var(--lm-color-text-secondary);
    font-size: var(--lm-font-size-sm);
}

/* Footer */
.lm-mkt-footer {
    padding: var(--lm-space-12) 0;
    color: var(--lm-color-text-secondary);
    font-size: var(--lm-font-size-sm);
}

.lm-mkt-footer__row {
    display: flex;
    gap: var(--lm-space-6);
    flex-wrap: wrap;
    align-items: center;
}

.lm-mkt-footer__row .lm-brand {
    color: var(--lm-color-action-primary);
}

.lm-mkt-footer__grow {
    flex: 1;
}

.lm-mkt-footer a {
    color: var(--lm-color-navy-500);
}

@media (max-width: 56rem) {
    .lm-mkt-hero {
        grid-template-columns: 1fr;
        padding-top: var(--lm-space-12);
    }

    .lm-mkt-grid3 {
        grid-template-columns: 1fr;
    }

    .lm-mkt-hero h1 {
        font-size: var(--lm-font-size-2xl);
    }
}

/* Blocks catalogue (adoption S20, inspo admin-blocks.md) */
.lm-block-head {
    display: flex;
    align-items: baseline;
    gap: var(--lm-space-4);
    flex-wrap: wrap;
}

.lm-block-head__plan {
    font-weight: var(--lm-font-weight-semibold);
    color: var(--lm-color-text-secondary);
}

.lm-block-head__audit {
    font-size: var(--lm-font-size-sm);
}

.lm-block-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--lm-space-4);
    margin-top: var(--lm-space-6);
}

.lm-block-card {
    background: var(--lm-color-surface-primary);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-sm);
    padding: var(--lm-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-3);
    transition: box-shadow var(--lm-motion-duration-base) var(--lm-motion-easing-standard);
}

.lm-block-card:hover {
    box-shadow: var(--lm-shadow-md);
}

.lm-block-card__head {
    display: flex;
    align-items: center;
    gap: var(--lm-space-2);
}

.lm-block-card__head strong {
    flex: 1;
}

.lm-block-card__head > .ti {
    color: var(--lm-color-action-primary);
}

.lm-block-card__prop {
    color: var(--lm-color-text-secondary);
    font-size: var(--lm-font-size-sm);
    line-height: var(--lm-font-lineHeight-base);
    flex: 1;
}

.lm-block-card__deps {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    font-size: var(--lm-font-size-xs);
    color: var(--lm-color-text-faint);
}

.lm-block-card__actions {
    display: flex;
    gap: var(--lm-space-2);
    min-height: 2rem;
}

/* Blast-radius confirmation dialog */
.lm-blast-overlay {
    position: fixed;
    inset: 0;
    background: var(--lm-color-surface-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
}

.lm-blast {
    background: var(--lm-color-surface-primary);
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-lg);
    padding: var(--lm-space-6);
    max-width: 28rem;
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-3);
}

.lm-blast h3 {
    display: flex;
    align-items: center;
    gap: var(--lm-space-2);
    color: var(--lm-color-status-danger);
}

.lm-blast__label code {
    background: var(--lm-color-surface-sunken);
    border-radius: var(--lm-radius-sm);
    padding: 0 var(--lm-space-1);
}

.lm-blast__actions {
    display: flex;
    gap: var(--lm-space-2);
    justify-content: flex-end;
}

/* Review queue geocode disposition note (S-E001-F02-S01) */
.lm-review-geo {
    font-size: var(--lm-font-size-xs);
    margin-left: auto;
}

/* Drag-to-reassign on the planning board (S-E002-F01-S02) */
.lm-plan-stop--draggable {
    cursor: grab;
}

.lm-plan-route--droppable {
    outline: 2px dashed var(--lm-color-action-accent);
    outline-offset: 2px;
}

.lm-plan-move .lm-plan-proposal__text strong {
    color: var(--lm-color-action-primary);
}

.lm-plan-stop__move {
    background: none;
    border: none;
    color: var(--lm-color-text-faint);
    cursor: pointer;
    padding: 0 var(--lm-space-1);
}

.lm-plan-stop__move:hover {
    color: var(--lm-color-action-primary);
}

/* Settings admin (per-tenant policy knobs) */
.lm-settings-form {
    display: flex;
    gap: var(--lm-space-2);
    margin-bottom: var(--lm-space-2);
    max-width: 48rem;
}

.lm-settings-form__value {
    flex: 1;
}

.lm-settings-hint code {
    background: var(--lm-color-surface-sunken);
    border-radius: var(--lm-radius-sm);
    padding: 0 var(--lm-space-1);
}

.lm-settings-hint {
    margin-bottom: var(--lm-space-4);
}

/* Metric definitions (S-E007-F03-S01) */
.lm-metric-def-link {
    color: var(--lm-color-text-faint);
    text-decoration: none;
}

.lm-metric-def-link:hover {
    color: var(--lm-color-action-primary);
}

.lm-metric-defs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: var(--lm-space-3);
    margin-bottom: var(--lm-space-6);
}

.lm-metric-def {
    background: var(--lm-color-surface-sunken);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-md);
    padding: var(--lm-space-3) var(--lm-space-4);
    font-size: var(--lm-font-size-sm);
}

.lm-metric-def p {
    margin: var(--lm-space-1) 0 0;
}

/* Tracking page */
.lm-track {
    text-align: center;
    padding-top: var(--lm-space-12);
    max-width: 28rem;
}

/* Recipient language switcher on the tracking page (owner directive 2026-07-15): compact, top-aligned. */
.lm-track-lang {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--lm-space-2);
    margin-bottom: var(--lm-space-4);
}
.lm-track-lang__label {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    color: var(--lm-color-text-secondary);
    font-size: var(--lm-font-size-sm);
}
.lm-track-lang__select {
    background: var(--lm-color-surface-raised);
    color: var(--lm-color-text-primary);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-md);
    padding: var(--lm-space-1) var(--lm-space-2);
    font-family: var(--lm-font-family-base);
    font-size: var(--lm-font-size-sm);
    max-width: 11rem;
}
.lm-track-lang__select:focus-visible {
    outline: 2px solid var(--lm-color-action-accent);
    outline-offset: 2px;
}
.lm-track-lang__go {
    background: var(--lm-color-action-accent);
    color: var(--lm-color-action-accentText);
    border: none;
    border-radius: var(--lm-radius-md);
    padding: var(--lm-space-1) var(--lm-space-3);
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-font-weight-semibold);
    cursor: pointer;
}

/* The tracking page is the only surface a customer ever sees, and it asks them to type free text in four
   places (a satisfaction comment, where to leave a safe-place drop, delivery instructions, and a
   deflection detail). Those textareas carried no class and no ancestor rule, so they fell back to browser
   defaults: a system font unlike the rest of the page, and the default ~20-column width, which left a
   stubby box in the middle of a 28rem column. Two inherited traits made it worse and are corrected here:
   .lm-track centres its text, so anything the customer typed was centred, and there is no global
   border-box reset, so a full-width box would otherwise overflow its column (tick 828). */
.lm-track textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 4.5rem;
    text-align: left;
    font-family: var(--lm-font-family-base);
    font-size: var(--lm-font-size-sm);
    color: var(--lm-color-text-primary);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-sm);
    padding: var(--lm-space-2);
    resize: vertical;
}

.lm-track-promised {
    margin: var(--lm-space-4) 0 0;
    background: var(--lm-color-surface-sunken);
}

.lm-track-eta {
    margin: var(--lm-space-2) 0 0;
}

.lm-track-nearby {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-2);
    margin: var(--lm-space-4) 0 0;
    padding: var(--lm-space-2) var(--lm-space-3);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-color-status-success);
    color: var(--lm-color-text-inverse);
    font-size: var(--lm-font-size-sm);
    font-weight: 600;
}

/* Honest running-late acknowledgement pill (S-E003-F06-S01, customer side): out for delivery past the
   promised window. The subtle-warning pairing (warningSubtle background, warningText) clears WCAG AA in
   both themes, reading as an attention note without alarming the recipient like the danger colour would. */
.lm-track-late {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-2);
    margin: var(--lm-space-4) 0 0;
    padding: var(--lm-space-2) var(--lm-space-3);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-color-status-warningSubtle);
    color: var(--lm-color-status-warningText);
    font-size: var(--lm-font-size-sm);
    font-weight: 600;
}

/* Delivery-confirmation pill (S-E005-F02-S01): the moment the parcel arrived, shown prominently under
   the Delivered heading in the success colour, matching the nearby indicator. */
.lm-track-delivered-at {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-2);
    margin: var(--lm-space-3) 0 0;
    padding: var(--lm-space-2) var(--lm-space-3);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-color-status-success);
    color: var(--lm-color-text-inverse);
    font-size: var(--lm-font-size-sm);
    font-weight: 600;
}

/* Attempt-confirmation pill (S-E005-F02-S01): when we last missed the recipient, in the AA-safe warning
   pairing (dark amber text on light amber) since it is context for a next-action choice, not a success. */
.lm-track-attempted-at {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-2);
    margin: var(--lm-space-3) 0 0;
    padding: var(--lm-space-2) var(--lm-space-3);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-color-status-warningSubtle);
    color: var(--lm-color-status-warningText);
    font-size: var(--lm-font-size-sm);
    font-weight: 600;
}

.lm-track-meter {
    justify-content: center;
    margin: var(--lm-space-4) 0;
}

.lm-track-timeline {
    /* logical, not physical: text-align:start mirrors to the right in RTL (Arabic/Persian/Hebrew/Urdu) so
       the customer's tracking timeline reads correctly in an RTL language (tick 377). Identical in LTR. */
    text-align: start;
    display: inline-block;
    margin-top: var(--lm-space-6);
}

.lm-track {
    margin-left: auto;
    margin-right: auto;
}

/* Forms */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--lm-color-status-success);
}

.invalid {
    outline: 1px solid var(--lm-color-status-danger);
}

.validation-message {
    color: var(--lm-color-status-danger);
}

.blazor-error-boundary {
    background: var(--lm-color-status-danger);
    padding: var(--lm-space-4);
    color: var(--lm-color-text-inverse);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Contextual-help FAB + right-hand side panel (owner directive 2026-07-13). The "?" FAB sits just
   above the feedback FAB; the panel is a fixed full-height drawer on the right. */
/* Shareable dispute-pack link input (S-E004-F08-S01 T2): wide enough to read/copy the URL. */
.lm-share-url {
    min-width: 24rem;
    max-width: 100%;
    font-family: var(--lm-font-family-mono, monospace);
    font-size: var(--lm-font-size-xs);
}

.lm-help-fab {
    position: fixed;
    right: var(--lm-space-6);
    bottom: calc(var(--lm-space-6) + 4.25rem);
    z-index: 1000;
}

.lm-help-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 24rem;
    max-width: 92vw;
    background: var(--lm-color-surface-primary);
    border-left: 1px solid var(--lm-color-border-default);
    box-shadow: var(--lm-shadow-lg);
    padding: var(--lm-space-6);
    overflow-y: auto;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-4);
}

/* Contextual help REFLOWS the page rather than overlaying it (owner directive 2026-07-13): when the
   panel is open, the page column narrows by the panel width so the content redraws into the space
   beside it and nothing is hidden behind it. Pure CSS via :has() on the panel's presence in the DOM;
   only on wide screens where there is room (on a phone the panel stays a full-width overlay). */
@media (min-width: 64rem) {
    .lm-shell {
        transition: margin-right var(--lm-motion-deliberate, 240ms) ease;
    }
    body:has(.lm-help-panel) .lm-shell {
        margin-right: 24rem;
    }
}

.lm-help-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--lm-space-3);
}

.lm-help-panel__head h2 {
    margin: 0;
    font-size: var(--lm-font-size-lg);
}

.lm-help-panel__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--lm-color-text-secondary);
    padding: var(--lm-space-2);
}

.lm-help-panel__body {
    font-size: var(--lm-font-size-md);
    color: var(--lm-color-text-secondary);
}

/* Print / Save-as-PDF (S-E004-F08-S01 T2): a clean black-on-white evidence sheet for a bank/PSP.
   Chrome, floating buttons and interactive controls never reach paper; the colour tokens are pinned
   to their light values so a dark-theme viewer still prints legible black-on-white. Placed last so
   it wins over the theme blocks when the media is print. */
@media print {
    :root {
        --lm-color-surface-primary: #ffffff;
        --lm-color-surface-raised: #ffffff;
        --lm-color-text-primary: #0f172a;
        --lm-color-text-secondary: #334155;
        --lm-color-text-faint: #64748b;
        --lm-color-border-default: #cbd5e1;
        --lm-color-border-strong: #94a3b8;
        color-scheme: light;
    }

    .lm-rail, .lm-fab-container, .lm-help-panel, .lm-public-header, .lm-public-footer,
    .lm-btn-primary, .lm-btn-secondary, .lm-share-url, [data-print], [data-share-create] {
        display: none !important;
    }

    body, .lm-shell, .lm-main, .lm-public-main {
        background: #ffffff !important;
        color: #0f172a !important;
        margin: 0 !important;
    }

    /* Keep table rows whole across page breaks; give cells a visible ink border on paper. */
    .lm-table tr, .lm-table thead { page-break-inside: avoid; }
    .lm-table th, .lm-table td { border: 1px solid #cbd5e1; }
}

/* Proof-photo attach control on the drive page (S-E004-F01): the label is a tappable chip; the raw file
   input is hidden behind it so the driver taps a clean control, not a browser default. */
.lm-pod-photo {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-2);
    padding: var(--lm-space-2) var(--lm-space-3);
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-md);
    color: var(--lm-color-text-secondary);
    font-size: var(--lm-font-size-sm);
    cursor: pointer;
}
.lm-pod-photo input[type="file"] {
    display: none;
}

/* Proof-of-delivery photo gallery on the dispute pack (S-E004-F01): captured delivery photos rendered
   inline as evidence, in a responsive grid that keeps each image legible without dominating the pack. */
.lm-pod-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--lm-space-3);
    margin: var(--lm-space-3) 0;
}
.lm-pod-figure {
    margin: 0;
    border: 1px solid var(--lm-color-border-default);
    border-radius: var(--lm-radius-md);
    overflow: hidden;
}
.lm-pod-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 18rem;
    object-fit: cover;
}
.lm-pod-figure figcaption {
    padding: var(--lm-space-2);
    font-size: var(--lm-font-size-sm);
}

/* Navigate/call links on a driver's stop card (S-E004): a wrapped row of tap targets so a driver can open
   the phone's maps or dialer with one tap without typing at the wheel. */
.lm-drive-stop-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lm-space-2);
    margin-top: var(--lm-space-2);
}

/* The delivery address + recipient on a driver's stop card: the primary "where and to whom" line, legible
   at arm's length in a vehicle. */
.lm-drive-stop-where {
    margin: var(--lm-space-1) 0 0;
    font-size: var(--lm-font-size-sm);
    color: var(--lm-color-text-secondary);
}

/* Sender delivery instructions on a driver's stop card: a note the driver must heed at the door, set off
   with a left accent and a raised surface so it reads as an instruction, not incidental text. */
.lm-drive-stop-note {
    margin: var(--lm-space-1) 0 0;
    padding: var(--lm-space-1) var(--lm-space-2);
    font-size: var(--lm-font-size-sm);
    color: var(--lm-color-text-secondary);
    border-left: 2px solid var(--lm-color-border-strong);
    background: var(--lm-color-surface-raised);
    border-radius: var(--lm-radius-sm);
}

/* Session recording replay modal (S-E008-F03-S02 T1b): rrweb-player mounts into the dialog when a triager
   replays a feedback item's session-recording.json. Overlay + dialog use design tokens only. */
.lm-replay-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lm-color-surface-overlay);
    padding: var(--lm-space-4);
}
.lm-replay-overlay[hidden] { display: none; }
.lm-replay-dialog {
    position: relative;
    background: var(--lm-color-surface-raised);
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-lg);
    padding: var(--lm-space-6);
    max-width: 95vw;
    max-height: 90vh;
    overflow: auto;
}
.lm-replay-close {
    position: absolute;
    top: var(--lm-space-2);
    right: var(--lm-space-3);
    background: none;
    border: none;
    font-size: var(--lm-font-size-lg);
    line-height: 1;
    cursor: pointer;
    color: var(--lm-color-text-primary);
}
.lm-replay-mount { min-width: 320px; min-height: 200px; }

/* Full Stack tenant switcher (S-E012-F04-S01): a compact staff-only control in the account nav. */
.lm-tenant-switch {
    display: flex;
    align-items: center;
    gap: var(--lm-space-2);
    margin-bottom: var(--lm-space-2);
}
.lm-tenant-switch__label {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-1);
    color: var(--lm-color-text-secondary);
    font-size: var(--lm-font-size-sm);
    white-space: nowrap;
}

/* Per-stop outcome of a running-late playbook run (S-E003-F06-S01 T2): a compact list of which customers
   now hold which revised window, and which were deliberately left alone. */
.lm-playbook-stops {
    list-style: none;
    margin: 0 0 var(--lm-space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-2);
}

.lm-playbook-stops li {
    display: flex;
    align-items: center;
    gap: var(--lm-space-3);
    flex-wrap: wrap;
}

.lm-playbook-stops__ref {
    font-weight: var(--lm-font-weight-medium);
}

.lm-playbook-stops__window {
    font-variant-numeric: tabular-nums;
    color: var(--lm-color-text-secondary);
}

/* The driver's navigation-app chooser on the Drive view (S-E004-F02-S04 T2): a quiet one-line control that
   sits under the page intro without competing with the stop cards. */
.lm-drive-navpref {
    display: flex;
    align-items: center;
    gap: var(--lm-space-3);
    margin-bottom: var(--lm-space-4);
}

.lm-drive-navpref label {
    color: var(--lm-color-text-secondary);
}

/* Staff-only "you are in another tenant" warning (S-E012-F04-S01 T2): full width, above everything, using
   the warning tokens so it reads as a caution rather than an error. Only rendered when it applies. */
.lm-tenant-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lm-space-2);
    padding: var(--lm-space-2) var(--lm-space-4);
    background: var(--lm-color-status-warningSubtle);
    color: var(--lm-color-status-warningText);
    font-weight: var(--lm-font-weight-medium);
    text-align: center;
}