/* ============ auto service: cars of clients (docs/niches/auto/03-cars-tech.md §7) ============ */
/* The number plate, the receptionist's intake, the intake and car sheets, a car's card, the cars of a client.
   Colours come from the theme (garage in the auto niche); only the plate itself is white in every theme. */

/* ---------- the number plate: a physical object — white, the blue AZ strip with the flag, mono bold ---------- */
.plate {
  --plate-h: 26px; --plate-fs: 14px; --plate-strip: 17px;
  display: inline-flex; align-items: stretch; flex: none; height: var(--plate-h); max-width: 100%;
  border: 1.5px solid #16181c; border-radius: 4px; background: #fff; color: #111;
  overflow: hidden; white-space: nowrap; vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), var(--shadow-1);
  font: 700 var(--plate-fs)/1 var(--font-mono); letter-spacing: .04em;
}
.plate__az {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; flex: none;
  width: var(--plate-strip); padding-bottom: 2px; background: #1f5fbf; color: #fff;
  font: 700 calc(var(--plate-fs) * .5)/1 var(--font-body); font-style: normal; letter-spacing: 0;
}
.plate__flag { width: 64%; height: 28%; border-radius: 1px; background: linear-gradient(#00b5e2 0 33.3%, #ef3340 33.3% 66.6%, #509e2f 66.6%); }
.plate__num { display: flex; align-items: center; padding: 0 .45em; overflow: hidden; }
.plate--sm { --plate-h: 20px; --plate-fs: 11px; --plate-strip: 12px; border-width: 1px; border-radius: 3px; }
.plate--sm .plate__flag { display: none; }
.plate--sm .plate__az { justify-content: center; padding: 0; font-size: 6px; }
.plate--lg { --plate-h: 42px; --plate-fs: 23px; --plate-strip: 26px; border-width: 2px; border-radius: 6px; }
.plate--lg .plate__az { padding-bottom: 4px; gap: 3px; }
.plate--foreign .plate__az { display: none; }
/* typed in an unusual format: the plate is shown, with a "check it" ring */
.plate--odd { border-color: var(--warn); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 35%, transparent); }
/* a car without a number */
.plate-none {
  display: inline-flex; align-items: center; flex: none; height: 26px; padding: 0 10px;
  border: 1px dashed var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--ink-3);
  font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: middle;
}
.plate-none.plate--sm { height: 20px; padding: 0 7px; font-size: 11px; }
.plate-none.plate--lg { height: 42px; padding: 0 14px; font-size: 15px; }

/* the odometer reads in mono, as on the dashboard */
.km { font-family: var(--font-mono); font-weight: 700; letter-spacing: .01em; white-space: nowrap; }

/* the clients list: the client's numbers under the name */
.row__plates { display: flex; gap: 4px; margin: 3px 0 2px; overflow: hidden; }

/* ---------- the intake page: one big search, cars and clients found ---------- */
.intake-page { max-width: 820px; margin: 0 auto; }
.intake-search { position: relative; display: block; }
.intake-search__icon { position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.intake-search__input.input {
  min-height: 60px; padding: 12px 16px 12px 50px; border-width: 2px; border-radius: var(--radius);
  font: 600 20px/1.2 var(--font-display); letter-spacing: -.01em;
}
.intake-search__input.input::placeholder { font: 500 16px/1.2 var(--font-body); letter-spacing: 0; color: var(--ink-3); }
.intake-search__input.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.intake-hint { margin: 10px 2px 0; font-size: 13.5px; }

/* a car found: the plate, the car, its owner, its driver, its note; the row opens it (its link covers the row),
   "Accept" stands above the link */
.car-hit { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
.car-hit:hover { background: var(--surface); }
.car-hit__plate { display: flex; min-width: 116px; }
.car-hit .row__title { font-size: 15px; }
.car-hit__link::after { content: ''; position: absolute; inset: 0; }
.car-hit:hover .car-hit__link { text-decoration: underline; text-underline-offset: 3px; }
.car-hit .row__sub:empty { display: none; }
.car-hit__note { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--warn); min-width: 0; }
.car-hit__note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-hit__accept { position: relative; z-index: 1; }
/* booked for today: "Accept" goes by the booking */
.car-hit__booked { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--accent-text); }
/* the number typed in full */
.car-hit.is-exact { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }

/* a client found: the name opens the card, his cars are plates to tap */
.client-hit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
.client-hit__who { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; }
.client-hit__who:hover .row__title { text-decoration: underline; text-underline-offset: 3px; }
.client-hit__add { grid-row: 1; grid-column: 2; }
.client-hit__cars { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-left: 52px; min-width: 0; }
.client-hit__cars:empty { display: none; }
.plate-link {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 40px; padding: 4px 10px 4px 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.plate-link:hover { border-color: var(--accent); }
.plate-link__sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-2); }
.plate-link__sub:empty { display: none; }

/* nothing found: accept it */
.intake-empty {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 16px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: var(--radius); background: var(--accent-wash);
}
.intake-empty > .ic { color: var(--accent-text); }
.intake-empty p { flex: 1 1 180px; font-weight: 600; }

/* ---------- the intake and car sheets ---------- */
.plate-field { display: grid; gap: 8px; }
.plate-input.input { font: 700 20px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.plate-input.input::placeholder { color: var(--ink-3); opacity: .6; }
.plate-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; font-weight: 600; color: var(--ok); }
.plate-hint.is-odd { color: var(--warn); }
.plate-field > .segmented { justify-self: start; }
.vin-input.input { font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
/* a number with its unit inside the field: "96 200 km", "50 ₼" */
.input-unit { position: relative; display: block; }
.input-unit .input { padding-right: 46px; }
.input-unit__text { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 14px; pointer-events: none; }
/* make · model · mileage: three in a row where they fit, the mileage under the two on a phone */
.car-trio { display: flex; flex-wrap: wrap; gap: 12px; }
.car-trio > .field { flex: 1 1 140px; }
/* the folded parts: "year, colour… later", "brought by someone else?" */
.car-more { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.car-more__sum { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--accent-text); }
.car-more__sum::-webkit-details-marker { display: none; }
.car-more[open] > .car-more__sum { border-bottom: 1px solid var(--line); }
.car-more__body { padding: 12px; }
.car-sheet .field > .segmented { align-self: flex-start; }
.car-approve { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.car-limit { width: 130px; }
.car-form-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.car-form-error .form-error { flex: 1 1 220px; }
/* the car picked in the search: shown in the intake sheet instead of the number field */
.intake-car { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.intake-car__plate { display: flex; flex: none; }
.intake-car__text { display: flex; flex-direction: column; min-width: 0; }
.intake-car__text b { overflow-wrap: anywhere; }
.intake-car__text small { font-size: 12.5px; color: var(--ink-2); }
.intake-car__text small:empty { display: none; }
/* by a booking: the client came in another car */
.intake-car__other { flex: none; margin-left: auto; }
.car-mismatch__driver { margin-top: 4px; font-weight: 600; }
.car-mismatch__driver:empty { display: none; }
.car-debts { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); font-size: 13px; color: var(--ink-2); }
.car-debts .ic { flex: none; margin-top: 1px; color: var(--ink-3); }

/* ---------- a car's card ---------- */
.car-archived { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); font-size: 14px; font-weight: 600; }
.car-head { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.car-head__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.car-head__plate { display: flex; }
.car-head__text { flex: 1 1 220px; min-width: 0; }
.car-head__title { font: var(--display-weight) 24px/1.15 var(--font-display); letter-spacing: var(--display-tracking); overflow-wrap: anywhere; }
.car-head__details { margin-top: 3px; font-size: 14px; overflow-wrap: anywhere; }
.car-head__details:empty { display: none; }
.car-head__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.car-page.is-archived .car-head { border-style: dashed; }
/* the car's note: shown wherever the car is */
.car-note {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  color: color-mix(in srgb, var(--warn) 70%, var(--ink)); font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere;
}
.car-note .ic { flex: none; margin-top: 1px; color: var(--warn); }
.car-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.car-fact { min-width: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); }
.car-fact dt { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.car-fact dd { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.car-fact__main { max-width: 100%; font: 600 16px/1.3 var(--font-display); overflow-wrap: anywhere; }
.car-fact__main.km { font-family: var(--font-mono); font-weight: 700; }
.car-fact small { font-size: 12px; color: var(--ink-3); }
.car-fact small:empty { display: none; }
.car-fact__link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); }
.car-fact__link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.car-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
.car-side { display: grid; align-content: start; }
.car-km, .car-owners { padding: 2px 14px; }
.car-km__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 48px; padding: 4px 0; }
.car-km__row + .car-km__row, .car-owners__row + .car-owners__row { border-top: 1px dashed var(--line); }
.car-km__date { font-size: 13px; }
.car-km__main { display: flex; flex-direction: column; min-width: 0; }
.car-km__main small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-km__del { width: 40px; height: 40px; color: var(--ink-3); }
.car-km__more { margin-top: 6px; }
.car-owners__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 0; }
.car-owners__period { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); }
.car-owners__main { display: flex; flex-direction: column; min-width: 0; }
.car-owners__main small { font-size: 12px; }
.car-owners__name { font-weight: 600; overflow-wrap: anywhere; }
.car-owners__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.car-owners__row.is-past .car-owners__name { color: var(--ink-2); font-weight: 500; }
.car-owners__hint { margin: 8px 2px 0; }
@media (min-width: 1024px) {
  .car-cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 899px) {
  .car-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- the cars of a client's card ---------- */
.client-car { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
.client-car__plate { display: flex; }
.client-car__title { display: flex; align-items: center; gap: 8px; }
.client-car__title > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.client-car .row__sub:empty { display: none; }
.client-car .row__end .km { font-size: 13px; }
[data-part="carsBlock"] .section__title { display: flex; align-items: center; gap: 6px; }
[data-part="carsBlock"] .section__title .badge:empty { display: none; }

/* ============ the car in the booking (docs/niches/auto/04-booking-tech.md §4) ============ */

/* ---------- the calendar block: "[90-HK-418] Elantra" above the client; a short visit — the plate instead of the name ---------- */
.appt__car { display: flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; }
.appt__plate { display: flex; flex: none; max-width: 100%; }
.appt__plate .plate--sm { --plate-h: 17px; --plate-fs: 10px; --plate-strip: 10px; }
.appt__plate .plate-none.plate--sm { height: 17px; padding: 0 5px; font-size: 10px; }
.appt__model { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink-2); }
.appt.is-short .appt__model, .appt.is-short.has-plate .appt__name { display: none; }
.appt.st-cancelled .appt__plate { opacity: .6; }

/* ---------- the appointment form: the client's cars, one tap each ---------- */
.appt-car__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 6px; }
.appt-car__opts:empty { display: none; }
.appt-car-opt {
  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); text-align: left;
  transition: border-color .15s, background-color .15s;
}
.appt-car-opt:hover { border-color: var(--accent); }
.appt-car-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.appt-car-opt__plate { display: flex; flex: none; max-width: 55%; }
.appt-car-opt__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.appt-car-opt__text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt-car-opt__text small { font-size: 12px; color: var(--ink-2); }
.appt-car-opt__text small:empty { display: none; }
.appt-car-opt__tick { flex: none; color: var(--accent-text); visibility: hidden; }
.appt-car-opt[aria-pressed="true"] .appt-car-opt__tick { visibility: visible; }
/* the visit's car that is no longer this client's */
.appt-car-opt.is-away { border-style: dashed; }
.appt-car-opt.is-away small { color: var(--warn); font-weight: 600; }
/* the server said the car is not the client's: the one picked is marked until another tap */
.appt-car.is-bad .appt-car-opt[aria-pressed="true"] { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.appt-car__add { align-self: flex-start; }
.appt-new-car { margin-top: 12px; align-items: start; }
.appt-new-car .plate-input.input { font-size: 16px; }
.appt-plate-taken { margin-top: 10px; }
/* several cars and none picked */
.appt-car__hint { margin: 0; color: var(--warn); }

/* ---------- the visit window: the car's row, its note, whose it is now, "Accept the car" ---------- */
/* one column as wide as the sheet: a long make and model wraps, never pushes the card and the button off a phone */
.appt-car-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.appt-car-link { border-radius: var(--radius); }
.appt-car-link__plate { display: flex; flex: none; }
.appt-car-link .row__sub:empty { display: none; }
.appt-car-away { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.appt-car-away .ic { flex: none; color: var(--warn); }

/* ---------- the intake page: the day's visits under the empty search ---------- */
.intake-today .section__head .badge:empty { display: none; }
.today-visit { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.today-visit:hover { background: var(--surface); }
.today-visit__time { display: flex; flex-direction: column; line-height: 1.25; padding-top: 2px; }
.today-visit__time b { font-size: 15px; }
.today-visit__time small { font-size: 12px; color: var(--ink-3); }
.today-visit__open { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 28px; text-align: left; }
.today-visit__open::after { content: ''; position: absolute; inset: 0; }
.today-visit__plate { display: flex; flex: none; }
.today-visit__plate:empty { display: none; }
.today-visit__car { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.today-visit.no-car .today-visit__car { font-weight: 500; color: var(--ink-3); }
.today-visit:hover .today-visit__car { text-decoration: underline; text-underline-offset: 3px; }
.today-visit .row__sub:empty { display: none; }
.today-visit__end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.today-visit__accept { position: relative; z-index: 1; }
.today-visit__late { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--bad); }
/* booked, and the start passed more than a quarter of an hour ago */
.today-visit.is-late { background: var(--bad-soft); box-shadow: inset 3px 0 0 var(--bad); }

/* ---------- the client's visits: a client with several cars sees which car each visit was ---------- */
.history-row.has-plate .history-row__meta { display: flex; align-items: center; gap: 6px; }
.history-row.has-plate .history-row__meta > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.history-row__plate { display: flex; flex: none; }

/* ---------- phones: no sideways scroll at 375 px, fingers get 40 px ---------- */
@media (max-width: 599px) {
  .car-hit { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; }
  .car-hit__accept { grid-column: 2; justify-self: start; }
  .car-hit__plate { min-width: 0; }
  .client-hit__cars { padding-left: 0; }
  .client-car { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
  .client-car .row__end { grid-column: 2; flex-direction: row; align-items: baseline; gap: 6px; }
  .car-head { padding: 14px; }
  .car-head__title { font-size: 20px; }
  .car-head__acts { width: 100%; }
  .car-head__acts .btn { flex: 1 1 auto; }
  .intake-page .btn--sm, .car-page .btn--sm, .car-sheet .btn--sm, [data-part="carsBlock"] .btn--sm { min-height: 40px; }
  .car-sheet .segmented label { min-height: 40px; }
  .car-sheet .field > .segmented { align-self: stretch; }
  .intake-search__input.input { min-height: 56px; font-size: 18px; }
  .today-visit { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 10px; }
  .today-visit__end { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .appt-car-opt { min-height: 48px; }
}

/* ============ work orders in the lists and the cards (docs/niches/auto/05-orders-tech.md §6) ============ */
/* The order page has its own sheet (orders.css); here — what the list, the intake, the visit window and the car's and
   the client's cards show of an order. */

/* ---------- the stage: a pill with a dot, the colours the board will have ---------- */
.stage-pill {
  --st: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 100%; height: 22px; padding: 0 9px;
  border-radius: 99px; background: color-mix(in srgb, var(--st) 16%, var(--bg)); color: color-mix(in srgb, var(--st) 72%, var(--ink));
  font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.stage-pill::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 99px; background: var(--st); }
.stage-pill[data-stage="accepted"] { --st: var(--ink-2); }
.stage-pill[data-stage="waiting_approval"] { --st: var(--series-1); }
.stage-pill[data-stage="waiting_parts"] { --st: var(--warn); }
.stage-pill[data-stage="in_work"] { --st: var(--accent); }
.stage-pill[data-stage="ready"] { --st: var(--ok); }
/* handed over: done with, quiet; cancelled: only an outline */
.stage-pill[data-stage="closed"] { --st: var(--ink-3); }
.stage-pill[data-stage="cancelled"] { --st: var(--ink-3); background: none; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* what is left to pay: an open order's due in the accent, a closed one's debt in red, an overpayment or "paid" in green */
.order-due { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.order-due.is-due { color: var(--accent-text); }
.order-due.is-debt { color: var(--bad); }
.order-due.is-over, .order-due.is-paid { color: var(--ok); }
.order-due:empty { display: none; }

/* ---------- the list of orders ---------- */
.orders-page { max-width: 1180px; margin: 0 auto; }
.orders-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.orders-tabs { flex: none; }
.orders-tabs button { padding: 0 14px; }
.orders-search { flex: 1 1 280px; min-width: 0; }
.orders-page > .list-count { margin-top: 16px; }
.orders-group__title { display: flex; align-items: center; gap: 8px; }
.orders-group__title .stage-pill { height: 26px; padding: 0 11px; font-size: 13px; }
/* in a group the stage is the group's: the rows leave it out */
.orders-group .order-item { grid-template-areas: "no car info time money"; }
.orders-group .order-item__stage { display: none; }
.orders-group .order-item__info { align-self: center; }
.orders-actions { gap: 8px; }

/* a row: № · the car and the client · the stage over the place, the mechanic and what it waits for · the time · money */
.order-item {
  display: grid; grid-template-columns: minmax(64px, max-content) minmax(0, 1.5fr) minmax(0, 1.2fr) 130px minmax(104px, auto);
  grid-template-areas: "no car stage time money" "no car info time money";
  align-items: center; gap: 3px 16px; min-height: 64px; padding: 11px 16px;
}
.orders-list > .order-item + .order-item { border-top: 1px solid var(--line); }
.order-item:hover { background: var(--surface); }
.order-item:hover .order-item__text b { text-decoration: underline; text-underline-offset: 3px; }
.order-item__no { grid-area: no; font: 700 15px/1.2 var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
.order-item__car { grid-area: car; display: flex; align-items: center; gap: 12px; min-width: 0; }
.order-item__plate { display: flex; flex: none; }
.order-item__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.order-item__text b, .order-item__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-item__text b { font-size: 14.5px; font-weight: 600; }
.order-item__text small { font-size: 13px; color: var(--ink-2); }
.order-item__stage { grid-area: stage; display: flex; align-self: end; min-width: 0; }
.order-item__info { grid-area: info; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; align-self: start; min-width: 0; font-size: 12.5px; color: var(--ink-2); }
.order-item__where { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-item__where:empty, .order-item__flags:empty { display: none; }
.order-item__flags { display: flex; flex-wrap: wrap; gap: 4px; }
.order-item__time { grid-area: time; font-size: 13px; color: var(--ink-2); }
.order-item__money { grid-area: money; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.order-item__money b { font: 700 15px/1.3 var(--font-display); }
.order-item__money b:empty { display: none; }
/* what an order waits for: a part (amber), an answer of the client (blue) */
.order-flag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-xs); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.order-flag.is-part { background: var(--warn-soft); color: var(--warn); }
.order-flag.is-answer { background: color-mix(in srgb, var(--series-1) 16%, var(--bg)); color: color-mix(in srgb, var(--series-1) 72%, var(--ink)); }

/* the owner's places: numbered lines */
.places-list { display: grid; gap: 6px; margin-bottom: 6px; list-style: none; counter-reset: place; }
.places-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 40px; align-items: center; gap: 6px; counter-increment: place; }
.places-row::before { content: counter(place); font: 600 12px/1 var(--font-mono); color: var(--ink-3); text-align: right; }
.places-row.has-error .input { border-color: var(--bad); }
.places-row .icon-btn { width: 40px; height: 40px; color: var(--ink-3); }

/* ---------- the requests to the owner (docs/niches/auto/06-money-tech.md §6.3) ---------- */
/* the tab carries the menu's red number of the waiting ones */
.orders-tabs [data-tab="requests"] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.orders-tabs .nav-badge { margin: 0; }
.orders-tabs__narrow { display: none; }
/* a row: № with the plate over the car · what is asked, why, who and when · what the bill loses · the answer */
.req-item {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) 88px 236px;
  grid-template-areas: "order what amount end";
  align-items: center; gap: 6px 16px; min-height: 64px; padding: 11px 16px;
}
.req-list > .req-item + .req-item { border-top: 1px solid var(--line); }
.req-item__order { grid-area: order; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.req-item__order:hover b { text-decoration: underline; text-underline-offset: 3px; }
.req-item__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.req-item__head b { font: 700 15px/1.2 var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
.req-item__plate { display: flex; flex: none; }
.req-item__order small { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-item__what { grid-area: what; display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.35; }
.req-item__what b { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.req-item__what small { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.req-item__what small:empty { display: none; }
.req-item__what .req-item__why { color: var(--ink); }
.req-item__amount { grid-area: amount; justify-self: end; font: 700 15px/1.3 var(--font-display); color: var(--bad); white-space: nowrap; }
.req-item__amount:empty { display: none; }
/* a request that adds to the bill (a higher price of a strict line): no loss, not red */
.req-item.is-plus .req-item__amount { color: var(--ink); }
.req-item__end { grid-area: end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.req-item__state { font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-align: right; overflow-wrap: anywhere; }
.req-item__state:empty { display: none; }
.req-item__acts { display: flex; gap: 6px; }
.req-item__acts:not(:has(> :not([hidden]))) { display: none; }
/* the answer: allowed in green, refused in red; a refused or cancelled sum never left the bill */
.req-item.is-pending .req-item__state { color: var(--warn); }
.req-item.is-approved .req-item__state { color: var(--ok); }
.req-item.is-rejected .req-item__state { color: var(--bad); }
.req-item.is-rejected .req-item__amount, .req-item.is-cancelled .req-item__amount { color: var(--ink-3); text-decoration: line-through; }

/* ---------- the owner's settings of the orders: the places, the discount limit, the consumables, the mechanic's base ---------- */
.orders-settings .sheet__body { display: grid; gap: 18px; padding-top: 12px; }
.orders-settings__block { display: grid; gap: 10px; min-width: 0; }
.orders-settings__block + .orders-settings__block { padding-top: 18px; border-top: 1px solid var(--line); }
.orders-settings__block > .form-section { margin-top: 0; }
.orders-settings__block > .field__hint { line-height: 1.4; }
.orders-settings .places-list { margin-bottom: 0; }
.orders-settings__add, .orders-settings__mode { justify-self: start; }
.orders-settings__switch { align-items: flex-start; }
.orders-settings__switch .switch__track { margin-top: 1px; }
.orders-settings__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }

/* ---------- an order in a car's and a client's card ---------- */
.order-row { display: grid; grid-template-columns: minmax(64px, max-content) minmax(0, 1fr) auto; gap: 12px; }
.order-row[href]:hover { background: var(--surface); }
.order-row__no { display: flex; flex-direction: column; line-height: 1.25; }
.order-row__no b { font: 700 14.5px/1.25 var(--font-display); white-space: nowrap; }
.order-row__no small { font-size: 12px; color: var(--ink-3); }
.order-row__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.order-row__what { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.order-row.is-quiet .order-row__what { color: var(--ink-3); font-weight: 500; }
.order-row__plate { display: flex; flex: none; }
.order-row .row__sub:empty { display: none; }
.order-row__end { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 12px; }
.order-row__money { display: flex; flex-direction: column; align-items: flex-end; min-width: 64px; line-height: 1.3; }
.order-row__money b { font-size: 14px; font-weight: 600; }
.order-row__money b:empty, .order-row__money:not(:has(:not(:empty))) { display: none; }
[data-part="ordersBlock"] .section__title { display: flex; align-items: center; gap: 6px; }
[data-part="ordersBlock"] .section__title .badge:empty { display: none; }
.car-main { min-width: 0; }

/* the car's header: "in service · order № N" with the stage, under the title */
.order-chip {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; max-width: 100%; margin-top: 8px; padding: 6px 10px;
  border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); font-size: 13.5px; font-weight: 700;
}
.order-chip[href]:hover > span:first-of-type { text-decoration: underline; text-underline-offset: 3px; }
/* a car of the client in service: the stage of its order beside the title */
.client-car__order { display: flex; flex: none; }
.client-car__order:empty { display: none; }

/* ---------- the intake: a car in service, a visit taken in, the order's fields of the form ---------- */
.car-hit__order { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.plate-link.is-in { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.today-visit__order { position: relative; z-index: 1; }
.intake-order .textarea { min-height: 64px; }

/* ---------- the visit window: the order opened by the visit ---------- */
.appt-order-link { border-radius: var(--radius); }
.appt-order-link__ic { flex: none; color: var(--accent-text); }
.appt-order-link .row__sub:empty { display: none; }

/* ---------- phones: the rows of the list become cards, nothing scrolls sideways at 375 px ---------- */
@media (max-width: 759px) {
  .orders-tabs { width: 100%; }
  .orders-search { flex-basis: 100%; }
  .orders-list { display: grid; gap: 8px; background: none; border: 0; border-radius: 0; overflow: visible; }
  .order-item {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no stage" "car car" "info info" "time money";
    gap: 8px 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  }
  .order-item__stage { justify-self: end; align-self: center; }
  .order-item__info { align-self: auto; }
  .order-item__time { align-self: end; }
  .order-item__money { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px 8px; }
  .orders-group .order-item { grid-template-areas: "no time" "car car" "info info" "money money"; }
  .orders-group .order-item__time { justify-self: end; align-self: center; }
  .orders-group .order-item__info:not(:has(:not(:empty))) { display: none; }
  /* four tabs side by side: each as wide as its words ("My requests" says "Requests" here); a narrow phone with big
     numbers scrolls the strip, never the page */
  .orders-tabs { grid-auto-columns: auto; overflow-x: auto; scrollbar-width: none; }
  .orders-tabs::-webkit-scrollbar { display: none; }
  .orders-tabs button { padding: 0 7px; }
  .orders-tabs__wide { display: none; }
  .orders-tabs__narrow { display: inline; }
  /* a request: № and the car with the sum on the right, then what is asked, then the buttons in full width */
  .req-list { display: grid; gap: 8px; background: none; border: 0; border-radius: 0; overflow: visible; }
  .req-item {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "order amount" "what what" "end end";
    gap: 8px 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  }
  .req-item__amount { align-self: start; }
  .req-item__end { align-items: stretch; }
  .req-item__state { max-width: none; text-align: left; }
  .req-item__acts > .btn { flex: 1; min-height: 40px; }
}
@media (max-width: 599px) {
  .orders-actions__label { display: none; }
  .orders-actions .btn--sm { min-height: 40px; }
  .orders-settings__mode { justify-self: stretch; }
  /* an order in a card: № and the day with the stage on the right, then what it was with the money */
  .order-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no stage" "main money"; gap: 4px 12px; }
  .order-row__no { grid-area: no; flex-direction: row; align-items: baseline; gap: 8px; }
  .order-row .row__main { grid-area: main; }
  .order-row__end { display: contents; }
  .order-row__end > [data-part="orderStage"] { grid-area: stage; justify-self: end; }
  .order-row__money { grid-area: money; align-self: end; }
  .client-car__title:has(.client-car__order:not(:empty)) { flex-wrap: wrap; row-gap: 3px; }
  .order-chip { width: 100%; }
  .today-visit__end { flex-wrap: wrap; gap: 6px 8px; }
}
@media (max-width: 389px) {
  .orders-tabs button { padding: 0 5px; font-size: 12.5px; }
}
/* the promised time on a row of the orders list (step 2a-3) */
.order-flag.is-late { background: var(--bad-soft); color: var(--bad); }
.order-flag.is-client { background: var(--surface-2); color: var(--ink-2); }
.order-flag.is-risk { background: var(--warn-soft); color: var(--warn); }
.order-item.is-late { box-shadow: inset 3px 0 0 var(--bad); }
/* the quick job in the intake form (step 2a-3) */
.quick { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: var(--surface); }
.quick-svcs { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; margin-top: 6px; }
.quick-sets { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-set { gap: 6px; min-height: 36px; white-space: normal; text-align: left; cursor: pointer; }
.quick-set small { font-weight: 600; opacity: .75; }
.quick-svc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 40px; padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.quick-svc:hover { background: var(--bg); }
.quick-svc:has(input:checked) { background: var(--accent-soft); }
.quick-svc__name { min-width: 0; overflow-wrap: anywhere; }
.quick-svc__price { font-weight: 600; white-space: nowrap; }
.quick-parts { display: grid; gap: 6px; }
.quick-part { display: grid; grid-template-columns: minmax(0, 1fr) 64px 76px 92px 40px; gap: 6px; align-items: center; }
.quick .field > .quick-add { justify-self: start; width: auto; margin-top: 4px; }
.quick-sum { display: grid; gap: 4px; padding: 8px 0; border-top: 1px dashed var(--line); }
.quick-sum__row { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-2); }
.quick-sum__total { color: var(--ink); font-size: 16px; font-weight: 700; }
@media (max-width: 600px) {
  .quick-part { grid-template-columns: minmax(0, 1fr) 56px 64px 40px; }
  .quick-part [data-part="pName"] { grid-column: 1 / -1; }
}