/* ═══════════════════════════════════════════════════════════
   Телефон — оболочка (.scratch/mobile/spec.md)
   ═══════════════════════════════════════════════════════════
   Экраны один под другим на всю высоту, панель внизу. Панель — материал
   поверх содержимого, а не полоса под ним: бумага на четыре пятых и
   размытие того, что прокручивается под ней (apple-design, «материалы»);
   списки кладут её высоту в свой нижний отступ. Выбранное место несёт
   графитовая плита, и она едет под новое место, а не появляется на нём
   (пример владельца — панель с бегущим указателем; в языке продукта:
   --accent, без свечения, §8.3). Переход, а не кадры: нажатие посреди
   переезда перенацеливает плиту, и она не начинает путь заново.
   Посередине — действие: круглая кнопка над кромкой, то, ради чего берут
   телефон: новая бронь и продажа. */
html[data-page="phone"]{
  overscroll-behavior:none;
  /* Высота панели — для нижних отступов списков под ней. */
  --tel-bar:calc(58px + env(safe-area-inset-bottom,0px));
  /* Движение экранов и листов — кривая iOS: быстрый старт, долгий мягкий
     подход, без отскока (пружина без перелёта, отклик около .4 с). */
  --t-push:.42s;--ease-push:cubic-bezier(.32,.72,0,1);
  /* Шкала телефона (design-review.md): заголовок экрана, заголовок строки,
     вторая строка, подпись, мелкое. Компьютерные 13.5 / 11.5 / 10.5 на
     расстоянии руки не читаются; здесь шаг HIG: 17 / 15 / 13 / 12. */
  --ph-title:28px;--ph-h:17px;--ph-b:15px;--ph-s:13px;--ph-xs:12px;
  /* Строки от 60 px, поля 16 px, разделитель — волосяная линия с отступом от текста. */
  --ph-gutter:16px;
}
/* Отклик на касание — свой у каждой строки (:active), не серая заливка системы. */
html[data-page="phone"] *{-webkit-tap-highlight-color:transparent}
.app.tel{position:relative;display:flex;flex-direction:column;height:100dvh;overflow:hidden;background:var(--paper)}
.tel-main{flex:1;min-height:0;display:flex;flex-direction:column}
.tel-screen{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--card)}
.tel-screen[hidden]{display:none}

/* ── панель ── */
.tel-tabs{
  position:absolute;left:0;right:0;bottom:0;z-index:5;isolation:isolate;
  display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;
  height:var(--tel-bar);
  padding:0 6px env(safe-area-inset-bottom,0px);
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:blur(20px) saturate(160%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--rule) 70%,transparent);
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.tel-ind{
  position:absolute;z-index:0;top:6px;left:6px;height:46px;width:calc((100% - 12px) / 5);
  border-radius:var(--r-lg);background:var(--accent);
  transform:translateX(calc(var(--i,0) * 100%));
  transition:transform var(--t-move) var(--ease);
}
/* Панель персонала — четыре места без действия (§8.18): указатель — на четверть. */
.tel-tabs.crew{grid-template-columns:repeat(4,1fr)}
.tel-tabs.crew .tel-ind{width:calc((100% - 12px) / 4)}
/* У персонала, который убирает (§8.19), — пятое место «Уборка». */
.tel-tabs.crew.five{grid-template-columns:repeat(5,1fr)}
.tel-tabs.crew.five .tel-ind{width:calc((100% - 12px) / 5)}
.tel-tab{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;height:58px;color:var(--ink-2);font-size:11px;font-weight:500;letter-spacing:0;
  transition:color var(--t-move) var(--ease);
}
.tel-tab svg{width:22px;height:22px;opacity:.85;transition:transform var(--t-tap) var(--ease)}
.tel-tab.on{color:var(--accent-ink)}
.tel-tab.on svg{opacity:1}
.tel-tab:active svg{transform:scale(.92)}
.tel-tab:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:var(--r-lg)}
.tel-badge{
  position:absolute;top:5px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-pill);background:var(--sunk);color:var(--ink-2);
  font-size:9.5px;font-weight:600;line-height:16px;text-align:center;font-variant-numeric:tabular-nums;
}
.tel-tab.on .tel-badge{background:rgb(237 234 227 / .18);color:var(--accent-ink)}
.tel-plus{
  position:relative;z-index:2;align-self:center;justify-self:center;
  width:52px;height:52px;margin-top:-24px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px var(--paper),var(--sh-2);
  transition:transform var(--t-tap) var(--ease);
}
.tel-plus:active{transform:scale(.94)}
.tel-plus:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ── лист действия ── */
.sheet.tel-acts{
  top:auto;left:0;right:0;bottom:0;width:auto;max-height:80dvh;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:8px 16px calc(12px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);
  transition:transform var(--t-push) var(--ease-push),var(--theme-fade);
}
.sheet.tel-acts.open{transform:none}
.tel-handle{display:block;width:36px;height:4px;margin:4px auto 12px;border-radius:var(--r-pill);background:var(--rule)}
.tel-acts-h{margin:0 4px 8px;font-size:13px;font-weight:600;letter-spacing:-.02em;color:var(--ink-2)}
.tel-act{
  display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:10px 12px;
  border-radius:var(--r-lg);text-align:left;
  transition:background-color var(--t-tap) var(--ease);
}
.tel-act:active{background:var(--sunk)}
.tel-act i{
  flex-shrink:0;width:44px;height:44px;border-radius:var(--r-mark);
  background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;
}
.tel-act b{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.tel-act u{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-2);text-decoration:none}
.tel-act-cancel{
  width:100%;height:44px;margin-top:6px;border-radius:var(--r-lg);
  background:var(--sunk);font-size:13px;font-weight:550;color:var(--ink);
}

/* ── пустой экран этапа 2 ── */
.tel-blank{flex:1;padding:24px 16px}

/* Списки под панелью: последняя строка выходит из-под материала. */
.tel-screen.bookings .bl-body{padding-bottom:calc(16px + var(--tel-bar))}
.tel-tk-scroll{padding-bottom:var(--tel-bar)}

/* Поля не мельче 16 px: телефон иначе приближает страницу при фокусе, и
   бланк уезжает из-под пальца. */
html[data-page="phone"] :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select){font-size:16px}

/* Меньше прозрачности — панель сплошная, без размытия. */
@media (prefers-reduced-transparency:reduce){
  .tel-tabs{background:var(--paper);backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .tel-ind,.tel-tab,.tel-tab svg,.tel-plus,.tel-act{transition:none}
  .sheet.tel-acts{transition:var(--theme-fade)}
  .tel-tab:active svg,.tel-plus:active{transform:none}
}