/* ==========================================================================
   Purchase Orders — Packing List Import (arrival-packing-list.html)

   Spec: build/po/pages.md §11

   Only what is this page's own: the step navigation row, the two-column
   step layouts, the last-file row, the mapping table, the column shares of
   the three slab tables, the "What Confirming Does" list, the linked
   supplier card, and how the page folds at 1200 / 768 / 480. Everything
   another Purchase Orders page also says (readings, `.po-sec`, `.po-kv`,
   `.po-slabs`, `.po-timeline`, `.po-empty`, the gear dialogs) is in
   css/pages/purchase-orders.css. Classes here use the `po-apl-` prefix.
   No money is drawn on this page, so nothing here styles a figure in a
   currency.
   ========================================================================== */

/* ---------- Header -------------------------------------------------------------
   app.css keeps a page header on one line; a detail header wraps under 768 so
   the identity column can take the full width (purchase-orders.css already
   gives it a 100% basis there). */
@media (max-width: 768px) {
  .po-apl-head { flex-wrap: wrap; }
}

/* ---------- The panel ----------------------------------------------------------
   The step strip's one white panel stands off the linked-supplier card below
   it by the page gap (memory.md §22). A table inside the panel already has the
   shell's 16px on each side, so it takes no inset on top (§20). */
.po-apl-shell { margin-bottom: var(--page-gap); }
.po-apl-shell .table-wrap { padding-inline: 0; }

/* Back / Next, right-aligned at the top of every step, as the wizard
   exemplar draws them. */
.po-apl-nav {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
  padding-top: 6px; margin-bottom: 6px;
}

/* Two columns for Upload and Confirm: the working side wider, the history or
   the explanation narrower. One column from 1200 down. */
.po-apl-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: 32px; align-items: start;
}
.po-apl-grid > .po-sec { padding-top: 0; padding-bottom: 0; }
.po-apl-grid > .po-sec + .po-sec { border-top: 0; }

/* ---------- Upload ---------------------------------------------------------------
   The last file read is a box inside the white panel, so it stands on the
   control ground (§13): the sheet mark, its name and rows, and Download. */
.po-apl-file {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 10px 12px;
  background: var(--color-control);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.po-apl-file .cell-stack { flex: 1 1 0; min-width: 0; }
.po-apl-file .cell-stack .main { overflow-wrap: anywhere; }
.po-apl-file__ico { width: 20px; height: 20px; flex: none; color: var(--color-success-ink); }
.po-apl-file__act { flex: none; }
.po-apl-subh {
  margin: 18px 0 0; font-size: 12px; font-weight: 600; color: var(--color-text-muted);
}
.po-apl-fields { margin-top: 6px; }

/* ---------- Map Columns ----------------------------------------------------------
   Their header word in the body sans at 12px weight 600 (a column name read
   off a file, not a code), the arrow in the lightest ink, the select sized to
   its longest option (§9), the sample in tabular figures. */
.po-apl-map { min-width: 600px; }
.po-apl-map th.col-their  { width: 18%; }
.po-apl-map th.col-arrow  { width: 5%; }
.po-apl-map th.col-ours   { width: 30%; }
.po-apl-map th.col-sample { width: 47%; }
.po-apl-map td.col-arrow svg { width: 15px; height: 15px; color: var(--color-text-subtle); }
.po-apl-code { font-size: 12px; font-weight: 600; color: var(--color-text); }
.po-apl-sel { width: 200px; max-width: 100%; display: inline-block; vertical-align: middle; }
.po-apl-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.po-apl-save {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin-top: 14px;
}
.po-apl-save .switch-field { color: var(--color-text); }
.po-apl-save__note { font-size: 12px; color: var(--color-text-subtle); }

/* ---------- Preview & Match ------------------------------------------------------
   The checks: two key–value blocks side by side, each ending where its
   content ends (§16). */
.po-apl-checks { display: flex; flex-wrap: wrap; gap: 6px 48px; }
.po-apl-closes { color: var(--color-warn-ink); font-weight: 600; }

/* Shipped against ordered, one row per PO line, and the total under them. */
.po-apl-lines { min-width: 760px; }
.po-apl-lines th.col-line    { width: 9%; }
.po-apl-lines th.col-mat     { width: 24%; }
.po-apl-lines th.col-ordered { width: 15%; }
.po-apl-lines th.col-shipped { width: 18%; }
.po-apl-lines th.col-area    { width: 9%; }
.po-apl-lines th.col-kg      { width: 9%; }
.po-apl-lines th.col-check   { width: 16%; }
.po-apl-lines tr.po-apl-total td { font-weight: 600; border-top: 1px solid var(--color-border-strong); }
.po-apl-lines tr.po-apl-total td::after { content: none; }

.po-apl-viewbar { padding-top: 2px; }
.po-apl-empty { margin-bottom: 4px; }

/* The 36 rows. Ten columns take shares of the table; under 1000px of table
   it scrolls inside its wrap rather than crushing the sizes. The check sits
   last (right-aligned by app.css) and is wide enough for the changed-size
   word over its two sizes. */
.po-apl-table { min-width: 1000px; }
.po-apl-table th.col-n     { width: 4%; }
.po-apl-table th.col-ref   { width: 10%; }
.po-apl-table th.col-slab  { width: 9%; }
.po-apl-table th.col-mat   { width: 22%; }
.po-apl-table th.col-dims  { width: 11%; }
.po-apl-table th.col-area  { width: 7%; }
.po-apl-table th.col-kg    { width: 6%; }
.po-apl-table th.col-grade { width: 9%; }
.po-apl-table th.col-line  { width: 7%; }
.po-apl-table th.col-check { width: 15%; }
.po-apl-table td.col-n { color: var(--color-text-subtle); }
.po-apl-rows .card-footer { padding-inline: 0; }

/* ---------- Confirm ----------------------------------------------------------------
   What confirming does: four sentences, each with its icon, no fill. */
.po-apl-does {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0; padding: 0; list-style: none;
  font-size: 13px; color: var(--color-text); line-height: 1.45;
}
.po-apl-does li { display: flex; align-items: flex-start; gap: 8px; }
.po-apl-does svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--color-text-muted); }

/* ---------- From a Linked Supplier ---------------------------------------------------
   A card of its own under the step panel: the lead sentence, the facts, five
   slabs as a preview (no pager), and the closing line with the setting. */
.po-apl-linked__lead { margin: 0 0 12px; font-size: 13px; color: var(--color-text); }
.po-apl-linked__kv { margin-bottom: 14px; }
.po-apl-linked .table-wrap { padding-inline: 0; }
.po-apl-ltable { min-width: 900px; }
.po-apl-ltable th.col-slab  { width: 9%; }
.po-apl-ltable th.col-code  { width: 9%; }
.po-apl-ltable th.col-mat   { width: 18%; }
.po-apl-ltable th.col-dims  { width: 11%; }
.po-apl-ltable th.col-area  { width: 7%; }
.po-apl-ltable th.col-kg    { width: 6%; }
.po-apl-ltable th.col-box   { width: 12%; }
.po-apl-ltable th.col-line  { width: 8%; }
.po-apl-ltable th.col-state { width: 20%; }
.po-apl-linked__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
  margin-top: 10px; font-size: 12px; color: var(--color-text-subtle);
}
.po-apl-linked__setting { display: inline-flex; align-items: center; gap: 5px; color: var(--color-text-muted); }
.po-apl-linked__setting svg { width: 14px; height: 14px; flex: none; align-self: flex-start; margin-top: 1px; }

/* Words in a slab table carry the result family's ink (purchase-orders.css
   colours `.is-ok` / `.is-warn` inside `.po-slabs`); the main line of a
   two-line word keeps the row's 12px. */
.po-apl-table .cell-stack .main,
.po-apl-ltable .cell-stack .main { font-size: 12px; }

/* ---------- Narrow screens ------------------------------------------------------- */
@media (max-width: 1200px) {
  .po-apl-grid { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .po-apl-grid > .po-sec + .po-sec { border-top: 1px solid var(--color-border); padding-top: 16px; }
}
@media (max-width: 768px) {
  .po-apl-nav .btn { min-height: 44px; }
  .po-apl-checks { flex-direction: column; }
  .po-apl-file { flex-wrap: wrap; }
  .po-apl-rows .card-footer { flex-wrap: wrap; }
  .po-apl-rows .card-footer > span:first-child { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .po-apl-nav { justify-content: stretch; }
  .po-apl-nav .btn { flex: 1 1 0; justify-content: center; }
  .po-apl-file__act { margin-left: 30px; }
  .po-apl-save { align-items: flex-start; }
}