/* ============ auto service: the work order (docs/niches/auto/05-orders-tech.md §6.3, 06-money-tech.md §6.1) ============ */
/* The order page and its sheets: the header with the chain of stages, the cards, the lines (a table on a wide screen,
   cards on a phone), the customer's answer on the ticked lines, the totals and the payments; the money of the order —
   the discount, the requests waiting for the owner, the journal. Colours come from the theme (garage in the auto
   niche); the "approved" blue is the first series colour of the palette. */
.order-page, .order-sheet, .order-actions {
  --order-info: var(--series-1);
  --order-info-soft: color-mix(in srgb, var(--series-1) 16%, var(--bg));
  --order-info-text: color-mix(in srgb, var(--series-1) 62%, var(--ink));
}
.order-page { display: grid; gap: 14px; }
.order-page > * { min-width: 0; }

/* ---------- closed / cancelled ---------- */
.order-banner {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--ok-soft); color: var(--ok); font-size: 14px; font-weight: 600; overflow-wrap: anywhere;
}
.order-banner .ic { flex: none; }
.order-banner.is-cancelled { background: var(--surface-2); color: var(--ink-2); }

/* ---------- the header: № and plate, the car, intake; the chain of stages on the right ---------- */
.order-head { display: grid; gap: 14px 24px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.order-head__main { display: grid; gap: 6px; min-width: 0; align-content: start; }
.order-head__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font: var(--display-weight) 24px/1.15 var(--font-display); letter-spacing: var(--display-tracking);
}
.order-head__plate { display: flex; }
.order-head__car { font-size: 15px; font-weight: 600; }
.order-head__car-link { display: inline-flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.order-head__car-link[href]:hover span { text-decoration: underline; text-underline-offset: 3px; }
.order-head__car-link .ic { color: var(--ink-3); }
.order-head__car-link:not([href]) .ic { display: none; }
.order-head__meta { font-size: 13.5px; line-height: 1.9; }
.order-head__appt {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; margin-left: 8px; vertical-align: middle;
  border: 1px solid var(--line-strong); border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.order-head__appt:not(:disabled):hover { border-color: var(--accent); color: var(--ink); }
.order-head__appt:disabled { cursor: default; }
.order-head__main .car-note { margin-top: 4px; }
.order-head__side { display: grid; gap: 8px; align-content: start; justify-items: start; }
.order-stages { display: flex; flex-wrap: wrap; gap: 4px; }
.order-stage {
  padding: 4px 10px; border-radius: var(--radius-xs); background: var(--surface); color: var(--ink-3);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.order-stage.is-done { color: var(--ink-2); }
.order-stage.is-on { background: var(--accent); color: var(--accent-ink); }
.order-stages__hint { font-size: 12.5px; color: var(--ink-3); }
.order-stages__hint:empty { display: none; }
[data-action="in-work"].is-on { border-color: var(--accent); color: var(--accent-text); }
@media (min-width: 900px) {
  .order-head { grid-template-columns: minmax(0, 1fr) auto; }
  .order-head__side { justify-items: end; text-align: right; max-width: 520px; }
  .order-stages { justify-content: flex-end; }
}

/* ---------- the cards: who brought it, the customer, the complaint, the terms ---------- */
.order-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.order-card {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
}
.order-card--accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: inset 3px 0 0 var(--accent); }
.order-card__label { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.order-card__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font: 600 16px/1.3 var(--font-display); overflow-wrap: anywhere; }
.order-card__link[href] { color: var(--accent-text); }
.order-card__link[href]:hover { text-decoration: underline; text-underline-offset: 3px; }
.order-card__role { font: 500 12.5px/1.3 var(--font-body); color: var(--ink-2); }
.order-card__role:empty { display: none; }
.order-card__text { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.order-card__term { display: flex; align-items: flex-start; gap: 6px; font-size: 13.5px; }
.order-card__term .ic { margin-top: 3px; color: var(--ink-3); }
.order-card small { font-size: 12px; color: var(--ink-3); }
.order-card small:empty { display: none; }
.order-cards__edit { grid-column: 1 / -1; justify-self: start; margin-top: -4px; }
@media (max-width: 899px) { .order-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .order-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the lines: cards on a phone, a table once the block is wide enough ---------- */
.order-lines { container-type: inline-size; display: grid; gap: 8px; }
.order-lines__top { display: flex; justify-content: flex-end; }
.otable { overflow: hidden; }
.otable__head { display: none; }
.otable__group + .otable__group { border-top: 1px solid var(--line-strong); }
.otable__group-title {
  padding: 7px 12px; background: var(--surface); color: var(--ink-2);
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.otable__empty { padding: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }

.oline {
  display: grid; align-items: start; gap: 4px 10px; padding: 12px 8px 12px 14px; border-top: 1px solid var(--line);
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "item   item   item   amount"
    "who    who    who    menu"
    "qty    price  price  menu"
    "status status status status";
  transition: background-color .15s;
}
/* a recommended line on a card: its tick box in a column of its own */
.oline.has-pick {
  padding-left: 12px;
  grid-template-columns: 22px auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "pick item   item   item   amount"
    "pick who    who    who    menu"
    "pick qty    price  price  menu"
    "pick status status status status";
}
.oline:not(.has-pick) .oline__pick { display: none; }
.oline.is-active { cursor: pointer; }
.oline.is-active:hover { background: var(--surface); }
.oline.is-picked, .oline.is-picked:hover { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }
.oline__pick { grid-area: pick; display: flex; padding-top: 1px; }
.oline__pick input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.oline__item { grid-area: item; display: flex; flex-direction: column; min-width: 0; }
.oline__name { font-weight: 600; overflow-wrap: anywhere; }
.oline__note { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.oline__note:empty { display: none; }
.oline__who { grid-area: who; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.oline__who.faint { color: var(--ink-3); }
.oline__who.is-empty { display: none; }
.oline__qty { grid-area: qty; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.oline__qty::after { content: " ×"; color: var(--ink-3); }
.oline__price { grid-area: price; display: flex; flex-wrap: wrap; gap: 0 8px; min-width: 0; font-size: 13px; color: var(--ink-2); }
.oline__price small { font-size: 12px; color: var(--ink-3); }
.oline__price small:empty { display: none; }
.oline__amount { grid-area: amount; font-size: 15px; white-space: nowrap; }
.oline__status { grid-area: status; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; margin-top: 2px; }
.oline__status-sub { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.oline__status-sub:empty { display: none; }
.oline__menu { grid-area: menu; align-self: center; display: flex; justify-content: flex-end; }
.oline__menu .icon-btn { width: 40px; height: 40px; color: var(--ink-2); }
/* declined / voided: struck out with its reason, nothing to pay */
.oline.is-off .oline__name, .oline.is-off .oline__qty, .oline.is-off .oline__price > span, .oline.is-off .oline__amount { color: var(--ink-3); text-decoration: line-through; }
.oline.is-off .oline__who { color: var(--ink-3); }
.oline.is-voided .oline__flag { display: none; }

/* the money of a line: the price list's price struck out before the price; under the name — the discount with its
   reason and who, «в счёт ремонта», the price come back, the consumables added by themselves */
.oline__was { margin-right: 5px; color: var(--ink-3); font-weight: 400; }
.oline__was:empty { display: none; }
.oline__flag { display: flex; align-items: flex-start; gap: 4px; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--ink-3); overflow-wrap: anywhere; }
.oline__flag .ic { flex: none; margin-top: 1px; }
.oline__flag[data-kind="disc"] { color: color-mix(in srgb, var(--warn) 85%, var(--ink)); }
.oline__flag[data-kind="credit"] { color: var(--order-info-text); }
.oline__flag[data-kind="warranty"] { color: color-mix(in srgb, var(--ok) 80%, var(--ink)); }
.oline__flag[data-kind="back"] { color: var(--ink-2); }
/* a request to the owner about the line waits */
.oreq {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; white-space: nowrap;
  background: var(--warn-soft); color: var(--warn); font-size: 12px; font-weight: 600;
}

/* a mechanic of a work: avatar, first name, share */
.omech { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--ink); }
.omech .avatar--staff { width: 22px; height: 22px; border-radius: 6px; font-size: 10px; }
.omech__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omech small { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.omech small:empty { display: none; }

/* the status badge and the part's supply */
.obadge {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 99px; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 700;
}
.oline[data-status="approved"] .obadge { background: var(--order-info-soft); color: var(--order-info-text); }
.oline[data-status="done"] .obadge { background: var(--ok-soft); color: var(--ok); }
.oline[data-status="declined"] .obadge { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.oline[data-status="voided"] .obadge { background: var(--bad-soft); color: var(--bad); }
.osupply { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.osupply[data-kind="wait"] { background: var(--warn-soft); color: var(--warn); }
.osupply[data-kind="ok"] { background: var(--ok-soft); color: var(--ok); }
.osupply[data-kind="bad"] { background: var(--bad-soft); color: var(--bad); }

@container (min-width: 860px) {
  .otable__head, .oline, .oline.has-pick {
    grid-template-columns: 22px minmax(0, 2fr) minmax(0, 1.2fr) 64px 88px 92px minmax(0, 1.5fr) 40px;
    grid-template-areas: none;
    gap: 10px;
  }
  .oline:not(.has-pick) .oline__pick { display: flex; }
  .oline__who.is-empty { display: flex; }
  .otable__head {
    display: grid; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--line-strong);
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
  }
  .otable__head .r { text-align: right; }
  .oline, .oline.has-pick { align-items: center; padding: 9px 8px 9px 12px; }
  .oline > * { grid-area: auto; }
  .oline .r { justify-self: end; text-align: right; }
  .oline__qty::after { content: none; }
  .oline__price { flex-direction: column; align-items: flex-end; gap: 0; }
  .oline__status { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 0; }
  .oline__amount { font-size: 14px; }
  .otable__group-title, .otable__empty { padding-left: 46px; }
}

/* ---------- the customer's answer on the ticked lines: a bar that stays in sight ---------- */
.order-pickbar {
  position: sticky; bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); z-index: var(--z-sticky);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 10px 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line-strong)); border-radius: var(--radius);
  background: var(--surface-2); box-shadow: var(--shadow-2);
}
.order-pickbar__text { display: flex; flex-direction: column; flex: 1 1 140px; min-width: 0; line-height: 1.3; }
.order-pickbar__text small { font-size: 12.5px; color: var(--ink-2); }
.order-pickbar__x { width: 40px; height: 40px; color: var(--ink-2); }
@media (min-width: 1024px) { .order-pickbar { bottom: 16px; } }

/* ---------- under the lines: adding, the owner's costs; the totals ---------- */
.order-bottom { display: grid; gap: 14px; align-items: start; }
.order-bottom__side { display: grid; gap: 12px; align-content: start; }
.order-add { display: flex; flex-wrap: wrap; gap: 8px; }
.order-costs {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm); font-size: 13px; color: var(--ink-2);
}
.order-costs .ic { flex: none; margin-top: 1px; color: var(--ink-3); }
.order-costs.is-warn .ic { color: var(--warn); }
.order-sum { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); }
.order-sum__rows { display: grid; gap: 5px; }
.order-sum__rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.order-sum__rows dt { color: var(--ink-2); }
.order-sum__rows dd { white-space: nowrap; }
.order-sum__rec dt, .order-sum__rec dd { color: var(--ink-3); }
.order-sum__big { margin-top: 3px; padding-top: 8px; border-top: 1px solid var(--line-strong); }
.order-sum__big dt, .order-sum__big dd { color: var(--ink); font: 700 19px/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
/* the discount on the order: its size, then the reason and who under it; the cross takes it away */
.order-sum__rows > .order-sum__disc { align-items: flex-start; }
.order-sum__disc dt { display: flex; flex-direction: column; min-width: 0; color: var(--ink); font-weight: 600; }
.order-sum__disc dt small { font-size: 12px; font-weight: 400; color: var(--ink-3); overflow-wrap: anywhere; }
.order-sum__disc dt small:empty { display: none; }
.order-sum__disc dd { display: inline-flex; align-items: center; gap: 2px; margin-top: -4px; font-weight: 600; }
.order-sum__x { width: 30px; height: 30px; color: var(--ink-3); }
.order-sum__x:hover { color: var(--bad); }
/* for reference, already in the sums: the discounts in the lines, «в счёт ремонта» */
.order-sum__rows > .order-sum__info { font-size: 12.5px; }
.order-sum__info dt, .order-sum__info dd { color: var(--ink-3); }

/* the requests waiting for the owner: a yellow plaque each, his answer on it */
.order-reqs { display: grid; gap: 8px; }
.order-req {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}
.order-req__ic { margin-top: 2px; color: var(--warn); }
.order-req__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.order-req__label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--warn) 85%, var(--ink)); }
.order-req__text b { font-size: 14px; overflow-wrap: anywhere; }
.order-req__text small:last-child { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.order-req__text small:empty { display: none; }
.order-req__acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.order-req__acts .btn { flex: 1 1 auto; }
.order-pays { display: grid; }
.order-pays:empty { display: none; }
.order-pay { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 6px; padding: 4px 0; border-top: 1px dashed var(--line-strong); font-size: 13.5px; }
.order-pay__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.order-pay__text small { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.order-pay b { font-weight: 600; white-space: nowrap; }
.order-pay__void { width: 32px; height: 32px; color: var(--ink-3); }
.order-pay.is-voided .order-pay__text > span, .order-pay.is-voided b { color: var(--ink-3); text-decoration: line-through; }
.order-sum__due {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line-strong);
  font: 700 19px/1.2 var(--font-display); letter-spacing: var(--display-tracking);
}
.order-sum__due.is-due { color: var(--accent-text); }
.order-sum__due.is-over { color: var(--ok); }
.order-sum__due b { white-space: nowrap; }
.order-sum__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.order-sum__acts .btn { flex: 1 1 140px; }
@media (min-width: 900px) { .order-bottom { grid-template-columns: minmax(0, 1fr) 340px; } }

/* ---------- the sheets ---------- */
/* a list of actions: a line's, the order's */
.order-action { gap: 10px; }
.order-action__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.3; }
.order-action__text small { font-size: 12px; color: var(--ink-3); }
.order-action__text small:empty { display: none; }
.order-action .ic { color: var(--ink-3); }
.order-action.is-danger { color: var(--bad); }
.order-action.is-danger .ic { color: var(--bad); }

/* "who": the owner, the driver, the customer himself, another client */
.order-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 6px; }
.order-pick {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer;
}
.order-pick:hover { border-color: var(--accent); }
.order-pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.order-pick input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.order-pick__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.order-pick__text b { overflow-wrap: anywhere; }
.order-pick__text small { font-size: 12px; color: var(--ink-2); }
.order-pick__text small:empty { display: none; }
.order-other { margin-top: 2px; }
.order-places { flex-wrap: wrap; overflow: visible; margin-top: -6px; }
.order-when { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 6px; }

/* a work of the price list */
.order-svc {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 4px 4px 12px;
  border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-wash);
}
.order-svc__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.order-svc__text b { overflow-wrap: anywhere; }
.order-svc__text small { font-size: 12px; color: var(--ink-2); }
.order-svc-hit { justify-content: space-between; }
.order-svc-hit > b { flex: none; font-weight: 600; }
.order-line-sum { margin-top: -6px; font-size: 13px; }
.order-line-sum:empty { display: none; }
.order-done-note { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); font-size: 13px; }

/* the mechanics and their shares */
.omechs { display: grid; gap: 8px; }
.omechs__all { display: flex; flex-wrap: wrap; gap: 6px; }
.omech-chip { min-height: 40px; padding: 0 12px 0 5px; }
.omech-chip .avatar--staff { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.omechs__shares { display: grid; gap: 6px; }
.omechs__shares:empty { display: none; }
.omechs__row { display: grid; grid-template-columns: auto minmax(0, 1fr) 96px; align-items: center; gap: 10px; }
.omechs__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.omechs__sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; font-size: 13px; font-weight: 600; color: var(--ok); }
.omechs__sum.is-bad { color: var(--bad); }

/* a part: the customer's own, the quantity with its unit, in stock or awaited */
.order-client-part { padding: 6px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.order-client-part small { font-size: 12.5px; }
.order-qty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px; }
.order-supply { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.order-supply__date.input { flex: 1 1 160px; width: auto; }

/* the customer's answer */
.order-sheet .field > .segmented { align-self: flex-start; }
.order-mini { display: grid; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--surface); }
.order-mini:empty { display: none; }
.order-mini__row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.order-mini__row > span { min-width: 0; overflow-wrap: anywhere; }
.order-mini__row b { flex: none; font-weight: 600; white-space: nowrap; }
.order-mini__row.is-total { margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--line-strong); font-weight: 700; }
.order-reasons { flex-wrap: wrap; overflow: visible; }
.order-reasons .chip { position: relative; min-height: 40px; cursor: pointer; }
.order-reasons input { position: absolute; opacity: 0; pointer-events: none; }
.order-reasons .chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.order-reasons .chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.field.has-error .order-reasons .chip { border-color: var(--bad); }
.order-alert {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px;
  background: var(--bad-soft); color: color-mix(in srgb, var(--bad) 70%, var(--ink)); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
}
.order-alert .ic { flex: none; margin-top: 2px; }
.order-alert--warn { background: var(--warn-soft); color: color-mix(in srgb, var(--warn) 70%, var(--ink)); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.order-pay-amount.input { font: 700 22px/1.2 var(--font-display); }

/* ---------- the money in the sheets: the discount, the line's guard, the void ---------- */
.field.is-needed > .field__label::after { content: " *"; color: var(--bad); }
.odisc-size { display: flex; align-items: center; gap: 8px; }
.odisc-size .input-unit { flex: 1 1 auto; min-width: 0; }
.odisc-size .segmented { flex: none; }
.odisc-size .segmented label { min-width: 44px; font-weight: 600; }
.odisc-live { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: -4px; font-size: 13px; color: var(--ink-2); }
.odisc-live b { font: 700 24px/1.2 var(--font-display); letter-spacing: var(--display-tracking); color: var(--ink); }
.odisc-limit { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.odisc-limit .ic { flex: none; color: var(--ink-3); }
.oguard-slot:not(:has(.oguard > :not([hidden]))) { display: none; }
.oguard { display: grid; gap: 14px; }
.oguard__disc {
  display: grid; gap: 10px; padding: 12px; border-radius: var(--radius-sm);
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}
.oguard__text { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; color: color-mix(in srgb, var(--warn) 85%, var(--ink)); }
.oguard__text .ic { flex: none; margin-top: 2px; }
.oguard__limit { font-size: 12.5px; color: var(--ink-2); }
.oguard__limit:empty { display: none; }
.oguard__limit.is-over { color: var(--bad); font-weight: 600; }

/* ---------- «История изменений»: the journal of the order's money, folded ---------- */
.order-journal { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.order-journal__sum { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; cursor: pointer; list-style: none; font-weight: 600; }
.order-journal__sum::-webkit-details-marker { display: none; }
.order-journal__sum > .ic:first-child { color: var(--ink-3); }
.order-journal__n { padding: 1px 8px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 700; }
.order-journal__chev { margin-left: auto; color: var(--ink-3); transition: transform .15s; }
.order-journal[open] .order-journal__chev { transform: rotate(180deg); }
.order-journal__list { display: grid; padding: 2px 14px 8px; border-top: 1px solid var(--line); }
.oevent { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 13.5px; }
.oevent:first-child { border-top: 0; }
.oevent__at { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.oevent__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.oevent__text b { font-weight: 600; overflow-wrap: anywhere; }
.oevent__text small { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.oevent__text small:empty { display: none; }
.oevent__amount { font-weight: 600; white-space: nowrap; }
.oevent.is-minus .oevent__amount { color: var(--bad); }
@media (prefers-reduced-motion: reduce) { .order-journal__chev { transition: none; } }

/* ---------- phones: no sideways scroll at 375 px, fingers get 40 px ---------- */
@media (max-width: 599px) {
  .order-head { padding: 14px; }
  /* the topbar already says "Order № N": the header starts with the plate */
  .order-head__title > span:first-child { display: none; }
  .order-pay__void { width: 40px; height: 40px; }
  .order-page .btn--sm, .order-sheet .btn--sm { min-height: 40px; }
  .order-sheet .segmented label { min-height: 40px; }
  .order-sheet .field > .segmented { align-self: stretch; }
  .order-sheet .order-via { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-sheet .form-row { grid-template-columns: minmax(0, 1fr); }
  .order-add .btn { flex: 1 1 140px; }
  .order-pickbar .btn { flex: 1 1 auto; }
  .order-sum__x { width: 40px; height: 40px; margin: -5px -8px -5px 0; }
  /* the journal: the time over the event */
  .oevent { grid-template-columns: minmax(0, 1fr) auto; }
  .oevent__at { grid-column: 1 / -1; }
  .order-journal__sum { padding: 0 12px; }
  .order-journal__list { padding: 2px 12px 8px; }
}

/* ---------- the promised time (step 2a-3) ---------- */
.order-dl { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ok); }
.order-dl__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.order-dl.is-late { color: var(--bad); }
.order-dl.is-client { color: var(--ink-2); }
.order-dl.is-risk { color: var(--warn); }
.order-dl__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.order-dl__acts:not(:has(button:not([hidden]))) { display: none; }
.order-dl__history { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; border-top: 1px dashed var(--line); padding-top: 8px; }
.order-dl__row { display: grid; gap: 1px; font-size: 12.5px; }
.order-dl__when { font-weight: 600; font-variant-numeric: tabular-nums; }
.order-dl__why { color: var(--ink-2); }
.order-dl__now { display: flex; align-items: center; gap: 6px; color: var(--ink-2); margin: 0; }
.order-wa__text { white-space: pre-wrap; padding: 12px 14px; border-radius: var(--radius); background: #e9f9ef; color: #102018; margin: 0; }
.orders-dl { font-size: 12px; font-weight: 600; white-space: nowrap; }
.orders-dl.is-late { color: var(--bad); }
.orders-dl.is-client { color: var(--ink-3); }
.orders-dl.is-risk { color: var(--warn); }

/* ---------- the car's map (spec 08): the auto service's dental chart ---------- */
.carmap { display: grid; gap: 10px; justify-items: center; }
.carmap__svg { width: 100%; max-width: 240px; height: auto; overflow: visible; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25)); }
.carmap__shade-in { stop-color: rgba(0, 0, 0, .22); }
.carmap__shade-out { stop-color: rgba(0, 0, 0, 0); }
.carmap__dir { font: 700 9px var(--font-display); letter-spacing: .14em; fill: var(--ink-3); }
.carmap__arrow { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.carmap__z {
  fill: color-mix(in srgb, var(--surface-2) 88%, var(--ink) 12%); stroke: var(--bg); stroke-width: 2.2; stroke-linejoin: round;
  transition: fill .18s ease, filter .18s ease;
}
.carmap__z--roof { fill: color-mix(in srgb, var(--surface-2) 75%, var(--ink) 25%); }
.carmap__z--glass { fill: color-mix(in srgb, #4d6b8a 55%, var(--surface-2)); }
.carmap__z--light { fill: color-mix(in srgb, #ffe7a3 70%, var(--surface-2)); }
.carmap__z--wheel { fill: #1b1d22; stroke: color-mix(in srgb, var(--ink) 25%, transparent); stroke-width: 1.4; }
.carmap:not(.is-static) .carmap__z { cursor: pointer; }
.carmap:not(.is-static) .carmap__z:hover, .carmap__z:focus-visible { filter: brightness(1.18); outline: none; }
.carmap__z.is-rec { fill: color-mix(in srgb, #f0a020 70%, var(--surface-2)); }
.carmap__z.is-ok { fill: color-mix(in srgb, #4c8dff 72%, var(--surface-2)); }
.carmap__z.is-done { fill: color-mix(in srgb, #2fb36f 72%, var(--surface-2)); }
.carmap__z.is-hist { fill: color-mix(in srgb, var(--accent) calc(var(--heat, .5) * 100%), var(--surface-2)); }
.carmap__z.is-marked { stroke: var(--bad); stroke-dasharray: 3 2; }
.carmap__z.is-sel { stroke: var(--accent); stroke-width: 3.2; stroke-dasharray: none; }
.carmap__badge circle { fill: var(--bad); stroke: var(--bg); stroke-width: 1.6; }
.carmap__badge text { font: 700 9.5px var(--font-body); fill: #fff; pointer-events: none; }
.carmap__badge { pointer-events: none; }
.carmap__badge.is-count circle { fill: var(--ink); }
.carmap__badge.is-count text { fill: var(--bg); }
.carmap__systems { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.carmap__sys { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.carmap__sys:disabled { cursor: default; }
.carmap__sys-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.carmap__sys.is-rec .carmap__sys-dot { background: #f0a020; }
.carmap__sys.is-ok .carmap__sys-dot { background: #4c8dff; }
.carmap__sys.is-done .carmap__sys-dot { background: #2fb36f; }
.carmap__sys.is-hist .carmap__sys-dot { background: var(--accent); }
.carmap__sys.is-sel { border-color: var(--accent); color: var(--ink); }
.carmap__sys-n:empty { display: none; }
.carmap__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 12px; color: var(--ink-2); }
.carmap__legend li { display: inline-flex; align-items: center; gap: 6px; }
.carmap__key { width: 12px; height: 12px; border-radius: 3px; }
.carmap__key--mark { border-radius: 50%; background: var(--bad); }
.carmap__key--rec { background: #f0a020; }
.carmap__key--ok { background: #4c8dff; }
.carmap__key--done { background: #2fb36f; }
.carmap__key--hist { background: var(--accent); }

.order-map { padding: 16px; display: grid; gap: 12px; margin-bottom: 14px; }
.order-map__head h3 { font-size: 16px; }
.order-map__head small { color: var(--ink-3); }
.order-map__grid { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 20px; align-items: start; }
.order-map__side { display: grid; gap: 14px; min-width: 0; }
.carmap-marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.carmap-mark { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface); }
.carmap-mark__badge { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; }
.carmap-mark__text { display: grid; min-width: 0; }
.carmap-mark__text small { font-size: 12px; color: var(--ink-3); }
.carmap-insp { display: grid; gap: 10px; }
.carmap-insp__row { display: grid; gap: 6px; }
.carmap-fuel { display: flex; gap: 3px; align-items: flex-end; }
.carmap-fuel__seg { width: 22px; height: 18px; border-radius: 3px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; padding: 0; }
.carmap-fuel__seg:nth-child(n) { height: calc(10px + var(--i, 0) * 2px); }
.carmap-fuel__seg.is-on { background: color-mix(in srgb, #2fb36f 75%, var(--surface)); border-color: transparent; }
.carmap-fuel__seg.is-low.is-on { background: color-mix(in srgb, var(--bad) 75%, var(--surface)); }
.carmap-fuel__seg:disabled { cursor: default; }
.carmap-fuel__n { font-size: 13px; color: var(--ink-2); margin-left: 6px; }
.carmap-insp__row:has(.carmap-fuel) { grid-template-columns: auto; }
.carmap-toggles { flex-wrap: wrap; overflow: visible; }
.carmap-toggle { cursor: pointer; }
.carmap-toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.carmap-toggles--lights .carmap-toggle[aria-pressed="true"] { background: color-mix(in srgb, #f0a020 25%, var(--bg)); border-color: #f0a020; }
.carmap-toggle:disabled { cursor: default; }
.carmap-sheet__add { justify-self: start; }
.carmap-attach { flex-wrap: wrap; overflow: visible; }
.carmap-work__st { color: var(--ink-3); font-size: 12px; }
@media (max-width: 760px) {
  .order-map__grid { grid-template-columns: 1fr; }
  .carmap__svg { max-width: 210px; }
}
.car-map { padding: 14px; display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 18px; align-items: start; }
.car-map__side { display: grid; gap: 8px; min-width: 0; }
.car-map__sub { font-size: 12.5px; margin: 0; }
@media (max-width: 760px) { .car-map { grid-template-columns: 1fr; } }

/* ---------- the car is ready, the handover (spec 09 §2, §3) ---------- */
.order-away {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--warn-soft); color: color-mix(in srgb, var(--warn) 75%, var(--ink)); font-size: 14px; font-weight: 600; overflow-wrap: anywhere;
}
.order-away .ic { flex: none; }
.order-handed { list-style: none; margin: -6px 0 0; padding: 0; display: grid; gap: 4px; }
.order-handed__row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--ink-2); }
.order-handed__row .ic { flex: none; color: var(--ok); }
.order-handed__row > span { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.oready { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.oready__row { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.oready__row.is-not { background: var(--surface); }
.oready__row.is-not .oready__name { text-decoration: line-through; color: var(--ink-3); }
.oready__main { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.oready__name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.oready__sum { flex: none; font-weight: 600; }
.oready__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.oready__mech { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 200px; color: var(--ink-2); }
.oready__mech .input { min-height: 36px; padding-block: 4px; flex: 1 1 auto; min-width: 0; }
.oready__row.is-not .oready__mech { opacity: .45; }
.oready__check { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 12px; font-weight: 600; }
.oready__seg { flex: none; }
.oready__none { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ok); font-weight: 600; }
.omsg { display: grid; gap: 8px; }
.omsg + .omsg { padding-top: 12px; border-top: 1px dashed var(--line); }
.omsg__who { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.omsg__tg { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ok); font-weight: 600; }
.omsg__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.omsg__acts .btn[hidden] { display: none; }
.oho-ready { flex-wrap: wrap; align-items: center; }
.oho-ready > span { flex: 1 1 200px; min-width: 0; }
.oho-grid { display: grid; gap: 12px; }
.oho-grid .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.oho-grid .segmented label { padding: 0 8px; white-space: normal; text-align: center; line-height: 1.2; }
.oho-to { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.oho-to__opt {
  position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; min-height: 56px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer;
}
.oho-to__opt[hidden] { display: none; }
.oho-to__opt input { position: absolute; opacity: 0; pointer-events: none; }
.oho-to__opt .ic { flex: none; margin-top: 1px; color: var(--ink-3); }
.oho-to__opt > span { display: grid; gap: 1px; min-width: 0; }
.oho-to__opt b { font-size: 14px; }
.oho-to__opt small { color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
.oho-to__opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.oho-to__opt:has(input:checked) .ic { color: var(--accent-text); }
.oho-to__opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.oho-other { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; padding: 12px; border-radius: var(--radius-sm); background: var(--surface); }
.oho-other[hidden] { display: none; }
.oho-partial { display: grid; gap: 4px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.oho-partial .field__hint { margin: 0; }
.oho-due { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.oho-due > span:first-of-type { flex: 1 1 auto; }
.oho-due__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; }
.oho-due__acts[hidden] { display: none; }
.oho-due__debt { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; }
.oho-due__debt:has(input:checked) { border-color: var(--warn); color: color-mix(in srgb, var(--warn) 75%, var(--ink)); background: var(--warn-soft); }
.oho-due__debt input { accent-color: var(--warn); }
.oho-due.is-due { background: var(--surface); color: var(--ink); }
.oho-due .ic { flex: none; }
.oho-debt { display: grid; gap: 6px; }
.oho-debt[hidden] { display: none; }
.oho-debt .field__hint { margin: 0; color: var(--warn); }
@media (max-width: 599px) {
  .oready__seg { flex: 1 1 100%; display: grid; grid-auto-flow: column; }
  .oho-to { grid-template-columns: minmax(0, 1fr); }
  .oho-other { grid-template-columns: minmax(0, 1fr); }
  .oho-due__debt { min-height: 40px; }
}

/* ---------- the board: the cars on the territory (spec 09 §1) ---------- */
.board-page { display: grid; gap: 16px; }
.board-page > * { min-width: 0; }
.board-kpis { display: grid; gap: 8px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.board-kpi {
  display: grid; gap: 2px; align-content: start; text-align: left; padding: 12px 14px; min-height: 72px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink-2); font-size: 13px; cursor: pointer;
}
.board-kpi b { font: var(--display-weight, 700) 26px/1.1 var(--font-display); letter-spacing: var(--display-tracking, 0); color: var(--ink); }
.board-kpi:hover { border-color: var(--line-strong); }
.board-kpi[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.board-kpi.is-hot { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: var(--bad-soft); }
.board-kpi.is-hot b, .board-kpi.is-hot span { color: color-mix(in srgb, var(--bad) 75%, var(--ink)); }
.board-kpi:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.board-places { display: flex; align-items: flex-start; gap: 10px 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.board-places__title { flex: none; padding-top: 5px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.board-places__list { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.board-place { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border-radius: var(--radius-sm); background: var(--surface); font-size: 13px; min-height: 36px; }
.board-place__name { font-weight: 600; white-space: nowrap; }
.board-place__cars { display: flex; flex-wrap: wrap; gap: 4px; color: var(--ink-3); }
.board-place.is-free { background: none; border: 1px dashed var(--line-strong); }
.board-place__car { display: inline-flex; border-radius: 4px; }
.board-place__car:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.board-sec__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.board-noorder .board-sec__title { color: color-mix(in srgb, var(--bad) 75%, var(--ink)); }
.board-noorder__list, .board-away__list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.board-away__sub { margin: -4px 0 10px; font-size: 13px; }

.board-cols { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
.board-col { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 10px; border-radius: var(--radius); background: var(--surface); }
.board-col__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.board-col__n { font-size: 13px; color: var(--ink-3); }
.board-col__list { display: grid; gap: 8px; }
.board-col__empty { margin: 0; padding: 14px 0; text-align: center; font-size: 13px; }

.board-tile {
  position: relative; display: grid; gap: 4px; padding: 10px 12px 10px 14px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow-1);
}
a.board-tile:hover { border-color: var(--line-strong); }
a.board-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the strip on the left says what the car waits for: red — late by us, green — its part came */
.board-tile::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: transparent; }
.board-tile.is-late::before { background: var(--bad); }
.board-tile.is-go::before { background: var(--ok); }
.board-tile.is-late { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.board-tile__top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.board-tile__note { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; background: var(--note-bg, #fff6d6); color: var(--warn); flex: none; }
.board-tile__no { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
a.board-tile__no { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.board-tile__car { margin: 2px 0 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.board-tile__client { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.board-tile__dl { margin: 2px 0 0; font-size: 12.5px; }
.board-tile__parts { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 2px; }
.board-part { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: color-mix(in srgb, var(--warn) 75%, var(--ink)); }
.board-part .ic { flex: none; margin-top: 2px; }
.board-part.is-came { color: color-mix(in srgb, var(--ok) 75%, var(--ink)); font-weight: 600; }
.board-tile__mech { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--ink-2); }
.board-tile__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.board-tile__due { font-weight: 700; color: var(--ink); white-space: nowrap; }
.board-tile__time { margin: 0; font-size: 12px; color: var(--ink-3); }
.board-tile__late { margin: 0; font-size: 12.5px; color: color-mix(in srgb, var(--bad) 75%, var(--ink)); font-weight: 600; }
.board-tile--noorder { border: 1.5px dashed var(--bad); box-shadow: none; }
.board-tile--noorder .board-tile__no { color: color-mix(in srgb, var(--bad) 75%, var(--ink)); font-weight: 700; }
.board-tile--noorder .btn { justify-self: start; margin-top: 4px; }
.board-tile--away { background: var(--surface); box-shadow: none; }
.board-tile__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.board-tile__acts[hidden] { display: none; }

.board-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; }
.board-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.board-legend__item::before { content: ""; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.board-legend__item.is-late::before { background: var(--bad); }
.board-legend__item.is-client::before { background: var(--ink-3); }
.board-legend__item.is-go::before { background: var(--ok); }
.board-legend__item.is-noorder::before { border: 1.5px dashed var(--bad); }

@media (max-width: 1199px) {
  .board-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .board-cols { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}
@media (max-width: 599px) {
  .board-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .board-kpi { min-height: 60px; padding: 10px 12px; }
  .board-kpi b { font-size: 22px; }
  .board-places { flex-direction: column; gap: 6px; }
  .board-cols { grid-template-columns: minmax(0, 1fr); }
  /* an empty stage is only its header on a phone */
  .board-col.is-empty .board-col__empty { display: none; }
  .board-col.is-empty { padding-block: 8px; }
  .board-noorder__list, .board-away__list { grid-template-columns: minmax(0, 1fr); }
  .board-tile--noorder .btn, .board-tile__acts .btn { min-height: 40px; }
}

/* ---------- the owner's feed of the day (spec 09 §4) ---------- */
.orders-feed { display: grid; gap: 14px; }
.orders-feed[hidden] { display: none; }
.orders-feed__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.orders-feed__title { margin: 0; font-size: 14px; color: var(--ink-2); }
.orders-feed__day { display: flex; align-items: center; gap: 4px; }
.orders-feed__day .input { width: auto; min-height: 36px; }
.feed-list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.feed-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; padding: 12px 16px; }
.feed-list > .feed-row + .feed-row { border-top: 1px solid var(--line); }
.feed-row__order { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); text-decoration: none; }
.feed-row__order b { font: 700 14px/1.2 var(--font-display); white-space: nowrap; }
.feed-row__order:hover b { text-decoration: underline; text-underline-offset: 3px; }
.feed-row__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.35; }
.feed-row__what { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.feed-row__main small { font-size: 12.5px; overflow-wrap: anywhere; }
.feed-row__main small:empty { display: none; }
.feed-row__why { color: var(--ink); }
.feed-row__sum { font: 700 15px/1.3 var(--font-display); white-space: nowrap; color: var(--ink-2); }
.feed-row__sum:empty { display: none; }
.feed-row.is-minus .feed-row__sum, .feed-row.is-debt .feed-row__sum { color: var(--bad); }
.feed-row.is-late .feed-row__what { color: color-mix(in srgb, var(--bad) 75%, var(--ink)); }
.orders-settings__time { max-width: 160px; }
.orders-settings__voen { max-width: 220px; }
/* quick sets (spec 16) */
.oset-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.oset { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink); text-align: left; cursor: pointer; }
.oset:hover { border-color: var(--accent); }
.oset__main { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.oset__main b { font-size: 14px; }
.oset__main small { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.oset__sum { white-space: nowrap; }
.set-works { max-height: 220px; overflow-y: auto; }
.set-parts { display: grid; gap: 6px; }
.set-part { display: grid; grid-template-columns: minmax(0, 1fr) 64px 92px 96px auto; gap: 6px; align-items: center; }
.set-part.has-error .input { border-color: var(--bad); }
.set-parts__add { justify-self: start; }
@media (max-width: 599px) { .set-part { grid-template-columns: minmax(0, 1fr) 64px auto; } .set-part [name="partName"] { grid-column: 1 / -1; } }
.order-estimate { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ink-2); }
.order-estimate[hidden] { display: none; }
.order-estimate .ic { flex: none; color: var(--accent-text); }
/* the works put off (spec 13) */
.order-deferred { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); font-size: 13px; text-align: left; cursor: pointer; }
.order-deferred[hidden] { display: none; }
.order-deferred > span { flex: 1 1 auto; min-width: 0; }
.order-deferred b { color: var(--accent-text); white-space: nowrap; }
.order-deferred:hover { border-color: var(--accent); }
.deferred-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.deferred-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface); }
.deferred-row__main { display: grid; min-width: 0; flex: 1 1 220px; }
.deferred-row__main b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.deferred-row__main small { font-size: 12px; color: var(--ink-3); }
.deferred-row__sum { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.deferred-row__sum s:empty { display: none; }
.deferred-pick { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.deferred-pick input { flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
.deferred-pick:has(input:checked) { border-color: var(--accent); }
.deferred-total { margin: 0; font-weight: 700; }
.orders-deferred { display: grid; gap: 12px; }
.orders-deferred[hidden] { display: none; }
.deferred-cars { display: grid; gap: 10px; }
.deferred-car { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.deferred-car__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.deferred-car__car { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 220px; color: var(--ink); text-decoration: none; }
.deferred-car__who { display: grid; min-width: 0; }
.deferred-car__who small { color: var(--ink-3); font-size: 12px; }
.deferred-car__sum { font-size: 15px; }
/* the reminder of the works put off (spec 13 §4) */
.dchip { font-size: 12px; font-weight: 600; line-height: 1.3; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: var(--surface); color: var(--ink-2); }
.dchip[data-kind="due"] { background: var(--warn-soft); color: var(--warn); }
.dchip[data-kind="ok"] { background: var(--ok-soft); color: var(--ok); }
.car-warranty { display: grid; gap: 8px; }
.car-warranty__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.car-warranty__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface); }
.car-warranty__main { display: grid; min-width: 0; color: var(--ink); text-decoration: none; flex: 1 1 220px; }
.car-warranty__main b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.car-warranty__main small { font-size: 12px; color: var(--ink-3); }
.car-warranty__term { font-size: 12.5px; font-weight: 600; color: var(--ok); }
/* the warranty (spec 12): the claims of the order, the earlier lines to claim */
.order-claims { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.order-claims[hidden] { display: none; }
.order-claims__title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.order-claims__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.order-claims__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: 13px; }
.order-claims__row > span:first-child { min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.order-claims__row.is-yes > span:first-child { color: var(--ink); }
.order-claims__acts { display: flex; gap: 6px; }
.order-claims__acts:not(:has(button:not([hidden]))) { display: none; }
.oclaim { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 300px; overflow-y: auto; }
.oclaim__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; }
.oclaim__row input { position: absolute; opacity: 0; pointer-events: none; }
.oclaim__row:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.oclaim__row:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.oclaim__main { display: grid; min-width: 0; }
.oclaim__main b { font-size: 14px; overflow-wrap: anywhere; }
.oclaim__main small { font-size: 12px; color: var(--ink-3); }
.oclaim__term { font-size: 12px; font-weight: 600; color: var(--ok); text-align: right; }
.oclaim li.is-expired .oclaim__term { color: var(--bad); }
.oclaim li.is-law .oclaim__term { color: var(--ink-3); }
.field.has-error .oclaim__row { border-color: var(--bad); }
@media (max-width: 599px) { .oclaim__row { grid-template-columns: minmax(0, 1fr); } .oclaim__term { text-align: left; } }
/* the warranty of a work: days and kilometres side by side */
.warranty-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 8px; }
.input-wrap--unit { position: relative; display: block; }
.input-wrap--unit .input { padding-right: 46px; }
.input-wrap__unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ink-3); pointer-events: none; }
@media (max-width: 599px) {
  .feed-row { grid-template-columns: minmax(0, 1fr) auto; padding: 12px; }
  .feed-row__order { grid-column: 1 / -1; }
}

/* ---------- the papers of an order (step 2в): print only, black on white ---------- */
.order-print-label { margin-left: 2px; }
@media (max-width: 599px) { .order-print-label { display: none; } }
.oprint { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oprint__opt {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px; min-height: 72px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer;
}
.oprint__opt[hidden] { display: none; }
.oprint__opt input { position: absolute; opacity: 0; pointer-events: none; }
.oprint__opt .ic { flex: none; margin-top: 1px; color: var(--ink-3); }
.oprint__opt > span { display: grid; gap: 2px; min-width: 0; }
.oprint__opt b { font-size: 14px; }
.oprint__opt small { color: var(--ink-3); font-size: 12px; line-height: 1.35; }
.oprint__opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.oprint__opt:has(input:checked) .ic { color: var(--accent-text); }
.oprint__opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.oprint__fix { display: flex; align-items: center; gap: 6px; margin: 0; }
@media (max-width: 599px) { .oprint { grid-template-columns: minmax(0, 1fr); } }

.print-area .op { display: block; color: #000; font-size: 9.5pt; line-height: 1.35; }
.print-area .op + .op { break-before: page; }
.op-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; padding-bottom: 3mm; margin-bottom: 3mm; border-bottom: .6mm solid #000; }
.op-head__biz, .op-head__doc { display: grid; gap: .6mm; }
.op-head__biz b { font: 700 13pt/1.15 var(--font-display); }
.op-head__biz span, .op-head__doc span { font-size: 8.5pt; color: #333; }
.op-head__biz span:empty, .op-head__doc span:empty { display: none; }
.op-head__doc { text-align: right; }
.op-head__doc b { font: 700 12pt/1.2 var(--font-display); }
.op-copy { font-weight: 700; color: #000 !important; text-transform: uppercase; letter-spacing: .04em; }
.op-kv { margin: 0; }
.op-kv > div { display: grid; grid-template-columns: 30mm minmax(0, 1fr); gap: 2mm; padding: .8mm 0; border-bottom: .2mm solid #bbb; }
.op-kv dt { color: #444; }
.op-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.op-kv--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8mm; }
.op-sec { margin-top: 3.5mm; break-inside: avoid; }
.op-sec h2 { margin: 0 0 1.2mm; font: 700 9.5pt/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .05em; }
.op-sec p { margin: 0; }
.op-table { width: 100%; border-collapse: collapse; font-size: 9pt; }
.op-table th { text-align: left; font-weight: 600; color: #333; border-bottom: .4mm solid #000; padding: 1mm 1.5mm; }
.op-table td { padding: 1mm 1.5mm; border-bottom: .2mm solid #ccc; vertical-align: top; }
.op-table td small { display: block; color: #555; font-size: 8pt; }
.op-table td small:empty { display: none; }
.op-table .n { width: 7mm; color: #555; }
.op-table .r { text-align: right; white-space: nowrap; }
.op-table tr { break-inside: avoid; }
.op-totals { display: flex; justify-content: flex-end; margin-top: 3mm; }
.op-totals .op-kv { width: 80mm; }
.op-totals .op-kv > div { grid-template-columns: minmax(0, 1fr) auto; }
.op-totals .op-kv dd { text-align: right; white-space: nowrap; }
.op-totals .op-kv > .is-total { border-top: .4mm solid #000; font-size: 11pt; }
.op-totals .op-kv > .is-total dt { color: #000; font-weight: 700; }
.op-totals .op-kv > .is-due dd { font-size: 11pt; }
.op-list { margin: 0; padding-left: 5mm; }
.op-list li { padding: .4mm 0; }
.op-sign-line { margin-top: 2mm !important; }
.op-terms { margin-top: 4mm; font-size: 8.5pt; color: #222; }
.op-terms p { margin: 0 0 1mm; }
.op-terms p:empty { display: none; }
.op-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12mm; margin-top: 10mm; break-inside: avoid; }
.op-signs > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 3mm; }
.op-signs i { display: block; border-bottom: .3mm solid #000; height: 6mm; }
.op-signs small { grid-column: 2; font-size: 8pt; color: #444; text-align: center; padding-top: .6mm; }
.op-signs small:empty { display: none; }
.op-muted { color: #555; }
/* the act: the map on the left, what the intake saw on the right */
.op-act { display: grid; grid-template-columns: 58mm minmax(0, 1fr); gap: 7mm; margin-top: 3mm; }
.op-act__map .carmap { gap: 0; }
.op-act__map .carmap__svg { max-width: 56mm; filter: none; }
.op-act__map .carmap__legend, .op-act__map .carmap__systems { display: none !important; }
.op-act__map .carmap__z { fill: #fff !important; stroke: #000 !important; stroke-width: 1 !important; stroke-dasharray: none !important; }
.op-act__map .carmap__z--glass { fill: #e9e9e9 !important; }
.op-act__map .carmap__z--wheel { fill: #bbb !important; }
.op-act__map .carmap__z.is-marked { stroke-width: 2 !important; }
.op-act__map .carmap__shade-in, .op-act__map .carmap__shade-out { stop-color: transparent; }
.op-act__map .carmap__hatch-bg { fill: #fff; }
.op-act__map .carmap__hatch-line { stroke: #ccc; }
.op-act__map .carmap__dir { fill: #000; }
.op-act__map .carmap__arrow { stroke: #000; }
.op-act__map .carmap__badge circle { fill: #000; stroke: #fff; }
.op-act__map .carmap__badge text { fill: #fff; }
.op-marks { list-style: decimal; }
.op-marks li::marker { font-weight: 700; }
@media print { html:has(body.is-printing) { background: #fff !important; } }
.op-fuel { display: flex; align-items: center; gap: 3mm; }
.op-fuel__cells { display: inline-flex; gap: .8mm; }
.op-fuel__cell { width: 4.5mm; height: 4mm; border: .3mm solid #000; }
.op-fuel__cell.is-on { background: #000; }
.op-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1mm; }
.op-checks--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4mm; }
.op-checks li { display: flex; align-items: flex-start; gap: 2mm; }
.op-box { flex: none; width: 3.4mm; height: 3.4mm; margin-top: .4mm; border: .3mm solid #000; position: relative; }
.op-box.is-on::after { content: ""; position: absolute; inset: .6mm; background: #000; }
.op-out { margin-top: 8mm; padding-top: 3mm; border-top: .4mm dashed #000; break-inside: avoid; }
.op-out h2 { margin: 0 0 1mm; font: 700 9.5pt/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .05em; }
.op-out p { margin: 0; }
.op-out .op-signs { margin-top: 8mm; }
/* the workshop sheet: big and plain */
.op-shop__car { display: grid; gap: 1mm; }
.op-shop__plate { font: 700 22pt/1 var(--font-mono, monospace); letter-spacing: .04em; border: .6mm solid #000; padding: 1mm 3mm; justify-self: start; }
.op-shop__car span { font-size: 11pt; font-weight: 600; }
.op-shop__note { margin: 0 0 3mm; padding: 2.5mm 3mm; border: .6mm solid #000; font-size: 12pt; }
.op-checks--big li { font-size: 11pt; padding: 1mm 0; }
.op-checks--big .op-box { width: 4.5mm; height: 4.5mm; }
.op-dont h2 { display: inline-block; padding: .5mm 2mm; background: #000; color: #fff; }
.op-ruled { height: 30mm; background: repeating-linear-gradient(to bottom, transparent 0 7mm, #999 7mm 7.2mm); }
/* the receipt: a narrow strip */
.print-area .op-rcpt { display: grid; gap: .8mm; width: 72mm; color: #000; font-size: 9pt; line-height: 1.3; text-align: center; }
.op-rcpt span:empty { display: none; }
.op-rcpt hr { width: 100%; border: 0; border-top: .3mm dashed #000; margin: 1.5mm 0; }
.op-rcpt__biz { font: 700 12pt/1.2 var(--font-display); }
.op-rcpt__lines { display: grid; gap: 1mm; text-align: left; }
.op-rcpt__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2mm; }
.op-rcpt__line small { grid-column: 1; color: #444; }
.op-rcpt__line small:empty { display: none; }
.op-rcpt__line b { grid-column: 2; grid-row: 1; font-weight: 600; }
.op-rcpt__kv { text-align: left; }
.op-rcpt__kv > div { grid-template-columns: minmax(0, 1fr) auto; border-bottom: 0; padding: .3mm 0; }
.op-rcpt__kv dd { text-align: right; }
.op-rcpt__terms { margin: 0; font-size: 7.5pt; color: #333; }
.op-rcpt__thanks { margin: 0; font-weight: 700; }

/* ---------- "time for maintenance" (spec 14): the row of a car ---------- */
.rc-row.to-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 110px minmax(0, 1fr) auto; }
.to-row__car { flex-direction: row !important; align-items: center; gap: 10px; }
.to-row__who { display: grid; min-width: 0; }
.to-row__who b { font-size: 14px; overflow-wrap: anywhere; }
.to-row__who small { font-size: 12px; overflow-wrap: anywhere; }
.to-row__what { display: grid; gap: 2px; min-width: 0; }
.to-row__what b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.to-row__what small { font-size: 12px; line-height: 1.35; }
@media (max-width: 1100px) {
  .rc-row.to-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 110px; }
  .rc-row.to-row .rc-last { grid-column: 1 / 3; }
  .rc-row.to-row .op-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 599px) {
  .rc-row.to-row { grid-template-columns: minmax(0, 1fr) auto; }
  .rc-row.to-row .to-row__what { grid-column: 1 / -1; }
  .rc-row.to-row .rc-last { grid-column: 1 / -1; }
}
/* the customer's part did not fit (spec 17) */
.fit-verdict { justify-self: start; }
.orders-settings__redo { max-width: 280px; }
.fit-day { max-width: 260px; }
.fit-redo { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.fit-redo__fields { display: grid; gap: 12px; }
.fit-redo__fields[hidden] { display: none; }