/* ==========================================================================
   order-claim.html — Claim Detail (CLM-2026-0007)

   Modelled on quote.html's detail header, whose shapes live in quotes.css: a
   page that does not load that sheet redraws them here under its own prefix
   (`clm-`), token for token. Everything shared with the rest of Orders comes
   from css/pages/orders.css (`ord-*`) and is never redefined here.

   Tokens only (app.css :root), radius never past 7px (memory.md §2), nothing
   under 10px (§4), controls and nested boxes on the control ground (§13),
   number before label (§6), switch before label (§5).
   ========================================================================== */

/* ---------- Detail header ------------------------------------------------- */
.clm-head > :first-child { flex: 1 1 0; min-width: 0; }
.clm-crumb {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px; font-size: 12px; color: var(--color-text-subtle);
}
.clm-crumb a { color: var(--color-text-muted); }
.clm-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Client, a bar, the number: the bar is drawn, not typed, so each span is its
   own text and neither carries the other's punctuation. */
.page-title [data-clm-client]::after {
  content: "|"; margin: 0 9px;
  color: var(--color-text-subtle); font-weight: 400;
}
/* The status stands beside 22px type; the 11px badge reads as a footnote
   there, so it steps up without reaching the heading's own size. */
.clm-status { font-size: 13px; padding: 4px 10px; }
.clm-side { font-size: 12px; }
/* The chip row: settable things as fields with a pencil, facts as words,
   records as links. All three share one geometry so the row reads as one
   line; the row backs up 6px so the first word sits under the title. */
.clm-badges { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; margin: 6px 0 0 -6px; }
.clm-badges .subtle { font-size: 12px; padding: 2px 6px; }
.clm-field,
.clm-link,
.clm-fact {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: none; padding: 2px 6px;
  font: inherit; font-size: 12px; color: inherit; text-align: left;
}
.clm-field { cursor: pointer; }
.clm-field:hover,
.clm-link:hover { border-color: var(--color-border); background: var(--color-surface); }
.clm-link { color: var(--color-text); text-decoration: none; }
.clm-link:hover { color: var(--color-primary-700); }
.clm-fact { color: var(--color-text-muted); }
.clm-field svg,
.clm-link svg,
.clm-fact svg { width: 12px; height: 12px; flex: none; color: var(--color-text-subtle); }
.clm-field .clm-edit { opacity: 1; }
.clm-badges .ord-linked { padding: 2px 6px; }
/* The urgent reading in a chip or a value: warn ink while a date is due,
   danger ink once it is past. */
.clm-field .is-warn,
.clm-card .is-warn { color: var(--color-warn-ink); font-weight: 600; }
.clm-card .is-urgent { color: var(--color-danger-ink); font-weight: 600; }

/* ---------- The status path bar --------------------------------------------
   The configured path on the left, the goods and money sub-statuses after a
   hairline. One white strip in the page stack, one --page-gap under it (§22). */
.clm-pathbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 10px 14px; margin-bottom: var(--page-gap);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.ord-reading.clm-substatus {
  font-size: 12px; color: var(--color-text-muted);
  padding-left: 18px; border-left: 1px solid var(--color-border);
}

/* ---------- The figure bar ----------------------------------------------------
   One box, hairlines between readings (quotes.css `.req-stats--bar`). The
   lines are drawn on each cell's right and bottom and the bar clips the ones
   that land on its own edge, so the bar wraps on a narrow screen without a
   stray rule at the start of a row. */
.clm-stats {
  display: flex; flex-wrap: wrap; align-items: stretch;
  margin-bottom: var(--page-gap); overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.clm-stat {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 8px 14px; margin: 0 -1px -1px 0;
  border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.clm-stat .v { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.clm-stat .l { font-size: 12px; color: var(--color-text-muted); }
.clm-stat--warn .v { color: var(--color-warn-ink); }
.clm-stat:last-child { border-right: 0; }

/* ---------- The card and its sections -----------------------------------------
   One card, sections divided by the border hairline. A section opens with its
   title and a line saying what it holds, the actions on the same row. */
.clm-sec { padding: 16px; }
.clm-sec + .clm-sec { border-top: 1px solid var(--color-border); }
/* Inside the tab shell the shell is the white box and its padding the inset,
   so a section gives up its own sides, the first its top, the last its foot
   (order-invoice.css, same words). The lines table gives up its inset too. */
.tab-shell .clm-card > .clm-sec { padding-left: 0; padding-right: 0; }
.tab-shell .clm-card > .clm-sec:first-child { padding-top: 0; }
.tab-shell .clm-card > .clm-sec:last-child { padding-bottom: 0; }
.tab-shell .clm-sec--table .clm-sec__head { padding: 0; }
.tab-shell .clm-sec--table > .table-wrap { padding-inline: 0; }
.tab-shell .clm-sec--table .clm-note { margin-inline: 0; }
.clm-sec__head { display: flex; align-items: flex-start; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.clm-sec__head > div:first-child { flex: 1 1 320px; min-width: 0; }
.clm-sec__head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.clm-sec__sub { margin: 4px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; max-width: 78ch; }
.clm-sec__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.clm-sec__acts .ord-reading { font-size: 12px; color: var(--color-text-muted); }
.clm-h4__sub { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--color-text-subtle); }
.clm-aside h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.clm-aside > * + * { margin-top: 16px; }
.clm-aside .field { margin-top: 12px; }
.clm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.clm-two--wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.clm-card .ord-kv dd .badge { vertical-align: middle; }
.clm-card .ord-kv dd a { color: var(--color-primary-700); }
.clm-hint { margin: 8px 0 0; font-size: 11px; color: var(--color-text-subtle); line-height: 1.45; }
.clm-hint--top { margin: 0 0 8px; }
.clm-note { margin: 12px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }
.clm-note strong { color: var(--color-text); font-weight: 500; }

/* ---------- Lines Claimed ----------------------------------------------------------
   The section gives up its padding so the table takes the house inset (§20)
   and the pager strip runs the card's width. Column shares sum to 100%. */
.clm-sec--table { padding: 0; }
.clm-sec--table .clm-sec__head { padding: 16px 16px 0; }
.clm-sec--table .clm-note { margin: 10px 16px 14px; }
.clm-lines { min-width: 960px; }
.clm-lines thead th.col-slab     { width: 19%; }
.clm-lines thead th.col-size     { width: 10%; }
.clm-lines thead th.col-area     { width: 7%; }
.clm-lines thead th.col-kg       { width: 7%; }
.clm-lines thead th.col-invoiced { width: 10%; }
.clm-lines thead th.col-damage   { width: 17%; }
.clm-lines thead th.col-dispo    { width: 18%; }
.clm-lines thead th.col-claimed  { width: 12%; }
.clm-totals .ord-reading { font-size: 12px; color: var(--color-text-muted); }
.clm-totals strong { color: var(--color-text); font-weight: 600; }

/* ---------- Resolution ---------------------------------------------------------------
   The options are a list of rows on the control ground, none pressed until
   the rep picks one (quotes.css `.req-pick-row`). The mark on the right is
   invisible until the row is pressed. */
.clm-pick {
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius); overflow: hidden;
}
.clm-pick-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px;
  border: 0; border-bottom: 1px solid var(--color-control-border);
  background: none; cursor: pointer; text-align: left; font: inherit; color: var(--color-text);
}
.clm-pick-row:last-child { border-bottom: 0; }
.clm-pick-row:hover { background: var(--color-surface-alt); }
.clm-pick-row[aria-pressed="true"] { background: var(--color-primary-50); }
.clm-pick-ico { width: 34px; height: 34px; background: var(--color-surface); }
.clm-pick-ico svg { width: 16px; height: 16px; }
.clm-pick-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.clm-pick-name { font-size: 13px; font-weight: 500; }
.clm-pick-meta { font-size: 11px; color: var(--color-text-muted); line-height: 1.4; }
.clm-pick-val { font-size: 13px; font-weight: 600; white-space: nowrap; }
.clm-pick-check { width: 16px; height: 16px; flex: none; color: transparent; }
.clm-pick-row[aria-pressed="true"] .clm-pick-check { color: var(--color-primary); }
.clm-propose { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.clm-propose .btn { flex: none; }
.clm-propose__note { flex: 1 1 280px; font-size: 12px; color: var(--color-text-muted); line-height: 1.45; }
.clm-costs {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--color-border);
}
.clm-costs .ord-reading { font-size: 12px; color: var(--color-text-muted); }
.clm-costs strong { color: var(--color-text); }
/* The three boxes beside the options: a box inside a white card takes the
   control ground, and a field inside that box inverts back to white (§13). */
.clm-calc,
.clm-ai,
.clm-history {
  padding: 12px 14px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.clm-calc .input,
.clm-decide .input,
.clm-decide .select { background-color: var(--color-surface); }
.clm-calc__total { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--color-text-muted); }
.clm-money { width: 110px; text-align: right; }
.clm-ai__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; }
.clm-ai__head svg { width: 16px; height: 16px; color: var(--color-primary); }
.clm-ai__head .ord-reading { font-size: 12px; color: var(--color-text-muted); }
.clm-ai p { margin: 0 0 6px; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }
.clm-ai__suggest { color: var(--color-text); }
.clm-ai__acts { display: flex; gap: 8px; margin-top: 8px; }
/* The client's record sits under the options, so the two columns end level. */
.clm-history { margin-top: 16px; }
.clm-history h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.clm-history .ord-reading { font-size: 12px; color: var(--color-text-muted); }
.clm-history strong { color: var(--color-text); }

/* ---------- Evidence --------------------------------------------------------------------- */
.clm-photos a { display: block; width: 72px; height: 72px; }
.ord-reading.clm-photo-notes { display: flex; margin-top: 10px; font-size: 12px; color: var(--color-text-muted); }
.clm-photo-notes strong { color: var(--color-text); }
.clm-docs-inline { margin-top: 12px; border-top: 1px solid var(--color-border); }

/* ---------- Documents --------------------------------------------------------------------- */
.clm-docs .ord-doc__name { flex: 0 1 auto; }
.clm-docs .ord-doc__ver { flex: 1 1 220px; min-width: 0; white-space: normal; }
.clm-docs .badge { flex: none; }

/* ---------- Conversation & Notes -------------------------------------------------------- */
.clm-thread { display: flex; flex-direction: column; gap: 10px; }
.clm-msg {
  padding: 10px 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.clm-msg--client { border-left: 3px solid var(--color-border-strong); }
.clm-msg--ours { border-left: 3px solid var(--color-primary); }
.clm-msg--note { border-style: dashed; }
.clm-msg header { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 4px; font-size: 12px; }
.clm-msg header .ord-reading { font-size: 11px; color: var(--color-text-subtle); }
.clm-msg p { margin: 0; font-size: 13px; line-height: 1.5; }
.clm-mention { color: var(--color-primary-700); font-weight: 500; text-decoration: none; }
.ord-reading.clm-attach { margin-top: 6px; font-size: 11px; color: var(--color-text-muted); }
.clm-reply { margin-top: 4px; }
.clm-reply .field + .field { margin-top: 12px; }
.clm-saved { width: auto; max-width: 100%; }
.clm-reply__acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.clm-reply__acts > :last-child { margin-left: auto; }

/* ---------- Dialogs ------------------------------------------------------------------------
   Controls are sized to what they hold, several to a row (§9). */
.clm-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.clm-row .field { flex: 0 0 auto; }
/* app.css spaces .field after .field inside a form slide-over; a row of
   fields is a field for that purpose. */
.slideover-form .slideover-body .clm-row + .field,
.slideover-form .slideover-body .field + .clm-row,
.slideover-form .slideover-body .clm-row + .clm-row,
.slideover-form .slideover-body .field + .alert { margin-top: 14px; }
.clm-w-kind    { width: 160px; }
.clm-w-reason  { width: 250px; }
.clm-w-sub     { width: 140px; }
.clm-w-ref     { width: 160px; }
.clm-w-date    { width: 160px; }
.clm-w-who     { width: 140px; }
.clm-w-days    { width: 110px; }
.clm-w-until   { width: 230px; }
.clm-w-line    { width: 170px; }
.clm-w-outcome { width: 230px; }
.clm-w-long    { width: 340px; }
.clm-field-gap { margin-top: 14px; }
.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);
}
/* app.css dresses every label inside a .field as a caption (12px, uppercase);
   a switch row is a value, not a caption, so it takes the body type back. */
.clm-linepick .switch-field {
  color: var(--color-text); font-size: 13px; font-weight: 400;
  text-transform: none; letter-spacing: 0;
}
.clm-linepick .cell-stack .main { font-weight: 400; }
.switch-field.is-blocked { opacity: .55; cursor: default; }
.clm-decide { display: flex; flex-direction: column; gap: 8px; }
.clm-decide__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 230px 110px; gap: 10px; align-items: center;
  padding: 8px 10px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.clm-decide__row .select { width: 100%; }
.clm-summary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 10px; align-items: baseline; font-size: 13px; }
.clm-summary__l { font-size: 12px; color: var(--color-text-muted); text-align: right; }
.clm-kv-modal { margin-top: 12px; }
.clm-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 16px; text-align: center;
  font-size: 13px; color: var(--color-text-muted);
  background: var(--color-control); border: 1px dashed var(--color-control-border);
  border-radius: var(--radius);
}
.clm-drop svg { width: 20px; height: 20px; color: var(--color-text-subtle); }
.clm-drop .clm-hint { margin: 0; }
.clm-linkbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--color-primary-700); cursor: pointer; }
/* Receiving: a small grid of the line, what is due, what came back, what came
   back damaged. The counts are inputs sized to two digits. */
.clm-rcv { border: 1px solid var(--color-control-border); border-radius: var(--radius); background: var(--color-control); overflow: hidden; }
.clm-rcv__head,
.clm-rcv__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 52px 76px 76px;
  gap: 10px; align-items: center; padding: 8px 11px;
}
.clm-rcv__head {
  font-size: 11px; font-family: 'Hanken Grotesk', sans-serif; text-transform: uppercase;
  letter-spacing: 0.05em; font-weight: 700; color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-control-border);
}
.clm-rcv .num { text-align: right; }
.clm-rcv__row .cell-stack { min-width: 0; }
.clm-rcv__row .cell-stack .sub { white-space: normal; }
.clm-rcv__qty { padding: 5px 8px; font-size: 13px; text-align: right; background: var(--color-surface); }

/* ---------- Narrow screens ------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .clm-two--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 768px) {
  /* The title column takes the whole row and the actions drop under it;
     with a zero flex-basis the actions would otherwise squeeze the title to a
     word a line. */
  .clm-head > :first-child { flex: 1 1 100%; }
  .clm-two,
  .clm-two--wide { grid-template-columns: minmax(0, 1fr); }
  .ord-reading.clm-substatus { padding-left: 0; border-left: 0; }
  .clm-sec__acts { margin-left: 0; }
  .clm-decide__row { grid-template-columns: minmax(0, 1fr); }
  .clm-decide__row .clm-money { width: 100%; text-align: left; }
  .clm-rcv__head,
  .clm-rcv__row { grid-template-columns: minmax(0, 1fr) 40px 64px 64px; gap: 6px; padding: 8px; }
  .clm-sec .btn,
  .clm-pick-row { min-height: 44px; }
}
@media (max-width: 480px) {
  .page-title [data-clm-client]::after { margin: 0 7px; }
  /* Two readings a row; a label that no longer fits beside its number drops
     under it (qualifier under the value, never a word a line). */
  .clm-stat { flex: 1 1 50%; flex-wrap: wrap; gap: 2px 7px; }
  /* app.css keeps the pager strip on one line; here its first child is the
     totals prose, which would squeeze the page controls past the card edge.
     The totals take the first row, the pager closes the second. */
  .clm-totals { flex-wrap: wrap; }
  .clm-totals > .ord-reading { flex: 1 1 100%; }
  .clm-row .field { flex: 1 1 100%; }
  .clm-row .input,
  .clm-row .select { width: 100%; }
  .clm-pick-val { display: none; }
  .clm-reply__acts .btn { margin-left: 0; }
  .clm-badges .clm-fact { max-width: 100%; }
}