/* ==========================================================================
   LoadLink application styles

   The Logzee theme (public/theme/css) supplies the design language: the orange
   primary, the navy secondary, the Outfit typeface and the Bootstrap 5 grid.
   This file adds only what a marketplace application needs on top of a
   marketing template - the dashboard shell, data tables, status badges and the
   match-score visualisations - and reuses the theme tokens rather than
   introducing a second palette.
   ========================================================================== */

:root {
    --ll-primary: #fe8704;
    --ll-primary-dark: #e07403;
    --ll-primary-soft: rgba(254, 135, 4, 0.1);
    --ll-secondary: #232135;
    --ll-secondary-soft: rgba(35, 33, 53, 0.06);

    --ll-surface: #ffffff;
    --ll-canvas: #fef9f5;
    --ll-muted: #6f6d7e;
    --ll-text: #232135;
    --ll-border: #ece8e4;

    --ll-success: #2e9e6b;
    --ll-success-soft: rgba(46, 158, 107, 0.12);
    --ll-warning: #d9860a;
    --ll-warning-soft: rgba(217, 134, 10, 0.12);
    --ll-danger: #d2453c;
    --ll-danger-soft: rgba(210, 69, 60, 0.12);
    --ll-info: #2f7fbf;
    --ll-info-soft: rgba(47, 127, 191, 0.12);

    --ll-radius: 10px;
    --ll-radius-lg: 16px;
    --ll-shadow: 0 2px 14px rgba(35, 33, 53, 0.06);
    --ll-shadow-lifted: 0 10px 30px rgba(35, 33, 53, 0.1);
    --ll-sidebar-width: 260px;
}

/* --------------------------------------------------------------------------
   Application shell
   -------------------------------------------------------------------------- */

.ll-app {
    display: flex;
    min-height: 100vh;
    background: var(--ll-canvas);
    color: var(--ll-text);
}

.ll-sidebar {
    width: var(--ll-sidebar-width);
    flex: 0 0 var(--ll-sidebar-width);
    background: var(--ll-secondary);
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ll-sidebar__brand {
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ll-sidebar__brand img { height: 34px; }

.ll-sidebar__section {
    padding: 1.25rem 1.5rem 0.4rem;
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}

.ll-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 1.5rem;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 0.92rem;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ll-sidebar__link i { width: 1.1rem; text-align: center; font-size: 1rem; }

.ll-sidebar__link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.ll-sidebar__link.is-active {
    background: rgba(254, 135, 4, 0.14);
    border-left-color: var(--ll-primary);
    color: #fff;
}

.ll-sidebar__badge {
    margin-left: auto;
    background: var(--ll-primary);
    color: #fff;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.ll-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ll-topbar {
    background: var(--ll-surface);
    border-bottom: 1px solid var(--ll-border);
    padding: 0.85rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.min-width-0 { min-width: 0; }

.ll-topbar__title { font-size: 1.1rem; font-weight: 600; margin: 0; color: var(--ll-text); overflow-wrap: anywhere; }
.ll-topbar__subtitle { font-size: 0.82rem; color: var(--ll-muted); margin: 0; }

.ll-content { padding: 1.75rem; flex: 1 1 auto; }

.ll-sidebar-toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 1.4rem;
    color: var(--ll-text);
    line-height: 1;
}

@media (max-width: 991.98px) {
    .ll-sidebar {
        position: fixed;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    .ll-sidebar.is-open { transform: translateX(0); }
    .ll-sidebar-toggle { display: inline-block; }
    .ll-content { padding: 1.15rem; }
}

.ll-scrim {
    position: fixed;
    inset: 0;
    background: rgba(35, 33, 53, 0.45);
    z-index: 1030;
}

/* --------------------------------------------------------------------------
   Cards, panels and page headers
   -------------------------------------------------------------------------- */

.ll-card {
    background: var(--ll-surface);
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius-lg);
    box-shadow: var(--ll-shadow);
}

.ll-card__header {
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--ll-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ll-card__title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ll-text); }
.ll-card__hint { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--ll-muted); }
.ll-card__body { padding: 1.35rem; }
.ll-card__footer {
    padding: 1rem 1.35rem;
    border-top: 1px solid var(--ll-border);
    background: #fcfbfa;
    border-radius: 0 0 var(--ll-radius-lg) var(--ll-radius-lg);
}

.ll-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ll-page-head h1 { font-size: 1.45rem; font-weight: 600; margin: 0 0 0.2rem; color: var(--ll-text); }
.ll-page-head p { margin: 0; color: var(--ll-muted); font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Statistic tiles
   -------------------------------------------------------------------------- */

.ll-stat {
    background: var(--ll-surface);
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius-lg);
    padding: 1.15rem 1.3rem;
    box-shadow: var(--ll-shadow);
    height: 100%;
}

.ll-stat__label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ll-muted);
    margin-bottom: 0.45rem;
}

.ll-stat__value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ll-text);
}

.ll-stat__meta { font-size: 0.8rem; color: var(--ll-muted); margin-top: 0.35rem; }

.ll-stat__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: var(--ll-primary-soft);
    color: var(--ll-primary);
    margin-bottom: 0.75rem;
}

.ll-stat--empty .ll-stat__value { color: var(--ll-muted); font-size: 1.05rem; font-weight: 500; }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.ll-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.badge-success { background: var(--ll-success-soft); color: var(--ll-success); }
.badge-warning { background: var(--ll-warning-soft); color: var(--ll-warning); }
.badge-danger  { background: var(--ll-danger-soft);  color: var(--ll-danger); }
.badge-info    { background: var(--ll-info-soft);    color: var(--ll-info); }
.badge-primary { background: var(--ll-primary-soft); color: var(--ll-primary-dark); }
.badge-muted   { background: var(--ll-secondary-soft); color: var(--ll-muted); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.ll-table-wrap { overflow-x: auto; }

.ll-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

.ll-table th {
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ll-muted);
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--ll-border);
    white-space: nowrap;
}

.ll-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--ll-border);
    color: var(--ll-text);
    vertical-align: middle;
}

.ll-table tbody tr:last-child td { border-bottom: 0; }
.ll-table tbody tr:hover { background: #fdfbf9; }
.ll-table__muted { color: var(--ll-muted); font-size: 0.82rem; }

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */

.ll-empty { text-align: center; padding: 2.75rem 1.5rem; color: var(--ll-muted); }
.ll-empty i { font-size: 2.4rem; color: var(--ll-border); display: block; margin-bottom: 0.75rem; }
.ll-empty h4 { font-size: 1rem; font-weight: 600; color: var(--ll-text); margin-bottom: 0.35rem; }
.ll-empty p { font-size: 0.88rem; margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   Match shortlist

   The score bar exists so a customer can see why a truck ranks where it does.
   Each segment is one weighted term of S = w1P + w2R + w3C + w4B + w5H, sized
   by its contribution rather than by its raw score.
   -------------------------------------------------------------------------- */

.ll-match {
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius-lg);
    padding: 1.15rem 1.3rem;
    background: var(--ll-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ll-match:hover { border-color: var(--ll-primary); box-shadow: var(--ll-shadow-lifted); }

.ll-match--top { border-color: var(--ll-primary); box-shadow: var(--ll-shadow-lifted); }

.ll-match__rank {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ll-secondary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    flex: 0 0 auto;
}

.ll-match--top .ll-match__rank { background: var(--ll-primary); }

.ll-match__score {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ll-primary-dark);
    line-height: 1;
}

.ll-score-bar {
    display: flex;
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: #f1eeeb;
    margin: 0.75rem 0 0.6rem;
}

.ll-score-bar__seg { height: 100%; }
.ll-score-bar__seg--proximity   { background: #fe8704; }
.ll-score-bar__seg--reputation  { background: #2f7fbf; }
.ll-score-bar__seg--price       { background: #2e9e6b; }
.ll-score-bar__seg--backhaul    { background: #7a5cc6; }
.ll-score-bar__seg--reliability { background: #d9860a; }

.ll-score-key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.76rem;
    color: var(--ll-muted);
}

.ll-score-key__item { display: inline-flex; align-items: center; gap: 0.35rem; }

.ll-score-key__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.ll-backhaul-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(122, 92, 198, 0.12);
    color: #5f43a8;
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    font-size: 0.74rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Timeline (trip progress, dispute history)
   -------------------------------------------------------------------------- */

.ll-timeline { list-style: none; margin: 0; padding: 0 0 0 1.4rem; position: relative; }

.ll-timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--ll-border);
}

.ll-timeline__item { position: relative; padding-bottom: 1.15rem; }
.ll-timeline__item:last-child { padding-bottom: 0; }

.ll-timeline__item::before {
    content: "";
    position: absolute;
    left: -1.4rem;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--ll-border);
}

.ll-timeline__item.is-done::before { border-color: var(--ll-success); background: var(--ll-success); }
.ll-timeline__item.is-current::before { border-color: var(--ll-primary); background: var(--ll-primary); }

.ll-timeline__label { font-weight: 600; font-size: 0.9rem; color: var(--ll-text); }
.ll-timeline__meta { font-size: 0.8rem; color: var(--ll-muted); }

/* --------------------------------------------------------------------------
   Quotes and negotiation
   -------------------------------------------------------------------------- */

.ll-stat--link {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ll-stat--link:hover,
.ll-stat--link:focus-visible {
    border-color: var(--ll-primary);
    box-shadow: 0 6px 18px rgba(254, 135, 4, 0.12);
    transform: translateY(-1px);
    color: inherit;
}

.ll-stat--link:focus-visible { outline: 2px solid var(--ll-primary); outline-offset: 2px; }

.ll-stat__go {
    position: absolute;
    top: 1.15rem;
    right: 1.2rem;
    color: var(--ll-muted);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.ll-stat--link:hover .ll-stat__go,
.ll-stat--link:focus-visible .ll-stat__go { opacity: 1; color: var(--ll-primary); transform: translateX(2px); }

.ll-count-chip {
    display: inline-block;
    min-width: 1.4rem;
    margin-left: 0.3rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4rem;
    text-align: center;
}

.ll-select--compact { width: auto; min-width: 10rem; padding-top: 0.35rem; padding-bottom: 0.35rem; font-size: 0.85rem; }

.ll-chip {
    border: 1px solid var(--ll-border);
    background: var(--ll-surface);
    color: var(--ll-text);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.ll-chip:hover,
.ll-chip:focus-visible { border-color: var(--ll-primary); color: var(--ll-primary-dark); }

.ll-btn-ghost { background: var(--ll-secondary-soft); color: var(--ll-text); }
.ll-btn-ghost:hover { background: rgba(35, 33, 53, 0.12); color: var(--ll-text); }
.ll-btn-ghost-danger { background: var(--ll-danger-soft); color: var(--ll-danger); }
.ll-btn-ghost-danger:hover { background: var(--ll-danger); color: #fff; }

.ll-action-panel {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius-lg);
    background: var(--ll-canvas);
}

.ll-quote-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--ll-border);
}

.ll-quote-facts dt { font-size: 0.75rem; font-weight: 400; color: var(--ll-muted); }
.ll-quote-facts dd { margin: 0; font-size: 0.88rem; color: var(--ll-text); }

.ll-counter-callout {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    padding: 1rem;
    border-radius: var(--ll-radius-lg);
    background: var(--ll-primary-soft);
    border: 1px solid rgba(254, 135, 4, 0.25);
}

.ll-counter-callout__message {
    flex: 1 1 220px;
    font-size: 0.88rem;
    font-style: italic;
    color: var(--ll-text);
    border-left: 3px solid var(--ll-primary);
    padding-left: 0.75rem;
}

.ll-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }

.ll-thread__item { display: flex; gap: 0.7rem; align-items: flex-start; max-width: 88%; }
.ll-thread__item.is-mine { flex-direction: row-reverse; align-self: flex-end; }
.ll-thread__item.is-final { align-self: center; max-width: 100%; }

.ll-thread__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ll-secondary-soft);
    color: var(--ll-text);
    font-size: 0.9rem;
}

.ll-thread__item.is-mine .ll-thread__icon { background: var(--ll-primary-soft); color: var(--ll-primary); }

.ll-thread__bubble {
    min-width: 0;
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--ll-border);
    background: var(--ll-surface);
}

.ll-thread__item.is-mine .ll-thread__bubble { background: var(--ll-primary-soft); border-color: rgba(254, 135, 4, 0.2); }
.ll-thread__item.is-final .ll-thread__bubble { background: var(--ll-secondary-soft); text-align: center; }

.ll-quote-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    color: var(--ll-text);
    text-decoration: none;
}

.ll-quote-row:hover { background: var(--ll-canvas); color: var(--ll-text); }

@media (max-width: 575.98px) {
    .ll-thread__item { max-width: 100%; }
    .ll-select--compact { min-width: 0; flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   Tracking map
   -------------------------------------------------------------------------- */

.ll-map {
    height: clamp(300px, 62vh, 480px);
    width: 100%;
    border-radius: var(--ll-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ll-border);
    background: #eee9e4;
}

.ll-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ll-success);
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(46, 158, 107, 0.6);
    animation: ll-pulse 2s infinite;
}

.ll-live-dot--stale { background: var(--ll-muted); animation: none; box-shadow: none; }

@keyframes ll-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(46, 158, 107, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(46, 158, 107, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 158, 107, 0); }
}

/* Star rating display, used on operator profiles and review lists. */
.ll-stars { color: var(--ll-primary); letter-spacing: 0.08em; }
.ll-stars .is-empty { color: #dcd7d2; }

/* --------------------------------------------------------------------------
   Forms

   The theme styles .form-control for the marketing contact form; these rules
   extend that to the denser application forms without overriding the look.
   -------------------------------------------------------------------------- */

.ll-label {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--ll-text);
    margin-bottom: 0.35rem;
}

.ll-label__optional { font-weight: 400; color: var(--ll-muted); font-size: 0.78rem; }

.ll-input,
.ll-select,
.ll-textarea {
    width: 100%;
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius);
    padding: 0.6rem 0.85rem;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--ll-text);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ll-input:focus,
.ll-select:focus,
.ll-textarea:focus {
    outline: none;
    border-color: var(--ll-primary);
    box-shadow: 0 0 0 3px var(--ll-primary-soft);
}

.ll-input.is-invalid,
.ll-select.is-invalid,
.ll-textarea.is-invalid { border-color: var(--ll-danger); }

.ll-help { font-size: 0.79rem; color: var(--ll-muted); margin-top: 0.3rem; }
.ll-error { font-size: 0.79rem; color: var(--ll-danger); margin-top: 0.3rem; }

.ll-fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; }

.ll-fieldset__legend {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ll-muted);
    padding: 0;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--ll-border);
    padding-bottom: 0.5rem;
    width: 100%;
}

/* Role picker on the registration form. */
.ll-role-card {
    display: block;
    border: 2px solid var(--ll-border);
    border-radius: var(--ll-radius-lg);
    padding: 1.15rem;
    cursor: pointer;
    height: 100%;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ll-role-card:hover { border-color: rgba(254, 135, 4, 0.5); }
.ll-role-card input { position: absolute; opacity: 0; }
.ll-role-card.is-selected { border-color: var(--ll-primary); background: var(--ll-primary-soft); }
.ll-role-card__icon { font-size: 1.6rem; color: var(--ll-primary); margin-bottom: 0.5rem; }
.ll-role-card__title { font-weight: 600; color: var(--ll-text); margin-bottom: 0.2rem; }
.ll-role-card__desc { font-size: 0.82rem; color: var(--ll-muted); margin: 0; }

[x-cloak] { display: none !important; }

/* Registration wizard progress indicator. */
.ll-wizard__progress { display: flex; align-items: center; margin-bottom: 1.75rem; }

.ll-wizard__step {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: none;
    border: 0;
    padding: 0;
    cursor: default;
}

.ll-wizard__step[disabled] { cursor: not-allowed; }
.ll-wizard__step:not([disabled]) { cursor: pointer; }

.ll-wizard__dot {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    font-weight: 700;
    border: 2px solid var(--ll-border);
    color: var(--ll-muted);
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ll-wizard__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ll-muted);
    white-space: nowrap;
}

.ll-wizard__step.is-active .ll-wizard__dot { border-color: var(--ll-primary); color: var(--ll-primary); }
.ll-wizard__step.is-active .ll-wizard__label { color: var(--ll-text); }

.ll-wizard__step.is-done .ll-wizard__dot { border-color: var(--ll-primary); background: var(--ll-primary); color: #fff; }
.ll-wizard__step.is-done .ll-wizard__label { color: var(--ll-text); }

.ll-wizard__line { flex: 1; height: 2px; background: var(--ll-border); margin: 0 0.6rem; }
.ll-wizard__line.is-done { background: var(--ll-primary); }

/* Place autocomplete used by the load posting and fleet forms. */
.ll-suggest { position: relative; }

.ll-suggest__list {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius);
    box-shadow: var(--ll-shadow-lifted);
    max-height: 240px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0.25rem;
}

.ll-suggest__item {
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.86rem;
    color: var(--ll-text);
}

.ll-suggest__item:hover,
.ll-suggest__item.is-active { background: var(--ll-primary-soft); }

/* The label of a place field with its two actions beside it. */
.ll-place-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.1rem 0.75rem;
}

.ll-place-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.1rem 1rem;
}

/* "Use my current location" sits on the label row of a place field. */
.ll-place-locate {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ll-primary-dark);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.ll-place-locate:hover { text-decoration: underline; }
.ll-place-locate:disabled { color: var(--ll-muted); cursor: progress; text-decoration: none; }

/* Suggested price on the posting form. */
.ll-estimate {
    padding: 0.85rem 1rem;
    border-radius: var(--ll-radius);
    background: var(--ll-primary-soft);
}

.ll-estimate__amount { font-size: 1.35rem; font-weight: 700; color: var(--ll-text); }

/* Load photos: thumbnails on the load page and the edit form. */
.ll-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.6rem;
}

.ll-photos__item {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius);
    background: #f7f5f3;
}

.ll-photos__item img { width: 100%; height: 100%; object-fit: cover; }

.ll-photos__remove {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0.25rem 0.4rem;
    background: rgba(255, 255, 255, 0.92);
    font-size: 0.75rem;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.ll-alert {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-radius: var(--ll-radius);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}

.ll-alert i { font-size: 1.1rem; flex: 0 0 auto; margin-top: 0.05rem; }
.ll-alert--success { background: var(--ll-success-soft); color: #1f6b49; border-color: rgba(46, 158, 107, 0.25); }
.ll-alert--warning { background: var(--ll-warning-soft); color: #8f5a06; border-color: rgba(217, 134, 10, 0.25); }
.ll-alert--danger  { background: var(--ll-danger-soft);  color: #96302a; border-color: rgba(210, 69, 60, 0.25); }
.ll-alert--info    { background: var(--ll-info-soft);    color: #215a87; border-color: rgba(47, 127, 191, 0.25); }

/* --------------------------------------------------------------------------
   Small utilities
   -------------------------------------------------------------------------- */

.ll-muted { color: var(--ll-muted); }
.ll-mono { font-variant-numeric: tabular-nums; }
.ll-route { display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.ll-route i { color: var(--ll-primary); }
.ll-divider { height: 1px; background: var(--ll-border); margin: 1.25rem 0; border: 0; }

.ll-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ll-primary-soft);
    color: var(--ll-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.82rem;
    flex: 0 0 auto;
}

/* Topbar account menu: the avatar opens a dropdown of account destinations. */
.ll-usermenu { position: relative; }

.ll-usermenu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 1;
}

.ll-usermenu__caret {
    font-size: 0.7rem;
    color: var(--ll-muted);
    transition: transform 0.15s ease;
}

.ll-usermenu__trigger[aria-expanded="true"] .ll-usermenu__caret { transform: rotate(180deg); }

.ll-usermenu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    z-index: 40;
    min-width: 230px;
    background: var(--ll-surface);
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius);
    box-shadow: var(--ll-shadow-lifted);
    padding: 0.35rem;
}

.ll-usermenu__head {
    padding: 0.55rem 0.65rem 0.6rem;
    border-bottom: 1px solid var(--ll-border);
    margin-bottom: 0.35rem;
}

.ll-usermenu__name { font-weight: 600; font-size: 0.9rem; color: var(--ll-text); }
.ll-usermenu__email { font-size: 0.78rem; color: var(--ll-muted); overflow: hidden; text-overflow: ellipsis; }

.ll-usermenu__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--ll-text);
    text-decoration: none;
    cursor: pointer;
}

.ll-usermenu__item i { width: 1rem; text-align: center; color: var(--ll-muted); font-size: 0.95rem; }
.ll-usermenu__item:hover { background: var(--ll-primary-soft); color: var(--ll-primary-dark); }
.ll-usermenu__item:hover i { color: var(--ll-primary-dark); }

.ll-usermenu__item--danger:hover { background: var(--ll-danger-soft); color: var(--ll-danger); }
.ll-usermenu__item--danger:hover i { color: var(--ll-danger); }

.ll-usermenu__divider { height: 1px; background: var(--ll-border); margin: 0.35rem 0; }

/* Password field with a show/hide toggle. */
.ll-input-reveal { position: relative; }
.ll-input-reveal .ll-input { padding-right: 2.6rem; }

.ll-input-reveal__toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--ll-muted);
    font-size: 1rem;
}

.ll-input-reveal__toggle:hover { color: var(--ll-primary); }

/* Print: the admin KPI dashboard is a dissertation appendix as often as a screen. */
@media print {
    .ll-sidebar, .ll-topbar, .ll-no-print { display: none !important; }
    .ll-content { padding: 0; }
    .ll-card { box-shadow: none; break-inside: avoid; }
}

/* ==========================================================================
   Marketing landing page

   The signed-out site leans on the theme for its palette and grid, and adds
   only the compositions the theme has no equivalent for: the hero, the
   shortlist illustration, the comparison panels, the weight bars and the
   backhaul diagram. Motion here is decorative without exception - every value
   is already in the markup before an animation touches it - and the whole
   layer is switched off under prefers-reduced-motion at the end of this file.
   ========================================================================== */

.ll-hero {
    position: relative;
    overflow: hidden;
    padding: 9.5rem 0 5rem;
    background: var(--ll-secondary);
    isolation: isolate;
}

/* The theme header is absolutely positioned over the hero, so the hero clears
   it rather than the header reserving space. */
@media (min-width: 992px) {
    .ll-hero { padding: 14rem 0 7rem; }
}

.ll-hero__bg {
    position: absolute;
    inset: -3%;
    background-size: cover;
    background-position: center;
    z-index: -3;
    animation: ll-kenburns 28s ease-in-out infinite alternate;
}

.ll-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(1100px 520px at 78% 18%, rgba(254, 135, 4, 0.28), transparent 62%),
        linear-gradient(105deg, rgba(24, 22, 40, 0.96) 8%, rgba(35, 33, 53, 0.88) 48%, rgba(35, 33, 53, 0.74) 100%);
}

.ll-hero__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.5;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: radial-gradient(700px 420px at 30% 45%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(700px 420px at 30% 45%, #000 20%, transparent 75%);
}

.ll-hero__inner { position: relative; }

.ll-hero__title {
    font-size: clamp(2.1rem, 4.4vw, 3.15rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin-bottom: 1.1rem;
}

.ll-underline {
    position: relative;
    white-space: normal;
    padding-bottom: 0.12em;
    background-image: linear-gradient(var(--ll-primary), var(--ll-primary));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 0.07em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    animation: ll-underline-in 1.4s 0.5s ease-out forwards;
}

.ll-hero__lede {
    color: rgba(255, 255, 255, 0.76);
    font-size: 1.06rem;
    max-width: 40rem;
    margin-bottom: 1.9rem;
}

.ll-hero__proof {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.6rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.62);
}

.ll-hero__proof li { display: inline-flex; align-items: center; gap: 0.45rem; }
.ll-hero__proof i { color: var(--ll-primary); font-size: 1rem; }

.ll-hero__cue {
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    animation: ll-bob 2.4s ease-in-out infinite;
}

.ll-hero__cue:hover { color: #fff; border-color: var(--ll-primary); }

@media (min-width: 992px) {
    .ll-hero__cue { display: inline-flex; }
}

.ll-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 1.35rem;
}

.ll-btn-ghost {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(4px);
}

.ll-btn-ghost:hover {
    background: #fff !important;
    color: var(--ll-secondary) !important;
    border-color: #fff;
}

.ll-btn-pulse { position: relative; }

.ll-btn-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(254, 135, 4, 0.55);
    animation: ll-btn-pulse 2.6s ease-out infinite;
    pointer-events: none;
}

/* The shortlist illustration that sits beside the hero copy. */

.ll-preview {
    background: rgba(255, 255, 255, 0.97);
    border-radius: var(--ll-radius-lg);
    box-shadow: 0 28px 60px rgba(12, 10, 26, 0.42);
    overflow: hidden;
    animation: ll-float 7s ease-in-out infinite;
}

.ll-preview__bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    background: var(--ll-secondary);
}

.ll-preview__bar > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
}

.ll-preview__bar > span:first-child { background: var(--ll-primary); }

.ll-preview__bar small {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
}

.ll-preview__body { padding: 0.5rem 1rem; }

.ll-preview__row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--ll-border);
}

.ll-preview__row:last-child { border-bottom: 0; }
.ll-preview__row--top .ll-match__rank { background: var(--ll-primary); }
.ll-preview__name { font-size: 0.85rem; font-weight: 600; color: var(--ll-text); }

.ll-preview__score {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ll-primary-dark);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.ll-preview__foot {
    padding: 0.7rem 1rem;
    background: var(--ll-canvas);
    border-top: 1px solid var(--ll-border);
    font-size: 0.74rem;
    color: var(--ll-muted);
    text-align: center;
}

/* The corridor ticker under the hero. */

.ll-ticker {
    background: var(--ll-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    overflow: hidden;
    padding: 0.85rem 0;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ll-ticker__track {
    display: flex;
    width: max-content;
    gap: 2.75rem;
    animation: ll-marquee 42s linear infinite;
}

.ll-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.83rem;
    letter-spacing: 0.03em;
}

.ll-ticker__item i { color: var(--ll-primary); }

/* Counters. */

.ll-counters .counter-style-1 p { margin-bottom: 0.4rem; }
.ll-counters .counter-style-1 i { color: var(--ll-primary); font-size: 2.2rem; }
.ll-counters .counter-style-1 span { font-size: 2.6rem; font-variant-numeric: tabular-nums; }
.ll-counters .counter-style-1 > div { color: rgba(255, 255, 255, 0.6); font-size: 0.86rem; }

.ll-counters__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2rem;
    margin-top: 2.5rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.86rem;
}

.ll-counters__meta span { display: inline-flex; align-items: center; gap: 0.5rem; }
.ll-counters__meta i { color: var(--ll-primary); }

/* Before/after comparison panels. */

.ll-compare {
    border-radius: var(--ll-radius-lg);
    padding: 1.85rem;
    border: 1px solid var(--ll-border);
    background: var(--ll-surface);
    height: 100%;
}

.ll-compare--before { background: #faf8f7; }

.ll-compare--after {
    border-color: rgba(254, 135, 4, 0.35);
    box-shadow: var(--ll-shadow-lifted);
}

.ll-compare__head { margin-bottom: 1.25rem; }

.ll-compare__tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ll-muted);
    margin-bottom: 0.4rem;
}

.ll-compare--after .ll-compare__tag { color: var(--ll-primary-dark); }
.ll-compare__head h3 { font-size: 1.3rem; font-weight: 600; margin: 0; color: var(--ll-text); }

.ll-compare__list { list-style: none; margin: 0; padding: 0; }

.ll-compare__list li {
    display: flex;
    gap: 0.65rem;
    padding: 0.6rem 0;
    font-size: 0.92rem;
    color: var(--ll-muted);
    border-bottom: 1px dashed var(--ll-border);
}

.ll-compare__list li:last-child { border-bottom: 0; }
.ll-compare__list i { flex: 0 0 auto; font-size: 1.05rem; margin-top: 0.08rem; }
.ll-compare--before .ll-compare__list i { color: #c7c1bc; }
.ll-compare--after .ll-compare__list i { color: var(--ll-success); }
.ll-compare--after .ll-compare__list li { color: var(--ll-text); }

/* Feature tiles. */

.ll-feature {
    background: var(--ll-surface);
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius-lg);
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ll-feature:hover {
    transform: translateY(-6px);
    border-color: rgba(254, 135, 4, 0.4);
    box-shadow: var(--ll-shadow-lifted);
}

.ll-feature__icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--ll-primary-soft);
    color: var(--ll-primary);
    margin-bottom: 1.1rem;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.ll-feature:hover .ll-feature__icon {
    background: var(--ll-primary);
    color: #fff;
    transform: rotate(-6deg);
}

.ll-feature h3 { font-size: 1.05rem; font-weight: 600; color: var(--ll-text); margin-bottom: 0.55rem; }
.ll-feature p { font-size: 0.89rem; color: var(--ll-muted); margin: 0; }

/* Numbered journey steps, joined by a line on wide screens. */

.ll-steps { position: relative; }

@media (min-width: 992px) {
    .ll-steps::before {
        content: "";
        position: absolute;
        top: 46px;
        left: 12%;
        right: 12%;
        height: 2px;
        background: repeating-linear-gradient(90deg, var(--ll-border) 0 10px, transparent 10px 20px);
        z-index: 0;
    }
}

.ll-step {
    position: relative;
    z-index: 1;
    background: var(--ll-surface);
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius-lg);
    padding: 1.6rem 1.4rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ll-step:hover { transform: translateY(-5px); box-shadow: var(--ll-shadow-lifted); }

.ll-step__number {
    position: absolute;
    top: -14px;
    right: 18px;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(35, 33, 53, 0.07);
    letter-spacing: -0.03em;
}

.ll-step__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ll-secondary);
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.ll-step:hover .ll-step__icon { background: var(--ll-primary); }
.ll-step h3 { font-size: 1.02rem; font-weight: 600; color: var(--ll-text); margin-bottom: 0.5rem; }
.ll-step p { font-size: 0.88rem; color: var(--ll-muted); margin: 0; }

/* The weighted-score panel. */

.ll-scoring__lede { color: rgba(255, 255, 255, 0.72); }

.ll-formula {
    margin-top: 1.5rem;
    padding: 0.9rem 1.1rem;
    text-align: center;
    color: #fff;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: var(--ll-radius);
}

.ll-weight { margin-bottom: 1.35rem; }
.ll-weight:last-child { margin-bottom: 0; }

.ll-weight__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.45rem;
}

.ll-weight__symbol {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.ll-weight__label { color: #fff; font-weight: 600; font-size: 0.95rem; }
.ll-weight__value { margin-left: auto; color: var(--ll-primary); font-weight: 700; }

.ll-weight__track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.ll-weight__fill { display: block; height: 100%; border-radius: 999px; }
.ll-weight__fill--proximity   { background: #fe8704; }
.ll-weight__fill--reputation  { background: #2f7fbf; }
.ll-weight__fill--price       { background: #2e9e6b; }
.ll-weight__fill--backhaul    { background: #7a5cc6; }
.ll-weight__fill--reliability { background: #d9860a; }

.ll-weight__note {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}

/* The backhaul diagram laid over the photograph. */

.ll-backhaul-visual { position: relative; }

.ll-backhaul-visual img {
    border-radius: var(--ll-radius-lg);
    width: 100%;
    display: block;
}

.ll-backhaul-visual__route {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 12%;
    width: 88%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 4px 10px rgba(12, 10, 26, 0.45));
}

.ll-route-path { fill: none; stroke-width: 3.5; stroke-linecap: round; }

.ll-route-path--out {
    stroke: var(--ll-primary);
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: ll-draw 2.2s 0.3s ease-out forwards;
}

.ll-route-path--back {
    stroke: #ffffff;
    stroke-opacity: 0.85;
    stroke-dasharray: 9 9;
    animation: ll-dash 1.4s linear infinite;
}

.ll-route-node { fill: #fff; stroke: var(--ll-secondary); stroke-width: 2.5; }
.ll-route-node--end { fill: var(--ll-primary); stroke: #fff; }

.ll-backhaul-visual__legend {
    position: absolute;
    left: 1rem;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--ll-radius);
    background: rgba(24, 22, 40, 0.78);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.74rem;
}

.ll-backhaul-visual__legend span { display: inline-flex; align-items: center; gap: 0.45rem; }

.ll-dot { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.ll-dot--out { background: var(--ll-primary); }
.ll-dot--back { background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 6px); }

.ll-mini-stat {
    background: var(--ll-surface);
    border: 1px solid var(--ll-border);
    border-left: 3px solid var(--ll-primary);
    border-radius: var(--ll-radius);
    padding: 0.85rem 1rem;
    height: 100%;
}

.ll-mini-stat strong {
    display: block;
    font-size: 1.4rem;
    color: var(--ll-text);
    line-height: 1.1;
}

.ll-mini-stat span { font-size: 0.8rem; color: var(--ll-muted); }

/* Escrow flow. */

.ll-flow { position: relative; padding-left: 0.25rem; }

.ll-flow__step {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.4rem;
    position: relative;
}

.ll-flow__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 44px;
    bottom: 6px;
    width: 2px;
    background: var(--ll-border);
}

.ll-flow__dot {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ll-primary-soft);
    color: var(--ll-primary-dark);
    font-size: 1.05rem;
    z-index: 1;
}

.ll-flow__dot--done { background: var(--ll-success-soft); color: var(--ll-success); }
.ll-flow__step strong { display: block; color: var(--ll-text); font-size: 0.98rem; margin-bottom: 0.15rem; }
.ll-flow__step p { margin: 0; font-size: 0.87rem; color: var(--ll-muted); }

/* The two role panels. */

.ll-audience {
    background: var(--ll-surface);
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius-lg);
    padding: 2.1rem 1.9rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ll-audience::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: var(--ll-primary-soft);
    transition: transform 0.4s ease;
}

.ll-audience--alt::after { background: rgba(35, 33, 53, 0.06); }
.ll-audience:hover { transform: translateY(-5px); box-shadow: var(--ll-shadow-lifted); }
.ll-audience:hover::after { transform: scale(1.25); }

.ll-audience__icon {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ll-primary);
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
}

.ll-audience--alt .ll-audience__icon { background: var(--ll-secondary); }
.ll-audience h3 { position: relative; font-size: 1.35rem; font-weight: 600; color: var(--ll-text); margin-bottom: 0.6rem; }
.ll-audience p { position: relative; }
.ll-audience ul { position: relative; list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; }

.ll-audience li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.9rem;
    color: var(--ll-text);
    padding: 0.35rem 0;
}

.ll-audience li i { color: var(--ll-success); margin-top: 0.15rem; }
.ll-audience .btn-theme { position: relative; }

/* Cards on the open-load board lift on hover. */

.ll-card--hover { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }

.ll-card--hover:hover {
    transform: translateY(-5px);
    border-color: rgba(254, 135, 4, 0.4);
    box-shadow: var(--ll-shadow-lifted);
}

/* Released reviews in the theme's testimonial carousel. */

#ll-testimonials .client-testimonial { padding: 1.9rem; height: 100%; }
#ll-testimonials .client-inner-content p { font-size: 0.95rem; color: var(--ll-text); margin-bottom: 0.6rem; }
#ll-testimonials .ll-avatar { width: 46px; height: 46px; font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Landing page keyframes
   -------------------------------------------------------------------------- */

@keyframes ll-kenburns {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(1.09) translate3d(-1.5%, -1%, 0); }
}

@keyframes ll-underline-in {
    to { background-size: 100% 0.07em; }
}

@keyframes ll-bob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}

@keyframes ll-btn-pulse {
    0%        { box-shadow: 0 0 0 0 rgba(254, 135, 4, 0.5); }
    70%, 100% { box-shadow: 0 0 0 16px rgba(254, 135, 4, 0); }
}

@keyframes ll-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

@keyframes ll-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes ll-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes ll-dash {
    to { stroke-dashoffset: -18; }
}

/* --------------------------------------------------------------------------
   Motion opt-out

   Everything above is decoration over content that is already rendered, so it
   can all be switched off. The JavaScript layer makes the same check before it
   initialises WOW, Lenis, the counters and the growing bars.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ll-hero__bg,
    .ll-underline,
    .ll-hero__cue,
    .ll-btn-pulse::after,
    .ll-preview,
    .ll-ticker__track,
    .ll-route-path--out,
    .ll-route-path--back,
    .ll-live-dot,
    .animated {
        animation: none !important;
    }

    .ll-underline { background-size: 100% 0.07em; }
    .ll-route-path--out { stroke-dashoffset: 0; }
    .ll-ticker__track { justify-content: center; flex-wrap: wrap; width: 100%; }

    .ll-feature,
    .ll-step,
    .ll-audience,
    .ll-card--hover {
        transition: none;
    }

    .ll-feature:hover,
    .ll-step:hover,
    .ll-audience:hover,
    .ll-card--hover:hover {
        transform: none;
    }

    .wow { visibility: visible !important; }
}

/* --------------------------------------------------------------------------
   Lenis smooth scrolling

   Lenis drives the scroll position itself, so the document must not also be
   applying native smooth scrolling or clamping its own height while it does.
   These are the rules Lenis expects the host page to provide.
   -------------------------------------------------------------------------- */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* Bars that grow into place once their section is on screen. The final width
   is set from JavaScript; the easing lives here. */

.ll-score-bar__seg,
.ll-weight__fill {
    transition: width 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .ll-score-bar__seg,
    .ll-weight__fill {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Notifications
   -------------------------------------------------------------------------- */

.ll-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ll-border);
    border-radius: 50%;
    background: var(--ll-surface);
    color: var(--ll-text);
    font-size: 1.15rem;
    cursor: pointer;
}

.ll-bell__count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ll-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.ll-bell__panel { width: min(340px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; }

.ll-notice {
    display: flex;
    gap: 0.65rem;
    padding: 0.6rem 0.65rem;
    border-radius: 6px;
    color: var(--ll-text);
    text-decoration: none;
    font-size: 0.85rem;
}

.ll-notice:hover { background: var(--ll-primary-soft); color: var(--ll-text); }
.ll-notice > i { margin-top: 0.15rem; color: var(--ll-muted); font-size: 1rem; }
.ll-notice.is-unread > i { color: var(--ll-primary); }
.ll-notice.is-unread .ll-notice__title { font-weight: 700; }
.ll-notice__title, .ll-notice__body, .ll-notice__time { display: block; }
.ll-notice__body { color: var(--ll-muted); }
.ll-notice__time { color: var(--ll-muted); font-size: 0.75rem; margin-top: 0.1rem; }

/* --------------------------------------------------------------------------
   Maps
   -------------------------------------------------------------------------- */

.ll-map--small { height: clamp(240px, 42vh, 260px); }
.ll-map--medium { height: clamp(280px, 50vh, 340px); }

.ll-map--small,
.ll-map--medium {
    width: 100%;
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius);
    overflow: hidden;
    background: #eef1f3;
}

.ll-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--ll-muted);
}

.ll-map-legend__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 0.3rem;
    border-radius: 50%;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Driver pages - large targets for use in a cab
   -------------------------------------------------------------------------- */

.ll-driver-step {
    display: block;
    width: 100%;
    padding: 1rem;
    border: 0;
    border-radius: var(--ll-radius);
    background: var(--ll-primary);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
}

.ll-driver-step:hover { background: var(--ll-primary-dark); }

.ll-share {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--ll-radius);
    border: 1px solid var(--ll-border);
}

.ll-share.is-on { border-color: var(--ll-success); background: rgba(46, 158, 107, 0.08); }
.ll-share.is-error { border-color: #d2453c; background: rgba(210, 69, 60, 0.06); }

.ll-trip-tile {
    display: block;
    padding: 1rem;
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius);
    background: var(--ll-surface);
    color: var(--ll-text);
    text-decoration: none;
}

.ll-trip-tile:hover { border-color: var(--ll-primary); color: var(--ll-text); }

.ll-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem; }

.ll-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--ll-border);
    border-radius: 8px;
    font-size: 0.88rem;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Small screens

   The application is used from a phone more than from a desk - drivers in a
   cab, operators at a depot - so these rules are not a fallback. The base
   rules above describe the wide layout; everything that has to change when
   the screen narrows lives here, in one place, so a new page inherits it.
   -------------------------------------------------------------------------- */

/* A card header keeps its title readable and lets the actions drop below it
   rather than squeezing a button until its label is cut off. */
.ll-card__header { flex-wrap: wrap; }
.ll-card__header > div:first-child { flex: 1 1 14rem; min-width: 0; }
.ll-card__header > div:last-child:not(:first-child) { flex: 0 0 auto; }
.ll-card__header .btn-theme { white-space: nowrap; flex-shrink: 0; min-height: 36px; }

/* Label and value rows: a long value wraps instead of pushing the page wide. */
dl > .d-flex { gap: 1rem; }
dl > .d-flex > dt { flex: 0 0 auto; }
dl > .d-flex > dd { min-width: 0; overflow-wrap: anywhere; }

.pagination { flex-wrap: wrap; }

.ll-share { flex-wrap: wrap; }

@media (max-width: 991.98px) {
    /* The nav drawer never covers the whole screen, so the page behind it
       stays visible and tapping it closes the drawer. */
    .ll-sidebar { width: min(var(--ll-sidebar-width), 86vw); flex-basis: auto; }
}

@media (max-width: 767.98px) {
    /* Browsers on iOS zoom the page into any field set below 16px and do not
       zoom back out, so a form is unusable until the person pinches. */
    .ll-input,
    .ll-select,
    .ll-textarea,
    .form-control {
        font-size: 16px;
        min-height: 44px;
    }

    .ll-textarea { min-height: 96px; }

    .ll-topbar { padding: 0.7rem 1rem; gap: 0.75rem; }
    .ll-card__header { padding: 0.95rem 1.1rem; }
    .ll-card__body { padding: 1.1rem; }
    .ll-page-head h1 { font-size: 1.3rem; }

    /* Links that sit on a form row are easy to miss with a thumb. */
    .ll-place-locate { min-height: 36px; margin-bottom: 0; }
    .ll-suggest__item { padding: 0.7rem 0.75rem; }

    /* Tables become one block per row. Each cell carries its column heading
       (set from the <th> by components.js), so nothing is hidden off to the
       right the way a sideways-scrolling table hides it. The heading row is
       kept for screen readers and only moved out of sight. */
    .ll-table-wrap { overflow-x: visible; }

    .ll-table,
    .ll-table tbody,
    .ll-table tr,
    .ll-table td { display: block; }

    .ll-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .ll-table tbody tr {
        padding: 0.8rem 1rem;
        border-bottom: 1px solid var(--ll-border);
    }

    .ll-table tbody tr:last-child { border-bottom: 0; }
    .ll-table td { padding: 0.3rem 0; border-bottom: 0; }

    .ll-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.1rem;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--ll-muted);
    }

    /* The first cell names the row, so it needs no label of its own. */
    .ll-table td:first-child::before { content: none; }

    /* A width cap that suits a column is wrong once the cell is a full row. */
    .ll-table td[style*="max-width"] { max-width: none !important; }
}

@media (max-width: 575.98px) {
    /* Bootstrap rows bleed half a gutter (15px) past their container, so this
       must stay at or above 15px or every row overflows the page. */
    .ll-content { padding: 1.05rem; }

    /* The label sits above its actions rather than being squeezed beside them. */
    .ll-place-head { flex-direction: column; align-items: stretch; }
    .ll-place-actions { justify-content: flex-start; gap: 0.1rem 1.25rem; }

    .ll-stat { padding: 1rem; }
    .ll-stat__value { font-size: 1.5rem; }
}

@media print {
    .ll-table-wrap { overflow: visible; }
}