/* A made-to-order workshop (module custom): the board of orders by stage, an order with its road, the measurer's day and
   the measure sheet with its sketches. The niche's theme (oak, blueprint, glass — themes.css) gives the colours. */

/* ---------- the figures ---------- */
.cu-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.cu-kpis:empty { display: none; }
.cu-kpis:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cu-kpi { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); text-align: left; cursor: pointer; }
.cu-kpi:disabled { cursor: default; }
.cu-kpi:not(:disabled):hover { border-color: var(--line-strong); }
.cu-kpi__label { font-size: 12.5px; color: var(--ink-3); }
.cu-kpi__value { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.cu-kpi__sub { font-size: 12px; color: var(--ink-3); }
.cu-kpi.is-warn .cu-kpi__value { color: var(--warn); }
.cu-kpi.is-warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }

/* ---------- the bar ---------- */
.cu-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.cu-bar__search { flex: 1 1 240px; max-width: 360px; }
.cu-bar__new { margin-left: auto; }
.cu-empty { padding: 24px 0; text-align: center; }

/* ---------- the board: a column a stage ---------- */
.cu-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: start; }
.cu-col { display: grid; gap: 8px; padding: 10px 8px 8px; border-radius: var(--radius); background: var(--surface); border-top: 3px solid var(--line-strong); min-width: 0; }
.cu-col--measure { border-top-color: var(--accent); }
.cu-col--quote { border-top-color: var(--warn); }
.cu-col--production { border-top-color: var(--ink-2); }
.cu-col--ready, .cu-col--install { border-top-color: var(--ok); }
.cu-col__head { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 4px; font: 700 13.5px var(--font-display); color: var(--ink); }
.cu-col__head svg { color: var(--accent-text); flex: none; }
.cu-col__head small { font: 600 12px var(--font-body); color: var(--ink-3); }
.cu-col__sum { margin-left: auto; font: 600 12px var(--font-body); color: var(--ink-3); white-space: nowrap; }
.cu-col__list { display: grid; gap: 8px; }
.cu-col__none { padding: 6px 4px; font-size: 12.5px; }

.cu-card { display: grid; gap: 4px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: inherit; text-decoration: none; min-width: 0; }
.cu-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.cu-card.is-late { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); box-shadow: inset 3px 0 0 var(--bad); }
.cu-card.is-waiting { box-shadow: inset 3px 0 0 var(--warn); }
.cu-card__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.cu-card__no { font: 700 11.5px var(--font-body); letter-spacing: .02em; color: var(--accent-text); white-space: nowrap; }
.cu-card__who { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-card__what { font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.cu-card__foot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); min-height: 24px; }
.cu-card__foot b { font-size: 13px; color: var(--ink); }
.cu-card__foot small { white-space: nowrap; }
.cu-card__foot .avatar { margin-left: auto; }

.cu-tag { display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cu-tag.is-ok { background: var(--ok-soft); color: var(--ok); }
.cu-tag.is-bad { background: var(--bad-soft); color: var(--bad); }
.cu-tag.is-warn { background: var(--warn-soft); color: var(--warn); }
.cu-tag.is-acc { background: var(--accent-soft); color: var(--accent-text); }

/* the handed over and the lost */
.cu-rows { list-style: none; margin: 0; padding: 0; }
.cu-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.cu-row:first-child { border-top: 0; }
.cu-row__main { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; color: inherit; text-decoration: none; }
.cu-row__main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-row__main small { grid-column: 2; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-row__side { display: grid; justify-items: end; gap: 2px; font-size: 12px; color: var(--ink-3); }

/* ---------- an order ---------- */
.cu-job { display: grid; gap: 14px; }
.cu-job__head { display: grid; gap: 10px; }
.cu-job__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cu-job__title h2 { margin: 0; font: var(--display-weight, 700) 22px var(--font-display); letter-spacing: var(--display-tracking, -.02em); }
.cu-job__who { display: flex; align-items: center; gap: 10px; }
.cu-job__client { display: grid; color: inherit; text-decoration: none; }
.cu-job__client small { color: var(--ink-3); }
.cu-job__contact { display: flex; gap: 4px; margin-left: auto; }
.cu-job__address { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.cu-job__address[href]:hover { color: var(--accent-text); }
.cu-job__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cu-job__lost { color: var(--bad); }
.cu-job__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.cu-job__main, .cu-job__side { display: grid; gap: 14px; min-width: 0; }

/* the road: seven steps, the walked ones filled */
.cu-road { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cu-road__step { position: relative; display: grid; justify-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); text-align: center; }
.cu-road__step i { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg); }
.cu-road__step::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--line-strong); }
.cu-road__step:first-child::before { display: none; }
.cu-road__step.is-done i { background: var(--accent); border-color: var(--accent); }
.cu-road__step.is-done::before, .cu-road__step.is-now::before { background: var(--accent); }
.cu-road__step.is-now i { border-color: var(--signal); background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 22%, transparent); }
.cu-road__step.is-now { color: var(--ink); font-weight: 700; }

.cu-sec { display: grid; gap: 10px; }
.cu-sec__title { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 15px var(--font-display); }
.cu-sec__title > svg { color: var(--accent-text); }
.cu-sec__title small { font: 600 12.5px var(--font-body); color: var(--ink-3); }
.cu-sec__title .btn { margin-left: auto; }
.cu-measures, .cu-pieces, .cu-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cu-mrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.cu-mrow:first-child { border-top: 0; }
.cu-mrow__when { display: grid; }
.cu-mrow__when small { color: var(--ink-3); }
.cu-piece { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.cu-piece:first-child { border-top: 0; }
.cu-piece__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.cu-piece__main { display: grid; gap: 2px; min-width: 0; }
.cu-piece__size { font-weight: 700; color: var(--ink); }
.cu-piece__opts { font-size: 12.5px; color: var(--ink-2); }
.cu-piece__amount { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.cu-facts { display: grid; gap: 8px; margin: 0; }
.cu-facts div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.cu-facts dt { color: var(--ink-3); }
.cu-facts dd { margin: 0; font-weight: 600; text-align: right; }
.cu-note { margin: 0; font-size: 13px; color: var(--ink-2); white-space: pre-wrap; }
.cu-note:empty { display: none; }
.cu-log li { display: grid; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.cu-log li:first-child { border-top: 0; }
.cu-log small { color: var(--ink-3); }

.cu-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.cu-photo { position: relative; width: 84px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.cu-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cu-photo__del { position: absolute; top: 3px; right: 3px; background: color-mix(in srgb, var(--bg) 85%, transparent); }
.cu-photo--add { display: grid; place-items: center; border: 1.5px dashed var(--line-strong); background: var(--bg); color: var(--ink-3); cursor: pointer; }

/* ---------- the measurer's day ---------- */
.cu-day { display: grid; gap: 12px; }
.cu-day__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cu-day__staff { max-width: 240px; }
.cu-days { display: flex; gap: 6px; }
.cu-dayb { position: relative; display: grid; justify-items: center; min-width: 52px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink-2); cursor: pointer; }
.cu-dayb small { font-size: 11.5px; }
.cu-dayb b { font: 700 17px var(--font-display); color: var(--ink); }
.cu-dayb[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.cu-dayb[aria-pressed="true"] b { color: var(--bg); }
.cu-dayb__n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--signal); color: #fff; font: 700 11px/18px var(--font-body); font-style: normal; text-align: center; }
.cu-dayb__n:empty { display: none; }
.cu-day__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cu-visit { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.cu-visit.is-done { opacity: .66; }
.cu-visit__time { display: flex; align-items: baseline; gap: 8px; }
.cu-visit__time b { font: 700 22px var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.cu-visit__time span { font-size: 12.5px; color: var(--ink-3); }
.cu-visit__who { font-size: 15px; }
.cu-visit__line { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--ink-2); }
.cu-visit__line svg { margin-top: 2px; flex: none; color: var(--ink-3); }
.cu-visit__acts { display: flex; gap: 6px; margin-top: 4px; }
.cu-visit__acts .btn--primary { flex: 1; justify-content: center; }

/* ---------- the measure sheet ---------- */
.cu-sheet { display: grid; gap: 12px; max-width: 760px; }
.cu-sheet__head { display: grid; gap: 2px; }
.cu-sheet__who { font: 700 19px var(--font-display); }
.cu-sheet__addr { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.cu-sheet__pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cu-sp { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.cu-sp__draw .cu-sketch { width: 100%; height: auto; display: block; }
.cu-sp__body { display: grid; gap: 3px; min-width: 0; }
.cu-sp__top { display: flex; align-items: center; gap: 8px; }
.cu-sp__top small { color: var(--ink-3); }
.cu-sp__size { font: 700 17px var(--font-display); color: var(--ink); }
.cu-sp__opts { font-size: 12.5px; color: var(--ink-2); }
.cu-sp__acts { display: grid; gap: 4px; }
.cu-sheet__add { justify-self: start; }
.cu-sheet__photos { display: grid; gap: 8px; }
.cu-sheet__foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 0; background: var(--bg-app); border-top: 1px solid var(--line); }
.cu-sheet__sum { margin-right: auto; font-weight: 700; color: var(--ink-2); }

/* the item's sheet: the kinds as chips, the sizes in a row, the drawing */
.cu-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.cu-kinds .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; }
.cu-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cu-size .input-wrap .input { padding-right: 44px; }
.cu-size .input-wrap__suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--ink-3); pointer-events: none; }
.cu-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.cu-check { align-self: end; }
.cu-draw { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 6px; }
.cu-draw .cu-sketch { width: 100%; height: 150px; display: block; }

/* the sketch: a frame, glass, the measure's tape */
.cu-sketch .cu-frame { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.cu-sketch .cu-panel { fill: var(--surface-2); stroke: var(--ink-2); stroke-width: 1.4; }
.cu-sketch .cu-top { fill: var(--ink-2); }
.cu-sketch .cu-glass { fill: color-mix(in srgb, var(--accent) 9%, transparent); stroke: var(--ink-3); stroke-width: 1.2; }
.cu-sketch .cu-glass--pane { stroke: var(--ink); stroke-width: 2; }
.cu-sketch .cu-mirror { fill: color-mix(in srgb, var(--accent) 16%, var(--bg)); stroke: var(--ink-2); stroke-width: 1.4; }
.cu-sketch .cu-lit { stroke: var(--signal); stroke-width: 3; }
.cu-sketch .cu-open { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-dasharray: 5 4; }
.cu-sketch .cu-arrow { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cu-sketch .cu-glint { fill: none; stroke: color-mix(in srgb, var(--bg) 80%, transparent); stroke-width: 2.5; stroke-linecap: round; }
.cu-sketch .cu-tape { stroke: var(--signal); stroke-width: 2; }
.cu-sketch .cu-tape__tab { fill: var(--ink); }
.cu-sketch .cu-tape__text { fill: var(--bg); font: 700 14px var(--font-display); }

/* the visit's sheet: the measure */
.cu-vblock { display: grid; gap: 8px; }
.cu-vblock__order { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; color: inherit; text-decoration: none; }
.cu-vblock__order small { grid-column: 2; color: var(--ink-3); }
.cu-vblock .btn { justify-self: start; }

@media (max-width: 1280px) {
  .cu-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .cu-job__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cu-kpis, .cu-kpis:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cu-kpi { padding: 9px 11px; gap: 0; }
  .cu-kpi__value { font-size: 19px; }
  .cu-kpi__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the board on a phone: the stages side by side, swiped one at a time */
  .cu-board { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 0 16px 6px; }
  .cu-col { flex: 0 0 82%; scroll-snap-align: start; }
  .cu-bar__new { order: -1; width: 100%; justify-content: center; }
  .cu-road__step span { font-size: 10px; }
  .cu-sp { grid-template-columns: 1fr auto; gap: 8px; }
  .cu-sp__draw { grid-column: 1 / -1; }
  .cu-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cu-opts { grid-template-columns: 1fr; }
  .cu-day__list { grid-template-columns: 1fr; }
  .cu-days { overflow-x: auto; }
}

/* ---------- part 2: the quote, the money, the debts, the prices, the contract, the client's page ---------- */
.cu-card__bar { display: block; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.cu-card__bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--ok); border-radius: 4px; }
.cu-card.is-agreed { box-shadow: inset 3px 0 0 var(--ok); }

.cu-qlines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cu-qline { display: grid; grid-template-columns: minmax(0, 1fr) auto 120px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.cu-qline:first-child { border-top: 0; }
.cu-qline__name { display: grid; min-width: 0; }
.cu-qline__name small { color: var(--ink-3); font-size: 12px; }
.cu-qline__calc { font-size: 12px; color: var(--warn); white-space: nowrap; }
.cu-qline__sum .input { text-align: right; padding-right: 30px; }
.cu-qline__sum .input-wrap__suffix, .cu-pay__amount + .input-wrap__suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--ink-3); pointer-events: none; }
.cu-qworks { display: grid; gap: 6px; padding: 8px 0; border-top: 1px dashed var(--line-strong); }
.cu-qwork { display: grid; grid-template-columns: auto minmax(0, 1fr) 120px; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.cu-qwork input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.cu-qown { display: grid; gap: 6px; }
.cu-qownrow { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; align-items: center; }
.cu-qown__add { justify-self: start; }
.cu-qfoot { align-items: end; }
.cu-qtotal { display: grid; justify-items: end; gap: 2px; }
.cu-qtotal span { font-size: 12.5px; color: var(--ink-3); }
.cu-qtotal b { font: 700 24px var(--font-display); letter-spacing: -.02em; }
.cu-qtotal small { color: var(--ink-3); }
.cu-qprices { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent-text); text-decoration: none; justify-self: start; }
.cu-pay__methods { justify-self: start; }
.cu-pay__amount { font: 700 20px var(--font-display); padding-right: 34px; }

.cu-quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cu-quote { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.cu-quote:first-child { border-top: 0; }
.cu-quote__main { display: grid; min-width: 0; }
.cu-quote__main small { color: var(--ink-3); font-size: 12px; }
.cu-quote__sum { font: 700 16px var(--font-display); }
.cu-quote__acts { display: flex; align-items: center; gap: 2px; }
.cu-quote.is-accepted { background: color-mix(in srgb, var(--ok) 6%, transparent); border-radius: var(--radius-sm); padding-inline: 8px; }
.cu-quotes__send { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--line-strong); }
.cu-quotes__send .muted { margin-right: auto; font-size: 12.5px; }
.cu-paid { display: grid; gap: 4px; }
.cu-paid__bar { height: 8px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.cu-paid__bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--ok); border-radius: 8px; }
.cu-paid span { font-size: 13px; color: var(--ink-2); }
.cu-pays { list-style: none; margin: 0; padding: 0; }
.cu-payrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.cu-payrow__when { display: grid; }
.cu-payrow__when small { color: var(--ink-3); }
.cu-payrow.is-void { opacity: .5; text-decoration: line-through; }
.cu-langs { display: grid; gap: 8px; }

.cu-debts { display: grid; gap: 10px; }
.cu-debt { gap: 10px; }
.cu-debt .btn--wa { flex: none; }

.cu-prices { display: grid; gap: 14px; max-width: 980px; }
.cu-prices__intro { margin: 0; }
.cu-prices__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.cu-prices__grid .input-wrap .input { padding-right: 52px; }
.cu-prices .input-wrap__suffix, .cu-pv .input-wrap__suffix { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ink-3); pointer-events: none; }
.cu-prices__pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cu-pp { align-content: start; }
.cu-pp__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cu-pp__base { width: 170px; }
.cu-pp__base .input { font-weight: 700; padding-right: 30px; }
.cu-pp__fields { display: grid; gap: 10px; }
.cu-pf { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.cu-pf__name { font-size: 13px; }
.cu-pf__values { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.cu-pv { display: grid; gap: 3px; font-size: 12px; color: var(--ink-2); }
.cu-pv .input { height: 36px; padding-right: 48px; text-align: right; }
.cu-prices__foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 0; background: var(--bg-app); border-top: 1px solid var(--line); }

/* the client's page (quote.html, on the styles of plan.css) */
.cq-var .cq-agree { margin-top: 10px; width: 100%; justify-content: center; }
.cq-line { grid-template-columns: minmax(0, 1fr) auto; }
.cq-line .pp-line__name { display: grid; gap: 2px; }
.cq-line .pp-line__amount { white-space: nowrap; font-weight: 600; }
.cq-line__sub { display: block; font-size: 12.5px; color: var(--ink-3); }
.cq-discount { display: flex; justify-content: space-between; padding: 6px 0; color: var(--ok); }
.cq-next { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--ok) 8%, var(--bg)); border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--line)); }
.cq-next p { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.cq-next svg { color: var(--ok); margin-top: 3px; flex: none; }
.cq-terms:empty { display: none; }
.cq-terms { white-space: pre-wrap; }

/* the contract on paper */
.cu-paper { font: 10.5pt/1.45 var(--font-body); color: #000; }
.cu-paper__head { display: flex; justify-content: space-between; gap: 8mm; padding-bottom: 3mm; border-bottom: .5mm solid #000; }
.cu-paper__head > div { display: grid; }
.cu-paper__biz { font: 700 14pt/1.2 var(--font-display); }
.cu-paper__no { text-align: right; }
.cu-paper__no b { font: 700 13pt/1.2 var(--font-display); }
.cu-paper h3 { margin: 5mm 0 2mm; font: 700 10.5pt/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.cu-paper__parties p { margin: 4mm 0 0; }
.cu-paper__table { width: 100%; border-collapse: collapse; }
.cu-paper__table th, .cu-paper__table td { padding: 1.4mm 1.6mm; border-bottom: .3mm solid #bbb; text-align: left; vertical-align: top; }
.cu-paper__table th { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .04em; border-bottom: .5mm solid #000; }
.cu-paper__table td:last-child, .cu-paper__table th:last-child { text-align: right; white-space: nowrap; }
.cu-paper__table td small { display: block; color: #444; font-size: 9pt; }
.cu-paper__table tfoot td { border-bottom: 0; font-weight: 700; text-align: right; }
.cu-paper__terms { margin: 0; padding-left: 5mm; display: grid; gap: 1mm; }
.cu-paper__sign { display: grid; grid-template-columns: 1fr 1fr; gap: 12mm; margin-top: 14mm; }
.cu-paper__sign div { display: grid; gap: 10mm; }
.cu-paper__sign i { display: block; border-bottom: .3mm solid #000; }

@media (max-width: 720px) {
  .cu-qline { grid-template-columns: minmax(0, 1fr) 104px; }
  .cu-qline__calc { grid-column: 1; }
  .cu-qwork { grid-template-columns: auto minmax(0, 1fr) 104px; }
  .cu-quote { grid-template-columns: minmax(0, 1fr) auto; }
  .cu-quote__acts { grid-column: 1 / -1; }
  .cu-prices__grid, .cu-prices__pieces { grid-template-columns: 1fr; }
  .cu-debt { flex-wrap: wrap; }
}

/* ---------- part 3: the workshop's floor (picture B) — two weeks by day, an order a row, the load under them ---------- */
.ws-page { --ws-install: #f0b429; --ws-install-ink: #3b2a00; --ws-day: minmax(46px, 1fr); }
.ws-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-bottom: 10px; }
.ws-nav { display: flex; align-items: center; gap: 6px; }
.ws-range { margin-left: 6px; font: 700 15px var(--font-display); color: var(--ink); }
.ws-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); }
.ws-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ws-key { display: inline-block; width: 16px; height: 10px; border-radius: 3px; }
.ws-key--work, .ws-b--work { background: var(--accent); }
.ws-key--ready, .ws-b--ready { background: var(--ok); }
.ws-key--install, .ws-b--install { background: var(--ws-install); }
.ws-key--late, .ws-b--late { background: var(--bad); }
.ws-key--wait { border: 1.5px dashed var(--ink-3); }
.ws-off-note { font-size: 12.5px; color: var(--ink-3); }

.ws-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.ws-grid { min-width: calc(220px + var(--n, 12) * 46px); }
.ws-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); border-top: 1px solid var(--line); }
.ws-row--head { border-top: 0; }
.ws-label { position: sticky; left: 0; z-index: 2; display: grid; align-content: center; gap: 1px; min-width: 0; padding: 7px 12px; background: var(--bg); border-right: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ws-row--head .ws-label { font-size: 12.5px; color: var(--ink-3); }
.ws-label b { overflow: hidden; font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; }
.ws-label b .cu-card__no { margin-right: 4px; }
.ws-label small { overflow: hidden; font-size: 12px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
a.ws-label:hover b { color: var(--accent-text); }
.ws-row.is-late .ws-label b .cu-card__no { color: var(--bad); }
.ws-track { display: grid; grid-template-columns: repeat(var(--n, 12), var(--ws-day)); min-height: 50px; }
.ws-track > span { grid-row: 1; grid-column: var(--k); border-left: 1px solid var(--line); }
.ws-track > span:first-child { border-left: 0; }
.ws-track > .is-week { border-left-color: var(--line-strong); }
.ws-track > .is-today { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ws-track > .is-off { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ws-install) 22%, transparent) 0 5px, transparent 5px 11px); }
.ws-day { display: grid; place-content: center; justify-items: center; gap: 1px; padding: 6px 2px; font-size: 11.5px; color: var(--ink-3); }
.ws-day b { font: 700 14px var(--font-display); color: var(--ink); }
.ws-day.is-today { background: var(--accent); color: #fff; }
.ws-day.is-today b { color: #fff; }

.ws-b { grid-row: 1; grid-column: var(--c0) / span var(--cn); z-index: 1; align-self: center; min-width: 0; height: 26px; margin: 0 3px; padding: 0 8px; border: 0; border-radius: 6px;
  font: 600 12px/26px var(--font-body); color: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  transition: filter .15s, box-shadow .15s; }
.ws-b span { overflow: hidden; text-overflow: ellipsis; }
.ws-b:hover { filter: brightness(1.08); box-shadow: var(--shadow-1); }
.ws-b:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ws-b--install { color: var(--ws-install-ink); }
.ws-b--wait { background: transparent; border: 1.5px dashed var(--ink-3); color: var(--ink-2); line-height: 23px; }
.ws-b.is-chip { justify-self: start; width: max-content; max-width: none; overflow: visible; }
.ws-b.is-cut-left { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ws-b.is-cut-right { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }

.ws-row--load { background: var(--surface); }
.ws-row--load .ws-label { background: var(--surface); }
.ws-row--load .ws-label b { font-size: 13px; }
.ws-lc { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 2px; height: 62px; padding: 6px 5px 4px; }
.ws-lc i { display: block; height: calc(var(--f, 0) * 36px); min-height: 0; border-radius: 4px 4px 1px 1px; background: color-mix(in srgb, var(--accent) 28%, var(--bg)); }
.ws-lc small { font-size: 11px; color: var(--ink-3); text-align: center; }
.ws-lc.is-over i { background: color-mix(in srgb, var(--bad) 55%, var(--bg)); }
.ws-lc.is-over small { color: var(--bad); font-weight: 700; }
.ws-lc.is-off i { display: none; }

.ws-meter { display: block; height: 6px; margin-top: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.ws-meter i { display: block; width: var(--p, 0%); height: 100%; border-radius: 6px; background: var(--accent); }
.ws-meter.is-over i { background: var(--bad); }

/* the order's workshop and its costs */
.cu-shopline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cu-shopline span { display: grid; gap: 1px; }
.cu-shopline small { font-size: 12px; color: var(--ink-3); }
.cu-shopline b { font-size: 14px; }
.cu-shopbar i { background: var(--accent); }
.cu-shopbar.is-late i { background: var(--bad); }
.cu-sec__more { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-size: 13px; font-weight: 600; color: var(--accent-text); text-decoration: none; }
.cu-sec__more:hover { text-decoration: underline; }
.cu-profit { display: grid; gap: 6px; margin: 0; padding-top: 8px; border-top: 1px solid var(--line-strong); }
.cu-profit div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; }
.cu-profit dt { color: var(--ink-3); }
.cu-profit dd { margin: 0; font-weight: 600; }
.cu-profit__main dt { color: var(--ink); font-weight: 600; }
.cu-profit__main b { font: 700 18px var(--font-display); color: var(--ok); }
.cu-profit__main small { margin-left: 6px; color: var(--ink-3); }
.cu-profit.is-loss .cu-profit__main b { color: var(--bad); }

/* the workshop's sheet on paper: every piece drawn, its sizes large, no prices */
.cu-shop { display: grid; gap: 4mm; margin: 5mm 0 0; padding: 0; list-style: none; }
.cu-shop__piece { display: grid; grid-template-columns: 48mm minmax(0, 1fr); gap: 5mm; padding-bottom: 4mm; border-bottom: .3mm solid #bbb; break-inside: avoid; }
.cu-shop__draw svg { width: 100%; height: auto; max-height: 48mm; }
.cu-shop__body { display: grid; align-content: start; gap: 1.5mm; }
.cu-shop__body b { font: 700 11.5pt/1.25 var(--font-display); }
.cu-shop__size { font: 700 14pt/1.2 var(--font-display); letter-spacing: .01em; }
.cu-shop__body small { color: #444; }
.cu-shop__total { margin: 4mm 0 0; font-weight: 700; }
.cu-shop__note { margin: 2mm 0 0; white-space: pre-line; }

@media (max-width: 720px) {
  .ws-grid { min-width: calc(150px + var(--n, 12) * 44px); }
  .ws-row { grid-template-columns: 150px minmax(0, 1fr); }
  .ws-label { padding: 6px 8px; }
  .ws-legend { font-size: 12px; }
}

/* ---------- part 4: the installation, the client told, the act, the pay by the piece ---------- */
.cu-installs { list-style: none; margin: 0; padding: 0; display: grid; }
.cu-irow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.cu-irow:first-child { border-top: 0; }
.cu-irow__when { display: grid; flex: 1; min-width: 0; }
.cu-irow__when small { color: var(--ink-3); }
.cu-irow__acts { display: flex; gap: 4px; }
.cu-irow.is-void { opacity: .55; }
.cu-told { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ok); }
.cu-told .btn { margin-left: auto; }
.cu-sec__sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 0; font: 600 13px var(--font-body); color: var(--ink-2); }
.cu-act { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface); font-size: 13px; color: var(--ink-2); }
.cu-act svg { margin-top: 2px; flex: none; }
.cu-act.is-ok { background: color-mix(in srgb, var(--ok) 10%, var(--bg)); color: var(--ok); }
.cu-crew { margin: 0; padding: 0; border: 0; }
.cu-crew__list { display: grid; gap: 4px; max-height: 220px; overflow: auto; }
.cu-tell__state { margin: 0; font-weight: 600; }
.cu-tell__text { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cu-rate { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.cu-visit__money.is-owed { color: var(--warn); font-weight: 600; }
.cu-visit__money.is-owed svg { color: var(--warn); }
.cu-visit--install .cu-visit__acts { flex-wrap: wrap; }
.cu-visit__photo { cursor: pointer; }

/* the pay by the piece: a person a card, his figures in a row, his lines under it */
.cp-page { display: grid; gap: 12px; }
.cp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cp-sum { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.cp-sum b { font: 700 17px var(--font-display); color: var(--ink); margin-right: 8px; }
.cp-intro { margin: 0; font-size: 13px; }
.cp-list { display: grid; gap: 10px; }
.cp-person { padding: 0; overflow: hidden; }
.cp-person__head { display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(6, minmax(0, 1fr)); gap: 10px; align-items: center; width: 100%; padding: 12px 14px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.cp-person__head:hover { background: var(--surface); }
.cp-person__who { display: grid; min-width: 0; }
.cp-person__who b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cp-person__who small { font-size: 12px; color: var(--ink-3); }
.cp-fig { display: grid; gap: 1px; min-width: 0; }
.cp-fig small { font-size: 11.5px; color: var(--ink-3); }
.cp-fig b { font-size: 13.5px; white-space: nowrap; }
.cp-fig--main b { font: 700 16px var(--font-display); }
.cp-person.is-due .cp-fig--due b { color: var(--warn); }
.cp-person__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 14px 12px; }
.cp-rates { flex: 1; min-width: 0; font-size: 12.5px; }
.cp-lines { list-style: none; margin: 0; padding: 4px 14px 10px; border-top: 1px solid var(--line); background: var(--surface); }
.cp-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.cp-line:first-child { border-top: 0; }
.cp-line span { display: grid; min-width: 0; }
.cp-line small { color: var(--ink-3); }
@media (max-width: 860px) {
  .cp-person__head { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-person__who { grid-column: 1 / -1; }
}

/* «Sifarişim harada?» — the client's page */
.co-body { gap: 14px; }
.co-piece { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-1); }
.co-piece__mark { flex: none; width: 52px; height: 52px; border-radius: var(--radius-sm); border: 2px solid var(--ink); box-sizing: border-box;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--bg)) 0 45%, color-mix(in srgb, var(--accent) 32%, var(--bg)) 45% 55%, color-mix(in srgb, var(--accent) 14%, var(--bg)) 55%); }
.co-piece--furniture .co-piece__mark { background: linear-gradient(90deg, transparent 49%, var(--ink) 49% 51%, transparent 51%), color-mix(in srgb, var(--accent) 18%, var(--bg)); }
.co-piece__text { display: grid; gap: 2px; min-width: 0; }
.co-piece__text b { font-size: 15.5px; }
.co-piece__text small { font-size: 13px; color: var(--ink-3); }
.co-road { list-style: none; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); display: grid; }
.co-step { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 0 0 16px; }
.co-step:last-child { padding-bottom: 0; }
.co-step::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.co-step:last-child::before { display: none; }
.co-step.is-done::before { background: var(--accent); }
.co-step__dot { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg); box-sizing: border-box; }
.co-step.is-done .co-step__dot { border-color: var(--accent); background: var(--accent); }
.co-step.is-done .co-step__dot::after { content: ''; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid var(--accent-ink, #fff); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.co-step.is-now .co-step__dot { border-color: var(--signal, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal, var(--accent)) 22%, transparent); }
.co-step__text { display: grid; gap: 1px; }
.co-step__text b { font-size: 14.5px; }
.co-step:not(.is-done):not(.is-now) .co-step__text b { color: var(--ink-3); font-weight: 600; }
.co-step.is-now .co-step__text b { color: var(--signal, var(--accent)); }
.co-step__text small { font-size: 12.5px; color: var(--ink-3); }
.co-step__date { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.co-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.co-money > div { display: grid; gap: 2px; padding: 10px 12px; border-left: 1px solid var(--line); }
.co-money > div:first-child { border-left: 0; }
.co-money small { font-size: 12px; color: var(--ink-3); }
.co-money b { font: 700 18px var(--font-display); }
.co-money__left.is-owed b { color: var(--signal, var(--warn)); }
.co-act { display: grid; gap: 10px; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.co-act__title { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 16px var(--font-display); }
.co-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.co-photos:empty { display: none; }
.co-photo { display: block; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.co-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-act__form { display: grid; gap: 10px; }
.co-act__done { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--ok); font-weight: 600; }
.co-act__done svg { margin-top: 3px; flex: none; }
.co-cta { display: flex; gap: 10px; }
.co-cta > a { flex: 1; }
.co-warranty { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 0; font-size: 13px; color: var(--ink-3); }

/* ---------- part 5: «Bu gün» (picture C) — the day's three cards and the orders on their road ---------- */
.ch-page { display: grid; gap: 14px; }
.ch-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ch-head__day { display: grid; margin-right: auto; }
.ch-head__day small { font-size: 12.5px; color: var(--ink-3); }
.ch-head__day b { font: 700 17px var(--font-display); }
.ch-money { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ch-money span { display: flex; align-items: baseline; gap: 6px; }
.ch-money small { font-size: 12.5px; color: var(--ink-3); }
.ch-money b { font: 700 16px var(--font-display); }
.ch-money__debt.is-owed b { color: var(--signal, var(--warn)); }
.ch-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ch-card { padding: 14px 16px; display: grid; gap: 8px; }
.ch-card__title { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 15px var(--font-display); }
.ch-card__title > svg { color: var(--accent-text); }
.ch-card--attn .ch-card__title > svg { color: var(--signal, var(--warn)); }
.ch-count { margin-left: auto; min-width: 24px; padding: 1px 7px; border-radius: 12px; background: var(--surface-2); font: 700 12px var(--font-body); text-align: center; color: var(--ink-2); }
.ch-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ch-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.ch-item:first-child { border-top: 0; }
.ch-item__time { font: 700 15px var(--font-display); }
.ch-item__text { display: grid; gap: 1px; min-width: 0; }
.ch-item__text a { color: var(--ink); text-decoration: none; }
.ch-item__text a:hover b { color: var(--accent-text); }
.ch-item__text small { font-size: 12.5px; color: var(--ink-3); }
.ch-item.is-done { opacity: .55; }
.ch-none { margin: 0; font-size: 13px; }
.ch-none[hidden] + .ch-foot:empty { display: none; }
.ch-foot { margin: 0; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--ink-2); }
.ch-foot:empty { display: none; }
.ch-attn { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ch-attn:first-child { border-top: 0; }
.ch-attn > svg { color: var(--ink-3); }
.ch-attn--late > svg { color: var(--bad); }
.ch-attn--quotes > svg { color: var(--accent-text); }
.ch-attn--debts > svg { color: var(--warn); }
.ch-attn--claim > svg { color: var(--ink-2); }
.ch-attn__text { min-width: 0; }

.ch-orders { padding: 0; overflow: hidden; }
.ch-orders__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ch-orders__title { display: flex; gap: 4px; align-items: baseline; margin: 0 6px 0 0; font: 700 15px var(--font-display); }
.ch-orders__title b { color: var(--ink-3); font-weight: 600; }
.ch-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-chips .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ch-search { position: relative; margin-left: auto; min-width: 200px; }
.ch-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.ch-search .input { padding-left: 32px; }
.ch-table { overflow-x: auto; }
.ch-row { display: grid; grid-template-columns: 64px minmax(170px, 1.3fr) minmax(220px, 1.5fr) 96px 150px 170px; gap: 12px; align-items: center; min-width: 900px; padding: 10px 16px; border-top: 1px solid var(--line); }
.ch-row--head { border-top: 0; padding-block: 8px; background: var(--surface); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.ch-no { font-weight: 700; color: var(--accent-text); text-decoration: none; }
.ch-row.is-late .ch-no { color: var(--bad); }
.ch-who { display: grid; gap: 1px; min-width: 0; }
.ch-who b, .ch-who small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ch-who small { font-size: 12.5px; color: var(--ink-3); }
.ch-road { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ch-dots { position: relative; display: flex; gap: 8px; flex: none; }
.ch-dots::before { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; background: var(--line-strong); }
.ch-dots i { position: relative; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg); box-sizing: border-box; }
.ch-dots i.is-done { border-color: var(--accent); background: var(--accent); }
.ch-dots i.is-now { border-color: var(--signal, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal, var(--accent)) 22%, transparent); }
.ch-dots i.is-late { border-color: var(--bad); background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 20%, transparent); }
.ch-state { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--ink-2); }
.ch-row.is-late .ch-state { color: var(--bad); font-weight: 600; }
.ch-amount { font-size: 14px; }
.ch-paid { display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.ch-paid b { color: var(--ok); }
.ch-paid small { color: var(--ink-3); }
.ch-next .btn { width: 100%; justify-content: center; }
@media (max-width: 1100px) { .ch-cards { grid-template-columns: 1fr 1fr; } .ch-card--attn { grid-column: 1 / -1; } }
@media (max-width: 720px) {
  .ch-cards { grid-template-columns: 1fr; }
  .ch-search { min-width: 0; flex: 1 1 100%; }
  .ch-row { min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'no who amount' 'road road road' 'paid paid next'; gap: 6px 10px; }
  .ch-row--head { display: none; }
  .ch-no { grid-area: no; } .ch-who { grid-area: who; } .ch-road { grid-area: road; } .ch-amount { grid-area: amount; } .ch-paid { grid-area: paid; } .ch-next { grid-area: next; }
}

/* the warranty */
.cw-page { display: grid; gap: 12px; }
.cw-tabs { justify-self: start; }
.cw-list { display: grid; gap: 10px; }
.cw-card { display: grid; gap: 6px; }
.cw-card__order { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; color: var(--ink); text-decoration: none; }
.cw-card__order small { width: 100%; color: var(--ink-3); font-size: 12.5px; }
.cw-card__claims, .cu-claims { list-style: none; margin: 0; padding: 0; display: grid; }
.cu-claim { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.cu-claim:first-child { border-top: 0; }
.cu-claim__body { display: grid; gap: 2px; min-width: 0; }
.cu-claim__body small { font-size: 12.5px; color: var(--ink-3); }
.cu-claim .cu-irow__acts { grid-column: 1 / -1; }
.cu-claim .cu-irow__acts:not(:has(:not([hidden]))) { display: none; }
.cu-warranty { margin: 0; font-size: 13px; color: var(--ink-2); }

/* the partners */
.cpn-page { display: grid; gap: 12px; }
.cpn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cpn-intro { flex: 1; min-width: 260px; margin: 0; font-size: 13px; }
.cpn-list { display: grid; gap: 10px; }
.cpn-card { padding: 0; overflow: hidden; }
.cpn-card.is-off { opacity: .6; }
.cpn-card__head { display: grid; grid-template-columns: minmax(170px, 1.5fr) repeat(5, minmax(0, 1fr)); gap: 10px; align-items: center; padding: 12px 14px; }
.cpn-card__who { display: grid; min-width: 0; }
.cpn-card__who small { font-size: 12px; color: var(--ink-3); }
.cpn-card.is-due .cp-fig--due b { color: var(--warn); }
@media (max-width: 860px) { .cpn-card__head { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cpn-card__who { grid-column: 1 / -1; } }

/* the niche's «Hesabat» */
.cr-page { display: grid; gap: 12px; }
.cr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.cr-sec { display: grid; gap: 10px; }
.cr-hint { margin: -4px 0 0; font-size: 12.5px; }
.cr-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cr-bar-row { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) auto 46px; gap: 10px; align-items: center; font-size: 13px; }
.cr-bar-row__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); }
.cr-bar-row__track { height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.cr-bar-row__track i { display: block; width: var(--w, 0%); height: 100%; border-radius: 6px; background: var(--accent); }
.cr-bar-row.is-bad .cr-bar-row__track i { background: color-mix(in srgb, var(--bad) 70%, var(--bg)); }
.cr-bar-row small { color: var(--ink-3); text-align: right; }
.cr-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cr-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.cr-fig { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); }
.cr-fig small { font-size: 12px; color: var(--ink-3); }
.cr-fig b { font: 700 19px var(--font-display); }
.cr-fig span { font-size: 12px; color: var(--ink-3); }
.cr-fig span:empty { display: none; }
.cr-table { display: grid; }
.cr-trow { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.cr-trow.is-head { border-top: 0; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.cr-trow > :not(:first-child) { text-align: right; }
@media (max-width: 980px) { .cr-grid { grid-template-columns: 1fr; } }

/* the client's claims on his page */
.co-claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.co-claims:empty { display: none; }
.co-claims__one { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--line); }
.co-claims__one small { color: var(--ink-3); font-size: 12.5px; }
.co-claim { border-color: var(--line); background: var(--bg); }

/* seven names in a phone's width run into each other («Предложение» is wider than its column): the dots only, and the
   name of the step it is on, whole, under its dot (at the ends — from the edge inward) */
@media (max-width: 520px) {
  .cu-road__step span { font-size: 10.5px; visibility: hidden; white-space: nowrap; }
  .cu-road__step.is-now span { visibility: visible; }
  .cu-road__step:first-child span { justify-self: start; }
  .cu-road__step:last-child span { justify-self: end; }
}