/* ==========================================================================
   Car services (sections/cars.php, assets/js/cars.js, assets/js/car-gl.js). The evening after the clinic's blue
   hour: a workshop bay at night, one warm lamp over it, the car drawn in cool points, its parts warm inside it.
   Colours mean what a dashboard means: amber = soon, red = don't drive, the brand's green = picked / ready.
   The one light thing on the stage is the job card, the workshop's reception slip, torn from its book.
   Modes, decided by CSS so the first paint is right: the bay (JS + WebGL), flat (no WebGL: key, troubles, card),
   list (no JS: every trouble as text, and how to reach us).
   ========================================================================== */
.car {
  --g-night: #07090B; --g-deep: #0D1215; --g-floor: #12181B;
  --g-ink: #ECEFEA; --g-ink-2: #9AA5A7; --g-line: rgb(220 232 236 / .13); --g-glass: rgb(14 19 23 / .72);
  --amber: #F5A524; --red: #FF5A4A; --lime: #9AF21E;
  --paper: #EEEDE6; --paper-rule: rgb(46 51 131 / .2); --ink-c: #2E3383; --ink-p: #1C2024; --ink-q: #6B717A;
  --sx: 1;
  position: relative; z-index: 8; color: var(--g-ink);
}
[dir="rtl"] .car { --sx: -1; }
.car-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.car__anchor { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; outline: none; pointer-events: none; }
.car__cover { position: absolute; z-index: 30; inset: auto 0 0; height: 100vh; height: 100svh; background: #02080B; opacity: 0; pointer-events: none; will-change: opacity; }

/* ---------- the stage: the bay at night, a lamp over it ---------- */
.car__stage {
  position: relative; overflow: hidden; overflow: clip; border-radius: 28px 28px 0 0;
  background:
    radial-gradient(44% 30% at 50% 0%, rgb(255 236 205 / .1), rgb(255 236 205 / 0) 70%),
    radial-gradient(36% 22% at 50% 56%, rgb(150 186 206 / .09), rgb(150 186 206 / 0) 72%),
    linear-gradient(to bottom, var(--g-night), var(--g-deep) 58%, var(--g-floor));
  box-shadow: 0 -24px 70px -26px rgb(0 0 0 / .75);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .car__stage { transform-origin: 50% 0; will-change: transform; }   /* (the sheet it comes in as) */
}
/* the workshop's strip lights, far off over the bay */
.car__lamps { position: absolute; z-index: 0; top: calc(var(--header-h) + 3vh); left: 50%; width: min(34vw, 460px); height: 2px; translate: -50% 0; border-radius: 2px; background: linear-gradient(90deg, rgb(255 244 222 / 0), rgb(255 244 222 / .55), rgb(255 244 222 / 0)); box-shadow: 0 0 26px 5px rgb(255 238 205 / .12); pointer-events: none; }
.car__lamps::before, .car__lamps::after { content: ""; position: absolute; left: 12%; right: 12%; height: 2px; border-radius: 2px; background: inherit; opacity: .55; }
.car__lamps::before { top: 16px; left: 20%; right: 20%; opacity: .35; }
.car__lamps::after { top: -14px; left: 4%; right: 4%; opacity: .7; }

/* ---------- the car ---------- */
.car-view { position: relative; z-index: 1; min-height: 0; pointer-events: none; }
.car-view__gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; cursor: grab; touch-action: pan-y; }
.car-view__pool { position: absolute; left: 50%; bottom: 12%; width: 86%; height: 30%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgb(245 165 36 / .07), rgb(245 165 36 / 0)); }
/* a hotspot on a place that has troubles (placed by cars.js) */
.car-spot {
  position: absolute; z-index: 2; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .5s;
}
.car.is-built .car-spot { opacity: .55; }
.car.is-built .car-spot.is-behind { opacity: .25; }
.car.is-built .car-spot.is-hover, .car.is-built .car-spot:hover, .car.is-built .car-spot.is-on { opacity: 1; }
/* the mark (its ring and dot): small until it is the one on show or the one under the pointer */
.car-spot i { position: absolute; inset: 0; border-radius: 50%; background: rgb(7 9 11 / .6); box-shadow: inset 0 0 0 1.5px #DDE7EE; transition: scale .3s var(--ease-out), box-shadow .3s; }
.car-spot i::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #DDE7EE; }
.car-spot:not(.is-on):not(.is-hover):not(:hover) i { scale: .62; }
.car-spot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid #DDE7EE; opacity: 0; animation: car-ping 2.4s var(--ease-out) infinite; }
.car-spot.is-on i { box-shadow: inset 0 0 0 1.5px var(--lime), 0 0 18px rgb(154 242 30 / .55); }
.car-spot.is-on i::before { background: var(--lime); }
.car-spot.is-on::after { border-color: var(--lime); }
@keyframes car-ping { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }
.car:not(.is-seen) .car-spot::after, .car.is-under .car-spot::after { animation-play-state: paused; }
.car-spot:not(.is-on)::after { animation: none; }
/* service and washing: the whole car, so a sign on the floor in front of it */
.car-spot--off { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgb(7 9 11 / .6); box-shadow: inset 0 0 0 1.5px #DDE7EE; color: #DDE7EE; }
.car-spot--off.is-on { box-shadow: inset 0 0 0 1.5px var(--lime), 0 0 18px rgb(154 242 30 / .55); }
.car-spot--off i { display: none; }
.car-spot--off svg { position: absolute; inset: 10px; width: 20px; height: 20px; }
.car-spot--off.is-on { color: var(--lime); }
/* the word by the pointer over the car */
.car-tip {
  position: absolute; z-index: 3; left: 0; top: 0; display: grid; gap: 2px; margin: 0; padding: 8px 12px 9px; border-radius: 12px; white-space: nowrap;
  background: rgb(7 10 12 / .92); box-shadow: 0 12px 26px -12px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(154 242 30 / .35); color: var(--g-ink);
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.car-tip.is-on { opacity: 1; }
.car-tip b { font-size: 14px; font-weight: 750; color: var(--lime); }
.car-tip span { font-size: 12px; color: var(--g-ink-2); }
.car-tip span:empty { display: none; }
/* the lines from the key to the car */
.car-lines { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .6s; }
.car.is-built .car-lines { opacity: 1; }
.car-lines path { fill: none; stroke: rgb(221 231 238 / .2); stroke-width: 1; }
.car-lines path.is-on { stroke: var(--lime); stroke-opacity: .85; }

/* ---------- the side: the chapter head, the key ---------- */
.car__head, .car-key { position: relative; z-index: 2; }
.car__side { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 2.6vh, 30px); min-width: 0; }
.car__eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--g-ink-2); }
html[lang="en"] .car__eyebrow { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
.car__eyebrow .chap__no { color: var(--amber); }
.car__eyebrow > span:last-child { display: inline-flex; align-items: center; gap: 12px; }
.car__eyebrow > span:last-child::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .5; }
.car__title { margin-top: 12px; max-width: 11em; font-size: clamp(28px, 2.5vw, 44px); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
html[lang="en"] .car__title { font-family: var(--font-serif); font-size: clamp(32px, 2.9vw, 50px); font-weight: 460; line-height: 1.04; letter-spacing: -.025em; }
.car__lead { margin-top: 10px; max-width: 40ch; font-size: 14.5px; line-height: 1.85; color: var(--g-ink-2); text-wrap: pretty; }
html[lang="en"] .car__lead { line-height: 1.6; }
/* phones: straight to the writing box (the slip is far below the choices) */
.car__jump { display: none; }
@media (max-width: 860px) {
  .car__jump { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); color: inherit; font-size: 13px; font-weight: 750; text-decoration: none; }
  .car__jump svg { width: 16px; height: 16px; }
}


.car-key__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.car-key__item button {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%;
  padding: 3px 10px 3px 6px; border: 1px solid transparent; border-radius: 16px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
  transition: background-color .3s, border-color .3s;
}
[dir="rtl"] .car-key__item button { padding: 3px 6px 3px 10px; }
.car-key__ring { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgb(221 231 238 / .3); color: #DDE7EE; transition: border-color .3s, color .3s, background-color .3s, box-shadow .3s; }
.car-key__ring svg { width: 18px; height: 18px; }
.car-key__name { min-width: 0; font-size: 14.5px; font-weight: 750; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* how many of its troubles are in the card */
.car-key__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgb(154 242 30 / .16); color: var(--lime); font-size: 12px; font-weight: 800; }
.car-key__n[hidden] { display: none; }
.car-key__item.has-picks .car-key__ring { border-color: rgb(154 242 30 / .55); color: var(--lime); }
.car-key__item button:hover, .car-key__item.is-hover button { background: rgb(255 255 255 / .05); border-color: var(--g-line); }
.car-key__item button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.car-key__item.is-on button { background: var(--g-glass); border-color: rgb(154 242 30 / .35); }
.car-key__item.is-on .car-key__ring { border-color: var(--lime); color: var(--lime); box-shadow: 0 0 18px rgb(154 242 30 / .3); }
/* how to use the car, on the floor under it */
.car-view__hint { position: absolute; z-index: 2; left: 0; right: 0; bottom: 4px; margin: 0; font-size: 12px; text-align: center; color: var(--g-ink-2); opacity: 0; transition: opacity .6s; pointer-events: none; }
.car.is-built .car-view__hint { opacity: .85; }
.car-view__touch { display: none; }
.car.is-touch .car-view__fine { display: none; }
.car.is-touch .car-view__touch { display: inline; }

/* ---------- under the car: the troubles of the kind on show ---------- */
.car-syms { position: relative; z-index: 2; min-width: 0; }
.car-g__h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 17px; font-weight: 800; line-height: 1.4; }
.car-g__h svg { width: 22px; height: 22px; color: var(--lime); flex: none; }
.car-g__h small { font-size: 13px; font-weight: 650; color: var(--g-ink-2); }
.car-g__list { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.car-sym {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px 6px 8px; border: 1px solid rgb(255 255 255 / .16); border-radius: 999px;
  background: rgb(10 14 17 / .55); color: var(--g-ink); font: inherit; font-size: 13.5px; font-weight: 650; text-align: start; cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
[dir="rtl"] .car-sym { padding: 6px 8px 6px 14px; }
.car-sym:hover { border-color: rgb(255 255 255 / .42); }
.car-sym:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* the tick: a ring, filled once picked */
.car-sym__tick { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .4); transition: background-color .25s, box-shadow .25s; }
.car-sym__tick::after { content: ""; position: absolute; left: 6px; top: 4px; width: 5px; height: 9px; border: solid #0B1A12; border-width: 0 2px 2px 0; rotate: 45deg; opacity: 0; }
.car-sym.is-on { background: rgb(154 242 30 / .14); border-color: var(--lime); }
.car-sym.is-on .car-sym__tick { background: var(--lime); box-shadow: none; }
.car-sym.is-on .car-sym__tick::after { opacity: 1; }
.car-sym__lv { font-style: normal; font-size: 12px; font-weight: 800; color: var(--red); white-space: nowrap; }
/* a dashboard light: dark until picked, then it comes on in its own colour */
.car-sym--lamp { padding-inline-start: 6px; }
.car-sym__lamp { flex: none; width: 26px; height: 26px; color: rgb(221 231 238 / .55); transition: color .25s, filter .25s; }
.car-sym--lamp.is-on { background: rgb(10 14 17 / .8); }
.car-sym--lamp.is-amber.is-on { border-color: var(--amber); }
.car-sym--lamp.is-red.is-on { border-color: var(--red); }
.car-sym--lamp.is-amber.is-on .car-sym__lamp { color: var(--amber); filter: drop-shadow(0 0 6px rgb(245 165 36 / .8)); }
.car-sym--lamp.is-red.is-on .car-sym__lamp { color: var(--red); filter: drop-shadow(0 0 6px rgb(255 90 74 / .8)); }
html.js .car-g:not(.is-on) { display: none; }
html.js .car-g.is-on { animation: car-in .4s var(--ease-out) both; }
@keyframes car-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- the job card: the workshop's reception slip ---------- */
.car-card { position: relative; z-index: 2; min-width: 0; margin: 0; perspective: 1600px; }
.car-card__flip { position: relative; display: grid; transform-style: preserve-3d; transition: transform .7s var(--ease-out); }
.car-card.is-flipped .car-card__flip { transform: rotateY(180deg); }
.car-card__face {
  grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px 18px 16px; border-radius: 16px;
  background: var(--paper); color: var(--ink-p); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 34px 70px -32px rgb(0 0 0 / .85), 0 1px 0 rgb(255 255 255 / .7) inset;
}
.car-card__back { transform: rotateY(180deg); }
/* a long card scrolls inside itself; sending stays at its foot */
.car-card__front { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--paper-rule) rgb(0 0 0 / 0); }
.car-card.is-sent .car-card__front { overflow: hidden; }
.car-card__foot { position: sticky; bottom: -16px; z-index: 1; display: grid; gap: 8px; margin: 0 -18px -16px; padding: 8px 18px 16px; background: var(--paper); border-radius: 0 0 16px 16px; }
/* torn from the book: the perforation along the top */
.car-card__face::before { content: ""; position: absolute; top: -4px; inset-inline: 16px; height: 9px; background: radial-gradient(circle at 5px 4.5px, var(--g-deep) 3.1px, rgb(0 0 0 / 0) 3.6px) 0 0 / 13px 9px repeat-x; }
.car-card__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 3px double var(--paper-rule); }
.car-card__title { font-size: 16px; font-weight: 850; letter-spacing: .01em; }
html[lang="en"] .car-card__title, .car-card__back .car-card__title { font-family: var(--font-serif); font-size: 19px; font-weight: 520; letter-spacing: -.01em; }
.car-card__back .car-card__title { font-family: var(--font-ka); font-weight: 600; font-size: 17px; }
.car-card__date { font-size: 12px; font-weight: 650; color: var(--ink-c); white-space: nowrap; }
.car-card__label { font-size: 12px; font-weight: 700; color: var(--ink-q); }
.car-card__label b { margin-inline-start: 4px; color: var(--ink-c); }
.car-card__list { display: grid; gap: 2px; max-height: 26vh; margin: 6px 0 0; padding: 0; list-style: none; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.car-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) 28px; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--paper-rule); animation: car-item .35s var(--ease-out) both; }
@keyframes car-item { from { opacity: 0; transform: translateX(calc(var(--sx) * -10px)); } }
.car-item > svg { width: 18px; height: 18px; color: var(--ink-q); }
.car-item span { display: grid; min-width: 0; font-size: 14px; font-weight: 650; line-height: 1.45; color: var(--ink-c); }
.car-item span b { font-size: 12px; font-weight: 700; color: var(--ink-q); }
.car-item.is-urgent span { color: #A3271B; }
.car-item.is-urgent > svg { color: #C9372A; }
.car-item button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-q); cursor: pointer; }
.car-item button svg { width: 16px; height: 16px; }
.car-item button:hover { background: rgb(46 51 131 / .08); color: var(--ink-c); }
.car-item button:focus-visible { outline: 2px solid var(--ink-c); outline-offset: 1px; }
.car-card__block[hidden] { display: none; }
.car-card__warn { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgb(255 90 74 / .12); color: #8E2318; font-size: 12.5px; font-weight: 650; line-height: 1.7; }
.car-card__warn.is-strong { box-shadow: inset 0 0 0 1.5px #C9372A; }
.car-card__warn[hidden] { display: none; }

/* the fields: lines on a printed form */
.car-card__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.car-card__field { display: grid; gap: 2px; min-width: 0; }
.car-card__field > span, .car-card__ways legend { font-size: 12px; font-weight: 700; color: var(--ink-q); }
.car-card select, .car-card input[type="text"], .car-card textarea {
  width: 100%; min-width: 0; padding: 6px 2px; border: 0; border-bottom: 1.5px solid var(--paper-rule); border-radius: 0; background: none;
  color: var(--ink-c); font: inherit; font-size: 14px; font-weight: 650;
}
.car-card select { appearance: none; padding-inline-end: 18px; background: linear-gradient(45deg, rgb(0 0 0 / 0) 50%, var(--ink-c) 50%) right 6px center / 6px 6px no-repeat, linear-gradient(-45deg, rgb(0 0 0 / 0) 50%, var(--ink-c) 50%) right 1px center / 6px 6px no-repeat; background-size: 5px 5px; cursor: pointer; }
[dir="rtl"] .car-card select { background-position: left 1px center, left 6px center; }
.car-card input::placeholder, .car-card textarea::placeholder { color: rgb(107 113 122 / .7); font-weight: 500; }
.car-card select:focus-visible, .car-card input:focus-visible, .car-card textarea:focus-visible { outline: 2px solid var(--ink-c); outline-offset: 2px; border-bottom-color: var(--ink-c); }
.car-card__ways { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.car-card__ways legend { width: 100%; margin-bottom: 6px; padding: 0; }
.car-way { position: relative; }
.car-way input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.car-way span { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--paper-rule); font-size: 13px; font-weight: 700; color: var(--ink-c); cursor: pointer; transition: background-color .2s, color .2s; }
.car-way input:checked + span { background: var(--ink-c); color: #fff; box-shadow: none; }
.car-way input:focus-visible + span { outline: 2px solid var(--ink-c); outline-offset: 2px; }
.car-card__loc { width: 100%; margin-top: 4px; font-size: 12px; color: var(--ink-c); }
.car-card__loc[hidden] { display: none; }
/* in their own words: the first thing on the slip, and enough on its own */
.car-card__say { display: grid; gap: 6px; }
.car-card__say-l { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: var(--ink-p); cursor: text; }
.car-card__say-l svg { flex: none; width: 18px; height: 18px; color: var(--ink-c); }
.car-card textarea {
  min-height: 80px; resize: none; overflow: hidden; padding: 0 10px; border: 0; border-radius: 10px; line-height: 26px;
  background: repeating-linear-gradient(rgb(0 0 0 / 0) 0 25px, var(--paper-rule) 25px 26px) rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1.5px var(--paper-rule); transition: box-shadow .2s;
}
.car-card textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ink-c); }
.car-card__ease { display: flex; gap: 6px; font-size: 12px; line-height: 1.7; color: var(--ink-q); }
.car-card__ease::before { content: "✓"; flex: none; color: #4F8F12; font-weight: 800; }
/* what follows is optional */
.car-card__more-h { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--paper-rule); font-size: 12px; font-weight: 700; color: var(--ink-q); }
.car-card__more-h small { padding: 1px 8px; border-radius: 999px; background: rgb(46 51 131 / .08); color: var(--ink-c); font-size: 12px; font-weight: 700; }
.car-card__send { width: 100%; }
.car-card__send svg { width: 20px; height: 20px; }
.car-card__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; font-size: 12.5px; }
.car-card__alt a { color: var(--ink-q); text-decoration: none; border-bottom: 1px solid transparent; }
.car-card__alt a:hover { color: var(--ink-c); border-color: currentColor; }
.car-card__ka { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--ink-c); font: inherit; font-size: 12.5px; font-weight: 750; cursor: pointer; }
.car-card__ka:focus-visible, .car-card__alt a:focus-visible { outline: 2px solid var(--ink-c); outline-offset: 3px; }
/* sent: a stamp on the slip */
.car-card__sent { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; border-radius: inherit; background: rgb(238 237 230 / .96); text-align: center; }
.car-card__sent[hidden] { display: none; }
.car-card__sent::before { content: "✓"; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--ink-c); color: var(--ink-c); font-size: 32px; font-weight: 800; rotate: -8deg; }
.car-card__sent p { max-width: 26ch; font-size: 14px; font-weight: 650; line-height: 1.8; color: var(--ink-p); }
.car-card__again { padding: 8px 16px; border: 0; border-radius: 999px; background: var(--ink-c); color: #fff; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
/* the Georgian side, large enough to read held out to a mechanic */
.car-ka { display: grid; gap: 4px; margin: 0; font-family: var(--font-ka); }
.car-ka dt { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--ink-q); }
.car-ka dd { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--ink-c); }
.car-ka dd[lang="en"] { font-family: var(--font-latin); font-weight: 650; }
.car-ka ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.car-ka li b { font-weight: 600; color: var(--ink-q); font-size: 13px; }
.car-ka li.is-urgent { color: #A3271B; }
.car-ka em { font-style: normal; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgb(255 90 74 / .14); }
.car-ka__by { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--paper-rule); font-size: 12.5px; font-weight: 650; color: var(--ink-q); }
.car-card__ka--back { align-self: flex-start; }
.car-card__nojs { display: none; }

/* ---------- wide screens: the key | the car over its troubles | the card ---------- */
@media (min-width: 861px) {
  .car__stage {
    display: grid; grid-template-columns: minmax(0, .82fr) minmax(400px, 1.5fr) minmax(300px, .86fr); grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "side view card" "side syms card";
    column-gap: clamp(18px, 2.2vw, 40px); height: 100vh; height: 100svh; min-height: 540px;
    padding: calc(var(--header-h) + 2.4vh) var(--qnav-clear) 3.6vh;
  }
  .car__side { grid-area: side; }
  .car-view { grid-area: view; margin: calc(-1 * (var(--header-h) + 2.4vh)) calc(-1 * clamp(18px, 2.2vw, 40px)) 0; }   /* (into the gaps: a bigger car) */
  .car-syms { grid-area: syms; min-height: 132px; }
  .car-card { grid-area: card; align-self: center; max-height: 100%; }
  .car-card__flip, .car-card__face { max-height: calc(100svh - var(--header-h) - 6vh); }
}
@media (min-width: 861px) and (max-height: 800px) {
  .car__title { font-size: clamp(26px, 2.1vw, 34px); }
  html[lang="en"] .car__title { font-size: clamp(28px, 2.5vw, 40px); }
  .car__lead { font-size: 13.5px; line-height: 1.7; }
  .car__side { gap: clamp(12px, 2.2vh, 20px); }
  .car-key__item button { padding-block: 1px; }
  .car-key__ring { width: 30px; height: 30px; }
  .car-key__ring svg { width: 16px; height: 16px; }
  .car-card__face { gap: 10px; padding: 16px 16px 14px; }
  .car-card__foot { bottom: -14px; margin: 0 -16px -14px; padding: 6px 16px 14px; }
  .car-card__list { max-height: 20vh; }
  .car-sym { min-height: 34px; padding-block: 4px; font-size: 13px; }
}
@media (min-width: 861px) and (max-height: 700px) {
  .car__lead { display: none; }   /* (the hint under the car and the word by the pointer say what to do) */
  .car__title { margin-top: 8px; font-size: clamp(24px, 1.9vw, 30px); }
  .car-key__ring { width: 28px; height: 28px; }
  .car-key__name { font-size: 13.5px; }
  .car-card__face { gap: 8px; }
  .car-way span { min-height: 30px; }
}

/* ---------- phones: the head, the car, the kinds as chips, the troubles, the card ---------- */
@media (max-width: 860px) {
  .car__stage { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "view" "key" "syms" "card"; row-gap: 16px; padding: calc(var(--header-h) + 22px) var(--gutter) calc(96px + env(safe-area-inset-bottom, 0px)); padding-inline-start: var(--qnav-clear); border-radius: 22px 22px 0 0; }
  .car__side { display: contents; }
  .car__head { grid-area: head; }
  .car-key { grid-area: key; min-width: 0; }
  .car-view { grid-area: view; height: clamp(240px, 64vw, 44svh); margin-inline: calc(-1 * var(--gutter)); }
  .car-syms { grid-area: syms; }
  .car-card { grid-area: card; }
  .car__title { font-size: clamp(26px, 7.2vw, 34px); }
  html[lang="en"] .car__title { font-size: clamp(30px, 8.4vw, 40px); }
  .car-key__list { display: flex; gap: 8px; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .car-key__list::-webkit-scrollbar { display: none; }
  .car-key__item { flex: none; }
  .car-key__item button { grid-template-columns: 30px auto auto; gap: 8px; padding: 4px 12px 4px 5px; border-color: var(--g-line); border-radius: 999px; }
  [dir="rtl"] .car-key__item button { padding: 4px 5px 4px 12px; }
  .car-key__ring { width: 30px; height: 30px; }
  .car-key__ring svg { width: 16px; height: 16px; }
  .car-key__name { font-size: 14px; }
  .car-lines, .car__lamps { display: none; }
  .car-card__list { max-height: none; }
}
@media (max-width: 380px) {
  .car-card__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- no WebGL (flat): the key, the troubles, the card; no JS: every trouble as text ---------- */
.car.is-flat .car-view, .car.is-flat .car-lines, html:not(.js) .car-view, html:not(.js) .car-lines { display: none; }
@media (min-width: 861px) {
  .car.is-flat .car__stage, html:not(.js) .car__stage { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "side syms card" "side syms card"; }
  .car.is-flat .car-syms, html:not(.js) .car-syms { align-self: center; }
}
html:not(.js) .car__stage { height: auto; min-height: 0; }
html:not(.js) .car-g { margin-bottom: 18px; }
html:not(.js) .car-sym { cursor: default; }
html:not(.js) .car-card__flip { display: none; }
html:not(.js) .car-card__nojs { display: block; padding: 18px; border-radius: 16px; background: var(--paper); color: var(--ink-p); font-size: 14px; line-height: 1.9; }
html:not(.js) .car-card__nojs a { color: var(--ink-c); font-weight: 750; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .car-spot::after { animation: none; }
  html.js .car-g.is-on, .car-item { animation: none; }
  .car-card__flip { transition: none; }
  .car-key__item button, .car-key__ring, .car-sym, .car-lines { transition: none; }
}