/**
 * Laydn guided tour — LOAD DETAIL screen.
 *
 * Prefix: .lwl-  (LaydnWalkthrough / Load). One-to-one with the real app's
 * .ld-* classes in pages/system-load.php, but namespaced so nothing collides
 * with another tour screen. Every selector here is either .lwl-prefixed or
 * scoped under .lw-scaler; the one keyframe is lwl-pulse.
 *
 * ⚠️ The real file is written DARK and repainted by a ~250-line `.ld-light`
 *    block at the bottom. These are the LIGHT values only — that is what a
 *    viewer actually sees. Two things on this screen stay dark on purpose, as
 *    they do in the product: the hero and the route map.
 * ⚠️ Every colour is explicit, with a literal fallback inside each var(), so a
 *    missing token can never fall through to the marketing body's var(--white)
 *    and paint white on white.
 * ⚠️ THE MARKETING SITE'S GLOBAL RULES REACH INTO THE STAGE. style.css has
 *      a { color: volt }   a:hover { color: fire }   p { color: rgba(242,242,242,.55) }
 *    `a:hover` is 0,1,1, which beats a bare class. So anchors here are written
 *    as `.lw-scaler a.lwl-x` (0,2,1) and paragraphs as `.lw-scaler p.lwl-x`.
 *    Real-mouse :hover deliberately changes nothing — this is a film; only the
 *    film's own cursor (.lw-hover, added by the engine) shows hover states.
 * ⚠️ No media queries: the stage is a fixed 1280x820 world (desk) or 420x880
 *    (hand), so viewport breakpoints would fire against the browser, not the
 *    screen. Desk sizes are tuned for the 614px main column that 1280 leaves
 *    after the sidebar; the hand layout is the block at the bottom, written
 *    as .lw-scaler.is-hand rules.
 */

/* ⚠️ THE ENGINE HIDES BY SETTING .hidden — and the UA rule `[hidden]{display:none}`
   loses to any class rule that sets `display`. Half the states on this screen are
   flex or inline-block, so without this they would never hide. Scoped to this
   screen's own containers so no other screen is touched. */
.lwl-flash[hidden],
.lwl-header [hidden],
.lwl-main [hidden],
.lwl-aside [hidden],
.lwl-backloads [hidden]{ display:none !important; }

/* Anchors: style.css gives every `a` a colour transition. The engine's rule is
   that nothing moves on its own clock (pause pauses the picture), so off. */
.lw-scaler a.lwl-back,
.lw-scaler a.lwl-contact-row,
.lw-scaler a.lwl-backloads-all,
.lw-scaler a.lwl-backload-card,
.lw-scaler a.lwl-btn-primary,
.lw-scaler p.lwl-driver-none a{ transition:none; }
/* "Finish setup to bid" is a link in the product, styled as the volt button.
   0,2,1 beats style.css's a / a:hover, so a real mouse can't turn it fire. */
.lw-scaler a.lwl-btn-primary,
.lw-scaler a.lwl-btn-primary:hover{ color:#0a0a0a; text-decoration:none; }

/* ---------- back button ---------- */
.lw-scaler a.lwl-back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  padding:7px 13px; border-radius:99px; text-decoration:none; cursor:default;
  background:#ffffff; border:1px solid var(--lw-line,#e3e6ea);
  color:var(--lw-body,#5a6068); font-size:12.5px; line-height:1.4;
  box-shadow:0 1px 2px rgba(15,18,22,.04);
}
.lw-scaler a.lwl-back i{ color:var(--lw-volt-ink,#4a6b00); font-size:11px; }
.lw-scaler a.lwl-back.lw-hover{ background:rgba(200,241,53,.10); border-color:var(--lw-volt,#C8F135); color:var(--lw-volt-ink,#4a6b00); }
.lw-scaler a.lwl-back.lw-hover i{ transform:translateX(-3px); }

/* ---------- flash ---------- */
.lwl-flash{
  display:flex; align-items:center; gap:9px; margin-bottom:16px;
  padding:12px 16px; border-radius:9px; font-size:13px; line-height:1.4;
  background:rgba(200,241,53,.18); border:1px solid var(--lw-volt,#C8F135); color:var(--lw-ink,#0a0a0a);
}
.lwl-flash i{ color:var(--lw-volt-ink,#4a6b00); flex:none; }

/* ---------- dark hero ---------- */
.lwl-header{
  background:#0a0a0a; border:1px solid var(--lw-volt,#C8F135); border-radius:14px;
  padding:20px 22px; margin-bottom:18px; color:#F2F2F2;
  box-shadow:0 0 0 4px rgba(200,241,53,.10), 0 12px 28px rgba(15,18,22,.20);
}
.lwl-header-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.lwl-status-pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
  font-family:'Inter',system-ui,sans-serif; font-size:11px; font-weight:700; line-height:1.3;
  letter-spacing:.04em; text-transform:uppercase;
}
.lwl-status-pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.lwl-status-pill.is-live{ color:var(--lw-volt,#C8F135); background:rgba(200,241,53,.10); }
.lwl-status-pill.is-awarded{ color:var(--lw-cyan,#00C9A7); background:rgba(0,201,167,.10); }
/* Completed is the product's grey, on the dark hero. Awarded / Collected /
   Delivered all share the cyan pill (system-load.php $status_meta). */
.lwl-status-pill.is-completed{ color:#9ca3af; background:rgba(255,255,255,.05); }
.lwl-pills-won{ display:inline-flex; align-items:center; gap:10px; }

.lwl-header-mid{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.lw-scaler h1.lwl-route{
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin:0; min-width:0;
  font-family:'Anta','Inter',sans-serif; font-weight:400; font-size:30px; line-height:1.1;
  letter-spacing:-.01em; color:#F2F2F2;
}
.lwl-route .pc{ color:rgba(242,242,242,.55); font-size:.62em; margin-left:2px; white-space:nowrap; }
.lwl-route .arrow{ color:var(--lw-volt,#C8F135); font-size:.6em; margin:0 2px; }
/* A forced line break before the arrow; only switched on in the hand layout. */
.lwl-route-br{ display:none; }
/* The redaction lift: the outcode is always there, this is the rest of it.
   white-space:pre keeps the leading space; inline-block lets a reveal op
   transform it. ⚠️ No overflow:hidden — on an inline-block that moves the
   baseline to the bottom edge and lifts "4BQ" several px above "WN3". */
.lwl-pc-ext{ display:inline-block; white-space:pre; vertical-align:baseline; }

.lwl-price{ font-family:'Anta','Inter',sans-serif; font-size:32px; line-height:1; letter-spacing:-.01em; color:var(--lw-volt,#C8F135); font-variant-numeric:tabular-nums; white-space:nowrap; }

.lwl-header-meta{ display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; margin-top:12px; font-size:12.5px; line-height:1.4; color:rgba(242,242,242,.70); }
.lwl-header-meta i{ color:var(--lw-volt,#C8F135); margin-right:6px; font-size:11px; }

/* ---------- grid ---------- */
.lwl-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; }
.lwl-main{ min-width:0; }
.lwl-aside{ display:flex; flex-direction:column; gap:14px; min-width:0; }

/* ---------- section cards ---------- */
.lwl-section{
  background:#ffffff; border:1px solid var(--lw-line,#e3e6ea); border-radius:14px;
  padding:18px 20px; margin-bottom:14px; color:var(--lw-ink,#0a0a0a);
}
.lw-scaler .lwl-section h3{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 14px;
  font-family:'Anta','Inter',sans-serif; font-size:12.5px; font-weight:600; line-height:1.3;
  letter-spacing:.10em; text-transform:uppercase; color:var(--lw-body,#5a6068);
}
.lwl-section h3 > i{ color:var(--lw-volt-ink,#4a6b00); font-size:12px; }
.lwl-count{ margin-left:auto; font-family:'Inter',system-ui,sans-serif; font-size:11px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--lw-faint,#8a909a); }

.lwl-redacted-pill{
  display:inline-flex; align-items:center; gap:6px; margin-left:4px; padding:3px 9px;
  border-radius:999px; background:rgba(200,241,53,.18); border:1px solid var(--lw-volt,#C8F135);
  color:var(--lw-volt-ink,#4a6b00); font-family:'Inter',system-ui,sans-serif; font-size:10px; font-weight:500;
  line-height:1.3; letter-spacing:0; text-transform:none; white-space:nowrap;
}
.lwl-redacted-pill i{ font-size:9px; color:var(--lw-volt-ink,#4a6b00); }

/* ---------- stops timeline ---------- */
.lwl-stops{ list-style:none; margin:0; padding:0; position:relative; }
.lwl-stop{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:13px; margin:0; padding-bottom:18px; position:relative; }
.lwl-stop:last-child{ padding-bottom:0; }
.lwl-stop:not(:last-child)::before{
  content:''; position:absolute; left:16px; top:30px; bottom:2px; width:2px;
  background:var(--lw-volt,#C8F135); opacity:.4;
}
.lwl-stop-marker{
  width:34px; height:34px; border-radius:50%; flex:none; position:relative; z-index:1;
  background:var(--lw-volt,#C8F135); border:1.5px solid var(--lw-volt,#C8F135); color:#0a0a0a;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px;
}
.lwl-stop-body{ min-width:0; }
.lwl-stop-type{ font-size:10px; font-weight:600; line-height:1.3; letter-spacing:.10em; text-transform:uppercase; color:#6a6f78; margin-bottom:3px; }
.lwl-stop-town{ font-family:'Anta','Inter',sans-serif; font-size:17px; line-height:1.2; color:var(--lw-ink,#0a0a0a); margin-bottom:4px; }
.lwl-stop-town .pc{ color:var(--lw-body,#5a6068); font-size:12.5px; margin-left:4px; white-space:nowrap; }

.lwl-stop-address{ display:flex; flex-direction:column; margin:6px 0 4px; font-size:12.5px; line-height:1.45; color:var(--lw-ink,#0a0a0a); }
.lwl-stop-address strong{ color:var(--lw-ink,#0a0a0a); font-weight:600; }
.lwl-stop-address span{ color:var(--lw-body,#5a6068); font-size:11.5px; }

.lwl-stop-notes{
  display:flex; gap:8px; align-items:flex-start; margin:6px 0; padding:8px 10px;
  background:rgba(255,92,53,.06); border-left:2px solid var(--lw-fire,#ff5c35); border-radius:0 6px 6px 0;
  font-size:12px; line-height:1.45; color:var(--lw-ink,#0a0a0a);
}
.lwl-stop-notes i{ color:var(--lw-fire,#ff5c35); font-size:11px; margin-top:2px; flex:none; }

.lwl-stop-time{ font-size:12.5px; line-height:1.45; color:var(--lw-body,#5a6068); }
.lwl-stop-time i{ color:var(--lw-volt-ink,#4a6b00); margin-right:4px; font-size:10px; }

/* ---------- route map (stays dark, like the real Leaflet card) ----------
   viewBox 560x230 fitted with `meet`: nothing is ever cropped, and the ground
   and grid overhang the viewBox so the letterbox is invisible. At desk the
   map is 572x230, so the fit is 1:1. Label sizes are CSS so the hand layout
   can size them up (CSS beats the SVG presentation attributes). */
.lwl-map{ height:230px; border-radius:10px; overflow:hidden; background:#1a1a1a; position:relative; }
.lwl-map svg{ display:block; width:100%; height:100%; }
.lwl-map-town{ font-family:'Anta','Inter',sans-serif; font-size:14px; fill:#F2F2F2; }
.lwl-map-pc{ font-family:'Inter',system-ui,sans-serif; font-size:11.5px; fill:#F2F2F2; fill-opacity:.62; }
.lwl-map-num{ font-family:'Anta','Inter',sans-serif; font-size:13px; fill:#0a0a0a; }
/* A reveal op on a pin scales it around its own centre, not the SVG origin. */
.lwl-map-pin,
.lwl-map-dot{ transform-box:fill-box; transform-origin:50% 50%; }

/* ---------- spec grid ---------- */
.lwl-spec-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; }
.lwl-spec-item{ min-width:0; }
.lwl-spec-item .lbl{ font-size:10px; line-height:1.3; letter-spacing:.10em; text-transform:uppercase; color:#6a6f78; margin-bottom:4px; }
.lwl-spec-item .val{ font-family:'Anta','Inter',sans-serif; font-size:15px; color:var(--lw-ink,#0a0a0a); line-height:1.2; }

/* ---------- aside panels ---------- */
.lwl-panel{
  background:#ffffff; border:1px solid var(--lw-line,#e3e6ea); border-radius:14px;
  padding:16px 18px; color:var(--lw-ink,#0a0a0a); box-shadow:0 1px 2px rgba(15,18,22,.04);
}
.lwl-panel.is-action{
  background:linear-gradient(155deg, rgba(200,241,53,.16), #ffffff 70%);
  border-color:var(--lw-volt,#C8F135);
}
.lw-scaler .lwl-panel h4{
  margin:0 0 14px; font-family:'Anta','Inter',sans-serif; font-size:11.5px; font-weight:600; line-height:1.3;
  letter-spacing:.10em; text-transform:uppercase; color:var(--lw-body,#5a6068);
}

.lwl-shipper{ display:flex; align-items:center; gap:12px; }
.lwl-shipper-avatar{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:var(--lw-volt,#C8F135); color:#0a0a0a; font-family:'Anta','Inter',sans-serif; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center;
}
.lwl-shipper-who{ min-width:0; flex:1; }
.lwl-shipper-name{ font-family:'Anta','Inter',sans-serif; font-size:15px; color:var(--lw-ink,#0a0a0a); line-height:1.2; }
.lwl-shipper-meta{ font-size:11px; line-height:1.4; color:var(--lw-body,#5a6068); margin-top:2px; }

.lwl-contact-locked{
  margin-top:14px; padding:12px 14px; border-radius:9px;
  background:#f4f6f8; border:1px dashed #c4cad2; color:var(--lw-body,#5a6068);
  font-size:12px; line-height:1.45;
}
.lwl-contact-locked i{ color:var(--lw-volt-ink,#4a6b00); margin-right:5px; }

.lwl-contact{ margin-top:14px; padding-top:14px; border-top:1px solid var(--lw-hair,#eef0f3); display:flex; flex-direction:column; gap:8px; }
.lw-scaler a.lwl-contact-row{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
  background:#ffffff; border:1px solid var(--lw-line,#e3e6ea); color:var(--lw-ink,#0a0a0a);
  text-decoration:none; font-size:13px; line-height:1.3; cursor:default;
}
.lw-scaler a.lwl-contact-row i{ color:var(--lw-volt-ink,#4a6b00); font-size:12px; width:14px; text-align:center; flex:none; }
.lw-scaler a.lwl-contact-row.lw-hover{ border-color:var(--lw-volt,#C8F135); }

/* ---------- action panel bodies ---------- */
/* ⚠️ font-size is !important only to beat style.css's touch-device rule
   (textarea{font-size:16px!important}), which would otherwise blow the demo
   message up on phones. Safe here: the field is readonly, tabindex -1 and
   pointer-events:none, so it can never take focus and trigger iOS zoom. */
.lw-scaler .lwl-interest-note{
  display:block; width:100%; min-height:64px; margin:0 0 10px; padding:9px 12px;
  border:1px solid #d6dae0; border-radius:8px; background:#ffffff; color:var(--lw-ink,#0a0a0a);
  font-family:'Inter',system-ui,sans-serif; font-size:12.5px !important; line-height:1.45;
  resize:vertical; pointer-events:none; box-shadow:none; outline:0;
}
.lw-scaler .lwl-interest-note::placeholder{ color:var(--lw-faint,#8a909a); opacity:1; }
/* The product's focus ring, shown while the film's cursor is in it and while it types. */
.lw-scaler .lwl-interest-note.lw-hover,
.lw-scaler .lwl-interest-note.lw-caret{ border-color:var(--lw-volt,#C8F135); box-shadow:0 0 0 3px rgba(200,241,53,.25); }

.lwl-btn-primary{
  position:relative; overflow:hidden;              /* clips the engine's press ripple */
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin:0; padding:13px 20px; border:0; border-radius:10px;
  background:var(--lw-volt,#C8F135); color:#0a0a0a; font-family:'Anta','Inter',sans-serif; font-size:14px; line-height:1.2;
  cursor:default; text-decoration:none;
}
.lwl-btn-primary i{ color:#0a0a0a; }
.lwl-btn-primary.lw-hover{ background:#d6ff52; }
/* The shared ripple is volt, which vanishes on a volt button; press with ink instead. */
.lwl-btn-primary.lw-rippling::after{ background:rgba(10,10,10,calc(var(--lw-ripple-o,0) * .5)); }

.lwl-btn-ghost{
  position:relative; overflow:hidden;
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin:8px 0 0; padding:10px 20px; border-radius:10px;
  background:#ffffff; border:1px solid var(--lw-line,#e3e6ea); color:var(--lw-body,#5a6068);
  font-family:'Inter',system-ui,sans-serif; font-size:12.5px; line-height:1.3; cursor:default; text-decoration:none;
}
.lwl-btn-ghost i{ color:var(--lw-body,#5a6068); }
.lwl-btn-ghost.lw-hover{ color:var(--lw-ink,#0a0a0a); border-color:#b8bdc4; background:#f7f8fa; }

.lwl-helper{ margin-top:10px; font-size:11px; line-height:1.45; color:var(--lw-body,#5a6068); text-align:center; }

.lwl-action-status{
  display:flex; align-items:center; gap:10px; margin-bottom:10px; padding:12px 14px;
  border-radius:9px; background:#f4f6f8; border:1px solid var(--lw-line,#e3e6ea);
  color:var(--lw-ink,#0a0a0a); font-size:12.5px; line-height:1.4;
}
.lwl-action-status i{ color:var(--lw-volt-ink,#4a6b00); font-size:14px; flex:none; }

/* ---------- lifecycle stepper ----------
   ⚠️ Done dots are VOLT, the CURRENT dot is FIRE. Getting that backwards is the
   single most likely visual error on this screen. As in the product's light
   mode: the current dot keeps its volt ring and volt pulse, and every label
   is ink (only the dot says which stage is next).
   One stepper for every stage: each item holds a dot per stage value
   (data-when-stage) stacked in the same 24px slot, so the hooks on the items
   stay unique. The connector is the product's: rgba(255,255,255,.08) — which
   on the light page is effectively invisible — until the stage above it is
   done, when it turns volt at 40%. :has() reads which dot is showing. */
.lwl-stepper{
  display:flex; flex-direction:column; gap:14px; margin:0 0 14px; padding:14px;
  background:#ffffff; border:1px solid var(--lw-line,#e3e6ea); border-radius:12px;
  box-shadow:0 1px 2px rgba(15,18,22,.04);
}
.lwl-stage{ display:flex; align-items:flex-start; gap:12px; position:relative; }
.lwl-stage:not(:last-child)::before{
  content:''; position:absolute; left:11px; top:26px; width:2px; height:calc(100% + 6px);
  background:rgba(255,255,255,.08);
}
.lwl-stage:not(:last-child):has(> .lwl-stage-dot > .lwl-dot.is-done:not([hidden]))::before{ background:rgba(200,241,53,.40); }
.lwl-stage-dot{ flex:none; position:relative; z-index:1; width:24px; height:24px; }
.lwl-dot{
  position:absolute; inset:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:10px;
  background:#e9ebef; border:1.5px solid rgba(255,255,255,.15); color:var(--lw-body,#5a6068);
}
.lwl-dot i{ color:inherit; font-size:10px; }
.lwl-dot.is-done{ background:var(--lw-volt,#C8F135); border-color:var(--lw-volt,#C8F135); color:#0a0a0a; }
.lwl-dot.is-current{ background:var(--lw-fire,#ff5c35); border-color:var(--lw-volt,#C8F135); color:#ffffff; }
.lwl-stage-pulse{ width:8px; height:8px; border-radius:50%; background:var(--lw-volt,#C8F135); animation:lwl-pulse 1.6s ease-out infinite; }
/* Pause pauses the picture: the pulse holds (at its ringless first frame) whenever the film isn't playing. */
.lw:not(.is-playing) .lw-scaler .lwl-stage-pulse{ animation-play-state:paused; }
@keyframes lwl-pulse{
  0%{ box-shadow:0 0 0 0 rgba(200,241,53,.7); }
  100%{ box-shadow:0 0 0 8px rgba(200,241,53,0); }
}
.lwl-stage-meta{ flex:1; min-width:0; padding-top:2px; }
.lwl-stage-label{ font-family:'Anta','Inter',sans-serif; font-size:12.5px; color:var(--lw-ink,#0a0a0a); line-height:1.2; }
.lwl-stage-time{ font-size:11px; line-height:1.4; color:var(--lw-body,#5a6068); margin-top:2px; }

/* ---------- driver assignment ---------- */
.lwl-driver{ padding:13px; border-radius:12px; background:#ffffff; border:1px solid var(--lw-line,#e3e6ea); margin-bottom:12px; color:var(--lw-ink,#0a0a0a); }
.lwl-driver-lbl{
  display:flex; align-items:center; gap:7px; margin-bottom:8px;
  font-size:10.5px; font-weight:700; line-height:1.3; letter-spacing:.07em; text-transform:uppercase; color:#6a6f78;
}
.lwl-driver-lbl i{ color:var(--lw-volt-ink,#4a6b00); }
.lw-scaler p.lwl-driver-none{ margin:0; font-size:12.5px; line-height:1.5; color:var(--lw-body,#5a6068); }
.lw-scaler p.lwl-driver-none a{ color:var(--lw-volt-ink,#4a6b00); font-weight:700; text-decoration:none; cursor:default; }
/* An account WITH drivers gets the product's native select, resting on "Nobody yet". */
.lwl-driver-sel{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:11px 12px; border-radius:10px; background:#ffffff; border:1px solid #d8dde3;
  color:var(--lw-ink,#0a0a0a); font-size:14px; line-height:1.3;
}
.lwl-driver-sel span{ color:var(--lw-ink,#0a0a0a); }
.lwl-driver-sel i{ color:#6a6f78; font-size:11px; }

/* ---------- the bid gate (not compliant yet) ----------
   The product's .ld-action-status.is-compliance-gate as its light block paints
   it: amber card, brown ink. Then its step line, the volt link-button and the
   reassurance line. */
.lwl-action-status.is-gate{ background:#fff7e6; border-color:#f0c674; color:#4a2e00; }
.lwl-action-status.is-gate span{ color:#4a2e00; }
.lwl-action-status.is-gate i{ color:#7a4a00; font-size:14px; }
.lwl-helper.is-steps{ margin:10px 0 12px; }

/* ---------- your team already bid ----------
   ⚠️ DELIBERATE DEPARTURE from the live product, for legibility: its
   .ld-team-interest has no .ld-light override, so on the real light page the
   heading and "Dean Kilner · 6 mins ago" render #F2F2F2 on white (invisible)
   and the disabled button nearly vanishes. Same copy, same layout, painted in
   the light palette here. Reported for a product fix. */
.lwl-team{
  margin:0 0 12px; padding:14px; border-radius:10px; color:var(--lw-ink,#0a0a0a);
  background:linear-gradient(135deg, rgba(200,241,53,.14), rgba(255,255,255,.70));
  border:1px solid rgba(200,241,53,.55);
}
.lwl-team-row{ display:flex; align-items:flex-start; gap:12px; }
.lwl-team-row > i{
  flex:none; width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(200,241,53,.30); color:var(--lw-volt-ink,#4a6b00); font-size:13px;
}
.lwl-team-row > div{ flex:1; min-width:0; line-height:1.4; }
.lwl-team-row strong{ display:block; margin-bottom:2px; font-family:'Anta','Inter',sans-serif; font-weight:400; font-size:13px; color:var(--lw-ink,#0a0a0a); }
.lwl-team-row span{ font-size:12px; color:var(--lw-body,#5a6068); }
.lwl-team-note{
  display:flex; gap:8px; margin-top:10px; padding:9px 12px; border-radius:7px;
  background:rgba(10,10,10,.05); color:#3a3f45; font-size:12px; line-height:1.5;
}
.lwl-team-note i{ flex:none; margin-top:3px; font-size:10px; color:rgba(74,107,0,.60); }
.lwl-team-note span{ color:#3a3f45; }
/* The product's disabled "I want this job": greyed, opacity .55, not-allowed. */
.lwl-btn-primary.is-disabled{ background:#e9ebef; color:var(--lw-body,#5a6068); opacity:.55; cursor:not-allowed; }
.lwl-btn-primary.is-disabled i{ color:var(--lw-body,#5a6068); }
.lwl-btn-primary.is-disabled.lw-hover{ background:#e9ebef; }

/* ---------- proof of collection / delivery ----------
   Label, "Signed by <name>", then the signature as the product saves it: a
   white 492x220 canvas PNG shown width:100%, max-height:120px, contain, on the
   light page's #f7f8fa. At desk width it fills; narrower boxes letterbox. */
.lwl-pod{
  margin:0 0 10px; padding:12px 14px; border-radius:9px; color:var(--lw-ink,#0a0a0a);
  background:#ffffff; border:1px solid var(--lw-line,#e3e6ea); box-shadow:0 1px 2px rgba(15,18,22,.04);
}
.lwl-pod-lbl{ margin-bottom:6px; font-size:10px; line-height:1.3; letter-spacing:.10em; text-transform:uppercase; color:#6a6f78; }
.lwl-pod-name{ margin-bottom:8px; font-size:13px; line-height:1.4; color:var(--lw-ink,#0a0a0a); }
.lwl-pod-name strong{ font-weight:600; color:var(--lw-ink,#0a0a0a); }
.lwl-pod-sig{ height:114px; border-radius:6px; overflow:hidden; background:#f7f8fa; }
.lwl-pod-sig svg{ display:block; width:100%; height:100%; }
.lwl-ink{ fill:none; stroke:#0a0a0a; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- backloads ---------- */
.lwl-backloads{
  margin-top:18px; padding:20px 22px; border-radius:16px; color:var(--lw-ink,#0a0a0a);
  background:linear-gradient(160deg, rgba(200,241,53,.10), #ffffff 55%);
  border:1px solid var(--lw-volt,#C8F135); box-shadow:0 1px 3px rgba(15,18,22,.05);
}
.lwl-backloads-head{ display:flex; align-items:center; justify-content:space-between; gap:6px 12px; flex-wrap:wrap; margin-bottom:6px; }
.lw-scaler .lwl-backloads-head h3{
  display:flex; align-items:center; gap:9px; margin:0;
  font-family:'Anta','Inter',sans-serif; font-size:15px; font-weight:600; line-height:1.25; letter-spacing:.01em; color:var(--lw-ink,#0a0a0a);
}
.lwl-backloads-head h3 i{ color:var(--lw-volt-ink,#4a6b00); font-size:14px; }
.lw-scaler a.lwl-backloads-all{ display:inline-flex; align-items:center; gap:6px; font-size:12px; line-height:1.4; color:var(--lw-volt-ink,#4a6b00); text-decoration:none; white-space:nowrap; cursor:default; }
.lw-scaler a.lwl-backloads-all i{ font-size:10px; color:var(--lw-volt-ink,#4a6b00); }
.lw-scaler p.lwl-backloads-intro{ margin:0 0 14px; max-width:70ch; font-size:12.5px; line-height:1.5; color:var(--lw-body,#5a6068); }

.lwl-backloads-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.lw-scaler a.lwl-backload-card{
  display:flex; flex-direction:column; gap:10px; min-width:0; padding:14px 15px; border-radius:12px;
  background:#ffffff; border:1px solid var(--lw-line,#e3e6ea); color:var(--lw-ink,#0a0a0a);
  text-decoration:none; cursor:default; box-shadow:0 1px 2px rgba(15,18,22,.04);
}
/* ⚠️ Dimmed with filter, NOT opacity: a reveal op writes inline style.opacity
   (ending at 1), which would silently undo an opacity-based dim. */
.lw-scaler a.lwl-backload-card.is-marginal{ filter:opacity(.74); }
.lw-scaler a.lwl-backload-card.lw-hover{
  border-color:var(--lw-volt,#C8F135); filter:none; translate:0 -1px;
  background:linear-gradient(135deg, rgba(200,241,53,.06), #ffffff 60%);
}
.lwl-backload-route{
  display:flex; align-items:center; gap:4px 8px; flex-wrap:wrap;
  font-family:'Anta','Inter',sans-serif; font-size:13.5px; line-height:1.25; color:var(--lw-ink,#0a0a0a);
}
.lwl-backload-route > span{ white-space:nowrap; }
.lwl-backload-route .pc{ color:var(--lw-faint,#8a909a); font-size:.78em; }
.lwl-backload-route > i{ color:#b0b6be; font-size:11px; }
.lwl-backload-meta{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; line-height:1.4; color:var(--lw-body,#5a6068); }
.lwl-backload-meta i{ color:var(--lw-volt-ink,#4a6b00); font-size:10px; width:12px; }
.lwl-backload-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid var(--lw-hair,#eef0f3); }
.lwl-backload-spec{ font-size:11px; line-height:1.3; color:#6a6f78; }
.lwl-backload-price{ font-family:'Anta','Inter',sans-serif; font-size:15px; color:var(--lw-volt-ink,#4a6b00); font-variant-numeric:tabular-nums; }

/* ---------- the signature pads (Mark as collected / Mark as delivered) ----------
   The product's .ld-deliver-modal. It has NO .ld-light override, so on the live
   light page it is a DARK panel (#0e0e0e) — only the inputs and the ghost
   button pick up the light rules. Reproduced as it renders, including the
   helper line's light-mode grey (#5a6068) on the dark panel.
   Sits outside .lw-app, so it covers the stage, not the scrolled page. */
.lw-scaler .lwl-pad{ position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; padding:20px; }
.lwl-pad-bg{ position:absolute; inset:0; background:rgba(0,0,0,.70); backdrop-filter:blur(2px); }
.lwl-pad-panel{
  position:relative; width:100%; max-width:540px; display:flex; flex-direction:column;
  background:#0e0e0e; border:1px solid rgba(255,255,255,.10); border-radius:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.55); color:#F2F2F2;
}
.lwl-pad-head{ position:relative; padding:22px 24px 14px; border-bottom:1px solid rgba(255,255,255,.06); }
.lw-scaler .lwl-pad-head h3{ margin:0 0 4px; font-family:'Anta','Inter',sans-serif; font-weight:400; font-size:20px; line-height:1.2; letter-spacing:-.01em; color:#F2F2F2; }
.lw-scaler .lwl-pad-head p{ margin:0; font-size:13px; line-height:1.5; color:rgba(242,242,242,.55); }
.lwl-pad-x{
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); color:#F2F2F2;
}
.lwl-pad-x i{ color:#F2F2F2; }
.lwl-pad-body{ padding:18px 24px; }
.lwl-pad-lbl{ display:block; margin:10px 0 6px; font-size:10px; font-weight:400; line-height:1.5; letter-spacing:.10em; text-transform:uppercase; color:rgba(242,242,242,.45); }
.lwl-pad-lbl:first-child{ margin-top:0; }
.lwl-pad-lbl.is-gap{ margin-top:14px; }
/* ⚠️ font-size !important only to beat style.css's touch-device 16px rule; the
   fields are readonly, tabindex -1 and pointer-events:none, so no iOS zoom. */
.lw-scaler .lwl-pad-in{
  display:block; width:100%; min-height:0; margin:0 0 10px; padding:9px 12px;
  border:1px solid #d6dae0; border-radius:8px; background:#ffffff; color:var(--lw-ink,#0a0a0a);
  font-family:'Inter',system-ui,sans-serif; font-size:13px !important; line-height:1.45;
  box-shadow:none; outline:0; pointer-events:none; resize:none;
}
.lw-scaler .lwl-pad-in.is-area{ min-height:64px; margin-bottom:0; }
.lw-scaler .lwl-pad-in::placeholder{ color:var(--lw-faint,#8a909a); opacity:1; }
.lw-scaler .lwl-pad-in.lw-hover,
.lw-scaler .lwl-pad-in.lw-caret{ border-color:var(--lw-volt,#C8F135); box-shadow:0 0 0 3px rgba(200,241,53,.25); }

.lwl-pad-tabs{ display:flex; gap:2px; margin-bottom:10px; padding:3px; border-radius:9px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.lwl-pad-tabs span{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 12px; border-radius:6px; font-family:'Anta','Inter',sans-serif; font-size:12px; line-height:1.2;
  color:rgba(242,242,242,.65);
}
.lwl-pad-tabs span.is-active{ background:rgba(200,241,53,.12); color:#C8F135; }
.lwl-pad-tabs i{ font-size:11px; color:inherit; }

/* The canvas: white, 220px tall. The ink is one path per signer. At rest its
   dash is longer than the path, so an unsigned pad is blank; the engine's rail
   op writes the real length inline and inks it at pen speed. */
.lwl-pad-sigwrap{ position:relative; height:220px; border-radius:9px; overflow:hidden; background:#ffffff; }
.lwl-pad-sig{ position:absolute; inset:0; }
.lwl-pad-ink{ display:block; width:100%; height:100%; }
.lwl-pad-ink path{ fill:none; stroke:#0a0a0a; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:4000; stroke-dashoffset:4000; }
.lwl-pad-ink.is-done path{ stroke-dashoffset:0; }
.lwl-pad-clear{
  position:absolute; top:8px; right:8px; z-index:1; display:inline-flex; align-items:center; gap:5px;
  padding:6px 10px; border-radius:6px; background:rgba(0,0,0,.06); color:#444444;
  font-family:'Inter',system-ui,sans-serif; font-size:11px; line-height:1.2;
}
.lwl-pad-clear i{ color:#444444; font-size:10px; }
.lwl-pad-help{ margin-top:6px; font-size:11px; line-height:1.45; color:var(--lw-body,#5a6068); text-align:left; }

.lwl-pad-foot{ display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:14px 24px; border-top:1px solid rgba(255,255,255,.06); }
.lwl-pad-foot .lwl-pad-cancel{ width:auto; margin:0; padding:11px 20px; font-size:13px; }
.lwl-pad-foot .lwl-pad-go{ width:auto; padding:13px 20px; }
/* The product's "Saving…" spinner is Font Awesome's free-running spin; tie it to
   playback so a paused frame holds still. */
.lw-scaler .lwl-pad-go .fa-spin{ animation-play-state:paused; }
.lw.is-playing .lw-scaler .lwl-pad-go .fa-spin{ animation-play-state:running; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .lwl-stage-pulse{ animation:none; }
}

/* =====================================================================
 * NARROW DESIGN SPACE — 420px wide, .lw-scaler.is-hand (never @media)
 *
 * Mirrors the product below 980px: ONE column, and the aside (Posted by +
 * the action panel) jumps ABOVE the stops — so on a phone the award moment
 * (pill, postcodes, phone number, "You won this job") all lands in the first
 * screenful. Type steps down a little, never below 11px; icons may be smaller.
 * Content width is 392px (the shell pads .lw-main 14px each side).
 * ===================================================================== */
.lw-scaler.is-hand a.lwl-back{ margin-bottom:12px; padding:6px 12px; font-size:12px; }
.lw-scaler.is-hand .lwl-flash{ margin-bottom:12px; padding:10px 12px; font-size:12px; }

/* hero: route on two fixed lines (from / → to) so the postcode reveal grows
   in place instead of reflowing the headline; price drops below it. */
.lw-scaler.is-hand .lwl-header{ padding:15px 16px; margin-bottom:14px; }
.lw-scaler.is-hand .lwl-header-mid{ flex-direction:column; align-items:flex-start; gap:10px; }
.lw-scaler.is-hand h1.lwl-route{ font-size:22px; row-gap:2px; }
.lw-scaler.is-hand .lwl-route-br{ display:block; flex-basis:100%; height:0; }
.lw-scaler.is-hand .lwl-price{ font-size:28px; }
.lw-scaler.is-hand .lwl-header-meta{ margin-top:10px; gap:4px 12px; font-size:11.5px; }

/* one column, aside first */
.lw-scaler.is-hand .lwl-grid{ grid-template-columns:minmax(0,1fr); gap:12px; }
.lw-scaler.is-hand .lwl-aside{ order:-1; gap:12px; }

/* section cards */
.lw-scaler.is-hand .lwl-section{ padding:14px 15px; margin-bottom:12px; border-radius:12px; }
.lw-scaler.is-hand .lwl-section h3{ font-size:11.5px; gap:6px; margin-bottom:12px; }
.lw-scaler.is-hand .lwl-redacted-pill{ font-size:11px; margin-left:0; }
.lw-scaler.is-hand .lwl-redacted-pill i{ font-size:10px; }

/* stops */
.lw-scaler.is-hand .lwl-stop{ grid-template-columns:30px minmax(0,1fr); gap:11px; padding-bottom:16px; }
.lw-scaler.is-hand .lwl-stop:last-child{ padding-bottom:0; }
.lw-scaler.is-hand .lwl-stop-marker{ width:30px; height:30px; font-size:11px; }
.lw-scaler.is-hand .lwl-stop:not(:last-child)::before{ left:14px; top:26px; }
.lw-scaler.is-hand .lwl-stop-type{ font-size:11px; }
.lw-scaler.is-hand .lwl-stop-town{ font-size:16px; }
.lw-scaler.is-hand .lwl-stop-town .pc{ font-size:12px; }
.lw-scaler.is-hand .lwl-stop-address{ font-size:12px; }
.lw-scaler.is-hand .lwl-stop-address span{ font-size:11.5px; }
.lw-scaler.is-hand .lwl-stop-notes{ padding:7px 9px; font-size:11.5px; }
.lw-scaler.is-hand .lwl-stop-time{ font-size:12px; }

/* map: 360x180 box, so the 560-wide viewBox fits at ~0.64. Labels and pins
   are sized up in SVG units to land at ~11-12px on the stage. */
.lw-scaler.is-hand .lwl-map{ height:180px; border-radius:9px; }
.lw-scaler.is-hand .lwl-map-town{ font-size:19px; }
.lw-scaler.is-hand .lwl-map-pc{ font-size:17.5px; transform:translateY(3px); }
.lw-scaler.is-hand .lwl-map-dot{ transform:scale(1.35); }

/* vehicle: a fixed 2x2 */
.lw-scaler.is-hand .lwl-spec-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px; }
.lw-scaler.is-hand .lwl-spec-item .lbl{ font-size:11px; }
.lw-scaler.is-hand .lwl-spec-item .val{ font-size:14px; }

/* aside panels */
.lw-scaler.is-hand .lwl-panel{ padding:14px 15px; border-radius:12px; }
.lw-scaler.is-hand .lwl-panel h4{ font-size:11px; margin-bottom:12px; }
.lw-scaler.is-hand .lwl-shipper-avatar{ width:36px; height:36px; font-size:13px; }
.lw-scaler.is-hand .lwl-shipper-name{ font-size:14px; }
.lw-scaler.is-hand .lwl-contact-locked{ margin-top:12px; padding:10px 12px; font-size:11.5px; }
.lw-scaler.is-hand .lwl-contact{ margin-top:12px; padding-top:12px; }
.lw-scaler.is-hand a.lwl-contact-row{ font-size:12.5px; }
.lw-scaler.is-hand .lwl-interest-note{ min-height:58px; font-size:12px !important; }
.lw-scaler.is-hand .lwl-btn-primary{ padding:12px 16px; font-size:13.5px; }
.lw-scaler.is-hand .lwl-btn-ghost{ padding:10px 16px; font-size:12px; }
.lw-scaler.is-hand .lwl-action-status{ padding:10px 12px; font-size:12px; }
.lw-scaler.is-hand .lwl-stepper{ padding:12px; gap:12px; }
.lw-scaler.is-hand .lwl-driver{ padding:12px; }
.lw-scaler.is-hand .lwl-driver-lbl{ font-size:11px; }
.lw-scaler.is-hand p.lwl-driver-none{ font-size:12px; }

/* backloads: the three-up row becomes a stacked list of cards */
.lw-scaler.is-hand .lwl-backloads{ margin-top:12px; padding:15px; border-radius:14px; }
.lw-scaler.is-hand .lwl-backloads-head{ margin-bottom:8px; }
.lw-scaler.is-hand .lwl-backloads-head h3{ font-size:14px; gap:8px; }
.lw-scaler.is-hand p.lwl-backloads-intro{ font-size:12px; margin-bottom:12px; }
.lw-scaler.is-hand .lwl-backloads-list{ grid-template-columns:minmax(0,1fr); gap:10px; }
.lw-scaler.is-hand a.lwl-backload-card{ padding:12px 14px; gap:8px; }
.lw-scaler.is-hand .lwl-backload-meta{ flex-direction:row; flex-wrap:wrap; gap:4px 14px; }

/* wave 2 — pills, gate, team bid, driver select, proof cards */
.lw-scaler.is-hand .lwl-pills-won{ gap:8px; }
.lw-scaler.is-hand .lwl-action-status.is-gate{ padding:10px 12px; }
.lw-scaler.is-hand .lwl-helper.is-steps{ margin:8px 0 10px; }
.lw-scaler.is-hand .lwl-team{ padding:12px; }
.lw-scaler.is-hand .lwl-team-row{ gap:10px; }
.lw-scaler.is-hand .lwl-team-row > i{ width:30px; height:30px; font-size:12px; }
.lw-scaler.is-hand .lwl-team-row strong{ font-size:12.5px; }
.lw-scaler.is-hand .lwl-team-row span{ font-size:11.5px; }
.lw-scaler.is-hand .lwl-team-note{ padding:8px 10px; font-size:11.5px; }
.lw-scaler.is-hand .lwl-team-note span{ font-size:11.5px; }
.lw-scaler.is-hand .lwl-driver-sel{ padding:10px 12px; font-size:13.5px; }
.lw-scaler.is-hand .lwl-pod{ padding:11px 12px; }
/* narrower than desk: the product's 120px cap applies and the canvas letterboxes */
.lw-scaler.is-hand .lwl-pod-sig{ height:120px; }

/* the pad: below 640px the product makes the modal a full-screen sheet */
.lw-scaler.is-hand .lwl-pad{ padding:0; align-items:stretch; }
.lw-scaler.is-hand .lwl-pad-panel{ max-width:none; height:100%; border:0; border-radius:0; }
.lw-scaler.is-hand .lwl-pad-body{ flex:1; padding:16px 18px; }
.lw-scaler.is-hand .lwl-pad-head{ padding:20px 18px 12px; }
.lw-scaler.is-hand .lwl-pad-head h3{ font-size:19px; }
.lw-scaler.is-hand .lwl-pad-head p{ font-size:12.5px; padding-right:34px; }
.lw-scaler.is-hand .lwl-pad-in{ font-size:12.5px !important; }
.lw-scaler.is-hand .lwl-pad-tabs span{ padding:8px 10px; font-size:11.5px; }
.lw-scaler.is-hand .lwl-pad-foot{ padding:12px 18px; }
.lw-scaler.is-hand .lwl-pad-foot .lwl-pad-cancel{ padding:10px 16px; font-size:12.5px; }
.lw-scaler.is-hand .lwl-pad-foot .lwl-pad-go{ padding:12px 16px; font-size:13.5px; }

/* Posted by — the poster's phone and email, once the job is awarded (as the product, 2026-09-11). */
.lw-scaler .lwl-contact{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.lw-scaler .lwl-contact-row{ display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid #e3e6ea; border-radius:10px; background:#f7f8fa; font-size:12.5px; color:#0a0a0a; }
.lw-scaler .lwl-contact-row i{ color:#4a6b00; width:14px; text-align:center; }
.lw-scaler .lwl-contact-row span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-scaler.is-hand .lwl-contact-row{ font-size:11.5px; padding:8px 10px; }