/* Экран кухни. Отдельная таблица стилей, а не тема учёта: здесь другая
   задача. У учёта — плотные таблицы для человека за ноутбуком; здесь экран
   смотрят в метре от печи, мимо проходя, и читать его надо не вглядываясь.
   Поэтому тёмный фон, крупные цифры и кнопки под мокрый палец, а не под
   курсор: ничего меньше 48 пикселей по высоте не нажимается.

   Размеры заданы в пикселях намеренно. Планшет на кухне один, его ставят
   и больше не трогают; гибкость шрифтовых единиц тут не нужна, а предсказуемая
   плотность — нужна. */

@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/onest-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/onest-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2212, U+2215;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/onest-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/onest-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2212, U+2215;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/onest-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/onest-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2212, U+2215;
}

:root {
  --bg: #0f1a33;        /* фон экрана */
  --panel: #16264d;     /* колонка, тёмная плашка */
  --panel-2: #2a3f73;   /* второй тёмный, для подписи */
  --lime: #d8f34a;      /* акцент: новое, срочное, главное действие */
  --card: #fff;
  --card-done: #dfe5ef;
  --ink: #0f1a33;
  --ink-2: #3d4a66;
  --ink-3: #5d6b85;
  --sheet: #eef2f8;
  --late: #e0654f;      /* просрочено */
  --late-ink: #c8402a;
  --warn: #b26b00;      /* меньше пяти минут */
  --note: #fff6d6;      /* комментарий гостя */
  --note-ink: #5a4500;
  --take: #ffb347;      /* деньги ещё надо взять */
  --take-ink: #3d2600;
  --paid: #d7efd0;      /* заказ оплачен, отдают молча */
  --paid-ink: #2a5520;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Своё display у .ring и .modal перебило бы [hidden] из таблицы браузера, и
   скрытое осталось бы на экране. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: #fff;
  font: 400 15px/1.4 Onest, -apple-system, BlinkMacSystemFont, sans-serif;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Кухонный экран не прокручивают пальцем целиком: прокрутка живёт внутри
     колонок, иначе в заказе теряется шапка. */
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 18%); border-radius: 9px; }

/* ---------- шапка ---------- */

.top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.brand { display: flex; align-items: center; gap: 10px; }

/* Знак Mesh: четыре формы, у кухни подсвечен круг. На тёмной шапке формы
   белые, а синий контур вокруг салатовой не нужен — он для светлого фона. */
.brand__mark { width: 34px; height: 34px; flex: none; display: block; }
.brand__mark svg { width: 100%; height: 100%; display: block; }

.brand__name { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.brand__name span { font-weight: 400; color: rgb(255 255 255 / 60%); }

.stats { flex: 1 1 300px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.stat {
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--panel);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgb(255 255 255 / 75%);
}
.stat b { font-size: 16px; font-weight: 600; color: #fff; }
.stat b.is-late { color: #ff8a73; }
.stat b.is-good { color: var(--lime); }

.top__end { display: flex; gap: 8px; align-items: center; }

.btn {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn--sound { background: #fff; color: var(--panel); }
/* Звук выключен и есть новый заказ — кнопка сама просит нажать. */
.btn--sound.is-asking { background: var(--lime); }
.btn--sound .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--late); }
.btn--sound[aria-pressed="true"] .dot { background: #7fb83a; }

.clock {
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--panel);
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- полоса звонка ---------- */

.ring {
  border-radius: 20px;
  padding: 14px 18px;
  background: var(--lime);
  color: var(--panel);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ring.is-dim { background: #f1ffb0; }
.ring__title { font-size: 17px; font-weight: 600; }
.ring__note { font-size: 13px; flex: 1; }
.ring button { height: 44px; padding: 0 18px; border-radius: 999px; background: var(--panel); color: #fff; font-size: 14px; }

.offline {
  border-radius: 16px;
  padding: 12px 16px;
  background: #3a1f1a;
  color: #ffb4a2;
  border: 1px solid #5c2b2e;
  font-size: 14px;
}

/* ---------- доска ---------- */

.board {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  align-items: stretch;
  padding-bottom: 6px;
}

.col {
  /* На планшете в 1024 четыре колонки по 280 не встают, и «Переданы» уезжает
     за правый край: повар не видит, что уже выдано, пока не смахнёт доску
     вбок. Колонке разрешено сузиться до 220 — четыре помещаются целиком. */
  flex: 1 1 280px;
  min-width: 220px;
  background: var(--panel);
  border-radius: 26px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.col__head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 2px; }
.col__head span:first-child { font-size: 16px; font-weight: 500; }
.col__n {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
  color: var(--panel);
}
.col--new .col__n { background: var(--lime); }
.col--ready .col__n { background: #b9c8e4; }
.col--handed .col__n { background: rgb(255 255 255 / 15%); color: #fff; }

.col__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}

.empty {
  padding: 26px 12px;
  text-align: center;
  font-size: 13px;
  color: rgb(255 255 255 / 50%);
  border: 1px dashed rgb(255 255 255 / 18%);
  border-radius: 18px;
}

/* ---------- карточка заказа ---------- */

.card {
  background: var(--card);
  color: var(--ink);
  border-radius: 20px;
  padding: 14px;
  border: 3px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  width: 100%;
}
.card--handed { background: var(--card-done); }
/* Новый заказ мигает рамкой, пока его не приняли: экран стоит боком, и
   движение замечают раньше, чем цифру. */
.card--new.is-blink { border-color: var(--lime); }
.card--late { border-color: var(--late); }

.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card__num { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.card__when { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.card__timer { text-align: right; }
.card__timer b { display: block; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.card__timer span { font-size: 11px; }
.t-late { color: var(--late-ink); }
.t-soon { color: var(--warn); }
.t-calm { color: var(--ink); }
.t-wait { color: var(--panel-2); }
.t-done { color: var(--ink-3); }

.card__who { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tag {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--panel);
  background: #dfe7f5;
}
.tag--delivery { background: var(--lime); }
.tag--hall { background: #f5e6cf; }
.card__who em { font-style: normal; font-size: 12px; color: var(--ink-2); }

.lines { display: flex; flex-direction: column; gap: 6px; }
.line { display: flex; align-items: center; gap: 10px; }
.line__pic { width: 38px; height: 38px; border-radius: 10px; flex: none; object-fit: cover; }
/* Фото нет — штриховка вместо серого квадрата: по ней видно, что это место
   под снимок, а не пустая позиция. */
.line__pic--none { background: repeating-linear-gradient(135deg, #e7edf7 0 6px, #fff 6px 9px); }
.line__body { min-width: 0; flex: 1; }
.line__name { font-size: 14px; font-weight: 500; }
.line__name i { font-style: normal; color: var(--panel-2); }
.line__sub { font-size: 11px; color: var(--ink-3); }

.note { font-size: 12px; padding: 8px 10px; border-radius: 12px; background: var(--note); color: var(--note-ink); }
.note b { font-weight: 600; }

/* Оплата. Вопрос у окна выдачи один: брать деньги или нет, — и отвечать на
   него должен цвет во всю ширину, а не строка мелким шрифтом. */
.pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
}
.pay--take { background: var(--take); color: var(--take-ink); font-weight: 600; }
.pay--take b { font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay--done { background: var(--paid); color: var(--paid-ink); font-size: 13px; }

.go {
  min-height: 50px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  justify-content: center;
  display: flex;
  align-items: center;
  background: var(--panel);
  color: #fff;
}
.go--accept { background: var(--lime); color: var(--panel); }
.go--hand { background: var(--panel-2); color: #fff; }
.go[disabled] { opacity: 0.5; }

.card__done { font-size: 12px; color: var(--ink-3); }

/* ---------- карточка заказа во всю ширину ---------- */

.modal {
  position: fixed;
  inset: 0;
  background: rgb(8 14 30 / 66%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}

.sheet {
  width: 100%;
  max-width: 980px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  background: var(--sheet);
  color: var(--ink);
  border-radius: 30px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Шапка не сжимается, тело — сжимается и прокручивается. min-height:0 здесь
   обязателен: без него элемент колонки не становится меньше своего
   содержимого, карточка перерастает экран, и низ состава не достать вовсе —
   страница кухни сама не прокручивается. */
.sheet__head { display: flex; align-items: center; gap: 12px; flex: none; }
.sheet__title { flex: 1; min-width: 0; }
.sheet__title h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.crumb { font-size: 12px; color: var(--ink-3); }

.round {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  flex: none;
}
.round--dark { background: var(--panel); color: #fff; }

.sheet__body {
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Инерция прокрутки на планшете и запрет «протаскивать» её на доску. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.fact { background: #fff; border-radius: 20px; padding: 14px 16px; }
.fact--lime { background: var(--lime); color: var(--panel); }
.fact--take { background: var(--take); color: var(--take-ink); }
.fact--paid { background: var(--paid); color: var(--paid-ink); }
.fact--late { background: var(--late); color: #fff; }
.fact p { font-size: 12px; opacity: 0.75; }
.fact b { display: block; font-size: 22px; font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; }
.fact span { display: block; font-size: 12px; opacity: 0.75; margin-top: 2px; }

.panes { display: flex; flex-wrap: wrap; gap: 10px; }
.pane { flex: 1 1 300px; background: #fff; border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pane--dark { background: var(--panel); color: #fff; }
.pane__label { font-size: 12px; color: var(--ink-3); }
.pane--dark .pane__label { color: rgb(255 255 255 / 65%); }
.pane--dark strong { font-size: 20px; font-weight: 600; }
.pane--dark p { font-size: 14px; color: rgb(255 255 255 / 80%); }

.who { display: flex; align-items: center; gap: 12px; }
.ava { width: 44px; height: 44px; border-radius: 50%; background: var(--lime); color: var(--panel); display: grid; place-items: center; font-weight: 600; flex: none; }
.who strong { display: block; font-size: 17px; font-weight: 500; }
.who a { font-size: 14px; color: var(--panel); text-decoration: none; }
.pane address { font-style: normal; font-size: 14px; color: var(--ink-2); }

.sub { font-size: 15px; font-weight: 500; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tile { background: #fff; border-radius: 22px; padding: 10px; display: flex; flex-direction: column; gap: 10px; color: var(--ink); text-align: left; }
.tile__pic { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #f7f9fc; display: grid; place-items: center; }
.tile__pic img { width: 100%; height: 100%; object-fit: cover; }
.tile__pic em { font-style: normal; font-size: 11px; color: var(--ink-2); }
.tile__q {
  position: absolute;
  top: 8px;
  left: 8px;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--panel);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
}
.tile__name { font-size: 16px; font-weight: 500; padding: 0 4px; }
.tile__meta { font-size: 12px; color: var(--ink-3); padding: 0 4px; margin-top: 2px; }
.tile__link { padding: 0 4px 4px; font-size: 13px; font-weight: 500; color: var(--panel-2); }
.tile__link--set { color: var(--panel); }

/* ---------- техкарта ---------- */

.tech { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.tech__pic { flex: 1 1 320px; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: #f7f9fc; display: grid; place-items: center; }
.tech__pic img { width: 100%; height: 100%; object-fit: cover; }
.tech__pic em { font-style: normal; font-size: 12px; color: var(--ink-2); }
.tech__side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 10px 14px; border-radius: 14px; background: #fff; }
.chip p { font-size: 11px; color: var(--ink-3); }
.chip b { font-size: 17px; font-weight: 600; margin-top: 2px; display: block; }

.ings { background: #fff; border-radius: 20px; padding: 8px; }
.ings__head,
.ings__row { display: grid; grid-template-columns: 1fr 72px 72px; gap: 8px; padding: 8px 10px; }
.ings__head { font-size: 12px; color: var(--ink-3); }
.ings__row { font-size: 15px; border-top: 1px solid var(--sheet); align-items: baseline; }
.ings__row span { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.ings__row em { font-style: normal; font-size: 11px; color: var(--ink-3); display: block; }
/* Брутто выделено только там, где оно есть: прочерк у продукта без отхода —
   не предупреждение, и красным ему гореть незачем. */
.ings__row .gross { color: var(--late-ink); }
.ings__row .same { color: var(--ink-3); font-weight: 400; }

.tip { font-size: 14px; padding: 12px 14px; border-radius: 16px; background: var(--panel); color: #fff; }
.tip b { color: var(--lime); font-weight: 500; }

.gap { font-size: 13px; padding: 12px 14px; border-radius: 16px; background: #fff; color: var(--ink-2); }

/* Телефон в руках у повара: колонки в столбик, карточка во весь экран. */
@media (width <= 760px) {
  body { padding: 10px; gap: 10px; overflow: auto; }
  .board { flex-direction: column; overflow: visible; }
  .col { max-height: none; min-width: 0; flex: none; }
  .col__list { overflow: visible; }
  .stats { order: 3; justify-content: flex-start; }
  /* В строку полоса звонка на телефоне не встаёт: текст сжимается в столбик
     из двух слов и перестаёт читаться. */
  .ring { flex-direction: column; align-items: stretch; gap: 8px; }
  .ring__note { flex: none; }
  .ring button { width: 100%; }
  .sheet { padding: 14px; border-radius: 22px; max-height: calc(100dvh - 20px); }
  .ings__head, .ings__row { grid-template-columns: 1fr 64px 64px; }
}