/* LaneRally brand: the sign-in doors, the carrier, shipper and broker-application portals, and the account
   page. The back office keeps style.css; this file is loaded there only for staff who hold two or more roles,
   for the account menu. So nothing here may touch back-office markup: element rules are scoped to body.lr,
   and class names are ones the back office doesn't use (lr-, door-, acct-, co-, role-, dev-, rung-...).
   Carrier pages are dark (ink ground: drivers use them at night); everything else is light (paper ground).
   Text colours meet 4.5:1 on their grounds; touch targets are 44px or more (48px buttons on phones). */

:root {
  --lr-ink: #10171C; --lr-ink-2: #18222A; --lr-ink-3: #243039; --lr-mist: #9AA7B0; --lr-slate: #56646E;
  --lr-paper: #F4F1EA; --lr-white: #FFFFFF; --lr-line-light: #DAD5CB; --lr-snow: #EEF1F3;
  --lr-amber: #F6B72E; --lr-amber-soft: #FDF1D3; --lr-route: #2359D1; --lr-route-dark: #8DB0FF;
  --lr-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --lr-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lr-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Grounds */
.lr-light {
  --lr-bg: var(--lr-paper); --lr-card: var(--lr-white); --lr-card-line: var(--lr-line-light); --lr-line: var(--lr-line-light);
  --lr-text: var(--lr-ink); --lr-muted: var(--lr-slate); --lr-link: var(--lr-route); --lr-link-hover: #1A45A6; --lr-focus: var(--lr-route);
  --lr-good: #1D7A46; --lr-good-soft: #E6F2EA; --lr-good-line: #A9D3B8;
  --lr-warn: #A15C07; --lr-warn-soft: var(--lr-amber-soft); --lr-warn-line: #EBCB8B;
  --lr-bad: #B42318; --lr-bad-soft: #FBE9E7;
  --lr-input-bg: var(--lr-white); --lr-input-line: var(--lr-slate); --lr-btn2-line: var(--lr-ink);
  --lr-badge-bg: var(--lr-snow); --lr-badge-line: var(--lr-line-light); --lr-tile: var(--lr-snow); --lr-tile-line: var(--lr-line-light);
  --lr-seg: var(--lr-line-light); --lr-mark: var(--lr-slate); --lr-review: #A15C07; --lr-note-bg: var(--lr-amber-soft); --lr-lane: var(--lr-ink);
  color-scheme: light;
}
.lr-dark {
  --lr-bg: var(--lr-ink); --lr-card: var(--lr-ink-2); --lr-card-line: var(--lr-ink-3); --lr-line: var(--lr-ink-3);
  --lr-text: var(--lr-snow); --lr-muted: var(--lr-mist); --lr-link: var(--lr-route-dark); --lr-link-hover: #B5CBFF; --lr-focus: var(--lr-route-dark);
  --lr-good: #5ED08F; --lr-good-soft: rgba(94, 208, 143, 0.14); --lr-good-line: rgba(94, 208, 143, 0.5);
  --lr-warn: #FFC66B; --lr-warn-soft: rgba(255, 198, 107, 0.12); --lr-warn-line: rgba(255, 198, 107, 0.45);
  --lr-bad: #FF8A7A; --lr-bad-soft: rgba(255, 138, 122, 0.12);
  --lr-input-bg: var(--lr-ink); --lr-input-line: var(--lr-mist); --lr-btn2-line: var(--lr-mist);
  --lr-badge-bg: var(--lr-ink-3); --lr-badge-line: var(--lr-slate); --lr-tile: var(--lr-ink-3); --lr-tile-line: var(--lr-slate);
  --lr-seg: var(--lr-ink-3); --lr-mark: var(--lr-mist); --lr-review: var(--lr-amber); --lr-note-bg: var(--lr-ink-2); --lr-lane: var(--lr-amber);
  color-scheme: dark;
}

/* Base */
.lr, .lr *, .lr *::before, .lr *::after { box-sizing: border-box; }
/* Whatever gets focus (a message focused on load, a field tabbed to) scrolls clear of the sticky header. */
:root:has(> body.lr) { scroll-padding-top: 72px; }
body.lr {
  margin: 0; min-height: 100vh; background: var(--lr-bg); color: var(--lr-text);
  font: 400 16px/1.4 var(--lr-body); font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* Element defaults carry no weight (:where), so any class below overrides them. */
:where(.lr) main { display: block; }
:where(.lr) :where(h1, h2, h3, h4, p, dl, dd) { margin: 0; }
:where(.lr) a { color: var(--lr-link); font-weight: 600; text-decoration: none; }
:where(.lr) a:hover { color: var(--lr-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.lr :focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
.lr [hidden] { display: none !important; }
.lr svg { flex: none; }
.lr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.lr-h1 { font: 700 34px/1.02 var(--lr-display); letter-spacing: -0.01em; }
.lr-h2 { font: 600 22px/24px var(--lr-display); letter-spacing: -0.01em; }
.lr-lead { margin-top: 6px; font-size: 15px; line-height: 21px; color: var(--lr-muted); }
.lr-muted { color: var(--lr-muted); }
.lr-small { font-size: 13px; line-height: 18px; }
.lr-mono { font-family: var(--lr-mono); font-weight: 500; font-size: 0.92em; }
.lr .lr-mono { white-space: nowrap; } /* a masked number or an ID never breaks across lines */

/* The logo and wordmark */
.lr-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; }
.lr a.lr-brand, .lr a.lr-brand:hover { color: inherit; text-decoration: none; }
.lr-word { font: 700 24px/1 var(--lr-display); letter-spacing: -0.01em; }
.lr-lane { display: block; }
.lr-lane line { stroke: var(--lr-lane); }

/* Buttons */
.lr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border: 0; border-radius: 10px; background: var(--lr-amber); color: var(--lr-ink); cursor: pointer;
  font: 600 16px/1.1 var(--lr-body); text-align: center; text-decoration: none;
}
.lr a.lr-btn { color: var(--lr-ink); }
.lr .lr-btn:hover { background: #FFC54D; color: var(--lr-ink); text-decoration: none; }
.lr-btn-lg { width: 100%; min-height: 52px; font-size: 17px; }
.lr-btn-2, .lr a.lr-btn-2 { background: transparent; color: var(--lr-text); box-shadow: inset 0 0 0 1px var(--lr-btn2-line); }
.lr .lr-btn-2:hover { background: var(--lr-card); color: var(--lr-text); }
.lr-btn-sm { min-height: 44px; padding: 0 14px; font-size: 15px; }
@media (min-width: 900px) { .lr-btn { min-height: 44px; } .lr-btn-lg { min-height: 52px; } }

/* Forms */
.lr-field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.lr-field label { font-size: 14px; font-weight: 600; }
.lr-input {
  width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--lr-input-line); border-radius: 10px;
  background: var(--lr-input-bg); color: var(--lr-text); font: 400 17px var(--lr-body);
}
.lr-input::placeholder { color: var(--lr-muted); opacity: 1; }
.lr .lr-input:focus { outline: 3px solid var(--lr-focus); outline-offset: 1px; border-color: var(--lr-text); }
.pw-wrap { position: relative; }
.pw-wrap .lr-input { padding-right: 56px; }
.pw-toggle {
  position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--lr-muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pw-toggle[aria-pressed="true"] { color: var(--lr-text); }

/* Messages */
.lr-alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px;
  font-size: 14px; line-height: 19px; color: var(--lr-text);
}
.lr-alert > .lr-ico { margin-top: 1px; }
.lr-alert p + p { margin-top: 2px; color: var(--lr-muted); }
.lr-alert-t { font-size: 15px; line-height: 20px; font-weight: 600; }
.lr-alert-bad { background: var(--lr-bad-soft); }
.lr-alert-bad > .lr-ico { color: var(--lr-bad); }
.lr-alert-warn { background: var(--lr-warn-soft); }
.lr-alert-warn > .lr-ico { color: var(--lr-warn); }
.lr-alert-good { background: var(--lr-good-soft); }
.lr-alert-good > .lr-ico { color: var(--lr-good); }
.lr-alert-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; }
.lr main > .flash {
  width: calc(100% - 32px); max-width: 1088px; margin: 12px auto 0; padding: 10px 14px; border-radius: 10px;
  background: var(--lr-amber-soft); color: var(--lr-ink); font-weight: 500;
}
.lr-note {
  margin-top: 12px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px;
  background: var(--lr-note-bg); border: 1px solid var(--lr-card-line); font-size: 14px; line-height: 19px;
}
.lr-light .lr-note { border-color: transparent; }
.lr-note strong { font-weight: 600; }

/* Pills and badges */
.lr-pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--lr-snow); color: var(--lr-ink); font: 600 12px/1 var(--lr-body); letter-spacing: 0;
}
.lr-badge {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--lr-badge-line); background: var(--lr-badge-bg); color: var(--lr-text);
  font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.lr-badge .lr-ico { width: 14px; height: 14px; }
.lr-badge-good { color: var(--lr-good); background: var(--lr-good-soft); border-color: var(--lr-good-line); }
.lr-badge-warn { color: var(--lr-warn); background: var(--lr-warn-soft); border-color: var(--lr-warn-line); }
.lr-badge-on { color: var(--lr-ink); background: var(--lr-amber); border-color: var(--lr-amber); }

/* --- sign-in chooser ------------------------------------------------------------------------- */
.door-bar { display: flex; align-items: center; gap: 4px; min-height: 48px; }
.chooser { max-width: 440px; margin: 0 auto; padding: 12px 20px 32px; }
.chooser .lr-h1 { margin-top: 14px; font-size: 36px; }
.doors { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.lr a.door-card {
  position: relative; min-height: 76px; padding: 12px 12px 12px 14px; display: flex; align-items: center; gap: 14px;
  background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; color: var(--lr-text); font-weight: 400;
}
.lr a.door-card:hover { border-color: var(--lr-slate); color: var(--lr-text); text-decoration: none; }
.door-ico { flex: none; width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.door-ico .lr-ico { width: 26px; height: 26px; }
.door-ico-carrier { background: var(--lr-ink); color: var(--lr-amber); }
.door-ico-shipper { background: var(--lr-amber-soft); color: var(--lr-ink); }
.door-ico-broker { background: var(--lr-paper); border: 1px solid var(--lr-line-light); color: var(--lr-ink); }
.door-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.door-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 24px/26px var(--lr-display); letter-spacing: -0.01em; }
.door-blurb { font-size: 15px; line-height: 20px; color: var(--lr-muted); }
.door-card .lr-chev { color: var(--lr-muted); }
.free-note {
  margin-top: 12px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--lr-amber-soft); color: var(--lr-ink); font-size: 14px; line-height: 19px;
}
.free-note strong { font-weight: 600; }
.door-signup { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; font-size: 15px; }
.door-signup a { display: inline-flex; align-items: center; min-height: 44px; }
.door-soon { text-align: center; }
@media (min-width: 760px) {
  .chooser { max-width: 1000px; padding: 20px 32px 48px; }
  .chooser .lr-h1 { margin-top: 48px; font-size: 48px; }
  .chooser .lr-lead { font-size: 17px; line-height: 24px; }
  .doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
  .lr a.door-card { flex-direction: column; align-items: flex-start; min-height: 196px; padding: 20px; gap: 18px; }
  .door-card .lr-chev { position: absolute; right: 16px; top: 22px; }
  .door-name { font-size: 30px; line-height: 32px; }
  .free-note, .chooser .door-signup { max-width: 600px; }
  .chooser .door-signup { justify-content: flex-start; }
  .chooser .door-soon { text-align: left; }
}

/* --- a door (sign-in form) -------------------------------------------------------------------- */
.door-band { background: var(--lr-ink); color: var(--lr-snow); --lr-lane: var(--lr-amber); --lr-focus: var(--lr-route-dark); }
.door-in { max-width: 440px; margin: 0 auto; padding: 12px 20px 0; }
.door-band .door-in { padding-bottom: 20px; }
.door-band .lr-lane { margin-top: 20px; }
.lr a.lr-iconbtn {
  width: 44px; height: 44px; margin-left: -12px; border-radius: 10px; color: inherit;
  display: flex; align-items: center; justify-content: center;
}
.door-pill {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px;
  border-radius: 999px; background: var(--lr-amber); color: var(--lr-ink); font-size: 14px; font-weight: 600;
}
.door-pill .lr-ico { width: 18px; height: 18px; }
.door-band .lr-h1 { margin-top: 12px; }
.door-lead { margin-top: 8px; font-size: 16px; color: var(--lr-mist); }
.door-body { padding-top: 20px; padding-bottom: 28px; }
.door-form > .lr-alert { margin-bottom: 4px; }
.door-tip { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.door-form > .lr-field:first-of-type { margin-top: 0; }
.door-form .lr-alert + .lr-field { margin-top: 14px; }
.door-form .lr-btn-lg { margin-top: 20px; }
.door-others {
  margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--lr-line); display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; column-gap: 6px; font-size: 15px;
}
.door-others span { color: var(--lr-muted); }
.door-others a { display: inline-flex; align-items: center; min-height: 44px; }
.door-foot { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.door-free { display: flex; justify-content: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.door-free .lr-ico { width: 16px; height: 16px; margin-top: 1px; color: var(--lr-text); }
.never-ask {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  background: var(--lr-card); border: 1px solid var(--lr-card-line); font-size: 13px; line-height: 1.4; color: var(--lr-muted);
}
.never-ask .lr-ico { margin-top: 1px; color: var(--lr-text); }
.pw-field { gap: 2px; }
.pw-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pw-label a { display: inline-flex; align-items: center; min-height: 44px; padding-left: 8px; font-size: 14px; }
@media (min-width: 760px) {
  .door-band .door-in { padding-top: 20px; padding-bottom: 28px; }
  .door-band .lr-h1 { font-size: 40px; }
}

/* --- forgot password (/login/forgot, /login/reset) --------------------------------------------- */
.door-forgot { margin-top: 6px; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.door-forgot a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 760px) { .door-forgot { justify-content: flex-start; } }
.fp-ways { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fp-ways legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.fp-way {
  display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  background: var(--lr-card); border: 1px solid var(--lr-card-line); font-size: 15px; line-height: 1.4;
}
.fp-way input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--lr-ink); }
.fp-way:has(input:checked) { border: 2px solid var(--lr-text); padding: 11px 13px; }
.fp-way-off { cursor: default; }
.fp-way-off .fp-way-t { color: var(--lr-muted); }
.fp-way-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fp-way-t { font-weight: 600; }
.fp-way-d { font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.fp-num { white-space: nowrap; } /* a phone number never breaks across lines */
.fp-have { margin-top: 12px; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.fp-have a { display: inline-flex; align-items: center; min-height: 44px; }
.fp-note { margin-top: 10px; font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.fp-for { margin-top: 14px; font-size: 15px; line-height: 21px; overflow-wrap: anywhere; }
.fp-for strong { font-weight: 600; }
.fp-for a { display: inline-flex; align-items: center; min-height: 44px; }
.door-form > .lr-alert + .fp-for { margin-top: 12px; }
.door-form > .fp-for + .lr-field { margin-top: 4px; }
.door-form .lr-field > .lr-small { margin-top: 2px; }
.fp-again { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lr-line); }
.lr .fp-go { margin-top: 16px; }

/* --- portal header ---------------------------------------------------------------------------- */
.lr-top { position: sticky; top: 0; z-index: 20; background: var(--lr-ink); color: var(--lr-snow); border-bottom: 1px solid var(--lr-ink-3); --lr-focus: var(--lr-route-dark); }
.lr-top-in { max-width: 1120px; margin: 0 auto; padding: 4px 16px; min-height: 56px; display: flex; align-items: center; gap: 12px; }
.lr-top-name {
  min-width: 0; padding-left: 12px; border-left: 1px solid var(--lr-ink-3); color: var(--lr-mist);
  font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lr-top-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* --- account menu (portal header, and the back-office header for staff with two or more roles) ---- */
.acct-menu { position: relative; font-family: var(--lr-body); font-size: 15px; line-height: 1.35; }
.acct-menu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 8px 0 4px; border-radius: 10px; font-weight: 600;
}
.acct-menu > summary::-webkit-details-marker { display: none; }
.acct-menu > summary:focus-visible { outline: 3px solid #8DB0FF; outline-offset: 2px; }
/* The back-office header is white in light mode: route blue there (6.1:1), the light blue on its dark mode. */
.top .acct-menu > summary:focus-visible { outline-color: #2359D1; }
@media (prefers-color-scheme: dark) { .top .acct-menu > summary:focus-visible { outline-color: #8DB0FF; } }
.acct-menu[open] > summary .acct-caret { transform: rotate(180deg); }
.acct-av {
  flex: none; width: 36px; height: 36px; border-radius: 999px; background: #243039; color: #EEF1F3;
  border: 1px solid #56646E; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; line-height: 1;
}
.acct-now { display: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
@media (min-width: 720px) { .acct-now { display: inline; } }
.acct-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(360px, calc(100vw - 24px));
  padding: 14px; border: 1px solid #243039; border-radius: 12px; background: #10171C; color: #EEF1F3;
  box-shadow: 0 12px 32px rgba(16, 23, 28, 0.28); text-align: left; font-weight: 400;
}
.acct-panel p { margin: 0; }
.acct-panel svg { flex: none; }
.acct-panel :focus-visible { outline: 3px solid #8DB0FF; outline-offset: 2px; }
.acct-who { display: flex; align-items: center; gap: 12px; }
.acct-id { flex: 1; min-width: 0; }
.acct-close {
  flex: none; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: #EEF1F3; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.acct-close:hover { background: #18222A; }
.acct-close[hidden] { display: none; } /* shown by the menu's script; the back office has no .lr [hidden] rule */
.acct-name { font-size: 16px; line-height: 20px; font-weight: 600; }
.acct-mail { font-size: 13px; line-height: 18px; color: #9AA7B0; overflow-wrap: anywhere; }
.acct-h { margin-top: 14px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #9AA7B0; }
.acct-cur {
  margin-top: 6px; min-height: 52px; padding: 8px 12px; display: flex; align-items: center; gap: 10px;
  background: #18222A; border: 1px solid #243039; border-radius: 10px; font-size: 15px; font-weight: 600;
}
.acct-cur > span { flex: 1; min-width: 0; }
.acct-cur svg { color: #F6B72E; width: 20px; height: 20px; }
.acct-switch { margin: 8px 0 0; }
.acct-switch button {
  width: 100%; min-height: 60px; padding: 8px 12px; display: flex; align-items: center; gap: 10px;
  border: 1px solid #9AA7B0; border-radius: 10px; background: transparent; color: #EEF1F3; cursor: pointer;
  font-family: inherit; font-size: 15px; text-align: left;
}
.acct-switch button:hover { background: #18222A; }
.acct-switch button svg { width: 20px; height: 20px; }
.acct-sw-txt { display: flex; flex-direction: column; min-width: 0; }
.acct-sw-k { font-size: 13px; line-height: 16px; color: #9AA7B0; }
.acct-sw-l { font-size: 16px; line-height: 20px; font-weight: 600; }
.acct-note { margin-top: 8px; font-size: 13px; line-height: 18px; color: #9AA7B0; }
.acct-panel a.acct-add {
  margin-top: 8px; min-height: 48px; padding: 8px 12px; display: flex; align-items: center; gap: 10px;
  border: 1px dashed #9AA7B0; border-radius: 10px; color: #EEF1F3; font-size: 15px; font-weight: 600; text-decoration: none;
}
.acct-panel a.acct-add:hover { background: #18222A; color: #EEF1F3; text-decoration: none; }
.acct-add svg { width: 20px; height: 20px; color: #F6B72E; }
.acct-links { margin-top: 12px; padding-top: 6px; border-top: 1px solid #243039; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acct-links a { display: inline-flex; align-items: center; min-height: 44px; color: #8DB0FF; font-weight: 600; text-decoration: none; }
.acct-links a:hover { color: #B5CBFF; text-decoration: underline; }
.acct-links form { margin: 0; }
.acct-links button {
  min-height: 44px; padding: 0 14px; border: 1px solid #9AA7B0; border-radius: 10px; background: transparent;
  color: #EEF1F3; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.acct-links button:hover { background: #18222A; }
/* In the back-office header: the avatar only (the workspace chip beside it names the office). */
.top .acct-menu > summary { color: inherit; }
.top .acct-now { display: none; }
@media (max-width: 719px) { /* the back-office header wraps on phones: the menu opens in its own row */
  .top .acct-menu[open] { flex-basis: 100%; }
  .top .acct-panel { position: static; width: auto; max-width: 420px; margin-top: 8px; }
}

/* --- portal pages ------------------------------------------------------------------------------- */
.lr-page { max-width: 1120px; margin: 0 auto; padding: 16px 16px 48px; }
.lr-narrow { max-width: 680px; }
.lr-page > .lr-h1 { margin-top: 4px; }
.lr-card { background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; padding: 16px 14px; }
.lr-page > .lr-alert, .lr-page > .lr-card + .lr-card { margin-top: 12px; }
.lr-sect-h { margin: 28px 0 12px; }
.co-row { display: flex; align-items: flex-start; gap: 12px; }
.co-tile {
  flex: none; width: 52px; height: 52px; border-radius: 12px; background: var(--lr-tile); border: 1px solid var(--lr-tile-line);
  display: flex; align-items: center; justify-content: center; font: 700 22px/1 var(--lr-display); letter-spacing: -0.01em;
}
.co-id { flex: 1; min-width: 0; }
.co-name { font: 700 26px/28px var(--lr-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.co-sub { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--lr-muted); overflow-wrap: anywhere; }
.co-ids { margin-top: 2px; font: 500 12px/18px var(--lr-mono); }
.co-badges { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }

.lr-progress { margin-top: 12px; }
.lr-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lr-progress-n { font-size: 14px; font-weight: 600; color: var(--lr-muted); white-space: nowrap; }
.lr-progress-bar { list-style: none; margin: 12px 0 10px; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.lr-seg { height: 6px; border-radius: 3px; background: var(--lr-seg); }
.lr-seg-done { background: var(--lr-good); }
.lr-seg-review { background: var(--lr-review); }
.lr-progress p { font-size: 14px; line-height: 19px; }

.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rung { background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; }
.rung-row { padding: 12px 14px; display: flex; gap: 12px; }
.rung-subs { list-style: none; margin: 0; padding: 0; }
.rung-subs > .rung-row { border-top: 1px solid var(--lr-card-line); }
.lr-mark { flex: none; width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.lr-mark-done { background: var(--lr-good-soft); border: 1px solid var(--lr-good-line); color: var(--lr-good); }
.lr-mark-todo { border: 2px solid var(--lr-mark); }
.lr-mark-review { border: 3px solid var(--lr-review); }
.lr-mark-review::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--lr-review); }
.lr-mark-failed { border: 2px solid var(--lr-bad); background: var(--lr-bad-soft); }
.rung-body { flex: 1; min-width: 0; }
.rung-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.rung-head h3, .rung-head h4 { font-size: 16px; line-height: 22px; font-weight: 600; }
.lr-st { flex: none; font-size: 12px; line-height: 16px; font-weight: 600; }
.lr-st-done { color: var(--lr-good); }
.lr-st-review { color: var(--lr-review); }
.lr-st-failed { color: var(--lr-bad); }
.rung-note { font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.rung-unlock { margin-top: 2px; font-size: 13px; line-height: 18px; }
.rung-unlock span { color: var(--lr-muted); }
.ladder-end { margin-top: 12px; display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; color: var(--lr-muted); }
.ladder-end strong { color: var(--lr-text); font-weight: 600; }
.ladder-end .lr-ico { color: var(--lr-text); }
.lr-why { margin-top: 28px; display: flex; align-items: flex-start; gap: 10px; }
.lr-why > .lr-ico { width: 20px; height: 20px; }
.lr-why-h { font: 600 15px/20px var(--lr-body); }
.lr-why p { font-size: 14px; line-height: 20px; color: var(--lr-muted); }

/* --- account page -------------------------------------------------------------------------------- */
.acct-grid { margin-top: 16px; display: grid; gap: 28px; }
.acct-col { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.lr-sect > .lr-h2 + p { margin-top: 4px; }
.lr-kv { margin-top: 14px; display: flex; flex-direction: column; }
.lr-kv > div { padding: 10px 0; border-top: 1px solid var(--lr-card-line); display: flex; flex-direction: column; gap: 4px; }
.lr-kv dt { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lr-muted); }
.lr-kv dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.lr-list { list-style: none; margin: 12px 0 0; padding: 0; background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; }
.lr-list > li + li { border-top: 1px solid var(--lr-card-line); }
.role-row { min-height: 64px; padding: 10px 12px 10px 14px; display: flex; align-items: center; gap: 12px; }
.role-ico { flex: none; display: flex; color: var(--lr-muted); }
.role-label { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-weight: 600; overflow-wrap: anywhere; }
.role-row form, .role-row .lr-btn { flex: none; margin: 0; }
.dev-row { min-height: 64px; padding: 10px 12px 10px 14px; display: flex; align-items: center; gap: 12px; }
.dev-id { flex: 1; min-width: 0; }
.dev-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; }
.dev-row form { flex: none; margin: 0; }
.lr-form-end { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lr-form { margin-top: 12px; }
.lr-form > .lr-field:first-of-type { margin-top: 0; }
.lr-form .lr-alert + input + .lr-field { margin-top: 12px; }
.lr-form > p { margin-top: 12px; }
.lr-form > .lr-btn { margin-top: 14px; }
@media (min-width: 900px) {
  .lr-page { padding: 28px 24px 64px; }
  .acct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 32px; }
  .lr-h1 { font-size: 40px; }
}

/* --- confirming the account's phone and email (account page) ------------------------------------ */
.cf-card { margin-top: 12px; }
.cf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.cf-title { font-size: 16px; line-height: 22px; font-weight: 600; }
.cf-value { margin-top: 4px; font-size: 17px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.cf-card > .lr-alert { margin-top: 12px; }
.cf-card > p.lr-small { margin-top: 4px; }
.cf-card > .cf-why { margin-top: 10px; }
.cf-send { margin-top: 14px; }
.cf-more { margin-top: 10px; }
.cf-more > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--lr-link); font-weight: 600; cursor: pointer; }
.cf-more > summary:hover { color: var(--lr-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.cf-more[open] > summary { margin-bottom: 2px; }
.cf-phone { margin-top: 10px; }
.cf-phone > .lr-alert + .lr-field { margin-top: 12px; }
.cf-phone > .lr-btn { margin-top: 12px; }
.code-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lr-card-line); }
.code-form > .lr-field { margin-top: 8px; }
.code-input { max-width: 220px; font: 500 24px/1 var(--lr-mono); letter-spacing: 0.25em; }
.code-meta { margin-top: 6px; }
.code-form > .lr-btn { margin-top: 12px; }

/* --- carrier sign-up (light, like the doors) ------------------------------------------------------ */
.su { max-width: 480px; margin: 0 auto; padding: 12px 16px 40px; }
.su-bar { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; min-height: 48px; }
.su-bar .lr-brand { justify-self: center; }
.su-bar .lr-word { font-size: 22px; }
.lr a.su-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: 15px; }
.su-h1 { margin-top: 20px; }
.su-lead { margin-top: 8px; color: var(--lr-muted); }
.su-signout { margin-top: 16px; }
.su-free { margin-top: 14px; }
.su-look { margin-top: 20px; }
.su-kind { margin: 0; padding: 0; border: 0; min-width: 0; }
.su-kind legend { padding: 0; font-size: 14px; font-weight: 600; }
.su-seg { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.su-seg label { position: relative; display: block; cursor: pointer; }
.su-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.su-seg span {
  min-height: 44px; padding: 0 12px; display: flex; align-items: center; justify-content: center; border-radius: 10px;
  border: 1px solid var(--lr-card-line); background: var(--lr-card); font-size: 15px; font-weight: 600;
}
.su-seg input:checked + span { border: 2px solid var(--lr-text); background: var(--lr-amber-soft); color: var(--lr-ink); }
.su-seg input:focus-visible + span { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
.su-look-row { display: flex; gap: 8px; }
.su-look-row .lr-input { flex: 1; min-width: 0; }
.su-look-row .lr-btn { flex: none; min-height: 52px; }
.su-num { font: 500 17px var(--lr-mono); letter-spacing: 0.02em; }
.su-msg { font-size: 14px; line-height: 19px; font-weight: 600; }
.su-msg-bad { color: var(--lr-bad); }
.lr-input[aria-invalid="true"] { border-color: var(--lr-bad); box-shadow: inset 0 0 0 1px var(--lr-bad); }

.su-card { margin-top: 14px; padding: 16px; }
.su-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.su-found {
  display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 10px 2px 8px; border-radius: 999px;
  background: #E8EEFB; color: var(--lr-route); font-size: 13px; font-weight: 600;
}
.lr-dark .su-found { background: var(--lr-ink-3); color: var(--lr-route-dark); }
.su-co { margin-top: 12px; font: 700 26px/1.05 var(--lr-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.su-ids { margin-top: 4px; font: 500 13px/18px var(--lr-mono); color: var(--lr-muted); }
.su-checks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.su-ck { display: flex; gap: 10px; align-items: flex-start; }
.su-mark { display: flex; flex: none; margin-top: 1px; }
.su-mark-passed { color: var(--lr-good); }
.su-mark-review { color: var(--lr-warn); }
.su-mark-failed { color: var(--lr-bad); }
.su-live { margin-top: 10px; }
.su-contacts { margin: 14px 0 0; padding: 12px; border-radius: 10px; background: var(--lr-bg); display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.35; }
.su-contacts dt { color: var(--lr-muted); }
.su-contacts dd { margin: 2px 0 0; font-weight: 500; }
.su-card-foot { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--lr-card-line); }
.su-card-foot a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }

.su-sect { margin-top: 28px; }
.su-note { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--lr-muted); }
.su-note strong { color: var(--lr-text); font-weight: 600; }
.su-ways { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.su-ways li {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  background: var(--lr-card); border: 1px solid var(--lr-card-line); font-size: 14px; line-height: 1.45;
}
.su-ways .lr-ico { margin-top: 1px; }
.su-base {
  margin-top: 10px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  background: var(--lr-card); border: 1px solid var(--lr-card-line); font-size: 13px; line-height: 1.45; color: var(--lr-muted);
}
.su-base strong { color: var(--lr-text); font-weight: 600; }
.su-base .lr-ico { color: var(--lr-text); }

.su-form { margin-top: 28px; }
.su-form > .lr-alert { margin-bottom: 16px; }
.su-form .lr-alert a { display: inline-flex; align-items: center; min-height: 44px; }
.su-fs { margin: 0; padding: 0; border: 0; min-width: 0; }
.su-legend { padding: 0; font-size: 14px; font-weight: 600; }
.su-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.su-chip { position: relative; cursor: pointer; }
.su-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.su-chip span {
  min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  border: 1px solid var(--lr-card-line); background: var(--lr-card); font-size: 15px; font-weight: 600;
}
.su-chip span .lr-ico { display: none; width: 18px; height: 18px; }
.su-chip input:checked + span { padding-left: 12px; border: 1.5px solid var(--lr-text); background: var(--lr-amber-soft); color: var(--lr-ink); }
.su-chip input:checked + span .lr-ico { display: block; }
.su-chip input:focus-visible + span { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
.su-fs + .lr-field { margin-top: 22px; }
.su-select { position: relative; }
.su-select select { appearance: none; -webkit-appearance: none; padding-right: 44px; }
.su-select .lr-ico { position: absolute; right: 14px; top: 15px; color: var(--lr-muted); pointer-events: none; }
.su-lane { margin-top: 32px; }
.su-h2 { margin-top: 28px; font-size: 26px; line-height: 1.05; }
.su-h2 + p { margin-top: 4px; }
.su-opt { font-weight: 400; color: var(--lr-muted); }
.su-consent { margin-top: 12px; }
.su-consent-box {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; cursor: pointer;
  background: var(--lr-card); border: 1px solid var(--lr-card-line); font-size: 15px; line-height: 1.45;
}
.su-consent-box input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--lr-ink); }
.lr-dark .su-consent-box input { accent-color: var(--lr-amber); }
.su-consent-text { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--lr-muted); }
.su-consent > .lr-small { margin-top: 6px; }
.su-submit { margin-top: 24px; }
.su-next { margin-top: 10px; text-align: center; }
.su-why { margin-top: 28px; }
.su-never { margin-top: 20px; }

/* --- carrier: get verified (dark) ----------------------------------------------------------------- */
.gv-top { display: flex; align-items: center; gap: 16px; }
.gv-ring { flex: none; width: 64px; height: 64px; }
.gv-ring-bg { stroke: var(--lr-seg); }
.gv-ring-on { stroke: var(--lr-amber); }
.gv-ring-n { font: 700 20px var(--lr-display); fill: var(--lr-text); }
.gv-top-txt { flex: 1; min-width: 0; }
.gv-h1 { font: 700 26px/28px var(--lr-display); letter-spacing: -0.01em; }
.gv-lead { margin-top: 2px; font-size: 14px; line-height: 19px; overflow-wrap: anywhere; }
.gv-top-txt .lr-small { margin-top: 4px; }
.gv-alert { margin-top: 12px; }
.gv-act { margin-top: 10px; }
.gv-code > .lr-alert { margin-top: 10px; }
.gv-code .code-form { border-top: 0; padding-top: 0; }
.gv-send { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.gv-send form { margin: 0; }
.gv-send-btn { width: 100%; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; padding-top: 8px; padding-bottom: 8px; }
.gv-send-to { font-size: 13px; opacity: 0.85; }
.gv-why { margin-top: 8px; }
.gv-callback { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.gv-callback form { margin: 0; }
.gv-lock {
  padding: 10px 14px; display: flex; align-items: flex-start; gap: 8px; border-top: 1px solid var(--lr-card-line);
  font-size: 13px; line-height: 18px; color: var(--lr-muted);
}
.gv-lock .lr-ico { margin-top: 1px; }
.gv-more { margin-top: 28px; }
.gv-more > .lr-small { margin-top: 4px; }
.gv-more-acts { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.gv-more-acts form { margin: 0; }
.gv-more-acts .lr-btn { width: 100%; }
.gv-more-acts + .lr-small { margin-top: 8px; }
.ch-go, .sh-go { margin-top: 14px; }
@media (min-width: 720px) {
  .gv-more-acts { flex-direction: row; flex-wrap: wrap; }
  .gv-more-acts .lr-btn { width: auto; }
  .gv-send { flex-direction: row; flex-wrap: wrap; }
  .gv-send-btn { width: auto; }
}

/* --- broker application (light) ------------------------------------------------------------------ */
.ag-fs { margin-top: 28px; }
.ag-fs > .lr-small { margin-top: 4px; }
.ag-box {
  margin-top: 12px; max-height: 280px; overflow: auto; padding: 14px; border-radius: 12px; white-space: pre-wrap;
  background: var(--lr-card); border: 1px solid var(--lr-card-line); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere;
}
.ag-agree { margin-top: 12px; }
.ag-fs > .lr-field { margin-top: 14px; }
.ba-reply { margin-top: 12px; }
.ba-reply .lr-form > .lr-alert { margin-bottom: 4px; }
.lr .ba-text { height: auto; min-height: 104px; padding: 12px 14px; line-height: 1.4; resize: vertical; }
.ba-after { margin-top: 10px; }
.ba-signed { margin-top: 8px; display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 21px; }
.ba-signed > .lr-ico { margin-top: 2px; color: var(--lr-good); }
.ba-signed .lr-badge { vertical-align: 1px; }
.ba-draft { margin-top: 6px; }
.ba-next { margin: 10px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 21px; }
.gv-more > .lr-kv { margin-top: 6px; }

/* --- the assistant's calls (account, verify and shipper pages) ------------------------------------- */
.as-card { margin-top: 12px; }
.as-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.as-t { font-size: 16px; line-height: 22px; font-weight: 600; }
.as-p { margin-top: 6px; font-size: 15px; line-height: 21px; }
.as-p strong { font-weight: 600; }
.as-act { margin-top: 12px; }
.as-form .su-consent-box { margin-top: 12px; }
.as-form > .lr-btn { margin-top: 12px; }
.as-note { margin-top: 10px; }
.lr .acct-addco { margin-top: 12px; width: 100%; }

/* === Page: Public site (lanerally.com: _site.html, site_home.html, site_legal.html, site_about.html,
   site_contact.html, site_message.html) =====================================================================
   The Home and Home-Mobile boards: light (paper and white) with ink bands (header, hero, pricing, the closing band,
   page heads), content up to 1200px, one layout from 390px phones to 1440px desktops. Every rule is scoped under
   .lr and uses site- classes only (body.lr.site): nothing here reaches the portals or the back office, and no
   shared class is restyled. The site's CSP allows no inline style, so everything the pages draw is here.
   Brand fonts load from /static/fonts once their files are added (market-deferred.md, S3); until then the
   stacks' fallbacks show. Money is ink (snow on dark), never green; green marks verified only. */
.lr .site-skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--lr-amber); color: var(--lr-ink); }
.lr .site-skip:focus { top: 8px; }
.lr .site-in { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.lr .site-top, .lr .site-hero, .lr .site-ink, .lr .site-band, .lr .site-pagehead, .lr .site-sticky, .lr .site-phone { background: var(--lr-bg); color: var(--lr-text); }
.lr .site-paper { background: var(--lr-paper); }
.lr .site-white { background: var(--lr-white); border-top: 1px solid var(--lr-line-light); border-bottom: 1px solid var(--lr-line-light); }
.lr .site-muted { color: var(--lr-muted); }
.lr .site-strong { font-weight: 600; }
.lr .site-grow { flex: 1; min-height: 20px; }
.lr .site-ico { flex: none; }
.lr main#main:focus { outline: none; }

/* Type */
.lr .site-h1 { font: 700 44px/1.04 var(--lr-display); letter-spacing: -0.01em; }
.lr .site-h2 { margin-top: 12px; font: 700 36px/1.04 var(--lr-display); letter-spacing: -0.01em; }
.lr .site-h3 { font: 600 26px/1.08 var(--lr-display); letter-spacing: -0.01em; }
.lr .site-h4 { font: 600 17px/1.3 var(--lr-body); }
.lr .site-lead { margin-top: 18px; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--lr-muted); }
.lr .site-sec-lead { margin-top: 12px; max-width: 460px; font-size: 17px; line-height: 1.5; color: var(--lr-muted); }
.lr .site-sec-lead strong { color: var(--lr-text); font-weight: 600; }
.lr .site-eyebrow { display: flex; align-items: center; gap: 10px; font: 600 13px/1 var(--lr-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lr-muted); }
.lr .site-eyebrow-amber { color: var(--lr-amber); }
.lr .site-dash { flex: none; width: 24px; height: 3px; background: currentColor; }
.lr .site-eyebrow:not(.site-eyebrow-amber) .site-dash { background: var(--lr-text); }
.lr .site-under { display: inline-block; padding-bottom: 6px; background: repeating-linear-gradient(90deg, var(--lr-amber) 0 14px, transparent 14px 24px) left bottom / 100% 4px no-repeat; }
.lr .site-note { margin-top: 16px; display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--lr-muted); }
.lr .site-note .site-ico { width: 18px; height: 18px; margin-top: 2px; color: var(--lr-text); }
.lr .site-fine { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--lr-muted); }

/* Tags and pills: "Coming soon", "Example", status pills (a dot plus a label) */
.lr .site-soon {
  display: inline-flex; align-items: center; height: 22px; margin-left: 8px; padding: 0 8px; border-radius: 999px; vertical-align: middle;
  background: var(--lr-amber-soft); color: var(--lr-ink); font: 600 12px/1 var(--lr-body); letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.lr .lr-dark .site-soon { background: var(--lr-ink-3); color: var(--lr-amber); }
.lr .site-tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; white-space: nowrap;
  background: var(--lr-amber-soft); color: var(--lr-ink); font: 600 12px/1 var(--lr-body);
}
.lr .lr-dark .site-tag { background: var(--lr-ink-3); color: var(--lr-snow); }
.lr .site-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 600 13px/1 var(--lr-body); white-space: nowrap; }
.lr .site-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.lr .site-pill-blue { background: #E4ECFB; color: var(--lr-route); }
.lr .site-pill-good { background: var(--lr-good-soft); color: var(--lr-good); }
.lr .site-pill-amber { background: var(--lr-amber-soft); color: var(--lr-warn); }
.lr .site-pill-ink { background: var(--lr-snow); color: var(--lr-ink); }
.lr .site-pills { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.lr .site-verified { display: inline-flex; align-items: center; gap: 4px; color: var(--lr-good); font-weight: 600; white-space: nowrap; }
.lr .site-verified .site-ico { width: 16px; height: 16px; }
.lr .site-eq {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; margin-right: 8px; padding: 0 5px;
  border: 1px solid var(--lr-line); border-radius: 5px; font: 500 12px/1 var(--lr-mono); color: var(--lr-text);
}
.lr .site-near { display: inline-flex; align-items: center; height: 22px; margin-right: 8px; padding: 0 8px; border-radius: 999px; background: var(--lr-snow); color: var(--lr-ink); font-weight: 600; font-size: 12px; }
.lr .lr-dark .site-near { background: var(--lr-ink-3); color: var(--lr-snow); }

/* Buttons and links (the shared .lr-btn, sized for the site) */
.lr .site-btn-lg { min-height: 52px; padding: 0 22px; font-size: 17px; }
.lr .site-ctas { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lr .site-cta-note { order: 10; flex-basis: 100%; font-size: 14px; color: var(--lr-muted); }
.lr a.site-go { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 16px; }
.lr .site-join-soon { margin-top: 16px; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; color: var(--lr-muted); }
.lr .site-join-soon a { display: inline-flex; align-items: center; min-height: 44px; }
/* A brokerage action while the broker authority is pending (site_offer_soon: the Coming soon tag and one short line,
   in the place the action takes once licensed; never a link or a control), and the header's and footer's "Quotes". */
.lr .site-offer-soon { margin-top: 16px; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; line-height: 1.4; color: var(--lr-muted); }
.lr .site-offer-soon .site-soon { margin-left: 0; }
.lr .site-ctas .site-offer-soon { margin-top: 0; min-height: 52px; }
.lr .site-quote .site-offer-soon { color: var(--lr-slate); }
.lr .site-price-card .site-offer-soon { margin-top: 10px; min-height: 0; font-size: 14px; }
.lr .site-top-soon { display: inline-flex; align-items: center; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--lr-muted); }
/* Phones below 420px: the header's "Quotes" stacks over its tag, no wider than the Get a quote button it stands for,
   so the page never scrolls sideways and the menu button keeps its 16px gutter; below 360px (no room for it beside
   the logo and the menu) it's left out: the hero, the phone bar and the Quotes line in the footer still say it. */
@media (max-width: 419px) {
  .lr .site-top-soon { flex-direction: column; align-items: flex-end; gap: 3px; font-size: 13px; line-height: 1; }
  .lr .site-top-soon .site-soon { margin-left: 0; }
}
@media (max-width: 359px) { .lr .site-top-soon { display: none; } }
.lr .site-foot li.site-foot-soon { display: flex; align-items: center; min-height: 44px; color: var(--lr-muted); font-weight: 500; }

/* Header: logo, anchors, Sign in (a <details> menu of the four doors, LG1), Get a quote; a drawer on phones */
.lr .site-top { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--lr-ink-3); }
.lr .site-top-in { min-height: 64px; display: flex; align-items: center; gap: 24px; }
.lr a.site-brand { color: var(--lr-text); }
.lr .site-nav { display: none; flex: 1; gap: 32px; }
.lr .site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--lr-text); font-weight: 500; }
.lr .site-top-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lr .site-signin, .lr .site-menu { position: relative; }
.lr .site-signin summary, .lr .site-menu summary, .lr .site-faq summary, .lr .site-foot-acc summary { list-style: none; cursor: pointer; }
.lr .site-signin summary::-webkit-details-marker, .lr .site-menu summary::-webkit-details-marker,
.lr .site-faq summary::-webkit-details-marker, .lr .site-foot-acc summary::-webkit-details-marker { display: none; }
.lr .site-signin { display: none; }
.lr .site-signin-btn {
  height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 12px 0 16px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--lr-slate); font-weight: 600;
}
.lr .site-signin[open] .site-ico-down, .lr .site-faq details[open] summary .site-ico-down, .lr .site-foot-acc details[open] .site-ico-down { transform: rotate(180deg); }
.lr .site-signin > .site-doors {
  position: absolute; right: 0; top: calc(100% + 8px); width: 300px; padding: 6px; border-radius: 12px;
  background: var(--lr-card); border: 1px solid var(--lr-card-line); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.lr .site-doors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lr .site-doors a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 10px; border-radius: 10px; color: var(--lr-text); font-weight: 400; }
.lr .site-doors a:hover { background: var(--lr-tile); text-decoration: none; color: var(--lr-text); }
.lr .site-doors .lr-ico { color: var(--lr-muted); }
.lr .site-door-t { display: block; font-weight: 600; }
.lr .site-door-d { display: block; font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .site-top-quote { white-space: nowrap; }
.lr .site-menu-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--lr-slate); }
.lr .site-drawer {
  position: fixed; left: 0; right: 0; top: 64px; max-height: calc(100vh - 64px); overflow-y: auto; padding: 12px 16px 24px;
  background: var(--lr-bg); border-bottom: 1px solid var(--lr-ink-3);
}
.lr .site-drawer nav { display: flex; flex-direction: column; padding-bottom: 8px; border-bottom: 1px solid var(--lr-line); }
.lr .site-drawer nav a { display: flex; align-items: center; min-height: 48px; color: var(--lr-text); font-size: 17px; font-weight: 600; }
.lr .site-drawer-h { margin: 16px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lr-muted); }

/* Hero (ink): the pitch, and the example Instant quote card (white: it carries .lr-light, so its tokens are the
   light ones inside the ink band) */
.lr .site-hero { padding: 40px 0 36px; }
.lr .site-hero-grid { display: grid; gap: 32px; align-items: center; }
.lr .site-hero .site-h1 { margin-top: 18px; }
.lr .site-checks { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-weight: 500; font-size: 15px; color: var(--lr-muted); }
.lr .site-checks li { display: flex; align-items: center; gap: 8px; }
.lr .site-checks .site-ico-check { color: var(--lr-amber); }
.lr .site-checks li.is-soon .site-ico-check { color: var(--lr-muted); }
.lr .site-statusbar { background: var(--lr-ink-2); color: var(--lr-snow); border-top: 1px solid var(--lr-ink-3); font-size: 14px; line-height: 1.4; }
.lr .site-statusbar .site-in.site-in { display: block; padding-top: 10px; padding-bottom: 10px; }
.lr .site-quote { background: var(--lr-white); color: var(--lr-ink); border-radius: 12px; padding: 20px; scroll-margin-top: 80px; }
.lr .site-quote-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lr .site-quote-head .site-h3 { font-size: 28px; }
.lr .site-quote .site-tag, .lr .site-quote .site-soon { background: var(--lr-amber-soft); color: var(--lr-ink); }
.lr .site-quote-lane { margin-top: 16px; }
.lr .site-quote-facts { margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lr .site-quote-facts div { padding: 10px 12px; border: 1px solid var(--lr-line-light); border-radius: 10px; }
.lr .site-quote-facts dt { font-size: 13px; font-weight: 600; color: var(--lr-slate); }
.lr .site-quote-facts dd { margin: 2px 0 0; font-weight: 500; }
.lr .site-quote-result { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lr-line-light); }
.lr .site-big-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.lr .site-rate-n { font: 700 44px/1 var(--lr-display); letter-spacing: -0.01em; }
.lr .site-allin { font-weight: 600; font-size: 17px; color: var(--lr-muted); }
.lr .site-firm { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--lr-good-soft); color: var(--lr-good); font: 600 14px/1 var(--lr-body); white-space: nowrap; }
.lr .site-firm .site-ico { width: 16px; height: 16px; }
.lr .site-range { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--lr-amber-soft); color: var(--lr-ink); font: 600 14px/1 var(--lr-body); }
.lr .site-quote-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 500; font-size: 15px; color: var(--lr-slate); }
.lr .site-quote-chips > span { display: inline-flex; align-items: center; gap: 6px; }
.lr .site-quote-chips .site-ico { width: 18px; height: 18px; }
.lr .site-quote-save { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--lr-paper); font-size: 15px; line-height: 1.4; }
.lr .site-quote-acts { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lr .site-quote-soon { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--lr-slate); }
.lr .site-quote-soon .site-soon { margin-left: 0; }
.lr .site-quote .site-fine { color: var(--lr-slate); }

/* The lane line: origin (filled square), a dashed connector, destination (hollow square) */
.lr .site-lane { display: flex; flex-direction: column; min-width: 0; }
.lr .site-lane-stop { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-weight: 600; }
.lr .site-lane-o, .lr .site-lane-d { flex: none; width: 10px; height: 10px; align-self: center; }
.lr .site-lane-o { background: var(--lr-text); }
.lr .site-lane-d { border: 2px solid var(--lr-text); }
.lr .site-lane-line { width: 0; height: 14px; margin: 3px 0 3px 4px; border-left: 2px dashed var(--lr-muted); }
.lr .site-lane-cap { width: 100%; font-size: 13px; font-weight: 600; color: var(--lr-muted); order: -1; padding-left: 18px; }
.lr .site-lane .site-muted { font-weight: 400; font-size: 14px; }

/* Sections */
.lr .site-sec { padding: 48px 0; scroll-margin-top: 64px; }
.lr .site-sec-head { display: flex; flex-direction: column; gap: 4px; }
.lr .site-cols { margin-top: 28px; display: grid; gap: 16px; }
.lr .site-card { display: flex; flex-direction: column; background: var(--lr-white); border: 1px solid var(--lr-line-light); border-radius: 12px; padding: 20px; scroll-margin-top: 80px; }
.lr .site-card > p { margin-top: 12px; font-size: 16px; line-height: 1.5; }
.lr .site-card-kind { display: flex; align-items: center; gap: 14px; }
.lr .site-kind-ico, .lr .site-trust-ico { flex: none; width: 48px; height: 48px; border-radius: 10px; background: var(--lr-amber-soft); color: var(--lr-ink); display: flex; align-items: center; justify-content: center; }
.lr .site-kind-ico .site-ico, .lr .site-trust-ico .site-ico { width: 24px; height: 24px; }
.lr .site-kind { font: 600 13px/1 var(--lr-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lr-slate); }
.lr .site-card .site-h3 { margin-top: 18px; }
.lr .site-trust-ico + .site-h3 { margin-top: 18px; }
.lr .site-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.4; }
.lr .site-list li { display: flex; align-items: flex-start; gap: 10px; }
.lr .site-list li > span { flex: 1; min-width: 0; }
.lr .site-list .site-ico-check { color: var(--lr-good); margin-top: 1px; }
.lr .site-list li.is-soon { color: var(--lr-slate); }
.lr .site-list li.is-soon .site-ico-check { color: var(--lr-slate); }
.lr .site-sample { margin-top: 4px; padding: 14px; border-radius: 10px; background: var(--lr-paper); font-size: 15px; line-height: 1.4; }
.lr .site-sample > p + p, .lr .site-sample > div + p { margin-top: 6px; }
.lr .site-sample-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.lr .site-sample-tags { display: inline-flex; gap: 6px; }
.lr .site-sample-lane { margin-top: 10px; font-weight: 600; font-size: 16px; }
.lr .site-sample-meta { color: var(--lr-muted); font-size: 14px; }
.lr .site-sample-h { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lr-slate); }
.lr .site-sample-foot { display: flex; justify-content: flex-end; }
.lr .site-sample-mc { margin-top: 2px; }
.lr .site-load-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lr .site-rate { display: flex; flex-direction: column; align-items: flex-end; }
.lr .site-rate .site-rate-n { font-size: 32px; }
.lr .site-rate-mi { font-size: 14px; color: var(--lr-muted); }
.lr .site-load-meta { display: flex; align-items: center; color: var(--lr-muted); font-size: 14px; }
.lr .site-load-by { font-size: 14px; }
.lr .site-load-est { font-size: 13px; color: var(--lr-muted); }
.lr .site-modes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.lr .site-mode { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--lr-ink); font-size: 14px; font-weight: 600; }
.lr .site-mode-on { background: var(--lr-amber); border-color: var(--lr-amber); color: var(--lr-ink); }
.lr .site-price-row { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lr-line-light); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; color: var(--lr-muted); font-weight: 500; font-size: 15px; }
.lr .site-price-big { font: 700 28px/1 var(--lr-display); letter-spacing: -0.01em; color: var(--lr-text); }
.lr .site-addon { margin-top: 8px; font-size: 14px; color: var(--lr-muted); }

/* How it works */
.lr .site-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; }
.lr .site-step { display: flex; gap: 16px; }
.lr .site-step-mark { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lr .site-step-n { width: 40px; height: 40px; border-radius: 999px; background: var(--lr-ink); color: var(--lr-amber); display: flex; align-items: center; justify-content: center; font: 700 22px/1 var(--lr-display); }
.lr .site-step-ico { color: var(--lr-muted); }
.lr .site-step p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--lr-muted); }
.lr .site-step.is-soon .site-step-n { background: var(--lr-snow); color: var(--lr-ink); }
.lr .site-step .site-h3 .site-soon { font-family: var(--lr-body); }

/* Pricing (ink) */
.lr .site-ink { scroll-margin-top: 64px; }
.lr .site-price-grid { display: grid; gap: 32px; }
.lr .site-price-cards { margin-top: 24px; display: grid; gap: 12px; }
.lr .site-price-card { padding: 16px; border-radius: 12px; background: var(--lr-card); border: 1px solid var(--lr-card-line); }
.lr .site-price-card .site-big-price { margin-top: 12px; }
.lr .site-price-card .site-rate-n { font-size: 40px; }
.lr .site-price-card .site-sample-meta { margin-top: 6px; }
.lr .site-ink .site-range { background: var(--lr-ink-3); color: var(--lr-amber); }
.lr .site-moves { padding: 20px; border-radius: 12px; background: var(--lr-card); border: 1px solid var(--lr-card-line); }
.lr .site-moves ol { list-style: none; margin: 12px 0 0; padding: 0; }
.lr .site-moves li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--lr-card-line); }
.lr .site-moves li p { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--lr-muted); }
.lr .site-move-n { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--lr-slate); display: flex; align-items: center; justify-content: center; font: 700 16px/1 var(--lr-display); }
.lr .site-moves .site-move-ex { grid-column: 2; margin-top: 4px; font: 600 15px/1.3 var(--lr-body); color: var(--lr-text); }
.lr .site-move-ex span { display: block; font-weight: 400; font-size: 13px; color: var(--lr-muted); }

/* Trust: the consent box is a drawing (a span), never a form control */
.lr .site-consent-drawing { margin-top: 8px; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; }
.lr .site-box { flex: none; width: 20px; height: 20px; margin-top: 1px; border: 2px solid var(--lr-slate); border-radius: 4px; background: var(--lr-white); }

/* Carrier app: a phone drawn in ink (an example), then the features */
.lr .site-app-grid { display: grid; gap: 32px; align-items: center; }
.lr .site-phone { display: none; width: 340px; max-width: 100%; margin: 0 auto; border-radius: 32px; border: 8px solid var(--lr-ink-3); overflow: hidden; }
.lr .site-phone-screen { padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; }
.lr .site-phone-head { display: flex; align-items: center; justify-content: space-between; }
.lr .site-phone-t { font: 700 26px/1 var(--lr-display); }
.lr .site-phone-sort { font-size: 13px; color: var(--lr-muted); }
.lr .site-phone-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lr .site-phone-chips span { height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--lr-ink-3); font-size: 13px; font-weight: 600; }
.lr .site-phone-card { padding: 12px; border-radius: 12px; background: var(--lr-card); border: 1px solid var(--lr-card-line); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.lr .site-phone-card .site-rate-n { font-size: 26px; }
.lr .site-phone-card .site-lane-stop { font-size: 15px; }
.lr .site-phone-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 8px 4px 12px; border-top: 1px solid var(--lr-ink-3); background: var(--lr-ink-2); font-size: 11px; color: var(--lr-mist); }
.lr .site-phone-tabs span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lr .site-phone-tabs .is-on { color: var(--lr-snow); }
.lr .site-phone-tabs .is-on .site-ico { color: var(--lr-amber); }
.lr .site-feats { margin-top: 24px; display: grid; gap: 16px; }
.lr .site-feat-t { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 600; font-size: 17px; }
.lr .site-feat-t .site-soon { margin-left: 0; }
.lr .site-feat > p + p { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--lr-muted); }
.lr .site-feat.is-soon .site-feat-t .site-ico { color: var(--lr-muted); }
.lr .site-a2hs { margin-top: 24px; padding: 16px; border-radius: 12px; background: var(--lr-paper); font-size: 15px; line-height: 1.45; }
.lr .site-a2hs > .site-strong { display: flex; align-items: center; gap: 8px; }
.lr .site-a2hs > p + p { margin-top: 4px; color: var(--lr-muted); }
.lr .site-a2hs ol { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lr .site-a2hs li { display: flex; align-items: center; gap: 10px; }
.lr .site-a2hs-n { flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--lr-ink); color: var(--lr-amber); display: flex; align-items: center; justify-content: center; font: 700 15px/1 var(--lr-display); }

/* FAQ: <details>, open */
.lr .site-faq-grid { display: grid; gap: 28px; }
.lr .site-ask { margin-top: 24px; padding: 18px; border-radius: 12px; background: var(--lr-white); border: 1px solid var(--lr-line-light); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.lr .site-faq { background: var(--lr-white); border: 1px solid var(--lr-line-light); border-radius: 12px; }
.lr .site-faq details + details { border-top: 1px solid var(--lr-line-light); }
.lr .site-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 18px; font: 600 18px/1.3 var(--lr-body); }
.lr .site-faq details > p { padding: 0 18px 18px; font-size: 16px; line-height: 1.55; color: var(--lr-muted); }

/* The closing band (ink) */
.lr .site-band { padding: 48px 0 56px; }
.lr .site-band-in { display: flex; flex-direction: column; gap: 8px; }
.lr .site-band-h { font-size: 44px; }

/* Page heads (About, Contact, legal texts) and their bodies */
.lr .site-pagehead { padding: 40px 0 36px; }
.lr .site-page-h { margin-top: 16px; }
.lr .site-doc-meta { margin-top: 12px; font-size: 15px; color: var(--lr-muted); }
.lr .site-in.site-doc-grid { display: grid; gap: 28px; padding-top: 32px; padding-bottom: 56px; }
.lr .site-doc { max-width: 720px; font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.lr .site-doc p + p { margin-top: 14px; }
/* A text still being finalized (a draft): the note, then the DRAFT mark (.ltx-draft-mark, as on the app's /legal
   pages), then the text in a warn-edged card. */
.lr .site-doc-main { min-width: 0; }
.lr .site-doc-final, .lr .site-doc-main > .ltx-draft-mark { max-width: 720px; }
.lr .site-doc-main > .ltx-draft-mark { margin-bottom: 16px; }
.lr .site-doc.site-doc-is-draft { padding: 20px; border-radius: 12px; background: var(--lr-card); border: 1px solid var(--lr-warn-line); }
.lr .site-doc-contact { max-width: 720px; margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--lr-muted); }
.lr .site-doc-contact a { font-weight: 600; }
.lr .site-optout { align-self: start; padding: 20px; border-radius: 12px; background: var(--lr-white); border: 1px solid var(--lr-line-light); scroll-margin-top: 80px; }
.lr .site-optout > p { margin-top: 10px; font-size: 15px; line-height: 1.5; }
.lr .site-optout .lr-alert { margin-top: 14px; }
.lr .site-optout-form .lr-btn { margin-top: 16px; width: 100%; }
.lr .site-in.site-prose { padding-top: 32px; padding-bottom: 56px; font-size: 17px; line-height: 1.6; }
.lr .site-prose > * { max-width: 760px; }
.lr .site-prose .site-h3 { margin-top: 28px; }
.lr .site-prose .site-h3:first-child { margin-top: 0; }
.lr .site-prose p { margin-top: 10px; }
.lr .site-status-block { padding: 12px 14px; border-radius: 10px; background: var(--lr-white); border: 1px solid var(--lr-line-light); font-weight: 600; font-size: 15px; }
.lr .site-in.site-contact { padding-top: 32px; padding-bottom: 56px; }
.lr .site-contact-cards { display: grid; gap: 12px; margin-bottom: 28px; }
.lr a.site-contact-card, .lr .site-contact-card { flex-direction: row; align-items: center; gap: 14px; color: var(--lr-text); font-weight: 400; }
.lr a.site-contact-card:hover { border-color: var(--lr-slate); text-decoration: none; color: var(--lr-text); }
.lr .site-contact-card > .site-ico { width: 24px; height: 24px; }
.lr .site-contact-t { display: block; font-size: 13px; font-weight: 600; color: var(--lr-muted); }
.lr .site-contact-v { display: block; font: 600 20px/1.3 var(--lr-body); overflow-wrap: anywhere; }
.lr .site-contact > p { margin-top: 8px; }
.lr .site-contact .site-doors { margin-top: 12px; max-width: 420px; }
.lr .site-contact .site-doors a { background: var(--lr-white); border: 1px solid var(--lr-line-light); }
.lr .site-contact-optout { margin-top: 24px; }
.lr .site-in.site-msg { padding-top: 24px; padding-bottom: 56px; }

/* Footer */
.lr .site-foot { padding: 40px 0 96px; background: var(--lr-paper); border-top: 1px solid var(--lr-line-light); }
.lr .site-foot-grid { display: grid; gap: 24px; }
.lr .site-foot-brand p { margin-top: 10px; max-width: 320px; font-size: 15px; line-height: 1.5; color: var(--lr-muted); }
.lr .site-foot-col { display: none; }
.lr .site-foot-h { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lr-slate); }
.lr .site-foot ul { list-style: none; margin: 8px 0 0; padding: 0; }
.lr .site-foot li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--lr-text); font-weight: 500; }
.lr .site-foot-acc { margin-top: 20px; border-top: 1px solid var(--lr-line-light); }
.lr .site-foot-acc details { border-bottom: 1px solid var(--lr-line-light); }
.lr .site-foot-acc summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-weight: 600; font-size: 17px; }
.lr .site-foot-acc ul { margin: 0 0 8px; }
.lr .site-foot-legal { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.lr .site-foot-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--lr-text); font-weight: 500; }
.lr .site-foot-bottom { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lr-line-light); display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--lr-slate); }

/* Phones: the sticky Get a quote bar (Home; while the broker authority is pending, its Coming soon label) */
.lr .site-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--lr-ink-3);
}
.lr .site-sticky-txt { display: flex; flex-direction: column; min-width: 0; }
.lr .site-sticky-t { font: 700 18px/1.1 var(--lr-display); }
.lr .site-sticky-d { font-size: 13px; color: var(--lr-muted); }

/* Phones: the lane cards stay compact (their examples show from 760px, as the Home-Mobile board draws them). */
.lr .site-lane-card .site-sample, .lr .site-lane-card .site-grow { display: none; }

/* Phones: Home's sections in the Home-Mobile board's order (the carrier app right after the lanes), and no
   closing band (the sticky Get a quote bar does its job there). From 760px, the Home board's order. */
.lr .site-flow { display: flex; flex-direction: column; }
.lr .site-flow > * { order: 2; }
.lr .site-flow > .site-hero, .lr .site-flow > .site-statusbar, .lr .site-flow > #lanes { order: 0; }
.lr .site-flow > #app { order: 1; }
.lr .site-flow > .site-band { display: none; }

@media (min-width: 760px) {
  .lr .site-flow { display: block; }
  .lr .site-flow > .site-band { display: block; }
  .lr .site-in { padding: 0 32px; }
  .lr .site-h1 { font-size: 64px; }
  .lr .site-h2 { font-size: 44px; }
  .lr .site-h3 { font-size: 28px; }
  .lr .site-sec { padding: 72px 0; }
  .lr .site-hero { padding: 56px 0 40px; }
  .lr .site-card { padding: 24px; }
  .lr .site-lane-card .site-sample { display: block; }
  .lr .site-lane-card .site-grow { display: block; }
  .lr .site-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lr .site-step { flex-direction: column; }
  .lr .site-step-mark { flex-direction: row; }
  .lr .site-price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lr .site-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lr .site-contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lr .site-quote { padding: 28px; }
  .lr .site-rate-n { font-size: 60px; }
  .lr .site-band-in { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .lr .site-band-h { font-size: 56px; }
  /* The band's Coming soon label (the broker authority pending) keeps the column the two buttons take once licensed
     and wraps inside it, above Talk to our team, so the heading keeps its lines. */
  .lr .site-band .site-ctas-soon { flex: 0 1 350px; }
  .lr .site-band .site-ctas-soon .site-offer-soon { flex-basis: 100%; }
  .lr .site-foot { padding-bottom: 40px; }
  .lr .site-sticky { display: none; }
  .lr .site-foot-bottom { flex-direction: row; justify-content: space-between; }
}
@media (min-width: 900px) {
  .lr .site-top-in { min-height: 76px; }
  .lr .site-nav, .lr .site-signin { display: flex; }
  .lr .site-signin { display: block; }
  .lr .site-menu { display: none; }
  .lr .site-sec-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 40px; }
  .lr .site-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
  .lr .site-price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .lr .site-app-grid { grid-template-columns: 380px minmax(0, 1fr); gap: 64px; }
  .lr .site-phone { display: block; }
  .lr .site-faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .lr .site-doc-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; }
  .lr .site-foot-grid { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
  .lr .site-foot-col { display: block; }
  .lr .site-foot-acc { display: none; }
  .lr .site-foot-legal { display: none; }
}
@media (min-width: 1100px) {
  .lr .site-hero-grid { grid-template-columns: minmax(0, 1fr) 520px; gap: 72px; }
  .lr .site-h1 { font-size: 84px; }
  .lr .site-h2 { font-size: 52px; }
  .lr .site-sec { padding: 88px 0; }
  .lr .site-hero { padding: 72px 0 48px; }
  .lr .site-card { padding: 28px; }
  .lr .site-band-h { font-size: 64px; }
}
/* Hotfix 12c (the owner's request of Oct 5): Home's "For partners" card and Contact's topics. The card's old-link anchor
   (#brokers, while outside brokers don't post loads) sits at the card's top, so /#brokers lands where /#partners does;
   with the broker card back beside it (four lane cards) the lanes go two by two from 900px. The topics are links (pills,
   44px targets), the one preset marked aria-current; never a form control. */
.lr .site-partner-card { position: relative; }
.lr .site-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; scroll-margin-top: 80px; }
.lr .site-partner-ctas { display: flex; flex-wrap: wrap; column-gap: 24px; }
.lr .site-partner-card .site-join-soon { min-height: 0; margin-top: 12px; }
.lr .site-topics { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lr .site-topics a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--lr-line-light); background: var(--lr-white); color: var(--lr-text); font-weight: 600; }
.lr .site-topics a:hover { border-color: var(--lr-slate); text-decoration: none; color: var(--lr-text); }
.lr .site-topics a[aria-current="true"] { background: var(--lr-ink); border-color: var(--lr-ink); color: var(--lr-snow); }
.lr .site-topic { max-width: 760px; margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: var(--lr-white); border: 1px solid var(--lr-line-light); font-size: 16px; line-height: 1.5; }
.lr .site-topic > p + p { margin-top: 6px; }
.lr .site-contact .site-topics + .site-contact-cards, .lr .site-contact .site-topic + .site-contact-cards { margin-top: 20px; }
@media (min-width: 900px) {
  .lr .site-cols.site-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* === end Page: Public site === */

/* === Page: Legal texts on the app (legal_text.html; the su_legal line on the sign-up forms; the broker
   application's draft agreement; T0) =========================================================================
   The owner's decision of Sep 27: legal texts never block sign-ins or testing. The sign-up forms link the Terms of
   Service and the Privacy Policy; while one is a draft, the page shows it marked DRAFT with "This text is being
   finalized". Light, like the doors. Page classes only (ltx-*, su-legal*, ag-draft-mark); the shared lr- classes
   are used as they are. */
.ltx { max-width: 760px; margin: 0 auto; padding: 12px 16px 48px; }
.ltx-h1 { margin-top: 20px; }
.ltx-meta { margin-top: 8px; color: var(--lr-muted); font-size: 14px; line-height: 20px; }
.ltx-final { margin-top: 16px; }
/* A draft carries the word DRAFT across its top, in the warn colour (text, not colour alone). */
.ltx-draft-mark {
  margin-top: 16px; padding: 6px 12px; border: 1px dashed var(--lr-warn); border-radius: 10px; background: var(--lr-warn-soft);
  color: var(--lr-warn); font: 700 18px/22px var(--lr-display); letter-spacing: 0.2em; text-align: center;
}
.ltx-text {
  margin-top: 16px; padding: 20px; border-radius: 12px; background: var(--lr-card); border: 1px solid var(--lr-card-line);
  font-size: 15px; line-height: 23px; overflow-wrap: anywhere;
}
.ltx-text.ltx-is-draft { border-color: var(--lr-warn-line); }
.ltx-text p { margin: 0 0 14px; }
.ltx-text p:last-child { margin-bottom: 0; }
/* How to reach LaneRally about the text (the support email the owner set), under it. */
.ltx-contact { margin-top: 16px; }
.ltx-contact a { font-weight: 600; }
.su-legal { margin-top: 20px; }
.su-legal p + p { margin-top: 6px; }
.su-legal a { font-weight: 600; }
.su-legal-draft { color: var(--lr-warn); font-weight: 600; }
/* C3: the box to agree to the texts (clickwrap), unticked, beside their links; the draft line under it. */
.su-legal-box { margin: 0; }
.su-legal-box + p { margin-top: 8px; }
.ag-draft-mark { margin-top: 12px; }
.su-final + .ag-draft-mark { margin-top: 12px; }
.ag-fs .su-final { margin-top: 12px; }
/* === end Page: Legal texts on the app === */

/* === Page: Testing access (T1: invite_tester.html, _testing.html on the sign-up pages, the TEST mark, and the
   website preview's banner and phone frame) ==================================================================
   Tester invite links, test companies and the website preview. Light on the doors and sign-ups; the TEST mark is
   the shared warn badge with the word (never colour alone), on the dark carrier app too. Page classes only
   (ti-*, su-test-*, lr-test-mark, lr-mark-test, lr-seg-test, site-preview-*); no shared class is restyled. The
   preview's classes are under body.lr.site like the rest of the site's, and draw nothing on the site host. */
.lr-test-mark { letter-spacing: 0.08em; vertical-align: middle; }
.co-name .lr-test-mark { margin-left: 6px; }
.acct-cur .lr-test-mark, .acct-sw-l .lr-test-mark, .role-label .lr-test-mark { margin-left: 6px; }
/* A test company's stand-in for the base check (identity.StepTest): a dashed ring, and a dashed segment. */
.lr-mark-test { border: 2px dashed var(--lr-review); }
.lr-seg-test { background: repeating-linear-gradient(90deg, var(--lr-review) 0 8px, transparent 8px 12px); }
/* The tester invite page's list. */
.ti-list { display: flex; flex-direction: column; gap: 10px; }
.ti-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 21px; }
.ti-list .lr-ico { flex: none; margin-top: 1px; color: var(--lr-good); }
/* The sign-up pages: the invite note, the way to the test variant, and its form. */
.su-test-note { margin-top: 14px; }
.su-test-link { margin-top: 14px; font-size: 14px; line-height: 20px; color: var(--lr-muted); }
.su-test-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.su-test-form { margin-top: 20px; }
.su-test-form .lr-field + .su-fs { margin-top: 22px; }
.su-h1 .lr-test-mark { margin-left: 6px; }

/* The website preview (/preview/site on the app's host): the Preview banner over the page (it scrolls away, so the
   site's own sticky header behaves as on the site), its view and width toggles, and the phone frame. */
.lr .site-preview-bar { background: var(--lr-bg); color: var(--lr-text); border-bottom: 3px solid var(--lr-amber); }
.lr .site-preview-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; }
.lr .site-preview-t { flex: 1 1 420px; font-size: 14px; line-height: 20px; }
.lr .site-preview-tag {
  display: inline-flex; align-items: center; height: 24px; margin-right: 6px; padding: 0 10px; border-radius: 999px;
  background: var(--lr-amber); color: var(--lr-ink); font: 700 12px/1 var(--lr-body); letter-spacing: 0.08em; text-transform: uppercase;
}
/* "Preview as: Today | Once licensed": two links drawn as one segmented control; the view shown is aria-current
   (filled amber, with the word bold: never colour alone). */
.lr .site-preview-as { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; line-height: 20px; }
.lr .site-preview-as-l { color: var(--lr-muted); font-weight: 600; }
.lr .site-preview-segs { display: inline-flex; border: 1px solid var(--lr-line); border-radius: 999px; }
.lr .site-preview-seg { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 500; color: var(--lr-link); text-decoration: none; }
.lr .site-preview-seg:hover { color: var(--lr-link-hover); text-decoration: underline; }
.lr .site-preview-seg[aria-current="true"] { background: var(--lr-amber); color: var(--lr-ink); font-weight: 700; text-decoration: none; }
.lr .site-preview-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.lr .site-preview-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--lr-link); }
.lr .site-preview-main { padding-top: 24px; padding-bottom: 48px; }
.lr .site-preview-main > p { margin-top: 12px; max-width: 640px; font-size: 16px; line-height: 1.5; color: var(--lr-muted); }
.lr .site-preview-phone { display: flex; justify-content: center; }
.lr .site-preview-frame { width: 390px; max-width: 100%; height: 844px; border: 1px solid var(--lr-line-light); border-radius: 12px; background: var(--lr-paper); }
/* === end Page: Testing access === */

/* === Kit (S7: _kit.html, the Brand and Brand-Marketplace boards' components) ===================================
   The freight and marketplace components every carrier and shipper page builds from, on either ground: they read
   the ground's tokens (.lr-light, .lr-dark), and the status pills' own tones below, which each ground defines, so a
   light card inside the dark app (or the reverse) reads right. Class names are kit- only; no shared class is
   restyled. Money is the text colour (ink on light, snow on dark), never green: no kit-rate rule may use a good
   colour (TestNoGreenMoney). Green marks verified or done only. */
.lr-light, .lr .lr-light {
  --kit-blue-bg: #E8EEFB; --kit-blue-fg: #2359D1; --kit-amber-bg: #FDF1D3; --kit-amber-fg: #10171C; --kit-amber-dot: currentColor;
  --kit-warn-bg: #FDF1D3; --kit-warn-fg: #A15C07; --kit-neutral-bg: #EEF1F3; --kit-neutral-fg: #10171C;
  --kit-road-bg: #10171C; --kit-road-fg: #EEF1F3; --kit-road-dot: #F6B72E; --kit-good-bg: #E7F3EC; --kit-good-fg: #1D7A46;
  --kit-outline-line: #DAD5CB; --kit-outline-fg: #56646E; --kit-bad-bg: #FBE9E7; --kit-bad-fg: #B42318;
  --kit-off-bg: #EEF1F3; --kit-off-fg: #56646E; --kit-tag-bg: var(--lr-amber-soft); --kit-tag-fg: var(--lr-ink);
  --kit-est-bg: #F4F1EA; --kit-soft: #F4F1EA; --kit-danger-fg: #FFFFFF;
}
.lr-dark, .lr .lr-dark {
  --kit-blue-bg: #243039; --kit-blue-fg: #8DB0FF; --kit-amber-bg: #243039; --kit-amber-fg: #EEF1F3; --kit-amber-dot: #F6B72E;
  --kit-warn-bg: #243039; --kit-warn-fg: #FFC66B; --kit-neutral-bg: #243039; --kit-neutral-fg: #EEF1F3;
  --kit-road-bg: #F6B72E; --kit-road-fg: #10171C; --kit-road-dot: currentColor; --kit-good-bg: #243039; --kit-good-fg: #5ED08F;
  --kit-outline-line: #56646E; --kit-outline-fg: #9AA7B0; --kit-bad-bg: #243039; --kit-bad-fg: #FF8A7A;
  --kit-off-bg: #243039; --kit-off-fg: #9AA7B0; --kit-tag-bg: var(--lr-ink-3); --kit-tag-fg: var(--lr-snow);
  --kit-est-bg: #10171C; --kit-soft: var(--lr-ink-2); --kit-danger-fg: #10171C;
}
.lr .kit-ico { flex: none; }
.lr .kit-muted { color: var(--lr-muted); }
.lr .kit-small { font-size: 13px; line-height: 18px; }
.lr .kit-strong { font-weight: 600; }
.lr .kit-good { color: var(--lr-good); font-weight: 600; }
.lr .kit-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--kit-tag-bg); color: var(--kit-tag-fg); font: 600 12px/1 var(--lr-body); white-space: nowrap; }
.lr .kit-card { background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; padding: 16px; }
.lr .kit-2btn { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lr .kit-2btn .lr-btn { width: 100%; padding: 0 10px; }
.lr .kit-btn-off, .lr .kit-btn-off:hover { background: var(--kit-off-bg); color: var(--kit-off-fg); box-shadow: none; cursor: not-allowed; }
.lr .lr-btn .kit-ico { width: 20px; height: 20px; }

/* Status pills: a dot plus a label, the Brand board's tones. */
.lr .kit-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px 3px 9px; border-radius: 999px;
  font: 600 13px/1.2 var(--lr-body); white-space: nowrap;
}
.lr .kit-dot { flex: none; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.lr .kit-pill-blue { background: var(--kit-blue-bg); color: var(--kit-blue-fg); }
.lr .kit-pill-amber { background: var(--kit-amber-bg); color: var(--kit-amber-fg); }
.lr .kit-pill-amber .kit-dot { background: var(--kit-amber-dot); }
.lr .kit-pill-warn { background: var(--kit-warn-bg); color: var(--kit-warn-fg); }
.lr .kit-pill-neutral { background: var(--kit-neutral-bg); color: var(--kit-neutral-fg); }
.lr .kit-pill-road { background: var(--kit-road-bg); color: var(--kit-road-fg); }
.lr .kit-pill-road .kit-dot { background: var(--kit-road-dot); }
.lr .kit-pill-good { background: var(--kit-good-bg); color: var(--kit-good-fg); }
.lr .kit-pill-outline { background: transparent; color: var(--kit-outline-fg); box-shadow: inset 0 0 0 1px var(--kit-outline-line); }
.lr .kit-pill-bad { background: var(--kit-bad-bg); color: var(--kit-bad-fg); }

/* Lane line: origin (filled square), a dashed connector, destination (hollow square). */
.lr .kit-lane { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lr .kit-lane::before { content: ""; position: absolute; left: 4px; top: 16px; bottom: 26px; border-left: 2px dashed var(--lr-muted); }
.lr .kit-lane-stop { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.lr .kit-lane-o, .lr .kit-lane-d { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 2px; }
.lr .kit-lane-o { background: var(--lr-text); }
.lr .kit-lane-d { border: 2px solid var(--lr-text); background: var(--lr-card); }
.lr .kit-lane-txt { min-width: 0; }
.lr .kit-lane-city { font-weight: 600; overflow-wrap: anywhere; }
.lr .kit-lane-city .kit-muted { font-weight: 400; }
.lr .kit-lane-when { font-size: 13px; line-height: 18px; color: var(--lr-muted); }

/* Rate block: the total in the text colour (never green), the per-mile muted. */
.lr .kit-rate { text-align: right; }
.lr .kit-rate-n { font: 700 36px/1 var(--lr-display); letter-spacing: -0.01em; color: var(--lr-text); white-space: nowrap; }
.lr .kit-rate-mi { margin-top: 4px; font-size: 14px; color: var(--lr-muted); white-space: nowrap; }
.lr .kit-rate-sm .kit-rate-n { font-size: 22px; }
.lr .kit-rate-sm .kit-rate-mi { margin-top: 2px; font-size: 12px; }

/* Equipment tag: mono caps. */
.lr .kit-eq-wrap { display: inline-flex; align-items: center; gap: 8px; }
.lr .kit-eq {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 6px;
  border: 1px solid var(--lr-text); font: 500 12px/1 var(--lr-mono); color: var(--lr-text);
}
.lr-dark .kit-eq, .lr .lr-dark .kit-eq { border-color: transparent; background: var(--lr-ink-3); }
.lr .kit-eq-name { font-size: 14px; }

/* Broker of record, pay history. */
.lr .kit-bor { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.lr .kit-bor .lr-mono { font-size: 13px; }
.lr .kit-pay { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--lr-muted); }

/* LaneRally estimate chip (dashed when confidence is low) and the comparison labels (neutral; warn past +35%). */
.lr .kit-est {
  display: inline-flex; align-items: flex-start; gap: 8px; max-width: 100%; min-height: 34px; padding: 7px 14px 7px 12px; border-radius: 18px;
  border: 1px solid var(--lr-card-line); background: var(--kit-est-bg); font-size: 14px; line-height: 20px;
}
.lr .kit-est b { font-weight: 600; }
.lr .kit-est-low { border: 1px dashed var(--lr-muted); background: transparent; }
.lr .kit-cmp-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lr .kit-cmp {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 11px 3px 9px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--lr-muted); color: var(--lr-text); font: 600 13px/1.2 var(--lr-body);
}
.lr .kit-cmp .kit-ico { width: 16px; height: 16px; }
.lr .kit-cmp-warn { box-shadow: inset 0 0 0 1px var(--lr-warn); background: var(--lr-warn-soft); color: var(--lr-warn); }
.lr .kit-cmp-d { font-size: 13px; line-height: 18px; color: var(--lr-muted); }

/* Eligibility (muted, never red), freshness, booking mode. */
.lr .kit-elig { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 20px; color: var(--lr-muted); }
.lr .kit-elig-ok { align-items: center; color: var(--lr-good); font-weight: 600; }
.lr .kit-elig a { font-weight: 600; }
.lr .kit-fresh { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .kit-fresh .kit-ico { width: 16px; height: 16px; }
.lr .kit-modes { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.lr .kit-mode {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 12px 3px 9px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--lr-muted); font: 600 13px/1.2 var(--lr-body);
}
.lr .kit-mode .kit-ico { width: 16px; height: 16px; }
.lr .kit-mode-now { background: var(--lr-amber); color: var(--lr-ink); box-shadow: none; font-weight: 700; }

/* The unlock ladder. */
.lr .kit-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.35; }
.lr .kit-steps li { display: flex; gap: 10px; }
.lr .kit-steps b { display: block; font-weight: 600; }
.lr .kit-step-n {
  flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--lr-ink); color: var(--lr-snow); border: 1px solid var(--lr-ink-3);
  display: flex; align-items: center; justify-content: center; font: 500 12px/1 var(--lr-mono);
}
.lr .kit-step-d { display: block; color: var(--lr-muted); }

/* Message and Call. */
.lr .kit-mc { background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; padding: 14px; }
.lr .kit-mc > p { margin-top: 8px; }
.lr .kit-mc-btns { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lr .kit-mc-who + .kit-mc-btns { margin-top: 12px; }
.lr .kit-mc-btns:first-child { margin-top: 0; }

/* The booking sheet and its outcomes. */
.lr .kit-sheet { max-width: 420px; background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 16px 16px 0 0; padding: 8px 16px 16px; }
.lr .kit-sheet-grab { width: 36px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: var(--lr-muted); }
.lr .kit-sheet-h { font: 600 22px/1.05 var(--lr-display); letter-spacing: -0.01em; color: var(--lr-text); }
.lr .kit-sheet-lane { margin-top: 6px; font-size: 16px; font-weight: 600; }
.lr .kit-sheet-rate { margin-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.lr .kit-sheet-rate .kit-rate { text-align: left; }
.lr .kit-sheet-rate .kit-rate-n { font-size: 40px; }
.lr .kit-sheet-bor { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lr-card-line); }
.lr .kit-sheet-form > p { margin-top: 12px; }
.lr .kit-sheet-form .lr-btn { margin-top: 12px; }
.lr .kit-risk { margin-top: 12px; padding: 12px; border: 1px solid var(--lr-warn); border-radius: 10px; }
.lr .kit-risk-t { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; font-weight: 600; }
.lr .kit-risk-t .kit-ico { color: var(--lr-warn); }
.lr .kit-risk p { margin-top: 4px; }
.lr .kit-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 4px; font-size: 15px; font-weight: 600; cursor: pointer; }
.lr .kit-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--lr-amber); }
.lr .kit-out { background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; padding: 12px; }
.lr .kit-out-t { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; font-weight: 600; }
.lr .kit-out-booked .kit-out-t .kit-ico { color: var(--lr-good); }
.lr .kit-out-lost .kit-out-t .kit-ico { color: var(--lr-muted); }
.lr .kit-out-changed .kit-out-t .kit-ico, .lr .kit-out-pending .kit-out-t .kit-ico { color: var(--lr-warn); }
.lr .kit-out-pending { border-color: var(--lr-warn-line); background: var(--lr-warn-soft); }
.lr .kit-out p { margin-top: 2px; }
.lr .kit-out-btn { margin-top: 10px; width: 100%; }
.lr .kit-out-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }

/* Pickup PIN and location sharing. */
.lr .kit-pin { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--lr-amber); border-radius: 10px; background: var(--lr-card); }
.lr .kit-pin > .kit-ico { color: var(--lr-amber); }
.lr .kit-pin-shipper { border-color: var(--lr-text); }
.lr .kit-pin-shipper > .kit-ico { color: var(--lr-text); }
.lr .kit-pin-t { font-size: 14px; font-weight: 600; }
.lr .kit-pin-n { font: 500 20px/1 var(--lr-mono); letter-spacing: 0.12em; }
.lr .kit-loc { background: var(--kit-soft); border-radius: 10px; padding: 14px; }
.lr .kit-loc > p { margin-top: 12px; line-height: 1.45; }
.lr .kit-loc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.lr .kit-loc-on, .lr .kit-loc-off { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.lr .kit-loc-on { background: var(--kit-neutral-bg); }
.lr .kit-loc-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--lr-good); }
.lr .kit-loc-off { box-shadow: inset 0 0 0 1px var(--lr-muted); color: var(--lr-muted); }
.lr .kit-loc-off .kit-ico { width: 16px; height: 16px; }

/* Load card. */
.lr .kit-load-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lr .kit-load-mid { margin-top: 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lr .kit-load-facts { margin-top: 12px; display: flex; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .kit-load .kit-fresh { margin-top: 6px; }
.lr .kit-load-est { margin-top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lr .kit-load .kit-elig { margin-top: 10px; }
.lr .kit-load-bor { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lr-card-line); }
.lr .kit-load .kit-2btn { margin-top: 14px; }
.lr .kit-load > p { margin-top: 8px; }

/* Shipment rows: a table on desktop, stacked on phones. */
.lr .kit-ships { list-style: none; margin: 0; padding: 0; background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; overflow: hidden; }
.lr .kit-ship { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 16px; border-top: 1px solid var(--lr-card-line); }
.lr .kit-ship:first-child { border-top: 0; }
.lr .kit-ship-sel { background: var(--kit-blue-bg); }
.lr .kit-ship-ref { grid-column: 1; font-size: 13px; }
.lr .kit-ship-st { grid-column: 2; grid-row: 1; justify-self: end; }
.lr .kit-ship-lane { grid-column: 1; display: flex; flex-direction: column; gap: 2px; }
.lr .kit-ship-rate { grid-column: 2; grid-row: 2 / span 2; align-self: start; }
.lr .kit-ship-eq { display: none; }
.lr .kit-ship-car { grid-column: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
@media (min-width: 900px) {
  .lr .kit-ship { grid-template-columns: 96px minmax(0, 1.6fr) 48px minmax(0, 1.2fr) 96px minmax(0, 1fr); align-items: center; }
  .lr .kit-ship > * { grid-column: auto !important; grid-row: auto !important; }
  .lr .kit-ship-eq { display: block; }
  .lr .kit-ship-st { justify-self: start; }
}

/* Toasts: an icon, a sentence, one action. */
.lr .kit-toast { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; }
.lr .kit-toast > .kit-ico { margin-top: 1px; }
.lr .kit-toast-good > .kit-ico { color: var(--lr-good); }
.lr .kit-toast-bad { border-color: var(--lr-bad); }
.lr .kit-toast-bad > .kit-ico { color: var(--lr-bad); }
.lr .kit-toast-info { background: var(--lr-ink); border-color: var(--lr-ink); color: var(--lr-snow); --lr-muted: var(--lr-mist); --lr-link: var(--lr-route-dark); }
.lr .kit-toast-info > .kit-ico { color: var(--lr-route-dark); }
.lr-dark .kit-toast-info, .lr .lr-dark .kit-toast-info { background: var(--lr-ink-2); border-color: var(--lr-ink-3); }
.lr .kit-toast-txt { flex: 1; min-width: 0; }
.lr .kit-toast-t { font-weight: 600; font-size: 15px; }
.lr .kit-toast-a { flex: none; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; font-size: 14px; }
.lr .kit-toast-x { flex: none; width: 44px; height: 44px; margin: -10px -8px -10px 0; border: 0; border-radius: 10px; background: transparent; color: var(--lr-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* Empty state: say what's missing, offer the next step. */
.lr .kit-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 12px; }
.lr .kit-empty-ico { width: 64px; height: 64px; border-radius: 999px; background: var(--lr-card); border: 1px solid var(--lr-card-line); display: flex; align-items: center; justify-content: center; color: var(--lr-text); }
.lr .kit-empty-ico .kit-ico { width: 30px; height: 30px; }
.lr .kit-empty-t { margin-top: 14px; font: 600 26px/1.05 var(--lr-display); letter-spacing: -0.01em; color: var(--lr-text); }
.lr .kit-empty-b { margin-top: 8px; max-width: 340px; font-size: 15px; line-height: 21px; color: var(--lr-muted); }
.lr .kit-empty-acts { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lr .kit-empty > .kit-small { margin-top: 10px; }

/* Opens soon: the drawn screen's state while its feature can't open, and why. */
.lr .kit-soon { background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; padding: 16px; }
.lr .kit-soon-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lr .kit-soon-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--kit-soft); display: flex; align-items: center; justify-content: center; }
.lr-dark .kit-soon-ico, .lr .lr-dark .kit-soon-ico { background: var(--lr-ink-3); color: var(--lr-amber); }
.lr .kit-soon-ico .kit-ico { width: 24px; height: 24px; }
.lr .kit-soon-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--kit-tag-bg); color: var(--kit-tag-fg); font: 600 12px/1 var(--lr-body); white-space: nowrap; }
.lr-dark .kit-soon-tag, .lr .lr-dark .kit-soon-tag { color: var(--lr-amber); }
.lr .kit-soon-t { margin-top: 12px; font: 700 26px/1.05 var(--lr-display); letter-spacing: -0.01em; color: var(--lr-text); }
.lr .kit-soon-b { margin-top: 8px; font-size: 15px; line-height: 22px; }
.lr .kit-soon-why { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--lr-muted); }
.lr .kit-soon-why .kit-strong { color: var(--lr-text); }
.lr a.kit-soon-a { margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 15px; }
.lr a.kit-soon-a .kit-ico { width: 18px; height: 18px; }

/* The Brand board's base, beside the foundation's buttons and inputs (lr-btn, lr-btn-2, lr-input, and its
   aria-invalid error border): the Danger button (cancel, fell off, TONU, release: bad on either ground, a white
   label on light, ink on dark: 6.6:1 and 7.8:1), the Disabled one is kit-btn-off above; an input's error message
   (an icon and words in the bad colour, never colour alone); the focus ring as a specimen (the kit page; a real
   field gets it from :focus); and the type scale. */
.lr .kit-btn-danger, .lr a.kit-btn-danger { background: var(--lr-bad); color: var(--kit-danger-fg); }
.lr .kit-btn-danger:hover, .lr a.kit-btn-danger:hover { background: var(--lr-bad); color: var(--kit-danger-fg); filter: brightness(0.92); }
.lr .kit-err { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--lr-bad); }
.lr .kit-err .kit-ico { width: 16px; height: 16px; }
.lr .lr-input.kit-focus { outline: 3px solid var(--lr-focus); outline-offset: 1px; border-color: var(--lr-text); }
.lr .kit-t72 { font: 700 72px/1 var(--lr-display); letter-spacing: -0.01em; }
.lr .kit-t56 { font: 700 56px/1 var(--lr-display); letter-spacing: -0.01em; }
.lr .kit-t40 { font: 700 40px/1 var(--lr-display); letter-spacing: -0.01em; }
.lr .kit-t28 { font: 600 28px/1.05 var(--lr-display); letter-spacing: -0.01em; }
.lr .kit-tl { font-size: 18px; line-height: 28px; }
.lr .kit-tb { font-size: 16px; line-height: 24px; }
.lr .kit-med { font-weight: 500; }
@media (max-width: 599px) { .lr .kit-t72 { font-size: 48px; } .lr .kit-t56 { font-size: 40px; } }
/* === end Kit === */

/* === Portal shells (S7: _portal_shell.html, the bell in _portal_header.html, carrier_offline.html) =============
   The carrier app (dark) and the shipper portal (light) around every carrier and shipper page: five bottom tabs on
   phones (thumb-first, 64px plus the phone's home-indicator inset), a rail on wide screens (the carrier's tabs stand
   up at 900px; the shipper's full rail, the Shipper-Dashboard board's, from 1024px). Active tab: amber mark, amber
   icon (carrier) or amber-soft pill (shipper), and the bright label, with aria-current. The shipper's header is
   white, as its boards draw it. Installed as an app (display-mode: standalone), the header and tabs clear the
   phone's status bar and home indicator (viewport-fit=cover on shell pages). The shell's class is on <html>
   (html.lr-shell.lr-shell-carrier), so the body keeps its ground's classes. Classes shell-, lr-bell, lr-top-test
   and off- only. */
.lr-shell > body {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
.lr-shell .lr-top { padding-top: env(safe-area-inset-top, 0px); }
/* Whatever gets focus scrolls clear of the bottom tabs too. */
.lr-shell { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
.lr-shell .lr-top-in { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.lr-top-test { flex: none; display: inline-flex; }
.lr-top-test .lr-test-mark { vertical-align: 0; }
.lr .lr-bell {
  position: relative; flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; color: inherit; text-decoration: none;
}
.lr a.lr-bell:hover { color: inherit; background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.lr .lr-bell[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--lr-mist); }
.lr .lr-bell-n {
  position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; border: 2px solid var(--lr-ink);
  background: var(--lr-amber); color: var(--lr-ink); font: 700 11px/16px var(--lr-body); text-align: center;
}
/* The shipper portal's header is white (Shipper-Home). */
.lr-shell-shipper .lr-top { background: var(--lr-white); color: var(--lr-ink); border-bottom-color: var(--lr-line-light); --lr-focus: var(--lr-route); }
.lr-shell-shipper .lr-top-name { border-left-color: var(--lr-line-light); color: var(--lr-slate); }
.lr-shell-shipper .lr-top .acct-menu > summary:focus-visible { outline-color: #2359D1; }
.lr-shell-shipper .lr-bell { box-shadow: inset 0 0 0 1px var(--lr-line-light); }
.lr-shell-shipper a.lr-bell:hover { background: var(--lr-paper); }
.lr-shell-shipper .lr-bell[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--lr-ink); }
.lr-shell-shipper .lr-bell-n { border-color: var(--lr-white); top: -6px; right: -6px; }

/* The tabs. */
.lr .shell-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: var(--lr-card); border-top: 1px solid var(--lr-card-line);
}
.lr a.shell-tab {
  position: relative; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 2px; color: var(--lr-muted); font: 500 12px/14px var(--lr-body); text-align: center; text-decoration: none; overflow-wrap: anywhere;
}
.lr a.shell-tab:hover { color: var(--lr-text); text-decoration: none; }
.lr a.shell-tab .kit-ico { width: 24px; height: 24px; }
.lr a.shell-tab[aria-current="page"] { color: var(--lr-text); font-weight: 600; }
.lr a.shell-tab[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 28px; margin-left: -14px; height: 3px; border-radius: 0 0 3px 3px; background: var(--lr-amber);
}
.lr-shell-carrier a.shell-tab[aria-current="page"] .kit-ico, .lr-dark a.shell-tab[aria-current="page"] .kit-ico { color: var(--lr-amber); }
.lr .shell-tab-ico { width: 52px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.lr a.shell-tab[aria-current="page"] .shell-tab-ico { background: var(--lr-amber-soft); color: var(--lr-ink); }
.lr-shell-shipper a.shell-tab[aria-current="page"] { font-weight: 700; }
.lr-shell-shipper a.shell-tab[aria-current="page"]::before { width: 32px; margin-left: -16px; height: 4px; }
.lr .shell-rail { display: none; }
@media (min-width: 900px) {
  /* The carrier app on a wide screen: the five tabs stand up at the left. */
  .lr-shell-carrier > body { padding-bottom: 0; }
  .lr-shell-carrier main { margin-left: 96px; }
  .lr-shell-carrier .shell-tabs {
    top: 57px; bottom: 0; right: auto; width: 96px; grid-template-columns: none; grid-auto-rows: 80px; align-content: start;
    padding: 8px 0; border-top: 0; border-right: 1px solid var(--lr-card-line);
  }
  .lr-shell-carrier a.shell-tab[aria-current="page"]::before { top: 50%; left: 0; width: 3px; height: 32px; margin: -16px 0 0; border-radius: 0 3px 3px 0; }
}
@media (min-width: 1024px) {
  /* The shipper portal on a desktop: the full rail (Shipper-Dashboard), and no bottom tabs. */
  .lr-shell-shipper > body { padding-bottom: 0; }
  .lr-shell-shipper main { margin-left: 232px; }
  .lr-shell-shipper .shell-tabs { display: none; }
  .lr .shell-rail {
    position: fixed; top: 57px; bottom: 0; left: 0; z-index: 15; width: 232px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
    padding: 14px 12px 20px; background: var(--lr-white); border-right: 1px solid var(--lr-line-light);
  }
  .lr a.shell-rail-a {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px;
    color: var(--lr-ink); font-weight: 500; text-decoration: none;
  }
  .lr a.shell-rail-a:hover { background: var(--lr-paper); color: var(--lr-ink); text-decoration: none; }
  .lr a.shell-rail-a .kit-ico { color: var(--lr-slate); }
  .lr a.shell-rail-a[aria-current="page"] { background: var(--lr-amber-soft); font-weight: 700; }
  .lr a.shell-rail-a[aria-current="page"] .kit-ico { color: var(--lr-ink); }
  .lr .shell-rail-help { margin-top: auto; padding: 14px; border-radius: 12px; background: var(--lr-paper); display: flex; flex-direction: column; gap: 6px; }
  .lr .shell-rail-help .lr-btn { margin-top: 4px; }
}
/* On a phone the header is the boards': the logo, the bell and the account menu (the portal's name would only be cut
   short; a test company's TEST mark stays). Installed as an app, the same at any width. */
@media (max-width: 599px) { .lr-shell .lr-top-name { display: none; } }
@media (display-mode: standalone) { .lr-shell .lr-top-name { display: none; } }

/* The offline page (the same for everyone). */
.lr .off { max-width: 440px; margin: 0 auto; padding: 48px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lr .off .lr-logo { width: 48px; height: 48px; }
.lr .off-h { margin-top: 8px; }
.lr .off-p { font-size: 16px; line-height: 23px; color: var(--lr-muted); }
.lr .off-go { margin-top: 8px; }
/* === end Portal shells === */

/* === Opens soon screens (S7: portal_soon.html, not_allowed.html) ===============================================
   Every carrier and shipper screen the boards draw whose feature hasn't shipped: its title, its drawn controls shown
   disabled (a fieldset disabled: no data is faked), and the kit's opens_soon card. Classes scr- only. */
.lr .scr { display: flex; flex-direction: column; gap: 16px; }
.lr .scr > * { margin: 0; }
.lr .scr-head { display: flex; flex-direction: column; gap: 6px; }
.lr a.scr-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -6px; font-size: 15px; }
.lr a.scr-back .kit-ico { width: 20px; height: 20px; }
.lr .scr-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.lr .scr-title .lr-h1 { min-width: 0; overflow-wrap: anywhere; }
.lr .scr-title > .lr-btn, .lr .scr-title > form { flex: none; }
.lr .scr-act-off { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--lr-muted); font-size: 15px; font-weight: 600; }
.lr .scr-act-off .kit-ico { width: 18px; height: 18px; }
.lr .scr-test { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; color: var(--lr-muted); }
.lr .scr-test .lr-test-mark { flex: none; }
.lr .scr-p { font-size: 15px; line-height: 22px; color: var(--lr-muted); }
.lr .scr-note { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; color: var(--lr-muted); }
.lr .scr-note .kit-ico { margin-top: 0; color: var(--lr-text); }
.lr .scr-gap { margin: 0; }
.lr .scr-ready { display: flex; flex-direction: column; gap: 10px; }
.lr .scr-ready .lr-progress-bar { margin: 2px 0; }
.lr .scr-ready .kit-steps { margin-top: 0; }
.lr .scr-form { margin: 0; }
.lr .scr-fs { margin: 0; padding: 16px 14px; min-width: 0; border: 1px dashed var(--lr-card-line); border-radius: 12px; }
/* A drawn form that can't be used yet: only its controls are dimmed (a disabled control is exempt from the contrast
   minimum), never the words about them, which keep their 4.5:1; its buttons carry kit-btn-off, the Brand board's
   Disabled, so none reads as live. */
.lr .scr-fs:disabled .lr-input, .lr .scr-fs:disabled .scr-chip, .lr .scr-fs:disabled .scr-step-b,
.lr .scr-fs:disabled .scr-check input { opacity: 0.6; }
.lr .scr-fs-note { margin: 0 0 8px; }
.lr .scr-fs-note:last-child { margin: 8px 0 0; }
.lr .scr-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; align-items: end; }
.lr .scr-pair-dh { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } /* a place and its deadhead stepper: stacked on a phone */
.lr a.scr-manage { align-self: flex-start; margin-top: 0; }
.lr .scr-hint { display: block; margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .scr-check .scr-hint { margin-top: 2px; }
.lr .scr-step { display: flex; align-items: center; gap: 6px; }
.lr .scr-step-b {
  flex: none; width: 48px; height: 48px; border: 0; border-radius: 10px; background: var(--kit-soft); color: var(--lr-text);
  box-shadow: inset 0 0 0 1px var(--lr-card-line); font: 600 22px/1 var(--lr-body);
}
.lr .scr-step-n { width: 76px; padding: 0 8px; text-align: center; }
.lr .scr-step-u, .lr .scr-unit > span { color: var(--lr-muted); font-size: 15px; }
.lr .scr-unit { display: flex; align-items: center; gap: 8px; }
.lr .scr-unit > .lr-input { flex: 1; min-width: 0; }
.lr .scr-row { display: flex; align-items: center; gap: 10px; }
.lr .scr-row > .lr-input { flex: 1; min-width: 0; }
.lr .scr-row > .lr-btn { flex: none; }
.lr .scr-opts { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.lr .scr-check { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding-top: 12px; }
.lr .scr-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; }
.lr .scr-check > span { display: flex; flex-direction: column; }
.lr .scr-acts { margin-top: 16px; display: grid; gap: 10px; }
.lr .scr-resbar { display: flex; flex-direction: column; gap: 10px; }
.lr .scr-resbar > .lr-btn { align-self: flex-start; }
.lr .scr-legend { padding: 0 4px; }
.lr .scr-fs .lr-field { margin-top: 12px; }
.lr .scr-fs .lr-input:disabled { cursor: not-allowed; }
.lr .scr-chips { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lr .scr-lab { width: 100%; margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 600; }
.lr .scr-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--lr-muted); font-size: 14px; font-weight: 600; }
.lr .scr-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lr .scr-chip-off { color: var(--lr-muted); }
.lr .scr-go { margin-top: 16px; }
.lr .scr-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--lr-card); border: 1px solid var(--lr-card-line); }
.lr .scr-seg > span { min-height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--lr-muted); font-size: 14px; font-weight: 600; text-align: center; padding: 0 4px; }
.lr .scr-seg > .scr-seg-on { background: var(--kit-neutral-bg); color: var(--lr-text); }
.lr .scr-mapbar { display: flex; flex-direction: column; gap: 10px; opacity: 0.72; }
.lr .scr-mapsearch { margin: 0; }
.lr .scr-layers { margin: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.lr .scr-layers .scr-chip { flex: none; }
.lr .scr-sect { display: flex; flex-direction: column; gap: 8px; }
.lr .scr-sect .lr-list { margin-top: 4px; }
.lr .scr-table-wrap { overflow-x: auto; border: 1px solid var(--lr-card-line); border-radius: 12px; background: var(--lr-card); }
.lr .scr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lr .scr-table th, .lr .scr-table td { padding: 10px 10px; border-top: 1px solid var(--lr-card-line); text-align: center; vertical-align: middle; }
.lr .scr-table thead th { border-top: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lr-muted); }
.lr .scr-table th[scope="row"] { text-align: left; font-weight: 500; }
.lr .scr-roles th[scope="row"]::first-letter { text-transform: uppercase; }
.lr .scr-table td .kit-ico { color: var(--lr-good); width: 18px; height: 18px; vertical-align: middle; }
.lr .scr-table input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }
.lr .scr-person { min-height: 64px; padding: 10px 12px 10px 14px; display: flex; align-items: center; gap: 12px; }
.lr .scr-av { background: var(--lr-tile); color: var(--lr-text); border-color: var(--lr-tile-line); }
.lr .scr-person-id { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.lr .scr-kpis { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lr .scr-kpis > div { padding: 12px 14px; background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; }
.lr .scr-kpis dt { font-size: 13px; font-weight: 600; color: var(--lr-muted); }
.lr .scr-kpis dd { margin: 4px 0 0; font: 700 28px/1 var(--lr-display); }
@media (min-width: 900px) {
  .lr .scr { max-width: 760px; }
  .lr .scr-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Phones: the plan's 48px targets in the shells (the Brand board: 44px on a desktop, 48px on a phone). */
@media (max-width: 899px) {
  .lr-shell .lr-bell { width: 48px; height: 48px; }
  .lr-shell a.scr-back, .lr-shell a.kit-soon-a, .lr-shell .kit-toast-a, .lr-shell .lr-btn-sm, .lr-shell .scr-act-off { min-height: 48px; }
}
/* === end Opens soon screens === */

/* === Notifications (S7: notifications.html) ======================================================================
   The bell's list: each row is one button (a POST that marks it read and opens its link), unread ones marked with
   an amber dot and "(unread)" for screen readers. Classes nt- only. */
.lr .nt-list { list-style: none; margin: 0; padding: 0; background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; overflow: hidden; }
.lr .nt-item + .nt-item { border-top: 1px solid var(--lr-card-line); }
.lr .nt-item form { margin: 0; }
.lr .nt-btn {
  width: 100%; min-height: 64px; padding: 12px 12px 12px 14px; display: flex; align-items: center; gap: 12px; border: 0; background: transparent;
  color: var(--lr-text); font: inherit; text-align: left; cursor: pointer;
}
.lr .nt-btn:hover { background: var(--kit-soft); }
.lr .nt-btn > .kit-ico { color: var(--lr-muted); }
.lr .nt-dot { flex: none; width: 10px; height: 10px; border-radius: 999px; }
.lr .nt-unread .nt-dot { background: var(--lr-amber); }
.lr .nt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.lr .nt-t { font-size: 15px; line-height: 20px; }
.lr .nt-unread .nt-t { font-weight: 600; }
.lr .nt-b { font-size: 14px; line-height: 19px; color: var(--lr-muted); }
.lr .nt-when { font-size: 12px; line-height: 16px; color: var(--lr-muted); }
.lr .nt-all { margin: 0; }
.lr .nt-more { align-self: flex-start; }
/* === end Notifications === */

/* === Kit page (S7: platform_kit.html, the platform admin's kit page, in the back office) ==========================================
   The kit's specimens on both grounds, side by side (stacked on phones). Each board is a div.lr with its ground's
   class, so the kit's rules and tokens apply inside the back office's page without touching it. Classes kitp-. */
.kitp-pair { display: grid; gap: 16px; margin-top: 12px; }
@media (min-width: 1100px) { .kitp-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lr.kitp-board { min-width: 0; padding: 18px; border-radius: 12px; background: var(--lr-bg); color: var(--lr-text); font: 400 15px/1.4 var(--lr-body); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 10px; }
.lr.lr-light.kitp-board { border: 1px solid var(--lr-line-light); }
.lr .kitp-cap { margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lr-muted); }
.lr .kitp-row { display: flex; flex-direction: column; gap: 6px; }
.lr .kitp-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.lr .kitp-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.lr .kitp-col > .kit-out, .lr .kitp-col > .kit-toast { align-self: stretch; }
.kitp-one { margin-top: 12px; }
.lr .kitp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lr .kitp-lr { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lr.kitp-phone { max-width: 438px; }
.lr .kitp-tabs { position: relative; min-height: 66px; }
.lr .kitp-tabs .shell-tabs { position: static; border: 1px solid var(--lr-card-line); border-radius: 12px; padding-bottom: 0; }
/* The base: colour swatches, the type scale, the buttons and the inputs. */
.lr .kitp-sws { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.lr .kitp-sw { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 19px; }
.lr .kitp-chip { flex: none; width: 36px; height: 36px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--lr-card-line); }
.lr .kitp-type { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.lr .kitp-type > .kit-small.kit-muted { margin-bottom: 10px; }
.lr .kitp-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.lr .kitp-btns > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lr .kitp-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.lr .kitp-inputs .lr-field { margin: 0; }
/* In the back office, style.css's own input rule (input:not([type]), a higher weight than .lr-input) would paint the
   specimens light on the dark board: the kit's tokens win inside a board. */
.lr.kitp-board input.lr-input {
  height: 52px; padding: 0 14px; border: 1px solid var(--lr-input-line); border-radius: 10px; background: var(--lr-input-bg); color: var(--lr-text);
  font: 400 17px var(--lr-body);
}
.lr.kitp-board input.lr-input.kit-focus { border-color: var(--lr-text); }
.lr.kitp-board input.lr-input[aria-invalid="true"] { border-color: var(--lr-bad); box-shadow: inset 0 0 0 1px var(--lr-bad); }
.lr .kitp-state { display: block; margin-bottom: 4px; font: 500 11px/1 var(--lr-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--lr-muted); }
/* === end Kit page === */

/* === Carrier account list (S7: _carrier_account.html on the carrier home, the Account tab until S10) =============
   The Carrier-Account board's sections as a list of rows (48px+ targets), "Opens soon" on rows whose screen can't
   be used yet. Install the app hides when LaneRally already runs installed. Classes ca- only. */
.lr .ca { margin-top: 8px; }
.lr .ca-g { margin-top: 18px; }
.lr .ca-h { margin: 0 0 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lr-muted); }
.lr .ca-list { list-style: none; margin: 0; padding: 0; background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; overflow: hidden; }
.lr .ca-list > li + li { border-top: 1px solid var(--lr-card-line); }
.lr a.ca-row, .lr summary.ca-row, .lr div.ca-row {
  min-height: 60px; padding: 10px 12px 10px 14px; display: flex; align-items: center; gap: 12px; color: var(--lr-text); font-weight: 400;
  text-decoration: none; cursor: pointer; list-style: none;
}
.lr div.ca-row-off { cursor: default; } /* a row with no screen yet: text, not a link */
.lr summary.ca-row::-webkit-details-marker { display: none; }
.lr a.ca-row:hover, .lr summary.ca-row:hover { background: var(--kit-soft); color: var(--lr-text); text-decoration: none; }
.lr .ca-row > .kit-ico:first-child { color: var(--lr-muted); }
.lr .ca-row > .kit-ico:last-child { color: var(--lr-muted); width: 18px; height: 18px; }
.lr .ca-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lr .ca-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; }
.lr .ca-d { font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .ca-howto[open] > summary .kit-ico:last-child { transform: rotate(90deg); }
.lr .ca-steps { padding: 0 14px 14px 46px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; }
.lr .ca-out { margin: 24px 0 0; }
.lr .ca-install + .ca-list { margin-top: 10px; }
@media (display-mode: standalone) { .lr .ca-install { display: none; } }
/* === end Carrier account list === */

/* === Shipper home (S7): the Quick quote card, until quotes open === */
.lr .sh-quote { margin-top: 12px; }
/* === end Shipper home === */

/* === Page: Carrier load board (S8c: carrier_search.html, carrier_results.html, carrier_filters.html, carrier_load.html,
   carrier_help.html, _board.html) ==================================================================================
   The Carrier-Search, Carrier-Results and Carrier-Load boards on the carrier app's dark ground, built from the kit and
   the S7 screens' classes (scr-, kit-, lr-), none of them restyled here. The search's choice chips (brd-chip: a label
   around a visually hidden radio or checkbox, amber when chosen, a focus ring on the label), the sorts (links, the
   current one aria-current), the load card, and the load page's rate, estimate range, checklist, route drawing (inline
   SVG: the loaded route in route blue, the deadhead dashed and muted, the pickup a filled square, the delivery a hollow
   one) and stops. Money is the text colour, never green (TestNoGreenMoney): green marks only a passed check. The
   actions that open later sit in a bar that sticks above the tabs. Classes brd- only. */
.lr .brd-form { display: flex; flex-direction: column; gap: 16px; }
.lr .brd-sect { display: flex; flex-direction: column; gap: 10px; }
.lr .brd-sect > * { margin: 0; }
.lr .brd-sect .lr-field { margin-top: 4px; }
.lr .brd-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 12px; align-items: end; }
.lr .brd-chips { margin: 6px 0 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lr .brd-chip {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--lr-muted); color: var(--lr-text); font: 600 14px/1.2 var(--lr-body);
}
.lr .brd-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.lr .brd-chip:has(input:checked) { background: var(--lr-amber); color: var(--lr-ink); box-shadow: none; }
.lr .brd-chip:has(input:focus-visible) { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
.lr .brd-acts { display: grid; gap: 10px; }
@media (min-width: 600px) { .lr .brd-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lr .brd-acts .lr-btn { width: 100%; }
.lr .brd-gate-go { margin-top: 4px; }

/* Results: the lane, the sorts, the count and Filters, the cards. */
.lr .brd-lane-h { display: flex; flex-direction: column; gap: 2px; }
.lr .brd-lane-h .lr-h1 { overflow-wrap: anywhere; }
.lr .brd-sorts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--lr-card); border: 1px solid var(--lr-card-line); }
.lr a.brd-sort, .lr .brd-sort-off {
  min-height: 44px; padding: 4px 6px; display: flex; align-items: center; justify-content: center; border-radius: 9px; text-align: center;
  color: var(--lr-muted); font: 600 14px/1.2 var(--lr-body); text-decoration: none;
}
.lr a.brd-sort:hover { color: var(--lr-text); text-decoration: none; }
.lr a.brd-sort[aria-current] { background: var(--kit-neutral-bg); color: var(--lr-text); box-shadow: inset 0 -2px 0 var(--lr-amber); }
.lr .brd-sort-off { cursor: not-allowed; background: var(--kit-off-bg); color: var(--kit-off-fg); } /* drawn as the kit's disabled buttons are */
.lr .brd-resbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.lr .brd-count { font-size: 15px; line-height: 20px; }
.lr .brd-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lr-amber); color: var(--lr-ink); font: 700 12px/1 var(--lr-body); }
.lr .brd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lr .brd-card > * + * { margin-top: 12px; }
.lr .brd-card-top { padding-bottom: 12px; border-bottom: 1px solid var(--lr-card-line); }
.lr .brd-card .kit-load-mid { margin-top: 12px; }
.lr .brd-card-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--lr-muted); }
.lr .brd-card .kit-fresh { margin-top: 8px; }
.lr .brd-mode { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.lr .brd-mode .kit-ico { width: 16px; height: 16px; color: var(--lr-amber); }
.lr .brd-card .kit-2btn { margin-top: 14px; }
.lr .brd-card .kit-2btn + p { margin-top: 8px; }
/* A low-confidence estimate: a dashed outline, as the Brand board draws the estimate (the kit's kit-est-low rule), and
   the words beside it. */
.lr .brd-est-low { border: 1px dashed var(--lr-muted); border-radius: 14px; }
.lr .brd-card-est.brd-est-low { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 100%; padding: 4px 12px 4px 4px; }
.lr .brd-est-top.brd-est-low { padding: 10px 12px; }
/* Nothing in reach on this page yet, more rows left: Keep looking. */
.lr .brd-looking .lr-btn { margin-top: 4px; }

/* A load's page. */
.lr .brd-ref { font: 500 0.72em/1 var(--lr-mono); letter-spacing: 0; white-space: nowrap; }
.lr .brd-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--lr-muted); }
.lr .brd-lanebig { font: 700 26px/1.1 var(--lr-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.lr .brd-p { font-size: 15px; line-height: 22px; }
.lr .brd-rate-top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.lr .brd-rate-top .kit-rate { text-align: left; }
.lr .brd-rate-top .kit-rate-n { font-size: 44px; }
.lr .brd-modes { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 14px; line-height: 20px; text-align: right; }
.lr .brd-stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lr .brd-stats > div { padding: 10px 12px; border-radius: 10px; background: var(--lr-bg); border: 1px solid var(--lr-card-line); min-width: 0; }
.lr .brd-stats dt { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lr-muted); }
.lr .brd-stats dd { margin: 4px 0 0; font: 600 20px/1.1 var(--lr-display); overflow-wrap: anywhere; }
.lr .brd-stats dd.kit-small, .lr .brd-stats .brd-fresh-dd { font: 500 14px/18px var(--lr-body); }
.lr .brd-est-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.lr .brd-est-n { font-size: 15px; }
.lr .brd-est-amt { font: 700 30px/1 var(--lr-display); letter-spacing: -0.01em; color: var(--lr-text); }
.lr .brd-bar { display: block; width: 100%; max-width: 440px; height: auto; }
.lr .brd-bar-range { fill: var(--kit-neutral-bg); stroke: var(--lr-muted); stroke-width: 1; }
.lr .brd-bar-est { stroke: var(--lr-text); stroke-width: 2.5; stroke-linecap: round; }
.lr .brd-bar-rate { fill: var(--lr-amber); stroke: var(--lr-card); stroke-width: 2; }
.lr .brd-bar-lab { max-width: 440px; display: flex; justify-content: space-between; gap: 8px; }
.lr .brd-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lr .brd-check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 21px; }
.lr .brd-check > .kit-ico { margin-top: 1px; color: var(--lr-muted); }
.lr .brd-check-ok > .kit-ico { color: var(--lr-good); }
.lr .brd-check-d { display: block; font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .brd-map { display: block; width: 100%; max-width: 560px; height: auto; }
.lr .brd-map-bg { fill: var(--lr-bg); stroke: var(--lr-card-line); }
.lr .brd-map-route { fill: none; stroke: var(--lr-link); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lr .brd-map-dh { fill: none; stroke: var(--lr-muted); stroke-width: 2; stroke-dasharray: 6 5; }
.lr .brd-map-from { fill: none; stroke: var(--lr-muted); stroke-width: 2; }
.lr .brd-map-via { fill: var(--lr-link); }
.lr .brd-map-o { fill: var(--lr-text); }
.lr .brd-map-d { fill: var(--lr-bg); stroke: var(--lr-text); stroke-width: 2.5; }
.lr .brd-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--lr-muted); }
.lr .brd-key { display: inline-block; width: 22px; margin-right: 6px; vertical-align: middle; border-top: 3px solid var(--lr-link); }
.lr .brd-key-dh { border-top: 2px dashed var(--lr-muted); }
.lr .brd-stops { list-style: none; margin: 0; padding: 0; }
.lr .brd-stop { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.lr .brd-stop:last-child { padding-bottom: 0; }
.lr .brd-stop:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 18px; bottom: 2px; border-left: 2px dashed var(--lr-muted); }
.lr .brd-stop-mark { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 2px; }
.lr .brd-stop-pickup { background: var(--lr-text); }
.lr .brd-stop-delivery { border: 2px solid var(--lr-text); background: var(--lr-card); }
.lr .brd-stop-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 21px; overflow-wrap: anywhere; }
.lr .brd-stop-h .kit-tag { margin-left: 4px; vertical-align: 1px; }
.lr .brd-dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.lr .brd-dl dt { font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .brd-dl dd { margin: 2px 0 0; font-size: 15px; line-height: 21px; font-weight: 600; overflow-wrap: anywhere; }
.lr .brd-foot { text-align: center; }
.lr .brd-sticky {
  position: sticky; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 5; margin: 0 -16px; padding: 12px 16px;
  background: var(--lr-bg); border-top: 1px solid var(--lr-card-line);
}
.lr .brd-sticky .kit-2btn { margin-top: 0; }
.lr .brd-1btn .lr-btn { width: 100%; } /* a posting with one booking mode: its one action, full width */
.lr .brd-sticky p { margin-top: 8px; }
@media (min-width: 900px) { .lr .brd-sticky { bottom: 0; } }

/* Help pages. */
.lr .brd-help-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 22px; }
.lr .brd-help-h { margin-top: 8px; }

/* Phones: 48px targets (the Brand board: 44 on a desktop, 48 on a phone). */
@media (max-width: 899px) {
  .lr-shell .brd-chip, .lr-shell a.brd-sort, .lr-shell .brd-sort-off { min-height: 48px; }
}
/* === end Page: Carrier load board === */

/* === Page: Save, report and block (S8d: the Save load bookmark and Report this load on carrier_load.html,
   carrier_saved.html, carrier_report.html, carrier_blocked.html) =================================================
   On the carrier app's dark ground, from the board's and the S7 screens' classes, none restyled here. The load page's
   top bar puts the back link and the Save load bookmark (Carrier-Load's header: an icon button, 44px, 48px on a
   phone) on one row; saved, the bookmark is filled amber (aria-pressed says so to a screen reader). The footer row
   has the load's number and Report this load (a link in route blue), or "You reported this load". The report form's
   reasons are the S7 check rows (radio buttons); the saved list's cards are the results' cards, each with Remove
   under it; the rows (loads not on the board, hidden brokers) are one card with a line between rows. Classes brd-
   only. */
.lr .brd-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lr .brd-save-f { margin: 0; flex: none; }
.lr .brd-save {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--lr-text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lr .brd-save .kit-ico { width: 24px; height: 24px; }
.lr .brd-save:hover { background: var(--kit-soft); }
.lr .brd-save:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
.lr .brd-save[aria-pressed="true"] { color: var(--lr-amber); }
.lr .brd-save[aria-pressed="true"] .kit-ico path { fill: currentColor; }
.lr .brd-foot2 { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.lr a.brd-report { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.lr a.brd-report:hover { text-decoration: underline; }
.lr .brd-reported { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--lr-muted); }
.lr .brd-reported .kit-ico { width: 16px; height: 16px; }
.lr a.brd-savedlink { align-self: flex-start; margin-top: 2px; }
.lr a.brd-savedlink .kit-ico:first-child { width: 18px; height: 18px; }

/* Report this load. */
.lr .brd-rep .kit-bor { margin-top: 4px; }
.lr .brd-rep .brd-sub .lr-mono { color: var(--lr-text); }
.lr .brd-reasons { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; }
.lr .brd-reasons > legend { margin-bottom: 2px; padding: 0; }
.lr .brd-reason { padding-top: 10px; min-height: 44px; }
.lr .brd-note { height: auto; min-height: 120px; padding: 12px 14px; font-size: 16px; line-height: 22px; resize: vertical; }
.lr .brd-rep-go { width: 100%; margin-top: 4px; }
.lr .brd-rep .lr-h2 .kit-ico { width: 20px; height: 20px; vertical-align: -3px; margin-right: 6px; color: var(--lr-muted); }

/* Saved loads: each card with Remove under it. */
.lr .brd-saved-item { display: flex; flex-direction: column; gap: 8px; }
.lr .brd-unsave { margin: 0; align-self: flex-start; }

/* Rows: saved loads not on the board, hidden brokers. */
.lr .brd-rows { list-style: none; margin: 0; padding: 0; background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; overflow: hidden; }
.lr .brd-row { min-height: 64px; padding: 10px 12px 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lr .brd-row + .brd-row { border-top: 1px solid var(--lr-card-line); }
.lr .brd-row form { margin: 0; flex: none; }
.lr .brd-row-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }

/* Phones: 48px targets (the Brand board: 44 on a desktop, 48 on a phone). */
@media (max-width: 899px) {
  .lr-shell .brd-save { width: 48px; height: 48px; }
  .lr-shell a.brd-report, .lr-shell .brd-reason { min-height: 48px; }
}
/* === end Page: Save, report and block === */

/* === Page: Account hub and documents (S10: carrier_account.html, carrier_company.html, carrier_privacy.html,
   carrier_pod.html, carrier_closed.html; the kit's upload_control; the COI links on carrier_verify.html) ====================================================
   The carrier's Account hub (Carrier-Account), Company & documents (Carrier-Account-Docs), Data & privacy, Add POD and
   the closed page, on the carrier app's dark ground, from the S7 screens' (scr-), the account list's (ca-), the home's
   (co-) and the S8d rows' (brd-) classes, none restyled here. The upload control shows the browser's own file field
   (it names the file chosen without scripts), its button styled as the kit's secondary one. Larger text (Account ›
   App › Text size, a cookie on this device) scales the carrier pages by 1.15. Classes hub-, doc-, up-, priv-, pod-
   only (and lr-text-lg on the body). */
.lr .hub-also { margin: 12px 0 0; font-size: 14px; line-height: 20px; }
.lr .hub-verify { display: flex; flex-direction: column; gap: 10px; }
.lr .hub-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.lr .hub-step { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.lr .hub-step .kit-ico { width: 18px; height: 18px; color: var(--lr-warn); }
.lr .hub-step-done .kit-ico { color: var(--lr-good); }
.lr .hub-step-note { margin-left: 6px; font-weight: 400; color: var(--lr-muted); }
.lr .hub-verify a.kit-soon-a { align-self: flex-start; }
.lr .hub-coi .hub-acts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.lr .hub-calls { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.lr .hub-calls-h .ca-t .kit-ico, .lr .hub-app .ca-t .kit-ico { color: var(--lr-muted); margin-right: 6px; vertical-align: -4px; }
.lr .hub-calls-h .ca-d { margin: 2px 0 0; }
.lr .hub-call-off { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 20px; }
.lr .hub-call-off .kit-ico { color: var(--lr-warn); }
.lr .hub-call-list { list-style: none; margin: 0; padding: 0; }
.lr .hub-call { padding: 10px 0; border-top: 1px solid var(--lr-card-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.lr .hub-call-t { min-width: 0; flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.lr .hub-call-f { margin: 0; flex: none; }
.lr .hub-words { flex: 1 1 100%; font-size: 14px; }
.lr .hub-words > summary { min-height: 44px; display: inline-flex; align-items: center; color: var(--lr-link); font-weight: 600; cursor: pointer; }
.lr .hub-words-t { margin: 4px 0; padding: 10px 12px; border-radius: 10px; background: var(--kit-soft); line-height: 20px; }
.lr .hub-calls-note { margin: 0; }
.lr .hub-nocalls { padding-top: 10px; border-top: 1px solid var(--lr-card-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.lr .hub-nocalls > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lr .hub-nocalls form { margin: 0; }
.lr .hub-calls + .ca-list { margin-top: 10px; }
.lr .hub-app { padding: 4px 14px 12px; margin-top: 10px; }
.lr .hub-app-row { min-height: 56px; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; border-top: 1px solid var(--lr-card-line); padding-top: 8px; }
.lr .hub-app-row:first-child { border-top: 0; }
.lr .hub-seg { flex: 0 1 auto; min-width: 200px; }
.lr .hub-app-note { margin: 2px 0 6px; }
.lr .hub-size { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.lr .hub-size legend { float: left; margin-right: 12px; padding: 0; }
.lr .hub-size-o { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; }
.lr .hub-size-o input { width: 20px; height: 20px; margin: 0; }

/* Company & documents. */
.lr .doc-card { display: flex; flex-direction: column; gap: 10px; }
.lr .doc-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.lr .doc-org { margin: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.lr .doc-dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.lr .doc-dl dt { font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .doc-dl dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.lr .doc-warn { color: var(--lr-warn); font-weight: 600; }
.lr .doc-recheck { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lr .doc-safety { margin: 0; }
.lr .doc-safety-n { font: 700 32px/1 var(--lr-display); letter-spacing: -0.01em; }
.lr .doc-kpis { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lr .doc-kpis > div { padding: 10px 12px; border-radius: 10px; background: var(--kit-soft); }
.lr .doc-kpis dt { font-size: 13px; color: var(--lr-muted); }
.lr .doc-kpis dd { margin: 2px 0 0; font: 700 24px/1 var(--lr-display); }
.lr .doc-bars { display: flex; flex-direction: column; gap: 8px; }
.lr .doc-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px; }
.lr .doc-bar-n { font-weight: 600; }
.lr .doc-bar-t { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--lr-card-line); overflow: hidden; }
.lr .doc-bar-t > span { display: block; height: 100%; max-width: 100%; background: var(--lr-text); border-radius: 999px; }
.lr .doc-why > summary { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; color: var(--lr-link); cursor: pointer; }
.lr .doc-why ul { margin: 4px 0 0; padding-left: 20px; font-size: 14px; line-height: 20px; }
.lr .doc-flag { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; }
.lr .doc-flag .kit-ico { color: var(--lr-warn); }
.lr .doc-flag-ok .kit-ico { color: var(--lr-good); }
.lr .doc-sect { display: flex; flex-direction: column; gap: 10px; }
.lr .doc-item { display: flex; flex-direction: column; gap: 8px; }
.lr .doc-item-t { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; }
.lr .doc-line { margin: 0; font-size: 15px; line-height: 21px; overflow-wrap: anywhere; }
.lr .doc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.lr .doc-acts .kit-ico, .lr .doc-recheck .kit-ico { width: 18px; height: 18px; }
.lr .doc-ask > summary, .lr .doc-replace > summary { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; color: var(--lr-link); cursor: pointer; }
.lr .doc-ask-f { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.lr .doc-ask-f .lr-field { margin-top: 4px; align-self: stretch; }
.lr .doc-rows .brd-row { flex-wrap: wrap; }
.lr .doc-row-acts { flex: none; }
.lr .doc-replace { flex: 1 1 100%; }
.lr .doc-replace form { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.lr .doc-kinds { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; }
.lr .doc-kind { min-height: 44px; padding-top: 10px; }
.lr .doc-label { margin-top: 8px; }
.lr .doc-refused { margin: 12px 0 0; display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; color: var(--lr-muted); }
.lr .doc-refused .kit-ico { color: var(--lr-text); }
.lr .doc-go, .lr .pod-go { margin-top: 12px; width: 100%; }

/* The upload control (the kit's upload_control): the camera, then a file; each the browser's field, named, with the
   file it holds. */
.lr .up { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.lr .up-field { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px dashed var(--lr-card-line); border-radius: 12px; }
.lr .up-lab { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.lr .up-lab .kit-ico { color: var(--lr-muted); }
.lr .up-in { max-width: 100%; font: 400 14px/1.4 var(--lr-body); color: var(--lr-muted); }
.lr .up-in::file-selector-button {
  min-height: 44px; margin-right: 12px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--lr-text);
  box-shadow: inset 0 0 0 1px var(--lr-btn2-line); font: 600 15px/1 var(--lr-body); cursor: pointer;
}
.lr .up-in:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; border-radius: 10px; }
.lr .up-hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--lr-muted); }

/* Data & privacy. */
.lr .priv-card { display: flex; flex-direction: column; gap: 10px; }
.lr .priv-form { margin: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.lr .priv-scopes { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; }
.lr .priv-scopes .scr-hint { margin-top: 2px; }
.lr .priv-list { margin-top: 4px; }
.lr .priv-list-plain { margin: 0; padding-left: 20px; font-size: 15px; line-height: 22px; }

/* Add POD. */
.lr .pod-card { display: flex; flex-direction: column; gap: 8px; }
.lr .pod-card form { margin: 0; }
/* N7: a POD of several pages, Page 1, Page 2 … in order, wrapping on a phone. */
.lr .pod-pages { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: 0 1 auto; }

/* Get verified's insurance step: Upload COI and Ask my agent (carrier_verify.html). */
.lr .gv-coi { margin: 0; display: flex; flex-wrap: wrap; gap: 0 8px; }

/* Larger text (Account › App › Text size). */
body.lr.lr-text-lg main, body.lr.lr-text-lg .shell-tabs { zoom: 1.15; }

@media (max-width: 599px) {
  .lr .doc-dl, .lr .doc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lr .hub-seg { min-width: 0; flex: 1 1 100%; }
}
@media (max-width: 899px) {
  .lr-shell .hub-words > summary, .lr-shell .doc-why > summary, .lr-shell .doc-ask > summary, .lr-shell .doc-replace > summary,
  .lr-shell .hub-size-o, .lr-shell .doc-kind { min-height: 48px; }
  .lr-shell .up-in::file-selector-button { min-height: 48px; }
}
/* === end Page: Account hub and documents === */

/* === Page: Offers and Book Now (S11a: carrier_book.html, carrier_offer.html, carrier_myloads.html; the sticky actions on
   carrier_load.html and the card actions in _board.html) ============================================================
   On the carrier app's dark ground, from the kit's sheet and outcome classes (none restyled here). As a page the sheet
   takes the column's width; its one primary button is full width in the bottom of the sheet (thumb-first), 48px on a
   phone. Risk rules are the kit's warn boxes with the required "I understand"; the terms shown again are collapsible
   (their text on the card ground, readable at length). My Loads' tabs are links in the S7 segmented control's shape; its
   Active cards are kit cards; its offers are the S8d rows. Money stays in ink (never green). Classes bk- and ml- only. */
.lr .bk .kit-sheet { max-width: none; border-radius: 16px; }
.lr .bk-sheet .brd-stops { margin-top: 12px; }
.lr .bk-sheet > .brd-sub { margin-top: 8px; }
.lr .bk-sheet .kit-elig { margin-top: 10px; }
.lr .bk-wide { width: 100%; }
.lr .bk-problem { margin-top: 12px; }
.lr .bk-out .kit-bor { margin-top: 8px; }
.lr .bk-out-lane { margin-top: 6px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lr .bk-steps { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lr .bk-steps > li { display: flex; align-items: flex-start; gap: 10px; }
.lr .bk-steps b { display: block; }
.lr .brd-sect > .bk-wide + .bk-wide { margin-top: 8px; }
.lr .bk-terms { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lr-card-line); }
.lr .bk-term { margin-top: 8px; border: 1px solid var(--lr-card-line); border-radius: 10px; }
.lr .bk-term > summary { min-height: 44px; display: flex; align-items: center; padding: 0 12px; cursor: pointer; font-size: 14px; font-weight: 600; }
.lr .bk-term > summary:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; border-radius: 10px; }
.lr .bk-term > p { margin: 0 12px 8px; }
.lr .bk-term-body { max-height: 320px; overflow-y: auto; margin: 0 12px 12px; padding: 10px 12px; border-radius: 8px; background: var(--kit-soft); font-size: 14px; line-height: 20px; }
.lr .bk-term-body p { margin: 0 0 8px; }
.lr .bk-driver { margin-top: 12px; }
.lr .bk-driver > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--lr-link); }
.lr .bk-driver > summary:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
.lr .bk-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.lr .bk-ask { margin-top: 10px; font-variant-numeric: tabular-nums; }
.lr .bk-amount { font-size: 20px; font-variant-numeric: tabular-nums; }
.lr .bk-counter { margin: 12px 0; padding: 12px; border: 1px solid var(--lr-amber); border-radius: 12px; }
.lr .bk-counter form + form { margin-top: 8px; }
.lr .brd-sect form + .kit-soon-a, .lr .brd-sect > form { margin-top: 8px; }
/* L1: "No going around LaneRally" on a sheet of LaneRally Brokerage's own load: the line, its link, and the clause it opens
   (the rate con terms' own words, on the card ground; the amber edge says it's a term to read, never a money colour). */
.lr .bk-nogo { margin-top: 12px; padding: 12px; border: 1px solid var(--lr-card-line); border-left: 3px solid var(--lr-amber); border-radius: 10px; }
.lr .bk-nogo > p + p { margin-top: 4px; }
.lr .bk-nogo a { display: flex; align-items: center; width: fit-content; min-height: 44px; }
.lr .bk-nogo-clause { margin-top: 4px; scroll-margin-top: 72px; } /* clear of the app's sticky header */
.lr .bk-nogo-clause:focus-visible, .lr .bk-nogo-clause:target { outline: 3px solid var(--lr-focus); outline-offset: 2px; border-radius: 8px; }
.lr .bk-nogo-clause .bk-term-body { margin: 8px 0 0; }

/* My Loads. */
.lr .ml-tabs { margin-top: 12px; }
.lr .ml-tabs > a { min-height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--lr-muted); font-size: 14px; font-weight: 600; text-align: center; padding: 0 4px; text-decoration: none; }
.lr .ml-tabs > a:hover { color: var(--lr-text); }
.lr .ml-tabs > a:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
.lr .ml-tabs > a.scr-seg-on { background: var(--kit-neutral-bg); color: var(--lr-text); }
.lr .ml-card { display: flex; flex-direction: column; gap: 8px; }
.lr .ml-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lr .ml-lane { font-size: 16px; }
.lr .ml-rate .kit-rate { text-align: left; }
.lr .ml-rc { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--lr-muted); }
.lr .ml-rc .kit-ico { color: var(--lr-text); }
.lr .ml-offer { align-items: flex-start; flex-wrap: wrap; }
.lr .ml-state { color: var(--lr-text); }
.lr .ml-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.lr .ml-acts form { margin: 0; }
@media (max-width: 899px) {
  .lr-shell .bk-term > summary, .lr-shell .bk-driver > summary, .lr-shell .ml-tabs > a { min-height: 48px; }
  .lr-shell .bk-nogo a { min-height: 48px; } /* L1 review: "Read the clause", as its siblings */
}
/* === end Page: Offers and Book Now === */

/* === Page: Rate con e-sign (S11b: carrier_ratecon.html) ===============================================================
   The Carrier-RateCon board on the carrier app's dark ground. The rate con itself is the version's kept document (its own
   scoped styles, .rcd): this page never restyles it, it only sets the document's --rc-* colours on its holder, so the
   same bytes sit on the dark ground here and print black on white. The status card is the kit's outcome card; the sign
   card is an lr-card with the kit's inputs, checkboxes and the terms disclosure (bk-term); the signed card holds the
   kit's pin_card. One primary button (Sign rate con), full width at the bottom of the card (thumb-first), 48px on a
   phone. Money stays in ink. Classes rcs- only. */
.lr .rcs-doc {
  --rc-paper: transparent; --rc-card: var(--lr-card); --rc-ink: var(--lr-text); --rc-muted: var(--lr-muted); --rc-line: var(--lr-card-line);
  --rc-note: var(--lr-warn-soft); --rc-warn: var(--lr-warn);
  --rc-link: var(--lr-link); /* L1: the document's link to its "No going around LaneRally" clause */
}
.lr .rcs-doc .rcd { padding: 0; }
.lr .rcs-status p { margin-top: 4px; }
.lr .rcs-sign .lr-h2, .lr .rcs-signed .lr-h2 { display: flex; align-items: center; gap: 8px; }
.lr .rcs-signed .kit-ico { color: var(--lr-good); }
.lr .rcs-signed > * + * { margin-top: 10px; }
.lr .rcs-signed .kit-pin .kit-ico { color: var(--lr-amber); }
.lr .rcs-signed > .lr-btn { width: 100%; }
.lr .rcs-form { margin: 0; }
.lr .rcs-names { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
@media (min-width: 560px) { .lr .rcs-names { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.lr .rcs-esign { margin-top: 12px; }
.lr .rcs-go { margin-top: 16px; }
.lr .rcs-center { margin-top: 8px; text-align: center; }
/* The board's row under the sign button: "Something wrong? Message us" (disabled until messages open, S12, with its
   opens-soon line) and Decline, a text button that opens the reason on a row of its own. The signer's name and title
   side by side at every width (1fr and 112px, as drawn). Driver & equipment with its Change link; the rate cons the
   company signed before (rcs-copies). */
.lr .rcs-signer { grid-template-columns: minmax(0, 1fr) 112px; }
.lr .rcs-more { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0 8px; }
.lr .rcs-msg { min-width: 0; flex: 1 1 200px; }
.lr .rcs-msg-b { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent;
  color: var(--kit-off-fg); font: inherit; font-size: 14px; font-weight: 600; cursor: not-allowed; }
.lr .rcs-msg .kit-small { display: block; margin-top: -6px; }
.lr .rcs-decline { flex: none; }
.lr .rcs-decline[open] { flex: 1 1 100%; }
.lr .rcs-decline > summary { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; padding: 0 4px; list-style: none;
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--lr-text); }
.lr .rcs-decline > summary::-webkit-details-marker { display: none; }
.lr .rcs-decline > summary:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; border-radius: 8px; }
.lr .rcs-decline form { padding: 0 0 4px; }
.lr .rcs-drv-head { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lr .rcs-change { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
.lr .rcs-drv .kit-small + .kit-small { margin-top: 4px; }
.lr .rcs-copylist { margin: 8px 0 0; padding: 0; list-style: none; }
.lr .rcs-copylist li { padding: 8px 0; border-top: 1px solid var(--lr-card-line); }
.lr .rcs-copylist li:first-child { border-top: 0; }
.lr .rcs-copylist a { display: inline-flex; align-items: center; min-height: 44px; }
.lr .rcs-copylist .kit-small { display: block; }
.lr .rcs-driver form { padding: 0 12px 12px; }
.lr .rcs-decline .lr-btn, .lr .rcs-driver .lr-btn { margin-top: 12px; }
.lr .rcs-reason { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; font-size: 16px; line-height: 22px; }
.lr .rcs-driver { padding: 0; }
.lr .rcs-driver > summary { padding: 0 14px; min-height: 52px; }
.lr .rcs-driver .kit-small { margin-top: 8px; }
@media (max-width: 899px) { .lr-shell .rcs-decline > summary, .lr-shell .rcs-esign > summary, .lr-shell .rcs-msg-b { min-height: 48px; } }
@media print {
  .lr .rcs-doc { --rc-paper: #FFFFFF; --rc-card: #FFFFFF; --rc-ink: #000000; --rc-muted: #333333; --rc-line: #999999; --rc-note: #FFFFFF; --rc-warn: #000000; --rc-link: #000000; }
}
/* === end Page: Rate con e-sign === */

/* === Page: My Loads (S11c: carrier_myloads.html's Active, Done and search, carrier_myload.html, _myloads.html) ========
   The Carrier-MyLoads board on the carrier app's dark ground, from the kit's card, lane line, rate block, status pills
   and PIN card (none restyled here). Each Active card: the stage, the lane, the broker of record, the rate in ink (never
   green), the track as eleven segments (done ones in the text colour, the current one amber: the lane-marking accent)
   with "Now … · Next: … · N of 11" in words beside it, then the one next step full width at the bottom (thumb-first,
   48px on a phone), and the four tiles (Rate con, Add POD, Message, Call; the last two drawn off until S12). A load's
   page adds its stops with Arrived and Left, the history and Fell off behind a disclosure. Classes myl- only. */
.lr .myl-find { width: 44px; padding: 0; }
.lr .myl-list > li { min-width: 0; }
.lr .myl-card { display: flex; flex-direction: column; gap: 10px; }
.lr .myl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lr .myl-id { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.lr .myl-id a { min-height: 44px; display: inline-flex; align-items: center; color: var(--lr-text); }
.lr .myl-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.lr .myl-mid { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lr .myl-mid .kit-rate { flex: none; text-align: right; }
.lr .myl-loc { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .myl-loc .kit-ico { color: var(--lr-text); }
.lr .myl-track { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--lr-card-line); }
.lr .myl-now { font-size: 14px; line-height: 20px; }
.lr .myl-bar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
.lr .myl-bar > li { height: 6px; border-radius: 3px; background: var(--lr-card-line); }
.lr .myl-bar > li.is-done { background: var(--lr-muted); }
.lr .myl-bar > li.is-now { background: var(--lr-amber); }
.lr .myl-go { width: 100%; }
.lr .myl-go-sub { font-weight: 500; }
.lr .myl-card form { margin: 0; }
.lr .myl-pin-q .kit-2btn { margin-top: 8px; }
.lr .myl-matched { display: flex; align-items: center; gap: 6px; }
.lr .myl-matched .kit-ico { color: var(--lr-good); }
.lr .myl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lr .myl-tile { min-height: 64px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--lr-card-line); border-radius: 10px; color: var(--lr-text); font-size: 13px; line-height: 16px; text-align: center; text-decoration: none; }
.lr a.myl-tile:hover { background: var(--kit-neutral-bg); color: var(--lr-text); text-decoration: none; }
.lr .myl-tile.is-off { color: var(--kit-off-fg); cursor: not-allowed; }
.lr .myl-tile-t { font-weight: 600; }
.lr .myl-tile-s { color: var(--lr-muted); font-size: 12px; }
.lr .myl-more { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 14px; }
.lr .myl-page .scr-title .lr-h1 { font-size: 30px; }
/* Release 14h: the stage pill says "rate confirmation" in full ("Booked · rate confirmation to review"). The load number
   never breaks (.lr-mono), so on a narrow phone the pill drops under it rather than sliding over it. */
.lr .myl-page .scr-title { flex-wrap: wrap; row-gap: 6px; }
.lr .myl-stops .brd-row, .lr .myl-donelist .brd-row { flex-wrap: wrap; }
.lr .myl-stop form { display: flex; gap: 8px; }
.lr .myl-hist .brd-row { min-height: 52px; }
.lr .myl-release { padding: 0; }
.lr .myl-release > summary { min-height: 52px; display: flex; align-items: center; padding: 0 16px; cursor: pointer; font-size: 15px; font-weight: 600; }
.lr .myl-release > summary:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; border-radius: 12px; }
.lr .myl-release form { padding: 0 16px 16px; }
.lr .myl-reason { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; font-size: 16px; line-height: 22px; }
.lr .myl-release-go { margin-top: 12px; }
.lr .myl-search { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.lr .myl-search .lr-field { flex: 1 1 220px; margin-top: 0; }
@media (max-width: 899px) { .lr-shell .myl-more, .lr-shell .myl-release > summary { min-height: 48px; } }
@media (max-width: 380px) { .lr .myl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* === end Page: My Loads === */

/* === Page: Location sharing (S15: _myloads.html's myl_loc, myl_loc_on and myl_loc_page on carrier_myloads.html and
   carrier_myload.html; the Location sharing section of portal_soon.html's prefs screen) ===========================================
   The Brand-Marketplace location prompt and the Carrier-MyLoads board's "Sharing location … · Stop" on the carrier app's
   dark ground, from the kit's location classes (kit-loc, kit-loc-on, kit-loc-off, kit-2btn, kit-check) and S11a's terms
   disclosure (bk-term) as they are. Sharing on: the pill and Stop on one row, who sees it, and the phone's last send (a
   live region the script updates). The load's page: the prompt as a disclosure, open while the company asks; the notice
   to read inside it; Turn on and Not now thumb-first, 48px on a phone. The quiet "Location off. Turn on" link is a 44px
   target (48px on a phone), its line centred on it. A live share while the switch doesn't allow sending: a paused line
   beside Stop. The Account hub's row: the default over "On now for LR-… · Truck N" with the board's amber dot. The prefs
   screen: the default's three choices and who sees what. Classes loc- only. */
.lr .loc-on { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--kit-soft); }
.lr .loc-on > p { margin: 0; line-height: 1.45; }
.lr .loc-on-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lr .loc-on-top form { margin: 0; }
.lr .loc-stop { min-width: 88px; }
.lr .loc-status { min-height: 18px; }
.lr .loc-ask > p { margin-top: 10px; }
.lr .loc-quiet { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.lr .loc-off-line { align-items: center; }
.lr .loc-paused { margin: 0; color: var(--lr-text); }
.lr .loc-live { display: flex; align-items: center; gap: 6px; }
.lr .loc-live-dot { flex: none; width: 7px; height: 7px; border-radius: 999px; background: var(--lr-amber); }
.lr .loc-live .lr-mono { color: var(--lr-text); }
.lr .loc-prompt { padding: 0; }
.lr .loc-prompt > summary { min-height: 52px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 16px; cursor: pointer; }
.lr .loc-prompt > summary:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; border-radius: 12px; }
.lr .loc-sum { font-size: 15px; font-weight: 600; }
.lr .loc-body { padding: 0 16px 16px; }
.lr .loc-body > p { margin: 0 0 8px; line-height: 1.45; }
.lr .loc-body form { margin-top: 10px; }
.lr .loc-body .kit-2btn + p { margin-top: 8px; }
.lr .loc-accept { align-items: flex-start; font-weight: 500; line-height: 1.4; }
.lr .loc-accept input { flex: none; margin-top: 2px; }
.lr .loc-defaults { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.lr .loc-default { display: flex; align-items: flex-start; gap: 10px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--lr-card-line);
  border-radius: 10px; cursor: pointer; }
.lr .loc-default input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--lr-amber); }
.lr .loc-default span { display: flex; flex-direction: column; gap: 2px; }
.lr .loc-h3 { margin: 16px 0 4px; font-size: 16px; }
.lr .loc-who { list-style: none; margin: 0; padding: 0; }
.lr .loc-who > li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--lr-card-line); }
.lr .loc-who > li:first-child { border-top: 0; }
.lr .loc-who > li > span:last-child { color: var(--lr-muted); text-align: right; }
@media (max-width: 899px) { .lr-shell .loc-prompt > summary, .lr-shell .loc-stop, .lr-shell .loc-quiet { min-height: 48px; } }
@media (max-width: 380px) { .lr .loc-who > li { flex-direction: column; gap: 2px; } .lr .loc-who > li > span:last-child { text-align: left; } }
/* === end Page: Location sharing === */

/* === Page: Truck posts, broker packets and Mark paid (S19: carrier_trucks.html; carrier_company.html's #packets;
   carrier_myload.html's #paid; broker_application.html's call-back) =====================================================
   Dark carrier app (the kit's lr-, scr- and brd- as they are). The truck post form stacks in one column like the
   search's; the posts are the kit's rows. A packet request is a row inside the documents list with its Send button; Mark
   paid is a short date form. New classes only (tkp-, pkt-, myl-paid, ba-cb, ba-go). */
.tkp-card { margin-top: 16px; }
.tkp-card > .lr-h2 { margin: 0 0 6px; }
.tkp-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.tkp-form .lr-btn { align-self: stretch; }
.tkp-err { color: var(--lr-bad); }
.pkt-row { flex-wrap: wrap; }
.pkt-list { list-style: none; margin: 8px 0 0; padding: 0; flex-basis: 100%; }
.pkt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0;
  border-top: 1px solid var(--lr-line); }
.pkt form { margin: 0; }
.myl-paid-f { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 8px; }
.myl-paid-f .lr-field { flex: 1 1 180px; margin: 0; }
.ba-cb { margin-top: 16px; }
.ba-cb-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ba-go { margin-top: 8px; }
/* S19 review: Get paid's Payment history (other brokers' loads, Mark paid) and the truck post's "Visible to verified
   brokers" line. New classes only (pay-hist, pay-rows, tkp-vis). */
.pay-hist { margin-top: 16px; }
.pay-rows { margin-top: 12px; }
.pay-rows .brd-row { flex-wrap: wrap; }
.pay-rows .myl-paid-f { flex-basis: 100%; }
.tkp-vis { display: flex; gap: 10px; align-items: flex-start; }
.tkp-vis .lr-ico { flex: none; color: var(--lr-good); }
/* === end Page: Truck posts, broker packets and Mark paid === */

/* === Page: Messages and calls (S12: carrier_messages.html, carrier_thread.html, shipper_messages.html, _messages.html) =====
   The Carrier-Messages board: the inbox's rows (inb-), a thread's header with the masked Call, the load's chip, the
   message log (the viewer's own bubbles on the right in the route-blue tint, the other side's on the left, LaneRally's
   call lines as a pill in the middle), the composer held above the tabs, and Report (thr-, msg-). The same markup on the
   shipper portal's light ground reads its tokens. Money in the chip is ink (snow on dark), never green. Classes inb-,
   thr- and msg- only; nothing shared is restyled. */
.lr .thr, .lr .inb { --msg-mine-bg: rgba(35, 89, 209, 0.08); --msg-mine-line: rgba(35, 89, 209, 0.3); }
.lr-dark .thr, .lr-dark .inb { --msg-mine-bg: rgba(141, 176, 255, 0.14); --msg-mine-line: rgba(141, 176, 255, 0.35); }

/* The inbox. */
.lr .inb-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--lr-card-line); border-radius: 12px; background: var(--lr-card); overflow: hidden; }
.lr .inb-list > li + li { border-top: 1px solid var(--lr-card-line); }
.lr a.inb-row { display: flex; align-items: flex-start; gap: 12px; min-height: 72px; padding: 12px 14px; color: var(--lr-text); font-weight: 400; text-decoration: none; }
.lr a.inb-row:hover { text-decoration: none; background: var(--kit-soft, rgba(255, 255, 255, 0.04)); color: var(--lr-text); }
.lr .inb-av { flex: none; width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: var(--lr-tile); color: var(--lr-muted); border: 1px solid var(--lr-tile-line); }
.lr .inb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lr .inb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lr .inb-who { font-size: 16px; line-height: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr .inb-at { flex: none; font-size: 12px; line-height: 16px; color: var(--lr-muted); }
.lr .inb-sub { font-size: 13px; line-height: 18px; color: var(--lr-muted); overflow-wrap: anywhere; }
.lr .inb-last { font-size: 14px; line-height: 20px; color: var(--lr-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr a.inb-row.is-unread .inb-last { color: var(--lr-text); font-weight: 600; }
.lr .inb-dot { flex: none; align-self: center; width: 10px; height: 10px; border-radius: 999px; background: var(--lr-amber); }
.lr .inb-desk { display: flex; flex-direction: column; gap: 10px; }
.lr .inb-desk form { margin: 0; }

/* A thread: the header, the chip. */
.lr .thr { display: flex; flex-direction: column; gap: 12px; }
.lr .thr > * { margin: 0; }
.lr .thr-head { display: flex; align-items: center; gap: 4px; min-height: 60px; margin: 0 -16px; padding: 0 16px 0 4px; border-bottom: 1px solid var(--lr-card-line); }
.lr a.thr-back { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--lr-text); }
.lr a.thr-back .kit-ico { width: 24px; height: 24px; }
.lr .thr-id { flex: 1; min-width: 0; }
.lr .thr-h { margin: 0; font: 600 17px/22px var(--lr-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr .thr-sub { margin-top: 2px; min-height: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--lr-muted); }
.lr .thr-ver { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px 0 5px; border-radius: 999px; font-weight: 600;
  background: var(--lr-good-soft); border: 1px solid var(--lr-good-line); color: var(--lr-good); }
.lr .thr-ver svg { width: 13px; height: 13px; }
.lr .thr-callf { flex: none; margin: 0; }
.lr .thr-call { min-height: 44px; padding: 0 14px 0 12px; }
.lr .thr-why { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .thr-cant { font-size: 14px; line-height: 20px; padding: 12px 14px; border: 1px dashed var(--lr-card-line); border-radius: 12px; }
.lr .thr-live { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--lr-text); }
.lr .thr-chip { min-height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 8px; background: var(--lr-card); border: 1px solid var(--lr-card-line);
  border-radius: 999px; color: var(--lr-text); font-weight: 400; text-decoration: none; }
.lr a.thr-chip:hover { color: var(--lr-text); text-decoration: none; border-color: var(--lr-muted); }
.lr .thr-chip-ref { flex: none; font-size: 12px; line-height: 16px; color: var(--lr-muted); }
.lr .thr-chip-lane { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr .thr-chip-rate { flex: none; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--lr-text); }
.lr .thr-chip .kit-ico { flex: none; width: 18px; height: 18px; color: var(--lr-muted); }

/* The log. */
.lr .thr-log { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; }
.lr .thr-safe { margin: 0 auto 4px; max-width: 312px; display: flex; align-items: flex-start; justify-content: center; gap: 8px;
  font-size: 12px; line-height: 16px; color: var(--lr-muted); text-align: center; }
.lr .thr-safe .kit-ico { width: 16px; height: 16px; }
.lr .msg-day { height: 16px; display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 16px; color: var(--lr-muted); }
.lr .msg-day::before, .lr .msg-day::after { content: ""; flex: 1; height: 1px; background: var(--lr-card-line); }
.lr .msg { align-self: flex-start; max-width: min(280px, 82%); display: flex; flex-direction: column; align-items: flex-start; }
.lr .msg-mine { align-self: flex-end; align-items: flex-end; }
.lr .msg-who { margin-bottom: 4px; font-size: 12px; line-height: 16px; color: var(--lr-muted); }
.lr .msg-b { padding: 10px 12px; background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 14px 14px 14px 4px;
  font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.lr .msg-mine .msg-b { background: var(--msg-mine-bg); border-color: var(--msg-mine-line); border-radius: 14px 14px 4px 14px; }
.lr .msg-t { margin: 0; white-space: pre-wrap; }
.lr .msg-t + .msg-photo { margin-top: 8px; }
.lr a.msg-photo { display: block; }
.lr .msg-photo img { display: block; max-width: 100%; height: auto; border-radius: 10px; }
.lr .msg-hidden { margin: 0; font-style: italic; color: var(--lr-muted); }
.lr .msg-meta { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--lr-muted); }
.lr .msg-warn { margin: 6px 0 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 16px; color: var(--lr-warn); }
.lr .msg-warn .kit-ico { width: 16px; height: 16px; }
.lr .msg-sys { align-self: center; align-items: center; max-width: 100%; }
.lr .msg-sys-b { min-height: 36px; padding: 0 14px 0 12px; display: inline-flex; align-items: center; gap: 8px; background: var(--lr-card);
  border: 1px solid var(--lr-card-line); border-radius: 999px; font-size: 13px; line-height: 18px; font-weight: 600; }
.lr .msg-sys-b .kit-ico { width: 16px; height: 16px; color: var(--lr-muted); }
.lr .thr-read { margin: 0; }

/* The composer, held above the tabs. */
.lr .thr-comp { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 5; margin: 0 -16px; padding: 12px;
  display: flex; align-items: flex-end; gap: 8px; background: var(--lr-card); border-top: 1px solid var(--lr-card-line); }
.lr .thr-att { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--lr-input-line);
  border-radius: 10px; color: var(--lr-text); cursor: pointer; }
.lr .thr-att .kit-ico { width: 22px; height: 22px; }
.lr .thr-att-in { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.lr .thr-att-in:focus-visible { outline: none; }
.lr .thr-comp:has(.thr-att-in:focus-visible) .thr-att { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
.lr .thr-att.is-set { border-color: var(--lr-amber); box-shadow: inset 0 0 0 1px var(--lr-amber); }
.lr .thr-photo-name { flex-basis: 100%; order: -1; font-size: 12px; line-height: 16px; color: var(--lr-muted); }
.lr .thr-comp { flex-wrap: wrap; }
.lr .thr-in { flex: 1; min-width: 0; min-height: 44px; max-height: 160px; margin: 0; padding: 10px 14px; resize: vertical; font-size: 16px; line-height: 22px; }
.lr .thr-send { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: var(--lr-amber); color: var(--lr-ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lr .thr-send .kit-ico { width: 22px; height: 22px; }
@media (min-width: 900px) { .lr-shell-carrier .thr-comp { bottom: 0; } }
@media (min-width: 1024px) { .lr-shell-shipper .thr-comp { bottom: 0; } }

/* Report. */
.lr .thr-report { border: 1px solid var(--lr-card-line); border-radius: 12px; background: var(--lr-card); }
.lr .thr-report > summary { min-height: 48px; padding: 0 14px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.lr .thr-report > summary::-webkit-details-marker { display: none; }
.lr .thr-report > summary .kit-ico { width: 18px; height: 18px; color: var(--lr-muted); }
.lr .thr-report > p, .lr .thr-rep { padding: 0 14px 14px; }
.lr .thr-rep { display: flex; flex-direction: column; gap: 10px; }
.lr .thr-rep-fs { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; }
.lr .thr-rep-l { padding: 0; margin-bottom: 4px; font-size: 14px; font-weight: 600; }
.lr .thr-rep-r { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; }
.lr .thr-rep-r input { flex: none; width: 20px; height: 20px; margin: 0; }
.lr .thr-rep .lr-btn { align-self: flex-start; }
/* Message and Call as forms on a load's page (the kit's msg_call, S12): each form fills its grid cell. */
.lr .kit-mc-f { margin: 0; display: flex; }
.lr .kit-mc-f > .lr-btn { flex: 1; }
/* My Loads' Message and Call tiles as forms (S12): the drawn tile, as a button. */
.lr .myl-tile-f { margin: 0; display: flex; }
.lr button.myl-tile { width: 100%; background: transparent; font-family: var(--lr-body); cursor: pointer; }
.lr button.myl-tile:hover { background: var(--kit-neutral-bg); }
/* The rate con's "Something wrong? Message us" as a form (S12). */
.lr form.rcs-msg { margin: 0; }
/* === end Page: Messages and calls === */

/* === Page: Shipper quotes (S13: shipper_quote.html, shipper_quote_result.html, shipper_quotes.html, _quotes.html; the
   shipper home's quote parts) ==========================================================================================
   The Shipper-Quote and Shipper-QuoteStates boards on the portal's light ground: the quote form beside its result on a
   desktop (stacked on a phone), the price in ink (the kit's rate block, never green), firm and range each labeled in words,
   the breakdown as a two-column list, the nearby pickup days as buttons, the quotes as rows. Classes sq- only; the shared
   ones (lr-card, lr-field, lr-input, lr-btn, kit-, scr-) are used as they are. */
.lr .sq { display: flex; flex-direction: column; gap: 16px; }
.lr .sq > * { margin: 0; }
.lr .sq-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .lr .sq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.lr .sq-one { max-width: 760px; }
.lr .sq-h3 { margin: 0; font: 600 18px/22px var(--lr-display); letter-spacing: -0.01em; }
.lr .sq-ref { font-size: 14px; color: var(--lr-muted); }
/* The form. */
.lr .sq-form .lr-h2 { margin-bottom: 2px; }
.lr .sq-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 12px; align-items: end; }
.lr .sq-opt { font-weight: 400; color: var(--lr-muted); }
.lr .sq-lab { width: 100%; margin: 0 0 8px; padding: 0; font-size: 14px; font-weight: 600; }
.lr .sq-chips { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lr .sq-chip { position: relative; display: inline-flex; }
.lr .sq-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lr .sq-chip > span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--lr-muted); font-size: 15px; font-weight: 600;
}
.lr .sq-chip input:checked + span { background: var(--lr-amber-soft); box-shadow: inset 0 0 0 2px var(--lr-ink); }
.lr .sq-chip input:focus-visible + span { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
.lr .sq-eq {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 6px;
  border: 1px solid var(--lr-text); font: 500 12px/1 var(--lr-mono);
}
.lr .sq-opts { margin: 12px 0 0; padding: 0; border: 0; min-width: 0; }
.lr .sq-go { margin-top: 18px; }
.lr .sq-note { margin-top: 8px; }
.lr .sq-form .lr-input[aria-invalid="true"] { border-color: var(--lr-bad); box-shadow: inset 0 0 0 1px var(--lr-bad); }
/* The result. */
.lr .sq-result { display: flex; flex-direction: column; gap: 14px; }
.lr .sq-result > * { margin: 0; }
.lr .sq-res-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.lr .sq-res-price { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--lr-card-line); }
.lr .sq-price { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.lr .sq-price .kit-rate { text-align: left; }
.lr .sq-price .kit-rate-n { font-size: 44px; }
.lr .sq-struck .kit-rate-n, .lr .sq-struck { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--lr-muted); }
.lr .sq-eqline { margin: 0; }
.lr .sq-facts { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--lr-muted); }
.lr .sq-facts .kit-eq { color: var(--lr-text); }
.lr .sq-arrive { display: flex; align-items: flex-start; gap: 10px; }
.lr .sq-arrive > .kit-ico { margin-top: 2px; color: var(--lr-muted); }
.lr .sq-arrive p { margin: 0; }
.lr .sq-warn { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--lr-warn); font-weight: 600; }
.lr .sq-warn .kit-ico { width: 18px; height: 18px; margin-top: 1px; }
.lr .sq-hold { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.lr .sq-hold .kit-ico { color: var(--lr-muted); }
.lr .sq-why { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--lr-paper); font-size: 15px; line-height: 21px; }
.lr .sq-why p { margin: 0; }
/* The breakdown: labels left, money right, the total ruled off. */
.lr .sq-break { display: flex; flex-direction: column; gap: 8px; }
.lr .sq-lines { margin: 0; display: flex; flex-direction: column; }
.lr .sq-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--lr-card-line); font-size: 15px; }
.lr .sq-lines dt { min-width: 0; }
.lr .sq-lines dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lr .sq-lines > .sq-total { border-top: 2px solid var(--lr-text); font-weight: 700; }
/* The other driver option, nearby days, the safer pickup, what happens next. */
.lr .sq-alt { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--lr-card-line); }
.lr .sq-alt > * { margin: 0; }
.lr .sq-alt-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lr .sq-alt-row p { margin: 0; }
.lr .sq-alt-this { padding-bottom: 10px; border-bottom: 1px solid var(--lr-card-line); }
.lr .sq-alt form { margin: 0; }
.lr .sq-days { display: flex; flex-direction: column; gap: 8px; }
.lr .sq-daylist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lr .sq-daylist form { margin: 0; height: 100%; }
.lr .sq-day {
  width: 100%; height: 100%; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 8px 6px; border: 0; border-radius: 10px; background: var(--lr-card); color: var(--lr-text); box-shadow: inset 0 0 0 1px var(--lr-card-line);
  font: 500 14px/1.2 var(--lr-body); cursor: pointer; text-align: center;
}
.lr button.sq-day:hover { box-shadow: inset 0 0 0 1px var(--lr-text); }
.lr .sq-day-on { background: var(--lr-amber-soft); box-shadow: inset 0 0 0 2px var(--lr-ink); cursor: default; }
.lr .sq-day-d { font-weight: 600; }
.lr .sq-day-p { font: 700 20px/1.1 var(--lr-display); }
.lr .sq-safer, .lr .sq-next { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: var(--lr-paper); }
.lr .sq-safer > *, .lr .sq-next > * { margin: 0; }
.lr .sq-safer .lr-btn { align-self: flex-start; }
.lr .sq-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 21px; }
/* Actions: full-width on a phone, side by side on a desktop. */
.lr .sq-acts { display: flex; flex-direction: column; gap: 10px; }
.lr .sq-acts form { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lr .sq-acts .lr-btn { width: 100%; }
.lr .sq-book { display: flex; flex-direction: column; gap: 8px; }
.lr .sq-book p { margin: 0; }
/* Call LaneRally with the words about who answers under it (the rail, which says them too, isn't drawn on a phone). */
.lr .sq-call { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lr .sq-call p { margin: 0; }
.lr .sq-save { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--lr-card-line); }
.lr .sq-save p { margin: 0; }
.lr .sq-fine { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 20px; color: var(--lr-muted); }
.lr .sq-fine p { margin: 0; }
.lr .sq-fine .sq-h3 { color: var(--lr-text); }
.lr .sq-bor { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 20px; color: var(--lr-muted); }
.lr .sq-bor .kit-ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--lr-good); }
/* The quotes as rows (the Quotes list, the home's holds and lanes). */
.lr .sq-list { list-style: none; margin: 0; padding: 0; background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; overflow: hidden; }
.lr .sq-row + .sq-row { border-top: 1px solid var(--lr-card-line); }
.lr a.sq-row-a, .lr .sq-lane {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; min-height: 64px; padding: 12px 14px;
  color: var(--lr-text); font-weight: 400; text-decoration: none;
}
.lr a.sq-row-a:hover { background: var(--kit-soft); color: var(--lr-text); text-decoration: none; }
.lr .sq-row-top { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lr .sq-row-lane { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.lr .sq-row-price { font: 700 22px/1.1 var(--lr-display); white-space: nowrap; text-align: right; }
.lr .sq-row-st { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; }
.lr .sq-lane .lr-btn { grid-column: 1 / -1; justify-self: start; }
.lr .sq-older { align-self: flex-start; }
.lr a.sq-more { display: inline-flex; align-items: center; min-height: 44px; }
.lr .sq-row-price a.sq-more { font: 600 15px/1.2 var(--lr-body); white-space: normal; text-align: right; } /* a lane not priced lately */
@media (min-width: 760px) {
  .lr a.sq-row-a { grid-template-columns: minmax(0, 1fr) auto auto; }
  .lr .sq-row-st { grid-column: auto; justify-self: end; }
  .lr .sq-lane { grid-template-columns: minmax(0, 1fr) auto auto; }
  .lr .sq-lane .lr-btn { grid-column: auto; }
  .lr .sq-acts { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .lr .sq-acts > form, .lr .sq-acts > .sq-book, .lr .sq-acts > .sq-call { flex: 1 1 240px; }
  .lr .sq-acts > .lr-btn { width: auto; }
}
/* The shipper home's parts. */
.lr .sq-home { margin-top: 12px; display: flex; flex-direction: column; gap: 16px; }
.lr .sq-home > * { margin: 0; }
.lr .sq-needs, .lr .sq-lanes { display: flex; flex-direction: column; gap: 8px; }
.lr .sq-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; margin-left: 4px; border-radius: 999px; background: var(--lr-amber); color: var(--lr-ink); font: 700 13px/1 var(--lr-body); vertical-align: 3px; }
.lr .sq-quick-f { margin: 0; }
.lr .sq-recent { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lr a.sq-lanechip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--lr-paper); color: var(--lr-text); font-size: 14px; font-weight: 600; }
.lr a.sq-lanechip:hover { box-shadow: inset 0 0 0 1px var(--lr-text); text-decoration: none; color: var(--lr-text); }
@media (max-width: 899px) { .lr-shell .sq-chip > span, .lr-shell .sq-day, .lr-shell a.sq-lanechip { min-height: 48px; } }
/* === end Page: Shipper quotes === */

/* === Page: Public instant quote (S13: site_quote.html; site_home.html's site_quote_live card) ======================
   lanerally.com's /quote: the form beside the priced lane on a desktop (stacked on a phone), the price in ink (the Home
   board's site-rate-n), firm and range labeled in words, the nearby pickup days as a row, and the broker status line under
   it. The hero's live card is the example card's (site-quote) with the form in it. Scoped under .lr, classes siteq- only;
   no inline style (the site's CSP). */
.lr .site-in.siteq { padding-top: 32px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 20px; }
.lr .siteq > * { margin: 0; }
.lr .siteq-grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 960px) { .lr .siteq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); } }
.lr .siteq-form .lr-field:first-of-type { margin-top: 10px; }
.lr .siteq-go { margin-top: 18px; width: 100%; }
.lr .siteq-out { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lr .siteq-result { gap: 16px; }
.lr .siteq-result > * { margin: 0; }
.lr .siteq-price { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--lr-line-light); }
.lr .siteq-price .site-sample-meta { margin-top: 6px; color: var(--lr-slate); }
.lr .siteq-arrive { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.45; }
.lr .siteq-arrive .site-ico { width: 18px; height: 18px; margin-top: 2px; }
.lr .siteq-days ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lr .siteq-days li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 10px; border: 1px solid var(--lr-line-light); font-size: 14px; text-align: center; }
.lr .siteq-days li.is-on { background: var(--lr-amber-soft); border-color: var(--lr-ink); }
.lr .siteq-day-p { font: 700 20px/1.1 var(--lr-display); }
.lr .siteq-empty { gap: 6px; }
.lr .siteq-empty > * { margin: 0; }
.lr .siteq-status { padding: 12px 14px; border-radius: 10px; background: var(--lr-white); border: 1px solid var(--lr-line-light); font-size: 14px; line-height: 1.45; }
.lr .siteq-mini { margin-top: 6px; }
.lr .siteq-mini .lr-field { margin-top: 12px; }
.lr .siteq-mini-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
/* The result's sign-in link (the only way an existing shipper reaches the lane from here): the site's 44px target, on a
   line of its own (S13 review). */
.lr .siteq-signin { margin: 0; font-size: 15px; }
.lr .siteq-signin a { display: inline-flex; align-items: center; min-height: 44px; }
/* === end Page: Public instant quote === */

/* === Page: Shipper checkout, shipments and tracking (S14a: shipper_checkout.html, shipper_shipments.html,
   shipper_shipment.html, _shipments.html, shipper_confirmation.html, shipper_bol.html, shipper_docs.html,
   shipper_invoices.html, shipper_invoice.html, shipper_facilities.html, shipper_home.html's In transit, track_public.html)
   ========================================================================================================================
   The Shipper-Checkout, Shipper-Dashboard and Shipper-Tracking boards on the portal's light ground: numbered checkout
   steps, the dashboard's four numbers over a table (stacked on a phone), the drawer, the tracking page's milestones as a
   dotted track (done: filled; ahead: hollow and dimmed; an exception: the bad colour with its word), the Pickup PIN big
   in mono. Money in ink, never green. Classes shp- only; the shared ones (lr-card, lr-field, lr-input, lr-btn, kit-, scr-,
   sq-) are used as they are. */
.lr .shp { display: flex; flex-direction: column; gap: 16px; }
.lr .shp > * { margin: 0; }
.lr .shp-one { max-width: 1100px; }
.lr .shp-co { max-width: 760px; }
.lr .shp-ref { font-size: 14px; color: var(--lr-muted); }
.lr .shp-hold { font-size: 15px; }
.lr .shp-err { margin: 4px 0 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--lr-bad); }
.lr .shp-block { display: block; }
/* Checkout: the quote, then the five numbered steps. */
.lr .shp-sum { display: flex; flex-direction: column; gap: 6px; }
.lr .shp-sum > * { margin: 0; }
.lr .shp-sum-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.lr .shp-co-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.lr .shp-step { display: flex; flex-direction: column; gap: 10px; }
.lr .shp-step > * { margin: 0; }
.lr .shp-step-h { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 20px/24px var(--lr-display); letter-spacing: -0.01em; }
.lr .shp-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 999px;
  background: var(--lr-amber); color: var(--lr-ink); font: 700 15px/1 var(--lr-body);
}
.lr .shp-stop { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lr .shp-stop > legend { padding: 0; margin-bottom: 4px; }
.lr .shp-fixed { margin: -2px 0 0; }
.lr .shp-divider { height: 0; border-top: 3px dashed var(--lr-line); margin: 4px 0; }
.lr a.shp-add { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }
.lr .shp-people { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lr .shp-pay { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lr .shp-payopt { display: flex; align-items: flex-start; gap: 10px; min-height: 48px; padding: 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--lr-card-line); }
.lr .shp-payopt > span { display: flex; flex-direction: column; gap: 2px; }
.lr .shp-payopt input { margin-top: 4px; }
.lr .shp-payopt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--lr-ink); background: var(--lr-amber-soft); }
.lr .shp-payopt-off { color: var(--lr-muted); background: var(--lr-paper); }
.lr .shp-review { margin: 0; display: flex; flex-direction: column; }
.lr .shp-review > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--lr-card-line); font-size: 15px; }
.lr .shp-review dt { color: var(--lr-muted); }
.lr .shp-review dd { margin: 0; }
.lr .shp-short { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--lr-paper); font-size: 15px; line-height: 21px; }
.lr .shp-short > * { margin: 0; }
.lr .shp-terms { border: 1px solid var(--lr-card-line); border-radius: 10px; padding: 0 14px; }
.lr .shp-terms > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.lr .shp-terms-body { max-height: 320px; overflow: auto; padding-bottom: 12px; font-size: 14px; line-height: 20px; }
.lr .shp-terms-body p { margin: 0 0 8px; }
.lr .shp-draft { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: var(--lr-note-bg); font-size: 14px; line-height: 20px; font-weight: 600; }
.lr .shp-go { width: 100%; }
/* The dashboard: four numbers, the bar, the table, the drawer. */
.lr .shp-kpis { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .lr .shp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lr .shp-kpis > div { padding: 12px 14px; border-radius: 12px; background: var(--lr-card); border: 1px solid var(--lr-card-line); }
.lr .shp-kpis dt { font-size: 14px; color: var(--lr-muted); }
.lr .shp-kpis dd { margin: 0; }
.lr .shp-kpis dt + dd { font: 700 32px/1.1 var(--lr-display); font-variant-numeric: tabular-nums; }
.lr .shp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lr .shp-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.lr .shp-tabs a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--lr-text);
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.lr .shp-tabs a:hover { background: var(--kit-soft); color: var(--lr-text); text-decoration: none; }
.lr .shp-tabs a[aria-current="page"] { background: var(--lr-ink); color: var(--lr-snow); }
.lr .shp-search { display: flex; gap: 8px; align-items: center; margin: 0; flex: 1 1 260px; }
.lr .shp-search .lr-input { flex: 1; min-width: 0; }
/* The table scrolls sideways inside its card when a screen is too narrow for every column (never cut off: S14a review),
   as a labelled region a keyboard can focus. */
.lr .shp-table-wrap { background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; overflow-x: auto; }
.lr .shp-table-wrap:focus-visible { outline: 3px solid var(--lr-route); outline-offset: 2px; }
.lr .shp-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lr .shp-table th, .lr .shp-table td { padding: 10px 8px; text-align: left; vertical-align: top; border-top: 1px solid var(--lr-card-line); font-weight: 400; }
.lr .shp-table tr > :first-child { padding-left: 12px; }
.lr .shp-table tr > :last-child { padding-right: 12px; }
.lr .shp-table thead th { border-top: 0; font-size: 13px; font-weight: 600; color: var(--lr-muted); }
.lr .shp-table tbody th { font-weight: 600; }
.lr .shp-table a { display: inline-flex; align-items: center; min-height: 44px; }
.lr .shp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: -6px 2px 0; }
.lr a.shp-foot-a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.lr .shp-num-c { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lr .shp-table td.shp-num-c { text-align: right; }
.lr .shp-sel > * { background: var(--lr-amber-soft); }
@media (max-width: 899px) {
  .lr .shp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lr .shp-table, .lr .shp-table tbody, .lr .shp-table tr, .lr .shp-table th, .lr .shp-table td { display: block; }
  .lr .shp-table tr { padding: 10px 12px; border-top: 1px solid var(--lr-card-line); }
  .lr .shp-table tr:first-child { border-top: 0; }
  .lr .shp-table th, .lr .shp-table td { padding: 2px 0; border: 0; }
  .lr .shp-table td::before { content: attr(data-label) " · "; color: var(--lr-muted); font-size: 13px; }
  .lr .shp-table td.shp-num-c { text-align: left; }
  .lr .shp-table a { min-height: 48px; }
}
.lr .shp-drawer { display: flex; flex-direction: column; gap: 10px; }
.lr .shp-drawer > * { margin: 0; }
.lr .shp-dr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lr a.shp-dr-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--lr-text); }
.lr a.shp-dr-x:hover { background: var(--kit-soft); }
/* The drawer: above the table (the row's link lands on it, #shp-drawer) on a phone, a tablet and a laptop; beside the
   table only where the table keeps every column beside it (the board's 1600px). */
.lr .shp-drawer { scroll-margin-top: 76px; }
@media (min-width: 1560px) {
  .lr .shp-dash:has(.shp-drawer) { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 20px; align-items: start; max-width: 1500px; }
  .lr .shp-dash:has(.shp-drawer) > * { grid-column: 1; }
  .lr .shp-dash > .shp-drawer { grid-column: 2; grid-row: 1 / span 8; position: sticky; top: 76px; }
}
.lr .shp-route { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lr .shp-route > li { display: flex; align-items: baseline; gap: 8px; }
.lr .shp-route-o, .lr .shp-route-d { flex: none; width: 10px; height: 10px; border-radius: 2px; border: 2px solid var(--lr-ink); transform: translateY(1px); }
.lr .shp-route-o { background: var(--lr-ink); }
.lr .shp-route-mi { margin-left: auto; white-space: nowrap; }
.lr .shp-lastcall { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.lr .shp-lastcall > span { display: flex; flex-direction: column; gap: 2px; }
.lr .shp-lastcall > .kit-ico { flex: none; margin-top: 2px; color: var(--lr-route); }
/* The route map: the boards' inline SVG (no tiles), the truck at city level. */
.lr .shp-map { margin: 0; }
.lr .shp-map svg { display: block; width: 100%; height: auto; }
.lr .shp-map-bg { fill: var(--lr-paper); stroke: var(--lr-card-line); }
.lr .shp-map-done { stroke: var(--lr-route); stroke-width: 4; stroke-linecap: round; }
.lr .shp-map-ahead { stroke: var(--lr-route); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 6; }
.lr .shp-map-o { fill: var(--lr-ink); }
.lr .shp-map-d { fill: var(--lr-card); stroke: var(--lr-ink); stroke-width: 2.5; }
.lr .shp-map-halo { fill: none; stroke: var(--lr-route); stroke-width: 1.5; stroke-dasharray: 3 3; }
.lr .shp-map-k { fill: var(--lr-ink); stroke: var(--lr-card); stroke-width: 2; }
.lr .shp-map-t { font: 600 13px/1 var(--lr-body); fill: var(--lr-text); paint-order: stroke; stroke: var(--lr-paper); stroke-width: 4px; stroke-linejoin: round; }
.lr .shp-map-kt { font-size: 12px; }
.lr .shp-map-s { font: 400 11px/1 var(--lr-body); fill: var(--lr-muted); paint-order: stroke; stroke: var(--lr-paper); stroke-width: 4px; stroke-linejoin: round; }
.lr .shp-mapcard { border-radius: 12px; overflow: hidden; }
@media (min-width: 1000px) { .lr .shp-mapcard { max-width: 640px; } }
/* The tracking page. */
.lr .shp-head { display: flex; flex-direction: column; gap: 12px; }
.lr .shp-head > * { margin: 0; }
.lr .shp-head-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.lr .shp-eta, .lr .shp-pos { display: flex; align-items: flex-start; gap: 10px; }
.lr .shp-eta > .kit-ico, .lr .shp-pos > .kit-ico { flex: none; margin-top: 2px; color: var(--lr-muted); }
.lr .shp-eta p, .lr .shp-pos p { margin: 0; }
.lr .shp-eta-t { font: 700 26px/1.1 var(--lr-display); }
.lr .shp-price .kit-rate { text-align: left; }
.lr .shp-cols { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1000px) { .lr .shp-cols { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.lr .shp-col { display: flex; flex-direction: column; gap: 16px; }
.lr .shp-col > .lr-card { display: flex; flex-direction: column; gap: 10px; }
.lr .shp-col > .lr-card > * { margin: 0; }
.lr .shp-track { list-style: none; margin: 0; padding: 0; }
.lr .shp-ev { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; padding: 8px 0; }
.lr .shp-ev + .shp-ev::before { content: ""; position: absolute; left: 6px; top: -10px; height: 18px; border-left: 2px dashed var(--lr-line); }
.lr .shp-ev-dot { width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--lr-ink); background: var(--lr-card); transform: translateY(2px); }
.lr .shp-ev-done .shp-ev-dot { background: var(--lr-ink); }
.lr .shp-ev-bad .shp-ev-dot { background: var(--lr-bad); border-color: var(--lr-bad); }
.lr .shp-ev-bad .shp-ev-t { color: var(--lr-bad); }
.lr .shp-ev-next { color: var(--lr-muted); }
.lr .shp-ev-next .shp-ev-dot { border-color: var(--lr-muted); }
.lr .shp-ev-when { text-align: right; white-space: nowrap; }
@media (max-width: 599px) { .lr .shp-ev { grid-template-columns: 20px minmax(0, 1fr); } .lr .shp-ev-when { grid-column: 2; text-align: left; } }
.lr .shp-stoplist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.lr .shp-stoplist > li { padding: 10px 0; }
.lr .shp-stoplist > li + li { border-top: 3px dashed var(--lr-line); }
.lr .shp-stoplist p { margin: 0; }
.lr .shp-refs { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 16px; }
.lr .shp-refs dt { font-size: 13px; color: var(--lr-muted); }
.lr .shp-refs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.lr .shp-pin-n { margin: 0; font-size: 44px; line-height: 1.05; font-weight: 500; letter-spacing: 0.08em; }
.lr .shp-pin form { margin: 0; }
.lr .shp-carrier { display: flex; align-items: flex-start; gap: 10px; }
.lr .shp-carrier > div { flex: 1; min-width: 0; }
.lr .shp-carrier p, .lr .shp-nocarrier { margin: 0; }
.lr .shp-nocarrier { display: flex; align-items: center; gap: 8px; }
.lr .shp-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lr .shp-doc { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.lr .shp-doc + .shp-doc { border-top: 1px solid var(--lr-card-line); }
.lr .shp-doc-ico { flex: none; color: var(--lr-muted); }
.lr .shp-doc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lr .shp-share { display: flex; flex-direction: column; gap: 8px; }
.lr .shp-share > *, .lr .shp-share form { margin: 0; }
.lr .shp-link { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--lr-card-line); }
.lr .shp-link-in { font-size: 16px; }
.lr .shp-rclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lr .shp-rclist > li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.lr .shp-rclist > li + li { border-top: 1px solid var(--lr-card-line); }
.lr .shp-rclist form, .lr .shp-rcadd { margin: 0; }
.lr .shp-rcadd { display: flex; align-items: flex-end; gap: 8px; }
.lr .shp-rcadd .lr-field { flex: 1; margin: 0; }
.lr .shp-help { display: flex; flex-wrap: wrap; gap: 8px; }
.lr .shp-help > .sq-call { flex: 1 1 100%; }
.lr a.shp-docref { display: inline-flex; align-items: center; min-height: 44px; }
.lr .shp-review-b { align-self: flex-start; }
/* The load confirmation and an invoice: a document on the card. */
.lr .shp-doc-page { display: flex; flex-direction: column; gap: 14px; }
.lr .shp-doc-page > * { margin: 0; }
.lr .shp-doc-head p { margin: 0; }
.lr .shp-conf-price { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 2px solid var(--lr-text); }
/* The bill of lading. */
.lr .shp-bolhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.lr .shp-bolhead p { margin: 0; }
.lr .shp-bol-doc { margin: 0; }
.lr .shp-sign { display: flex; flex-direction: column; gap: 10px; }
.lr .shp-sign > *, .lr .shp-sign-f { margin: 0; }
.lr .shp-sign-f { display: flex; flex-direction: column; gap: 10px; }
.lr .shp-upload { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.lr .shp-docgroups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lr .shp-docgroup { display: flex; flex-direction: column; gap: 6px; }
.lr .shp-docgroup > * { margin: 0; }
/* Facilities and lanes. */
.lr .shp-places { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 900px) { .lr .shp-places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lr .shp-place { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lr .shp-place-t { min-width: 0; }
.lr .shp-place-t p, .lr .shp-place form { margin: 0; }
.lr .shp-placeform { display: flex; flex-direction: column; gap: 10px; }
.lr .shp-placeform > * { margin: 0; }
.lr .shp-lanes { display: flex; flex-direction: column; gap: 8px; }
.lr .shp-lanes > * { margin: 0; }
.lr .shp-lanes form { margin: 0; }
/* The home's In transit; the shared link's page. */
.lr .shp-home { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.lr .shp-home > * { margin: 0; }
.lr .shp-public { max-width: 760px; margin: 24px auto; padding: 0 16px; }
@media (max-width: 899px) {
  .lr-shell .shp-rcadd { flex-direction: column; align-items: stretch; }
  /* The portal's 48px phone targets (S14a review). */
  .lr-shell .shp-tabs a, .lr-shell a.shp-add, .lr-shell .shp-terms > summary, .lr-shell a.shp-foot-a, .lr-shell a.shp-docref { min-height: 48px; }
  .lr-shell a.shp-dr-x { width: 48px; height: 48px; }
}
/* === end Page: Shipper checkout, shipments and tracking === */

/* === Page: Shipper prepayment (S14p: _shipments.html's shp_prepay on shipper_shipment.html, shp_transfer on
   shipper_invoice.html, shp_pay_row on the home's Needs you; shipper_checkout.html's Prepay by bank transfer, which uses
   S14a's shp-payopt). Light shipper portal; new classes only (none shared restyled). Money in ink. */
.lr .shp-prepay { margin: 0 0 16px; }
.lr .shp-prepay a { font-weight: 600; }
.lr .shp-transfer { margin-top: 16px; }
.lr .shp-transfer .shp-refs { margin: 8px 0 12px; }
.lr .shp-transfer .lr-mono { font-size: 16px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
/* === end Page: Shipper prepayment === */

/* === Page: Shipper payments (S14b: _shippay.html's shp_invpay, shp_receipts and shp_bank on shipper_invoice.html;
   shipper_payment.html, Payment methods; shipper_fakecard.html, the test card page; shipper_checkout.html's card choice,
   which uses S14a's shp-payopt, one option per saved card, and step 4's "Add a method"; the invoices list's owed line and
   Payment methods link). Light shipper portal; new classes
   only (none shared restyled). Money in ink. */
.lr .shp-pay-card, .lr .shp-pay-got { margin-top: 16px; }
.lr .shp-pay-card { scroll-margin-top: 16px; }
.lr .shp-pay-owed { margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.lr .shp-pay-card .sq-h3 { margin: 16px 0 6px; }
.lr .shp-pay-list { list-style: none; margin: 8px 0 0; padding: 0; }
.lr .shp-pay-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 0;
  border-top: 1px solid var(--lr-card-line); min-height: 48px; }
.lr .shp-pay-row:first-child { border-top: 0; }
.lr .shp-pay-row > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.lr .shp-pay-amt { font-variant-numeric: tabular-nums; }
.lr .shp-pay-charge { margin: 8px 0; }
.lr .shp-card-form { display: grid; gap: 10px; margin-top: 8px; }
.lr .shp-card-form .lr-btn { justify-self: start; }
.lr .shp-card-pays { display: flex; flex-wrap: wrap; gap: 8px; }
.lr .shp-card-note { margin: 0; }
/* S14b review: checkout's step 4 header carries the board's "Add a method" link (to Payment methods), 44px tall. */
.lr .shp-step-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lr .shp-step-link { margin-left: auto; min-height: 44px; display: flex; align-items: center; font-size: 14px; font-weight: 600; }
.lr .shp-pay-sim { margin-top: 16px; }
.lr .shp-pay-sim > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.lr .shp-payurl { margin: 4px 0; }
.lr .shp-owed { display: block; }
.lr .shp-paylink { font-weight: 600; }
@media (max-width: 899px) {
  .lr .shp-card-form .lr-btn, .lr .shp-card-save { justify-self: stretch; min-height: 48px; }
  .lr .shp-card-pays { flex-direction: column; }
  .lr .shp-card-pays .lr-btn { min-height: 48px; }
  .lr .shp-pay-sim > summary { min-height: 48px; }
  .lr .shp-step-link { min-height: 48px; }
}
/* === end Page: Shipper payments === */

/* === Page: Get paid (S16: carrier_pay.html; carrier_myload.html's #pay, a LaneRally load's pay and its Quick Pay offer) ===
   Dark carrier app (the kit's lr-, scr-, brd- and bk-term as they are; S19's pay-hist and pay-rows for the history). The
   board's two summary tiles, the payout account card with its icon, the standard pay card (the board's "Payment option"
   without Quick Pay), the factoring form, the tax card, the way a payout code goes (radio rows, 44px, 48px on a phone), and
   a load's Quick Pay offer. Money in ink (never the good colour); a word beside every colour. New classes only (gp-). */
.lr .gp-tiles { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lr .gp-tile { min-width: 0; padding: 12px; border-radius: 12px; background: var(--lr-card); border: 1px solid var(--lr-card-line); }
.lr .gp-tile p { margin: 0; }
.lr .gp-tile-l { font-size: 13px; line-height: 18px; color: var(--lr-muted); overflow-wrap: anywhere; }
.lr .gp-tile .gp-tile-n { margin-top: 4px; font: 700 30px/34px var(--lr-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lr .gp-tile .gp-tile-s { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--lr-muted); overflow-wrap: anywhere; }
.lr .gp-sect { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; }
.lr .gp-sect > .lr-h2 { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.lr .gp-opt { font: 400 14px/20px var(--lr-body); color: var(--lr-muted); letter-spacing: 0; }
.lr .gp-code { margin-top: 16px; scroll-margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.lr .gp-code > .lr-h2 { margin: 0; }
.lr .gp-acct, .lr .gp-std, .lr .gp-fac, .lr .gp-tax { display: flex; flex-direction: column; gap: 10px; }
.lr .gp-acct-top { display: flex; align-items: flex-start; gap: 12px; }
.lr .gp-acct-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--lr-card-line); display: flex; align-items: center; justify-content: center; }
.lr .gp-acct-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lr .gp-acct-t p { margin: 0; }
.lr .gp-acct-h { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.lr .gp-ok, .lr .gp-warn, .lr .gp-hold { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 20px; }
.lr .gp-ok { color: var(--lr-good); font-weight: 600; }
.lr .gp-warn, .lr .gp-hold { color: var(--lr-warn); }
.lr .gp-ok .kit-ico, .lr .gp-warn .kit-ico, .lr .gp-hold .kit-ico { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.lr .gp-foot { margin: 0; padding-top: 10px; border-top: 1px solid var(--lr-card-line); font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .gp-send { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lr .gp-send > .lr-btn { align-self: flex-start; }
.lr .gp-how { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lr .gp-how legend { padding: 0; margin-bottom: 4px; color: var(--lr-muted); }
.lr .gp-how-o { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; line-height: 20px; cursor: pointer; overflow-wrap: anywhere; }
.lr .gp-how-o input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--lr-amber); }
.lr .gp-more > summary { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; color: var(--lr-link); cursor: pointer; }
.lr .gp-more[open] > summary { margin-bottom: 8px; }
.lr .gp-std-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lr .gp-std-t { font: 600 22px/26px var(--lr-display); }
.lr .gp-std p, .lr .gp-fac p, .lr .gp-tax p { margin: 0; }
.lr .gp-dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.lr .gp-dl dt { font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .gp-dl dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.lr .gp-none { font-weight: 600; }
.lr .gp-fac-form .lr-field { margin: 0; }
.lr .gp-remit { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lr .gp-remit legend { padding: 0; margin-bottom: 6px; }
.lr .gp-remit-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.lr .gp-load { margin-top: 16px; scroll-margin-top: 16px; }
.lr .gp-load > p { margin: 0; }
.lr .gp-qp { display: flex; flex-direction: column; gap: 8px; }
.lr .gp-qp p { margin: 0; }
.lr .gp-qp-t { font-weight: 700; font-size: 16px; line-height: 22px; }
/* Release 14d: fees under the rate con terms on a load's pay (carrier_myload.html's #deductions). */
.lr .gp-ded { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--lr-warn-soft, #FDF1D3); }
.lr .gp-ded-list { margin: 6px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.lr .gp-qp-form { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lr .gp-qp-form > .lr-btn { align-self: flex-start; }
/* S16 review: a LaneRally row in the Payment history opens its load's pay (the board's rows carry the lane); Company &
   documents' W-9 and notice of assignment rows open Get paid once payouts are open; Get verified's Getting paid rows. */
.lr a.gp-hist-a, .lr a.doc-pay-a { flex: 1; min-height: 44px; color: inherit; font-weight: 400; text-decoration: none; }
.lr a.gp-hist-a:hover .lr-mono, .lr a.gp-hist-a:focus-visible .lr-mono,
.lr a.doc-pay-a:hover .kit-strong, .lr a.doc-pay-a:focus-visible .kit-strong { text-decoration: underline; }
.lr .gv-pay .brd-rows { margin-top: 8px; }
.lr .gv-pay > p { margin: 8px 0 0; }
@media (max-width: 420px) {
  .lr .gp-dl { grid-template-columns: minmax(0, 1fr); }
  .lr .gp-remit-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lr .gp-remit-row > .lr-field:first-child { grid-column: 1 / -1; }
  .lr .gp-send > .lr-btn, .lr .gp-qp-form > .lr-btn { align-self: stretch; }
}
@media (max-width: 640px) {
  .lr-shell .gp-how-o, .lr-shell .gp-more > summary, .lr-shell a.gp-hist-a, .lr-shell a.doc-pay-a { min-height: 48px; }
}
/* === end Page: Get paid === */

/* === Page: Trucks, saved searches and alerts (S9: carrier_trucks.html's truck cards, carrier_truck.html, carrier_search.html's
   truck chips and Save & alert, carrier_results.html's Save & alert, carrier_load.html's Truck fits and Profit estimator,
   carrier_book.html and carrier_offer.html's truck picker (_board.html's bk_truck) and Alert this lane, carrier_searches.html,
   carrier_search_save.html, carrier_prefs.html) ==============================================================================
   Dark carrier app: the kit's lr-, scr-, brd-, kit- and tkp- classes as they are. A truck card is a card with the truck's
   name and tag, Posted or Not posted (a word, never colour alone), its loads, its details (the board's brd-dl) and its
   costs in big numbers set in ink (money is never green); the profit estimator is a list of lines, each cost in ink with a
   minus sign, the estimate in the display face. A truck chip is the search's chip as a button (aria-pressed: the truck
   picked). The prefs page is the screens' cards; the auto-book switch is drawn off. New classes only (trks-, alr-, pfx-). */
.trks-card { display: flex; flex-direction: column; gap: 10px; }
.trks-card > * { margin: 0; }
.trks-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trks-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trks-name .lr-h2 { margin: 0; overflow-wrap: anywhere; }
.trks-off { color: var(--lr-muted); }
.trks-load { font-size: 15px; line-height: 21px; }
.trks-costs { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--lr-card-line); }
.trks-costs > * { margin: 0; }
.trks-costs-h, .trks-pe-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trks-pe-h .lr-h2 { margin: 0; }
a.trks-edit { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; }
.trks-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.trks-kpis > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--kit-soft); }
.trks-num { font: 700 26px/1 var(--lr-display); font-variant-numeric: tabular-nums; color: var(--lr-text); }
.trks-unit { font: 600 14px/1 var(--lr-body); color: var(--lr-muted); }
.trks-find { align-self: stretch; justify-content: center; }
.trks-form { display: flex; flex-direction: column; gap: 16px; }
.trks-fs { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.trks-sect { display: flex; flex-direction: column; gap: 10px; }
.trks-sect > .lr-h2 { margin: 0; }
.trks-save { align-self: stretch; }
.trks-remove { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.trks-remove .lr-btn { align-self: flex-start; }
.trks-chips { margin: 0; }
button.trks-chip { border: 0; background: transparent; }
button.trks-chip[aria-pressed="true"] { background: var(--lr-amber); color: var(--lr-ink); box-shadow: none; }
button.trks-chip:focus-visible, a.trks-chip:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
a.trks-chip { text-decoration: none; gap: 6px; }
a.trks-add .kit-ico { width: 18px; height: 18px; }
.trks-lane { margin-left: 6px; }
.trks-pe { margin: 0; display: flex; flex-direction: column; }
.trks-pe > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--lr-card-line); }
.trks-pe > div:first-child { border-top: 0; }
.trks-pe dt { display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 600; min-width: 0; }
.trks-pe dd { margin: 0; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--lr-text); }
.trks-pe-d { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--lr-muted); }
.trks-pe-total { border-top: 2px solid var(--lr-card-line); }
.trks-pe-amt { font: 700 30px/1 var(--lr-display); font-variant-numeric: tabular-nums; color: var(--lr-text); }
.alr-row { flex-wrap: wrap; }
a.alr-name { display: inline-flex; align-items: center; min-height: 44px; }
.alr-how { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--lr-text); }
.alr-how .kit-ico { width: 16px; height: 16px; color: var(--lr-amber); }
.alr-how-off { color: var(--lr-muted); }
.alr-how-off .kit-ico { color: var(--lr-muted); }
.alr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.alr-acts form { margin: 0; }
.alr-form { display: flex; flex-direction: column; gap: 16px; }
.alr-form > .lr-btn { align-self: stretch; }
.alr-chan, .alr-when { margin-top: 4px; }
.alr-bar { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.pfx-sect { display: flex; flex-direction: column; gap: 10px; }
.pfx-sect > * { margin: 0; }
.pfx-sect > .lr-h2 { margin: 0; }
.pfx-lanes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pfx-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.pfx-fs { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pfx-fs:disabled .lr-input { opacity: 0.6; }
.pfx-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pfx-switch p { margin: 0; }
.pfx-toggle { flex: none; position: relative; width: 52px; height: 32px; border-radius: 999px; background: var(--kit-off-bg); box-shadow: inset 0 0 0 1px var(--lr-card-line); opacity: 0.6; }
.pfx-toggle > span { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--lr-muted); }
.pfx-rules, .pfx-notes { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 21px; }
.pfx-notes { color: var(--lr-muted); }
.pfx-push { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--lr-card-line); }
.pfx-push > * { margin: 0; }
/* N3: the phones and computers that get alerts, each with Remove. */
.pfx-devs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pfx-devs > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--lr-card-line); }
.pfx-devs > li:first-child { border-top: 0; }
.pfx-devs > li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pfx-devs form { margin: 0; flex: none; }
.pfx-dev-acts { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
@media (max-width: 380px) { .pfx-devs > li { flex-direction: column; align-items: flex-start; } }
/* The notifications matrix's live boxes (S9 review): the label fills the cell, over its padding, so the target is 44 px
   (48 on phones), not the 20 px box. */
.pfx-hit { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -10px auto; cursor: pointer; }
.pfx-hit input[type="checkbox"] { width: 24px; height: 24px; margin: 0; cursor: pointer; }
.pfx-hit input[type="checkbox"]:disabled { cursor: default; }
@media (max-width: 899px) {
  .lr-shell a.trks-edit, .lr-shell .alr-acts .lr-btn-sm, .lr-shell a.alr-name { min-height: 48px; }
  .pfx-hit { min-width: 48px; min-height: 48px; }
}
/* === end Page: Trucks, saved searches and alerts === */

/* === Page: Drivers & team (S17: carrier_team.html, the Carrier-Account-Team board; shipper_team.html, the shipper rail's
   Team; the invite link's page join.html uses the door pages' classes as they are) =========================================
   Dark carrier app and light shipper portal: the kit's lr-, scr-, kit- and pfx- classes as they are (the avatar is the
   account page's acct-av with the screens' scr-av). A person is a row in a card: the avatar, who they are (name, how they
   sign in, "Can:" in words, the location line, a driver's truck and next load), and the actions (a role picker and Remove
   behind a confirm, whose button is the kit's kit-btn-danger) or their role as a badge. The section heads are the board's small caps labels. The rates switch is a
   real button styled as the prefs page's switch, on in amber (the ink knob) with its state in words beside it (never
   colour alone). Remove confirms inside a details element. New classes only (tm-). */
.tm-sum { margin: 0; }
.tm-sect { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.tm-sect > * { margin: 0; }
.tm-h { margin: 0; font: 600 12px/16px var(--lr-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--lr-muted); }
.tm-h3 { margin: 0; font: 600 18px/22px var(--lr-display); letter-spacing: -0.01em; }
.tm-list { list-style: none; margin: 0; padding: 0; }
.tm-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--lr-card-line); }
.tm-row:first-child { border-top: 0; }
.tm-who { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tm-who > * { margin: 0; overflow-wrap: anywhere; }
.tm-who .kit-ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.tm-loc { display: flex; align-items: flex-start; gap: 4px; color: var(--lr-muted); }
.tm-loc .kit-ico { color: var(--lr-amber); margin-top: 1px; }
.tm-acts { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tm-acts form { margin: 0; }
.tm-role { display: flex; align-items: center; gap: 8px; }
.tm-select { min-height: 44px; width: auto; min-width: 140px; }
.tm-remove { position: relative; }
.tm-remove > summary { list-style: none; }
.tm-remove > summary::-webkit-details-marker { display: none; }
.tm-remove-f { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 12px; max-width: 320px; border-radius: 10px; background: var(--kit-soft);
  box-shadow: inset 0 0 0 1px var(--lr-card-line); }
.tm-remove-f p { margin: 0; }
.tm-card { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.tm-card > * { margin: 0; }
.tm-switch { padding-top: 10px; border-top: 1px solid var(--lr-card-line); }
.tm-switch form { margin: 0; }
button.tm-toggle { flex: none; position: relative; width: 56px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
button.tm-toggle::before { content: ""; position: absolute; left: 2px; right: 2px; top: 6px; height: 32px; border-radius: 999px; background: var(--kit-off-bg);
  box-shadow: inset 0 0 0 1px var(--lr-card-line); }
button.tm-toggle > span { position: absolute; top: 10px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--lr-muted); }
button.tm-toggle-on::before { background: var(--lr-amber); box-shadow: none; }
button.tm-toggle-on > span { left: 26px; background: var(--lr-ink); }
button.tm-toggle:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; border-radius: 999px; }
.tm-pairs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tm-pair { display: flex; flex-direction: column; gap: 6px; }
.tm-pair > * { margin: 0; }
.tm-pair-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tm-pair-top p { margin: 0; }
.tm-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.tm-form > * { margin: 0; }
.tm-form > .lr-btn { align-self: flex-start; }
.tm-roles { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; }
.tm-link > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tm-link > div > * { margin: 0; }
.tm-link-v { width: 100%; font-family: var(--lr-mono); font-size: 16px; } /* 16px: a phone doesn't zoom when it's tapped to copy the link */
.tm-text .kit-soon-why { margin: 0; }
.tm-fs { display: flex; flex-direction: column; gap: 4px; }
.tm-if { font-size: 13px; line-height: 18px; color: var(--lr-muted); white-space: nowrap; }
.tm-roles-t td { text-align: center; position: relative; } /* its hidden words stay inside the scrolling table */
@media (max-width: 899px) {
  .lr-shell .tm-acts .lr-btn-sm, .lr-shell .tm-select { min-height: 48px; }
  button.tm-toggle { height: 48px; }
  button.tm-toggle::before { top: 8px; }
  button.tm-toggle > span { top: 12px; }
  .tm-acts { flex-basis: 100%; }
  .tm-form > .lr-btn { align-self: stretch; }
}
/* A driver's tab bar (carrier_driver_tabs: three or four tabs, the screens a driver's role opens) shares the bar's width
   evenly instead of the five tabs' columns; on a wide screen it's the same rail. */
.lr .shell-tabs.tm-drv-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .lr-shell-carrier .shell-tabs.tm-drv-tabs { grid-auto-flow: row; grid-auto-columns: auto; }
}
/* === end Page: Drivers & team === */

/* === Page: Map (S18: carrier_map.html, carrier_map_list.html, _map.html; the Carrier-Map board) =======================
   The carrier app's Map tab, dark: the map full width under the header with the search, the List button and the layer
   chips over its top, the key and Locate me at its right, the tiles' credit always shown at its bottom left, and the
   Nearby sheet below it (on a wide screen, beside it). The list alone (carrier_map_list.html, and the map page when the
   tiles fail or List is on: data-mode="list") is the same search and sheet on the page's own ground. The kinds differ by
   shape and colour (the markers and the key are the board's), money never shows here, and every target is 44px or more
   (48px for the search and the map's buttons). The page's policy allows styles from this file only: no inline styles.
   New classes only (map-); MapLibre's own classes are themed inside .map. */
.lr .map { position: relative; }
.lr .map > h1 { margin: 0; }
.lr .map-search { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lr .map-q-row { display: flex; gap: 8px; align-items: stretch; }
.lr .map-q { position: relative; flex: 1 1 auto; min-width: 0; }
.lr .map-q > .kit-ico { position: absolute; left: 14px; top: 14px; color: var(--lr-muted); pointer-events: none; }
.lr .map-q-in { height: 48px; padding-left: 42px; background: var(--lr-card); border-color: var(--lr-slate); font-size: 16px; }
.lr a.map-tog {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px 0 12px; border-radius: 10px;
  background: var(--lr-card); color: var(--lr-text); box-shadow: inset 0 0 0 1px var(--lr-slate); font: 600 15px/1 var(--lr-body); text-decoration: none;
}
.lr a.map-tog:hover { color: var(--lr-text); background: var(--lr-ink-3); text-decoration: none; }
.lr .map-layers { margin: 0; padding: 0 0 2px; border: 0; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.lr .map-layers::-webkit-scrollbar { display: none; }
.lr .map-chip { position: relative; flex: none; display: inline-flex; }
.lr .map-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lr .map-chip > span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  background: var(--lr-card); color: var(--lr-text); box-shadow: inset 0 0 0 1px var(--lr-slate); font: 600 14px/1 var(--lr-body);
}
.lr .map-chip input:checked + span { background: var(--lr-amber); color: var(--lr-ink); box-shadow: inset 0 0 0 1px var(--lr-amber); }
.lr .map-chip input:focus-visible + span { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
.lr .map-go { flex: none; min-height: 48px; padding: 0 16px; }
.lr .map-go[hidden] { display: none; }
/* Release 14c: the search's suggestions (map-suggest.js). A panel under the field that floats over whatever is below it
   (the map, the sheet, the list), so nothing moves as it opens; on the map the search rises over the sheet while it has
   focus. Each suggestion is a 48px row: its marker (a place) or a dot (a city, a code), its name and where it is. */
.lr .map[data-mode="map"] > .map-search:focus-within { z-index: 6; }
.lr .map-sug {
  position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 4px); max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--lr-card); border: 1px solid var(--lr-slate); border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
/* (14c review) A phone's keyboard doesn't shrink vh: dvh where the browser has it, and, with the script, the room the
   visual viewport leaves under the field (map-suggest.js sets --sug-max and data-fit as the keyboard opens). */
@supports (height: 1dvh) { .lr .map-sug { max-height: min(60dvh, 440px); } }
.lr .map-sug[data-fit] { max-height: min(var(--sug-max), 440px); }
.lr .map-sug[hidden], .lr .map-sug-list[hidden], .lr .map-sug-none[hidden] { display: none; }
.lr .map-sug-list { list-style: none; margin: 0; padding: 4px; }
.lr .map-sug-opt {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 8px; cursor: pointer; color: var(--lr-text);
}
.lr .map-sug-opt:hover, .lr .map-sug-opt[aria-selected="true"] { background: var(--lr-ink-3); }
.lr .map-sug-opt[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--lr-amber); }
.lr .map-sug-ico { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.lr .map-sug-ico svg { width: 24px; height: 24px; }
.lr .map-sug-opt:not([data-k="place"]) .map-sug-ico::before {
  content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--lr-route-dark); box-shadow: 0 0 0 3px rgba(141, 176, 255, 0.25);
}
.lr .map-sug-opt[data-k="search"] .map-sug-ico::before { border-radius: 2px; background: var(--lr-amber); box-shadow: none; }
.lr .map-sug-b { min-width: 0; display: flex; flex-direction: column; }
.lr .map-sug-l { font-size: 16px; line-height: 21px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr .map-sug-s { font-size: 13px; line-height: 18px; color: var(--lr-muted); overflow-wrap: anywhere; }
.lr .map-sug-none { margin: 0; padding: 12px 14px; font-size: 14px; line-height: 19px; color: var(--lr-muted); }

/* The map, and what sits on it. */
.lr .map-stage { position: relative; height: clamp(320px, 56vh, 560px); background: #131B21; overflow: hidden; }
.lr .map-canvas { position: absolute; inset: 0; }
.lr .map[data-mode="map"] > .map-search {
  position: absolute; z-index: 3; top: 12px; left: 16px; right: 0; pointer-events: none;
}
.lr .map[data-mode="map"] > .map-search > * { pointer-events: auto; }
.lr .map[data-mode="map"] .map-q-row { margin-right: 16px; }
.lr .map[data-mode="map"] .map-layers { padding-right: 16px; }
.lr .map-fabs { position: absolute; z-index: 3; right: 16px; bottom: 44px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.lr .map-fab {
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--lr-card); color: var(--lr-text); box-shadow: inset 0 0 0 1px var(--lr-slate); list-style: none;
}
.lr .map-fab::-webkit-details-marker { display: none; }
.lr .map-locate { color: var(--lr-route-dark); }
.lr .map-keybox { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px; }
.lr .map-keybox[open] > .map-fab { box-shadow: inset 0 0 0 2px var(--lr-amber); }
.lr .map-key {
  margin: 0; padding: 10px 12px; list-style: none; width: 256px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px;
  background: var(--lr-card); border: 1px solid var(--lr-ink-3); border-radius: 12px; font-size: 13px; line-height: 20px;
}
.lr .map-key li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.lr .map-credit {
  position: absolute; z-index: 2; left: 16px; bottom: 16px; margin: 0; max-width: calc(100% - 96px); padding: 1px 6px; border-radius: 6px;
  background: var(--lr-ink); color: var(--lr-mist); font-size: 11px; line-height: 16px;
}
.lr .map-credit a { color: var(--lr-mist); font-weight: 500; }
.lr .map-zoomhint, .lr .map-nojs {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 8px 12px; border-radius: 999px;
  background: var(--lr-ink); color: var(--lr-snow); box-shadow: inset 0 0 0 1px var(--lr-ink-3); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.lr .map-nojs { white-space: normal; width: max-content; max-width: calc(100% - 32px); border-radius: 12px; text-align: center; }
.lr .map-zoomhint[hidden] { display: none; }

/* The Nearby sheet (and the list alone). */
.lr .map-sheet { position: relative; z-index: 4; padding: 12px 0 24px; }
.lr .map[data-mode="map"] > .map-sheet { margin-top: -16px; background: var(--lr-card); border-top: 1px solid var(--lr-ink-3); border-radius: 16px 16px 0 0; }
.lr .map[data-mode="map"] > .map-sheet::before {
  content: ""; display: block; width: 36px; height: 4px; margin: 0 auto 8px; border-radius: 999px; background: var(--lr-slate);
}
.lr .map-sheet > * { margin-left: 16px; margin-right: 16px; }
.lr .map-sheet > .map-list { margin-left: 0; margin-right: 0; }
.lr .map-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.lr .map-sheet-t { min-width: 0; }
.lr .map-h2 { margin: 0; font: 700 24px/26px var(--lr-display); letter-spacing: -0.01em; }
.lr .map-sum { margin: 0; font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .map-sum:empty { display: none; }
.lr .map-sort { position: relative; flex: none; }
.lr .map-sort > summary { list-style: none; }
.lr .map-sort > summary::-webkit-details-marker { display: none; }
.lr .map-sort-m {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 180px; margin: 0; padding: 6px; list-style: none;
  background: var(--lr-ink); border: 1px solid var(--lr-ink-3); border-radius: 12px;
}
.lr .map-sort-m a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--lr-text); font-weight: 500; }
.lr .map-sort-m a:hover { background: var(--lr-ink-3); color: var(--lr-text); text-decoration: none; }
.lr .map-sort-m a[aria-current] { font-weight: 700; box-shadow: inset 3px 0 0 var(--lr-amber); }
.lr .map-drive { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .map-drive .kit-ico { width: 16px; height: 16px; color: var(--lr-warn); }
.lr .map-failed, .lr .map-locmsg {
  margin-top: 4px; margin-bottom: 8px; padding: 10px 12px; border-radius: 10px; background: var(--lr-warn-soft); color: var(--lr-text); font-size: 14px; line-height: 19px;
}
.lr .map-list { margin-top: 8px; }
.lr .map-msg { margin: 8px 16px 0; font-size: 15px; line-height: 21px; color: var(--lr-muted); }
.lr .map-rows, .lr .map-matches { list-style: none; margin: 4px 0 0; padding: 0; }
.lr .map-row { display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--lr-ink-3); }
.lr .map-row[role="button"] { cursor: pointer; }
.lr .map-row[role="button"]:hover { background: rgba(255, 255, 255, 0.03); }
.lr .map-row > .map-ico, .lr .map-row-ico { flex: none; margin-top: 2px; }
.lr .map-row-ico { display: flex; width: 32px; height: 32px; }
.lr .map-row-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lr .map-row-1, .lr .map-row-2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lr .map-row-n { min-width: 0; font-size: 16px; line-height: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr .map-row-mi { flex: none; font: 600 20px/22px var(--lr-display); }
.lr .map-row-2 { font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .map-row-line { min-width: 0; overflow-wrap: anywhere; }
.lr .map-row-dir { flex: none; }
.lr .map-row-3 { font-size: 13px; line-height: 18px; }
.lr .map-row-live { color: var(--lr-muted); }
.lr a.map-match { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border-top: 1px solid var(--lr-ink-3); color: var(--lr-text); font-weight: 400; }
.lr a.map-match:hover { background: rgba(255, 255, 255, 0.03); color: var(--lr-text); text-decoration: none; }
.lr a.map-match .map-row-line { font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .map-note, .lr .map-data { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .map-data a { color: var(--lr-muted); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* The company's active loads (map_loads): each load's reference, lane and status, its stops numbered as the map's amber
   rings number them (a dashed line joins one load's rings on the map), and the person's own truck (the map's blue
   square). A <details> over the Nearby list: its summary is one 48px line, folded while a search's answer is the point. */
.lr .map-loads { margin-top: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--lr-ink-3); }
.lr .map-loads:not([open]) { padding-bottom: 4px; }
.lr .map-loads-s { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; list-style: none; cursor: pointer; }
.lr .map-loads-s::-webkit-details-marker { display: none; }
.lr .map-loads-s > .kit-ico { flex: none; width: 20px; height: 20px; color: var(--lr-muted); }
.lr .map-loads[open] > .map-loads-s > .kit-ico { transform: rotate(90deg); }
.lr .map-loads-s:focus-visible { outline: 2px solid var(--lr-amber); outline-offset: 2px; border-radius: 8px; }
.lr .map-loads-t { margin: 0; min-width: 0; font: 700 18px/24px var(--lr-display); letter-spacing: -0.01em; }
.lr .map-load-list { list-style: none; margin: 0; padding: 0; }
.lr .map-load { padding-top: 8px; }
.lr .map-load + .map-load { margin-top: 8px; border-top: 1px solid var(--lr-ink-3); }
.lr .map-load-1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 14px; line-height: 20px; }
.lr .map-load-1 > a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.lr .map-load-lane { min-width: 0; overflow-wrap: anywhere; }
.lr .map-load-st { color: var(--lr-muted); }
.lr .map-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lr .map-stop { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; }
.lr .map-stop-no {
  flex: none; width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--lr-ink); color: var(--lr-amber); box-shadow: inset 0 0 0 2px var(--lr-amber); font: 700 12px/1 var(--lr-body);
}
.lr .map-stop-l { font-weight: 600; }
.lr .map-stop-p { color: var(--lr-muted); }
.lr .map-truck { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font-size: 14px; line-height: 20px; }
.lr .map-truck > .map-ico { flex: none; }

/* The list alone, and the map page when the tiles fail or List is on. */
.lr .map[data-mode="list"] > .map-stage { display: none; }
.lr .map[data-mode="list"] > .map-search { margin: 12px 16px 0; }
.lr .map-page-list { max-width: 760px; }
.lr .map.map-page-list > .map-search { margin: 16px 0 0; }
.lr .map-page-list > .kit-soon { margin-top: 12px; }
.lr .map-page-list .map-sheet > * { margin-left: 0; margin-right: 0; }
.lr .map-page-list .map-msg { margin-left: 0; margin-right: 0; }
.lr .map-page-list .map-row, .lr .map-page-list a.map-match { padding-left: 0; padding-right: 0; }

/* MapLibre's popup and controls, on the dark ground. */
.lr .map .maplibregl-popup-content {
  padding: 12px 36px 12px 14px; border-radius: 12px; background: var(--lr-card); color: var(--lr-text);
  box-shadow: 0 0 0 1px var(--lr-ink-3); font: 400 14px/19px var(--lr-body);
}
.lr .map .maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .lr .map .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.lr .map .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--lr-card); }
.lr .map .maplibregl-popup-anchor-top .maplibregl-popup-tip, .lr .map .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.lr .map .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--lr-card); }
.lr .map .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--lr-card); }
.lr .map .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--lr-card); }
.lr .map .maplibregl-popup-close-button { width: 44px; height: 44px; color: var(--lr-text); font-size: 22px; }
.lr .map-pop { display: flex; flex-direction: column; gap: 2px; }
.lr .map-pop-n { font-size: 16px; line-height: 21px; }
.lr .map-pop-l, .lr .map-pop-am, .lr .map-pop-src { color: var(--lr-muted); font-size: 13px; line-height: 18px; }

@media (min-width: 900px) {
  /* A wide screen: the map beside its list. */
  .lr .map[data-mode="map"] { display: grid; grid-template-columns: minmax(0, 1fr) 400px; height: calc(100vh - 57px); }
  .lr .map[data-mode="map"] > .map-stage { height: auto; grid-column: 1; grid-row: 1; }
  .lr .map[data-mode="map"] > .map-search { right: 416px; max-width: 720px; }
  .lr .map[data-mode="map"] > .map-sheet {
    grid-column: 2; grid-row: 1; margin: 0; overflow-y: auto; border-top: 0; border-left: 1px solid var(--lr-ink-3); border-radius: 0;
  }
  .lr .map[data-mode="map"] > .map-sheet::before { display: none; }
  .lr .map[data-mode="list"]:not(.map-page-list) { max-width: 760px; margin: 0 auto; }
}
/* === end Page: Map === */

/* === Page: Auto-book (S20: carrier_prefs.html's Auto-book switch, its rules, a pause and the latest auto-booked loads;
   carrier_autobook.html, the rules page; _myloads.html's "Auto-booked by your rules" line on an auto-booked load) ================================================================================
   Dark carrier app: the kit's lr-, scr-, kit- and pfx- classes as they are (the drawn off switch while it opens soon is
   pfx-toggle, as S9 drew it). The live switch is a real control: a 60 x 44 px button (role=switch, aria-checked; 48 px tall
   on phones, the carrier shell's targets) around the board's 52 x 32 px pill, amber with the knob right when on; off or
   paused, the same pill is a link to the rules page, named for what it does (S20 review); the line beside it always says
   On, Off, On, waiting or Paused in words, so the state is never colour alone. A member's read-only switch is the same pill,
   not a control. New classes only (abk-). */
.abk-switch-f { margin: 0; flex: none; }
.lr button.abk-toggle, .lr a.abk-toggle { flex: none; width: 60px; height: 44px; margin: 0 -4px 0 0; padding: 0; border: 0; border-radius: 12px;
  background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.abk-toggle-ro { flex: none; display: flex; align-items: center; justify-content: center; width: 60px; height: 44px; }
.abk-track { position: relative; display: block; width: 52px; height: 32px; box-sizing: border-box; border-radius: 999px;
  background: var(--kit-off-bg); box-shadow: inset 0 0 0 1px var(--lr-slate); }
.abk-knob { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--lr-muted); transition: left 0.15s ease; }
.abk-toggle[aria-checked="true"] .abk-track { background: var(--lr-amber); box-shadow: none; }
.abk-toggle[aria-checked="true"] .abk-knob { left: 24px; background: var(--lr-ink); }
.abk-toggle-ro { opacity: 0.7; }
.abk-paused { margin: 0; }
.abk-busy, .lr .abk-myl { display: flex; align-items: flex-start; gap: 8px; }
.lr .abk-myl .kit-ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--lr-amber); }
.abk-busy .kit-ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--lr-amber); }
.lr a.abk-edit { align-self: flex-start; }
.abk-recent { overflow-wrap: anywhere; }
.abk { display: flex; flex-direction: column; gap: 16px; }
.abk > * { margin: 0; }
.abk-line { overflow-wrap: anywhere; }
.abk-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.abk-sect { display: flex; flex-direction: column; gap: 10px; }
.abk-sect > * { margin: 0; }
.abk-sect > .lr-h2 { margin: 0; }
.lr .abk-err { color: var(--lr-bad); }
.abk-trucks { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; }
.abk-trucks .scr-check { padding-top: 10px; }
.abk-trucks input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 0; }
.abk-acts { display: flex; flex-direction: column; gap: 10px; }
.abk-off { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.abk-off .lr-btn { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .abk-knob { transition: none; } }
/* Phones: the plan's 48 px targets in the carrier shell (S20 review: the switch and the pause's Look at the rules). */
@media (max-width: 899px) {
  .lr-shell button.abk-toggle, .lr-shell a.abk-toggle, .lr-shell .abk-toggle-ro { height: 48px; }
  .lr-shell .abk-paused .lr-alert-link { min-height: 48px; }
}
/* === end Page: Auto-book === */

/* === Page: Account, Download your data (C2: account.html's #data, for every account; the carrier app's own is its
   Data & privacy page, priv-). The kit's .scr-check, .scr-hint, .kit-strong and .brd-rows/.brd-row are used as they are;
   new classes only (acct-dl-). */
.lr .acct-dl-scopes { margin: 0; padding: 0; border: 0; min-width: 0; }
.lr .acct-dl-scopes legend { padding: 0; margin-bottom: 2px; }
.lr .acct-dl-form > .lr-btn { margin-top: 14px; }
.lr .acct-dl-list { margin-top: 12px; }
/* === end Page: Account, Download your data === */

/* === Page: Factored invoices (F1: _shippay.html's shp_factored on shipper_invoice.html). Light shipper portal; new classes
   only (none shared restyled): whom to pay when LaneRally assigned an invoice to its factor (the factor's remit-to from
   LaneRally's environment, the number to check it at), and the assignment notice. Money in ink. */
.lr .shp-fac-card { margin-top: 16px; scroll-margin-top: 16px; }
.lr .shp-fac-card .shp-refs .lr-mono { overflow-wrap: anywhere; }
.lr .shp-fac-notice { margin-top: 12px; }
.lr .shp-fac-notice > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; overflow-wrap: anywhere; }
.lr .shp-fac-body { font-size: 14px; line-height: 21px; overflow-wrap: break-word; }
@media (max-width: 899px) {
  .lr .shp-fac-notice > summary { min-height: 48px; }
}
/* === end Page: Factored invoices === */

/* === Page: Days to pay (F2: _kit.html's broker_pay and slow_payer on the board's cards, Carrier-Load and the Book sheet;
   carrier_myload.html's #paid with Report not paid and a dispute's state (myl_pay_review); carrier_pay.html's Payment
   history rows) =====================================================================================================
   Dark carrier app (the kit's lr-badge-warn, kit-pay, kit-small and the lr-btn as they are). The Slow payer mark sits on
   the pay line and wraps under it on a narrow card; Report not paid is a second short form under Mark paid. New classes
   only (kit-slow, kit-slow-why, myl-unpaid, myl-unpaid-f, myl-review; F2 review: myl-unpaid-q, myl-unpaid-d). */
.lr .kit-pay .kit-slow { margin-left: 4px; vertical-align: 1px; }
.lr .kit-slow-why { margin: 6px 0 0; }
.lr .myl-unpaid { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; color: var(--lr-warn); }
.lr .myl-unpaid .lr-ico { flex: none; margin-top: 1px; }
.lr .myl-review { margin: 6px 0 0; }
.lr .myl-review .kit-small { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.lr .myl-review .lr-ico { flex: none; margin-top: 1px; }
.lr .myl-unpaid-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.lr .myl-unpaid-f > .kit-small { flex: 1 1 100%; margin: 0; }
.lr .pay-rows .myl-unpaid-f { flex-basis: 100%; }
.lr .pay-rows .myl-unpaid-f > .kit-small { flex: 1 1 200px; order: 2; }
/* F2 review: Report not paid opens a short confirm (a disclosure with a required tick) rather than filing on one tap; an
   outside broker's pay line sits under the broker of record on My Loads' card and page (myl_broker_pay, the kit's kit-pay). */
.lr .myl-unpaid-q { margin: 12px 0 0; }
.lr .myl-unpaid-d { margin-top: 12px; }
.lr .pay-rows .myl-unpaid-d { flex-basis: 100%; margin-top: 8px; }
.lr .myl-unpaid-d > summary { list-style: none; cursor: pointer; }
.lr .myl-unpaid-d > summary::-webkit-details-marker { display: none; }
.lr .myl-unpaid-d > summary:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
.lr .myl-unpaid-d .myl-unpaid-f { margin-top: 8px; padding: 4px 12px 12px; max-width: 420px; border-radius: 10px; background: var(--kit-soft); }
.lr .myl-unpaid-d .scr-check { padding-top: 8px; }
@media (max-width: 899px) { .lr .myl-unpaid-d > summary { min-height: 48px; } }
/* === end Page: Days to pay === */

/* === Page: Canada and border loads (CA1: the kit's rate_block USD label and border_tag on the board's cards and the Book
   sheet; carrier_load.html's Border crossing section (#border); carrier_company.html's Canada & border loads card
   (#canada)). Dark carrier app and light shipper portal alike: the kit's own tokens, no shared class restyled. New classes
   only (kit-rate-cur, kit-border, brd-border-dl, doc-border, doc-border-row, doc-border-flags). Money stays the text
   colour: the USD label is muted, never the good colour. */
.lr .kit-rate-cur { margin-top: 2px; font: 600 11px/14px var(--lr-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--lr-muted); }
.lr .kit-rate-cur abbr { text-decoration: none; border: 0; }
.lr .kit-border { gap: 4px; }
.lr .kit-border .lr-ico { width: 14px; height: 14px; }
.lr .brd-border-dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.lr .brd-border-dl dt { font-size: 13px; line-height: 18px; color: var(--lr-muted); }
.lr .brd-border-dl dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.lr .doc-border { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.lr .doc-border-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
.lr .doc-border-flags { margin: 0; padding: 0; border: 0; min-width: 0; }
.lr .doc-border-flags legend { padding: 0; }
.lr .doc-border .lr-btn { align-self: flex-start; }
@media (max-width: 599px) {
  .lr .doc-border-row, .lr .brd-border-dl { grid-template-columns: minmax(0, 1fr); }
}
/* === end Page: Canada and border loads === */

/* === Page: Native app pieces (N1: in one of the LaneRally apps, carrier_account.html's App settings row, a button the
   app's bridge answers; the kit's upload_control's Scan POD, a button in Take a photo's place on carrier_pod.html; the
   Delete my account card on carrier_privacy.html uses the privacy page's own classes; My Loads' New test load for testers).
   New classes only (ca-row-btn, up-scan, myl-testload): the shared classes are not restyled. Dark carrier app. */
.lr button.ca-row-btn {
  width: 100%; min-height: 60px; margin: 0; padding: 10px 12px 10px 14px; display: flex; align-items: center; gap: 12px;
  border: 0; background: transparent; color: var(--lr-text); font: inherit; font-weight: 400; text-align: left; cursor: pointer;
}
.lr button.ca-row-btn:hover { background: var(--kit-soft); }
.lr button.ca-row-btn:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: -3px; }
.lr button.up-scan {
  min-height: 48px; margin: 0; padding: 0 16px; align-self: flex-start; border: 0; border-radius: 10px; background: transparent;
  color: var(--lr-text); box-shadow: inset 0 0 0 1px var(--lr-btn2-line); font-family: var(--lr-body); cursor: pointer;
}
.lr button.up-scan:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
/* My Loads' New test load (testers only): the button and its line, wrapping on a phone. */
.lr .myl-testload { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* === end Page: Native app pieces === */

/* === Page: Delete a LaneRally account (N1: account_deletion.html, the signed-out form at /account-deletion, on the sign-in
   doors' light layout). New classes only: the list of what happens (a padded row each, on the shared lr-list card) and
   the confirm box's spacing (on sign-up's su-consent-box). */
.del-list > li { padding: 10px 14px; font-size: 14px; line-height: 20px; }
.del-list + p, .door-form .del-list + .lr-field { margin-top: 16px; }
.del-check { margin: 16px 0; }
/* === end Page: Delete a LaneRally account === */

/* === Page: Season sentences (SC4: _quotes.html's sq_season on shipper_quote.html and shipper_quote_result.html, the
   approved sentence of a season that raised a shipper's price; site_quote.html's siteq-season, the same on the website's
   instant quote; carrier_search.html's olk card, On your lanes in the dark carrier app). New classes only (sq-season,
   siteq-season, olk-): the shared ones (lr-card, lr-h2, kit-, site-ico) are used as they are. The sentence is plain text in
   the body color, beside a calendar icon in the muted color: never a pill, never green, never amber text. */
.lr .sq-season, .lr .siteq-season { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 15px; line-height: 1.45; max-width: 60ch; }
.lr .sq-season .kit-ico, .lr .siteq-season .site-ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--lr-muted); }
.lr .olk { display: flex; flex-direction: column; gap: 12px; }
.lr .olk > * { margin: 0; }
.lr .olk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.lr .olk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lr .olk-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-top: 1px solid var(--lr-card-line); }
.lr .olk-item:first-child { border-top: 0; padding-top: 0; }
.lr .olk-item > .kit-ico { flex: none; margin-top: 2px; color: var(--lr-muted); }
.lr .olk-item p { margin: 0; overflow-wrap: anywhere; }
.lr .olk-lane { font-size: 15px; }
.lr .olk-say { margin-top: 4px; font-size: 15px; line-height: 1.45; }
/* === end Page: Season sentences === */

/* === Page: Pending capacity (MI13: _quotes.html's sq_confirm under a price in pending-capacity mode, on shipper_quote.html,
   shipper_quote_result.html and shipper_checkout.html; _shipments.html's shp_capacity card on shipper_shipment.html: the
   truck confirmed by when, then confirmed, or the shipper's choices). New classes only (sq-confirm, shp-cap-): the shared
   ones (lr-card, lr-h2, lr-btn, kit-) are used as they are. Plain text beside a muted icon, as the season sentence is;
   the choices wrap on a phone, each a full-size button. */
.lr .sq-confirm { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 15px; line-height: 1.45; max-width: 60ch; }
.lr .sq-confirm .kit-ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--lr-muted); }
.lr .shp-cap { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.lr .shp-cap > p { margin: 0; }
.lr .shp-cap-t { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.45; }
.lr .shp-cap-t .kit-ico { flex: none; margin-top: 1px; color: var(--lr-muted); }
.lr .shp-cap-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
/* === end Page: Pending capacity === */

/* === Page: On-time delivery (MI14: _ontime.html's ot_breakdown on carrier_load.html, carrier_book.html, carrier_offer.html
   and carrier_myload.html; ot_status on My Loads' cards and a load's page; the board card's "incl. on-time" note) ========
   On the carrier app's dark ground. A carrier rate as its items is a definition list in two columns (the item and its
   words on the left, the amount on the right, tabular), the totals after a rule; money stays in ink, never green (the
   on-time item is plain ink like the rest; "Total if late" muted). The status line holds the kit's status pill; the
   dispute form sits in a disclosure, its button full width (thumb-first). Classes otp- only. */
.lr .otp-pay { margin-top: 12px; }
.lr .otp-items { margin: 8px 0 0; padding: 0; }
.lr .otp-items > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--lr-card-line); }
.lr .otp-items > div:first-child { border-top: 0; }
.lr .otp-items dt { min-width: 0; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.lr .otp-items dd { margin: 0; flex: none; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.lr .otp-d { display: block; font-size: 12px; line-height: 16px; color: var(--lr-muted); }
.lr .otp-on dt { font-weight: 600; }
.lr .otp-total { border-top: 2px solid var(--lr-card-line) !important; }
.lr .otp-total dt, .lr .otp-total dd { font-weight: 600; }
.lr .otp-late dt, .lr .otp-late dd { color: var(--lr-muted); }
.lr .otp-pay > .kit-small { margin-top: 8px; }
.lr .otp-note { margin: 4px 0 0; }
.lr .otp-status { margin-top: 10px; }
.lr .otp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.lr .otp-status > p + p { margin-top: 4px; }
.lr .otp-risk { display: flex; gap: 6px; align-items: flex-start; }
.lr .otp-dispute { margin-top: 12px; }
.lr .otp-dispute > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--lr-link); }
.lr .otp-dispute > summary:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
/* === end Page: On-time delivery === */

/* === Page: Live parking on the map (MP1: _map.html's map_row and carrier_map.html's popup and row template) =============
   On the carrier app's dark ground. A rest area a state's feed covers carries a dot before its live status (the words always
   say it too: a dot is never the only signal): good for spaces available and trucks can park, warn for filling up, bad for
   full and closed, muted for no live data and no truck parking. Under it, the state's credit (muted) and the link to the
   state's own page, each its own 44px target when it's a link. Classes map-row-4, map-row-cr, map-row-site, map-pop-cr,
   map-pop-site and the data-pk dot only. */
.lr .map-row-3[data-pk]::before, .lr .map-pop-live[data-pk]::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 999px; vertical-align: 1px;
  background: var(--lr-muted);
}
.lr .map-row-3[data-pk="open"]::before, .lr .map-row-3[data-pk="yes"]::before,
.lr .map-pop-live[data-pk="open"]::before, .lr .map-pop-live[data-pk="yes"]::before { background: var(--lr-good); }
.lr .map-row-3[data-pk="low"]::before, .lr .map-pop-live[data-pk="low"]::before { background: var(--lr-warn); }
.lr .map-row-3[data-pk="full"]::before, .lr .map-row-3[data-pk="closed"]::before,
.lr .map-pop-live[data-pk="full"]::before, .lr .map-pop-live[data-pk="closed"]::before { background: var(--lr-bad); }
.lr .map-row-3[data-pk] .map-row-live { color: var(--lr-text); }
.lr .map-row-4 { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; font-size: 12px; line-height: 16px; }
.lr .map-row-cr, .lr .map-pop-cr { color: var(--lr-muted); }
.lr a.map-row-cr, .lr a.map-pop-cr { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.lr a.map-row-cr, .lr a.map-row-site { display: inline-flex; align-items: center; min-height: 44px; }
.lr a.map-row-site, .lr a.map-pop-site { font-weight: 600; }
.lr .map-pop-cr { font-size: 12px; line-height: 16px; }
.lr .map-pop-site { font-size: 13px; line-height: 18px; }
.lr a.map-pop-cr, .lr a.map-pop-site { display: inline-flex; align-items: center; min-height: 44px; }
/* === end Page: Live parking on the map === */

/* === Page: Partner portal (P1: partner_home.html, /partner) ==================================================================
   Light, phone first, like the shipper portal. The company card, the kit's alerts and KPIs (.scr-kpis) and its opens-soon
   state carry the page; these only space them and set the "How partnering works" list. Classes pt- only. */
.lr .pt-home > .scr-kpis, .lr .pt-home > .kit-soon, .lr .pt-home > .lr-card + .lr-card { margin-top: 12px; }
.lr .pt-how .lr-h2 { margin: 0 0 8px; }
.lr .pt-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 22px; }
/* The partner door's card on the sign-in chooser (P1; LG1: always listed, the Partners card). */
.door-ico-partner { background: var(--lr-paper); border: 1px solid var(--lr-line-light); color: var(--lr-ink); }
/* === end Page: Partner portal === */
/* === Page: Partner portal: account and team (P4: partner_account.html, partner_team.html; the links on partner_home.html)
   Light, phone first, like the shipper portal. The company card (co-), the kit's cards, alerts and badges, and the S17
   team kit (tm-) carry the pages as they are; these only space the account's sections and set its term lists. Classes pt-
   only. */
.lr .pt-acct > .lr-card + .lr-card, .lr .pt-acct > .kit-soon { margin-top: 12px; }
/* The links between the partner's pages (Home, Account, Team, Your login): the portal has no tab bar, so these are the way
   between them, and each is a full-size target (P4 review): 44px on a desktop, 48px on a phone, spaced, never inline text. */
.lr .pt-links { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
.lr .pt-links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 15px; }
.lr .pt-sec { display: flex; flex-direction: column; gap: 8px; }
.lr .pt-sec > * { margin: 0; }
.lr .pt-sec .lr-h2 { margin: 0; }
.lr .pt-kv { margin: 0; display: grid; gap: 6px; }
.lr .pt-kv > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 2px 12px; }
.lr .pt-kv dt { color: var(--lr-muted); font-size: 14px; line-height: 20px; }
.lr .pt-kv dd { margin: 0; font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.lr .pt-terms { padding-top: 10px; border-top: 1px solid var(--lr-card-line); display: flex; flex-direction: column; gap: 6px; }
.lr .pt-terms > * { margin: 0; }
@media (max-width: 559px) {
  .lr .pt-kv > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .lr .pt-links a { min-height: 48px; min-width: 48px; }
}
/* === end Page: Partner portal: account and team === */
/* === Page: Partner invite (P4: partner_invite.html, /invite/partner/{token} and its emailed step) =============================
   The door pages' classes (door-, fp-, su-consent-box, su_legal) as they are; these set the partner agreement's text box
   (scrolls, keyboard reachable: tabindex and a region label) and its DRAFT line. Classes pi- only. */
.pi-agree { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; }
.pi-agree > * { margin: 0; }
.pi-agree .lr-h2 { margin: 0; }
.pi-draft { font-size: 14px; line-height: 20px; }
.pi-text { max-height: 260px; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--lr-card-line); border-radius: 10px; background: var(--lr-card);
  font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.pi-text p { margin: 0 0 10px; }
.pi-text:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
.pi-certify { margin-top: 4px; }
.pi-terms { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--lr-card-line); }
.pi-terms > * { margin: 0; }
.pi-terms-h { font-weight: 600; font-size: 15px; line-height: 20px; }
.pi-kv { margin: 0; display: grid; gap: 4px; font-size: 14px; line-height: 20px; }
.pi-kv > div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 2px 12px; }
.pi-kv dt { color: var(--lr-muted); }
.pi-kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 559px) {
  .pi-kv > div { grid-template-columns: minmax(0, 1fr); }
}
/* === end Page: Partner invite === */
/* === Page: Partner portal: shippers (P5: partner_shippers.html, partner_submit.html; the Shippers link and the submit card
   on partner_home.html)
   Light, phone first, like the shipper portal. The kit's cards, alerts, badges, fields (lr-, kit-, scr-) and P4's pt-links
   carry the pages as they are; these only lay out a shipper's row (its % on the right), the sign-up link and the submit
   form's two-column city and state. Classes pt- only. P5 review: the sign-up link's box keeps the 16px font (iOS zooms a
   smaller field on focus), ending in an ellipsis; the submit form's note is a real text area (the kit's lr-input is a
   52px single line). */
.lr .pt-ships > .lr-card + .lr-card, .lr .pt-ships > .pt-sect, .lr .pt-ships > .pt-sect + .lr-card, .lr .pt-ships > .lr-alert, .lr .pt-submit > .lr-card { margin-top: 12px; }
.lr .pt-sect { display: flex; flex-direction: column; gap: 8px; }
.lr .pt-sect > * { margin: 0; }
.lr .pt-list-rows { list-style: none; margin: 0; padding: 0; }
.lr .pt-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.lr .pt-row + .pt-row { border-top: 1px solid var(--lr-card-line); }
.lr .pt-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lr .pt-row-main > * { margin: 0; overflow-wrap: anywhere; }
.lr .pt-row-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.lr .pt-pct { font-size: 22px; line-height: 28px; font-weight: 700; }
.lr .pt-empty { margin: 0; padding: 14px 16px; }
.lr .pt-link { font-size: 16px; text-overflow: ellipsis; }
.lr .pt-note { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 22px; }
.lr .pt-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 8rem); gap: 0 12px; }
.lr .pt-state { text-transform: uppercase; }
.lr .pt-certify { margin-top: 8px; }
.lr .pt-inline-link { display: inline-flex; align-items: center; min-height: 44px; margin-left: 12px; }
@media (max-width: 559px) {
  .lr .pt-two { grid-template-columns: minmax(0, 1fr); }
  .lr .pt-row { padding: 12px 14px; }
}
@media (max-width: 899px) {
  .lr .pt-inline-link { min-height: 48px; }
}
/* === end Page: Partner portal: shippers === */
/* === Page: Partner portal: loads (P7: partner_loads.html; the home's money figures, Needs you and Loads card on
   partner_home.html; each shipper's loads line on partner_shippers.html)
   Light, phone first, like the shipper portal. The kit's cards, badges, fields, KPIs and status pills (lr-, kit-, scr-),
   P4's pt-links and P5's pt-list-rows, pt-empty and pt-inline-link carry the pages as they are; these only lay out a
   load's card (its number and stage pill on one line, then its facts as label and value), the number search's field and
   button side by side, the filter line, the home's Needs you items and its money KPIs (a smaller figure, so a dollar
   amount or a date fits a phone's half-width cell), and the shippers' loads line. Classes pt- only. */
.lr .pt-loads > .lr-card, .lr .pt-loads > .pt-filter, .lr .pt-loads > .pt-more, .lr .pt-loads > .pt-list-rows { margin-top: 12px; }
.lr .pt-find .lr-field { margin-top: 0; }
.lr .pt-find .lr-field > .lr-small { margin: 0; }
.lr .pt-find-row { display: flex; gap: 8px; align-items: stretch; }
.lr .pt-find-row > .lr-input { flex: 1 1 auto; min-width: 0; }
.lr .pt-find-row > .lr-btn { flex: none; }
.lr .pt-filter { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.lr .pt-filter .pt-inline-link { margin-left: 8px; }
.lr .pt-load { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.lr .pt-load + .pt-load { border-top: 1px solid var(--lr-card-line); }
.lr .pt-load > * { margin: 0; }
.lr .pt-load-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.lr .pt-load-stage { margin-left: auto; }
.lr .pt-load-lane { overflow-wrap: anywhere; }
.lr .pt-load-kv { margin: 0; display: grid; gap: 4px; }
.lr .pt-load-kv > div { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 2px 12px; }
.lr .pt-load-kv dt { color: var(--lr-muted); font-size: 14px; line-height: 20px; }
.lr .pt-load-kv dd { margin: 0; font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.lr .pt-load-kv dd .lr-badge { white-space: normal; }
.lr .pt-block { display: block; margin-top: 2px; }
.lr .pt-more { margin: 0; }
.lr .pt-home > .pt-needs, .lr .pt-home > .pt-kpi-note, .lr .pt-home > .scr-kpis + .lr-card, .lr .pt-home > .pt-kpi-note + .lr-card { margin-top: 12px; }
.lr .pt-need { padding: 10px 0; display: flex; flex-direction: column; gap: 2px; }
.lr .pt-need:last-child { padding-bottom: 0; }
.lr .pt-need + .pt-need { border-top: 1px solid var(--lr-card-line); }
.lr .pt-need > * { margin: 0; overflow-wrap: anywhere; }
.lr .pt-need .pt-inline-link { margin-left: 0; }
.lr .pt-kpis dd { font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; }
.lr .pt-kpi-note { margin: 0; }
.lr .pt-ship-loads { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.lr .pt-ship-loads .pt-inline-link { margin-left: 8px; }
.lr .pt-ship-loads .pt-inline-link, .lr .pt-filter .pt-inline-link { font-size: 15px; }
@media (max-width: 559px) {
  .lr .pt-load { padding: 12px 14px; }
  .lr .pt-load-kv > div { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); }
}
/* === end Page: Partner portal: loads === */
/* === Page: Partner portal: quotes (P8: partner_quotes.html, partner_book.html; the Quotes links and card on the partner's
   home, Shippers and Loads pages)
   Light, phone first, like the shipper portal. The kit's cards, alerts, badges, fields and checks (lr-, kit-, scr-), P4's
   pt-links, P5's pt-list-rows, pt-two, pt-note and pt-empty, and P7's quote-shaped load card (pt-load, pt-load-kv) carry the
   pages as they are; these only space the ask form and the checkout, set the equipment choices in a row that wraps, the
   price's figure, and a quote's two actions side by side (each a full-size target). Classes pt-q only. */
.lr .pt-quotes > .lr-card, .lr .pt-quotes > .lr-alert, .lr .pt-quotes > .pt-list-rows, .lr .pt-quotes > .pt-more { margin-top: 12px; }
.lr .pt-q-form { display: flex; flex-direction: column; gap: 4px; }
.lr .pt-q-form > .lr-h2 { margin: 0; }
.lr .pt-q-form > p { margin: 0; }
.lr .pt-q-equip { margin: 8px 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.lr .pt-q-equip legend { padding: 0; margin-bottom: 4px; font-size: 14px; font-weight: 600; }
.lr .pt-q-price { font-size: 18px; line-height: 24px; font-weight: 700; }
.lr .pt-q-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lr .pt-q-acts > form { margin: 0; }
.lr .pt-q-acts .lr-btn { min-height: 44px; }
@media (max-width: 899px) {
  .lr .pt-q-acts .lr-btn { min-height: 48px; }
}
/* === end Page: Partner portal: quotes === */
/* === Page: Partner portal: statements and questions (P11: partner_statements.html, partner_statement.html,
   partner_statement_print.html, partner_questions.html; the Statements links and card on partner_home.html, the data card
   on partner_account.html and "Question this line" on partner_loads.html)
   Light, phone first, like the shipper portal. The kit's cards, alerts, badges, fields and KPIs (lr-, kit-, scr-), P4's
   pt-links and pt-sec, P5's pt-list-rows, pt-note and pt-empty, and P7's load card (pt-load, pt-load-kv) carry the pages as
   they are; these only space the pages, set a statement's actions in a row that wraps (each a full-size target) and a
   question's words. Classes pt-st and pt-qa only. */
.lr .pt-st > .lr-card, .lr .pt-st > .scr-kpis, .lr .pt-st > .pt-kpi-note, .lr .pt-st > .pt-list-rows, .lr .pt-st > .pt-st-dl { margin-top: 12px; }
.lr .pt-st-dl { margin: 0; }
.lr .pt-st-link { display: inline-flex; align-items: center; min-height: 44px; }
.lr .pt-st-actions { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lr .pt-st-actions .lr-btn, .lr .pt-st-dl .lr-btn { min-height: 44px; }
.lr .pt-st-doc { padding: 16px; overflow-x: auto; }
.lr .pt-qa-list { margin: 4px 0 0; }
.lr .pt-qa-row { padding: 12px 0; display: flex; flex-direction: column; gap: 4px; }
.lr .pt-qa-row + .pt-qa-row { border-top: 1px solid var(--lr-card-line); }
.lr .pt-qa-list.lr-card .pt-qa-row { padding: 12px 16px; }
.lr .pt-qa-row > * { margin: 0; overflow-wrap: anywhere; }
.lr .pt-qa-text { white-space: pre-line; font-size: 15px; line-height: 22px; }
@media (max-width: 899px) {
  .lr .pt-st-link, .lr .pt-st-actions .lr-btn, .lr .pt-st-dl .lr-btn { min-height: 48px; }
}
/* === end Page: Partner portal: statements and questions === */
/* === Partner statement (P11: the statement the monthly run renders once and keeps, partners.statementHTML: on
   partner_statement.html and its print view; style.css draws the staff's copy with its own tokens)
   Light: ink on paper, money in ink (never green), tabular figures. A load is a small table (its line, number, lane and
   delivery as the caption; each cost with its date; the net and the partner's share), each shipper's loads and changes
   together with its total. On a phone the table keeps its three columns at a smaller size and wraps its words; the print
   view prints without the portal's header and its link back. Classes pst- only. */
.lr .pst { display: flex; flex-direction: column; gap: 12px; color: var(--lr-ink); font-size: 15px; line-height: 22px; }
.lr .pst > *, .lr .pst p { margin: 0; }
.lr .pst-test { padding: 8px 12px; border: 2px solid var(--lr-ink); border-radius: 8px; font-weight: 700; }
.lr .pst-from { color: var(--lr-muted); font-size: 14px; line-height: 20px; }
.lr .pst-title { margin: 0; font-size: 20px; line-height: 26px; }
.lr .pst-sub { color: var(--lr-muted); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.lr .pst-sum { margin: 0; display: grid; gap: 4px; }
.lr .pst-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--lr-card-line); }
.lr .pst-sum dt { color: var(--lr-muted); }
.lr .pst-sum dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.lr .pst-bal dt, .lr .pst-bal dd, .lr .pst-pay dt, .lr .pst-pay dd { color: var(--lr-ink); font-weight: 700; }
.lr .pst-note { font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.lr .pst-ship { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 2px solid var(--lr-card-line); }
.lr .pst-ship-h { margin: 0; font-size: 17px; line-height: 24px; overflow-wrap: anywhere; }
.lr .pst-load { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.lr .pst-load caption { text-align: left; font-weight: 600; padding: 0 0 4px; overflow-wrap: anywhere; }
.lr .pst-load th, .lr .pst-load td { padding: 4px 0; border-top: 1px solid var(--lr-card-line); vertical-align: top; }
.lr .pst-load th { font-weight: 400; text-align: left; padding-right: 8px; overflow-wrap: anywhere; }
.lr .pst-on { color: var(--lr-muted); white-space: nowrap; width: 7.5rem; }
.lr .pst-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 7rem; }
/* P11 review: a cost's date and its amount never touch (on a phone the columns size to their words): these side paddings
   outrank the cells' shared padding above. */
.lr .pst-load td.pst-on { padding-right: 12px; }
.lr .pst-load td.pst-amt { padding-left: 12px; }
.lr .pst-net th, .lr .pst-net td, .lr .pst-earn th, .lr .pst-earn td { font-weight: 600; }
.lr .pst-earn th, .lr .pst-earn td { border-top: 2px solid var(--lr-card-line); }
.lr .pst-num { font-family: var(--lr-mono, ui-monospace, monospace); }
.lr .pst-ship-total { text-align: right; overflow-wrap: anywhere; }
.lr .pst-none { color: var(--lr-muted); }
.lr .pst-foot { display: flex; flex-direction: column; gap: 4px; color: var(--lr-muted); font-size: 13px; line-height: 19px; }
.lr .pst-print-bar { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.lr .pst-paper { background: var(--lr-card); border: 1px solid var(--lr-card-line); border-radius: 12px; padding: 20px; }
@media (max-width: 559px) {
  .lr .pst-on { width: auto; font-size: 13px; }
  .lr .pst-amt { width: auto; }
  .lr .pst-paper, .lr .pt-st-doc { padding: 12px; }
}
@media print {
  .lr:has(.pst-print) .lr-top, .lr .pst-print-bar { display: none !important; }
  .lr:has(.pst-print) { background: #FFFFFF; }
  .lr .pst-paper { border: 0; padding: 0; }
  .lr .pst, .lr .pst-from, .lr .pst-sub, .lr .pst-on, .lr .pst-foot, .lr .pst-sum dt { color: #000000; }
}
/* === end Partner statement === */
/* === Partner portal: a statement's payout (P12: partner_statement.html's line above the statement as issued: when and where
   it was paid)
   Light. The kit's alert (lr-alert, lr-alert-good) as it is; this only spaces it on the statement's page. Class pt-st-paid
   only. */
.lr .pt-st > .pt-st-paid { margin-top: 12px; }
.lr .pt-st-paid p { overflow-wrap: anywhere; }
/* === end Partner portal: a statement's payout === */
/* === Page: Shipper portal: partner (P8: shipper_partner.html, /shipper/partner; the partner card on shipper_home.html)
   Light, the kit's cards, buttons and checks as they are; these only space each partner's section, lay out a consent's
   words beside its button (stacking on a phone), and the intro question's two answers. Classes sp- only. */
.lr .sp-partner > .lr-card, .lr .sp-partner > p { margin-top: 12px; }
.lr .sp-sec { display: flex; flex-direction: column; gap: 10px; }
.lr .sp-sec > * { margin: 0; }
.lr .sp-sec .lr-h2 { margin: 0; }
.lr .sp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--lr-card-line); }
.lr .sp-row > div > p { margin: 0; }
.lr .sp-row > form { flex: none; margin: 0; }
.lr .sp-ask { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--lr-card-line); }
.lr .sp-ask > p { margin: 0; }
.lr .sp-acts { display: flex; gap: 8px; }
.lr .sp-places { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--lr-card-line); }
.lr .sp-places fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 2px; }
.lr .sp-places legend { padding: 0; margin-bottom: 4px; }
.lr .sp-card { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.lr .sp-card > * { margin: 0; }
@media (max-width: 559px) {
  .lr .sp-row { flex-direction: column; align-items: flex-start; }
}
/* === end Page: Shipper portal: partner === */
/* === Page: Partner portal: earnings, help and notices (P13: partner_earnings.html, partner_help.html; the % history and
   Notices sections of partner_account.html; the Earnings and Help links on partner_home.html)
   Light, phone first, like the shipper portal. The kit's cards, badges, checks, buttons and KPIs (lr-, kit-, scr-), P4's
   pt-links, pt-sec, pt-kv and pt-terms, P1's pt-list, P5's pt-list-rows, pt-sect and pt-empty, and P7's load card (pt-load,
   pt-load-kv, pt-kpis) carry the pages as they are; these only space the pages, set a shipper's % history as one record a
   row, and the notices' choice as a fieldset with no box. Classes pt-help, pt-earn, pt-hist and pt-not only. */
.lr .pt-help > .lr-card, .lr .pt-earn > .scr-kpis, .lr .pt-earn > .pt-kpi-note, .lr .pt-earn > .pt-sect, .lr .pt-earn > p { margin-top: 12px; }
.lr .pt-hist-steps { margin: 0; }
.lr .pt-hist-step { padding: 8px 0; overflow-wrap: anywhere; }
.lr .pt-hist-step + .pt-hist-step { border-top: 1px solid var(--lr-card-line); }
.lr .pt-not-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.lr .pt-not-set { margin: 0; padding: 0; border: 0; }
.lr .pt-not-set legend { padding: 0; overflow-wrap: anywhere; }
.lr .pt-not-form .lr-btn { align-self: flex-start; min-height: 44px; }
.lr .pt-not-off { overflow-wrap: anywhere; } /* (P13 review: why the notices show in the portal only) */
.lr .pt-help-link { margin-left: 0; }
@media (max-width: 899px) {
  .lr .pt-not-form .lr-btn { min-height: 48px; }
}
/* === end Page: Partner portal: earnings, help and notices === */
/* === Page: Partner portal: agreement (P14: partner_agreement.html, /partner/agreement; its link on partner_account.html)
   Light, phone first, like the shipper portal. The kit's cards, badges, alerts and buttons (lr-, kit-, scr-), P4's pt-links
   and pt-sec, and the door pages' su-consent-box carry the page as they are; these space it and set the agreement's text box
   (scrolls inside itself, keyboard reachable: tabindex and a region label, as on the invite's step page) and its DRAFT line.
   Classes pt-agr only. */
.lr .pt-agr > .lr-card, .lr .pt-agr > .lr-alert { margin-top: 12px; }
.lr .pt-agr-draft { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.lr .pt-agr-text { max-height: 420px; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--lr-card-line); border-radius: 10px;
  background: var(--lr-card); font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.lr .pt-agr-text p { margin: 0 0 10px; }
.lr .pt-agr-text:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
.lr .pt-agr-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.lr .pt-agr-form .lr-btn { align-self: flex-start; min-height: 44px; }
@media (max-width: 899px) {
  .lr .pt-agr-text { max-height: 360px; }
  .lr .pt-agr-form .lr-btn { min-height: 48px; }
}
/* === end Page: Partner portal: agreement === */
/* === Page: Terms at sign-in (L1: account_terms.html, /account/terms) ======================================================
   Where a sign-in as a company that owes LaneRally's Terms of Service in force goes first (testers only while the version
   is a draft); never a block: Not now goes on to the home. In the shell of the role the session works as (dark in the
   carrier app, light elsewhere), so every colour is the theme's own token. The kit's cards, badges, alerts and buttons and
   the door pages' su-consent-box carry the page as they are; these space it, set the terms' text box (it scrolls inside
   itself, keyboard reachable: tabindex and a region label), mark the clause a "Read the clause" link opens, and lay out the
   two actions. Classes tsi only, and the account page's reminder (acct-terms: L1 review, its link's phone size). */
.lr .tsi > .lr-card, .lr .tsi > .lr-alert { margin-top: 12px; }
.lr .tsi-sec > p + p { margin-top: 8px; }
.lr .tsi-draft { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.lr .tsi-news { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 20px; }
.lr .tsi-news li + li { margin-top: 6px; }
.lr .tsi-news a { display: flex; align-items: center; width: fit-content; min-height: 44px; }
/* L1 review: the stand-alone links are full-size targets (44px, 48px on a phone): the driver's link to the text's own page,
   and the account page's "Read and accept" (account.html .acct-terms: the kit's alert link, raised on a phone). */
.lr .tsi-link a { display: inline-flex; align-items: center; min-height: 44px; }
.lr .tsi-text { max-height: 420px; overflow-y: auto; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--lr-card-line); border-radius: 10px;
  background: var(--lr-card); font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.lr .tsi-text.tsi-is-draft { border-color: var(--lr-warn-line); }
.lr .tsi-text p { margin: 0 0 10px; }
.lr .tsi-text p[id] { scroll-margin-top: 12px; }
.lr .tsi-text p[id]:target { outline: 2px solid var(--lr-focus); outline-offset: 4px; border-radius: 4px; }
.lr .tsi-text:focus-visible { outline: 3px solid var(--lr-focus); outline-offset: 2px; }
.lr .tsi-form { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 0; }
.lr .tsi-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lr .tsi-form .tsi-acts { margin-top: 0; }
.lr .tsi-acts .lr-btn { min-height: 44px; }
@media (max-width: 899px) {
  .lr .tsi-text { max-height: 360px; }
  .lr .tsi-acts .lr-btn { min-height: 48px; flex: 1 1 160px; }
  .lr-shell .tsi-news a, .lr-shell .tsi-link a, .lr-shell .acct-terms .lr-alert-link { min-height: 48px; }
}
/* === end Page: Terms at sign-in === */
/* === Page: Find capacity (CAP1: partner_capacity.html, /partner/capacity, for a partner that covers its own loads; and the
   carrier app's "From LaneRally's desk" offers on carrier_myloads.html's Offers tab)
   The partner's side is light and phone first like the rest of its portal; the carrier's is the dark app. The kit's cards,
   badges, fields and buttons (lr-, kit-, scr-), P4's pt-links and P7's pt-load rows carry them as they are; these only lay
   out a carrier's row (its name and badges on one line, its reasons, its actions side by side, wrapping on a phone) and
   the desk's offers card. Classes ptc- and ml-desk only. */
.lr .ptc > .lr-card, .lr .ptc > .pt-filter, .lr .ptc > .ptc-list, .lr .ptc > .pt-list-rows, .lr .ptc > .kit-small { margin-top: 12px; }
.lr .ptc-load > * { margin: 0; }
.lr .ptc-load > * + * { margin-top: 8px; }
.lr .ptc-load .lr-h2 { overflow-wrap: anywhere; }
.lr .ptc-offer { font-size: 15px; line-height: 22px; }
.lr .ptc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lr .ptc-row { display: flex; flex-direction: column; gap: 6px; }
.lr .ptc-row > * { margin: 0; overflow-wrap: anywhere; }
.lr .ptc-row.is-off { border-style: dashed; } /* (CAP1 review: never faded: its muted text keeps the kit's 4.5:1; the row also says "Not vetted") */
.lr .ptc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lr .ptc-why { padding-left: 18px; font-size: 14px; line-height: 20px; }
.lr .ptc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.lr .ptc-acts form { margin: 0; }
.lr .ptc-offer-form { display: flex; align-items: center; gap: 8px; flex: 1 1 16rem; min-width: 0; }
.lr .ptc-offer-form .lr-input { flex: 1 1 auto; min-width: 0; width: 7rem; }
.lr .ptc-offer-form .lr-btn { flex: none; }
.lr .ptc-limit > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; } /* hotfix 12e: Set the load limit */
.lr .ptc-limit form { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; }
.lr .ptc-limit .lr-field { margin: 0; }
.lr .ptc-messages > * { margin: 0; overflow-wrap: anywhere; }
.lr .ptc-messages > * + * { margin-top: 8px; }
.lr .ptc-handback > * { margin: 0; }
.lr .ptc-handback > * + * { margin-top: 8px; }
.lr .ml-desk > * { margin: 0; }
.lr .ml-desk > * + * { margin-top: 8px; }
.lr .ml-desk + .brd-rows, .lr .ml-desk + .empty-state { margin-top: 12px; }
@media (max-width: 559px) {
  .lr .ptc-offer-form { flex-basis: 100%; }
  .lr-shell .ptc-acts .lr-btn, .lr-shell .ml-desk .lr-btn { min-height: 48px; }
}
/* === end Page: Find capacity === */
/* === Page: Sign-in chooser, four doors (LG1: login_chooser.html, /login) ==================================================
   The chooser lists four cards (Carrier, Shipper, Employees or Broker, Partners). Its classes (doors, door-card,
   door-ico-, free-note) carry them as they are; this only lays the four out two by two on a tablet and in one row on a
   wide screen, instead of the three-up row (which would leave the fourth alone). Phones keep the one column. Class
   doors-four only. */
@media (min-width: 760px) {
  .doors.doors-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .doors.doors-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* === end Page: Sign-in chooser, four doors === */

/* Release 14g: a delivery stop's appointment on the carrier's load page (_appt.html appt_carrier), and the booking's choice. */
.lr .myl-appt { display: flex; align-items: center; gap: 6px; }
.lr .myl-appt.is-ok { color: var(--lr-good); font-weight: 600; }
.lr .myl-appt.is-warn { color: var(--lr-bad); font-weight: 600; }
.lr .shp-appt .shp-payopt { margin-top: 6px; }
/* Release 14h: "rate confirmation" in full: a My Loads tile's label wraps inside its tile (four tiles from 381px). */
.lr .myl-tile-t, .lr .myl-tile-s { overflow-wrap: anywhere; hyphens: auto; }