/* Телефон (ZK-58, макет «Планшет и телефон», 390×844): таблицы нет — карточки позиций со степпером
   «− число +», разделы — в меню по ☰, условия — одной строкой-кнопкой, метки прокручиваются вбок,
   внизу — панель действия раздела. Включается на сенсорном экране до 600px и в окне с мышью до 600px (body.touch-phone). */

.consumable-search-announcement {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

body.touch-phone .app { display: block; height: 100vh; }
body.touch-phone .content { height: 100vh; }

/* Меню по ☰: 300px слева поверх экрана, затемнение. */
body.touch-phone .rail {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 70; width: 300px; padding: 56px 14px 30px;
  background: oklch(0.955 0.008 80); border: 0; box-shadow: 8px 0 30px oklch(0.2 0.02 60 / .2);
  transform: translateX(-105%); transition: transform .18s ease;
}
body.touch-phone.drawer-open .rail { transform: none; }
body.touch-phone .rail-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 69; background: oklch(0.2 0.015 60 / .35); }
body.touch-phone .rail-brand b { font-size: 18px; }
body.touch-phone .rail-brand { padding: 0 10px 14px; }
body.touch-phone .point-btn { min-height: 52px; padding: 8px 14px; border-radius: 12px; }
body.touch-phone .rail-nav { gap: 4px; margin-top: 16px; }
body.touch-phone .nav-item { min-height: 58px; justify-content: center; padding: 8px 14px; border-radius: 12px; }
body.touch-phone .nav-title { font-size: 16px; }
body.touch-phone .nav-item:not(.is-active) .nav-title { color: oklch(0.45 0.014 60); }
body.touch-phone .nav-item.is-active { background: var(--pop); box-shadow: 0 1px 2px oklch(0.3 0.02 60 / .12); }
body.touch-phone .point-label { font-size: 12px; }
body.touch-phone .point-text { line-height: 1.3; }
body.touch-phone .point-text b { font-weight: 700; }
body.touch-phone .rail-link { padding: 6px 14px; font-size: 14px; }
/* Низ меню: «почта · Выйти» одной строкой, «Выйти» — синей ссылкой (макет). */
body.touch-phone .rail-foot { display: block; padding: 0 14px; line-height: 1.2; }
body.touch-phone .rail-foot .who::after { content: ' · '; }
body.touch-phone .rail-foot .link { color: var(--link); text-decoration: underline; }
body.touch-phone .rail-sep { margin: 14px 10px; }

/* Шапка: ☰ · заголовок · срок. */
body.touch-phone .page-head { flex-wrap: wrap; gap: 4px 10px; padding: 10px 18px 8px; }
body.touch-phone .order-fresh { flex-basis: 100%; text-align: right; }
body.touch-phone .head-title { min-width: 0; }
body.touch-phone .burger {
  display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 44px; height: 44px; margin-left: -8px; border: 0; border-radius: 12px; background: transparent;
}
body.touch-phone .burger i { width: 20px; height: 2px; border-radius: 1px; background: var(--ink); }
body.touch-phone .section-title { font-size: 24px; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.touch-phone .deadline { flex: none; padding: 5px 10px; font-size: 12.5px; white-space: nowrap; }

/* Условия и метки. */
body.touch-phone .touch-cond { flex-direction: column; align-items: stretch; gap: 8px; padding: 0 18px 10px; }
body.touch-phone .touch-order-actions { align-self: flex-end; }
body.touch-phone .blank-dialog .dialog-foot { flex-wrap: wrap; }
body.touch-phone .blank-dialog .dialog-foot .btn-dark { margin-left: 0; }
body.touch-phone #consumableCountPanel {
  inset: var(--consumable-visual-top, 0px) 0 auto; height: var(--consumable-visual-height, 100dvh); box-sizing: border-box;
  align-items: stretch; overflow-y: auto; padding: 8px 12px max(8px, env(safe-area-inset-bottom));
}
body.touch-phone .consumable-dialog {
  width: min(540px, calc(100vw - 24px)); height: 100%; max-height: 100%; margin: 0 auto; overflow: hidden; border-radius: 16px;
}
body.touch-phone .consumable-dialog .dialog-head { flex: 0 0 auto; padding: 14px 16px 6px; }
body.touch-phone .consumable-dialog .dialog-body {
  flex: 1 1 auto; min-height: 0; gap: 10px; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 8px 16px 12px;
}
body.touch-phone .consumable-dialog > .dialog-foot {
  flex: 0 0 auto; flex-wrap: wrap; padding: 10px 16px max(10px, env(safe-area-inset-bottom));
  background: var(--pop); box-shadow: 0 -4px 12px oklch(0.2 0.02 60 / .08);
}
body.touch-phone .consumable-dialog .dialog-foot button { min-height: 44px; }
body.touch-phone .consumable-review button { min-height: 44px; width: 100%; }
body.is-touch .consumable-manager-head .consumable-count-back { min-height: 44px; padding: 0 10px; font-size: 13px; }
body.is-touch .consumable-manager-head .consumable-count-heading { justify-content: center; min-height: 44px; }
body.is-touch .consumable-manager-head .consumable-count-heading h2 { font-size: 18px; }
body.is-touch .consumable-manager-screen { height: 100dvh; padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }
body.is-touch .consumable-manager-head { align-items: flex-start; gap: 10px; padding: max(8px, env(safe-area-inset-top)) 12px 10px; }
body.is-touch .consumable-manager-content { gap: 10px; padding: 10px 12px 102px; }
body.is-touch .consumable-manager-scope { padding: 10px 12px; font-size: 12.5px; }
body.is-touch .consumable-manager-tabs { align-self: stretch; width: 100%; box-sizing: border-box; }
body.is-touch .consumable-manager-tabs button { flex: 1; min-height: 44px; padding: 6px 10px; }
body.is-touch .consumable-manager-list { max-height: 44dvh; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.is-touch .consumable-manager-item { min-height: 62px; padding: 7px 8px 7px 10px; gap: 8px; }
body.is-touch .consumable-manager-item .btn-line, body.is-touch .consumable-manager-item .btn-text { min-width: 82px; min-height: 46px; padding: 0 10px; }
body.is-touch .consumable-manager-search-wrap { height: 48px; }
body.is-touch .consumable-manager-search { font-size: 16px; }
body.is-touch .consumable-manager-active-summary { min-height: 18px; }
body.is-touch .consumable-manager-foot { position: fixed; right: 0; bottom: 0; left: 0; width: auto; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); background: var(--surface); box-shadow: 0 -4px 14px oklch(0.2 0.02 60 / .08); }
body.is-touch .consumable-manager-foot span { max-width: 70%; font-size: 11.5px; }
body.is-touch .consumable-manager-foot .btn-dark { min-height: 48px; }
body.is-touch .consumable-manager-retry { min-height: 48px; }

body.touch-phone .row-consumable-action { width: 44px; min-width: 44px; max-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 17px; white-space: nowrap; overflow: hidden; }
body.touch-phone .row-consumable-action::after { display: none; }
body.touch-phone .cond-summary { margin: 0; padding: 8px 12px; border-color: oklch(0.9 0.008 80); font-size: 13px; line-height: 1.35; color: oklch(0.35 0.015 60); }
body.touch-phone .cond-summary.is-static .caret { visibility: visible; }
body.touch-phone .touch-cond .chips { overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px; }
body.touch-phone .touch-cond .chips::-webkit-scrollbar { display: none; }
body.touch-phone .chip { height: 36px; padding: 0 12px; border-radius: 18px; font-size: 13px; gap: 6px; }
body.touch-phone.cond-open .calc-bar { margin: 0 18px 10px; gap: 12px; }
body.touch-phone:not(.cond-open) .calc-bar:not([hidden]) { margin: 0 18px 8px; }

/* Карточка «Перед бланком: проверки N из 4». */
body.touch-phone .touch-checks:not([hidden]) {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0 0 8px; padding: 10px 14px; border-radius: 14px;
  border: 1px solid oklch(0.88 0.04 28); background: oklch(0.975 0.015 28); text-align: left;
}
.touch-checks .dot { width: 9px; height: 9px; background: var(--bad-dot); }
.tch-text { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.tch-text b { font-weight: 700; }
.tch-sub { font-size: 12.5px; color: var(--bad-ink); }
body.touch-phone .touch-checks.is-done { border-color: oklch(0.85 0.05 150); background: oklch(0.965 0.025 150); }
body.touch-phone .touch-checks.is-done .dot { background: oklch(0.6 0.13 150); }
body.touch-phone .touch-checks.is-done .tch-sub { color: oklch(0.36 0.08 150); }

/* Список — карточки. */
body.touch-phone .table-card { margin: 0; border: 0; border-radius: 0; background: transparent; }
body.touch-phone .table-scroll { padding: 2px 12px 12px; }
body.touch-phone .thead { display: none; }
/* «+ Добавить позиции из остатков» на телефоне — в конце списка (ZK-60; раньше входа не было вовсе). */
body.touch-phone .list-after { flex-wrap: wrap; padding: 14px 12px 18px; }
body.touch-phone .row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto !important; --phone-row-areas: "name order" "stats stats"; grid-template-areas: var(--phone-row-areas);
  gap: 8px 10px; height: auto; margin-bottom: 8px; padding: 12px 12px 12px 14px; border: 0; border-radius: 14px;
  background: oklch(0.995 0.002 80); box-shadow: 0 0 0 1px oklch(0.91 0.008 80); white-space: normal;
}
body.touch-phone .row > * { display: none; border: 0 !important; }
body.touch-phone .row > .row-name-box { display: flex; grid-area: name; align-self: start; justify-content: flex-start; padding: 0; gap: 4px; }
body.touch-phone .row > .cell-order { display: grid; grid-area: order; }
body.touch-phone .row > .row-stats { display: flex; grid-area: stats; }
/* Поля учёта доступны у полки с телефона; сохраняются теми же обработчиками, что на ПК. */
body.touch-phone.set-noTare .row { grid-template-areas: var(--phone-row-areas) "fact fact"; }
body.touch-phone .row:has(.row-norm-input) { grid-template-areas: var(--phone-row-areas) "norm norm"; }
body.touch-phone.set-noTare .row:has(.row-norm-input) { grid-template-areas: var(--phone-row-areas) "fact fact" "norm norm"; }
body.touch-phone.set-noTare .row > .cell-fact,
body.touch-phone .row:has(.row-norm-input) > .row-rate {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 0;
}
body.touch-phone.set-noTare .row > .cell-fact { grid-area: fact; }
body.touch-phone .row:has(.row-norm-input) > .row-rate { grid-area: norm; }
body.touch-phone.set-noTare .row > .cell-fact::before { content: 'Факт на полке'; font-size: 12px; color: var(--ink-2); }
body.touch-phone .row:has(.row-norm-input) > .row-rate::before { content: 'Норма запаса'; font-size: 12px; color: var(--ink-2); }
body.touch-phone .row > .cell-fact .row-manual,
body.touch-phone .row > .row-rate .row-norm-input { min-width: 84px; width: 84px; height: 44px; font-size: 16px; }
body.touch-phone .row-name { font-size: 15px; font-weight: 600; line-height: 1.3; white-space: normal; }
body.touch-phone .row-name-line { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; }
body.touch-phone .row-name-line .row-name { flex: 1 1 8ch; min-width: 0; }
body.touch-phone .row-phone-menu-btn { display:flex; flex:none; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:19px; }
body.touch-phone .row-note { flex-wrap: wrap; gap: 4px 8px; line-height: 1.35; white-space: normal; }
body.touch-phone .zone-tag { font-size: 10px; line-height: 16px; }
body.touch-phone .row.is-ordered { background: oklch(0.975 0.022 150); box-shadow: 0 0 0 1px oklch(0.85 0.05 150); }
body.touch-phone .row.is-retiring, body.touch-phone .row.is-blocked { background: oklch(0.96 0.004 80); }
body.touch-phone .row:is(.is-stock-retired, .is-stop-confirmed) { background: oklch(0.96 0.004 80); }
body.touch-phone .row.is-retiring > .cell-order, body.touch-phone .row.is-blocked > .cell-order,
body.touch-phone .row.is-retiring > .row-stats, body.touch-phone .row.is-blocked > .row-stats { display: none; }
body.touch-phone .row.is-problem { background-image: repeating-linear-gradient(135deg, oklch(0.88 0.05 28) 0 2px, transparent 2px 7px); background-size: 6px 100%; background-repeat: no-repeat; }
body.touch-phone .row.is-problem > .row-name-box { background: none; }
/* Рамка — только при фокусе с клавиатуры: после касания «− / +» её нет (макет). */
body.touch-phone .row:has(:focus-visible) { box-shadow: 0 0 0 2px var(--focus); }

/* Степпер «− число +» 44×44 и под ним «= 48 шт». */
body.touch-phone .row > .cell-order {
  position: relative; grid-template-columns: 44px auto 44px; grid-template-rows: 44px auto; justify-items: center; align-items: center;
  gap: 4px 0; padding: 0; background: none !important;
}
body.touch-phone .row > .cell-order::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 44px; border-radius: 12px;
  background: oklch(0.995 0.002 80); box-shadow: 0 0 0 1px var(--line-strong);
}
body.touch-phone .row.is-ordered > .cell-order::before { background: var(--ok-band); box-shadow: 0 0 0 1px var(--ok); }
body.touch-phone .row:is(.is-stock-retired, .is-stop-confirmed) > .cell-order::before { background: oklch(0.96 0.004 80); box-shadow: 0 0 0 1px var(--line); }
body.touch-phone .touch-step { display: block; position: relative; width: 44px; height: 44px; border: 0; background: transparent; font-size: 20px; color: oklch(0.4 0.014 60); }
body.touch-phone .row-qty.row-order {
  position: relative; min-width: 44px; width: 168px; height: 44px; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important;
  text-align: center; font-size: 17px; font-weight: 700;
}
@supports (field-sizing: content) {
  body.touch-phone .row-qty.row-order { field-sizing: content; width: auto; }
}
@media (max-width: 420px) {
  body.touch-phone .row { --phone-row-areas: "name name" "order order" "stats stats"; }
  body.touch-phone .row > .cell-order { justify-self: end; }
}
body.touch-phone .row.is-ordered .row-qty.row-order { color: var(--ok-ink); }
body.touch-phone .row:is(.is-stock-retired, .is-stop-confirmed) .row-qty.row-order { color: var(--ink-3); }
body.touch-phone .order-pcs { display: block; grid-column: 1 / -1; min-height: 16px; font-size: 12.5px; font-weight: 600; color: var(--ok-ink); }
body.touch-phone .order-unit, body.touch-phone .order-dash, body.touch-phone .cell-fill-handle { display: none !important; }
body.touch-phone .row-stats { flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: oklch(0.45 0.014 60); font-variant-numeric: tabular-nums; }
.row-stats b { font-weight: 600; color: var(--ink); }
.row-stats b.is-mute { color: oklch(0.6 0.01 60); }
.row-stats b.is-bad { color: var(--bad-ink); }
.row-stats b.is-ride { color: oklch(0.4 0.08 255); }

/* Нижняя панель действия. */
body.touch-phone .touch-bar { margin: 0; gap: 12px; padding: 10px 14px 22px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface); }
body.touch-phone .tb-text b { font-size: 15px; }
body.touch-phone .tb-text span { font-size: 12px; }
body.touch-phone .tb-dark { padding: 0 18px; }
body.touch-phone .strips { margin: 0 12px 8px; }
body.touch-phone .toast { bottom: 96px; max-width: calc(100vw - 32px); }

/* «Остатки» на телефоне: свежесть сверху, строки — карточки. */
body.touch-phone .stock-manual, body.touch-phone .stock-toolbar .search,
body.touch-phone .stock-toolbar .toolbar-label, body.touch-phone .toolbar-note, body.touch-phone .st-head, body.touch-phone .st-foot { display: none; }
body.touch-phone .stock-manual.is-open { display: block; margin: 0 12px 10px; max-height: min(50dvh, 360px); overflow-y: auto; }
body.touch-phone.is-stock .stock-retired-toolbar:not([hidden]) .search { display: flex !important; }
body.touch-phone .stock-manual-block { grid-template-columns: minmax(0, 1fr); gap: 8px; }
body.touch-phone .stock-panel > .freshness:not([hidden]) { display: flex; gap: 12px; margin: 2px 12px 8px; padding: 12px 14px; border-radius: 14px; }
body.touch-phone .stock-panel > .freshness .fresh-text { flex: 1; min-width: 0; }
body.touch-phone .stock-panel > .freshness .btn-dark { height: 44px; padding: 0 14px; border-radius: 11px; }
body.touch-phone .stock-table { margin: 0 12px 12px; border: 0; background: none; }
body.touch-phone .st-row {
  grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px;
  margin-bottom: 8px; padding: 12px 12px 12px 14px; border: 0; border-radius: 14px; background: oklch(0.995 0.002 80);
  box-shadow: 0 0 0 1px oklch(0.91 0.008 80); white-space: normal;
}
/* Карточка остатка (макет): название 15/600, под ним серым где считается (или ошибка); справа число,
   под числом единица; внизу полоска и «2 дня» 12.5/600. */
body.touch-phone .st-row { grid-template-areas: "name stock" "days days" "action action"; row-gap: 8px; }
body.touch-phone .st-row > .st-action { grid-area: action; justify-content: flex-end; padding: 0; }
body.touch-phone .st-row > .st-name { grid-area: name; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0; font-size: 15px; }
body.touch-phone .st-name > .st-unit, body.touch-phone .st-name > .st-err, body.touch-phone .st-row > .st-used { display: none; }
body.touch-phone .st-title { max-width: 100%; font-weight: 600; line-height: 1.3; }
body.touch-phone .st-row .st-sub { display: block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.35; color: oklch(0.45 0.014 60); }
body.touch-phone .st-row .st-sub.is-err { color: var(--bad-ink); }
body.touch-phone .st-row .st-sub.is-unlinked { color: var(--warn-ink); }
body.touch-phone .st-row > .st-stock {
  grid-area: stock; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 2px; height: auto; padding: 0; border: 0;
  font-size: 17px; font-weight: 700;
}
body.touch-phone .st-row > .st-stock::after { content: attr(data-unit); font-size: 12px; font-weight: 400; color: oklch(0.5 0.012 60); }
body.touch-phone .st-row > .st-rate { display: none; }
body.touch-phone .st-row > .st-days { grid-area: days; gap: 10px; padding: 0; border: 0; justify-content: flex-start; font-size: 12.5px; }
body.touch-phone .st-days-text { font-size: 12.5px; font-weight: 600; color: oklch(0.45 0.014 60); }
body.touch-phone .st-days-text.is-low { color: oklch(0.45 0.12 55); }
body.touch-phone .st-bar { flex: 1; width: auto; }

/* Опрос проверок — шторкой снизу. */
.dialog-back.is-sheet { align-items: flex-end; padding: 0; }
.dialog-back.is-sheet { background: oklch(0.2 0.015 60 / .35); }
.dialog-back.is-sheet .quiz {
  width: 100%; max-width: none; max-height: 100%; border-radius: 24px 24px 0 0; padding: 14px 20px 34px;
  background: oklch(0.995 0.002 80); box-shadow: 0 -10px 30px oklch(0.2 0.02 60 / .2);
}
.quiz-grip { display: none; }
.dialog-back.is-sheet .quiz-grip { display: block; flex: none; align-self: center; width: 40px; height: 5px; border-radius: 3px; background: oklch(0.85 0.01 80); }
.dialog-back.is-sheet .quiz-close { padding: 6px 0; font-size: 14px; color: oklch(0.45 0.014 60); }
.dialog-back.is-sheet .quiz-dots i { background: oklch(0.88 0.01 80); }
.dialog-back.is-sheet .quiz-dots i.is-done { background: oklch(0.6 0.13 150); }
.dialog-back.is-sheet .quiz-dots i.is-now { background: oklch(0.27 0.015 60); }
.dialog-back.is-sheet .quiz-q { min-height: 120px; }
.dialog-back.is-sheet .quiz-acts { flex-direction: column; align-items: stretch; }
.dialog-back.is-sheet .quiz-acts .btn-dark { height: 52px; border-radius: 14px; font-size: 16px; }
.dialog-back.is-sheet .quiz-acts .btn-line { height: 48px; border-radius: 14px; border-color: oklch(0.86 0.01 80); font-size: 15px; color: oklch(0.3 0.015 60); }