/* ═══ Телефон — «Уборка» у того, кто убирает (SPEC §8.19) ═══
   Решения формы — .scratch/cleaning/design-review.md, «Телефон». Плита
   отвечает «что сейчас убирать», бумага — разделы дня строками-бирками,
   лист обхода — окно во весь экран снизу (путь входа и ухода один, как у
   карточки брони), «Сообщить» — второй лист поверх. Движется только то,
   что отвечает на касание: заливка клетки, нажатие, тихий вход «Сдано».
   Скругления: большие поверхности и главные кнопки — --r-lg, снимки и
   поля — --r, малые кнопки и клетка — круг. */

/* ── экран ── */
.tel-screen.tel-cleaning{background:var(--card)}
.cl-plate{border-radius:0;padding:calc(12px + env(safe-area-inset-top,0px)) var(--ph-gutter) 14px}
.cl-of h2{margin:0;font-size:var(--ph-title);font-weight:600;letter-spacing:-.03em;line-height:1.05;color:var(--band-ink)}
.cl-of span{display:block;margin-top:5px;font-size:var(--ph-s);line-height:1.4;color:var(--band-ink-2)}
/* Узел «что сейчас»: объект крупно, вид и срок под ним, «Продолжить» светлой таблеткой под большим пальцем. */
.cl-now{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:end;
  width:100%;margin-top:14px;padding:14px 14px 14px 16px;border-radius:var(--r-lg);text-align:left;
  background:color-mix(in srgb,var(--band-ink) 8%,transparent);color:var(--band-ink);
  transition:transform var(--t-tap) var(--ease);
}
.cl-now:active{transform:scale(.98)}
.cl-now-of{grid-column:1;font-size:var(--ph-s);color:var(--band-ink-2)}
.cl-now>b{grid-column:1;font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1;overflow-wrap:anywhere}
.cl-now-line{grid-column:1;font-size:var(--ph-b);line-height:1.35;color:var(--band-ink-2)}
.cl-now-go{
  grid-column:2;grid-row:1 / 4;display:inline-flex;align-items:center;height:48px;padding:0 20px;border-radius:var(--r-pill);
  background:var(--band-ink);color:var(--band);font-style:normal;font-size:16px;font-weight:600;white-space:nowrap;
}
.cl-now.t-late .cl-now-of{color:var(--plate-late)}
.cl-now.t-wait .cl-now-of{color:var(--plate-wait)}
.cl-now-none{margin:14px 0 0;font-size:var(--ph-b);line-height:1.4;color:var(--band-ink-2)}

.cl-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.cl-body{padding:4px var(--ph-gutter) calc(24px + var(--tel-bar))}
.cl-sec{margin-top:20px}
.cl-sec h3{margin:0 0 2px;font-size:var(--ph-s);font-weight:600;color:var(--ink-2)}
.cl-list{list-style:none;margin:0;padding:0}
/* Строка — бирка ключа: объект и причина слева, час и слово справа; тон — только у исключений. */
.cl-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--rule)}
.cl-row:last-child{border-bottom:0}
.cl-row-hit{
  flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 0;text-align:left;color:var(--ink);
  transition:transform var(--t-tap) var(--ease);
}
.cl-row-hit:active{transform:scale(.985)}
.cl-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cl-row-main b{font-size:var(--ph-h);font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-row-main span{font-size:var(--ph-b);line-height:1.35;color:var(--ink-2)}
.cl-row-side{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.cl-row-side b{font-size:var(--ph-h);font-weight:500;font-variant-numeric:tabular-nums}
.cl-row-side span{font-size:var(--ph-s);color:var(--ink-3)}
.cl-row.t-late .cl-row-side span{color:var(--late)}
.cl-row.t-wait .cl-row-side span{color:var(--wait)}
.cl-row.t-ok .cl-row-side span{color:var(--ok)}
.cl-row.other .cl-row-main b{font-weight:500;color:var(--ink-2)}
.cl-take{
  flex-shrink:0;height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);
  font-size:var(--ph-b);font-weight:600;transition:transform var(--t-tap) var(--ease),opacity var(--t-tap) var(--ease);
}
.cl-take:active{transform:scale(.96)}
.cl-take:disabled{opacity:.55}
/* Загрузка — строки той же высоты, серыми полосами и без мерцания. */
.cl-skel>div{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:64px;border-bottom:1px solid var(--rule)}
.cl-skel i{display:block;width:46%;height:12px;border-radius:var(--r-pill);background:var(--sunk)}
.cl-skel i+i{width:70%;height:10px}
.cl-queue,.cl-fail{margin:12px 0 0;padding:10px 12px;border-radius:var(--r);font-size:var(--ph-b);line-height:1.4}
.cl-queue{background:var(--sunk);color:var(--ink-2)}
.cl-fail{background:var(--late-bg);color:var(--late)}
.cl-fail button{margin:-10px 0;padding:10px 4px;font-weight:600;text-decoration:underline;color:inherit}
.cl-blank{margin-top:40px}

/* ── лист обхода ── */
html[data-page="phone"] .dlg.dlg-clean{
  inset:0;width:auto;max-width:none;max-height:none;border-radius:0;
  transform:translateY(100%);opacity:1;background:var(--card);
  transition:transform var(--t-push) var(--ease-push),visibility 0s linear var(--t-push),var(--theme-fade);
}
html[data-page="phone"] .dlg.dlg-clean.open{transform:none;transition:transform var(--t-push) var(--ease-push),visibility 0s,var(--theme-fade)}
.cl-head{position:relative;flex-shrink:0;padding:calc(env(safe-area-inset-top,0px) + 12px) 64px 14px var(--ph-gutter);border-bottom:1px solid var(--rule)}
.cl-x{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);right:10px;display:grid;place-items:center;width:44px;height:44px;
  border-radius:var(--r-pill);background:var(--sunk);color:var(--ink-2);transition:transform var(--t-tap) var(--ease);
}
.cl-x:active{transform:scale(.94)}
.cl-kind{display:block;font-size:var(--ph-s);line-height:1.35;color:var(--ink-2)}
.cl-head h2{margin:3px 0 0;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.cl-due{margin:4px 0 0;font-size:var(--ph-b);color:var(--ink-2);font-variant-numeric:tabular-nums}
.cl-due.t-late{color:var(--late)}
.cl-due.t-wait{color:var(--wait)}
.cl-due.t-ok{color:var(--ok)}
.cl-back{flex-shrink:0;margin:12px var(--ph-gutter) 0;padding:12px 14px;border-radius:var(--r-lg);background:var(--wait-bg);border:1px solid var(--wait-line)}
.cl-back b{display:block;font-size:var(--ph-b);font-weight:600;color:var(--wait)}
.cl-back p{margin:4px 0 0;font-size:var(--ph-h);line-height:1.4;color:var(--ink)}
.cl-back span{display:block;margin-top:6px;font-size:var(--ph-s);color:var(--ink-2)}
.cl-orphan{flex-shrink:0;margin:12px var(--ph-gutter) 0;padding:10px 12px;border-radius:var(--r);background:var(--sunk);font-size:var(--ph-b);line-height:1.4;color:var(--ink-2)}
.cl-sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px var(--ph-gutter) 16px}
.cl-sheet-body>.cl-fail{margin-top:16px}
.cl-count{margin:12px 0 2px;font-size:var(--ph-s);color:var(--ink-2)}
.cl-noitems{margin:20px 0;font-size:var(--ph-b);line-height:1.4;color:var(--ink-2)}
.cl-items{list-style:none;margin:0;padding:0}
/* Пункт — строка от 56 px: круглая клетка 28, текст 17, камера и «…» справа по 44. */
.cl-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:4px;border-bottom:1px solid var(--rule)}
.cl-item:last-child{border-bottom:0}
.cl-check{display:flex;align-items:flex-start;gap:14px;min-width:0;min-height:56px;padding:14px 0;text-align:left;color:var(--ink)}
.cl-box{
  flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 2px var(--rule-2);color:transparent;
  transition:background-color 160ms var(--ease),box-shadow 160ms var(--ease),color 160ms var(--ease),transform var(--t-tap) var(--ease);
}
.cl-check:not(:disabled):active .cl-box{transform:scale(.9)}
.cl-check:disabled .cl-box{box-shadow:inset 0 0 0 2px var(--rule)}
.cl-item.is-done .cl-box{background:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent-ink)}
.cl-item.is-skip .cl-box{background:var(--sunk)}
.cl-text{flex:1;min-width:0;padding-top:3px;font-size:var(--ph-h);line-height:1.35}
.cl-text em{display:block;margin-top:2px;font-style:normal;font-size:var(--ph-s);color:var(--ink-3)}
.cl-text em.cl-skipped{color:var(--wait)}
.cl-item.is-done .cl-text{color:var(--ink-2)}
.cl-cam,.cl-more{
  position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);color:var(--ink-2);
  transition:transform var(--t-tap) var(--ease),opacity var(--t-tap) var(--ease);
}
.cl-cam{background:var(--sunk)}
.cl-cam.has{color:var(--ink)}
.cl-cam b{
  position:absolute;top:0;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);font-size:var(--ph-xs);font-weight:600;line-height:18px;
}
.cl-cam[aria-busy="true"],.cl-cam:disabled{opacity:.45}
.cl-cam:not(:disabled):active,.cl-more:active{transform:scale(.92)}
.cl-thumbs{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;padding:0 0 12px 42px}
.cl-thumb{position:relative;display:block;width:64px;height:64px;border-radius:var(--r);overflow:hidden;background:var(--sunk);transition:transform var(--t-tap) var(--ease)}
.cl-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.cl-thumb:not(:disabled):active{transform:scale(.96)}
.cl-thumb.armed b{
  position:absolute;inset:0;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ink) 60%,transparent);color:var(--card);font-size:var(--ph-s);font-weight:600;
}
.cl-skip{grid-column:1 / -1;padding:0 0 14px 42px}
.cl-skip label span,.cl-field span{display:block;margin-bottom:6px;font-size:var(--ph-s);color:var(--ink-2)}
.cl-skip input,.cl-field input,.cl-field textarea{
  display:block;width:100%;min-height:48px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--rule-2);
  background:var(--card);color:var(--ink);font:inherit;font-size:16px;line-height:1.4;
}
.cl-field textarea{resize:none}
.cl-skip input:focus,.cl-field :is(input,textarea):focus{outline:none;border-color:var(--accent)}
.cl-skip div{display:flex;gap:8px;margin-top:8px}
.cl-skip div button{
  height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink);
  font-size:var(--ph-b);font-weight:500;transition:transform var(--t-tap) var(--ease);
}
.cl-skip div button:active{transform:scale(.97)}

/* ── подвал: одно главное действие под большим пальцем ── */
.cl-foot{flex-shrink:0;padding:12px var(--ph-gutter) calc(env(safe-area-inset-bottom,0px) + 12px);border-top:1px solid var(--rule);background:var(--card)}
.cl-foot-row{display:flex;gap:10px}
.cl-foot .cl-field{margin:0 0 10px}
.cl-go,.cl-ghost{
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;padding:6px 18px;border-radius:var(--r-lg);
  font-size:var(--ph-h);font-weight:600;line-height:1.2;
  transition:transform var(--t-tap) var(--ease),opacity var(--t-tap) var(--ease),background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease);
}
.cl-go{flex:1;background:var(--accent);color:var(--accent-ink)}
.cl-ghost{flex:0 0 auto;background:var(--sunk);color:var(--ink)}
.cl-go small{margin-top:2px;font-size:var(--ph-s);font-weight:500}
.cl-go[aria-disabled="true"]{background:var(--sunk);color:var(--ink-2)}
.cl-go[aria-busy="true"],.cl-ghost[aria-busy="true"]{opacity:.6}
.cl-go:active,.cl-ghost:active{transform:scale(.97)}
.cl-foot-note{margin:0;padding:8px 0;text-align:center;font-size:var(--ph-b);color:var(--ink-2)}
.cl-error{margin:0 0 10px;font-size:var(--ph-b);line-height:1.4;color:var(--late)}
.cl-done{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;padding:14px 16px;border-radius:var(--r-lg);background:var(--ok-bg);border:1px solid var(--ok-line)}
.cl-done b{font-size:var(--ph-h);font-weight:600;color:var(--ok)}
.cl-done span{font-size:var(--ph-b);color:var(--ink-2)}
.cl-done.t-check{background:var(--wait-bg);border-color:var(--wait-line)}
.cl-done.t-check b{color:var(--wait)}
.cl-done.t-declined{background:var(--sunk);border-color:var(--rule)}
.cl-done.t-declined b{color:var(--ink)}
/* «Сдано» — один тихий момент после «Готово»: входит снизу на 8 px; при уменьшенном движении — только проявляется. */
@media (prefers-reduced-motion:no-preference){.cl-done.fresh{animation:clIn 200ms var(--ease) both}}
@media (prefers-reduced-motion:reduce){.cl-done.fresh{animation:clFade 200ms var(--ease) both}}
@keyframes clIn{from{opacity:0;transform:translateY(8px)}}
@keyframes clFade{from{opacity:0}}

/* ── «Сообщить» ── */
.cl-rep{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px var(--ph-gutter) 16px}
.cl-kinds{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;border:0;min-width:0}
.cl-kinds legend{margin:8px 0;padding:0;font-size:var(--ph-s);color:var(--ink-2)}
.cl-kindtile{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:64px;padding:10px 12px;
  border-radius:var(--r-lg);text-align:left;background:var(--sunk);color:var(--ink);box-shadow:inset 0 0 0 2px transparent;
  transition:background-color var(--t-tap) var(--ease),box-shadow var(--t-tap) var(--ease),transform var(--t-tap) var(--ease);
}
.cl-kindtile b{font-size:var(--ph-h);font-weight:600}
.cl-kindtile span{font-size:var(--ph-s);line-height:1.3;color:var(--ink-2)}
.cl-kindtile.on{background:var(--card);box-shadow:inset 0 0 0 2px var(--accent)}
.cl-kindtile:active{transform:scale(.97)}
.cl-field{display:block;margin-top:16px}
.cl-toggle{display:flex;align-items:center;gap:12px;min-height:48px;margin-top:12px;font-size:var(--ph-b);color:var(--ink)}
.cl-toggle input{flex-shrink:0;width:24px;height:24px;accent-color:var(--accent)}
.cl-shots{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cl-shots .cl-thumb{width:72px;height:72px}
.cl-thumb.is-busy{opacity:.55}
.cl-shot-add{
  display:grid;place-items:center;width:72px;height:72px;border-radius:var(--r);border:1.5px dashed var(--rule-2);color:var(--ink-2);
  transition:transform var(--t-tap) var(--ease);
}
.cl-shot-add:active{transform:scale(.96)}

/* ── стойка на телефоне: «Ещё → Уборка» и лист уборки листом ── */
.pcd-head{padding:14px var(--ph-gutter) 4px}
.pcd-read{margin:0;font-size:var(--ph-b);line-height:1.4;color:var(--ink-2)}
.pcd-acts{display:flex;gap:8px;margin-top:12px}
.pcd-btn{
  flex:1;height:44px;border-radius:var(--r-lg);background:var(--sunk);color:var(--ink);font-size:var(--ph-b);font-weight:600;
  transition:transform var(--t-tap) var(--ease);
}
.pcd-btn.go{background:var(--accent);color:var(--accent-ink)}
.pcd-btn:active{transform:scale(.97)}
.pcd-sec{margin-top:18px;padding:0 var(--ph-gutter)}
.pcd-sec h3{margin:0 0 2px;font-size:var(--ph-s);font-weight:600;color:var(--ink-2)}
.pcd-list{list-style:none;margin:0;padding:0}
.pcd-row{border-bottom:1px solid var(--rule)}
.pcd-row:last-child{border-bottom:0}
.pcd-hit{
  display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 0;text-align:left;color:var(--ink);
  transition:transform var(--t-tap) var(--ease);
}
.pcd-hit:active{transform:scale(.985)}
.pcd-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pcd-main b{font-size:var(--ph-h);font-weight:600}
.pcd-main span{font-size:var(--ph-b);line-height:1.35;color:var(--ink-2)}
.pcd-side{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;max-width:40%}
.pcd-side em{font-style:normal;font-size:var(--ph-s);color:var(--ink-3)}
.pcd-side span{font-size:var(--ph-s);color:var(--ink-3);text-align:right}
.pcd-side span.soon{color:var(--wait);font-weight:500}
.pcd-row.t-wait .pcd-side em{color:var(--wait)}
.pcd-row.t-late .pcd-side em{color:var(--late)}
#phCleanDeskBody .cl-fail,#phCleanDeskBody .cl-skel{margin:14px var(--ph-gutter) 0}
html[data-page="phone"] .dlg.dlg-cld{
  inset:0;width:auto;max-width:none;max-height:none;border-radius:0;transform:translateY(100%);opacity:1;
  transition:transform var(--t-push) var(--ease-push),visibility 0s linear var(--t-push),var(--theme-fade);
}
html[data-page="phone"] .dlg.dlg-cld.open{transform:none;transition:transform var(--t-push) var(--ease-push),visibility 0s,var(--theme-fade)}
html[data-page="phone"] .cld-head{padding:calc(env(safe-area-inset-top,0px) + 12px) var(--ph-gutter) 12px}
html[data-page="phone"] .cld-head h2{font-size:22px}
html[data-page="phone"] .dlg-cld .cl-kind,html[data-page="phone"] .dlg-cld .cl-due{font-size:var(--ph-s)}
html[data-page="phone"] .dlg-cld .cl-x{width:44px;height:44px}
html[data-page="phone"] .cld-body{padding:12px var(--ph-gutter) 16px}
html[data-page="phone"] .cld-facts dd,html[data-page="phone"] .cld-item b{font-size:var(--ph-b)}
html[data-page="phone"] .cld-select,html[data-page="phone"] .cld-input{height:44px;font-size:16px}
html[data-page="phone"] textarea.cld-input{height:auto}
html[data-page="phone"] .cld-foot{padding:12px var(--ph-gutter) calc(env(safe-area-inset-bottom,0px) + 12px)}
html[data-page="phone"] .cld-acts .btn{min-height:48px;flex:1}
html[data-page="phone"] .cld-perf{width:100%;margin:0 0 4px}
html[data-page="phone"] .cld-perf .cld-select{flex:1}
html[data-page="phone"] .cld-thumb{width:64px;height:64px}