/* ==========================================================================
   THE INTERACTIVE LOAD PLAN (#283) — js/screens/73-loadplan.js
   --------------------------------------------------------------------------
   ⚠ THE HATCH IS THE SHARED `.ui-indet` (css/modules/ui.css), APPLIED FROM
   THE MARKUP, AND THIS FILE DEFINES NO SECOND ONE. "We do not know" has one
   mark in this app; a screen that draws its own is a second meaning three
   inches from the first, and it is the mechanism behind the flat-pill defect
   the driver PWA measured — a class no loaded stylesheet defines ships FLAT and
   passes CI, which is why the browser check reads
   getComputedStyle().backgroundImage rather than the class name. A known
   negative uses `.ui-miss`, for the same reason.

   ⚠ AND THE OTHER MARK IN HERE IS A THIRD THING, DELIBERATELY: `.lp-chip` IS
   DRAWN AS A PLAN. Everything on this deck is somebody's intention — nothing in
   FleetView stamps where freight physically sits — so a chip carries a DASHED
   outline and the deck carries a standing caption. It must never be mistaken
   for the manifest's `Loaded — recorded` ink, and it is not a hatch either: a
   plan is not an unknown. Three marks, three meanings.

   PRINT IS PART OF THE POINT. The yard prints this beside the manifest, so
   @media print drops the chrome and the controls and keeps the deck and the
   list. A mono laser prints every tint the same grey, so every state survives
   printing as a border and a word rather than as colour alone.
   ========================================================================== */
.lp-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  flex-wrap:wrap;padding:var(--sp-3) var(--sp-4) 0}
.lp-toolbar__r{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.lp-sheet{background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-md);margin:var(--sp-3) var(--sp-4) var(--sp-6);padding:var(--sp-4)}
.lp-head{display:flex;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap;
  border-bottom:2px solid var(--text-primary);padding-bottom:var(--sp-3)}
.lp-title{flex:1 1 220px}
.lp-title h2{margin:0;font-size:var(--fz-body);font-weight:var(--fw-semi)}
.lp-trailer{margin:2px 0 0;font-size:var(--fz-metric);font-weight:var(--fw-semi);
  font-variant-numeric:tabular-nums}
.lp-counts{display:flex;gap:var(--sp-4)}
.lp-counts div{display:flex;flex-direction:column;align-items:flex-end}
.lp-counts span{font-size:var(--fz-caption);color:var(--text-tertiary);text-transform:uppercase;
  letter-spacing:.04em}
.lp-counts b{font-size:var(--fz-metric);font-weight:var(--fw-semi);font-variant-numeric:tabular-nums}

/* ---- the deck ---------------------------------------------------------- */
.lp-deck{margin-top:var(--sp-4)}
.lp-deck__ends{display:flex;justify-content:space-between;font-size:var(--fz-caption);
  color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.lp-grid{display:flex;flex-direction:column;gap:4px;border:2px solid var(--text-primary);
  border-radius:var(--r-sm);padding:6px;background:var(--bg-subtle)}
.lp-lane{display:grid;grid-template-columns:110px repeat(var(--lp-bays,4),1fr);gap:4px;align-items:stretch}
.lp-lane__n{display:flex;align-items:center;font-size:var(--fz-small);font-weight:var(--fw-semi);
  color:var(--text-secondary)}
.lp-cell{position:relative;min-height:62px;border:1px dashed var(--border-subtle);
  border-radius:var(--r-sm);background:var(--bg-surface);padding:16px 4px 4px;
  display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start}
.lp-cell__n{position:absolute;top:2px;left:4px;font-size:var(--fz-caption);
  color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.lp-cell--over{border-color:var(--text-primary);border-style:solid}
/* ⚠ A PLAN, NOT A STAMP. Dashed and never solid, and never the hatch. */
.lp-chip{display:inline-flex;flex-direction:column;gap:1px;cursor:grab;
  border:1px dashed var(--text-secondary);border-radius:var(--r-sm);
  padding:2px var(--sp-1);background:var(--bg-surface);max-width:100%}
.lp-chip b{font-size:var(--fz-small);font-weight:var(--fw-semi);font-variant-numeric:tabular-nums}
.lp-chip i{font-style:normal;font-size:var(--fz-caption);color:var(--text-secondary)}
.lp-chip em{font-style:normal;font-size:var(--fz-caption);color:var(--text-tertiary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.lp-chip__rec{font-size:var(--fz-caption);color:var(--text-secondary)}
.lp-chip__pl{align-self:flex-start}
.lp-deck__sketch{margin:var(--sp-2) 0 0;font-size:var(--fz-small);color:var(--text-secondary)}
.lp-len{margin:var(--sp-2) 0 0;font-size:var(--fz-small);color:var(--text-secondary)}

/* ---- the worklist ------------------------------------------------------ */
.lp-work{margin-top:var(--sp-4);border-top:1px solid var(--border-subtle);padding-top:var(--sp-3)}
.lp-work__t{margin:0 0 var(--sp-2);font-size:var(--fz-small);font-weight:var(--fw-semi);
  text-transform:uppercase;letter-spacing:.04em;color:var(--text-tertiary)}
.lp-work__h{margin:var(--sp-2) 0;font-size:var(--fz-small);color:var(--text-secondary)}
.lp-who{max-width:320px}
.lp-ok{margin:var(--sp-2) 0;font-size:var(--fz-small);color:var(--text-secondary)}
.lp-rows{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.lp-row{display:grid;grid-template-columns:120px 1fr 1fr 150px 130px auto;gap:var(--sp-2);
  align-items:center;padding:4px 6px;border:1px solid var(--border-subtle);border-radius:var(--r-sm);
  font-size:var(--fz-small)}
.lp-row--set{border-style:dashed}
.lp-row__cn{font-weight:var(--fw-semi);font-variant-numeric:tabular-nums}
.lp-row__c,.lp-row__g{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-row__w{font-weight:var(--fw-semi)}
.lp-row__src{font-size:var(--fz-caption);color:var(--text-tertiary)}
.lp-row__do{display:flex;gap:var(--sp-1);align-items:center;flex-wrap:wrap}
.lp-pick{font-size:var(--fz-small);min-height:28px}

/* ---- the three empties ------------------------------------------------- */
.lp-none{margin:var(--sp-3) 0 0;color:var(--text-secondary)}
.lp-empty{margin:var(--sp-4) 0 0;padding:var(--sp-3);border-radius:var(--r-sm);
  border:1px solid var(--border-subtle)}
.lp-empty b{display:block;margin-bottom:4px}
.lp-empty p{margin:var(--sp-2) 0 0;font-size:var(--fz-small)}
.lp-empty--none{border-style:dashed}
.lp-empty--flat{border-style:dashed}
.lp-empty--flat b{display:inline}

/* ---- the foot ---------------------------------------------------------- */
.lp-foot{margin-top:var(--sp-4);border-top:1px solid var(--border-subtle);padding-top:var(--sp-3);
  font-size:var(--fz-small);color:var(--text-secondary)}
.lp-foot__t{margin:0 0 var(--sp-2);font-weight:var(--fw-semi);text-transform:uppercase;
  letter-spacing:.04em;color:var(--text-tertiary)}
.lp-foot p{margin:0 0 var(--sp-2)}
.lp-foot__n{font-size:var(--fz-caption);color:var(--text-tertiary)}

@media print{
  .lp-toolbar,.lp-work__h,.lp-who,.lp-row__do,#lp-err,.lp-ok{display:none !important}
  .lp-sheet{margin:0;border:0;padding:0}
  .lp-chip{break-inside:avoid}
  .lp-row{break-inside:avoid}
}