/* NXT TRUCKING - product stylesheet. Loaded only on NXT TRUCKING pages (layout.ts adds /assets/p/trucking.css
   after the shared layers). Owned by the NXT TRUCKING team; everything is scoped under .tr / .trl- classes and
   uses the design tokens. Personality: strong, operational, industrial - heavy numerals, stencil unit
   plates, road-dash route strips, hazard hatching for alerts, an instrument-panel band. Black and white
   only: severity and stage are drawn (solid, hatched, outlined, dashed), never tinted. */

@layer product {
  /* ---- Building blocks --------------------------------------------------------------------------- */
  .tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); --tr-line: color-mix(in srgb, var(--c-border) 75%, transparent); --tr-hatch: repeating-linear-gradient(-45deg, var(--c-text) 0 3px, transparent 3px 7px); }
  .tr > * { margin: 0; min-width: 0; }
  .tr-panel { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
  .tr-panel > h2 { margin: 0; font: 600 var(--t-h4)/1.3 var(--font-sans); }
  .tr-panel-head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
  .tr-panel-head h2 { margin: 0; font: 600 var(--t-h4)/1.3 var(--font-sans); display: inline-flex; gap: var(--s-2); align-items: baseline; }
  .tr-panel-note { margin: calc(var(--s-2) * -1) 0 0; }
  .tr-count { font: 700 var(--t-caption)/1.5 var(--font-mono); padding: 0 6px; border-radius: var(--r-xs); background: var(--c-text); color: var(--c-surface); }
  .tr-more { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; font-size: var(--t-small); font-weight: 600; white-space: nowrap; }
  .tr .overline { margin: 0 0 2px; color: var(--c-muted); }
  .tr-two { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
  .tr-clear { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); }
  .tr-clear p { margin: 0; }
  .tr-clear .i { flex: none; margin-top: 2px; }
  .tr-mini { list-style: none; margin: 0; padding: 0; display: grid; font-size: var(--t-small); }
  .tr-mini li { display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; padding: var(--s-2) 0; margin: 0; border-bottom: 1px solid var(--tr-line); }
  .tr-mini li > :first-child { flex: 1 1 auto; min-width: 0; }
  .tr-det > summary { cursor: pointer; display: inline-flex; gap: var(--s-2); align-items: center; font-weight: 600; font-size: var(--t-small); min-height: 36px; }

  /* Unit plate: stencilled number in a heavy frame */
  .tr-plate { display: inline-flex; align-items: center; gap: 2px; min-width: 44px; justify-content: center; padding: 1px 6px; border: 2px solid var(--c-text); border-radius: 3px; font: 700 var(--t-caption)/16px var(--font-mono); letter-spacing: 0.04em; color: var(--c-text); background: var(--c-surface); white-space: nowrap; }
  .tr-plate.is-trailer { border-style: double; border-width: 3px; }
  .tr-plate.is-none { border-style: dashed; border-width: 1px; color: var(--c-muted); }

  /* Load status chips */
  .tr-st { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 5px; border-radius: var(--r-xs); font: 600 var(--t-caption)/18px var(--font-sans); white-space: nowrap; border: 1px solid var(--c-border-strong); color: var(--c-text); background: var(--c-surface); }
  .tr-st-booked { border-style: dashed; }
  .tr-st-dispatched, .tr-st-at_pickup, .tr-st-at_delivery { border-color: var(--c-text); }
  .tr-st-in_transit { border: 1.5px solid var(--c-text); box-shadow: 2px 2px 0 var(--c-text); }
  .tr-st-delivered, .tr-st-paid { background: var(--c-text); color: var(--c-surface); border-color: var(--c-text); }
  .tr-st-invoiced { background: repeating-linear-gradient(-45deg, var(--c-surface) 0 4px, var(--c-surface2) 4px 7px); border-color: var(--c-text); }
  .tr-st-cancelled, .tr-st-tonu { color: var(--c-muted); text-decoration: line-through; background: var(--c-surface2); }

  /* ---- Instrument band --------------------------------------------------------------------------- */
  .tr-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); border-radius: var(--r-lg); overflow: hidden; background: var(--c-text); color: var(--c-surface); box-shadow: var(--e-1); }
  .tr-gauges > * { display: grid; gap: 6px; align-content: start; padding: var(--s-5); color: inherit; text-decoration: none; border-right: 1px solid color-mix(in srgb, var(--c-surface) 18%, transparent); position: relative; }
  .tr-gauges > a:hover { background: color-mix(in srgb, var(--c-surface) 10%, transparent); }
  .tr-gauges > a:focus-visible { outline-color: var(--c-surface); }
  .tr-g-n { font: 700 clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem)/1 var(--font-display); letter-spacing: -0.03em; }
  .tr-g-n i { font-style: normal; opacity: 0.45; margin: 0 2px; }
  .tr-g-l { font: 600 var(--t-overline)/1.3 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; opacity: 0.75; }
  .tr-gauges > *::after { content: ''; position: absolute; left: var(--s-5); right: var(--s-5); bottom: 10px; height: 4px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-surface) 35%, transparent) 0 2px, transparent 2px 8px); }

  /* ---- Home layout ----------------------------------------------------------------------------------- */
  .tr-cc { display: grid; gap: var(--s-6); align-items: start; }
  @media (min-width: 1200px) { .tr-cc { grid-template-columns: minmax(0, 1fr) 380px; } }
  .tr-cc-side { display: grid; gap: var(--s-6); min-width: 0; }
  .tr-lower { display: grid; gap: var(--s-6); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
  .tr-road { border-top: 4px solid var(--c-text); }
  .tr-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .tr-quick a { display: flex; gap: var(--s-2); align-items: center; min-height: 44px; padding: var(--s-2) var(--s-3); border: 1.5px solid var(--c-text); border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; font-weight: 600; font-size: var(--t-small); transition: background var(--d-fast), color var(--d-fast); }
  .tr-quick a:hover { background: var(--c-text); color: var(--c-surface); }
  .tr-quick-driver { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
  .tr-quick-driver a { min-height: 56px; font-size: var(--t-body); }
  .tr-usage { gap: var(--s-3); }
  .tr-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: var(--s-3); margin: 0; }
  .tr-figs > div { padding: var(--s-3) var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
  .tr-figs dt { font: var(--fw-overline) var(--t-overline)/1.3 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--c-muted); }
  .tr-figs dd { margin: 4px 0 0; font: 650 clamp(1.15rem, 1rem + 0.6vw, 1.5rem)/1.1 var(--font-display); letter-spacing: -0.02em; }
  .tr-figs .is-key { background: var(--c-text); color: var(--c-surface); border-color: var(--c-text); }
  .tr-figs .is-key dt { color: inherit; opacity: 0.75; }
  .tr-figs-sm dd { font-size: var(--t-body); }
  .tr-figs-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }

  /* ---- Route strip (schematic, not a map) ----------------------------------------------------------- */
  .tr-route { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 3fr) minmax(0, 1fr); gap: var(--s-3); align-items: center; }
  .tr-route-end { display: grid; min-width: 0; line-height: 1.25; }
  .tr-route-end b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tr-route-end i { font-style: normal; font-size: var(--t-caption); color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tr-route-end.is-end { text-align: right; }
  .tr-route-line { position: relative; height: 26px; }
  .tr-route-line::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--c-border-strong); }
  .tr-route-line::after { content: ''; position: absolute; left: 0; top: calc(50% - 1px); height: 3px; background: var(--c-text); width: 0; transition: width var(--d-slower) var(--ease-out); }
  .tr-tick { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid var(--c-text); background: var(--c-surface); z-index: 1; }
  .tr-tick-pickup { border-radius: 50%; }
  .tr-tick-delivery { border-radius: 1px; transform: rotate(45deg); }
  .tr-tick.is-done { background: var(--c-text); }
  .tr-at-0 { left: 0; } .tr-at-1 { left: 10%; } .tr-at-2 { left: 20%; } .tr-at-3 { left: 30%; } .tr-at-4 { left: 40%; } .tr-at-5 { left: 50%; } .tr-at-6 { left: 60%; } .tr-at-7 { left: 70%; } .tr-at-8 { left: 80%; } .tr-at-9 { left: 90%; } .tr-at-10 { left: 100%; }
  .tr-truck { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--c-text); color: var(--c-surface); transition: left var(--d-slower) var(--ease-out); }
  .tr-p-0 .tr-truck { left: 0; opacity: 0.35; } .tr-p-1 .tr-truck { left: 6%; } .tr-p-2 .tr-truck { left: 12%; } .tr-p-3 .tr-truck { left: 50%; } .tr-p-4 .tr-truck { left: 92%; } .tr-p-5 .tr-truck { left: 100%; }
  .tr-p-1 .tr-route-line::after { width: 6%; } .tr-p-2 .tr-route-line::after { width: 12%; } .tr-p-3 .tr-route-line::after { width: 50%; } .tr-p-4 .tr-route-line::after { width: 92%; } .tr-p-5 .tr-route-line::after { width: 100%; }
  .tr-route.is-compact { font-size: var(--t-small); }
  @media (max-width: 639px) {
    .tr-route { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'a b' 'line line'; row-gap: 4px; }
    .tr-route > .tr-route-end:first-child { grid-area: a; } .tr-route > .tr-route-end.is-end { grid-area: b; } .tr-route > .tr-route-line { grid-area: line; margin: 0 8px; }
  }
  .tr-route.is-compact .tr-truck { width: 22px; height: 22px; }

  .tr-lanes { list-style: none; margin: 0; padding: 0; display: grid; }
  .tr-lanes > li { margin: 0; border-top: 1px solid var(--tr-line); }
  .tr-lanes > li:first-child { border-top: 0; }
  .tr-lane { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'id meta' 'route route'; gap: var(--s-3) var(--s-4); align-items: center; padding: var(--s-4) var(--s-2); color: var(--c-text); text-decoration: none; border-radius: var(--r-sm); transition: background var(--d-fast); }
  .tr-lane:hover { background: var(--c-surface2); }
  .tr-lane-id { grid-area: id; display: flex; gap: var(--s-3); align-items: center; }
  .tr-lane-id strong { font: 700 var(--t-body)/1.2 var(--font-mono); }
  .tr-lane .tr-route { grid-area: route; }
  .tr-lane-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: center; justify-content: flex-end; font-size: var(--t-small); }
  .tr-lane-meta em { font-style: normal; text-decoration: underline dashed; }
  @media (max-width: 639px) { .tr-lane { grid-template-areas: 'id' 'route' 'meta'; grid-template-columns: minmax(0, 1fr); } .tr-lane-meta { justify-content: flex-start; } }

  /* Alerts: solid = act now, hatched = soon, outline = info */
  .tr-alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
  .tr-alert { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; margin: 0; padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); }
  .tr-alert-i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-xs); }
  .tr-alert-bad { border-color: var(--c-text); }
  .tr-alert-bad .tr-alert-i { background: var(--c-text); color: var(--c-surface); }
  .tr-alert-warn .tr-alert-i { background: var(--tr-hatch); box-shadow: inset 0 0 0 1.5px var(--c-text); }
  .tr-alert-warn .tr-alert-i .i { background: var(--c-surface); border-radius: 2px; }
  .tr-alert-info .tr-alert-i { box-shadow: inset 0 0 0 1px var(--c-border-strong); }
  .tr-alert p { margin: 0; }
  .tr-alert-t { font-size: var(--t-small); font-weight: 500; line-height: 1.35; }
  .tr-alert-m { font-size: var(--t-caption); color: var(--c-muted); }
  .tr-alert-e { font-size: var(--t-small); white-space: nowrap; }

  /* Today's appointments */
  .tr-appts { list-style: none; margin: 0; padding: 0; display: grid; }
  .tr-appts li { display: grid; grid-template-columns: 48px 40px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-3) 0; margin: 0; border-bottom: 1px solid var(--tr-line); font-size: var(--t-small); }
  .tr-appts p { margin: 0; }
  .tr-appt-t { font: 700 var(--t-small)/1.4 var(--font-mono); }
  .tr-appt-k { font: 700 10px/18px var(--font-mono); text-align: center; border: 1.5px solid var(--c-text); border-radius: 2px; letter-spacing: 0.06em; }
  .tr-appts .is-done { color: var(--c-muted); }
  .tr-appts .is-done .tr-appt-k { background: var(--c-text); color: var(--c-surface); }
  .tr-appts .is-late .tr-appt-k { background: var(--tr-hatch); }
  .tr-appts .is-here .tr-appt-k { box-shadow: 2px 2px 0 var(--c-text); }

  /* Fleet units */
  .tr-units { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s-2); }
  .tr-unit { margin: 0; }
  .tr-unit a { display: grid; gap: 2px; padding: var(--s-3); border: 1.5px solid var(--c-border-strong); border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; min-height: 100%; transition: border-color var(--d-fast); }
  .tr-unit a:hover { border-color: var(--c-text); }
  .tr-unit-no { font: 700 1.35rem/1 var(--font-display); letter-spacing: -0.02em; }
  .tr-unit-st { font: 600 var(--t-caption)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
  .tr-unit.is-loaded a { border-color: var(--c-text); box-shadow: inset 0 -4px 0 var(--c-text); }
  .tr-unit-in_shop a { background: repeating-linear-gradient(-45deg, var(--c-surface) 0 6px, var(--c-surface2) 6px 10px); border-style: dashed; }
  .tr-unit-out_of_service a { background: var(--c-surface2); border-style: dashed; color: var(--c-muted); }

  /* ---- Driver home ------------------------------------------------------------------------------------- */
  .tr-driver { display: grid; gap: var(--s-6); align-items: start; }
  @media (min-width: 1100px) { .tr-driver { grid-template-columns: minmax(0, 1fr) 320px; } }
  .tr-driver-main, .tr-driver-side { display: grid; gap: var(--s-6); min-width: 0; }
  .tr-current { display: grid; gap: var(--s-5); padding: var(--s-6); border: 2px solid var(--c-text); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: 6px 6px 0 var(--c-text); }
  .tr-current-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
  .tr-current-head p, .tr-current-head h2 { margin: 0; }
  .tr-current-head h2 { font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem)/1 var(--font-mono); letter-spacing: -0.02em; }
  .tr-current-head h2 a { color: inherit; text-decoration: none; }
  .tr-facts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin: 0; }
  .tr-facts dt { font: var(--fw-overline) var(--t-overline)/1.3 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--c-muted); }
  .tr-facts dd { margin: 4px 0 0; font-weight: 600; }
  .tr-nextstop { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4); background: var(--c-surface2); border-radius: var(--r-md); border-left: 4px solid var(--c-text); }
  .tr-nextstop p { margin: 0; }
  .tr-notes { display: flex; gap: var(--s-2); margin: 0; font-size: var(--t-small); }
  .tr-notes .i { flex: none; margin-top: 2px; }
  .tr-notes strong { display: block; }
  .tr-step-form { margin: 0; }
  .tr-current p.small { margin: 0; }
  .tr-current p.small a { display: inline-flex; gap: 4px; align-items: center; }
  .tr-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
  .tr-doc { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; margin: 0; padding: var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: var(--t-small); }
  .tr-doc-expired { border: 2px solid var(--c-text); }
  .tr-doc-soon { border-style: dashed; border-color: var(--c-text); }

  /* ---- Dispatch board ---------------------------------------------------------------------------------- */
  .tr-board { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-3); align-items: start; }
  .tr-col { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-3); border-radius: var(--r-md); background: var(--c-surface2); min-height: 280px; }
  .tr-col-head { margin: 0; display: flex; gap: var(--s-2); align-items: center; font: 600 var(--t-small)/1.2 var(--font-sans); padding-bottom: var(--s-2); border-bottom: 3px solid var(--c-text); }
  .tr-col-head .tr-count { margin-left: auto; }
  .tr-col-n { font: 700 var(--t-caption)/1 var(--font-mono); color: var(--c-muted); }
  .tr-col-sum { margin: 0; }
  .tr-col-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
  .tr-col-list li { margin: 0; }
  .tr-col-empty { margin: 0; padding: var(--s-4) var(--s-2); text-align: center; border: 1px dashed var(--c-border-strong); border-radius: var(--r-sm); }
  .tr-card { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text); text-decoration: none; transition: border-color var(--d-fast), transform var(--d-fast) var(--ease-out); }
  .tr-card:hover { border-color: var(--c-text); transform: translateY(-1px); }
  .tr-card-top { display: flex; justify-content: space-between; gap: var(--s-2); align-items: baseline; }
  .tr-card-top strong { font-family: var(--font-mono); }
  .tr-card-route { display: flex; gap: 6px; align-items: center; font-size: var(--t-small); font-weight: 600; flex-wrap: wrap; }
  .tr-card-foot { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
  .tr-card-foot .num { margin-left: auto; font-weight: 600; }
  .tr-card-foot em { font-style: normal; text-decoration: underline dashed; }
  .tr-col-in_transit .tr-col-head { border-bottom-style: double; border-bottom-width: 5px; }
  .tr-col-delivered .tr-card, .tr-col-invoiced .tr-card { border-left: 4px solid var(--c-text); }

  /* ---- Load detail -------------------------------------------------------------------------------------- */
  .tr-loadhead { display: grid; gap: var(--s-5); padding: var(--s-5) var(--s-6); border: 1px solid var(--c-border); border-top: 4px solid var(--c-text); border-radius: var(--r-lg); background: var(--c-surface); }
  .tr-loadhead-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; justify-content: space-between; }
  .tr-loadhead-st { margin: 0; display: inline-flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
  .tr-move { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end; margin: 0; }
  .tr-move .field { margin: 0; }
  .tr-steps { list-style: none; margin: 0; padding: 0; display: flex; }
  .tr-steps li { flex: 1 1 0; display: grid; gap: 6px; justify-items: start; margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--c-muted); position: relative; min-width: 0; }
  .tr-steps li::after { content: ''; position: absolute; top: 10px; left: 26px; right: 4px; border-top: 2px dashed var(--c-border-strong); }
  .tr-steps li:last-child::after { display: none; }
  .tr-steps li.is-done::after { border-top: 3px solid var(--c-text); }
  .tr-step-dot { width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--c-border-strong); background: var(--c-surface); border-radius: 3px; position: relative; z-index: 1; }
  .tr-steps .is-done, .tr-steps .is-current { color: var(--c-text); }
  .tr-steps .is-done .tr-step-dot { background: var(--c-text); border-color: var(--c-text); color: var(--c-surface); }
  .tr-steps .is-current .tr-step-dot { border-color: var(--c-text); box-shadow: inset 0 0 0 4px var(--c-surface), inset 0 0 0 10px var(--c-text); }
  .tr-steps.is-off li { opacity: 0.4; }
  @media (max-width: 639px) { .tr-steps li > span:last-child { font-size: 10px; } .tr-loadhead { padding: var(--s-4); } }
  .tr-load-grid { display: grid; gap: var(--s-6); align-items: start; }
  @media (min-width: 1100px) { .tr-load-grid { grid-template-columns: minmax(0, 1fr) 360px; } }
  .tr-load-main, .tr-load-side { display: grid; gap: var(--s-6); min-width: 0; }
  .tr-stops { list-style: none; margin: 0; padding: 0; display: grid; }
  .tr-stop { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); margin: 0; padding-bottom: var(--s-5); position: relative; }
  .tr-stop::before { content: ''; position: absolute; left: 21px; top: 30px; bottom: 0; border-left: 2px dashed var(--c-border-strong); }
  .tr-stop:last-child::before { display: none; }
  .tr-stop-k { width: 44px; height: 28px; display: grid; place-items: center; border: 2px solid var(--c-text); border-radius: 3px; font: 700 11px/1 var(--font-mono); letter-spacing: 0.06em; background: var(--c-surface); position: relative; z-index: 1; }
  .tr-stop.is-done .tr-stop-k { background: var(--c-text); color: var(--c-surface); }
  .tr-stop.is-here .tr-stop-k { box-shadow: 3px 3px 0 var(--c-text); }
  .tr-stop-b { display: grid; gap: 2px; min-width: 0; }
  .tr-stop-b > p { margin: 0; }
  .tr-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: var(--s-2); margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); background: var(--c-surface2); border-radius: var(--r-sm); font-size: var(--t-small); }
  .tr-times dt { font: 600 10px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); }
  .tr-times dd { margin: 0; }
  .tr-log { list-style: none; margin: 0 0 0 6px; padding: 0 0 0 var(--s-5); border-left: 2px solid var(--c-text); display: grid; gap: var(--s-3); }
  .tr-log li { position: relative; margin: 0; }
  .tr-log p { margin: 0; }
  .tr-log-dot { position: absolute; left: calc(var(--s-5) * -1 - 7px); top: 4px; width: 12px; height: 12px; background: var(--c-surface); border: 2px solid var(--c-text); }
  .tr-pnl .tr-mini { margin-top: calc(var(--s-2) * -1); }
  .tr-invoice-now { border-top: 4px solid var(--c-text); }

  /* ---- Generic record pages ---------------------------------------------------------------------------- */
  .tr-rec > .rec-filters { padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); align-items: flex-end; margin: 0; }
  .tr-rec > .panel:not(.tr-panel):has(table) { padding: 0; overflow: hidden; }
  .tr-rec > .panel:not(.tr-panel):has(table) > p { padding: 0 var(--s-5) var(--s-4); }
  .tr table thead th { font: var(--fw-overline) var(--t-overline)/1.3 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; }
  .tr-rec > form.form.panel { border-top: 4px solid var(--c-text); }
  .tr-rec > .panel.stack:has(> .kv) { background: var(--c-surface2); border-style: dashed; font-size: var(--t-small); }
  .tr-rec .kv-section { font: var(--fw-overline) var(--t-overline)/1.3 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--c-muted); }
  .tr-wide { gap: var(--s-4); }

  .trl-hero, .trl-pv, .trl-phone { --tr-line: color-mix(in srgb, var(--c-border) 75%, transparent); --tr-hatch: repeating-linear-gradient(-45deg, var(--c-text) 0 3px, transparent 3px 7px); }
  /* ---- Landing page (trl-) ------------------------------------------------------------------------------ */
  .trl-hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 112px); }
  .trl-road { position: absolute; inset: auto 0 0 0; height: 64px; background: var(--c-text); pointer-events: none; }
  .trl-road::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, var(--c-bg) 0 48px, transparent 48px 96px); background-size: 96px 4px; animation: trl-drive 2.4s linear infinite; }
  @keyframes trl-drive { from { background-position: 0 0; } to { background-position: -96px 0; } }
  .trl-hero-grid > * { min-width: 0; }
  .trl-hero-grid { grid-template-columns: minmax(0, 1fr); position: relative; z-index: 1; display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
  @media (min-width: 1100px) { .trl-hero-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
  .trl-hero-copy { display: grid; gap: var(--s-5); justify-items: start; }
  .trl-hero-copy > * { margin: 0; max-width: 100%; }
  .trl-hero-copy .row { flex-wrap: wrap; }
  .trl-id { display: flex; gap: var(--s-3); align-items: center; font: 700 var(--t-small)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; }
  .trl-hero-copy { min-width: 0; }
  .trl-hero h1 { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.75rem); overflow-wrap: anywhere; max-width: 12ch; text-transform: uppercase; font-weight: 750; letter-spacing: -0.035em; line-height: 0.95; }
  .trl-hero h1 span { display: block; -webkit-text-stroke: 2px var(--c-text); color: transparent; }
  .trl-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-small); color: var(--c-muted); }
  .trl-facts li { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
  .trl-pv { display: grid; gap: var(--s-4); padding: var(--s-4); font-size: var(--t-small); }
  .trl-pv .tr-gauges > * { padding: var(--s-3); }
  .trl-pv .tr-g-n { font-size: 1.6rem; }
  .trl-pv .tr-lane { padding: var(--s-3) var(--s-1); }
  .trl-pv .tr-truck { animation: trl-roll 1.2s var(--ease-out) both; }
  .trl-pv .tr-lanes li:nth-child(2) .tr-truck { animation-delay: 150ms; } .trl-pv .tr-lanes li:nth-child(3) .tr-truck { animation-delay: 300ms; }
  @keyframes trl-roll { from { left: 0; } }
  .trl-tabs [role='tabpanel'] { min-height: 320px; }
  .trl-spec { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); border: 2px solid var(--c-text); border-radius: var(--r-md); overflow: hidden; }
  .trl-spec li { margin: 0; padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
  .trl-spec h3 { margin: 0; font: 700 var(--t-h4)/1.25 var(--font-sans); }
  .trl-spec p { margin: 0; font-size: var(--t-small); color: var(--c-muted); }
  .trl-spec-k { font: 700 var(--t-caption)/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; gap: 6px; align-items: center; }
  .trl-duo { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
  @media (min-width: 1024px) { .trl-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .trl-duo.is-reverse > :first-child { order: 2; } }
  .trl-duo-copy { display: grid; gap: var(--s-4); }
  .trl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
  .trl-list li { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; }
  .trl-list .i { flex: none; margin-top: 3px; }
  .trl-phone { max-width: 380px; margin: 0 auto; border: 10px solid var(--c-text); border-radius: 36px; background: var(--c-bg); padding: var(--s-4) var(--s-3); box-shadow: var(--e-3); display: grid; gap: var(--s-3); }
  .trl-phone .tr-current { padding: var(--s-4); box-shadow: 4px 4px 0 var(--c-text); gap: var(--s-3); }
  .tr-current-no { margin: 0; font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem)/1 var(--font-mono); letter-spacing: -0.02em; }
  .trl-phone .tr-quick > span { display: flex; gap: var(--s-2); align-items: center; min-height: 44px; padding: var(--s-2) var(--s-3); border: 1.5px solid var(--c-text); border-radius: var(--r-sm); font-weight: 600; font-size: var(--t-small); }
  .trl-ifta table { font-size: var(--t-small); }
  @media (prefers-reduced-motion: reduce) { .trl-road::after, .trl-pv .tr-truck { animation: none; } }
}