/* Kontex Ventes — Demandes de modification (#/modifications, order and job-sheet cards, request form).
   Spec: design/13-phase2-spec.md §2.C. Feature C owns this file.
   Kontex Design System only (tokens of /kontex.css): one amber element per screen at most, Teal 700 actions,
   Plex Mono for money and refs, no horizontal scroll at 390 px. Every class is prefixed "cr-". */

/* ---------- request form (wide drawer, full screen on phones) ---------- */
.cr-form{gap:16px}
.cr-card{border:1px solid var(--border);border-radius:var(--kx-radius-md);padding:16px;background:var(--surface)}
.cr-card h3{font:600 15px/1.4 var(--kx-font-sans);color:var(--text)}
.cr-line{border:1px solid var(--border);border-radius:var(--kx-radius-md);background:var(--surface);min-width:0}
.cr-line>summary{list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;cursor:pointer;border-radius:var(--kx-radius-md)}
.cr-line>summary::-webkit-details-marker{display:none}
.cr-line>summary:hover{background:var(--tint)}
.cr-line__chev{display:inline-flex;color:var(--brand-text);transition:transform var(--kx-dur-micro) var(--kx-ease)}
.cr-line[open]>summary .cr-line__chev{transform:rotate(90deg)}
.cr-line__t{font:600 15px/1.4 var(--kx-font-sans);color:var(--text);flex:1 1 200px;min-width:0}
.cr-line__body{padding:0 16px 16px;gap:16px}
.cr-line .field>.lab{font:500 13px/1.4 var(--kx-font-sans);color:var(--text2)}
.cr-pls,.cr-dss{display:flex;flex-direction:column;gap:10px}
.cr-pl{padding:12px}
.cr-pl .row{gap:10px}
.cr-ds{grid-template-columns:repeat(3,minmax(0,1fr)) auto}
.cr-ds .field label{font:500 12px/1.4 var(--kx-font-sans);color:var(--text3)}
@media (max-width:640px){
  .cr-line>summary{padding:12px}
  .cr-line__body{padding:0 12px 12px}
  .cr-pl .row .field,.cr-pl .row .field.narrow{flex:1 1 130px}
  .cr-card{padding:12px}
}

/* ---------- request lists (order card, job card) ---------- */
.cr-items{display:flex;flex-direction:column}
.cr-item{display:flex;flex-direction:column;gap:6px;padding-block:12px;border-bottom:1px solid var(--border-subtle);min-width:0}
.cr-item:first-child{padding-top:0}
.cr-item:last-child{border-bottom:none;padding-bottom:0}
.cr-item__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cr-item__head b{font:600 14px/1.4 var(--kx-font-sans);color:var(--text)}
.cr-item .note{overflow-wrap:anywhere}
.cr-quote{color:var(--text3)}
.cr-outcome{display:flex;gap:8px;align-items:flex-start;font:600 14px/1.45 var(--kx-font-sans);color:var(--text)}
.cr-outcome .ico{color:var(--brand-text);margin-top:2px}
.cr-micro{margin-top:8px}

/* ---------- the salesperson's decision panel ---------- */
.cr-decide{border:1px solid var(--pend-line);background:var(--surface);border-radius:var(--kx-radius-md);padding:16px;gap:12px}
.cr-decide__head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.cr-decide__head h3{font:600 15px/1.4 var(--kx-font-sans);color:var(--text)}
.cr-decide__acts{justify-content:flex-end}
/* « Ligne · Avant · Après · Écart »: one block per changed line, the two sides next to each other (stacked on phones) */
.cr-cmp{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--kx-radius-sm)}
.cr-cmp__line{display:flex;flex-direction:column;gap:10px;padding:12px;border-bottom:1px solid var(--border-subtle);min-width:0}
.cr-cmp__line:last-child{border-bottom:none}
.cr-cmp__head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px;flex-wrap:wrap}
.cr-cmp__head b{font:600 14px/1.4 var(--kx-font-sans);color:var(--text);min-width:0;overflow-wrap:anywhere}
.cr-cmp__delta{min-width:0;gap:8px}
.cr-cmp__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cr-cmp__col{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px;border-radius:var(--kx-radius-sm);background:var(--bg)}
.cr-cmp__col--after{background:var(--surface);border:1px solid var(--border)}
.cr-cmp__lab{font:600 11px/1.2 var(--kx-font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.cr-spec{font:400 13px/1.5 var(--kx-font-sans);color:var(--text2);margin:0 0 6px;overflow-wrap:anywhere}
.cr-kv{display:flex;justify-content:space-between;align-items:center;gap:12px;font:400 12px/1.6 var(--kx-font-sans);color:var(--text3);min-width:0}
.cr-kv .mono{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap}
.cr-kv--unit{margin-block:4px}
.cr-kv .unit-edit{width:112px}
.cr-cmp__col .hint{margin-top:4px}
.cr-totals .kx-table{border:1px solid var(--border-subtle)}
.cr-totals .kx-table tbody tr:hover td{background:transparent}
.cr-totals-box{gap:8px}
.cr-extra{font:400 14px/1.5 var(--kx-font-sans);color:var(--text)}
.cr-extra b{font-weight:600}
@media (max-width:640px){
  .cr-decide{padding:12px}
  .cr-cmp__cols{grid-template-columns:minmax(0,1fr)}
  .cr-cmp__line{padding:10px}
  .cr-totals .kx-table.compact thead th{padding:0 8px;white-space:normal;letter-spacing:.04em}
  .cr-totals .kx-table.compact tbody td{padding:8px;font-size:13px}
  .cr-totals .kx-table.compact tbody td.num{font-size:12px}
  .cr-decide__acts{justify-content:stretch}
  .cr-decide__acts .kx-btn{flex:1 1 100%}
}

/* ---------- avenants ---------- */
.cr-avs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cr-avs li{display:flex;flex-direction:column;gap:4px;padding-block:12px;border-bottom:1px solid var(--border-subtle)}
.cr-avs li:first-child{padding-top:0}
.cr-avs li:last-child{border-bottom:none;padding-bottom:0}
.cr-avs li>p:first-child{font:400 14px/1.5 var(--kx-font-sans);color:var(--text);overflow-wrap:anywhere}
.cr-avs li b{font-weight:600}
.cr-avs .ico{color:var(--text3)}

/* ---------- banners ---------- */
.cr-banner b{font-weight:600}
.cr-gate h3{font:600 15px/1.4 var(--kx-font-sans)}

/* ---------- #/modifications ---------- */
.cr-count{font-size:12px;font-weight:500}
.cr-table td .sub{max-width:40ch}
.cr-nw{white-space:nowrap}
.cr-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
@media (min-width:768px){
  .cr-table thead th,.cr-table tbody td{padding-inline:10px}
  .cr-table thead th:first-child,.cr-table tbody td:first-child{padding-inline-start:16px}
  .cr-table thead th:last-child,.cr-table tbody td:last-child{padding-inline-end:16px}
  .cr-table tbody td{height:auto;padding-block:12px;vertical-align:top}
  .cr-table .ref{white-space:normal}
  .cr-table__types{min-width:180px}
  .cr-nowrap{white-space:nowrap}
}
@media (max-width:767px){
  .cr-table,.cr-table tbody,.cr-table tr,.cr-table td{display:block;width:100%}
  .cr-table thead{display:none}
  .cr-table tbody tr{padding:12px 16px;border-bottom:1px solid var(--border-subtle)}
  .cr-table tbody tr:last-child{border-bottom:none}
  .cr-table tbody td{height:auto;padding:4px 0;border-bottom:none;display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px;align-items:start}
  .cr-table tbody td::before{content:attr(data-label);font:500 12px/1.6 var(--kx-font-sans);color:var(--text3)}
  .cr-table td .sub{max-width:none;grid-column:2}
  .cr-table td>.kx-chip{justify-self:start}
}