/* spot: K-162 (K-23d) — схема повреждений кузова: карточка в шаге «Состояние», полноэкранный слой со схемой и листом выбора,
   блок «Кузов» на странице объявления. Только токены spot_ui.css (светлая и тёмная тема), логические свойства (RTL через
   scripts/spot_rtl_build.sh), зоны касания ≥ 44 px, без зависимости от наведения. Сама схема в RTL не зеркалится (svg dir="ltr"):
   левая дверь остаётся левой. Макет: docs/catalog-refresh/screens/k23d-damage-390.html. */

/* ---------- карточка под «Описанием» (подача — секция экрана фото/описания, правка — своя карточка) ---------- */
.spot-dmg-sec[hidden], .spot-create--auth .spot-dmg-sec { display: none !important; }
.spot-dmg-card { margin: 0; padding: 14px; border: 1px solid var(--spot-line); border-radius: var(--spot-radius-l); background: var(--spot-raise); color: var(--spot-ink); }
.spot-dmg-card[hidden] { display: none; }
.spot-dmg-card-head { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; }
.spot-dmg-card-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spot-dmg-card-ico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--spot-surface); color: var(--spot-ink); }
.spot-dmg-card-title { font-size: 16px; line-height: 20px; font-weight: 700; }
.spot-dmg-card-opt { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--spot-mut); }
.spot-dmg-card-hint { font-size: 13px; line-height: 18px; color: var(--spot-ink-2); }
.spot-dmg-actions { display: grid; gap: 8px; }
.spot-dmg-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: var(--spot-control-h-l, 52px); margin: 0; padding: 0 16px;
    border: 1px solid transparent; border-radius: var(--spot-radius, 12px);
    font-family: inherit; font-size: 16px; line-height: 20px; font-weight: 700; text-align: center; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.spot-dmg-btn--main { background: var(--spot-inv); color: var(--spot-on-inv); }
.spot-dmg-btn--soft { border-color: var(--spot-field-border); background: var(--spot-surface); color: var(--spot-ink); }
.spot-dmg-btn--soft[aria-pressed="true"] { border-color: var(--spot-green-fg); color: var(--spot-green-fg); box-shadow: inset 0 0 0 1px var(--spot-green-fg); }
.spot-dmg-btn--red { background: var(--spot-red); color: #fff; }
.spot-dmg-btn:active { transform: scale(.98); }
.spot-dmg-sum { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; }
.spot-dmg-sum-list, .spot-dmg-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.spot-dmg-sum-list li, .spot-dmg-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 18px; }
.spot-dmg-sum-list b, .spot-dmg-list b { display: block; font-weight: 700; }
.spot-dmg-types { display: block; color: var(--spot-ink-2); }
.spot-dmg-num { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--spot-red); color: #fff; font-size: 12px; line-height: 1; font-weight: 700; }
.spot-dmg-num--off { background: var(--spot-field); color: var(--spot-mut); }
.spot-dmg-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 0; padding-top: 4px; border-top: 1px solid var(--spot-line); }
.spot-dmg-card-note { font-size: 13px; line-height: 18px; color: var(--spot-mut); }
.spot-dmg-link { flex: 0 0 auto; min-height: 44px; margin: 0; padding: 0 4px; border: 0; background: none; color: var(--spot-red-fg); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.spot-dmg-link--mut { display: block; margin: 0 auto; color: var(--spot-ink-2); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.spot-dmg-status { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--spot-green-fg); }
.spot-dmg-status:empty { display: none; }
.spot-dmg-status.is-err { color: var(--spot-red-fg); }

/* ---------- схема ---------- */
.spot-dmg-svg { display: block; width: 100%; height: auto; -webkit-tap-highlight-color: transparent; }
.spot-dmg-z { fill: var(--spot-field); stroke: var(--spot-field-border); stroke-width: 1.5; }
.spot-dmg-z--glass { fill: var(--spot-dmg-glass, #DCE7F2); }
.spot-dmg-zg { cursor: pointer; outline: none; }
.spot-dmg-zg.is-on .spot-dmg-z, .spot-dmg-z.is-on { fill: var(--spot-red-soft); stroke: var(--spot-red-fg); stroke-width: 2; }
.spot-dmg-zg:focus-visible .spot-dmg-z { stroke: var(--spot-focus); stroke-width: 3; }
.spot-dmg-hit { fill: transparent; }
.spot-dmg-wheel { fill: var(--spot-ink-2); opacity: .35; }
.spot-dmg-pin { pointer-events: none; }
.spot-dmg-pin circle { fill: var(--spot-red); }
.spot-dmg-pin text { fill: #fff; font: 700 13px/1 var(--spot-font, sans-serif); text-anchor: middle; dominant-baseline: central; }
.spot-dmg-svg--mini .spot-dmg-pin text { font-size: 28px; } /* мини-схема в карточке ~104 px: метка читается */
.spot-dmg > .spot-dmg-pic .spot-dmg-pin text { font-size: 15px; }
.spot-dmg-svg--mini .spot-dmg-zg { cursor: default; }
.spot-dmg-svg--ok .spot-dmg-z, .spot-dmg-svg--ok .spot-dmg-z--glass { fill: var(--spot-green-soft); stroke: var(--spot-green-fg); }
:root { --spot-dmg-glass: #DCE7F2; }
:root.spot-dm[data-theme="dark"] { --spot-dmg-glass: #26313D; }

/* ---------- полноэкранный слой (подача и правка) ---------- */
html.spot-dmg-open, html.spot-dmg-open body { overflow: hidden; }
.spot-dmg-layer {
    position: fixed; inset: 0; z-index: 100010;
    display: flex; flex-direction: column;
    background: var(--spot-bg); color: var(--spot-ink);
    font-family: var(--spot-font, inherit);
    padding-top: env(safe-area-inset-top, 0px);
}
.spot-dmg-lh { flex: 0 0 auto; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; height: 56px; padding: 0 8px; border-bottom: 1px solid var(--spot-line); background: var(--spot-surface); }
.spot-dmg-back { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--spot-ink); cursor: pointer; }
[dir="rtl"] .spot-dmg-back svg { transform: scaleX(-1); }
.spot-dmg-lt { margin: 0; overflow: hidden; font-size: 17px; line-height: 22px; font-weight: 700; text-align: center; white-space: nowrap; text-overflow: ellipsis; outline: none; }
.spot-dmg-lb { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); background: var(--spot-surface); }
.spot-dmg-lb > * { max-width: 420px; margin-inline: auto; }
.spot-dmg-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; margin-bottom: 12px; border-radius: 999px; background: var(--spot-field); }
.spot-dmg-seg button { min-height: 44px; border: 0; border-radius: 999px; background: none; color: var(--spot-ink); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.spot-dmg-seg button[aria-pressed="true"] { background: var(--spot-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
/* подписи сторон стоят над схемой, а схема в RTL не зеркалится — порядок колонок всегда слева направо */
.spot-dmg-sides { direction: ltr; display: grid; grid-template-columns: 1fr 1.6fr 1fr; margin: 0 0 2px; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--spot-mut); text-align: center; }
.spot-dmg-sides span { unicode-bidi: plaintext; }
.spot-dmg-end { margin: 0; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--spot-mut); text-align: center; }
/* схема целиком над кнопкой «Готово»: высота экрана минус шапка, переключатель, подписи и нижняя панель */
.spot-dmg-layer .spot-dmg-pic { display: flex; justify-content: center; }
.spot-dmg-layer .spot-dmg-pic .spot-dmg-svg { width: auto; max-width: 100%; height: min(100vw * 1.5, calc(100vh - 310px)); height: min(100vw * 1.5, calc(100dvh - 310px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))); min-height: 300px; }
.spot-dmg-tip { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--spot-ink-2); }
.spot-dmg-tip svg { flex: 0 0 auto; }
.spot-dmg-group { margin: 14px 0 4px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--spot-mut); }
.spot-dmg-group:first-child { margin-top: 0; }
.spot-dmg-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin: 0; padding: 6px 0; border: 0; border-bottom: 1px solid var(--spot-line); background: none; color: var(--spot-ink); font-family: inherit; text-align: start; cursor: pointer; }
.spot-dmg-row-name { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.spot-dmg-row-val { display: block; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--spot-red-fg); }
.spot-dmg-row-val.is-none { color: var(--spot-mut); }
.spot-dmg-chev { flex: 0 0 auto; color: var(--spot-mut); }
[dir="rtl"] .spot-dmg-chev { transform: scaleX(-1); }
.spot-dmg-lbar { flex: 0 0 auto; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--spot-line); background: var(--spot-surface); }
.spot-dmg-lbar .spot-dmg-btn { max-width: 420px; margin-inline: auto; }

/* нижний лист «что с деталью» — к окну, не к странице (в Safari iOS иначе уходит под панель браузера) */
.spot-dmg-scrim { position: fixed; inset: 0; z-index: 100011; background: rgba(10, 12, 15, .45); }
.spot-dmg-sheet {
    position: fixed; z-index: 100012; right: 0; left: 0; bottom: 0;
    width: min(100%, 480px); margin-inline: auto; max-height: 85vh; max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border-radius: 20px 20px 0 0; background: var(--spot-surface); box-shadow: var(--spot-shadow-sheet);
}
.spot-dmg-scrim[hidden], .spot-dmg-sheet[hidden] { display: none; }
.spot-dmg-grab { width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: var(--spot-line); }
.spot-dmg-st { margin: 0 0 2px; font-size: 20px; line-height: 26px; font-weight: 700; }
.spot-dmg-sh { margin: 0 0 14px; font-size: 13px; line-height: 18px; color: var(--spot-mut); }
.spot-dmg-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.spot-dmg-chip { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 0; padding: 8px 12px; border: 1px solid var(--spot-field-border); border-radius: var(--spot-radius, 12px); background: var(--spot-surface); color: var(--spot-ink); font-family: inherit; font-size: 14px; line-height: 18px; font-weight: 600; text-align: start; cursor: pointer; touch-action: manipulation; }
.spot-dmg-box { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid var(--spot-field-border); border-radius: 6px; color: transparent; }
.spot-dmg-chip[aria-pressed="true"] { border-color: var(--spot-red); box-shadow: inset 0 0 0 1px var(--spot-red); }
.spot-dmg-chip[aria-pressed="true"] .spot-dmg-box { border-color: var(--spot-red); background: var(--spot-red); color: #fff; }
.spot-dmg-sa { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }

/* ---------- блок «Кузов» на странице объявления ---------- */
.spot-dmg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.spot-dmg-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--spot-red-soft); color: var(--spot-red-dark-fg); font-size: 13px; line-height: 18px; font-weight: 600; }
.spot-dmg-tag--ok { background: var(--spot-green-soft); color: var(--spot-green-fg); }
/* число — отдельной «таблеткой», без «·»: в персидском шрифте точка похожа на ноль («· 1» читалось как «10») */
.spot-dmg-tag { gap: 6px; }
.spot-dmg-tag-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--spot-surface); font-size: 12px; line-height: 1; font-weight: 700; }
.spot-dmg > .spot-dmg-pic { max-width: 230px; margin: 0 auto 12px; }
.spot-dmg-ok { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; }
.spot-dmg-ok-note { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--spot-mut); }
.spot-dmg-note { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--spot-radius, 12px); background: var(--spot-amber-soft); color: var(--spot-ink); font-size: 13px; line-height: 18px; }
.spot-dmg-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--spot-amber); }
@media (min-width: 768px) {
    .spot-dmg > .spot-dmg-pic { float: inline-start; width: 200px; margin: 0 0 12px; margin-inline-end: 24px; }
    .spot-dmg-list { overflow: hidden; }
    .spot-dmg-note { clear: both; }
}

@media (prefers-reduced-motion: no-preference) {
    .spot-dmg-chip, .spot-dmg-row, .spot-dmg-seg button, .spot-dmg-btn { transition: background-color .12s, border-color .12s, box-shadow .12s, transform .12s cubic-bezier(.23, 1, .32, 1); }
    .spot-dmg-z { transition: fill .15s, stroke .15s; }
}
@media (hover: hover) {
    .spot-dmg-chip:hover, .spot-dmg-row:hover { border-color: var(--spot-field-border); }
    .spot-dmg-zg:not(.is-on):hover .spot-dmg-z { stroke: var(--spot-ink-2); }
}