/* ==========================================================================
   Orders — Pickups (orders-pickups.html)

   Spec: build/pages.md §6

   Only what is this page's own: the queue's column shares, the two header
   rows of the one card and the release dialog's pieces (the Slot Board moved
   to css/pages/orders-scheduler.css with its page, 2026-10-12). The
   hub strip, the readings, the hold word, the bulk bar and the gear dialogs are
   css/pages/orders.css's and are not restated here. Every class is `pk-`.
   ========================================================================== */

/* ---------- The location word on the toolbar -----------------------------------
   The yard whose queue and slots this is: a word with the pin, in the muted
   ink, standing after the chips. A category, so grey (memory.md §19). */
.pk-loc { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; margin-left: 4px; }

/* ---------- The queue's header ---------------------------------------------------
   The card opens on a header with the name, the pickup path as words, and the
   counter's two actions; the table follows it. The header already draws its
   bottom hairline, so the wrap gives up its top rule or the two would stack
   into one thick line. The head band stays (memory.md §18): there IS something
   above this table. */
.pk-queue-head { gap: 16px; }
.pk-queue-head + .ord-bulk { margin-top: 12px; }
.pk-queue-head + .table-wrap,
.pk-queue-head + .ord-bulk + .table-wrap { border-top: 0; }
.pk-queue-head .sub a { color: var(--color-primary-600); }
.pk-queue-head .sub a:hover { color: var(--color-primary-700); }
.pk-queue-acts { display: inline-flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Columns ----------------------------------------------------------------
   Eight columns take shares of the table under `table-layout: fixed`. Release
   is the widest reading on the row (four checks as words, or three verbs as
   buttons), so it takes the biggest share; Client carries "Homeowner via
   Meridian Design Studio" under the name and comes next. The money sits last
   and is right-aligned by `.data-table`'s own rule. Shares sum to 100. */
.pk-table th.col-check   { width: 4%; }
.pk-table th.col-order   { width: 13%; }
.pk-table th.col-client  { width: 16%; }
.pk-table th.col-pieces  { width: 16%; }
.pk-table th.col-slot    { width: 13%; }
.pk-table th.col-release { width: 16%; }
.pk-table th.col-status  { width: 12%; }
.pk-table th.col-value   { width: 10%; }
/* A sub-line that carries the row's own controls: the Release button on the
   ready row, the three verbs on the expired one. Buttons stand in a row and
   fall to the next line when the column is narrow; the sub-line's 11px does
   not reach into them. */
.pk-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pk-acts .btn-ghost { padding-left: 6px; padding-right: 6px; }
/* A sub-line naming the documents of the row: the PDF mark at the type's own
   height, then the name as a link. */
.pk-docs a { color: var(--color-primary-600); display: inline-flex; align-items: center; gap: 4px; }
.pk-docs a:hover { color: var(--color-primary-700); }
.pk-pdf { width: 14px; height: 14px; object-fit: contain; }
.pk-table td.col-slot .sub a { color: var(--color-primary-600); }
.pk-table td.col-slot .sub a:hover { color: var(--color-primary-700); }

/* ---------- The release dialog ---------------------------------------------------------
   The checks in two columns: the code with its scanner and its hint on the
   left, who is collecting and the ID switch on the right. Then the signature
   pad, the pick list and the money, each a block with 16px between. */
.pk-checks { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
.pk-code__row { align-items: stretch; }
.pk-code__row .input { max-width: 160px; letter-spacing: 0.08em; }
.pk-code__row .btn { flex: none; }
.pk-hint { font-size: 12px; color: var(--color-text-subtle); }
.pk-hint.is-ok { color: var(--color-success-ink); }
.pk-hint.is-bad { color: var(--color-danger-ink); }
.pk-id { margin-top: 12px; display: inline-flex; }
.pk-sign-field { margin-top: 16px; }
/* The pad: a box on the control ground with a dashed edge, tall enough for a
   hand, the word in the middle and Clear in its corner. */
.pk-sign {
  position: relative;
  min-height: 96px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-control);
  border: 1px dashed var(--color-control-border);
  border-radius: var(--radius);
}
.pk-sign__hint { font-size: 13px; color: var(--color-text-subtle); font-style: italic; }
.pk-sign__clear { position: absolute; right: 6px; bottom: 6px; }
.pk-picklist { margin-top: 16px; }
.pk-picklist__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.pk-picklist__head h4 { margin: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pk-picklist__head .ord-reading { font-size: 12px; color: var(--color-text-muted); }
.pk-picklist .table-wrap { padding-inline: 0; border-top: 0; }
.pk-pick th.col-pick  { width: 9%; }
.pk-pick th.col-slab  { width: 44%; }
.pk-pick th.col-size  { width: 33%; }
.pk-pick th.col-where { width: 14%; }
.pk-pick th.col-pick,
.pk-pick td.col-pick { text-align: center; }
.pk-pick td.col-pick::after { background: var(--row-mark-center); }
/* The money line: the mark, the readings, the ways to take it. A homeowner
   has already paid, so the terminal and the till are stated and disabled. */
.pk-pay {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding: 10px 12px;
  background: var(--color-control);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.pk-pay__ico { width: 16px; height: 16px; flex: none; color: var(--color-text-muted); }
.pk-pay__line { flex: 1 1 240px; min-width: 0; font-size: 12px; }
.pk-pay__due { font-weight: 600; color: var(--color-text); }
.pk-pay__acts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pk-pay__acts .btn { background: var(--color-surface); }
.pk-pay__acts .btn-ghost { background: transparent; }

/* ---------- Narrow screens -----------------------------------------------------------------
   Below 1100 the eight columns fight: the queue keeps its desktop shares on a
   960px table and scrolls sideways inside `.table-wrap`. Four tiles fold to
   two by two, then one to a line on a phone (orders-list.css's reasoning). */
@media (max-width: 1100px) {
  .pk-table { min-width: 960px; }
  .kpi-summary .kpi-summary__cards > .kpi { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 640px) {
  .kpi-summary .kpi-summary__cards > .kpi { flex-basis: 100%; }
}
@media (max-width: 768px) {
  .pk-table .ord-check { width: 18px; height: 18px; }
  .pk-queue-head { flex-wrap: wrap; align-items: flex-start; }
  /* The action row takes the header's full width and wraps inside it; left
     to its content width it would run past the card on a phone. */
  .pk-queue-acts { justify-content: flex-start; flex: 1 1 100%; max-width: 100%; }
  .pk-checks { grid-template-columns: 1fr; }
  .pk-acts .btn,
  .pk-queue-acts .btn { min-height: 40px; }
}
@media (max-width: 480px) {
  .pk-loc { margin-left: 0; }
  /* The queue's two actions share the width. */
  .pk-queue-head .pk-queue-acts .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .pk-code__row { flex-wrap: wrap; }
  .pk-code__row .input { max-width: none; }
  .pk-pay__acts { flex-basis: 100%; }
  /* The pick list keeps its four columns and scrolls inside its wrap rather
     than folding "Rack" letter by letter; the dialog foot puts its four
     buttons two to a line. */
  .pk-pick { min-width: 480px; }
  .pk-foot { flex-wrap: wrap; gap: 8px; }
  .pk-foot .spacer { display: none; }
  .pk-foot .btn { flex: 1 1 calc(50% - 4px); min-width: 0; padding-left: 8px; padding-right: 8px; justify-content: center; }
}