/* ==========================================================================
   THE PER-TRAILER MANIFEST (#283) — js/screens/72-manifest.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, and a screen that draws its own is a second meaning three
   inches from the first. It is also the mechanism behind the flat-pill defect
   the driver PWA measured: a class no loaded stylesheet defines ships FLAT and
   passes CI, so the browser check reads getComputedStyle().backgroundImage
   rather than the class name.

   Only the box model and the print rules live here. A known negative uses
   `.ui-miss` for the same reason.

   PRINT IS THE POINT OF THIS SCREEN. The yard prints it and carries it out to
   the trailer, so @media print drops the chrome and keeps the sheet — and the
   hatch survives printing as a BORDER and a word, never as colour alone,
   because a mono laser prints every tint the same grey.
   ========================================================================== */
.man-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}
.man-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)}
.man-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)}
.man-brand{display:flex;align-items:center;gap:var(--sp-2)}
.man-logo{width:34px;height:34px}
.man-word{font-size:var(--fz-body);letter-spacing:.06em}
.man-word b{font-weight:var(--fw-semi)}
.man-word i{font-style:normal;color:var(--text-secondary)}
.man-title{flex:1 1 220px}
.man-title h2{margin:0;font-size:var(--fz-body);font-weight:var(--fw-semi)}
.man-trailer{margin:2px 0 0;font-size:var(--fz-metric);font-weight:var(--fw-semi);
  font-variant-numeric:tabular-nums}
.man-reg{margin:4px 0 0;font-size:var(--fz-small);color:var(--text-secondary)}
.man-reg--gone{font-style:italic}
.man-counts{display:flex;gap:var(--sp-4)}
.man-counts div{display:flex;flex-direction:column;align-items:flex-end}
.man-counts span{font-size:var(--fz-caption);color:var(--text-tertiary);text-transform:uppercase;
  letter-spacing:.04em}
.man-counts b{font-size:var(--fz-body);font-variant-numeric:tabular-nums}

/* Whose trailer it is. The three tones are three phone calls; `unknown` also
   carries .ui-indet from the markup, so the hatch is the shared one. */
.man-who{display:flex;flex-direction:column;gap:2px;margin:var(--sp-3) 0;padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-sm);border:1px solid var(--border-subtle)}
.man-who span{font-size:var(--fz-small);color:var(--text-secondary)}
.man-who--ok{background:var(--success-bg);border-color:var(--success-border)}
.man-who--bad{background:var(--danger-bg);border-color:var(--danger-border)}

/* The two empties, drawn apart on purpose. --blind takes .ui-indet's hatch from
   the markup; --none is a measured zero and is dimmed, never hatched. */
.man-empty{margin:var(--sp-3) 0;padding:var(--sp-3);border-radius:var(--r-sm);
  display:block;font-size:var(--fz-small)}
.man-empty p{margin:var(--sp-2) 0 0}
.man-empty--none{border:1px dashed var(--border-subtle);font-style:italic}
.man-none{margin:var(--sp-3) 0;font-size:var(--fz-small)}

.man-t{width:100%;border-collapse:collapse;margin-top:var(--sp-3);font-size:var(--fz-small)}
.man-t caption{text-align:left;font-weight:var(--fw-semi);padding-bottom:var(--sp-2);
  color:var(--text-secondary)}
.man-t th,.man-t td{border-bottom:1px solid var(--border-subtle);padding:var(--sp-2);
  text-align:left;vertical-align:top}
.man-t th{font-size:var(--fz-caption);text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-tertiary)}
.man-tick{width:1.6em;font-size:var(--fz-body);line-height:1}
.man-n{width:2em;font-variant-numeric:tabular-nums;color:var(--text-tertiary)}
.man-cn small{display:block;color:var(--text-tertiary);font-size:var(--fz-caption)}
.man-src__rec{font-weight:var(--fw-semi);color:var(--success-fg)}
.man-r--assumed .man-goods,.man-r--assumed .man-cust{color:var(--text-secondary)}
.man-done{margin-top:var(--sp-4)}
.man-done summary{cursor:pointer;font-size:var(--fz-small);color:var(--text-secondary)}

.man-foot{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--border-subtle);
  font-size:var(--fz-small);color:var(--text-secondary)}
.man-foot__t{margin:0 0 var(--sp-2);font-weight:var(--fw-semi);color:var(--text-primary)}
.man-foot p{margin:0 0 var(--sp-2)}
.man-foot__n{font-size:var(--fz-caption);color:var(--text-tertiary)}

@media print{
  .man-toolbar,.app-sidebar,.app-topbar,#page-hint{display:none !important}
  .man-sheet{margin:0;border:0;padding:0}
  .man-done[open] summary{display:none}
  .man-done{display:block}
  /* A mono laser prints every tint the same grey, so the two empties and an
     assumed row must still be told apart on paper. The hatch is a gradient and
     survives; the dashed border and the word beside it are what actually
     carry it. */
  .man-empty--none{border:1px dashed #666}
  .man-t th,.man-t td{border-bottom:1px solid #999}
}