/* crm/app.css — the app's OWN stylesheet. It sits BENEATH the shell's
   shell.css and adds layout rules only. It NEVER overrides a shell token and
   defines none: every colour, size and duration below is a shell token.

   Do not put shell chrome rules here. If a shell-rendered element needs a
   rule, that rule belongs in shell.css at HQ's word. (The pressed chip
   came here first and moved to shell.css in shell part S6, ruling 298.) */

/* ---- heads and rows ---- */
.crm-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.crm-head h1, .crm-head h2 { margin: 0; }
.crm-crumb { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.crm-status { margin: 0 0 var(--sp-3); font-weight: 700; color: var(--accent); }

/* ---- the search row and the filter chips (full-width rows, PLACEMENT §1) ---- */
.crm-search { margin-bottom: var(--sp-2); }
.crm-search-row { display: flex; gap: var(--sp-2); }
.crm-search-row .input { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; }
/* the hint ends in "…" at 320 instead of being cut mid-word (fix round 1) */
.crm-search-row .input::placeholder { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.crm-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.crm-type { margin-bottom: var(--sp-4); }
.crm-pick { flex: 1 1 0; justify-content: center; }

/* ---- the list ---- */
.crm-rows { list-style: none; margin: 0; padding: 0; }
.crm-rows li + li { border-top: 1px solid var(--border); }
.crm-row { color: inherit; text-decoration: none; min-height: var(--touch-min); }
.crm-row .q-main { display: flex; flex-direction: column; }
.crm-row-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-1); max-width: 45%; }

/* ---- forms ---- */
.crm-form { margin-top: var(--sp-2); }
.crm-fieldset { border: 0; margin: 0 0 var(--sp-2); padding: 0; min-width: 0; }
.crm-fieldset legend { font-size: var(--fs-h2); font-weight: 700; padding: 0; margin: 0 0 var(--sp-3); }
.crm-pin legend { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); margin-bottom: var(--sp-1); }
.crm-pair { display: grid; grid-template-columns: 1fr; gap: 0 var(--sp-3); }
@media (min-width: 480px) {
  .crm-pair { grid-template-columns: 1fr 1fr; }
}
.crm-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }
.crm-actions form { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.crm-form > .crm-actions { justify-content: flex-end; }
.crm-refusal { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.crm-guard {
  border: 1px solid var(--warn); background: var(--amber-tint); color: var(--text);
  border-radius: var(--r-sm); padding: var(--sp-3); margin: 0 0 var(--sp-4);
}
.crm-guard p { margin: 0 0 var(--sp-2); font-weight: 700; color: var(--warn); }
.crm-guard ul { margin: 0; padding-left: var(--sp-4); }

/* ---- a TAP LINK (CRM-1 fix round 1, defect 6): every tel:, mailto:, map
   link and the guard's "open it" link is a 44px target; a phone number or an
   email never breaks mid-value (a too-long one is cut with an ellipsis, it
   never pushes the page sideways) ---- */
.crm-tap {
  display: inline-block; vertical-align: middle; max-width: 100%;
  min-height: var(--touch-min); line-height: var(--touch-min);
  padding: 0 var(--sp-1); margin: 0 calc(-1 * var(--sp-1));
  white-space: nowrap; overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis;
}
.crm-links, .crm-bits { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-4); row-gap: 0; }

/* ---- the Customer page ---- */
.crm-dead-banner { margin-bottom: var(--sp-4); }
.crm-card h1 { margin-bottom: var(--sp-1); }
.crm-card .eyebrow { margin: 0 0 var(--sp-1); }
.crm-company { margin: 0 0 var(--sp-2); color: var(--muted); }
.crm-pills { margin: 0 0 var(--sp-3); display: flex; gap: var(--sp-1); flex-wrap: wrap; }
/* each fact is a row that WRAPS between its label and its value on a
   narrow phone (the value drops under the label), never inside the value */
.crm-facts { margin: 0 0 var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.crm-fact { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-3); }
.crm-fact dt { flex: 0 0 8.5em; font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.crm-fact dd { margin: 0; flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.crm-pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 var(--sp-1); }
.crm-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.crm-item { padding: var(--sp-3) 0; }
.crm-item + .crm-item { border-top: 1px solid var(--border); }
.crm-item-head { margin: 0 0 var(--sp-1); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.crm-meta { margin: 0; font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.crm-retired { opacity: .62; }
.crm-empty { margin: var(--sp-2) 0 0; color: var(--muted); }
.crm-add { margin-bottom: var(--sp-2); }
.crm-changes { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.crm-inline, .crm-dead { margin-top: var(--sp-2); }
.crm-inline > summary, .crm-dead > summary { list-style: none; }
.crm-inline > summary::-webkit-details-marker, .crm-dead > summary::-webkit-details-marker { display: none; }
.crm-inline[open] > summary, .crm-dead[open] > summary { margin-bottom: var(--sp-3); }
.crm-dead form { margin-top: var(--sp-2); }
.crm-actions > details { margin: 0; }

/* ---- CRM-3: New contract, the contract page ---- */
/* a radio or a checkbox with its label: the whole row is the 44px target */
.crm-check {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-2); row-gap: 0;
  min-height: var(--touch-min); padding: var(--sp-1) 0;
}
.crm-check input[type="radio"], .crm-check input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; }
.crm-check label { min-height: var(--touch-min); display: inline-flex; align-items: center; cursor: pointer; }
.crm-clause + .crm-clause { border-top: 1px solid var(--border); }
.crm-clause .crm-meta { flex: 1 1 100%; margin: 0 0 var(--sp-2) calc(22px + var(--sp-2)); }
/* the draws: a list of rows, never a four-column table at 320px */
.crm-draws { list-style: none; margin: 0; padding: 0; }
.crm-draw { padding: var(--sp-3) 0; }
.crm-draw + .crm-draw { border-top: 1px solid var(--border); }
.crm-draw-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 var(--sp-4); }
.crm-draw-row .field { flex: 1 1 9em; margin-bottom: 0; }
.crm-draw-row .input { font-variant-numeric: tabular-nums; }
.crm-table { width: 100%; border-collapse: collapse; }
.crm-table th, .crm-table td { text-align: left; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.crm-table .num { text-align: right; padding-left: var(--sp-3); white-space: nowrap; }
/* the contract's own text: sections, each its heading then its lines */
.crm-doc h3 { margin: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-sm); }
.crm-doc h3:first-child { margin-top: 0; }

/* ---- CRM-4: the top tabs (the shell's .tabbar / .tab; the lit tab's
   underline here because the shell's sliding indicator needs its script) ---- */
.crm-tabs { margin: 0 0 var(--sp-3); padding: 0; border-bottom: 1px solid var(--border); }
.crm-tabs .tab.on { box-shadow: inset 0 -3px 0 var(--brand); }

/* ---- Home ---- */
.crm-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.crm-count-head { display: flex; align-items: center; gap: var(--sp-2); }
.crm-home-card { margin-bottom: var(--sp-4); }
/* the LOUD card: new leads waiting ("look and accept", charter §C8) */
.crm-loud { border-color: var(--brand); box-shadow: inset 4px 0 0 var(--brand); }
.crm-loud h2 { color: var(--brand-strong); }

/* ---- the Send sheet (a <details>; works with the script off) ---- */
.crm-actions > .crm-send[open] { flex: 1 1 100%; }
.crm-send > summary { list-style: none; }
.crm-send > summary::-webkit-details-marker { display: none; }
.crm-send-sheet { margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.crm-send-roads { margin-top: 0; }
.crm-sent { margin-top: var(--sp-3); }
.crm-sent .crm-fieldset { margin: 0; }
/* the page script asks "Sent?" only after a road was used */
.crm-send-js:not(.crm-asked) .crm-sent { display: none; }
.crm-shared .crm-send-roads, .crm-shared .crm-sent-how, .crm-shared .crm-empty { display: none; }
/* no Email and no Text on file: "Sent?" waits for the share sheet */
.crm-send:not(.crm-shared) .crm-sent-share { display: none; }
/* ONE GREEN PER VIEW (CRM-4 fix round 1, item 3): while the sheet is open,
   its Yes is the one green — every other green on the contract card (the
   Send button itself on a draft, the signed upload on a sent contract) is
   drawn as the shell's ghost button, from the shell's own tokens */
.crm-card:has(.crm-send[open]) .btn-primary:not(.crm-yes) {
  background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: 0 1px 2px rgba(43,33,20,.05);
}

/* ---- site photos: thumbnails in "Files on this job" ---- */
.crm-photo { display: flex; gap: var(--sp-3); align-items: flex-start; }
.crm-thumb-link { flex: 0 0 auto; display: block; min-height: var(--touch-min); }
.crm-thumb { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm); background: var(--border); }
.crm-file-body { flex: 1 1 auto; min-width: 0; }
.crm-check-note { flex: 1 1 100%; margin: 0 0 var(--sp-1) calc(22px + var(--sp-2)); }