/* Claims (js/claims.js), scoped to .cl */

.cl .err { color: var(--red); font-size: 0.875rem; }
.cl .fld > .err:not([hidden]), .cl .step .err:not([hidden]) { display: block; margin-top: 4px; }
.cl .err[hidden] { display: none; }
.cl .rmerrsum { margin-top: 16px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--red-bg); color: var(--red); font-size: 0.875rem; font-weight: 600; }
.cl .rmerrsum[hidden] { display: none; }
.clage { color: var(--red); font-weight: 700; margin-left: 4px; }

/* Stat tiles */
.clstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.clstat { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-card); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clstat b { font-size: var(--fs-24, 1.5rem); line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.clstat span { font-size: 0.8125rem; color: var(--muted); }
.clstat.amber { background: var(--amber-bg); border-color: transparent; }
.clstat.amber b { color: var(--amber); }
.clstat.red { background: var(--red-bg); border-color: transparent; }
.clstat.red b { color: var(--red); }

/* List */
.rtable.cl .rhead, .rtable.cl .rrow { grid-template-columns: 150px minmax(0, 1.5fr) 100px minmax(0, 1fr) 110px 110px 110px; }
.rtable.cl .rrow.urg { box-shadow: inset 3px 0 0 var(--red); }
.clref { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cltag { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border-radius: 6px; background: var(--red-bg); color: var(--red); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
@media (max-width: 899px) {
  .rtable.cl .rrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rtable.cl .rrow span[data-l]:nth-child(even) { text-align: right; }
  .rtable.cl .rrow span[data-l="Customer"]:nth-child(even) { grid-column: 1 / -1; text-align: left; font-weight: 600; }
  .rtable.cl .rrow span[data-l="Order"]::before { content: "Order "; color: var(--muted); }
  .clstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* New claim */
.clfindrow { display: flex; gap: 8px; align-items: stretch; max-width: 460px; }
.clfindrow input { flex: 1; min-width: 0; }
.clfind .fld { max-width: 520px; }
.clorder { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--divider); }
.cllines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.clline { border: 1px solid var(--divider); border-radius: var(--r-sm); padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; background: var(--surface); }
.clline.on { border-color: var(--blue-btn); background: var(--blue-tint); }
.clline.off { opacity: 0.7; }
.clpick { align-items: flex-start; gap: 12px; min-width: 0; }
.clpick input { margin-top: 3px; flex: none; }
.clmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.clnum { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.clcode { font-size: 0.8125rem; color: var(--grey-ink); }
.clmemo { font-size: 0.8125rem; }
.clprice { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 0.8125rem; color: var(--grey-ink); text-align: right; font-variant-numeric: tabular-nums; }
.clclaimed { grid-column: 1 / -1; margin: 0; color: var(--amber); }
.clmore { grid-column: 1 / -1; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--divider); max-width: none; }
.clmore .fld { min-width: 0; }
.cl .tform .fld.wide { grid-column: 1 / -1; }
.cl .tform textarea, .cl .tform select, .cl .tform input[type="text"], .cl .tform input[type="number"], .cl .tform input[type="date"] { width: 100%; max-width: 100%; box-sizing: border-box; }
.cl .sp { margin-top: 8px; width: 100%; box-sizing: border-box; }

/* Claim page */
.clsummary { margin: 0 0 12px; font-size: 0.9375rem; overflow-wrap: anywhere; }
.clcls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.clcl { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px 24px; padding: 16px 0; border-top: 1px solid var(--divider); }
.clcl:first-child { border-top: 0; padding-top: 4px; }
.clhead { overflow-wrap: anywhere; }
.clfacts { margin-top: 8px; }
.clrt { min-width: 0; }
.clrouted { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.clrouted p { margin: 0; }
.clroute { display: flex; flex-direction: column; gap: 10px; }
.clroute select, .clroute input[type="text"] { width: 100%; box-sizing: border-box; }
.cltlist { list-style: none; margin: 0 0 8px; padding: 0; font-size: 0.875rem; }
.cltlist li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.cltlist li span { min-width: 0; overflow-wrap: anywhere; }
.cltlist b, .cltotal b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cltotal { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 4px; padding-top: 10px; border-top: 1px solid var(--divider); font-weight: 600; }
.clreq { margin: 2px 0 4px; }
.clreqchip { font-weight: 600; }
.clink { margin: 0; }
.cldlg { display: flex; flex-direction: column; gap: 12px; }
.cldlg .fld { display: flex; flex-direction: column; gap: 6px; }
.cldlg input[type="text"] { width: 100%; box-sizing: border-box; }
.cl .rmact { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 12px 0 16px; }

@media (max-width: 899px) {
  .clcl { grid-template-columns: minmax(0, 1fr); padding: 14px 0; }
}
@media (max-width: 640px), (pointer: coarse) {
  .cl .btn, .cl .link.quiet, .cl .seg span, .cl .tab { min-height: 44px; }
  .cl .chkl { min-height: 44px; }
  .cl .seg label { flex: 1 1 calc(50% - 6px); }
  .cl .seg span { width: 100%; justify-content: center; }
  .cl .submitbar .btn { flex: 1 1 100%; }
  .clfindrow { max-width: none; }
  .clline { grid-template-columns: minmax(0, 1fr); }
  .clprice { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 4px 12px; text-align: left; padding-left: 30px; }
  .cl .tform { grid-template-columns: minmax(0, 1fr); }
}

/* Summary of each kind of claim */
.cltypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 4px 0 20px; }
.cltype { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--divider); border-radius: var(--r-sm, 10px); background: var(--surface); color: inherit; text-decoration: none; min-width: 0; }
.cltype:hover, .cltype:focus-visible { border-color: var(--ink, currentColor); }
.cltt { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cltn { font-size: 0.8125rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.cltd { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.clts { font-size: 0.75rem; font-weight: 600; color: var(--amber, #7a4f00); }
@media (max-width: 480px) { .cltypes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .cltype { padding: 10px 12px; } .cltt { flex-direction: column; gap: 2px; } .cltd { font-size: 0.75rem; } }

/* Concord memo lines: headings over the items they describe */
.cllines .clsect { list-style: none; padding: 12px 4px 4px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); border: 0; background: none; }
.cllines .clsect:first-child { padding-top: 0; }
.clsecthead { margin-bottom: 2px; font-weight: 600; }
.cl .facts dd, .clcase .facts dd { overflow-wrap: anywhere; }

/* Claim page (10 Oct 2026): the next-step bar, people, and each line as "customer says" / "our decision" */
.clnext { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.clsteps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.clsteps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--surface2); color: var(--muted); font-size: var(--fs-14); }
.clsteps li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 12px; font-weight: 700; }
.clsteps li span svg { width: 13px; height: 13px; }
.clsteps li.done { color: var(--ink); }
.clsteps li.done span { background: var(--good); color: #fff; }
.clsteps li.now { background: var(--blue-tint); color: var(--blue-ink); font-weight: 600; }
.clsteps li.now span { background: var(--blue-btn); color: #fff; }
.clnextrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.clnextrow p { margin: 0; font-size: 16px; }
.clnextbtns { display: flex; gap: 10px; align-items: center; }
.clcust { display: inline-flex; align-items: center; gap: 2px; }
.clpeople { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 14px 0 6px; }
.clp { display: flex; align-items: center; gap: 10px; }
.clp > span { display: flex; flex-direction: column; }
.clp small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.clfactsrow { margin-top: 6px; }
.clside-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.clcl .clinfo, .clcl .clrt { padding: 12px 14px; border-radius: 10px; }
.clcl .clinfo { background: var(--surface2); }
.clcl .clrt { border: 1px solid var(--line); }
.clchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.clwrong { margin: 0 0 6px; }
.clmeta { margin: 4px 0 0; }
.chip.big { font-size: 15px; padding: 6px 12px; font-weight: 600; }
.clorder2 .sechead .ordlink { font: inherit; }

/* CARs (cars.js) */
.cargrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.carbars .pfch, .carbars .pfch li { list-style: none; margin: 0; padding: 0; }
.carbars .pfch { display: flex; flex-direction: column; gap: 10px; }
.carbars .pfchh { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-14); }
.carbars .pfbar { width: 100%; height: 8px; }
.cartbars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 170px; }
.cartb { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.cartcol { width: 100%; max-width: 36px; height: 110px; display: flex; align-items: flex-end; background: var(--surface2); border-radius: 6px; overflow: hidden; }
.cartcol i { display: block; width: 100%; background: var(--blue-btn); border-radius: 6px 6px 0 0; }
.cartv { font-size: 11px; color: var(--muted); min-height: 14px; }
.cartb b { font-size: 12px; } .cartb small { font-size: 11px; color: var(--muted); }
.rtable.car .rhead, .rtable.car .rrow { display: grid; grid-template-columns: 110px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) 100px 90px 130px; gap: 12px; align-items: center; }
.rtable.car .rrow > span { display: flex; flex-direction: column; min-width: 0; }
.rtable.car .num { text-align: right; }
.rtable.car .late { color: var(--red); font-weight: 600; }
@media (max-width: 1100px) { .cargrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .cargrid { grid-template-columns: 1fr; }
  .rtable.car .rhead { display: none; }
  .rtable.car .rrow { grid-template-columns: 1fr 1fr; }
}
.carpage { --lr-bar: var(--blue-btn); }
/* One decision for the whole claim */
.cldecide { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.cldecrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; }
@media (max-width: 640px) { .cldecrow { grid-template-columns: 1fr; } }