/* photo-pick.css — сетка «фото тетради» в шторке сдачи (обращение №103, Home writing).
   Префикс pp-. Пустая зона — крупная, во всю ширину: первое действие ребёнка «сфотографировать»,
   и попасть в неё пальцем надо с первого раза. Миниатюры — по три в ряд, страница тетради
   вертикальная, поэтому плитка 3:4. Номер в углу = номер страницы в будущем PDF. */
.pp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  margin:14px 0;min-height:150px;padding:22px 16px;cursor:pointer;text-align:center;
  border:2px dashed var(--line);border-radius:var(--r-md);color:var(--muted);
  font-weight:600;font-size:var(--fs-sm)}
.pp-empty .ic{font-size:var(--ic-md)}
@media (hover:hover){.pp-empty:hover{border-color:var(--accent-deep);color:var(--accent-dark)}}
.pp-over .pp-empty,.pp-over .pp-grid{border-color:var(--accent-deep);background:var(--accent-tint)}
.pp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 6px;
  border:2px dashed transparent;border-radius:var(--r-md)}
.pp-tile{position:relative;aspect-ratio:3/4;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--line);background:var(--fill-soft)}
/* blox72 #9 — долгое нажатие на фото — НАШ жест переноса (photo-pick.js armMove). Без этих правил
   тем же жестом iOS начинает свой: поднимает картинку или выделяет текст и показывает меню. Сверяет
   check.js «жест переноса» — на ноутбуке потеря правила не видна, только пальцем на айфоне. */
.pp-tile{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;cursor:grab}
.pp-tile img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;pointer-events:none}
.pp-tile.pp-lifted{z-index:5;overflow:visible;opacity:.85;box-shadow:0 10px 24px rgba(var(--sh-rgb),.28);cursor:grabbing;
  transition:none}
.pp-tile.pp-target{outline:2px solid var(--accent);outline-offset:2px}
.pp-num{position:absolute;left:4px;bottom:4px;min-width:20px;padding:1px 6px;border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);font-size:var(--fs-2xs);font-weight:700;text-align:center}
.pp-rm{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;
  background:var(--card);color:var(--ink);font-size:var(--fs-sm);line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-family:inherit}
.pp-add{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:2px dashed var(--line);border-radius:var(--r-sm);color:var(--muted);font-size:var(--fs-xl)}
@media (hover:hover){.pp-add:hover{border-color:var(--accent-deep);color:var(--accent-dark)}}
.pp-count{font-size:var(--fs-2xs);color:var(--faint);margin-bottom:8px}