/* v19 — телефон (html[data-layout=m]): своя вёрстка, не ужатый компьютер.
   Полка липнет сверху (текст её не закрывает), под ней — липкие вкладки и одна панель;
   свайп по панели — соседняя вкладка. На «Партія» и «Заявка» полка уезжает вверх (мини). */

[data-layout='m'] .top { padding: 8px 16px; }
[data-layout='m'] .wrap { padding: 0 16px 96px; }
[data-layout='m'] .hero { padding: 4px 0 12px; }
[data-layout='m'] .kinetic { font-size: clamp(1.9rem, 9vw, 2.5rem); }
[data-layout='m'] .lead { font-size: 0.92rem; margin-bottom: 0; }

[data-layout='m'] .stage-wrap { position: sticky; top: 0; z-index: 10; background: var(--bg); margin: 0 -16px; padding: 6px 16px 8px;
  box-shadow: 0 8px 14px -12px rgb(0 0 0 / 0.35); }
[data-layout='m'] .stage { height: clamp(190px, 30svh, 320px); }
[data-layout='m'][data-tab='batch'] .stage,
[data-layout='m'][data-tab='apply'] .stage { height: clamp(150px, 20svh, 200px); }
[data-layout='m'] .shelf-bar { display: grid; gap: 4px; margin-top: 6px; }
[data-layout='m'] .line-name { font-size: 1rem; margin: 0; }
[data-layout='m'] .slot-b { position: relative; grid-template-columns: 32px 1fr; grid-template-areas: 'pic t'; padding: 5px; gap: 6px; border-radius: 12px; align-items: center; }
[data-layout='m'] .slot img, [data-layout='m'] .slot .ph, [data-layout='m'] .slot .plus { width: 32px; border-radius: 7px; }
[data-layout='m'] .slot .plus::before { font-size: 1.1rem; }
[data-layout='m'] .slot .no { position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; font-size: 0.6rem; z-index: 1; box-shadow: 0 0 0 1.5px var(--card); }
[data-layout='m'] .slot .s-t { font-size: 0.7rem; line-height: 1.2; }
/* статус места на телефоне — цветная точка (текст остаётся для чтения с экрана) */
[data-layout='m'] .slot .st { position: absolute; left: 30px; top: 3px; width: 10px; height: 10px; padding: 0; overflow: hidden; color: transparent; font-size: 0; box-shadow: 0 0 0 2px var(--card); }
[data-layout='m'] .slot .st-ok { background: var(--ok); }
[data-layout='m'] .slot .st-bad { background: var(--bad); }
[data-layout='m'] .slot .st-down { background: var(--down); }
[data-layout='m'] .slot .st-wait { background: var(--muted); animation: blink 1s ease-in-out infinite; }
[data-layout='m'] .slot .rm { width: 24px; height: 24px; top: -8px; right: -6px; }
[data-layout='m'] .slot .rm::before { line-height: 22px; }
[data-layout='m'] .attr { font-size: 0.6rem; line-height: 1.3; margin-top: 3px; }

[data-layout='m'] .col-stage { display: contents; }
[data-layout='m'] .col-panels { margin-top: 0; }
[data-layout='m'] .tabs-row { position: sticky; top: var(--stick, 0px); z-index: 9; background: var(--bg); margin: 0 -16px; padding: 8px 16px; }
[data-layout='m'] .tab { padding: 8px 11px; font-size: 0.85rem; }
[data-layout='m'] .share-btn { padding: 0; width: 40px; height: 40px; justify-content: center; }
[data-layout='m'] .share-btn span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-layout='m'] .panels { touch-action: pan-y; }
[data-layout='m'] .panel { display: none; padding: 14px; }
[data-layout='m'] .panel.on { display: block; animation: slidein 0.3s ease-out; }
@keyframes slidein { from { opacity: 0; transform: translateX(14px); } }
[data-layout='m'] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
[data-layout='m'] .card { padding: 4px; border-radius: 12px; }
[data-layout='m'] .c-t { font-size: 0.74rem; }
[data-layout='m'] .sets .set { font-size: 0.8rem; padding: 7px 10px; }
[data-layout='m'] .pr { grid-template-columns: minmax(72px, 32%) 1fr; font-size: 0.84rem; }

[data-layout='m'] .sticky-cta { position: fixed; left: 16px; right: 16px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 20; border: 0; border-radius: 99px;
  padding: 14px; font-weight: 700; font-size: 1rem; background: var(--ink); color: var(--bg); box-shadow: 0 8px 24px rgb(0 0 0 / 0.25); }
[data-layout='m'] .sticky-cta[hidden] { display: none; }
[data-layout='m'] .toast { bottom: 80px; }

@media (max-width: 359px) {
  [data-layout='m'] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-layout='m'] .row2 { grid-template-columns: 1fr; }
  [data-layout='m'] .slot-b { grid-template-columns: 1fr; grid-template-areas: 'pic' 't'; }
  [data-layout='m'] .slot .st { left: auto; right: 4px; }
}