/* ==========================================================================
   Receive & Inspect — arrival-receive.html (ARR-0223-1 · HLBU 902146-3)
   Spec: build/po/pages.md §12. Shared vocabulary: css/pages/purchase-orders.css.

   PHONE FIRST. J. Pérez stands at the container with a phone: one slab card
   at a time, every target 44px or more, the scan field and the camera button
   48px, Pass / Fail 52px, and Save & Next in a bar that stays at the bottom of
   the screen while the card scrolls. From 768 up the card sits beside the
   checked list; below it everything is one column, in the order the receiver
   works: the card, what is already checked, the variances, then finishing.

   NO MONEY ON THIS PAGE. The receiver holds no purchase-costs permission:
   counts, sizes, grades and places only.

   Tokens only, radius ≤ 7px, nothing under 10px, no `style` attribute: the
   progress bar's width is the SVG <rect>'s `width` attribute.
   ========================================================================== */

/* ---------- The receipt's progress -------------------------------------------
   One white block under the header: the count first ("35 of 36 checked"),
   the three readings after it, the bar, and the line that says how the
   receipt completes. */
.po-rcv-status {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: var(--page-gap);
}
.po-rcv-status__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.po-rcv-status__count { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }
.po-rcv-status__count strong { font-size: 20px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.po-rcv-status__bar {
  display: block; width: 100%; height: 8px; margin: 10px 0 8px;
  border-radius: 5px; overflow: hidden;
  background: var(--color-control);
}
.po-rcv-status__level { fill: var(--color-success); }
.po-rcv-status__note { margin: 0; font-size: 12px; color: var(--color-text-muted); }
.po-rcv-status__note a { color: var(--color-primary-600); text-decoration: none; }

/* ---------- Layout ------------------------------------------------------------
   Phone: one column, DOM order. From 768: the card on the left with the
   variances under it, the checked list down the right beside both. */
.po-rcv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "card" "list" "var";
  gap: var(--page-gap);
  align-items: start;
  margin-bottom: var(--page-gap);
}
.po-rcv-card { grid-area: card; }
.po-rcv-checked { grid-area: list; }
.po-rcv-var { grid-area: var; }
@media (min-width: 768px) {
  .po-rcv-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "card list" "var list";
    grid-template-rows: auto 1fr;
  }
}

/* ---------- The scan bar ---------------------------------------------------------
   Inside the slab card, first. A muted start note, a 48px field with the scan
   mark inside it, the 48px camera button beside it, and the last scan read
   back underneath. */
.po-rcv-scan { padding: 16px; border-bottom: 1px solid var(--color-border); }
.po-rcv-note { margin: 0 0 10px; font-size: 12px; color: var(--color-text-muted); }
.po-rcv-scan__row { display: flex; align-items: stretch; gap: 8px; }
.po-rcv-scan__field { position: relative; flex: 1 1 auto; min-width: 0; }
.po-rcv-scan__field svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--color-text-muted); pointer-events: none;
}
.po-rcv-scan__field .input { width: 100%; height: 48px; padding-left: 44px; font-size: 15px; }
.po-rcv-scan__cam { width: 48px; height: 48px; padding: 0; justify-content: center; flex: none; }
.po-rcv-scan__cam svg { width: 22px; height: 22px; }
.po-rcv-scan__last { margin-top: 8px; font-size: 12px; }

/* ---------- The slab ---------------------------------------------------------------
   The photo slot and the identity side by side; the number large enough to
   read at arm's length. The facts under it are readings (words joined by ·),
   the hold that waits on this slab in warn ink. */
.po-rcv-slab { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 16px; }
.po-rcv-slab__photo { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.po-rcv-slab__photo img {
  width: 112px; height: 112px; display: block; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--color-border);
}
.po-rcv-slab__photo figcaption { font-size: 11px; color: var(--color-text-subtle); line-height: 1.3; }
.po-rcv-slab__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.po-rcv-slab__eyebrow { font-size: 12px; color: var(--color-text-muted); }
.po-rcv-slab__id { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--color-text); font-variant-numeric: tabular-nums; }
.po-rcv-slab__mat { font-size: 14px; font-weight: 500; color: var(--color-text); }
.po-rcv-slab__body .po-reading { font-size: 12px; color: var(--color-text-muted); }
.po-rcv-slab__body .po-reading a { color: var(--color-primary-600); text-decoration: none; }
.po-rcv-slab__listed { color: var(--color-text); }
/* The hold waiting on this slab: one sentence in warn ink, the hand before it. */
.po-rcv-hold { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 0; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--color-warn-ink); }
.po-rcv-hold svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.po-rcv-hold a { color: var(--color-primary-600); text-decoration: none; }
/* Record numbers and a closing qualifier never split at their hyphen. */
.po-rcv-nw { white-space: nowrap; }

/* ---------- One step of the check -----------------------------------------------------
   Each control group is a numbered step with a hairline above it. Labels are
   Title Case words; the number is a muted figure, not a chip. */
.po-rcv-step { padding: 14px 16px; border-top: 1px solid var(--color-border); }
.po-rcv-step__h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.po-rcv-step__n { font-size: 12px; font-weight: 600; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.po-rcv-step__hint { margin: 8px 0 0; font-size: 12px; color: var(--color-text-muted); }
.po-rcv-step .input,
.po-rcv-step .select { min-height: 44px; }

/* Two big answers side by side (Confirm ID / Correct ID). Neither starts
   chosen; the one taken gets the primary edge and lifts to the surface. */
.po-rcv-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.po-rcv-opt { min-height: 44px; justify-content: center; }
.po-rcv-opt.is-chosen {
  border-color: var(--color-primary); background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-primary); color: var(--color-primary-700);
}

/* Measure: three fields with their unit, then the "measured" switch. */
.po-rcv-measure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.po-rcv-measure .field label { font-size: 11px; }
.po-rcv-measure .input-group .input { min-height: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.po-rcv-measure .input-group .addon { background: var(--color-control); border-color: var(--color-control-border); }
.po-rcv-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; }
.po-rcv-switch .switch-field { color: var(--color-text); font-weight: 400; min-height: 44px; }

/* Photo: the camera tile on the control ground, beside what is already held. */
.po-rcv-shot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.po-rcv-shot__tile {
  width: 88px; height: 88px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--color-control); border: 1px dashed var(--color-control-border);
  border-radius: var(--radius); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500; color: var(--color-text-muted);
  transition: border-color 120ms, background 120ms;
}
.po-rcv-shot__tile:hover { border-color: var(--color-primary); background: var(--color-surface); color: var(--color-primary-700); }
.po-rcv-shot__tile svg { width: 24px; height: 24px; }
.po-rcv-shot__note { flex: 1 1 160px; min-width: 0; margin: 0; font-size: 12px; color: var(--color-text-muted); }

/* Grade: a select sized to its widest option (memory.md §9). */
.po-rcv-grade { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.po-rcv-grade .select { width: 156px; flex: none; }
.po-rcv-grade .subtle { font-size: 12px; }

/* Result: Pass / Fail, big, none chosen. A chosen Pass takes the success
   state, a chosen Fail the danger state — the state of the slab, nothing
   else (memory.md §19). */
.po-rcv-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.po-rcv-result .btn { min-height: 52px; justify-content: center; font-size: 15px; font-weight: 600; }
.po-rcv-result .btn svg { width: 18px; height: 18px; }
.po-rcv-result .btn.is-pass { background: var(--color-success-50); border-color: var(--color-success); color: var(--color-success-ink); box-shadow: 0 0 0 1px var(--color-success); }
.po-rcv-result .btn.is-fail { background: var(--color-danger-50); border-color: var(--color-danger); color: var(--color-danger-ink); box-shadow: 0 0 0 1px var(--color-danger); }
.po-rcv-varlabel { margin: 12px 0 6px; font-size: 12px; color: var(--color-text-muted); }
.po-rcv-varrow { display: flex; flex-wrap: wrap; gap: 6px; }
.po-rcv-varrow .btn { min-height: 40px; }
.po-rcv-varrow .btn[aria-pressed="true"] {
  border-color: var(--color-primary); background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-primary); color: var(--color-primary-700);
}

/* Put away: the place, the two-sided Now / Later, and Print Label. */
.po-rcv-put { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.po-rcv-put .input { width: 168px; flex: none; }
.po-rcv-put a { font-size: 12px; color: var(--color-primary-600); text-decoration: none; }
.po-rcv-put-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; }
.po-rcv-put-row .po-sides { min-height: 44px; }
.po-rcv-put-row .btn { min-height: 44px; }

/* ---------- The bar that stays at the bottom -----------------------------------------
   Previous and Save & Next, sticky to the bottom of the screen while the card
   is in view. Save & Next takes the width; it waits until Pass or Fail is
   chosen. */
.po-rcv-bar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: 8px;
  padding: 12px 16px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.po-rcv-bar .btn { min-height: 48px; justify-content: center; }
.po-rcv-bar .btn-primary { flex: 1 1 auto; font-size: 15px; font-weight: 600; }
.po-rcv-bar__word { margin-left: 2px; }

/* ---------- The checked list ---------------------------------------------------------------
   Three columns that fit a phone: the slab, its result, where it went. The
   column shares are this page's own; the last column (place) right-aligns
   as every table's last column does. */
.po-rcv-checked .card-header { gap: 8px 12px; flex-wrap: wrap; }
.po-rcv-checked .card-header h3 { font-size: 14px; }
.po-rcv-checked__h { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.po-rcv-checked__h .po-reading { font-size: 12px; color: var(--color-text-muted); }
.po-rcv-checked [hidden] { display: none; }
.po-rcv-list thead th.col-slab   { width: 31%; }
.po-rcv-list thead th.col-result { width: 43%; }
.po-rcv-list thead th.col-loc    { width: 26%; }
.po-rcv-list td.col-loc { text-align: right; }
.po-rcv-list tr.po-group-row td { text-align: left; }
.po-rcv-list .cell-stack .sub { font-size: 11px; }
.po-rcv-list td a { color: var(--color-primary-600); text-decoration: none; }
.po-rcv-list .sub a,
.po-rcv-sub a { white-space: nowrap; }
.po-rcv-list .po-group-row__label a { color: inherit; }
.po-rcv-list .po-rcv-word { font-weight: 600; }
.po-rcv-list .po-rcv-word.is-ok { font-weight: 500; }

/* ---------- Variances & substitutions --------------------------------------------------------
   One card, subsections. A substitution is a box inside the white card, so it
   stands on the control ground (memory.md §13): what happened to the slab,
   who it was sold or held for, what took its place, who was told. */
.po-rcv-var .card-body { padding: 16px; }
.po-rcv-subs { display: flex; flex-direction: column; gap: 8px; }
.po-rcv-sub {
  padding: 10px 12px;
  background: var(--color-control);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  font-size: 13px; color: var(--color-text);
}
.po-rcv-sub__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 4px; }
.po-rcv-sub__head .po-slab-id { font-size: 13px; }
.po-rcv-sub__why { font-weight: 600; color: var(--color-danger-ink); }
.po-rcv-sub__why.is-ok { color: var(--color-success-ink); }
.po-rcv-sub p { margin: 0; line-height: 1.5; }
.po-rcv-sub a { color: var(--color-primary-600); text-decoration: none; }
.po-rcv-sub__to { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; }
.po-rcv-sub__to svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--color-text-muted); }
.po-rcv-sub__to strong { font-weight: 600; }
.po-rcv-sub__who { margin-top: 4px; font-size: 12px; color: var(--color-text-muted); }
.po-rcv-photo-key { margin-top: 8px; font-size: 12px; color: var(--color-text-muted); }
.po-rcv-claim { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.po-rcv-claim .po-reading { font-size: 13px; }
.po-rcv-claim .po-reading a { color: var(--color-primary-600); text-decoration: none; font-weight: 600; }
.po-rcv-claim__acts { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

/* ---------- Finishing ---------------------------------------------------------------------------
   The last block of the page: the four acts that end a receipt, and the line
   that says nothing ends on its own. */
.po-rcv-foot {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.po-rcv-foot__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.po-rcv-foot__acts .btn { min-height: 44px; }
.po-rcv-foot__acts .spacer { flex: 1; }
.po-rcv-foot__note { margin: 10px 0 0; font-size: 12px; color: var(--color-text-muted); }

/* ---------- Dialogs -------------------------------------------------------------------------------- */
.po-rcv-dlg-msg { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--color-text); }
.po-rcv-dlg-list { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.po-rcv-dlg-list li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; }
.po-rcv-dlg-list .subtle { font-size: 12px; }
.po-rcv-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.po-rcv-grid2 + .po-rcv-grid2,
.po-rcv-grid2 + .field,
.field + .po-rcv-grid2 { margin-top: 14px; }
.po-rcv-mode-sides { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }

/* ---------- Narrow screens ------------------------------------------------------------------------- */
/* Up to 1200 the card column is narrow beside the list: the columns go
   even, the photo becomes a strip above the identity, and the measure fields
   give their padding to the figures. */
@media (max-width: 1200px) {
  .po-rcv-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .po-rcv-slab { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .po-rcv-slab__photo img { width: 100%; height: 120px; }
  .po-rcv-measure { gap: 6px; }
  .po-rcv-measure .input-group .addon { padding: 0 7px; }
  .po-rcv-measure .input-group .input { padding-left: 6px; padding-right: 6px; }
  /* The checked list keeps its three columns in a narrow column: tighter cell padding,
     the place word never broken. */
  .po-rcv-list { --table-pad-x: 8px; }
  .po-rcv-list thead th.col-slab   { width: 30%; }
  .po-rcv-list thead th.col-result { width: 40%; }
  .po-rcv-list thead th.col-loc    { width: 30%; }
  .po-rcv-list td.col-loc .main { white-space: nowrap; }
}
/* One column: the chat bubble rides 42px off the floor on the right, so the
   bar leaves it room and Save & Next is never under it. */
@media (max-width: 767px) {
  .po-rcv-layout { grid-template-columns: minmax(0, 1fr); }
  .po-rcv-bar { padding-right: 76px; }
}
@media (max-width: 768px) {
  .po-rcv-varrow .btn,
  .po-rcv-claim__acts .btn,
  .po-rcv-put a { min-height: 44px; display: inline-flex; align-items: center; }
  .po-rcv-claim__acts { margin-left: 0; }
  .po-rcv-foot__acts .spacer { display: none; }
}
@media (max-width: 480px) {
  .po-rcv-status { padding: 12px; }
  .po-rcv-scan,
  .po-rcv-slab,
  .po-rcv-step { padding-left: 12px; padding-right: 12px; }
  .po-rcv-bar .btn-outline { width: 48px; padding: 0; flex: none; }
  .po-rcv-bar__word { display: none; }
  .po-rcv-bar .btn-primary { font-size: 14px; padding-left: 8px; padding-right: 8px; }
  .po-rcv-slab__id { font-size: 26px; }
  .po-rcv-put .input { flex: 1 1 140px; width: auto; }
  .po-rcv-bar { padding-left: 12px; }
  .po-rcv-foot__acts .btn { flex: 1 1 100%; justify-content: center; }
  .po-rcv-grid2 { grid-template-columns: minmax(0, 1fr); }
  /* Variance photos three across instead of one 120px tile per row. */
  .po-rcv-var .po-photos--lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .po-rcv-var .po-photos--lg img { width: 100%; height: auto; aspect-ratio: 1; }
}