/* Перенесено из customer/prototype/mobile.css (v40). Цвета — токены из tokens.css; `.mobile-nav button` → `:is(a,button)`. */
/* Телефон и узкие экраны */
.mobile-nav{display:none}
@media(max-width:850px){/* Нижнее меню ответственного — у большого пальца, как у водителя */
  
  .mobile-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--surface);border-top:1px solid var(--gray-150);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .mobile-nav :is(a,button){flex:1;position:relative;border:0;background:transparent;color:var(--muted-2);display:grid;place-items:center;gap:3px;min-height:52px;font-size:12px;font-weight:800}
  .mobile-nav :is(a,button).active{color:var(--brand)}
  .layout{display:block}/* Шапка ответственного на телефоне: помощь и личные данные всегда под рукой */
  
  .mobile-head{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--gray-150)}
  .mobile-head .brand{flex:1;font-size:18px}.mobile-head .brand-mark{width:30px;height:30px;font-size:18px}
  .avatar-button{border:0;cursor:pointer;width:40px;height:40px}
  .is-manager .topbar .brand,.topbar .demo-pill{display:none}
  .profile-grid{grid-template-columns:1fr}
  .content{padding-bottom:110px}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom))}
}
@media(max-width:650px){
  .header-actions{flex-wrap:nowrap;overflow-x:auto}
  .header-actions .button{flex:none}
  .summary{font-size:16px!important}
  .attention-item{flex-wrap:wrap}
  .attention-main{flex:1 1 calc(100% - 50px)}
  .attention-item .button.small{margin-left:49px}
  .reset .long{display:none}.reset .short{display:inline}
  .now-row{flex-wrap:wrap;row-gap:2px}
  .hero-main{gap:10px}
  .vehicle-hero{align-items:flex-start;flex-wrap:wrap}
  .vehicle-hero-side{margin-left:auto}/* Таблицы превращаются в карточки */
  
  .data-table.cards thead{display:none}
  .data-table.cards tr{display:block;border-top:1px solid var(--line);padding:12px 14px}
  .data-table.cards tr:first-child{border-top:0}
  .data-table.cards td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:4px 0;text-align:right}
  .data-table.cards td>*{text-align:right}
  .data-table.cards td::before{content:attr(data-label);color:var(--muted);font-size:12px;text-align:left;flex:none}
  .data-table.cards td:first-child{justify-content:flex-start;text-align:left;gap:10px;padding-bottom:8px}
  .data-table.cards td:first-child>*{text-align:left}
  .data-table.cards td:first-child::before{content:none}
  .search{width:100%}/* Панель решения дела — шторка снизу */
  
  .drawer{top:auto;left:0;width:100%;max-height:92vh;border-radius:18px 18px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));animation-name:sheet-in}
  @keyframes sheet-in{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
  .drawer input,.drawer select,.drawer textarea{font-size:16px}
  .field input,.field select,.field textarea{font-size:16px}
  .mail-item{flex-wrap:wrap}.mail-item .button{margin-left:21px}
}
@media(max-width:360px){
  .preset-grid,.problem-grid{grid-template-columns:1fr}
  .demo-bar .mode-switch button{padding:6px 6px}
}