/* «Осмотр техники» — экран под телефон в руке.
   Крупные кнопки, один шаг на экран, ничего лишнего: человек стоит у
   погрузчика, часто в перчатках. */

.insp{max-width:520px;margin:0 auto;padding:4px 0 28px}
.insp-h{margin:2px 0 6px;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--text-1)}
.insp-lead{margin:0 0 14px;font-size:13.5px;line-height:1.45;color:var(--text-2)}
.insp-crumb{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}

/* Кнопки шага — во всю ширину и высокие: попасть пальцем, не целясь. */
.insp-wide{width:100%;height:48px;margin-top:10px;font-size:15px;font-weight:600;border-radius:var(--radius-card)}
.insp-back{height:40px;font-weight:500;color:var(--text-2)}

/* Видоискатель */
.insp-cam{position:relative;width:100%;aspect-ratio:3/4;max-height:52vh;overflow:hidden;
  border:1px solid var(--edge,var(--hair-2));border-radius:var(--radius-card);background:#000}
.insp-video{width:100%;height:100%;object-fit:cover;display:block}
/* Рамка-прицел: видно, куда наводить наклейку. */
.insp-frame{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.9);border-radius:14px;box-shadow:0 0 0 9999px rgba(0,0,0,.28)}
.insp-state{margin:10px 0 2px;font-size:13px;line-height:1.45;color:var(--text-2);text-align:center}

/* Карточка машины */
.insp-card{border:1px solid var(--edge,var(--hair-2));border-radius:var(--radius-card);
  background:var(--surface-2);overflow:hidden;margin-bottom:4px}
.insp-row{display:flex;align-items:baseline;gap:10px;padding:9px 13px;border-bottom:1px solid var(--hair)}
.insp-row:last-child{border-bottom:0}
.insp-k{flex:0 0 auto;font-size:12.5px;color:var(--text-2)}
.insp-v{margin-left:auto;text-align:right;font-size:14px;font-weight:620;color:var(--text-1)}

/* Выбор машины руками */
.insp-pick{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;cursor:pointer;
  padding:11px 13px;margin-bottom:8px;font-family:inherit;
  border:1px solid var(--edge,var(--hair-2));border-radius:var(--radius-card);background:var(--surface-2);color:var(--text-1)}
.insp-pick b{font-size:14.5px;font-weight:640}
.insp-pick span{font-size:12px;color:var(--text-2)}
.insp-pick:active{border-color:var(--accent)}

/* Фото */
.insp-photo{position:relative;margin-bottom:10px;border:1px solid var(--edge,var(--hair-2));
  border-radius:var(--radius-card);background:var(--surface-2);overflow:hidden;cursor:pointer}
.insp-photo-t{padding:8px 13px 0;font-size:12.5px;color:var(--text-2)}
.insp-photo-p{display:flex;align-items:center;justify-content:center;min-height:132px;padding:10px;
  font-size:13px;color:var(--text-3)}
.insp-photo-p img{max-width:100%;max-height:230px;border-radius:8px;display:block}
.insp-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* Моточасы — крупно, цифровая клавиатура */
.insp-num{width:100%;height:52px;font-size:22px;font-weight:660;text-align:center;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* Вопрос */
.insp-q{padding:11px 13px;margin-bottom:9px;border:1px solid var(--edge,var(--hair-2));
  border-radius:var(--radius-card);background:var(--surface-2)}
.insp-q-t{font-size:14.5px;font-weight:600;line-height:1.3;color:var(--text-1)}
.insp-q-h{margin-top:2px;font-size:12px;color:var(--text-3)}
.insp-yn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.insp-btn{height:42px;font-family:inherit;font-size:15px;font-weight:620;cursor:pointer;
  border:1px solid var(--edge,var(--hair-2));border-radius:var(--radius-ctrl);
  background:var(--surface-1);color:var(--text-1)}
.insp-btn.yes.on{background:var(--gain);border-color:var(--gain);color:#fff}
.insp-btn.no.on{background:var(--loss);border-color:var(--loss);color:#fff}
.insp-note{width:100%;margin-top:9px;font-family:inherit;font-size:14px;padding:9px 11px;resize:vertical}

/* Итог */
.insp-verdict{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;cursor:pointer;
  padding:12px 14px;margin-bottom:8px;font-family:inherit;
  border:1px solid var(--edge,var(--hair-2));border-radius:var(--radius-card);
  background:var(--surface-2);color:var(--text-1)}
.insp-verdict b{font-size:15px;font-weight:660}
.insp-verdict span{font-size:12.5px;color:var(--text-2)}
.insp-verdict.on{border-color:var(--accent);outline:1px solid var(--accent)}
.insp-verdict.v-ok.on b{color:var(--gain)}
.insp-verdict.v-broken.on b{color:var(--loss)}

.insp-sum{margin-top:12px;padding:11px 13px;border:1px solid var(--edge,var(--hair-2));
  border-radius:var(--radius-card);background:var(--surface-2)}
.insp-sum-t{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin-bottom:7px}
.insp-sum-r{display:flex;flex-direction:column;gap:1px;padding:6px 0;border-top:1px solid var(--hair)}
.insp-sum-r:first-of-type{border-top:0}
.insp-sum-r b{font-size:13px;font-weight:600}
.insp-sum-r span{font-size:12.5px;color:var(--text-2)}

/* ── Наклейки с QR: лист на печать ─────────────────────────────────────────
   Печатаем сами, в интернет-генераторы ничего не отдаём. */
.qr-sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.qr-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 12px;
  border:1px solid var(--text-1);border-radius:10px;background:#fff;color:#000;text-align:center;break-inside:avoid}
.qr-card img{width:160px;height:160px;display:block}
.qr-name{font-size:15px;font-weight:700;line-height:1.2}
.qr-sub{font-size:12px;color:#444}
.qr-hint{font-size:10.5px;color:#666;line-height:1.25}
.qr-token{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.08em;color:#777}

@media print{
  body *{visibility:hidden}
  .qr-print, .qr-print *{visibility:visible}
  .qr-print{position:absolute;left:0;top:0;width:100%;padding:8mm}
  .qr-sheet{grid-template-columns:repeat(3,1fr);gap:6mm}
  .qr-noprint{display:none!important}
}

/* Фотографии осмотра в карточке */
.eq-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:12px 14px}
.eq-photo{display:flex;flex-direction:column;gap:5px;cursor:pointer}
.eq-photo img{width:100%;height:120px;object-fit:cover;border-radius:8px;
  border:1px solid var(--edge,var(--hair-2));background:var(--surface-3);display:block}
.eq-photo span{font-size:11.5px;color:var(--text-2)}
.eq-photo-big{width:100%;height:auto;border-radius:10px;display:block}

/* ── Правки по осмотру с телефона, 14.09.2026 ─────────────────────────────── */

/* Нижняя панель на время осмотра скрыта: «кнопка „Дальше“ и таб-бар очень
   близко, как бы не промахнуться». Выход — кнопкой в шапке шага. */
body.insp-focus .tabbar{display:none}
body.insp-focus .content,body.insp-focus main.content{padding-bottom:20px}

.insp-top{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.insp-exit{appearance:none;border:0;background:none;font-family:inherit;cursor:pointer;
  padding:6px 8px 6px 0;font-size:13.5px;font-weight:560;color:var(--text-2)}
.insp-exit:active{color:var(--accent)}
.insp-top .insp-crumb{margin:0}

/* Снимок машины на карточке — чтобы не перепутать, если наклейку переклеили. */
.insp-shot{display:grid;place-items:center;width:100%;aspect-ratio:4/3;max-height:44vh;
  overflow:hidden;position:relative;margin-bottom:10px;
  border:1px solid var(--edge,var(--hair-2));border-radius:var(--radius-card);
  background:var(--surface-3);color:var(--text-3);font-size:13px}
.insp-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}

/* Поле моточасов — той же высоты, что кнопки шага. Селектор с именем тега:
   общее правило input.inp задаёт 29 px и специфичнее простого класса. */
input.insp-num{height:48px;font-size:22px}
.insp-delta{margin-top:8px;font-size:13px;color:var(--text-2);text-align:center}
.insp-delta.bad{color:var(--loss);font-weight:600}

.insp-photo-h{padding:0 13px 9px;font-size:11.5px;color:var(--text-3)}
.insp-dim{color:var(--text-3);font-size:12.5px;margin-top:12px}

/* «Машина сломана» — отдельная кнопка, приглушённо-бордовая: это действие
   не рядовое, но и пугать им не надо. */
.insp-broken{color:var(--loss);border-color:var(--loss)}
.insp-broken:active{background:color-mix(in srgb,var(--loss) 10%,transparent)}

/* Итог считается сам — это не выбор, а вывод. */
.insp-verdict.auto{cursor:default}