/* Кабинет руководителя.
   Критерий выше любых красот: слабое зрение и трекпад без мышки.
   Крупный шрифт, высокий контраст, крупные цели, минимум прокрутки.

   Оформление 20.08.2026: фирменный стиль Gloria Pizza по брендбуку — бежевая
   бумага, приглушённый зелёный, графит; логотип из меню в шапке; заголовки
   капсом с разрядкой, как на носителях бренда. Шрифт Golos Text (бесплатный,
   с кириллицей) вместо платных Reforma Grotesk и Circe из брендбука. */

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/golos-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/golos-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --fon: #e8e4d6;          /* бумага меню, фирменный бежевый */
  --fon-karta: #f2efe4;    /* карточка светлее фона — как лист на столе */
  --tekst: #23302d;        /* фирменный графит, контраст к фону 10,8:1 */
  --tekst-vtoroy: #45524e; /* контраст к фону 6,7:1 — не бледный серый */
  --akcent: #31504a;       /* фирменный зелёный, затемнённый: белый на нём 8,8:1 */
  --akcent-temnee: #233b36;
  --akcent-svetlyy: #95ada4; /* PANTONE 5575 U — эталонный зелёный бренда */
  --latun: #a48664;          /* PANTONE 873 U — третий фирменный цвет, «под латунь» */
  --latun-svetlaya: #e2d5be;
  --latun-temnaya: #4a3c2c;
  --ramka: #b3ac96;        /* тёплая рамка в тон бумаге */
  --skoro-fon: #e2d5be;      /* светлая латунь, текст на ней 7,3:1 */
  --skoro-tekst: #4a3c2c;
  --shrift-zagolovok: 'Golos Text', -apple-system, "Segoe UI", Arial, sans-serif;
  --shrift-osnovnoy: 'Golos Text', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --shrift-metka: 'Golos Text', -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fon);
  color: var(--tekst);
  font-family: var(--shrift-osnovnoy);
  font-size: 19px;
  line-height: 1.5;
}

a { color: var(--akcent); }
a:hover { color: var(--akcent-temnee); }

.shapka {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 13px 18px;
  background: var(--akcent);
}
/* Логотип бренда в шапке. Высота 34 px — заметен, но не съедает первый экран
   телефона; на телефоне ужимается до 28 px (см. конец файла). */
.shapka-logo {
  height: 34px;
  width: auto;
  display: block;
  align-self: center;
}
.shapka-name {
  font-family: var(--shrift-zagolovok);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #ffffff;
  align-self: center;
}
.shapka-sub {
  font-family: var(--shrift-metka);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #cfdcd7;   /* контраст к зелёной шапке 6,3:1 */
}

/* Вкладки: цели не меньше 60px по высоте, разделены пунктиром — как перфорация чека */
.vkladki {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 18px;
  background: var(--fon-karta);
  border-bottom: 2px dashed var(--ramka);
}
.vkladka {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  border: 2px solid var(--ramka);
  border-radius: 6px;
  font-family: var(--shrift-osnovnoy);
  font-size: 19px;
  font-weight: 600;
  text-decoration: none;
  color: var(--tekst);
}
.vkladka:hover { border-color: var(--akcent); }
.vkladka--akt {
  background: var(--akcent);
  border-color: var(--akcent);
  color: #ffffff;
}
.skoro {
  font-family: var(--shrift-metka);
  background: var(--skoro-fon);
  color: var(--skoro-tekst);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.vkladka--akt .skoro { background: #ffffff; color: var(--akcent); }

/* «Домой» — та же кнопка, но с домиком и отбита от разделов: глаз находит её
   сразу, не вчитываясь в названия вкладок. */
.vkladka--domoy { margin-right: 6px; }
.vkladka--domoy::before { content: "⌂"; font-size: 24px; line-height: 1; }

/* Второй ряд шапки — разделы того блока, в котором человек сейчас (27.08.2026).
   Он тише первого: фон светлее, кнопки ниже. Иначе два одинаковых ряда подряд
   спорят друг с другом, и непонятно, какой из них главный. */
.vkladki--vtoroy {
  background: var(--fon);
  border-bottom: 2px solid var(--ramka);
  padding: 8px 18px;
}
.vkladki--vtoroy .vkladka {
  min-height: 46px;
  font-size: 17px;
  padding: 0 16px;
  background: var(--fon-karta);
}
.vkladki--vtoroy .vkladka--akt { background: var(--akcent); color: #ffffff; }

.glavnoe {
  max-width: 900px;
  padding: 20px 20px 40px;
}

h1 {
  font-family: var(--shrift-zagolovok);
  font-size: 29px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 10px;
  /* Капс с разрядкой — приём брендбука: так набраны заголовки в меню
     и на носителях. Само правило — выше, общее для h1 и h2.razdel. */
}
.krupno { font-size: 19px; margin: 0 0 14px; }

/* Приветствие на главной — крупно, но обычным регистром (см. index.html) */
.privet {
  font-family: var(--shrift-zagolovok);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--akcent);
  margin: 0 0 14px;
}
.pripiska { font-size: 17px; color: var(--tekst-vtoroy); }

.spisok { list-style: none; margin: 0; padding: 0; }
.spisok li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 14px 0;
  border-top: 1px solid var(--ramka);
}

.knopka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  min-width: 200px;
  padding: 0 26px;
  background: var(--akcent);
  color: #ffffff;
  border: 0;
  border-radius: 6px;
  font-family: var(--shrift-osnovnoy);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
}
.knopka:hover { background: var(--akcent-temnee); }
/* Отправка пошла: кнопку видно, но нажать нельзя — иначе повторное нажатие
   оборвёт уходящее фото (правка 25.08.2026). Серый тёмный, белый текст 6,4:1. */
.knopka:disabled,
.knopka:disabled:hover { background: #5c6763; cursor: progress; }

/* Страница входа */
.forma { max-width: 420px; margin: 0 0 20px; }
.polye { display: block; margin-bottom: 20px; }
.polye span { display: block; font-size: 19px; font-weight: 600; margin-bottom: 6px; }
/* Выпадающий список — вместе с полями ввода: сам по себе он приходит
   высотой 19 px, и пальцем в него не попасть (замер 22.08.2026). */
.polye input,
.polye select {
  width: 100%;
  min-height: 60px;
  padding: 0 16px;
  font-family: var(--shrift-osnovnoy);
  font-size: 21px;
  color: var(--tekst);
  background: #ffffff;
  border: 2px solid #566560;   /* рамка в тон зелени, контраст к фону 4,8:1 */
  border-radius: 6px;
}
.polye select:focus,
.polye input:focus,
.polye textarea:focus { outline: 3px solid var(--akcent); outline-offset: 1px; }

/* Отзывы: поля во всю ширину — текст отзыва и ответа длинный */
.forma-shirokaya { max-width: 760px; margin: 0 0 20px; }
.polye textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--shrift-osnovnoy);
  font-size: 20px;
  line-height: 1.5;
  color: var(--tekst);
  background: #ffffff;
  border: 2px solid #566560;
  border-radius: 6px;
  resize: vertical;
}
.v-ryad { display: flex; flex-wrap: wrap; gap: 0 20px; }
.v-ryad .polye { flex: 1 1 240px; }

/* Галочка «взять в работу» — крупная, чтобы попадать пальцем и трекпадом */
.vybor { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.vybor input[type="checkbox"] {
  width: 28px; height: 28px; margin: 0; flex: none;
  accent-color: var(--akcent);
}
.podrobno-tekst { font-size: 19px; color: var(--tekst-vtoroy); margin: 10px 0 0 42px; }
.oshibka {
  font-size: 20px;
  font-weight: 600;
  color: #8a1010;              /* контраст к фону 8,4:1 */
  background: #f6e2dd;
  border-left: 6px solid #8a1010;
  padding: 12px 16px;
  margin: 0 0 20px;
  border-radius: 0 6px 6px 0;
}

/* Задачи */
.udacha {
  font-size: 20px; font-weight: 600;
  color: #17532c;               /* контраст к своей подложке 7,3:1 */
  background: #dfeadd; border-left: 6px solid #17532c;
  padding: 12px 16px; margin: 0 0 20px;
  border-radius: 0 6px 6px 0;
}
/* ⚠ `.razdel` висит и на заголовках (h2), и на секциях кассы. Поэтому капс
   и цвет задаются только заголовкам: на секции они бы утащили в капс
   всё содержимое (поймано 20.08.2026 на карточках кассы). */
h1, h2.razdel, h3.razdel {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--akcent);
}
.razdel {
  font-family: var(--shrift-zagolovok);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  margin: 34px 0 14px;
}
/* Двойная линия под заголовком — как разделители в меню */
h2.razdel, h3.razdel {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--latun);
  box-shadow: 0 3px 0 -1px var(--ramka);
}
section.razdel { font-size: inherit; font-weight: 400; font-family: inherit; }

.karta {
  background: var(--fon-karta);
  border: 2px solid var(--ramka);
  border-left: 8px solid var(--ramka);
  border-radius: 4px 8px 8px 4px;
  box-shadow: 0 1px 3px rgba(28, 25, 23, .08);
  padding: 18px;
  margin-bottom: 16px;
}
.karta--srochno  { border-left-color: #a11515; }
.karta--zakryto  { border-left-color: #8a8672; }
.karta--otlozheno,
.karta--zhdet    { border-left-color: #8a6a00; }
.karta--novoe,
.karta--sdelano  { border-left-color: #17532c; }
.karta--spravka  { border-left-color: var(--akcent); }
/* Карточка блока на главной (27.08.2026): внутри неё разделы кнопками, чтобы
   попадать пальцем, а не в мелкую ссылку. Список без маркеров и с воздухом —
   строки не слипаются. */
.karta--blok { border-left-color: var(--akcent); }
.karta--blok .spisok { list-style: none; margin: 0; padding: 0; }
.karta--blok .spisok li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.karta--blok .spisok li + li { border-top: 1px dashed var(--ramka); }
.karta--blok .knopka { min-width: 210px; justify-content: center; }
.karta--blok .karta-imya a { color: inherit; }
/* Своё сообщение в чате: отличается полосой и фоном, но не «пузырём» —
   пузыри мелкие и с плохим контрастом (правка 25.08.2026). */
.karta--moyo { border-left-color: #17532c; background: #f3f1e7; }

.karta-verh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 10px; }
.karta-imya { font-size: 21px; font-weight: 600; }

/* Строка «В ответ на» — в чате (просьба Сергея 25.08.2026: «сейчас просто
   сообщения идут одно за другим и не понятно, что к чему»). Отбита слева
   полосой, как цитата в почте: глаз сразу отделяет её от самой реплики. */
.otvet-na {
  display: block;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 5px solid var(--akcent-svetlyy);
  border-radius: 0 8px 8px 0;
  background: #ece7db;
  font-size: 17px;
  line-height: 1.35;
  color: var(--tekst);                 /* к своей заливке 9,7:1 */
  text-decoration: none;
}
.otvet-na-metka {
  display: block;
  font-family: var(--shrift-metka);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #47412f;                      /* к заливке 8,2:1 */
}
.otvet-na b { margin-right: 6px; }
/* Ссылка «Не отвечать» — своей строкой, а не в хвосте цитаты: посреди чужого
   текста она читалась как его продолжение. Цель нажатия не меньше 44 px. */
.otvet-na-otmena {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 0;
  font-weight: 600;
}
.otvet-na-otmena::before { content: "✕ "; }
/* Сам текст цитаты — блоком, чтобы «Не отвечать» не приклеивалась
   к его последней строке и не читалась как часть чужой реплики. */
.otvet-na-tekst { display: block; }
.otvet-na--v-lente:hover { border-left-color: var(--akcent); background: #e4dccb; }

.chip {
  font-family: var(--shrift-metka);
  font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 10px; border-radius: 4px; white-space: nowrap;
  background: #ece7db; color: #47412f;   /* 8,9:1 к своему фону */
}
.chip--srochno   { background: #fdeaea; color: #8a1010; }
.chip--zakryto   { background: #ece7db; color: #47412f; }
.chip--otlozheno,
.chip--zhdet     { background: #f5e6be; color: #4a3600; }
.chip--novoe,
.chip--sdelano   { background: #dfeadd; color: #17532c; }

.podrobno { margin: 0 0 14px; }
.podrobno summary {
  font-size: 19px; font-weight: 600; color: var(--akcent);
  cursor: pointer; padding: 10px 0; min-height: 44px;
}
.podrobno p { font-size: 19px; margin: 0 0 10px; }

.knopka--tihaya { background: #4f5b56; }   /* белый текст 7,2:1 */
.knopka--tihaya:hover { background: #3b4642; }


/* Кто вошёл — в шапке справа */
.shapka-kto {
  margin-left: auto;
  font-family: var(--shrift-metka);
  font-size: 15px;
  font-weight: 500;
  color: #cfd9e6;              /* контраст к тёмно-синей шапке 8,2:1 */
}
.shapka-kto a { color: #ffffff; }

/* ---------------------------------------------------------------- Табель

   Вид не админ-панели, а графика смен со стойки: недели разделены линией,
   суббота и воскресенье залиты песочным во всю высоту, под каждым
   подразделением идёт строка «в смене» — то, что считают глазами. */

:root {
  /* Сетка табеля в фирменной гамме (20.08.2026): песочный выходных заменён
     на тёплый бежевый бренда, зелень смены — фирменная, холодная подложка
     «в смене» — тёплая. Цветовой код прежний, меняется только оттенок. */
  --vyhodnoy: #ddd7c0;        /* полоса выходных, темнее бумаги */
  --vyhodnoy-shapka: #cfc7ab;
  --granica-nedeli: #8a8264;  /* линия между неделями */
  --schet-fon: #dfe6df;       /* подложка строки «в смене» */
  --smena: #31504a;           /* фирменный зелёный, белая галочка 8,8:1 */
  --smena-temnee: #233b36;
  --pol: #e4d7ab;
  --pol-tekst: #443a1c;
  --plan: #2f5d8a;            /* план выходов: белая галочка на синем 6,7:1 */
  --plan-temnee: #23486b;
}

/* День: дата крупно, стрелки по краям — попадать трекпадом легко */
.den-shapka {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 0 0 16px;
}
.den-data {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 14px;
  background: var(--fon-karta);
  border: 2px solid var(--ramka);
  border-radius: 6px;
  font-size: 21px;
  line-height: 1.25;
}
.den-schet {
  font-family: var(--shrift-metka);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tekst-vtoroy);   /* 7,7:1 */
}
.knopka--strelka {
  min-width: 76px;
  width: auto;
  font-size: 28px;
  padding: 0;
}

.den-ryad {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin: 0 0 14px;
}
.den-ryad .knopka { width: auto; }
.den-vybor { display: flex; align-items: flex-end; gap: 12px; margin: 0; }
.polye--uzkoe { margin-bottom: 0; }
.polye--uzkoe input, .polye--uzkoe select {
  min-height: 52px;
  padding: 0 12px;
  font-family: var(--shrift-osnovnoy);
  font-size: 19px;
  color: var(--tekst);
  background: #ffffff;
  border: 2px solid #566560;
  border-radius: 6px;
}

/* Заголовок подразделения на экране дня — со счётчиком смены справа */
.razdel--tabel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
}
.razdel-schet {
  font-family: var(--shrift-metka);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--akcent);          /* 9,2:1 к бумаге */
  background: var(--schet-fon);
  border-radius: 4px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* Список выходов за день */
.vyhody { list-style: none; margin: 0 0 8px; padding: 0; }
.vyhod {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--fon-karta);
  border: 2px solid var(--ramka);
  border-left: 8px solid var(--ramka);
  border-radius: 4px 8px 8px 4px;
}
.vyhod--byl { border-left-color: var(--smena); }
.vyhod--pol { border-left-color: #8a6a00; }
.vyhod-imya {
  flex: 1 1 120px;
  min-width: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}
.vyhod-rol {
  display: block;
  font-family: var(--shrift-metka);
  font-size: 15px;
  font-weight: 500;
  text-transform: lowercase;
  color: var(--tekst-vtoroy);    /* 7,7:1 */
}

/* Переключатель смены: три части в одной рамке.
   Одно нажатие ставит нужное состояние, текущее видно по заливке. */
.perekluchatel {
  display: flex;
  margin: 0;
  border: 2px solid var(--akcent);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}
.chast {
  min-height: 56px;
  padding: 0 6px;
  border: 0;
  border-left: 2px solid var(--akcent);
  background: transparent;
  color: var(--akcent);              /* 11,6:1 на белом */
  font-family: var(--shrift-osnovnoy);
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;
}
.chast:first-child { border-left: 0; min-width: 56px; }
.chast:nth-child(2) { min-width: 48px; font-size: 24px; }
.chast:last-child { min-width: 86px; }
.chast:hover { background: #dcd8c8; }
.chast:focus-visible { outline: 3px solid var(--akcent); outline-offset: -3px; }
/* «Нет» подсвечено тише зелёного: взгляд должен цепляться за смены,
   а не за пустые строки — их всегда больше. */
.chast--akt { background: #ded8cd; color: #3d3830; }         /* 9,4:1 */
.chast--smena { background: var(--smena); color: #ffffff; }  /* 8,1:1 */
.chast--pol { background: var(--pol); color: var(--pol-tekst); }  /* 9,3:1 */

/* Сетка месяца: столбец с именем не уезжает при прокрутке вбок.
   Сетке разрешено выйти за общую колонку в 900px — на ноутбуке
   помещается вдвое больше дней, значит меньше прокрутки. */
.setka-obertka {
  width: calc(100vw - 40px);
  overflow-x: auto;
  border: 2px solid var(--ramka);
  border-radius: 6px;
  background: var(--fon-karta);
}
.setka { border-collapse: collapse; font-size: 15px; }
.setka th, .setka td { border: 1px solid var(--ramka); padding: 0; }
.setka-imya {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 186px;
  max-width: 186px;
  padding: 6px 10px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  background: var(--fon-karta);
}
.setka thead .setka-imya { background: #ece7db; }
.setka-den {
  min-width: 38px;
  padding: 5px 2px;
  background: #ece7db;
  font-family: var(--shrift-metka);
  font-weight: 600;
}
.setka-den--vyh { background: var(--vyhodnoy-shapka); }
.setka-chislo { display: block; font-size: 15px; color: #47412f; }   /* 8,2:1 */
.setka-nedelya { display: block; font-size: 13px; color: #47412f; }
.setka-den--vyh .setka-nedelya { font-weight: 700; }

/* Разделитель недель: линия слева от каждого понедельника.
   Селектор с именем тега — иначе его перебивает общее правило `.setka th, .setka td`. */
.setka th.setka-den--pn,
.setka td.setka-kletka--pn,
.setka td.setka-schet--pn { border-left: 4px solid var(--granica-nedeli); }

.setka-sekciya th {
  position: sticky;
  left: 0;
  padding: 7px 12px;
  text-align: left;
  font-family: var(--shrift-zagolovok);
  font-size: 18px;
  background: var(--akcent);
  color: #ffffff;                     /* 11,6:1 */
}
.setka-kletka { padding: 0; }
.setka-kletka--vyh { background: var(--vyhodnoy); }
/* План выходов (дни вперёд, с 20.08.2026) — косая штриховка поверх фона.
   Не цветом: цвет уже занят выходными, а слабому зрению оттенки различать тяжело;
   штриховка видна сразу и не спорит с песочными субботами. */
.setka-kletka--plan {
  background-image: repeating-linear-gradient(
    45deg, rgba(49, 80, 74, 0.13) 0 4px, transparent 4px 9px);
}
.setka-kletka form { margin: 0; }
.kletka {
  display: block;
  width: 100%;
  min-width: 38px;
  min-height: 40px;
  border: 0;
  background: transparent;
  font-family: var(--shrift-osnovnoy);
  font-size: 19px;
  font-weight: 700;
  color: var(--tekst);
  cursor: pointer;
}
button.kletka:hover { background: #dcd8c8; }
button.kletka:focus-visible { outline: 3px solid var(--akcent); outline-offset: -3px; }
.kletka--byl { background: var(--smena); color: #ffffff; }   /* 8,1:1 */
button.kletka--byl:hover { background: var(--smena-temnee); }
.kletka--pol { background: var(--pol); color: var(--pol-tekst); }   /* 9,3:1 */
button.kletka--pol:hover { background: #d8c894; }
/* Полоса «дни ждут подтверждения» над сеткой табеля (02.09.2026). */
.karta--zhdet { border-left-color: var(--plan); }
.podtverzhdenie { list-style: none; margin: 12px 0 0; padding: 0; }
.podtverzhdenie li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--ramka);
}
.podtverzhdenie form { margin: 0; }
.podtverzhdenie-den { font-size: 19px; font-weight: 700; }
/* «+2» рядом со сменами: сколько ещё не в зачёте. */
.setka-plan {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--plan);
}

/* План выходов — синий, а не зелёный (замечание Сергея 02.09.2026: одинаковый
   цвет плана и факта путает). Штриховка клетки под залитой кнопкой не видна,
   поэтому цвет отличается у самой галки. Белое на этом синем — 6,7:1. */
.kletka--plan.kletka--byl,
.kletka--plan.kletka--pol { background: var(--plan); color: #ffffff; }
button.kletka--plan.kletka--byl:hover,
button.kletka--plan.kletka--pol:hover { background: var(--plan-temnee); }

/* Сообщение об изменении — с кнопкой «Отменить» под рукой */
.udacha--s-otmenoy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
.udacha--s-otmenoy form { margin: 0; }
.knopka--otmena {
  min-height: 52px;
  min-width: 160px;
  width: auto;
  background: #31504a;
  font-size: 19px;
}
.knopka--otmena:hover { background: #233b36; }

/* Правки задним числом — их видно на экране, а не только в файле журнала */
.pravki { list-style: none; margin: 0 0 20px; padding: 0; }
.pravka {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--fon-karta);
  border: 2px solid var(--ramka);
  border-left: 8px solid #8a6a00;
  border-radius: 4px 8px 8px 4px;
}
.pravka-kogda {
  font-family: var(--shrift-metka);
  font-size: 16px;
  font-weight: 600;
  color: var(--tekst-vtoroy);     /* 7,7:1 */
  white-space: nowrap;
}
.pravka-tekst { flex: 1 1 240px; font-size: 19px; }
.pravka-davno {
  font-family: var(--shrift-metka);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #4a3600;                 /* 10,1:1 к своей подложке */
  background: var(--pol);
  border-radius: 4px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* Строка «в смене»: сколько человек в этот день — считают её глазами */
.setka-v-smene .setka-imya {
  background: var(--schet-fon);
  font-family: var(--shrift-metka);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--akcent);               /* 10,1:1 к своей подложке */
}
.setka-schet {
  min-width: 38px;
  padding: 5px 2px;
  text-align: center;
  background: var(--schet-fon);
  font-family: var(--shrift-metka);
  font-size: 17px;
  font-weight: 600;
  color: var(--akcent);
}
.setka-schet--vyh { background: #d3d9d2; }
.setka-v-smene td, .setka-v-smene th { border-bottom: 3px solid var(--granica-nedeli); }

.setka-itog {
  min-width: 68px;
  padding: 6px 8px;
  text-align: center;
  font-size: 16px;
  background: #f4efe4;
}

/* Меню смены: открывается у клетки, три крупные цели вместо перебора по кругу */
.menyu-smeny {
  position: absolute;
  z-index: 20;
  min-width: 232px;
  padding: 8px;
  background: var(--fon-karta);
  border: 3px solid var(--akcent);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(28, 25, 23, .28);
}
.menyu-kto {
  padding: 4px 8px 10px;
  font-family: var(--shrift-metka);
  font-size: 15px;
  font-weight: 600;
  color: var(--tekst-vtoroy);          /* 7,7:1 */
}
/* Метка «план» в шапке меню клетки: сразу видно, что день ещё не наступил. */
.menyu-plan {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 700;
  color: var(--plan);
}
.menyu-punkt {
  display: block;
  width: 100%;
  min-height: 56px;
  margin-top: 6px;
  padding: 0 14px;
  border: 2px solid var(--ramka);
  border-radius: 8px;
  background: #ffffff;
  color: var(--tekst);
  font-family: var(--shrift-osnovnoy);
  font-size: 20px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.menyu-punkt:hover { border-color: var(--akcent); background: #dcd8c8; }
.menyu-punkt:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
.menyu-smena { border-left: 10px solid var(--smena); }
.menyu-pol { border-left: 10px solid #8a6a00; }
.menyu-pusto { border-left: 10px solid #8a8672; }
/* Зачёт смены (02.09.2026): галка из синей становится зелёной и только тогда
   идёт в «Смен за месяц» и в начисление. Пункт заметнее прочих — это главное
   ежедневное действие менеджера и шефа. */
.menyu-zachest {
  border-left: 10px solid var(--smena);
  background: var(--smena);
  color: #ffffff;
}
.menyu-zachest:hover { background: var(--smena-temnee); border-color: var(--smena-temnee); }
.menyu-snyat { border-left: 10px solid var(--plan); }
.menyu-punkt--seychas {
  background: #ece7db;
  border-color: var(--akcent);
}
.menyu-punkt--seychas::after {
  content: "сейчас";
  float: right;
  font-family: var(--shrift-metka);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #47412f;                      /* 8,9:1 */
}

/* Клетка ждёт ответа сервера */
.kletka--zhdet { opacity: .5; }

/* Полоска внизу: что изменилось и кнопка «Отменить» */
.polosa {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 16px;
  background: #31504a;
  color: #ffffff;                      /* 8,8:1 */
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(28, 25, 23, .3);
  font-size: 19px;
  font-weight: 600;
}
.polosa--oshibka { background: #8a1010; }   /* белый текст 9,3:1 */
.polosa span { flex: 1 1 200px; }
.polosa-otmena {
  min-height: 48px;
  padding: 0 20px;
  border: 2px solid #ffffff;
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  font-family: var(--shrift-osnovnoy);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}
.polosa-otmena:hover { background: rgba(255, 255, 255, .16); }
.polosa-zakryt {
  min-width: 48px;
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.polosa-zakryt:hover { background: rgba(255, 255, 255, .16); }

/* День закрыт для правки: клетка не нажимается, но значение видно */
.kletka--zakryta { cursor: default; }

/* Дни, открытые этому человеку — синяя черта под числом.
   Видна только тому, у кого окно правки ограничено. */
.setka th.setka-den--otkryt { box-shadow: inset 0 -5px 0 var(--akcent); }
.oklad-metka {
  display: block;
  font-family: var(--shrift-metka);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #4a3600;
}

/* Входящие отзывы (этап 3) */
.karta-data { font-size: 18px; color: var(--tekst-vtoroy); }
.otzyv-tekst { font-size: 19px; color: var(--tekst); margin: 10px 0 16px; white-space: pre-line; }
.ryad-knopok { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ryad-knopok form { margin: 0; }
.knopka--tihaya {
  background: transparent;
  color: var(--akcent);
  border: 2px solid var(--akcent);   /* контраст текста к бумажному фону 7,7:1 */
  min-width: 160px;
}
.knopka--tihaya:hover { background: #dcd8c8; }

/* Наш ответ под отзывом гостя (история отзывов, 20.08.2026).
   Отбит полосой и подложкой — видно, где кончается гость и начинаемся мы. */
.otvet-nash {
  margin: 12px 0 4px;
  padding: 12px 16px;
  border-left: 6px solid var(--akcent);
  background: #e0ddcc;               /* текст #23302d к этой подложке — 9,9:1 */
  border-radius: 0 6px 6px 0;
}
.otvet-nash .otzyv-tekst { margin-bottom: 0; }
.otvet-nash .pripiska { margin-top: 0; }

/* Длинный отзыв на личной странице сотрудника (22.08.2026).
   Свёрнут до четырёх строк с кнопкой-ссылкой: десяток полных отзывов —
   это два десятка экранов телефона, и до кнопки «Старее» никто не дойдёт.
   Сделано на <details>, без скрипта: работает даже в старом браузере. */
.dalshe > summary { list-style: none; cursor: pointer; }
.dalshe > summary::-webkit-details-marker { display: none; }
.dalshe-znak {
  display: inline-block;
  font-size: 19px;
  font-weight: 600;
  color: var(--akcent);              /* к бумажному фону 7,7:1 */
  border-bottom: 2px solid var(--akcent);
  padding: 10px 0;
  margin-bottom: 8px;
}
.dalshe-znak--svernut { display: none; }
.dalshe[open] > summary > .dalshe-nachalo,
.dalshe[open] > summary > .dalshe-znak { display: none; }
.dalshe[open] > summary > .dalshe-znak--svernut { display: inline-block; }
.dalshe > p { margin-top: 0; }

/* Отбор в истории отзывов: кнопки в ряд по содержимому, не во всю ширину.
   Цель по высоте прежняя (48 px), контраст выбранной 8,0:1 — как у вкладок. */
.otbor { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.otbor-knopka {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border: 2px solid var(--akcent);
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  color: var(--akcent);
}
.otbor-knopka--akt { background: var(--akcent); color: #ffffff; }
.otbor-knopka:hover { background: #dcd8c8; }
.otbor-knopka--akt:hover { background: var(--akcent-temnee); color: #ffffff; }

/* Телефон: вкладки в столбик во всю ширину — попасть пальцем проще, чем в ряд */
/* ---------------------------------------------------------------- касса */

/* Событие свёрнуто: видна строка, форма открывается нажатием. При двух десятках
   событий развёрнутые карточки давали 12 экранов прокрутки на телефоне. */
.sobytie { padding: 0; }
.sobytie-verh {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;               /* стандартный треугольник убираем: рисуем свой */
}
.sobytie-verh::-webkit-details-marker { display: none; }
.sobytie-verh::after {
  content: "развернуть";
  font-family: var(--shrift-metka);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--akcent);           /* к белой карточке 11,6:1 */
  margin-left: auto;
}
.sobytie[open] .sobytie-verh::after { content: "свернуть"; }
.sobytie-verh:hover { background: #f7f3ea; }
.sobytie-chto { flex: 1 1 100%; font-size: 18px; color: var(--tekst-vtoroy); }
.sobytie > *:not(.sobytie-verh) { padding-left: 18px; padding-right: 18px; }
.sobytie > form { padding-bottom: 16px; }

/* Свои кнопки-сворачивалки у разделов «Объяснено» и «Просто видно». */
.svorachivalka {
  font-family: var(--shrift-zagolovok);
  font-size: 23px;
  font-weight: 700;
  padding: 12px 0;
  cursor: pointer;
}

/* Своя кнопка вместо стандартной «Choose File»: та по-английски и обрезается
   при увеличении экрана до 200% (проверяющий интерфейса, 20.08.2026). */
.knopka--fayl { display: inline-block; cursor: pointer; }
/* Две кнопки фото рядом: «Снять» и «Из медиатеки». На телефоне переносятся
   в столбик — обрезать подписи нельзя, слабое зрение. */
.knopki-foto { display: flex; flex-wrap: wrap; gap: 10px; }
.knopki-foto .knopka { flex: 1 1 160px; text-align: center; }
.knopka--fayl input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.imya-fayla {
  display: inline-block;
  margin-left: 12px;
  font-size: 17px;
  color: var(--tekst-vtoroy);
}
.imya-fayla--est { color: #0d5c2b; font-weight: 600; }  /* к белому 6,9:1 */

.dni { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }

/* Подсказка в пустом поле по умолчанию бледная (4,6:1 — на грани нормы),
   а у Сергея слабое зрение: поднимаем до 7,2:1. */
.polye input::placeholder,
.polye textarea::placeholder { color: var(--tekst-vtoroy); opacity: 1; }

@media (max-width: 560px) {
  body { font-size: 18px; }
  h1 { font-size: 25px; }
  /* Разделов стало семь (20.08.2026: «Домой» и «Все отзывы»). В столбик они
     съедали экран целиком — до содержимого приходилось прокручивать. Кладём
     по два в ряд: высота цели прежняя, а меню стало вдвое короче. */
  .vkladki { display: grid; grid-template-columns: 1fr 1fr; }
  .vkladka { justify-content: center; text-align: center; padding: 0 10px; }
  .vkladka--domoy { grid-column: 1 / -1; margin-right: 0; }
  .knopka { width: 100%; }

  /* Сетка на телефоне: столбец с именем занимал половину экрана — сжимаем его
     и клетки, чтобы в ширину помещалось больше дней. */
  .setka-imya { min-width: 128px; max-width: 128px; padding: 6px 8px; font-size: 14px; }
  .setka-den, .setka-schet { min-width: 34px; }
  .kletka { min-width: 34px; min-height: 38px; font-size: 18px; }
  .setka-chislo { font-size: 14px; }
  .setka-nedelya { font-size: 12px; }
  .setka-sekciya th { font-size: 16px; padding: 6px 8px; }
  .setka-itog { min-width: 56px; font-size: 15px; }
  /* Шапка с числами держится на экране. На телефоне в сетке полсотни строк:
     пока доскроллишь до своего повара, числа уезжают вверх, и галка ставится
     вслепую (замечание Сергея 02.09.2026). Сетка получает своё окно высотой
     в три четверти экрана, внутри него шапка прилипает сверху, а столбец
     с именами — слева, как и раньше. */
  .setka-obertka { width: calc(100vw - 24px); max-height: 74vh; overflow: auto; }
  .setka thead th { position: sticky; top: 0; z-index: 3; }
  .setka thead th.setka-imya { z-index: 4; }
  /* При прилипании граница шапки пропадает (так устроены слитые рамки таблиц) —
     возвращаем её тенью. */
  .setka thead th { box-shadow: inset 0 -2px 0 var(--granica-nedeli); }
  .setka thead th.setka-den--otkryt { box-shadow: inset 0 -5px 0 var(--akcent); }
  .glavnoe { padding: 16px 12px 36px; }

  /* Шапка на телефоне: логотип мельче, «Остров мечты» убран — первый экран
     должен показывать дело, а не оформление. */
  .shapka { padding: 10px 14px; gap: 2px 10px; }
  .shapka-logo { height: 26px; }
  .shapka-name { font-size: 16px; }
  .shapka-sub { display: none; }
  .privet { font-size: 23px; }
}

/* Личные ссылки сотрудников (20.08.2026): QR крупный — его наводят камерой
   с расстояния, мелкий не считывается. Поле со ссылкой во всю ширину,
   чтобы её можно было выделить одним касанием и переслать. */
.ssylka-cheloveka { margin-bottom: 18px; }
.qr { display: block; margin: 10px 0; image-rendering: pixelated; }
.pole-ssylki {
  width: 100%;
  min-height: 52px;
  padding: 0 12px;
  font-family: var(--shrift-osnovnoy);
  font-size: 17px;
  color: var(--tekst);
  background: #ffffff;
  border: 2px solid #566560;
  border-radius: 6px;
}
/* Список смен на личной странице: крупные строки, палец не промахивается. */
.spisok--smeny li { font-size: 20px; padding: 10px 0; }

/* Календарь на личной странице сотрудника (20.08.2026, замена списку смен).
   Клетки крупные — по ним не нажимают, но читать нужно с телефона в руках,
   а зрение у смотрящих разное. Числа не мельче 19px. */
.kalendar {
  width: 100%;
  max-width: 520px;
  border-collapse: collapse;
  margin: 0 0 14px;
  table-layout: fixed;
}
.kalendar-shapka {
  padding: 6px 0;
  font-family: var(--shrift-metka);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tekst-vtoroy);
}
.kalendar-shapka--vyh { color: var(--latun-temnaya); }
.kalendar-kletka {
  height: 54px;
  border: 1px solid var(--ramka);
  background: var(--fon-karta);
  text-align: center;
  vertical-align: middle;
}
.kalendar-kletka--vyh { background: var(--vyhodnoy); }
.kalendar-kletka--chuzhoy { background: transparent; border-color: transparent; }
.kalendar-chislo { display: block; font-size: 19px; font-weight: 600; }
/* Смена — фирменным зелёным, белым числом: контраст 8,8:1 */
.kalendar-kletka--smena { background: var(--akcent); border-color: var(--akcent); }
.kalendar-kletka--smena .kalendar-chislo,
.kalendar-kletka--smena .kalendar-znak { color: #ffffff; }
.kalendar-znak { display: block; font-size: 17px; line-height: 1; }
/* План — синий, как в сетке табеля у менеджера: единый язык цвета
   (02.09.2026). Штриховка поверх осталась — второй признак, кроме цвета. */
.kalendar-kletka--plan {
  background-color: var(--plan);
  border-color: var(--plan);
  background-image: repeating-linear-gradient(
    45deg, rgba(255, 255, 255, 0.28) 0 4px, transparent 4px 9px);
}
/* Сегодня — толстая рамка латунью, а не цветом: цвет уже занят сменой. */
.kalendar-kletka--segodnya { outline: 3px solid var(--latun); outline-offset: -3px; }

/* --- Вкладка «Отчёт»: итоги закрытого месяца ---------------------------
   Две колонки: статья и рубли. Числа крупные и моноширинные по цифрам —
   чтобы разряды выстраивались столбиком и сумму было видно не читая. */
.tablica-itogov { width: 100%; border-collapse: collapse; margin: 10px 0 6px; }
.tablica-itogov td {
  padding: 12px 6px;
  border-bottom: 1px solid var(--ramka);
  font-size: 19px;
  vertical-align: baseline;
}
.tablica-itogov .chislo {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Итоговые строки отчёта (EBITDA, финрезультат) — крупнее прочих. */
.tablica-itogov .stroka-itog td { font-size: 22px; font-weight: 700; }

/* --- Вкладка «Отчёт»: сравнение с прошлым месяцем -------------------- */
.tablica-itogov--sravnenie td:not(:first-child) { width: 30%; }
.shapka-itogov td {
  font-size: 17px;
  color: var(--tekst-vtoroy);
  font-weight: 600;
  padding-bottom: 4px;
}
/* Рост — не цветом, а знаком: у Сергея слабое зрение, и зелёное на бежевом
   различается хуже, чем «+13 %». Цвет только помогает, читается и без него. */
.rost {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--akcent);
  white-space: nowrap;
}
.rost--vniz { color: #a11515; }

/* Допущение — всегда видно, что число не факт (правило Сергея 20.08.2026). */
.dopushchenie {
  border-left: 6px solid var(--latun);
  background: #f0ead9;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 18px;
}
/* «Из чего сложилось» — по умолчанию свёрнуто: главное не должно тонуть. */
.podrobno { margin: 8px 0 4px; }
.podrobno > summary {
  cursor: pointer;
  font-size: 19px;
  font-weight: 600;
  padding: 14px 4px;
  color: var(--akcent);
}

/* Хвост журнала движка на вкладке «Отчёт»: показывается, когда сборка не дала
   файла. Мелким его делать нельзя — читает Сергей, поэтому 17px и полный контраст. */
.zhurnal-sborki {
  font-size: 17px;
  line-height: 1.45;
  color: var(--tekst);
  background: #efece0;
  border-left: 5px solid var(--akcent);
  padding: 12px 14px;
  margin: 10px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* Таблица сравнения на телефоне: три колонки с семизначными суммами не влезали
   в 390 px, и страница ехала вбок (замер 21.08.2026: 536 px против 390).
   Горизонтальная прокрутка у Сергея — трекпад без мышки, это брак.
   Сужаем отступы и на волосок шрифт чисел; размеры остаются крупными. */
@media (max-width: 440px) {
  /* 19/22 px не влезают даже без копеек (замер 21.08.2026: 447 при экране 390),
     поэтому на телефоне числа чуть мельче: 17 и 19. Крупнее сделать нельзя —
     поедет вбок, а горизонтальная прокрутка хуже пары точек шрифта. */
  .tablica-itogov--sravnenie td { padding: 12px 3px; font-size: 17px; }
  .tablica-itogov--sravnenie .stroka-itog td { font-size: 19px; }
  .tablica-itogov--sravnenie td:first-child { width: auto; }
  .tablica-itogov--sravnenie td:not(:first-child) { width: 33%; }
  .tablica-itogov--sravnenie .rost { font-size: 15px; }
}
/* Копейки на телефоне прячем — решение Сергея 21.08.2026: лучше без копеек,
   чем таблица шире экрана. На компьютере они видны как прежде. */
@media (max-width: 440px) {
  .tablica-itogov--sravnenie .kopeyki { display: none; }
}

/* --- Вкладка «Поставщики»: оборотка по счёту 60 -------------------------
   Вид взят у бухгалтерии (лист «Поств-товар» месячного отчёта): поставщик,
   что было должны, куплено, оплачено, долг. Числа моноширинные по цифрам,
   чтобы разряды стояли столбиком и суммы читались не вчитываясь. */
.tablica-postavshchikov { width: 100%; border-collapse: collapse; margin: 10px 0 6px; }
.tablica-postavshchikov th {
  text-align: left;
  font-size: 17px;
  color: var(--tekst-vtoroy);
  font-weight: 600;
  padding: 0 4px 6px;
  border-bottom: 2px solid var(--ramka);
}
.tablica-postavshchikov td {
  padding: 12px 4px;
  border-bottom: 1px solid var(--ramka);
  font-size: 19px;
  vertical-align: baseline;
}
.tablica-postavshchikov .chislo {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tablica-postavshchikov .pripiska { display: block; margin-top: 2px; }
.tablica-postavshchikov .stroka-itog td {
  font-size: 21px;
  font-weight: 700;
  border-bottom: none;
  border-top: 2px solid var(--ramka);
}
/* Горит — просроченная оплата. Не только цветом: слева полоса, как у карточек
   задач, иначе на бежевом фоне при слабом зрении разницу видно плохо. */
.tablica-postavshchikov .stroka-gorit td:first-child {
  border-left: 5px solid #a11515;
  padding-left: 8px;
}
/* На телефоне «Долг на начало» прячем из таблицы: четыре колонки семизначных
   сумм в 390 px не влезают. 🔴 Правка 08.09.2026 по замечанию Сергея («обороты
   и долг должны быть за один месяц: долг на начало / покупка / оплата / долг
   на конец»): цифра больше не пропадает, а уходит припиской под имя —
   на телефоне видна вся четвёрка, а не два числа из четырёх. */
@media (max-width: 560px) {
  .tablica-postavshchikov .stolbec-bylo { display: none; }
  .tablica-postavshchikov td { padding: 12px 3px; font-size: 18px; }
  .tablica-postavshchikov .stroka-itog td { font-size: 19px; }
}
/* На узком экране трёх колонок чисел всё ещё много: замер 21.08.2026 —
   464 px при экране 390, и «Долг» уезжал за край. Прячем ещё и «Оплачено»,
   а сумму оплаты показываем припиской под именем поставщика: главные числа
   (куплено и долг) остаются в столбик, страница не едет вбок. */
.tablica-postavshchikov .tolko-uzkiy,
.tablica-postavshchikov .tolko-bez-nachala { display: none; }
@media (max-width: 470px) {
  .tablica-postavshchikov .stolbec-oplacheno { display: none; }
  .tablica-postavshchikov .tolko-uzkiy { display: block; }
}
/* ⚠️ Включения приписок стоят ПОСЛЕ общего «спрятать»: иначе оно перебивает
   их по порядку в файле. Так и вышло 08.09.2026 — «долг на начало» не показался
   ни на одной ширине, поймал проверяющий интерфейса. */
@media (max-width: 560px) {
  .tablica-postavshchikov .tolko-bez-nachala { display: block; }
}

/* 🔴 Замечание Сергея 25.08.2026: «цифры сливаются в одну». На телефоне между
   соседними суммами оставалось 6 px, и «711 397» рядом с «318 888» читались как
   одно число 711 397 318 888. Разводим линией и воздухом — линия важнее отступа:
   при слабом зрении пустота между колонками не читается как граница. */
.tablica-postavshchikov td.chislo,
.tablica-postavshchikov th.chislo {
  border-left: 1px solid var(--ramka);
  padding-left: 10px;
}
/* Место под отступы берём у названия: длинные слова вроде «РУССКЕВЕЛЛЕ»
   держали колонку широкой и выталкивали суммы за край экрана. */
.tablica-postavshchikov td:first-child { overflow-wrap: anywhere; }
/* 🔴 Но у имени должен быть пол, иначе разрешение рвать слова где угодно
   съедает колонку до 105 px, и фамилия ломается посреди слова: «Григорье /
   в /  Греловский». Поймал проверяющий интерфейса 10.09.2026 на схеме
   возврата — там колонок шесть, и имени доставалось меньше всех.
   ⚠️ Сначала поставили 140 px — и таблица стала шире экрана: при 390 px
   страница поехала на 398, при 500 px — на 506, обрезалась последняя
   колонка «Долг на конец», то есть самая нужная цифра, и внизу появилась
   полоска прокрутки вбок. Поймано той же проверкой. 115 px — столько,
   чтобы самая длинная фамилия («Греловский», «ЕЛЬМАКОВА») вставала целиком,
   и при этом остаётся запас в 25 px против прежнего перебора. */
.tablica-postavshchikov td:first-child,
.tablica-postavshchikov th:first-child { min-width: 115px; }
/* 📏 Больше 115 px колонке имени на телефоне дать нельзя: замер 10.09.2026
   показал, что «АЛЕКСАНДРОВИЧ» целиком требует 178 px из 390 доступных —
   тогда суммам места не остаётся. Требования «не рвать слова» и «не пускать
   прокрутку вбок» на телефоне несовместимы, и прокрутка хуже: она прячет
   долг на конец. Поэтому не тянем ширину, а разрешаем перенос ПО СЛОГАМ,
   со знаком переноса: «Алексан-дрович» читается как текст, а «Алексан
   дрович» — как поломка. Язык страницы указан (`<html lang="ru">`),
   без него браузер слоги не расставит. */
.tablica-postavshchikov td:first-child {
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* 🔴 Второе замечание того же дня: «не вижу итого». Оно и правда стояло в хвосте
   27 строк — восьмой экран прокрутки. Теперь строка «Итого» липнет к нижнему
   краю экрана, пока таблица на виду, и садится на своё место в самом низу.
   Фон непрозрачный, иначе строки просвечивают сквозь неё; верхняя линия тенью,
   а не рамкой: у прилипшей ячейки рамка остаётся на старом месте. */
.tablica-postavshchikov .stroka-itog td {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--fon);
  box-shadow: 0 -2px 0 var(--ramka);
}

/* Ссылки «Пароль» и «Выйти» в шапке: цель нажатия была 18 px при норме 44.
   Трекпад без мышки — по такой не попасть. Текст не меняем, растим область. */
.shapka-kto a { display: inline-block; padding: 12px 6px; }

/* Возраст долга — правило Сергея 21.08.2026: больше 10 дней оранжевым,
   больше 15 красным. Красим полосой слева и лёгкой заливкой: у Сергея
   слабое зрение, и один цвет текста на бежевом различается плохо. */
.tablica-postavshchikov .stroka-vnimanie td { background: #e0bc63; }
.tablica-postavshchikov .stroka-vnimanie td:first-child {
  border-left: 7px solid #8a5000;   /* к своей заливке 5,1:1 */
  padding-left: 8px;
}
.tablica-postavshchikov .stroka-gorit td { background: #e29c90; }
.tablica-postavshchikov .stroka-gorit td:first-child { border-left-width: 7px; }
/* На цветных строках ссылка-название красим графитом и делаем жирной:
   фирменный зелёный #31504a на красной заливке давал 3,95:1 при норме 4,5.
   Графит на ней же — 6,1:1, на оранжевой — 7,5:1. */
.tablica-postavshchikov .stroka-gorit td a,
.tablica-postavshchikov .stroka-vnimanie td a {
  color: var(--tekst);
  font-weight: 700;
}
/* Приписки под именем на цветной строке — тем же графитом, что и ссылка.
   Второй серый на оранжевой заливке давал 4,49:1 при норме 4,5 (замер
   проверяющего интерфейса 10.09.2026): формально ниже нормы, а читать
   их приходится — там прячутся долг на начало и комиссия. */
.tablica-postavshchikov .stroka-gorit td .pripiska,
.tablica-postavshchikov .stroka-vnimanie td .pripiska { color: var(--tekst); }

/* Кошелёк сотрудника — чаевые по дням (задача Сергея 22.08.2026).
   Строка «день — поле для суммы»: на телефоне вводить надо быстро и одним
   пальцем, поэтому поле во всю оставшуюся ширину и высотой в кнопку. */
.spisok--koshelek li { padding: 10px 0; }
.koshelek-stroka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  width: 100%;
}
.koshelek-den {
  flex: 1 1 180px;
  font-size: 20px;
  font-weight: 600;
}
.koshelek-stroka input {
  flex: 0 0 150px;
  min-height: 60px;
  padding: 0 14px;
  font-family: var(--shrift-osnovnoy);
  font-size: 21px;
  text-align: right;
  color: var(--tekst);
  background: #ffffff;
  border: 2px solid #566560;
  border-radius: 6px;
}
.koshelek-stroka input:focus { outline: 3px solid var(--akcent); outline-offset: 1px; }
/* День ещё не наступил: смена стоит в плане, чаевых быть не может. Поле
   оставляем — человек может вписать заранее, но строка приглушена. */
.koshelek-vperedi .koshelek-den { font-weight: 400; }

/* Сводка чаевых на телефоне: три средних столбца прячем, их цифры уходят
   строкой под имя. Без этого таблица была 470 точек при экране 390 —
   «Итого» уезжало за край (замечание проверяющего интерфейса 22.08.2026). */
@media (max-width: 560px) {
  .tablica-postavshchikov .stolbec-uzkiy { display: none; }
}

/* Кнопка «Сохранить» в кошельке прилипает к низу экрана: список дней —
   это 2,6 экрана телефона, и кнопка внизу терялась. Теперь она всегда
   под рукой, а фон под ней непрозрачный, чтобы цифры не просвечивали. */
.koshelek-sohranit {
  position: sticky;
  bottom: 0;
  margin: 0 -16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--fon);
  border-top: 1px solid var(--ramka);
}
.koshelek-sohranit .knopka { width: 100%; }

/* Люди в табеле — приём, увольнение, ставка (22.08.2026).
   Строка человека: слева имя и подразделение, справа действия. На телефоне
   всё складывается в столбик — иначе кнопки уезжают за край. */
.spisok-lyudey { list-style: none; padding: 0; margin: 0 0 24px; }
.chelovek {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--ramka);
}
.chelovek-imya strong { font-size: 21px; display: block; }
.chelovek-imya .pripiska { display: block; margin-top: 2px; }
.chelovek-deystviya {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.chelovek-deystviya form { margin: 0; }
.stroka-stavki { display: flex; gap: 10px; align-items: flex-end; }
.stroka-stavki .polye--uzkoe input { width: 110px; }
/* Увольнение — единственное необратимое действие на странице, поэтому
   отдельным цветом. Белый текст на нём даёт 5,9:1 при норме 4,5:1. */
.knopka--opasno { background: #8d3b2f; }
.knopka--opasno:hover { background: #6f2e25; }
@media (max-width: 560px) {
  .chelovek { flex-direction: column; align-items: stretch; }
  .chelovek-deystviya { justify-content: space-between; }
  .knopka--opasno { width: 100%; }
}
/* Подразделения на экране «Люди» свёрнуты — иначе 87 человек подряд. */
.podrazdelenie { border-bottom: 1px solid var(--ramka); }
.podrazdelenie .spisok-lyudey { margin-bottom: 8px; }
.podrazdelenie[hidden] { display: none; }

/* Свои открытые столы на личной странице сотрудника. Плитками, а не списком:
   официант смотрит в них на ходу, и номер стола должен читаться сразу. */
.stoly {
  display: grid;
  /* По две плитки в ряд на телефоне: у официанта в смену бывает шесть столов,
     в один столбец они съедали три экрана прокрутки. */
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.stol {
  background: var(--fon-karta);
  border: 2px solid var(--ramka);
  border-left: 8px solid var(--akcent-svetlyy);
  border-radius: 4px 8px 8px 4px;
  padding: 10px 12px;
  min-height: 60px;
}
.stol-nomer {
  display: block;
  font-family: var(--shrift-zagolovok);
  font-size: 23px;
  font-weight: 600;
  color: var(--tekst);
}
.stol-summa {
  display: block;
  font-size: 21px;
  font-weight: 600;
  color: var(--akcent-temnee);
}
.stol .pripiska { display: block; margin-top: 2px; }

/* Длинный список выбора — блюда на съёмку (22.09.2026). В отличие от столов
   их под сотню и названия длинные: один столбец, своя прокрутка, чтобы форма
   не растягивалась на двадцать экранов, и шрифт чуть спокойнее. */
.stoly--spisok {
  grid-template-columns: 1fr;
  max-height: 58vh;
  overflow-y: auto;
  padding-right: 4px;
}
.stoly--spisok .stol-nomer { font-size: 20px; line-height: 1.25; }
.stoly--spisok .stol { min-height: 56px; }

/* Выбор стола в заявке на скидку: нажимается вся плитка, а не кружок радио —
   пальцем в смену по кружку не попасть. */
.stol--vybor { display: block; cursor: pointer; position: relative; padding-left: 44px; }
.stol--vybor input[type="radio"] { position: absolute; left: 12px; top: 14px; width: 24px; height: 24px; }
.stol--vybor:has(input:checked),
.stol--vybran {
  border-color: var(--akcent);
  border-left-color: var(--akcent);
  background: #dfe7e2;
}
.karta--sdelano { border-left-color: #17532c; }

/* Фото в заявке на скидку: документ должен читаться с телефона без
   увеличения, поэтому снимок крупный, во всю ширину карточки. */
.foto-zayavki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.foto-zayavki a { display: block; text-decoration: none; }
.foto-zayavki img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  background: #ffffff;
  border: 2px solid var(--ramka);
  border-radius: 6px;
}
.foto-zayavki .pripiska { display: block; margin-top: 4px; }

/* Состав заказа под плиткой стола — свёрнут, разворачивается нажатием. */
.zakaz { margin-top: 8px; }
.zakaz summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--akcent);
  cursor: pointer;
}
.zakaz-spisok { list-style: none; margin: 4px 0 0; padding: 0; }
.zakaz-spisok li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--ramka);
  font-size: 17px;
}
.zakaz-chto { flex: 1 1 auto; }
.zakaz-summa { flex: none; font-weight: 600; }
/* Раскрытый заказ занимает всю ширину: в половине экрана названия блюд рвутся
   по словам, а сумма вылезает за плитку (замер 22.08.2026). */
.stol:has(details[open]) { grid-column: 1 / -1; }
/* Подстраховка для старых браузеров, где :has не работает: сумма переносится
   под название, а не обрезается. */
.zakaz-spisok li { flex-wrap: wrap; }
.zakaz-chto { flex: 1 1 65%; }

/* Заявка пришла позже самой скидки — не подтверждение, а вопрос.
   Жёлтая полоса: заметно, но не тревога. */
.zhdet-vnimaniya {
  font-size: 19px;
  background: #f5e6be;
  color: #4a3600;
  border-left: 8px solid #8a6a00;
  border-radius: 4px 8px 8px 4px;
  padding: 12px 14px;
  margin: 10px 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   ЗАДАЧИ — вид переделан 27.08.2026 по замечанию Сергея («длинная простыня,
   неинформативная, архаичная»). Устроено как в живых планировщиках:
   одна задача — одна строка, срочное вверху, сделанное за кнопкой.
   Под Сергея: цель нажатия не меньше 52px, шрифт крупный, серого нет. */

/* Подвкладки «чьи задачи» — со счётчиком незакрытого. */
.podvkladki {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.podvkladka {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 18px;
  border: 2px solid var(--ramka);
  border-radius: 6px;
  background: var(--fon-karta);
  font-family: var(--shrift-osnovnoy);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  color: var(--tekst);
}
.podvkladka--akt { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.schetchik {
  display: inline-block;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 13px;
  background: var(--ramka);
  color: var(--tekst);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.podvkladka--akt .schetchik { background: #fff; color: var(--akcent); }
.razdel .schetchik { margin-left: 10px; }

/* Заголовок группы срочности: цветная полоса слева вместо значков в тексте. */
.razdel--srochno   { border-left: 6px solid #a11515; padding-left: 12px; }
.razdel--novoe     { border-left: 6px solid #17532c; padding-left: 12px; }
.razdel--otkryto   { border-left: 6px solid var(--akcent); padding-left: 12px; }
.razdel--zhdet,
.razdel--otlozheno { border-left: 6px solid #8a6a00; padding-left: 12px; }
.razdel--sdelano,
.razdel--zakryto   { border-left: 6px solid #8a8672; padding-left: 12px; }

/* Сам список дел. Строки разделены линией — так глаз держит ряд. */
.dela { list-style: none; margin: 0 0 26px; padding: 0; }
.delo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ramka);
}
.delo-otmetka { flex: 0 0 auto; margin: 0; padding-top: 2px; }

/* Галка — крупный квадрат, а не мелкий чекбокс: трекпадом и пальцем
   попадать одинаково легко. */
.galka {
  width: 30px;
  height: 30px;
  border: 2px solid var(--ramka);
  border-radius: 6px;
  background: var(--fon-karta);
  font-size: 19px;
  line-height: 1;
  color: var(--akcent);
  cursor: pointer;
}
.galka:hover { border-color: var(--akcent); }
.galka--stoit { background: var(--akcent); border-color: var(--akcent); color: #fff; }

.delo-tekst { flex: 1 1 auto; min-width: 0; }
.delo-imya {
  display: block;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
}
/* Тема — приписка, но НЕ бледная: у Сергея слабое зрение, серый по светлому
   он не читает. Отличается размером и жирностью, а не яркостью. */
.delo-tema {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 600;
  color: var(--akcent);
}
.delo--zakryto .delo-imya,
.delo--sdelano .delo-imya { text-decoration: line-through; }

/* Подробности раскрываются прямо в строке — не уводят на другую страницу. */
.delo-podrobno > summary { cursor: pointer; list-style: none; }
.delo-podrobno > summary::-webkit-details-marker { display: none; }
.delo-podrobno > summary::after {
  content: "▾ подробнее";
  display: inline-block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--akcent);
}
.delo-podrobno[open] > summary::after { content: "▴ свернуть"; }
.delo-podrobno p { margin: 8px 0 0; font-size: 17px; line-height: 1.5; }

@media (max-width: 640px) {
  .podvkladki { display: grid; grid-template-columns: 1fr 1fr; }
  .podvkladka { justify-content: center; }
  .delo-imya { font-size: 19px; }
}


/* Кнопки разделов внутри блока на главной (27.08.2026): только кнопки,
   без приписок — Сергей просил убрать с главной всё, что ниже них. */
.knopki-bloka {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
}
.knopki-bloka .knopka { flex: 1 1 210px; justify-content: center; }

/* Постановка задачи шефу и менеджерам — свёрнута, пока не нужна. */
.postanovka { margin: 0 0 18px; }
.postanovka > summary {
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  color: var(--akcent);
  padding: 10px 0;
}
.postanovka form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.postanovka .pole {
  flex: 1 1 320px;
  min-height: 52px;
  padding: 0 14px;
  font-family: var(--shrift-osnovnoy);
  font-size: 19px;
  color: var(--tekst);
  background: #ffffff;
  border: 2px solid #566560;
  border-radius: 6px;
}
.postanovka .pole:focus { outline: 3px solid var(--akcent); outline-offset: 1px; }
.srochno-vybor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
}
.srochno-vybor input { width: 24px; height: 24px; }

@media (max-width: 640px) {
  .knopki-bloka { display: grid; grid-template-columns: 1fr; }
  .postanovka .pole { flex: 1 1 100%; }
}

/* ================================================================ БЕСЕДА
   Вид чата, «Заказа товаров» и «Техника» — как в вотсапп и телеграме.
   Задача Сергея 29.08.2026: «можешь сделать все наши чаты похожими на чаты
   в вотсапп или ТГ? роли, возможности и права не менять, только визуал…
   как-то кондово это выглядит и не удобно/непривычно».

   ⚠️ 25.08.2026 пузыри уже пробовали и отклонили — «мелкие и с плохим
   контрастом». Здесь это учтено: пузырь до 88 % ширины (а не узкий),
   текст 19 точек (как везде в кабинете), тёмный графит на светлой заливке.
   Замеры контраста — в базе знаний проекта. */

.beseda-zagolovok { margin-bottom: 4px; }

/* Участники — строкой, как подпись группы в мессенджере. Раньше на их месте
   стоял абзац в пять строк, и разговор начинался только под ним. */
.beseda-uchastniki {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--tekst-vtoroy);        /* 6,7:1 к фону */
}
.beseda-spravka { margin-bottom: 14px; }

.beseda {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

/* Плашка дня посередине — «сегодня, 29 августа». */
.den-metka { text-align: center; margin: 18px 0 8px; }
.den-metka:first-child { margin-top: 4px; }
.den-metka span {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 18px;
  background: var(--akcent);
  color: #ffffff;                    /* 8,8:1 к заливке */
  font-family: var(--shrift-metka);
  font-size: 16px;
  font-weight: 600;
}

.puzyr-ryad { display: flex; justify-content: flex-start; }
.puzyr-ryad--moyo { justify-content: flex-end; }
/* Реплики одного человека подряд стоят стопкой, как в мессенджере. */
.puzyr-ryad--prodolzhenie { margin-top: -4px; }

.puzyr {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .10);
}
.puzyr--chuzhoy {
  background: #faf8f0;
  border: 1px solid var(--ramka);
  border-bottom-left-radius: 6px;
}
/* Своё — справа и зеленоватое. Заливка светлая намеренно: тёмный пузырь
   с белым текстом читается хуже при слабом зрении. */
.puzyr--moyo {
  background: #d9e8dc;
  border: 1px solid #9dbaa6;
  border-bottom-right-radius: 6px;
}
.puzyr-ryad--prodolzhenie .puzyr--chuzhoy { border-top-left-radius: 8px; }
.puzyr-ryad--prodolzhenie .puzyr--moyo { border-top-right-radius: 8px; }

.puzyr-imya {
  font-size: 17px;
  font-weight: 700;
  color: var(--akcent);
  margin-bottom: 2px;
}
.puzyr-tekst {
  margin: 2px 0 0;
  font-size: 19px;
  line-height: 1.45;
  overflow-wrap: anywhere;           /* длинная ссылка не рвёт пузырь */
}
.puzyr-sterto { margin: 6px 0 0; font-size: 17px; color: var(--tekst-vtoroy); }

/* Цитата «в ответ на» — компактнее прежней: в пузыре ей нужна одна строка,
   а не блок в три. */
.citata {
  display: block;
  margin: 4px 0 8px;
  padding: 8px 12px;
  border-left: 4px solid var(--akcent);
  border-radius: 0 10px 10px 0;
  background: rgba(49, 80, 74, .10);
  color: var(--tekst);
  font-size: 17px;
  line-height: 1.35;
  text-decoration: none;
}
.citata:hover { background: rgba(49, 80, 74, .18); }
.citata-imya {
  display: block;
  font-family: var(--shrift-metka);
  font-size: 16px;
  font-weight: 700;
  color: var(--akcent);
}
.citata-tekst {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.puzyr-foto { margin-top: 10px; }
.puzyr-foto img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
/* Один снимок не должен занимать весь экран: в мессенджере фотография
   в переписке ограничена по высоте, а не разворачивается во весь рост.
   Целиком снимок открывается нажатием, в отдельной вкладке. */
.puzyr-foto:not(.puzyr-foto--setka) img { max-height: 360px; width: auto; }
.puzyr-foto--setka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.puzyr-foto--setka img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.puzyr-skachat { margin: 8px 0 0; font-size: 17px; }
.puzyr-skachat a { font-weight: 600; }
.puzyr-skachat-po-odnomu { display: inline-block; margin-left: 10px; color: var(--tekst-vtoroy); }
.puzyr-skachat-po-odnomu a { padding: 0 4px; }

/* Низ пузыря: время и действия. В мессенджере «ответить» и «убрать» прячут
   под долгое нажатие — у нас они видны всегда: слабое зрение и трекпад,
   спрятанная цель хуже непривычного вида. */
.puzyr-niz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 8px;
}
.puzyr-niz form { margin: 0; }
.puzyr-vremya {
  font-family: var(--shrift-metka);
  font-size: 15px;
  color: var(--tekst-vtoroy);
  margin-right: auto;                /* время слева, действия прижаты вправо */
}
.puzyr-deystvie {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 20px;
  background: rgba(49, 80, 74, .12);
  color: var(--akcent);
  font-family: var(--shrift-osnovnoy);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.puzyr-deystvie:hover { background: rgba(49, 80, 74, .22); color: var(--akcent-temnee); }
.puzyr-deystvie--ubrat { color: #8a1010; background: rgba(138, 16, 16, .10); }
.puzyr-deystvie--ubrat:hover { background: rgba(138, 16, 16, .18); color: #8a1010; }

/* --------------------------------------------------------- строка ввода
   Внизу и «липкая»: при прокрутке остаётся на месте. Подписи над полем нет
   намеренно — прямая просьба Сергея 29.08.2026: «а зачем поле? в мессенджерах
   его ведь нет». */
.pisalka {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 0 -20px -40px;
  padding: 10px 20px 14px;
  background: var(--fon);
  border-top: 2px solid var(--ramka);
}
.pisalka-ryad {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}
/* Строка состояния у ввода (28.09.2026, «чат почини»): отправляю / не отправлено /
   отправлено / черновик. Стоит прямо над полем — там, куда человек смотрит,
   а не наверху страницы. Цвета — те же, что у `.udacha` и `.oshibka`. */
.pisalka-status {
  margin: 0 0 8px;
  padding: 10px 14px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  border-radius: 0 6px 6px 0;
  border-left: 6px solid #3b3b3b;
  background: #ececec;
  color: #1f1f1f;                /* контраст 14:1 */
}
.pisalka-status[hidden] { display: none; }
.pisalka-status--oshibka { color: #8a1010; background: #f6e2dd; border-left-color: #8a1010; }
.pisalka-status--ok { color: #17532c; background: #dfeadd; border-left-color: #17532c; }
.pisalka-status--chernovik { color: #5c3a00; background: #fbecc8; border-left-color: #8a5a00; }
.pisalka-otpravit:disabled { opacity: .55; }

/* Обёртка нужна скрипту `foto.js`, а на раскладку влиять не должна. */
.pisalka .knopki-foto { display: contents; }

.pisalka-krug {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--ramka);
  background: #ffffff;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}
.pisalka-krug:hover { border-color: var(--akcent); }
/* Значки нарисованные, а не эмодзи: эмодзи рисует шрифт устройства, и на части
   телефонов вместо камеры выходит пустой квадрат. */
.pisalka-krug svg { width: 26px; height: 26px; fill: var(--akcent); pointer-events: none; }
.pisalka-krug svg .dyrka { fill: #ffffff; }
.pisalka-otpravit svg { fill: #ffffff; width: 24px; height: 24px; }
.pisalka-krug input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.pisalka-otpravit {
  background: var(--akcent);
  border-color: var(--akcent);
  color: #ffffff;
  font-size: 21px;
  padding: 0;
}
.pisalka-otpravit:hover { background: var(--akcent-temnee); border-color: var(--akcent-temnee); }
.pisalka-otpravit:disabled { opacity: .55; }

.pisalka-pole {
  flex: 1 1 160px;
  min-width: 0;
  /* Ровно в высоту круглой кнопки: при `rows=1` длинная подсказка
     переносилась на вторую строку и обрезалась. */
  min-height: 52px;
  max-height: 220px;
  padding: 12px 18px;
  border: 2px solid var(--ramka);
  border-radius: 26px;
  background: #ffffff;
  color: var(--tekst);
  font-family: var(--shrift-osnovnoy);
  font-size: 19px;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
}
.pisalka-pole:focus { outline: 3px solid var(--akcent); outline-offset: 1px; }

/* Подпись «фото выбрано» — своей строкой под полем и только когда есть что
   показать: в пустом виде она занимала бы место зря. */
.pisalka .imya-fayla { flex-basis: 100%; order: 9; font-size: 17px; display: none; }
.pisalka .imya-fayla--est { display: block; }

.pisalka-citata {
  position: relative;
  margin: 0 0 8px;
  padding: 8px 44px 8px 12px;
  border-left: 4px solid var(--akcent);
  border-radius: 0 10px 10px 0;
  background: #ece7db;
  font-size: 17px;
  line-height: 1.35;
}
.pisalka-citata-otmena {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20px;
  text-decoration: none;
}
.pisalka-citata-otmena:hover { background: rgba(49, 80, 74, .15); }

@media (max-width: 700px) {
  .puzyr { max-width: 92%; }
  .pisalka { margin: 0 -12px -36px; padding: 8px 12px 12px; }
  .pisalka-krug { width: 48px; height: 48px; font-size: 21px; }
}

/* Беседа внутри карточки (обсуждение разбора отзыва). Та же, что в чате,
   но без липкой строки ввода: карточек на экране много, и прилипнуть
   к низу должна была бы каждая. */
.beseda--v-karte { margin: 10px 0 14px; }
.beseda--v-karte .puzyr { max-width: 92%; }
.pisalka--v-karte {
  position: static;
  margin: 0;
  padding: 0;
  background: transparent;
  border-top: 0;
}

/* ------------------------------------------------------------- СТОП-ЛИСТ
   Заведён 29.08.2026. Главное на карточке — название позиции и время,
   которое она уже вне продажи: официант смотрит её на бегу, между столами. */
.karta--stop { border-left-color: #a11515; }

.stop-taymer {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f3e2e2;
  color: #7a1010;              /* 7,4:1 на этом фоне */
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
}

/* Поиск по меню: позиций больше трёхсот, и без него это список на весь экран. */
.stop-poisk { width: 100%; }

.stop-spisok {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
/* Позиция — крупная кнопка: пальцем в неё надо попадать с первого раза. */
.stop-poziciya {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  min-height: 56px;
}
.stop-poziciya .pripiska { color: inherit; opacity: .8; font-size: 15px; }
.stop-poziciya-imya { font-size: 19px; font-weight: 600; }
/* Скрытая позиция должна исчезать: у `.knopka` стоит свой `display`,
   и обычного `hidden` браузеру мало — список выходил на весь экран целиком
   (увидено на первом же снимке 29.08.2026). */
.stop-poziciya[hidden], .stop-pusto[hidden], .stop-podskazka[hidden] { display: none; }

.stop-vernuli { list-style: none; margin: 10px 0 0; padding: 0; }
.stop-vernuli li { padding: 10px 0; border-top: 1px dashed var(--ramka); }
.stop-vernuli li .pripiska { display: block; }

/* Стоп-лист на личной странице официанта: только чтение, без кнопок. */
.stop-svoi { list-style: none; margin: 0; padding: 0; }
.stop-svoi li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px dashed var(--ramka);
  font-size: 19px;
}
.stop-svoi li:first-child { border-top: 0; }
.stop-svoi .stop-imya { font-weight: 600; }

/* ================================================== КНОПКА «НАЗАД» (29.08.2026)
   Задача Сергея: на айфоне назад возвращаются жестом «палец слева направо»,
   на андроиде такого жеста нет — приходится тянуться к системным кнопкам,
   а в длинном чате или ленте кнопка «Домой» осталась далеко наверху.
   Поэтому кнопка плавающая: внизу слева, всегда на экране.
   Цвет — фирменный зелёный, белое на нём 8,8:1. Высота 52px, как у вкладок:
   цель нажатия не мельче остальных. */
.nazad {
  position: fixed;
  left: 12px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px 0 16px;
  border: 2px solid var(--akcent-temnee);
  border-radius: 26px;
  background: var(--akcent);
  color: #ffffff;
  font-family: var(--shrift-osnovnoy);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(35, 48, 45, .32);
}
/* Обойти нечем — на узком телефоне кнопки идут во всю ширину — тогда кнопка
   сжимается в кружок со стрелкой (29.08.2026). Она остаётся на экране, но
   закрывает полоску шириной в палец, а не половину чужой кнопки. */
.nazad--uzkaya { padding: 0; width: 52px; justify-content: center; }
.nazad--uzkaya .nazad-slovo { display: none; }
.nazad--uzkaya svg { width: 26px; height: 26px; }

.nazad:hover { background: var(--akcent-temnee); color: #ffffff; }
.nazad:active { transform: translateY(1px); }
.nazad svg { width: 22px; height: 22px; fill: #ffffff; pointer-events: none; }

/* Отступ под кнопкой — чтобы она не закрывала собой последнюю строку.
   Класс ставит скрипт `nazad.js`: значит на страницах без кнопки лишней
   пустоты внизу не появляется. */
.s-nazadom .glavnoe { padding-bottom: 96px; }

/* ============================================ ТАБЛИЦА ПО СТРОКАМ ОПУ (29.08.2026)
   Вкладка «Отчёт» показывает те же статьи и в том же порядке, что бланк ОПУ —
   задача Сергея: «чтоб было всё знакомо». Поэтому здесь не украшательство,
   а разметка смысла: заголовок раздела, подстрока, пометка «оценка». */
.opu-razdel td {
  padding-top: 22px;
  font-family: var(--shrift-zagolovok);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--akcent);          /* на бумажном фоне 6,9:1 */
  border-bottom: 2px solid var(--akcent);
}
/* Подстрока — как в бланке: с отступом и тише основной. Не бледная:
   контраст к фону 6,7:1, это читаемо (слабое зрение — критерий выше красот). */
.opu-pod td:first-child { padding-left: 26px; color: var(--tekst-vtoroy); }
.opu-pod td { color: var(--tekst-vtoroy); }

/* Пометка «оценка» — рядом с названием статьи, а не в колонке чисел:
   в колонке `.chislo` стоит nowrap, и слово разносило бы таблицу вбок. */
.metka-ocenka {
  display: inline-block;
  font-family: var(--shrift-metka);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--skoro-fon);
  color: var(--skoro-tekst);     /* 7,3:1 */
  white-space: nowrap;
}
@media (max-width: 640px) {
  .opu-razdel td { padding-top: 18px; font-size: 14px; }
  .metka-ocenka { font-size: 12px; padding: 1px 5px; }
  .opu-pod td:first-child { padding-left: 16px; }
}

/* 🔴 Поймано живой проверкой 29.08.2026: с длинными названиями статей ОПУ
   таблица в три колонки не влезла в телефон — страница поехала вбок
   (406 точек при экране 390). Поэтому на узком экране третья колонка
   («тот же отрезок прошлого месяца») прячется, а сравнение остаётся значком
   роста прямо в строке — он стоит у каждой строки, посчитанной фактом.
   На компьютере колонка на месте. */
@media (max-width: 640px) {
  .tablica-opu td:nth-child(3) { display: none; }
  .tablica-opu td:first-child { width: auto; overflow-wrap: anywhere; }
  .tablica-opu td:not(:first-child) { width: 40%; }
  .tablica-opu .opu-razdel td { display: table-cell; }
}

/* 🔵 08.09.2026: добавлена четвёртая колонка — тот же месяц прошлого года.
   На телефоне она прячется по той же причине, что и третья: две колонки
   сравнения рядом с названием статьи в 390 точек не встают.
   Значок «г/г» стоит у числа текущего месяца и виден везде: в самой колонке
   прошлого года такой процент читался бы как «прошлый год вырос на 48 %»,
   хотя это рост нынешнего месяца к нему. Здесь же он рядом с обычным
   процентом к прошлому месяцу и подписан, что с чем сравнивается. */
@media (max-width: 640px) {
  .tablica-opu td:nth-child(4) { display: none; }
}

/* Шрифт таблицы ОПУ чуть мельче обычного (просьба Сергея 29.08.2026): статей
   много, и каждая экономленная точка — это меньше прокрутки. Ниже 16 не идём:
   слабое зрение — критерий выше плотности. */
@media (max-width: 640px) {
  .tablica-opu td { font-size: 16px; padding: 10px 3px; }
  .tablica-opu .stroka-itog td { font-size: 18px; }
  .tablica-opu .opu-razdel td { font-size: 13px; }
}
/* Телефон в горизонтали (примерно 700–900 точек) — места хватает на все три
   колонки, поэтому «тот же отрезок прошлого месяца» возвращается сам.
   Просьба Сергея 29.08.2026: «когда телефон поворачиваю по горизонтали —
   столбцов можно больше помещать». */
@media (min-width: 641px) and (max-width: 900px) {
  .tablica-opu td { font-size: 16px; padding: 10px 4px; }
  .tablica-opu .stroka-itog td { font-size: 18px; }
  .tablica-opu .kopeyki { display: none; }
}

/* ── Лист начислений и кредиторки (30.08.2026) ─────────────────────────────
   Слово Сергея: «в начислениях дату цифрами, цифры в суммах крупнее».
   Слабое зрение — цифры на этой странице главное, а не подписи месяцев. */
.pole-summy {
  width: 8.5em;
  padding: .35em .4em;
  text-align: right;
  font-variant-numeric: tabular-nums;   /* цифры одной ширины — колонка ровная */
}
.pole-summy--krupno {
  font-size: 1.25em;
  font-weight: 600;
}
.summa-krupno {
  font-size: 1.25em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------- Заявка на продукты (30.08.2026)
   Тот же приём, что в стоп-листе: позиций больше двух сотен, и списком
   на телефоне это не пролистать. Отличие одно — выбрав позицию, человек
   остаётся на той же странице и вписывает количество, поэтому список
   сворачивается, а не остаётся под руками. */
.produkty-poisk { width: 100%; }

.produkty-spisok {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.produkty-poziciya {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  min-height: 56px;
}
.produkty-poziciya .pripiska { color: inherit; opacity: .8; font-size: 15px; }
.produkty-poziciya-imya { font-size: 19px; font-weight: 600; }
/* У `.knopka` свой `display`, поэтому обычного `hidden` браузеру мало —
   тот же урок, что со стоп-листом 29.08.2026. */
.produkty-poziciya[hidden], .produkty-pusto[hidden],
.produkty-podskazka[hidden], .produkty-spisok[hidden],
.produkty-vybrano[hidden], .produkty-sorta[hidden] { display: none; }

/* Выбранная позиция: количество, сорт, срочность — три вещи на экране,
   и ничего больше. Свободных комментариев в форме нет намеренно
   (решение Сергея 29.08.2026: «усложнят набор»). */
.produkty-vybrano {
  border: 2px solid var(--akcent);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
/* Название выбранной позиции — главное на этом экране: человек должен
   видеть, что именно он сейчас заказывает, не вчитываясь. */
.produkty-vybrano-imya {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
}
.produkty-kolvo { width: 100%; font-size: 20px; }
/* Сорта — в ряд, а не столбиком во всю ширину: их два-три, и растянутые
   кнопки заставляли бы прокручивать экран ради галочки «срочно». */
.produkty-sorta-knopki { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.produkty-sorta-knopki .knopka { width: auto; flex: 0 1 auto; }

.produkty-istoriya { list-style: none; margin: 10px 0 0; padding: 0; }
.produkty-istoriya li { padding: 10px 0; border-top: 1px dashed var(--ramka); }

/* Строка «срочно» — во всю ширину: попадать пальцем надо в любое её место,
   а не в сам квадратик чекбокса. */
.produkty-srochno {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 2px solid var(--ramka);
  border-radius: 10px;
  font-size: 18px;
  line-height: 1.35;
  cursor: pointer;
}
.produkty-srochno input { width: 26px; height: 26px; flex: 0 0 auto; }
.produkty-srochno:hover { border-color: var(--akcent); }

/* Выбор цеха — два коротких переключателя в ряд. */
.produkty-ceha { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.produkty-ceha .knopka { width: auto; flex: 0 1 auto; min-width: 130px; }

/* Снимки к строке заявки на хозтовары. Меньше, чем в заявках на скидку:
   там снимок — доказательство и его разглядывают, здесь подсказка «вот такую
   же упаковку», а строк в заявке бывает два десятка. Крупный кадр заставлял бы
   прокручивать экран ради каждой. Нажатие открывает снимок целиком. */
.hozy-snimki {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}
.hozy-snimki a { display: block; line-height: 0; }
.hozy-snimki img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  background: #ffffff;
  border: 2px solid var(--ramka);
  border-radius: 6px;
}

/* Кнопка «Скачать в Excel» под заявкой. Не во всю ширину: главное действие
   здесь — «Передать», и одинаково крупные кнопки рядом сбивают с толку. */
.skachat-zayavku { margin: 14px 0 6px; }
.skachat-zayavku .knopka { width: auto; display: inline-block; }

/* «Пора заказывать» — позиция, которую давно не возили. Отмечена рамкой,
   а не только цветом: у Сергея слабое зрение, и одним оттенком отличие
   теряется. Заливка мягкая — это подсказка, а не тревога. */
.produkty-poziciya--pora {
  border-color: var(--akcent);
  border-width: 3px;
  background: #FBF3E4;
}

/* ── Закрытые месяцы на вкладке «Отчёт» (01.09.2026) ───────────────────────
   Месяцы копятся, поэтому каждый — сворачиваемый блок: свежий раскрыт,
   прежние сложены. Иначе страница растёт на экран телефона с каждым месяцем.
   Область нажатия крупная (18px по вертикали): Сергей работает с трекпада
   и с телефона, мелкие цели ему неудобны. */
.mesyac-zakrytyy {
  background: var(--fon-karta);
  border: 1px solid var(--ramka);
  border-radius: 10px;
  margin: 0 0 10px;
}
.mesyac-zakrytyy > summary {
  cursor: pointer;
  padding: 18px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  color: var(--tekst);
}
.mesyac-zakrytyy > summary .krupno { margin: 0; font-size: 20px; }
/* Итог месяца прямо в заголовке: главное видно, не раскрывая. */
/* 🔧 28.09.2026: на телефоне закрытый месяц уезжал вбок (замер на 390 px —
   страница 409). Виновников двое: «Финансовый результат за месяц …» одной
   неразрывной строкой в заголовке (379 px) и таблица — ширина 100 % плюс
   отступы по 16 px по бокам. Шрифт не трогаем: подпись переносится по словам,
   а число держится целиком. */
.mesyac-zakrytyy .pripiska-itog {
  font-size: 17px;
  color: var(--tekst-vtoroy);
}
.mesyac-zakrytyy .pripiska-itog-chislo { white-space: nowrap; }
.mesyac-zakrytyy > .tablica-itogov { width: calc(100% - 32px); }
.mesyac-zakrytyy[open] > summary {
  border-bottom: 1px solid var(--ramka);
  background: var(--latun-svetlaya);
  border-radius: 10px 10px 0 0;
}
.mesyac-zakrytyy[open] > summary .pripiska-itog { color: var(--latun-temnaya); }
.mesyac-zakrytyy > :not(summary) { margin-left: 16px; margin-right: 16px; }
.mesyac-zakrytyy > :last-child { margin-bottom: 14px; }

/* Премии, отпускные и штрафы (09.09.2026). Поле суммы делаем крупным
   и широким: вводить эти цифры будут с телефона, а мелкое поле в узком
   столбце — промах пальцем и чужая строка. */
.pole-summy {
  width: 100%;
  max-width: 120px;
  padding: 8px 6px;
  font-size: 19px;
  text-align: right;
  border: 1px solid var(--ramka);
  border-radius: 6px;
  background: var(--fon-polya, #fff);
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.pole-summy:focus { outline: 2px solid var(--akcent, #1c6b4a); outline-offset: 1px; }
/* На телефоне семь столбцов не влезают: прячем то, что и так видно в самом
   табеле, — смены и начисление по сменам. Остаются имя, три поля и итог. */
@media (max-width: 560px) {
  .nadbavki-vtorostepennoe { display: none; }
  .pole-summy { max-width: 84px; font-size: 18px; padding: 8px 4px; }
}

/* ---------------------------------------------------------------------------
   Шапка заявки на продукты — правка 12.09.2026 по слову Сергея:
   «чтоб явно видно было, когда сделана заявка и на какое число надо её сделать,
   крупными буквами, чтоб не ошибались».
   Повод: Люба открыла страницу после полуночи, увидела пустой новый день
   и решила, что заказ пропал. Прежняя шапка «Кухня — 12.09» не говорила
   ни о дне поставки, ни о том, что это день набора.
--------------------------------------------------------------------------- */
.zayavka-shapka {
  border: 3px solid var(--akcent);
  background: var(--fon-karta);
}
.zayavka-shapka__cel {
  font-family: var(--shrift-zagolovok);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--akcent);
  margin: 0 0 8px;
}
.zayavka-shapka__nabor {
  font-size: 21px;
  line-height: 1.3;
  color: var(--tekst);
  margin: 0;
}
/* Подсказка «за сегодня не набирали, вчерашняя передана» — заметная рамка,
   но не тревожная: ничего не сломалось, просто новый день. */
.zayavka-vchera {
  border: 2px dashed var(--akcent);
}
@media (max-width: 560px) {
  .zayavka-shapka__cel { font-size: 27px; }
  .zayavka-shapka__nabor { font-size: 19px; }
}

/* ── Нагрузка цехов в табеле (16.09.2026) ─────────────────────────────
   Цвет клетки «В смене» у цехов кухни. Текст везде графитовый #23302d:
   на зелёной подложке 11,3:1, на жёлтой 11,6:1, на красной 9,0:1. */
.setka td.nagr { cursor: pointer; color: #23302d; }
.setka td.nagr--zel, .nagr-obrazec.nagr--zel { background: #c9e3cd; }
.setka td.nagr--zhel, .nagr-obrazec.nagr--zhel { background: #f3df8f; }
.setka td.nagr--kras, .nagr-obrazec.nagr--kras { background: #f0aea4; }
/* Прогноз — тот же цвет, но в косую штриховку: видно, что это не факт. */
.setka td.nagr--prognoz, .nagr-obrazec.nagr--prognoz {
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 5px, transparent 5px 10px);
}
.nagr-obychno { font-weight: 400; font-style: italic; }
.nagr-legenda {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 8px 0 12px; font-size: 17px; color: var(--tekst);
}
.nagr-obrazec {
  display: inline-block; padding: 4px 10px; border: 1px solid var(--ramka);
  border-radius: 6px; color: #23302d; font-size: 16px;
}
.nagr-otdacha { font-size: 15px; white-space: nowrap; }
.nagr-okno {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 50; width: min(92vw, 420px);
  background: var(--fon-karta); color: var(--tekst);
  border: 2px solid var(--akcent); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); padding: 14px 16px;
}
.nagr-okno[hidden] { display: none; }
.nagr-okno-tekst { white-space: pre-line; font-size: 18px; line-height: 1.45; margin-bottom: 10px; }
.nagr-okno-tekst::first-line { font-weight: 700; }

/* 22.10.2026, слово Сергея: «красная кнопка/надпись „Отправить заказ“ для бара
   и кухни». Заявку вписывали и не отправляли (18.10 кухня, 21.10 бар) — Люба
   её не получала. Белый текст на #a11515 — 8,0:1 при норме 4,5:1. */
.knopka--otpravit { background: #a11515; color: #ffffff; font-weight: 700; font-size: 20px; width: 100%; }
.knopka--otpravit:hover { background: #7f1010; }
.ne-otpravleno { background: #fdeaea; border-left: 6px solid #a11515; }
.ne-otpravleno__zagolovok { font-size: 22px; font-weight: 700; color: #8a1010; margin: 0 0 6px; }
.ne-otpravleno__tekst { font-size: 19px; color: #3b1010; margin: 0 0 14px; }
.ne-otpravleno__metka { color: #a11515; }
/* Постоянное правило для цеха (22.10.2026): «заказ обязательно отправить». #8a1010 на белом — 8,4:1. */
.ne-otpravleno__pravilo { font-size: 19px; font-weight: 700; color: #8a1010; margin: 0 0 12px; }
.ne-voshlo p { margin: 0 0 6px; }
.ne-voshlo p:last-child { margin: 0; }

/* 24.10.2026 — телефон при увеличении 200 % (слово Сергея «чини»). Экран
   тогда ≈ 180–215 точек: кнопки с наименьшей шириной 200–210 px, плашки
   без переноса и длинные слова («Техподдержка», «Здравствуйте») уходили
   за правый край, страница ездила вбок. На обычном телефоне (360+) и
   компьютере правило не срабатывает — вид там прежний. Шрифт не уменьшаем.
   Одно правило — для всех экранов: слово или ссылка длиннее строки переносится,
   а не растягивает страницу (почта на обычном телефоне была шириной 3 480 точек
   из-за ссылки в письме). Обычный текст от него не меняется. */
body { overflow-wrap: break-word; }
@media (max-width: 330px) {
  body { -webkit-hyphens: auto; hyphens: auto; }
  h1, h2, h3, .privet, .vkladka, .knopka, .chip, .otzyv-tekst, .pravka-tekst, .karta-imya { overflow-wrap: anywhere; }
  .knopka, .knopka--tihaya, .karta--blok .knopka { min-width: 0; max-width: 100%; padding-left: 14px; padding-right: 14px; }
  .chip, .pravka-davno, .pravka-kogda { white-space: normal; }
  .vkladka { max-width: 100%; min-width: 0; }
  .podvkladki, .vkladki { grid-template-columns: 1fr; }
  .podvkladka { min-width: 0; overflow-wrap: anywhere; }
  .glavnoe { padding-left: 12px; padding-right: 12px; }
  .ryad-knopok > *, .ryad-knopok form, .ryad-knopok form .knopka { max-width: 100%; min-width: 0; }
  img, video { max-width: 100%; height: auto; }
  input, select, textarea { max-width: 100%; }
  /* Крупная сумма в карточке («10 228 280 ₽») целиком в строку не влезала, а рвать
     число нельзя — прочтут как два. Ужимаем ровно до ширины экрана (10 % ширины —
     на этом экране 19 точек, как основной текст), отступ подробностей убираем. */
  .podrobno-tekst { margin-left: 0 !important; }
  .karta-verh > *, .spisok li > * { min-width: 0; overflow-wrap: anywhere; }
  /* заголовок ≈ 20 точек на экране 190 (второй проход 24.10: при 24,7 «Техподдержка» рвалась на «Техподдержк / а») */
  h1 { font-size: min(28px, 10.5vw); }
  .privet { font-size: min(26px, 9.5vw); }
  .krupno, .summa-krupno { font-size: min(1.6em, 10vw) !important; }
}

/* 24.10.2026, второй проход «увеличения 200 %» — по замечаниям проверяющего интерфейса. */
/* Чат, все экраны: «Ответить» и «Убрать» — цель под палец не меньше 44 точек
   (было 40), и разнесены, чтобы рядом с удалением не промахнуться. */
.puzyr-deystvie { min-height: 44px; }
.puzyr-niz { gap: 8px 16px; }
@media (max-width: 330px) {
  /* Отчёт: таблица в две колонки на экране 190 не влезала — цифры уходили за край
     окошка, видны были одни названия. Строка в два этажа: название сверху во всю
     ширину, число под ним справа. Прокрутки вбок нет, шрифт прежний. */
  .tablica-itogov, .tablica-itogov > tbody { display: block; width: 100%; }
  .tablica-itogov tr { display: flex; flex-wrap: wrap; align-items: baseline;
    border-bottom: 1px solid var(--ramka); padding: 6px 0; }
  .tablica-itogov td { display: block; width: auto !important; border-bottom: 0; padding: 2px 4px; box-sizing: border-box; }
  .tablica-itogov td:first-child { flex: 0 0 100%; text-align: left; min-width: 0; overflow-wrap: anywhere; }
  .tablica-itogov td:not(:first-child) { flex: 1 1 auto; text-align: right; }
  .tablica-itogov .opu-razdel { border-bottom: 2px solid var(--akcent); padding-top: 14px; }
  .tablica-itogov .opu-razdel td { border-bottom: 0; letter-spacing: .03em; overflow-wrap: anywhere; }
  .tablica-itogov .metka-ocenka { white-space: normal; max-width: 100%; }
  /* Кнопка в три строки касалась рамки: отступ сверху и снизу, высота — по тексту */
  .knopka { padding-top: 10px; padding-bottom: 10px; line-height: 1.25; }
  /* Чат: строка ввода была в четыре ряда (186 точек из 420). Теперь два: поле во всю
     ширину, под ним камера, медиатека и «отправить» (справа). В один ряд на 190 точках
     не встаёт: три круглые кнопки по 44 оставили бы полю 16 точек, а рядом с одной
     «отправить» слово «Сообщение» рвалось в подсказке. */
  .pisalka-ryad { gap: 6px; }
  .pisalka-pole { order: 1; flex: 1 1 100%; min-height: 46px; padding: 10px 14px; }
  .pisalka .knopki-foto .pisalka-krug { order: 2; }
  .pisalka-otpravit { order: 3; margin-left: auto; }
  .pisalka-krug { width: 44px; height: 44px; }
  /* Пузырь: боковые поля 10 вместо 16 — слова реже рвутся посреди */
  .puzyr { padding: 10px 10px; max-width: 96%; }
}

/* 24.10.2026, третий проход «увеличения 200 %» — по повторной проверке. */
/* Чат: «Ответить» и «Убрать», если встали столбиком, — зазор 14 (было 8): рядом с удалением не промахнуться */
.puzyr-niz { gap: 14px 16px; }
@media (max-width: 330px) {
  /* «Снять блюдо» у бармена: колонка списка держала ширину самого длинного слова
     («Страчателлой») — карточки 220 точек при экране 190, правая рамка пропадала.
     Колонка — по ширине экрана, длинные слова и «Кухня / Салаты» переносятся. */
  .stoly--spisok { grid-template-columns: minmax(0, 1fr); }
  /* Кружок выбора слева отнимал у названия 44 точки — «Медовик», «Домашний», «Брокколи» рвались
     посреди слова. Название — во всю ширину карточки, кружок — строкой ниже, рядом с «Кухня / Салаты»
     (высота карточки та же: там и так была строка цеха). Нажимается по-прежнему вся карточка. */
  .stoly--spisok .stol--vybor { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    padding-left: 10px; padding-right: 8px; border-left-width: 4px; min-width: 0; }
  .stoly--spisok .stol--vybor .stol-nomer { order: 1; flex: 1 1 100%; min-width: 0; }
  .stoly--spisok .stol--vybor input[type="radio"] { order: 2; position: static; flex: none; margin: 0; }
  .stoly--spisok .stol--vybor .pripiska { order: 3; flex: 1 1 0; min-width: 0; margin-top: 0; }
  .stol-nomer, .stol .pripiska { overflow-wrap: anywhere; }
  /* «Мой кошелёк»: панель «Сохранить» выступала на 16 точек при полях страницы 12 —
     страница становилась шире экрана на 4 точки и ездила вбок */
  .koshelek-sohranit { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  /* «Задачи»: «Менеджеров» рвалось на «Менеджер / ов» — слово целиком, а счётчик,
     если не влез рядом, уходит строкой ниже, к правому краю. Зазор между плитками 10. */
  .podvkladki { gap: 10px; }
  .podvkladki .podvkladka { flex-wrap: wrap; overflow-wrap: break-word; padding: 8px 10px; row-gap: 4px; }
  .podvkladki .podvkladka .schetchik { margin-left: auto; }
}

/* Название ресторана вместо логотипа — у ресторанов со своим паспортом (04.11.2026). */
.shapka-nazvanie { font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; color: inherit; }