/* css/loading.css — „Załadunek kuriera” (js/ui/loading.js): the van-loading mini-game panel. The sheet itself (bottom
   panel on phones, right-side panel on wide landscape screens) comes from css/sheets.css (.sheet--panel), like the
   Stół QC and packing panels. Blocky, flat, like the 3D hall (docs/ART_DIRECTION.md): the courier van from behind
   (white body, red lamps, the open rear doors swung toward the viewer), the cargo bay as a grid of cells, kraft
   cartons with tape + an address label, the dock ramp with a yellow edge. Visual pass 2 (2026-10-15): flat fills, no
   gradients, no glows — a full row flashes once, a full van gets the static green ring. Only transform / opacity
   animate; reduced motion: css/motion.css + js (no FLIP). */

.sheet--load .sheet__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 0;
  overflow: hidden;
}

.sheet--load .sheet__head {
  position: absolute;
  top: 18px;
  right: max(14px, var(--safe-right));
}

/* the fill % next to the title = a §4 count tag */
.ld__pct {
  flex: none;
  min-height: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  background: var(--raised-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: 800;
  line-height: 20px;
}

/* the instruction: one 14 / 800 grey line, left (= the packing panel's) */
.ld__hint {
  flex: none;
  margin: 0;
  text-align: left;
  font-weight: 800;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--text-2);
}

.ld__hint[hidden] { display: none; }

/* ------------------------------------------------------------------ the dock + the van from behind */
.ld__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 150px;
  display: grid;
  place-items: center;
  container-type: size;
  /* the open doors may reach past the sides (clipped); a carton dragged out of the van still goes down to the ramp */
  overflow-x: clip;
  border-radius: var(--r-md);
  /* back wall of the dock (flat) over the light hall floor (the ::after band below — hard horizon, no gradient) */
  background: var(--panel);
  border: 2px solid var(--line);
}

.ld__stage::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: #8f949b;
  pointer-events: none;
}

/* a carton dragged out of the van stays above the ramp */
.ld__stage:has(.ld-box.is-drag) { z-index: 3; }

/* the yellow lane line on the floor */
.ld__stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(74% + 10px);
  height: 5px;
  background: var(--lane);
  opacity: 0.85;
}

.ld-van {
  --cs: 44px; /* one cargo cell */
  position: relative;
  z-index: 1;
  width: calc(var(--cs) * (var(--w) + 0.8));
  height: calc(var(--cs) * (var(--h) + 1.3));
  margin-top: calc(var(--cs) * -0.2);
  perspective: 720px;
  transition: transform var(--mo-slow) var(--mo-out), opacity var(--mo-slow) var(--mo-out);
}

@supports (width: 1cqw) {
  /* room for most of the open doors (they may be clipped at the sides) and the bumper */
  .ld-van { --cs: min(calc(92cqw / (var(--w) * 1.12 + 0.8)), calc(84cqh / (var(--h) + 1.3)), 72px); }
}

.ld-van.is-gone {
  transform: translateY(-14%) scale(0.5);
  opacity: 0;
}

.ld-van__body {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--cs) * 0.3) calc(var(--cs) * 0.3) var(--r-sm) var(--r-sm);
  background: #f3f4f6;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.1),
    inset calc(var(--cs) * -0.12) 0 0 rgba(0, 0, 0, 0.06),
    0 6px 0 rgba(0, 0, 0, 0.35);
}

/* the red livery stripe of the 3D van */
.ld-van__body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--cs) * 0.16);
  height: calc(var(--cs) * 0.12);
  background: var(--brand-red);
}

.ld-van__bay {
  position: absolute;
  z-index: 1;
  left: calc(var(--cs) * 0.4);
  right: calc(var(--cs) * 0.4);
  top: calc(var(--cs) * 0.42);
  bottom: calc(var(--cs) * 0.72);
  border-radius: var(--r-xs);
  /* the plywood lining: one flat tone (the grid cells draw the slots) */
  background: #4a3b2c;
  box-shadow: 0 0 0 3px #2b2f36;
  transition: box-shadow var(--mo-slow) var(--mo-out);
}

/* a perfect load: the static green ring („done right”), no glow */
.ld-van.is-perfect .ld-van__bay {
  box-shadow: 0 0 0 3px #2b2f36, 0 0 0 6px var(--green);
}

.ld-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--w), 1fr);
  grid-template-rows: repeat(var(--h), 1fr);
}

.ld-cell {
  margin: 3px;
  border: 2px dashed rgba(255, 255, 255, 0.16);
  border-radius: var(--r-xs);
  transition: background-color var(--mo-fast) var(--mo-out), border-color var(--mo-fast) var(--mo-out);
}

.ld-cell.is-target {
  border-color: rgba(54, 198, 74, 0.95);
  background: rgba(54, 198, 74, 0.28);
}

/* a full row: one bright flash over it */
.ld-row {
  grid-column: 1 / -1;
  z-index: 4;
  margin: 1px;
  border-radius: var(--r-sm);
  opacity: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.5);
}

.ld-row.is-flash { animation: ld-flash var(--mo-slow) var(--mo-out); }

/* rear doors: closed over the bay, swung open toward the viewer */
.ld-van__door {
  position: absolute;
  z-index: 3;
  top: calc(var(--cs) * 0.1);
  bottom: calc(var(--cs) * 0.6);
  width: 50%;
  background: #e9ebef;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
  transition: transform var(--mo-slow) var(--mo-out);
}

.ld-van__door--l {
  left: 0;
  transform-origin: 0 50%;
  border-radius: calc(var(--cs) * 0.3) 0 0 var(--r-xs);
}

.ld-van__door--r {
  right: 0;
  transform-origin: 100% 50%;
  border-radius: 0 calc(var(--cs) * 0.3) var(--r-xs) 0;
}

/* the rear windows and the door handle */
.ld-van__door::before {
  content: "";
  position: absolute;
  top: 12%;
  left: 18%;
  right: 18%;
  height: 22%;
  border-radius: var(--r-xs);
  background: #2b3442;
}

.ld-van__door::after {
  content: "";
  position: absolute;
  top: 52%;
  width: 18%;
  height: calc(var(--cs) * 0.1);
  border-radius: var(--r-xs);
  background: #8a909c;
}

.ld-van__door--l::after { right: 10%; }
.ld-van__door--r::after { left: 10%; }

.ld-van.is-open:not(.is-shut) .ld-van__door--l { transform: rotateY(-112deg); }
.ld-van.is-open:not(.is-shut) .ld-van__door--r { transform: rotateY(112deg); }

.ld-van__bumper {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--cs) * 0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--cs) * 0.16);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: #2b2f36;
}

.ld-van__lamp {
  width: calc(var(--cs) * 0.42);
  height: calc(var(--cs) * 0.24);
  border-radius: var(--r-xs);
  background: var(--brand-red);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}

.ld-van__plate {
  width: calc(var(--cs) * 1.1);
  height: calc(var(--cs) * 0.26);
  border-radius: var(--r-xs);
  background: #fbfaf5;
  box-shadow: inset calc(var(--cs) * 0.14) 0 0 #2c5cc5;
}

/* „Pełne auto!” */
.ld-van__stamp {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 42%;
  padding: 2px 12px;
  border: 3px solid currentColor;
  border-radius: var(--r-sm);
  background: rgba(251, 250, 245, 0.92);
  color: var(--green-dark);
  font-weight: 900;
  font-size: var(--fs-24);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-10deg) scale(2);
}

.ld-van__stamp.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-10deg) scale(1);
  transition: transform var(--mo-fast) var(--mo-out), opacity var(--mo-fast) linear;
}

/* ------------------------------------------------------------------ cartons */
.ld-box {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: var(--cardboard-1);
  box-shadow: inset 0 0 0 2px var(--cardboard-3), 0 3px 0 var(--cardboard-3);
  filter: brightness(calc(1 - var(--tone, 0) * 0.05));
  color: var(--ink);
  font: inherit;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 0 0;
}

.ld-box:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.ld-grid > .ld-box {
  z-index: 2;
  width: auto;
  height: auto;
  margin: 2px;
}

.ld-box.is-drag {
  z-index: 30;
  scale: 1.06;
  cursor: grabbing;
  box-shadow: inset 0 0 0 2px var(--cardboard-3), 0 6px 0 rgba(0, 0, 0, 0.3);
}

.ld-box.is-nofit { animation: ld-shake var(--mo-slow) var(--mo-out); }
.ld-box.is-away { opacity: 0; transition: opacity var(--mo-med) var(--mo-out); }

.ld-box__tape {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 16%;
  max-width: 12px;
  transform: translateX(-50%);
  background: var(--cardboard-2);
}

.ld-box__label {
  position: absolute;
  left: 8%;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  max-width: 84%;
  padding: 2px 4px;
  border-radius: var(--r-xs);
  background: #fbfaf5;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  font-size: var(--fs-12);
  font-weight: 800;
  line-height: var(--lh-tight);
  text-align: left;
  overflow: hidden;
}

.ld-box__nick {
  color: #2a2f3a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ld-box__kg {
  color: #5a6170;
  white-space: nowrap;
}

/* small boxes: the kg only; on the ramp the label is just the white sticker */
.ld-grid > .ld-box--w1 .ld-box__nick { display: none; }
.ld__ramp .ld-box__label { width: 42%; height: 24%; padding: 0; }
.ld__ramp .ld-box__label > span { display: none; }

/* a pallet of several hauls: „×n” */
.ld-box__n {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--yellow);
  color: var(--ink);
  font-weight: 900;
  font-size: var(--fs-12);
  box-shadow: 0 2px 0 var(--yellow-dark);
}

/* ------------------------------------------------------------------ the ramp */
.ld__ramp {
  --ru: 36px; /* one ramp cell */
  position: relative;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 10px 12px;
  min-height: calc(var(--ru) * 2 + 26px);
  padding: 16px 10px 10px;
  border-radius: var(--r-md);
  background: #222838;
}

/* the dock edge: yellow / black */
.ld__ramp::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--yellow);
}

.ld-slot {
  position: relative;
  width: calc(var(--ru) * var(--pw) + (var(--pw) - 1) * 4px);
  height: calc(var(--ru) * var(--ph) + (var(--ph) - 1) * 4px);
  border-radius: var(--r-xs);
}

.ld-slot.is-empty { outline: 2px dashed rgba(255, 255, 255, 0.14); outline-offset: -2px; }

/* ------------------------------------------------------------------ result row + buttons */
.ld__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
}

.ld__result {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ld__stars {
  flex: none;
  display: inline-flex;
  gap: 1px;
  opacity: 0.55;
  transition: opacity var(--mo-fast) var(--mo-out);
}

.ld__stars.is-lit { opacity: 1; }
.ld__star { display: inline-flex; color: var(--line); transition: color var(--mo-fast) var(--mo-out); }
.ld__star.is-on { color: var(--yellow); }
.ld__star.is-pop { animation: ld-star var(--mo-slow) var(--mo-spring) both; }

.ld__verdict {
  min-width: 0;
  font-weight: 900;
  font-size: var(--fs-14);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ld__all { flex: none; }
.ld__all[hidden] { display: none; }

.ld__go {
  flex: none;
  min-height: 48px;
  padding: 8px 16px;
  gap: 6px;
  font-size: var(--fs-16);
}
/* every carton is in, the van is not full: „Ruszaj” is the move now (playtest: it used to leave by itself at 1/6) */
.ld__go.is-ready { box-shadow: var(--ring-go); }

/* Zlecenia › Do roboty: „Załaduj” next to „Wyślij” (js/ui/orders.js) */
.pack-ship__acts {
  flex: none;
  display: flex;
  gap: 6px;
}

/* toasts wait while the panel is open (js/ui/toasts.js hold) and never cover it */
#layer-sheets:has(> .sheet--load.is-in) ~ #layer-toasts > .toast-stack { visibility: hidden; }

@media (min-width: 900px) and (orientation: landscape) {
  .ld__ramp { --ru: 40px; }
}

/* ------------------------------------------------------------------ keyframes */
@keyframes ld-flash {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}

@keyframes ld-shake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes ld-star {
  from { transform: scale(0.3) rotate(-30deg); }
  to { transform: none; }
}

/* tier 0 = the cargo trike (playtest: the panel drew a box van under „Trójkołowiec cargo”): from behind, the cargo box
   with its red stripe stands on two rear wheels — no bumper bar, no lamps, a small plate between the wheels
   (js/ui/loading.js ld-van--t<tier>; the 3D trike: render/world/actors.js) */
.ld-van--t0 .ld-van__bumper {
  left: calc(var(--cs) * 0.1);
  right: calc(var(--cs) * 0.1);
  justify-content: center;
  background: none;
}
.ld-van--t0 .ld-van__lamp { display: none; }
.ld-van--t0 .ld-van__plate { width: calc(var(--cs) * 0.8); }
.ld-van--t0 .ld-van__bumper::before,
.ld-van--t0 .ld-van__bumper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--cs) * 0.42);
  border-radius: var(--r-sm);
  background: #2b2f36;
}
.ld-van--t0 .ld-van__bumper::before { left: 0; }
.ld-van--t0 .ld-van__bumper::after { right: 0; }

/* ------------------------------------------------------------------ 2026-10-22 polish (owner: „lots of empty dark space
   below the van, the tray with one ×3 parcel looks bare”): the stage is as tall as the van needs (5 : 4 of its width,
   shrinking on short screens) instead of eating every free pixel; the panel is as tall as its content (more hall in
   view), the dock ramp cartons bigger and centred; the foot keeps room for the buttons' lip (it was cut by the panel's bottom edge). */
.sheet.sheet--load { height: auto; max-height: calc(100% - var(--nav-space, 0px) - max(8px, var(--safe-top)) - 72px); }
.ld__stage { flex: 0 1 auto; aspect-ratio: 5 / 4; min-height: 150px; }
.ld__ramp {
  --ru: 44px;
  flex: 0 1 auto;
  align-content: center;
  align-items: center;
  min-height: calc(var(--ru) + 34px);
}
.ld__foot { padding-bottom: 6px; }
@media (max-height: 700px) {
  .ld__ramp { --ru: 38px; }
}
@media (min-width: 900px) and (orientation: landscape) {
  .sheet.sheet--load { bottom: auto; max-height: calc(100% - max(8px, var(--safe-top)) - 58px * var(--ui, 1) - var(--nav-space, 0px) * var(--ui-hud, 0.95) - 6px); }
  .ld__stage { aspect-ratio: 4 / 3; }
  .ld__ramp { --ru: 52px; }
}