/* ==========================================================================
   Claim Detail (purchase-order-claim.html) — SCL-2026-0005, Marmi Apuani
   Spec: build/po/pages.md § 16. Exemplar: order-claim.html.

   One claim back to a supplier: the slabs, why, the evidence, the thread,
   the decision per line, how it settles and what happens to the stock. The
   shared vocabulary (header fields, path, figure bar, subsections, thread,
   photos, pick rows, two-sided toggle, document rows, timeline) lives in
   purchase-orders.css; this sheet holds only what this page arranges.
   Tokens only, no hex, radius ≤ 7px, nothing under 10px, no `style`.
   ========================================================================== */

/* ---------- Header ------------------------------------------------------------
   The identity column carries a row of fields, so the actions sit level with
   the crumb rather than with the middle of a two-line block. */
.po-clm-head { align-items: flex-start; }
.po-clm-head .po-head__badges a { color: var(--color-primary-600); text-decoration: none; }
.po-clm-head .po-head__badges a:hover { color: var(--color-primary-700); }
.po-clm-reasons { display: inline-flex; align-items: center; gap: 5px; padding: 3px 0; font-size: 12px; }
.po-clm-reasons svg { width: 12px; height: 12px; color: var(--color-text-subtle); flex: none; }

/* The side exit of the claim path, said once after the steps: it is not the
   step after Settled, so it does not sit on the line of steps. */
.po-clm-pathrow .po-path { flex: 0 1 auto; }
.po-clm-pathrow .po-next { margin-left: auto; }
.po-clm-exit { font-size: 12px; color: var(--color-text-subtle); white-space: nowrap; }

/* The figure bar stands in the page stack here (no strip attaches under it). */
.po-clm-stats { margin-bottom: var(--page-gap); }

/* ---------- The one card ------------------------------------------------------- */
.po-clm-card .po-sec__h { align-items: flex-start; }
.po-clm-card .po-sec__h > div:first-child { min-width: 0; flex: 1 1 320px; }
.po-clm-sub { margin: 4px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; max-width: 82ch; }
.po-clm-note { margin: 10px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }
.po-clm-note a,
.po-clm-card .po-kv a,
.po-clm-sub a { color: var(--color-primary-600); text-decoration: none; }
.po-clm-hint { margin: 8px 0 0; font-size: 11px; color: var(--color-text-subtle); line-height: 1.45; }
.po-clm-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.po-clm-aside h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--color-text); }

/* ---------- Lines Claimed -------------------------------------------------------
   Column shares under `table-layout: fixed`; the money column last (app.css
   right-aligns it). Below 860px the wrap scrolls the table instead of
   crushing the reasons into a word a line. */
.po-clm-lines { table-layout: fixed; width: 100%; min-width: 860px; }
.po-clm-lines th.col-slab     { width: 10%; }
.po-clm-lines th.col-mat      { width: 18%; }
.po-clm-lines th.col-dims     { width: 11%; }
.po-clm-lines th.col-area     { width: 8%; }
.po-clm-lines th.col-reason   { width: 22%; }
.po-clm-lines th.col-decision { width: 9%; }
.po-clm-lines th.col-outcome  { width: 10%; }
.po-clm-lines th.col-value    { width: 12%; }
.po-clm-lines td { vertical-align: top; }
.po-clm-lines .col-area { font-variant-numeric: tabular-nums; }
.po-clm-lines td.col-value .cell-stack { align-items: flex-end; }
.po-clm-lines .cell-stack .main { font-weight: 400; }
.po-clm-lines td.col-slab .po-slab-id { font-size: 13px; }
/* The pager app.js adds lands on this strip; the totals are its own prose. */
.po-clm-totals .po-reading { font-size: 12px; color: var(--color-text-muted); }
.po-clm-totals .po-reading strong { color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Evidence ------------------------------------------------------------
   One row per claim line: which slab and what the photos show on the left,
   the photos at 120px on the right. The CV-0906 row adds the approved
   loading photo beside the received face, so the wrong material is read
   side by side. */
.po-clm-ev { display: flex; flex-direction: column; }
.po-clm-ev__row {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px 20px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--color-border);
}
.po-clm-ev__row:first-child { padding-top: 0; }
.po-clm-ev__row:last-child { border-bottom: 0; padding-bottom: 0; }
.po-clm-ev__who .cell-stack .main { font-weight: 600; }
.po-clm-ev__who .cell-stack .sub { line-height: 1.45; }
.po-clm-ev__shots { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 18px; min-width: 0; }
.po-clm-ev__group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.po-clm-ev__label { font-size: 11px; color: var(--color-text-subtle); }
/* Flex, not the shared auto-fill grid: inside a shrink-to-fit group a grid
   has no width to fill and would stack the photos one a row. */
.po-clm-ev .po-photos--lg { display: flex; flex-wrap: wrap; }

/* ---------- Thread ---------------------------------------------------------------- */
.po-clm-composer .field label { font-size: 12px; }
.po-clm-composer .textarea { width: 100%; }

/* ---------- Settlement -------------------------------------------------------------
   The pick rows carry the figure each choice would move, at the row's end. */
.po-clm-pick-val {
  flex: none; font-size: 13px; font-weight: 600; color: var(--color-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.po-clm-settle-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.po-clm-settle-acts .po-clm-hint { margin: 0; flex: 1 1 260px; }

/* ---------- Stock Effect --------------------------------------------------------------
   Three slabs, three answers, side by side: each block its slab, where it is,
   and the choices for it. A crate that never arrived has nothing to move and
   says so in the place its choices would be. */
.po-clm-effect { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
.po-clm-effect__h { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; }
.po-clm-effect__h strong { font-size: 13px; font-weight: 600; color: var(--color-text); }
.po-clm-effect__h span { font-size: 11px; color: var(--color-text-muted); }
.po-clm-effect .po-pick-row { padding: 8px 10px; }
.po-clm-nothing {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; font-size: 12px; color: var(--color-text-muted);
  background: var(--color-control); border: 1px dashed var(--color-control-border);
  border-radius: var(--radius);
}
.po-clm-nothing svg { width: 16px; height: 16px; flex: none; color: var(--color-text-subtle); }

/* ---------- Credit Note ------------------------------------------------------------------ */
.po-clm-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; padding: 22px 16px; text-align: center;
  font: inherit; font-size: 13px; color: var(--color-text-muted);
  background: var(--color-control); border: 1px dashed var(--color-control-border);
  border-radius: var(--radius); cursor: pointer;
}
.po-clm-drop:hover { border-color: var(--color-border-strong); }
.po-clm-drop svg { width: 22px; height: 22px; color: var(--color-text-subtle); }
.po-clm-drop strong { color: var(--color-text); font-weight: 600; }
.po-clm-drop .po-clm-hint { margin: 0; }

/* ---------- Effect on Client Orders --------------------------------------------------------- */
.po-clm-orders { display: flex; flex-direction: column; }
.po-clm-order {
  display: grid; grid-template-columns: 90px minmax(0, 1fr) max-content; gap: 4px 16px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size: 13px;
}
.po-clm-order:first-child { padding-top: 0; }
.po-clm-order:last-child { border-bottom: 0; padding-bottom: 0; }
.po-clm-order a { color: var(--color-primary-600); text-decoration: none; }
.po-clm-order a:hover { color: var(--color-primary-700); }
.po-clm-order__what { min-width: 0; line-height: 1.5; }
.po-clm-order__what .sub { display: block; font-size: 11px; color: var(--color-text-muted); }

/* ---------- Dialogs -------------------------------------------------------------------------
   Controls sized to what they hold, several to a row (memory.md §9). */
.po-clm-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.po-clm-row .field { flex: 0 0 auto; }
.slideover-form .slideover-body .po-clm-row + .field,
.slideover-form .slideover-body .field + .po-clm-row,
.slideover-form .slideover-body .po-clm-row + .po-clm-row,
.slideover-form .slideover-body .field + .alert,
.slideover-form .slideover-body .po-clm-drop + .field,
.slideover-form .slideover-body .po-clm-hint + .field { margin-top: 14px; }
.po-clm-gap { margin-top: 14px; }
.po-clm-w-ref    { width: 170px; }
.po-clm-w-date   { width: 160px; }
.po-clm-w-who    { width: 140px; }
.po-clm-w-days   { width: 110px; }
.po-clm-w-reason { width: 230px; }
.po-clm-w-kind   { width: 120px; }
.po-clm-w-line   { width: 150px; }
.po-clm-w-money  { width: 120px; text-align: right; }
.po-clm-w-src    { width: 150px; }
.po-clm-w-long   { width: 320px; max-width: 100%; }
/* A list of switch rows on the control ground (lines on the claim, files
   sent with it). app.css dresses a label inside a .field as a caption; a
   switch row is a value, so it takes the body type back. */
.po-clm-linepick {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.po-clm-linepick .switch-field {
  color: var(--color-text); font-size: 13px; font-weight: 400;
  text-transform: none; letter-spacing: 0;
}
.po-clm-linepick .cell-stack .main { font-weight: 400; }
.po-clm-linepick .switch-field.is-blocked { opacity: .55; cursor: default; }
/* One row per claim line in Record Decision and Record Credit Note: the
   slab, then the answer, then the figure. White controls on the row's own
   control ground (memory.md §13, the tinted-row case). */
.po-clm-decide { display: flex; flex-direction: column; gap: 8px; }
.po-clm-decide__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 170px 120px; gap: 10px; align-items: center;
  padding: 8px 10px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.po-clm-decide__row .select,
.po-clm-decide__row .input { width: 100%; background-color: var(--color-surface); }
.po-clm-decide__row--2 { grid-template-columns: minmax(0, 1fr) 120px; }
.po-clm-decide__total {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 8px;
  padding: 4px 10px 0; font-size: 13px;
}
.po-clm-decide__total strong { font-variant-numeric: tabular-nums; }
.po-clm-sum { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 10px; align-items: baseline; font-size: 13px; }
.po-clm-sum dt { margin: 0; font-size: 12px; color: var(--color-text-muted); text-align: right; }
.po-clm-sum dd { margin: 0; min-width: 0; }

/* The claim letter preview: a page on the control ground inside the modal. */
.po-clm-letter {
  padding: 16px 18px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius); font-size: 13px; line-height: 1.5;
}
.po-clm-letter h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.po-clm-letter p { margin: 8px 0 0; }
.po-clm-letter .data-table { margin-top: 10px; }
.po-clm-letter .data-table thead th { border-top-color: var(--color-control); }

/* ---------- Narrow screens --------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .po-clm-effect { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-clm-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .po-clm-head { flex-wrap: wrap; }
  .po-clm-two,
  .po-clm-effect { grid-template-columns: minmax(0, 1fr); }
  .po-clm-ev__row { grid-template-columns: minmax(0, 1fr); }
  .po-clm-order { grid-template-columns: minmax(0, 1fr); }
  .po-clm-decide__row,
  .po-clm-decide__row--2 { grid-template-columns: minmax(0, 1fr); }
  .po-clm-card .po-sec .btn,
  .po-clm-card .po-pick-row,
  .po-clm-drop { min-height: 44px; }
}
@media (max-width: 480px) {
  .po-clm-totals { flex-wrap: wrap; }
  .po-clm-totals > .po-reading { flex: 1 1 100%; }
  .po-clm-row .field { flex: 1 1 100%; }
  .po-clm-row .input,
  .po-clm-row .select { width: 100%; }
  .po-clm-pick-val { display: none; }
  .po-clm-ev .po-photos--lg img,
  .po-clm-ev .po-photos--lg .po-photos__more { width: 96px; height: 96px; }
  .po-clm-card .po-doc__ver,
  .po-clm-card .po-doc__vis { white-space: normal; }
  .po-clm-sum { grid-template-columns: minmax(0, 1fr); }
  .po-clm-sum dt { text-align: left; }
}