/* ============================================================
   электрон: страница э.кассы (pos.html).
   Подключается после style.css и products.css.
   Всё, что здесь есть, начинается с .pos-, кроме модификатора
   сцены .scene--pos. Общие правила сцен лежат в products.css.
   ============================================================ */

.pos-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ============================================================
   1. Железо: моноблок, регистратор, денежный ящик.
   Размеры в пикселях макета: сцена и кадр в шапке масштабируют
   их целиком, поэтому пропорции не плывут.
   ============================================================ */
.pos-rig, .pos-hero__rig { position: absolute; width: 1050px; height: 600px; }

.pos-term { position: absolute; left: 0; top: 0; z-index: 2; width: 820px; height: 582px; }
.pos-term__frame {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 820px; height: 500px;
  padding: 14px 14px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, #313236 0%, #242529 58%, #1d1e22 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 2px 3px rgba(24, 25, 28, 0.16),
    0 36px 60px -26px rgba(24, 25, 28, 0.42);
}
/* камера в верхней рамке */
.pos-term__frame::after {
  content: ''; position: absolute; left: 50%; top: 5px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: #45474d;
}
.pos-term__screen {
  position: relative; width: 792px; height: 468px;
  border-radius: 6px; overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.pos-term__neck {
  position: absolute; left: 375px; top: 494px; z-index: 1;
  width: 70px; height: 74px;
  background: linear-gradient(90deg, #1e1f23 0%, #393a3f 42%, #2b2c30 70%, #1e1f23 100%);
}
.pos-term__base {
  position: absolute; left: 285px; top: 564px; z-index: 1;
  width: 250px; height: 18px; border-radius: 9px 9px 5px 5px;
  background: linear-gradient(180deg, #3e3f44 0%, #27282c 70%, #1c1d21 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* тень под подставкой и регистратором: только прозрачность, без размытия */
.pos-rig__sh {
  position: absolute; left: 225px; top: 568px; z-index: 0;
  width: 370px; height: 30px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(24, 25, 28, 0.24), rgba(24, 25, 28, 0));
}
.pos-rig__sh--prn { left: 826px; width: 248px; height: 28px; }

/* фискальный регистратор: светло-серый корпус, щель для ленты сверху */
.pos-prn { position: absolute; left: 842px; bottom: 18px; z-index: 3; width: 216px; height: 156px; }
.pos-prn__body {
  position: absolute; left: 10px; top: 0;
  width: 196px; height: 112px;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(180deg, #e8e7e2 0%, #d9d8d2 55%, #cfcec8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(24, 25, 28, 0.08), 0 1px 0 rgba(24, 25, 28, 0.08);
}
.pos-prn__body::before {
  content: ''; position: absolute; left: 14px; right: 14px; top: 36px;
  height: 1px; background: rgba(24, 25, 28, 0.09);
}
.pos-prn__slot {
  position: absolute; left: 12px; right: 12px; top: 9px;
  height: 8px; border-radius: 4px;
  background: linear-gradient(180deg, #1b1c20, #36373c);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.7);
}
.pos-prn__led { position: absolute; right: 22px; bottom: 24px; width: 6px; height: 6px; border-radius: 50%; background: #2f9a6b; }
.pos-prn__key {
  position: absolute; right: 38px; bottom: 21px;
  width: 18px; height: 12px; border-radius: 4px;
  background: #c9c8c2;
  box-shadow: inset 0 -1px 0 rgba(24, 25, 28, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.pos-prn__drawer {
  position: absolute; left: 0; bottom: 0;
  width: 216px; height: 44px; border-radius: 6px 6px 7px 7px;
  background: linear-gradient(180deg, #35363b, #26272b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.pos-prn__drawer::before {
  content: ''; position: absolute; left: 12px; right: 12px; top: 14px;
  height: 1px; background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pos-prn__drawer::after {
  content: ''; position: absolute; right: 18px; top: 21px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #141518; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* окно над щелью: лента выходит из регистратора и в нём же прячется */
.pos-prn__win {
  position: absolute; left: 0; right: 0; bottom: calc(100% - 13px); z-index: 2;
  height: 430px; overflow: hidden; pointer-events: none;
}
/* лента 184 точки, шрифт 11: самая длинная строка (ФД и ФП, 24 знака) влезает целиком,
   а весь чек (около 410 точек) помещается в окне над щелью */
.pos-paper {
  position: absolute; left: 16px; bottom: 0;
  width: 184px; padding: 15px 10px 12px;
  background: #fdfcf8; color: #2a2b2f;
  font: 400 11px/1.38 var(--font-mono);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 1px 0 0 rgba(24, 25, 28, 0.05), inset -1px 0 0 rgba(24, 25, 28, 0.05);
  /* оторванный зубчатый край сверху */
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 10px 51% repeat-x, linear-gradient(#000 0 0) bottom / 100% 50% no-repeat;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 10px 51% repeat-x, linear-gradient(#000 0 0) bottom / 100% 50% no-repeat;
  transform-origin: 30% 100%;
  transform: translateY(calc((1 - var(--pr, 1)) * 100% - var(--rt, 0) * 36px)) rotate(calc(var(--rt, 0) * -4deg));
  opacity: calc(1 - var(--rt, 0));
}
.pos-paper__c { text-align: center; }
.pos-paper__k { margin: 3px 0 2px; text-align: center; font-weight: 500; letter-spacing: 0.03em; }
.pos-paper__rule { display: block; margin: 6px 0; border-top: 1px dashed rgba(42, 43, 47, 0.35); }
.pos-paper__it > span:first-child { display: block; }
.pos-paper__r, .pos-paper__row { display: flex; justify-content: space-between; gap: 8px; }
.pos-paper__r { justify-content: flex-end; }
.pos-paper__r > span + span { margin-left: auto; }
.pos-paper__row--b { margin: 1px 0 2px; font-size: 12.5px; font-weight: 500; }
.pos-paper__qr { display: block; width: 46px; height: 46px; margin: 7px auto 5px; color: #2a2b2f; }

/* ============================================================
   2. Экран кассы. Палитра сайта: бумага, чернила, тонкие линейки.
   Синяя только главная кнопка.
   ============================================================ */
.pos-ui {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); line-height: 1.3; text-align: left;
  -webkit-font-smoothing: antialiased;
}
.pos-bar {
  flex: none; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  height: 40px; padding: 0 16px;
  background: #fffffd; border-bottom: 1px solid var(--hairline);
  font-size: 12px; line-height: 1; white-space: nowrap;
}
.pos-bar b { font-weight: 600; }
.pos-bar__shift { color: var(--gray); font-weight: 500; }
.pos-ofd {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  background: rgba(17, 154, 100, 0.09); color: #0d7a50;
  font-size: 11.5px; font-weight: 600;
}
.pos-ofd__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green, #119a64); }
.pos-ofd__t { display: grid; }
.pos-ofd__t > span { grid-area: 1 / 1; }
.pos-ofd__a { opacity: calc(1 - var(--ofd, 1)); }
.pos-ofd__b { opacity: var(--ofd, 1); }
.pos-bar__clk { min-width: 36px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.pos-ui__body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 470px minmax(0, 1fr); }

/* меню */
.pos-menu { display: flex; flex-direction: column; min-height: 0; padding: 12px 12px 12px 14px; opacity: calc(1 - var(--sp, 1) * 0.82); }
.pos-tabs { display: flex; gap: 6px; }
.pos-tabs span {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 11px;
  border: 1px solid var(--hairline); border-radius: 7px;
  background: #fffffd; color: var(--ink-2);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pos-tabs .is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pos-tiles {
  flex: 1; min-height: 0; margin-top: 10px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.pos-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 11px 12px 10px;
  border: 1px solid var(--hairline); border-radius: 10px;
  background: #fffffd;
  transform: scale(calc(1 - var(--p, 0) * 0.035));
}
.pos-tile::after { content: ''; position: absolute; inset: 0; background: rgba(24, 25, 28, 0.07); opacity: var(--p, 0); }
.pos-tile span { font-size: 13.5px; line-height: 1.25; font-weight: 600; }
.pos-tile b { font-size: 13px; font-weight: 500; color: var(--gray); font-variant-numeric: tabular-nums; }
.pos-tile[data-t="a"] { --p: var(--pa); }
.pos-tile[data-t="b"] { --p: var(--pb); }
.pos-tile[data-t="c"] { --p: var(--pc); }
.pos-tile[data-t="d"] { --p: var(--pd); }
.pos-tile[data-t="e"] { --p: var(--pe); }

/* заказ стола */
.pos-ord {
  position: relative; min-height: 0;
  display: flex; flex-direction: column;
  padding: 12px 14px;
  background: #fffffd; border-left: 1px solid var(--hairline);
}
/* высота колонки заказа 404 точки, и всё в ней посчитано: шапка 28, гости 83, 83 и 125, низ 78.
   Если что-то здесь растёт, где-то рядом должно убавиться, иначе кнопки уйдут под рамку */
.pos-ord__head { display: flex; align-items: baseline; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.pos-ord__head b { font-family: var(--font-display); font-size: 16px; line-height: 20px; font-weight: 600; }
.pos-ord__head span { font-size: 11.5px; color: var(--gray); }
.pos-og { position: relative; margin-top: 5px; opacity: calc(1 - var(--sp, 1) * 0.35); }
.pos-og[data-g="0"] .pos-og__label { opacity: var(--li0, 1); }
.pos-og[data-g="1"] .pos-og__label { opacity: var(--li2, 1); }
.pos-og[data-g="2"] .pos-og__label { opacity: var(--li4, 1); }
.pos-og__label { font-size: 10.5px; line-height: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--gray); }
.pos-ln {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px;
  padding: 2px 0 1px;
  opacity: var(--l, 1);
  transform: translateY(calc((1 - var(--l, 1)) * 10px));
}
.pos-ln > span { overflow: hidden; font-size: 12.5px; line-height: 16px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.pos-ln > b { font-size: 12.5px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.pos-ln__m { grid-column: 1 / -1; font-size: 11.5px; line-height: 13px; color: var(--gray); opacity: var(--sent, 1); }
.pos-ln[data-l="0"] { --l: var(--li0); }
.pos-ln[data-l="1"] { --l: var(--li1); }
.pos-ln[data-l="2"] { --l: var(--li2); }
.pos-ln[data-l="3"] { --l: var(--li3); }
.pos-ln[data-l="4"] { --l: var(--li4); }
.pos-ln[data-l="5"] { --l: var(--li5); }
/* комплимент: строка въезжает сбоку, цена зачёркивается после разрешения */
.pos-ln--comp { --l: var(--cl); margin-top: 2px; transform: translateX(calc((1 - var(--cl, 1)) * 24px)); }
.pos-ln--comp s, .pos-ln--comp ins { text-decoration: none; }
.pos-ln--comp s { position: relative; color: var(--gray); }
.pos-ln--comp s::after {
  content: ''; position: absolute; left: -1px; right: -1px; top: 52%;
  height: 1.2px; background: currentColor;
  transform: scaleX(var(--ok, 1)); transform-origin: 0 50%;
}
.pos-ln--comp ins { display: inline-block; margin-left: 5px; opacity: var(--ok, 1); }
.pos-tag { grid-column: 1 / -1; display: grid; justify-items: start; margin-top: 3px; }
.pos-tag > span {
  grid-area: 1 / 1;
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.pos-tag__a { background: rgba(183, 121, 31, 0.13); color: #87570f; opacity: calc(1 - var(--ok, 1)); }
.pos-tag__b { background: rgba(17, 154, 100, 0.1); color: #0d7a50; opacity: var(--ok, 1); }
.pos-ord__foot { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--hairline); }
.pos-ord__sum { display: flex; align-items: baseline; justify-content: space-between; }
.pos-ord__sum span { font-size: 12px; font-weight: 500; color: var(--gray); }
.pos-ord__sum b { font-family: var(--font-display); font-size: 21px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pos-ord__btns { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; margin-top: 8px; }
.pos-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 8px;
  border: 1px solid var(--hairline); border-radius: 8px;
  background: #fffffd;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pos-btn--k {
  border-color: transparent; color: #fff;
  background: var(--blue);
  background: color-mix(in srgb, var(--blue-dark) calc(var(--prs, 0) * 100%), var(--blue));
  transform: scale(calc(1 - var(--prs, 0) * 0.04));
}

/* раздельный счёт: гости вылетают из заказа и ложатся поверх меню */
.pos-split { position: absolute; left: 14px; top: 50px; width: 444px; bottom: 12px; z-index: 3; pointer-events: none; }
.pos-split__sheet {
  position: absolute; inset: 0; border-radius: 12px;
  background: #fffffd;
  box-shadow: 0 0 0 1px rgba(24, 25, 28, 0.07), 0 20px 40px -18px rgba(24, 25, 28, 0.3);
  opacity: var(--sp, 1);
}
.pos-split__div {
  position: absolute; left: 18px; right: 18px; height: 1px;
  background: var(--hairline);
  transform: scaleX(var(--sp, 1)); transform-origin: 0 50%;
}
.pos-split__div--1 { top: 122px; }
.pos-split__div--2 { top: 244px; }
.pos-gc {
  position: absolute; left: 0; right: 0; height: 122px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
  column-gap: 16px; align-items: start;
  padding: 16px 18px 14px;
  opacity: clamp(0, calc(var(--sp, 1) * 2.4 - 0.2), 1);
  transform: translate(calc((1 - var(--sp, 1)) * var(--gx, 0px)), calc((1 - var(--sp, 1)) * var(--gy, 0px)));
}
.pos-gc[data-g="0"] { top: 0; --gx: var(--g0x, 0px); --gy: var(--g0y, 0px); --pay: var(--pay0, 1); }
.pos-gc[data-g="1"] { top: 122px; --gx: var(--g1x, 0px); --gy: var(--g1y, 0px); --pay: var(--pay1, 1); }
.pos-gc[data-g="2"] { top: 244px; --gx: var(--g2x, 0px); --gy: var(--g2y, 0px); --pay: var(--pay2, 1); }
.pos-gc__g { grid-column: 1; font-size: 10.5px; line-height: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--gray); }
.pos-gc__items { grid-column: 1; margin-top: 6px; font-size: 13px; line-height: 1.38; color: var(--ink-2); }
.pos-gc__pay { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.pos-gc__sum { font-family: var(--font-display); font-size: 24px; line-height: 1; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pos-gc__stamp {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px 0 7px; border-radius: 999px;
  background: rgba(17, 154, 100, 0.1); color: #0d7a50;
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  opacity: var(--pay, 1);
  transform: scale(calc(1.15 - var(--pay, 1) * 0.15)); transform-origin: 100% 50%;
}
.pos-gc__stamp svg { width: 12px; height: 12px; }
.pos-gc__stamp path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--pay, 1)); }
/* QR для СБП стоит там, где потом появится отметка об оплате, и сжимается в неё */
.pos-gc__qr {
  position: absolute; right: 18px; top: 46px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; color: var(--gray); white-space: nowrap;
  opacity: var(--qr, 0);
  transform: scale(calc(1 - var(--pay1, 1) * 0.7));
  transform-origin: 100% 40%;
}
.pos-gc__qr svg { order: 2; width: 58px; height: 58px; padding: 4px; border: 1px solid var(--hairline); border-radius: 6px; background: #fff; color: var(--ink); }

/* ============================================================
   3. Сцена «Вечер в кафе на Литейном»
   Значения по умолчанию рисуют законченный кадр: заказ целиком,
   комплимент разрешён, счёт разделён и оплачен, чек напечатан.
   Кухонный экран, нода и телефон в этом кадре не видны.
   ============================================================ */
.scene--pos {
  --scene-bg: var(--paper-2);
  --en: 1; --li0: 1; --li1: 1; --li2: 1; --li3: 1; --li4: 1; --li5: 1;
  --pa: 0; --pb: 0; --pc: 0; --pd: 0; --pe: 0;
  --prs: 0; --sent: 1; --pan: 0; --kds: 0; --tk0: 1; --tk1: 1; --up: 1;
  --cl: 1; --nd: 0; --nm: 1; --fp: 1; --ok: 1; --hk: 0;
  --sp: 1; --pay0: 1; --pay1: 1; --pay2: 1; --qr: 0; --pr: 1; --ofd: 1;
  --rt: 0; --ph: 0; --rv: 1; --fd: 1; --tc: 0; --cn: 0;
  /* раскладка: где стоит касса и куда её уводит камера */
  --rx0: 35px; --ry0: 40px; --rs: 1; --p0y: 0px;
  --p1x: -11px; --p1y: 276px; --p1s: 0.4;
  --p4x: -11px; --p4y: 256px; --p4s: 0.36;
  border-top: 0;
}
.scene--pos .scene__fit { --dw: 1120; --dh: 700; }

.pos {
  position: absolute; inset: 0;
  perspective: 1800px; perspective-origin: 60% 40%;
  font-family: var(--font-body); color: var(--ink); line-height: 1.3; text-align: left;
}

.pos-rig {
  left: var(--rx0); top: var(--ry0); z-index: 1;
  transform-origin: 0 0;
  perspective: 1800px; perspective-origin: 40% 90%;
  transform:
    translate(
      calc(var(--pan) * var(--p1x) + var(--ph) * var(--p4x)),
      calc(var(--pan) * var(--p1y) + var(--ph) * var(--p4y) + (1 - var(--up)) * var(--p0y)))
    scale(calc(var(--rs) * (1 - var(--pan) * var(--p1s) - var(--ph) * var(--p4s))));
}
/* появление: касса поднимается и выпрямляется */
.pos-rig__in {
  position: absolute; inset: 0;
  transform-origin: 40% 100%;
  opacity: calc(var(--en) * (1 - var(--ph) * 0.35));
  transform: translateY(calc((1 - var(--en)) * 110px)) rotateX(calc((1 - var(--en)) * 16deg)) scale(calc(0.9 + var(--en) * 0.1));
}
.pos-rig__in .pos-rig__sh { opacity: var(--en); }

/* регистратор печатает: светодиод мигает, корпус чуть дрожит */
.scene--pos.is-printing .pos-prn__led { animation: posBlink 0.36s steps(1, end) infinite; }
.scene--pos.is-printing .pos-prn__body { animation: posJit 0.1s steps(1, end) infinite; }
@keyframes posBlink { 50% { opacity: 0.25; } }
@keyframes posJit { 50% { transform: translateY(0.5px); } }

/* слой получает will-change только на время движения: в покое текст не мылится */
.scene--pos.is-cam .pos-rig { will-change: transform; }
.scene--pos.is-mvk .pos-kds, .scene--pos.is-mvn .pos-node, .scene--pos.is-mvp .pos-ph { will-change: transform, opacity; }

/* слои, которых нет в статичном кадре, скрыты, пока до них не дошли */
.pos-kds, .pos-node, .pos-node-sh, .pos-ph, .pos-task, .pos-link { visibility: hidden; }
.scene--pos.is-kds .pos-kds,
.scene--pos.is-node .pos-node, .scene--pos.is-node .pos-node-sh,
.scene--pos.is-phone .pos-ph,
.scene--pos.is-task .pos-task, .scene--pos.is-task .pos-link { visibility: visible; }

/* ---------- кухонный экран на стене ---------- */
.pos-kds {
  position: absolute; left: 500px; top: 40px; z-index: 5;
  width: 600px; padding: 9px;
  border-radius: 16px;
  background: #111215;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 56px -22px rgba(24, 25, 28, 0.55);
  font-size: 12.5px; line-height: 1.3; color: #f2f1ec;
  transform-origin: 100% 50%;
  opacity: clamp(0, calc(var(--kds) * 1.8), 1);
  transform: translateX(calc((1 - var(--kds)) * 24%)) rotateY(calc((1 - var(--kds)) * -10deg));
}
.pos-kds__scr { padding: 1em 1em 1.1em; border-radius: 0.6em; background: #1b1c20; }
.pos-kds__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85em; color: rgba(242, 241, 236, 0.6); }
.pos-kds__bar b { font-weight: 600; color: #f2f1ec; }
.pos-kds__bar span { font-family: var(--font-mono); font-size: 0.92em; }
.pos-kds__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7em; align-items: start; }
.pos-kcol { display: flex; flex-direction: column; gap: 0.6em; }
.pos-kcol__h { display: flex; justify-content: space-between; padding: 0 0.2em; font-size: 0.86em; font-weight: 600; color: rgba(242, 241, 236, 0.55); }
.pos-kcol__h em { font-style: normal; font-variant-numeric: tabular-nums; color: rgba(242, 241, 236, 0.85); }
.pos-tk {
  position: relative;
  padding: 0.75em 0.8em 0.8em; border-radius: 0.65em;
  background: #26272c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.pos-tk--new { box-shadow: inset 0 0 0 1px rgba(242, 241, 236, 0.2); }
.pos-tk--late { box-shadow: inset 0 2px 0 rgba(183, 121, 31, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.pos-tk__h { display: flex; align-items: baseline; gap: 0.45em; margin-bottom: 0.45em; white-space: nowrap; }
.pos-tk__h b { font-weight: 600; }
.pos-tk__h span { min-width: 0; overflow: hidden; font-size: 0.86em; color: rgba(242, 241, 236, 0.5); text-overflow: ellipsis; }
.pos-tk__h em { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 0.92em; color: rgba(242, 241, 236, 0.82); }
/* тот же янтарный, что у предупреждений на сайте, только светлее для тёмного экрана */
.pos-tk--late .pos-tk__h em { color: #d8a04c; }
.pos-tk ul { display: grid; gap: 0.2em; margin: 0; padding: 0; list-style: none; font-size: 0.96em; line-height: 1.32; }
.pos-tk__ok {
  display: inline-flex; align-items: center;
  height: 2em; margin-top: 0.7em; padding: 0 0.85em;
  border: 1px solid rgba(242, 241, 236, 0.24); border-radius: 0.5em;
  font-size: 0.86em; font-weight: 600; color: rgba(242, 241, 236, 0.85);
}
/* новые билеты падают сверху, старые сдвигаются вниз ровно на их высоту */
.pos-tk--new[data-k="0"] { --t: var(--tk0); }
.pos-tk--new[data-k="1"] { --t: var(--tk1); }
.pos-tk--new { opacity: var(--t, 1); transform: translateY(calc((1 - var(--t, 1)) * -16px)) scale(calc(0.98 + var(--t, 1) * 0.02)); }
.pos-kcol[data-k="0"] .pos-tk--old { transform: translateY(calc((var(--tk0) - 1) * var(--tkh, 0px))); }
.pos-kcol[data-k="2"] .pos-tk--old { transform: translateY(calc((var(--tk1) - 1) * var(--tkh, 0px))); }

/* ---------- нода 0 управляющей ---------- */
/* нода 230 точек (20em при 11.5px): правый край на 1098, в двух десятках точек от края кадра,
   тень по центру под ней */
.pos-node-sh {
  position: absolute; left: 874px; top: 419px; z-index: 5;
  width: 218px; height: 28px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(24, 25, 28, 0.26), rgba(24, 25, 28, 0));
  opacity: calc(var(--nd) * var(--nd));
}
.pos-node {
  position: absolute; left: 868px; top: 180px; z-index: 6;
  width: 20em; height: 20em;
  font-size: 11.5px;
  opacity: clamp(0, calc(var(--nd) * 2), 1);
  transform: translate(calc(var(--hk) * 3px), calc((1 - var(--nd)) * 240px)) rotate(calc((1 - var(--nd)) * -9deg));
}
.pos-nd__face {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 4.4em;
  background: radial-gradient(120% 90% at 28% 12%, #2d3039 0%, #131419 55%, #0b0c0f 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2.4em 4.4em -1.8em rgba(24, 25, 28, 0.55);
}
.pos-nd__scr {
  position: absolute; left: 50%; top: 2.2em;
  width: 14.8em; height: 6.4em; margin-left: -7.4em;
  overflow: hidden; border-radius: 1em;
  background: #030405; box-shadow: inset 0 0 0 1px #262a36;
}
.pos-nd__req {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2em;
  text-align: center; white-space: nowrap;
  opacity: calc(1 - var(--ok));
}
.pos-nd__req span { font-size: 0.95em; line-height: 1.2; color: rgba(169, 184, 255, 0.75); }
.pos-nd__req b { font-size: 1.3em; line-height: 1.2; font-weight: 600; color: #fff; }
.pos-nd__m1 { opacity: clamp(0, calc(var(--nm) * 3), 1); }
.pos-nd__m2 { opacity: clamp(0, calc(var(--nm) * 3 - 1), 1); }
.pos-nd__m3 { opacity: clamp(0, calc(var(--nm) * 3 - 2), 1); }
.pos-nd__ok {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 0.6em;
  font-size: 1.35em; font-weight: 600; color: #3fd27e;
  opacity: var(--ok);
}
.pos-nd__ok svg { width: 1.25em; height: 1.25em; }
.pos-nd__sensor { position: absolute; left: 50%; top: 10em; width: 8em; height: 8em; margin-left: -4em; }
.pos-nd__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.pos-nd__track { fill: #0e1015; stroke: rgba(255, 255, 255, 0.09); stroke-width: 3; }
.pos-nd__prog {
  fill: none; stroke-width: 3.5; stroke-linecap: round;
  stroke: #5a6ee8;
  stroke: color-mix(in srgb, #3fd27e calc(var(--ok) * 100%), #5a6ee8);
  stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--fp) * 100);
  transform: rotate(-90deg); transform-box: fill-box; transform-origin: center;
}
.pos-nd__fp { position: absolute; left: 50%; top: 50%; width: 3.4em; height: 3.4em; margin: -1.7em 0 0 -1.7em; color: rgba(169, 184, 255, 0.28); }
.pos-nd__fp--lit { color: #b7c5ff; color: color-mix(in srgb, #3fd27e calc(var(--ok) * 100%), #b7c5ff); }
.pos-nd__fp--lit path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--fp)); }

/* ---------- задача в Станции ---------- */
.pos-task {
  position: absolute; left: 500px; top: 40px; z-index: 6;
  width: 300px;
  opacity: var(--tc);
  transform: translateY(calc((1 - var(--tc)) * 18px));
}
.pos-task__card {
  padding: 13px 15px;
  border: 1px solid var(--hairline); border-radius: 12px;
  background: #fffffd;
  box-shadow: 0 18px 40px -16px rgba(24, 25, 28, 0.26);
}
.pos-task__tag {
  display: inline-flex; margin-bottom: 7px; padding: 2px 8px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue-dark);
  font-size: 11px; font-weight: 600;
}
.pos-task__ttl { font-size: 14.5px; line-height: 1.35; font-weight: 600; }
.pos-task__note { margin-top: 8px; padding: 7px 9px; border-radius: 7px; background: var(--paper); font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.pos-task__meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--gray); }
.pos-task__wo { margin: 12px 2px 0; font-size: 12px; line-height: 1.45; color: var(--gray); opacity: clamp(0, calc(var(--tc) * 2 - 1), 1); }

/* ---------- телефон владельца с э.мобайл ---------- */
.pos-ph {
  position: absolute; left: 836px; top: 70px; z-index: 7;
  width: 264px; height: 540px; padding: 9px;
  border-radius: 46px;
  background: linear-gradient(135deg, #9a9da3 0%, #55575d 16%, #2b2c30 48%, #4f5157 80%, #a3a6ac 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35), inset 0 0 0 4px #19191c, 0 34px 64px -20px rgba(24, 25, 28, 0.42);
  transform-origin: 0 50%;
  opacity: clamp(0, calc(var(--ph) * 1.5), 1);
  transform: translateX(calc((1 - var(--ph)) * 30%)) rotateY(calc((1 - var(--ph)) * -14deg));
}
.pos-ph__scr {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden; border-radius: 37px;
  background: var(--paper);
}
.pos-ph__isl { position: absolute; left: 50%; top: 9px; width: 80px; height: 24px; margin-left: -40px; border-radius: 14px; background: #000; }
.pos-ph__st { flex: none; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 12px 22px 0 28px; font-size: 11px; font-weight: 600; }
.pos-ph__ic { display: flex; align-items: center; gap: 5px; }
.pos-ph__ic svg { width: auto; height: 10px; }
.pos-ph__head { padding: 14px 18px 12px; }
.pos-ph__date { font-size: 10.5px; color: var(--gray); }
.pos-ph__ttl { margin-top: 2px; font-family: var(--font-display); font-size: 19px; line-height: 1.15; font-weight: 700; }
.pos-ph__num {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
  margin-top: 10px;
  font-family: var(--font-display); font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.pos-ph__inc {
  font-family: var(--font-body); font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(17, 154, 100, 0.1); color: #0d7a50;
  opacity: clamp(0, calc(var(--rv) * 3), 1);
}
.pos-ph__sub { margin-top: 6px; font-size: 11px; color: var(--gray); }
.pos-ph__rows { margin: 0 14px; padding: 2px 14px; border: 1px solid var(--hairline); border-radius: 14px; background: #fffffd; }
.pos-ph__rows p { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid var(--hairline); font-size: 12px; }
.pos-ph__rows p:first-child { border-top: 0; }
.pos-ph__rows b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pos-ph__feed { flex: 1; margin: 14px 14px 0; }
.pos-ph__fl { margin: 0 4px 6px; font-size: 10.5px; font-weight: 600; color: var(--gray); }
.pos-ph__fr {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px;
  padding: 8px 4px; border-top: 1px solid var(--hairline);
  font-size: 11px; line-height: 1.35;
  opacity: var(--fd);
  transform: translateY(calc((1 - var(--fd)) * 6px));
}
.pos-ph__fr + .pos-ph__fr { opacity: clamp(0, calc(var(--fd) * 2 - 1), 1); }
.pos-ph__fr em { font-style: normal; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
.pos-ph__dock { flex: none; display: flex; justify-content: space-around; padding: 10px 6px 22px; border-top: 1px solid var(--hairline); background: #fffffd; font-size: 11px; font-weight: 600; color: var(--gray); }
.pos-ph__dock .is-on { color: var(--blue); }
.pos-ph__bar { position: absolute; left: 50%; bottom: 7px; width: 96px; height: 4px; margin-left: -48px; border-radius: 2px; background: rgba(24, 25, 28, 0.85); }

/* тонкая линия от строки в ленте к задаче */
.pos-link { position: absolute; left: 0; top: 0; z-index: 8; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pos-link__p { fill: none; stroke: rgba(24, 25, 28, 0.4); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--cn)); }
.pos-link circle { fill: var(--ink); opacity: var(--cn); }

/* ссылка, чтобы с клавиатуры не листать всю сцену */
.pos-skip {
  position: absolute; left: 24px; top: calc(var(--hh, 72px) + 12px); z-index: 30;
  padding: 10px 16px; border-radius: 8px;
  background: var(--ink); color: #fff;
  font-size: 0.9rem; font-weight: 600;
  opacity: 0; transform: translateY(-12px); pointer-events: none;
}
.pos-skip:focus, .pos-skip:focus-visible { opacity: 1; transform: none; pointer-events: auto; }

/* ============================================================
   4. Кадр в шапке: моноблок с планом зала
   ============================================================ */
.pos-top { padding-bottom: 0; }
.pos-hero {
  --hw: 1280;
  position: relative;
  width: 100%; margin: 64px 0 0;
  aspect-ratio: 1280 / 660;
  container-type: inline-size;
}
/* стойка, на которой стоит касса; дальше она переходит в фон сцены */
.pos-hero::before {
  content: ''; position: absolute; z-index: 0;
  left: calc(50% - 50vw); width: 100vw; top: 88.5%; bottom: 0;
  background: var(--paper-2);
  box-shadow: 0 -1px 0 rgba(24, 25, 28, 0.05);
}
.pos-hero__dev {
  --hs: 1;
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 1280px; height: 660px;
  transform-origin: 0 0;
  transform: scale(var(--hs));
}
@media (max-width: 1327px) { .pos-hero__dev { --hs: 0.86; } }
@media (max-width: 1100px) { .pos-hero__dev { --hs: 0.68; } }
@media (max-width: 880px) { .pos-hero__dev { --hs: 0.56; } }
@supports (width: calc(1px * tan(atan2(1cqw, 1px)))) {
  .pos-hero__dev { --hs: tan(atan2(100cqw, 1280px)); }
}
.pos-hero__rig { left: 115px; top: 24px; }
.pos-hero .pos-rig__sh { opacity: 1; }

.pos-ui--hall .pos-ui__body { grid-template-columns: 520px minmax(0, 1fr); }
.pos-hall { display: flex; flex-direction: column; min-height: 0; padding: 12px 14px; }
.pos-plan {
  position: relative; flex: 1; min-height: 0; margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--hairline); border-radius: 10px;
  background: #fffffd;
}
.pos-plan__win {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  height: 22px; border-bottom: 3px double #d9d6cd;
  font-size: 10px; color: var(--gray);
}
.pos-plan__door {
  position: absolute; left: 26px; bottom: 0;
  width: 76px; height: 18px; padding-top: 2px;
  border-top: 1px dashed #cfccc3;
  font-size: 10px; text-align: center; color: var(--gray);
}
.pos-tb {
  --ch: #e1ded5;
  position: absolute;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid #d9d6cd; border-radius: 8px;
  background: #fffffd; color: var(--gray);
}
.pos-tb > b { font-family: var(--font-display); font-size: 15px; line-height: 1; font-weight: 600; }
.pos-tb > i { margin-top: 3px; font-size: 9.5px; line-height: 1; font-weight: 500; white-space: nowrap; }
.pos-tb::before, .pos-tb::after { content: ''; position: absolute; border-radius: 3px; background: var(--ch); }
.pos-tb--4 { width: 76px; height: 46px; }
.pos-tb--4::before, .pos-tb--4::after, .pos-tb--6::before, .pos-tb--6::after { left: 12px; width: 18px; height: 6px; }
.pos-tb--4::before, .pos-tb--6::before { top: -10px; }
.pos-tb--4::after, .pos-tb--6::after { bottom: -10px; }
.pos-tb--4::before, .pos-tb--4::after { box-shadow: 34px 0 0 var(--ch); }
.pos-tb--6 { width: 112px; height: 48px; }
.pos-tb--6::before, .pos-tb--6::after { box-shadow: 34px 0 0 var(--ch), 68px 0 0 var(--ch); }
.pos-tb--2 { width: 46px; height: 46px; }
.pos-tb--2::before, .pos-tb--2::after { top: 14px; width: 6px; height: 18px; }
.pos-tb--2::before { left: -10px; }
.pos-tb--2::after { right: -10px; }
.pos-tb--n1 { left: 26px; top: 52px; }
.pos-tb--n2 { left: 142px; top: 52px; }
.pos-tb--n3 { left: 258px; top: 52px; }
.pos-tb--n4 { left: 374px; top: 52px; }
.pos-tb--n5 { left: 44px; top: 160px; }
.pos-tb--n6 { left: 150px; top: 160px; }
.pos-tb--n7 { left: 258px; top: 160px; }
.pos-tb--n8 { left: 26px; top: 266px; }
.pos-tb--n9 { left: 190px; top: 266px; }
.pos-tb--n10 { left: 354px; top: 266px; }
.pos-tb.is-busy { --ch: #d6d3ca; border-color: #cfccc3; background: #efede6; color: var(--ink); }
.pos-tb.is-busy > i { color: var(--ink-2); }
.pos-tb.is-late > i { color: #87570f; font-weight: 600; }
.pos-tb.is-bill > i { color: var(--ink); font-weight: 600; }
.pos-tb.is-sel { --ch: #b9b7b0; border-color: var(--ink); background: var(--ink); color: #fff; }
.pos-tb.is-sel > i { color: rgba(255, 255, 255, 0.72); }

.pos-side { display: flex; flex-direction: column; min-height: 0; padding: 14px 16px 16px; background: #fffffd; border-left: 1px solid var(--hairline); }
.pos-side__h { margin-bottom: 6px; font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.pos-side__list { margin: 0; padding: 0; list-style: none; }
.pos-side__list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.pos-side__list b { font-size: 13px; font-weight: 600; }
.pos-side__list span { font-size: 12px; color: var(--gray); }
.pos-side__list .is-late span { color: #87570f; }
.pos-side__stat { margin: auto 0 10px; font-size: 11.5px; line-height: 1.4; color: var(--gray); }
.pos-side__btn { height: 38px; font-size: 12.5px; }

/* пречек торчит из регистратора */
.pos-prn__win--stub { height: 196px; }
.pos-paper--stub { top: 0; bottom: auto; min-height: 270px; transform: none; opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  html.js .pos-hero__rig { animation: posHeroIn 1.2s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) 0.3s both; }
  html.js .pos-paper--stub {
    animation: posFeed 1.7s cubic-bezier(0.3, 0.6, 0.4, 1) 1.15s both;
    animation-timing-function: linear(0, 0.12 9%, 0.12 13%, 0.3 22%, 0.3 26%, 0.5 35%, 0.5 39%, 0.7 49%, 0.7 53%, 0.88 63%, 0.88 67%, 1 78%, 1);
  }
  /* при первом заходе ждём, пока уйдёт заставка */
  html.js:not(.no-intro) .pos-hero__rig { animation-delay: 1.3s; }
  html.js:not(.no-intro) .pos-paper--stub { animation-delay: 2.15s; }
}
@keyframes posHeroIn { from { opacity: 0; transform: translateY(40px) scale(0.97); } }
@keyframes posFeed { from { transform: translateY(78%); } }

/* ============================================================
   5. Куда попадает один счёт
   ============================================================ */
.pos-flow__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.pos-flow__side { position: sticky; top: calc(var(--hh, 72px) + 40px); }
.pos-stub {
  max-width: 320px; margin-top: 36px; padding: 20px 22px 18px;
  border: 1px solid var(--hairline); border-radius: var(--r-m, 14px);
  background: var(--white);
}
.pos-stub__t { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.pos-stub__t b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.pos-stub__t span { font-size: 0.86rem; color: var(--gray); }
.pos-stub__sum {
  margin: 14px 0 12px; padding-bottom: 14px; border-bottom: 1px dashed #d6d3ca;
  font-family: var(--font-display); font-size: 2.6rem; line-height: 1; font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.pos-stub__time { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.88rem; color: var(--ink-2); }
.pos-stub__time i { width: 7px; height: 7px; border-radius: 50%; background: var(--green, #119a64); }

.pos-flow__list { position: relative; margin: 0; padding-left: 34px; }
/* шина: от счёта ко всем местам, куда он попал */
.pos-flow__list::before {
  content: ''; position: absolute; left: 6px; top: 34px; bottom: 34px;
  width: 1px; background: rgba(24, 25, 28, 0.2);
  transform-origin: 50% 0;
}
.pos-flow__row {
  position: relative;
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2.1fr); gap: 24px;
  padding: 22px 0 23px;
  border-bottom: 1px solid var(--hairline);
}
.pos-flow__row:first-child { border-top: 1px solid var(--hairline); }
.pos-flow__row::before {
  content: ''; position: absolute; left: -32.5px; top: 30px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--ink);
}
.pos-flow__row dt { padding-top: 3px; font-size: 0.92rem; font-weight: 500; color: var(--gray); }
.pos-flow__row dd {
  margin: 0;
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.35; font-weight: 500; letter-spacing: -0.01em;
  text-wrap: pretty;
}
.pos-flow__note {
  display: flex; align-items: flex-start; gap: 14px;
  max-width: 820px; margin: 56px 0 0;
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.3vw, 1.8rem); line-height: 1.28; font-weight: 500; letter-spacing: -0.015em;
  text-wrap: balance;
}
.pos-flow__note svg { flex: none; width: 1.1em; height: 1.1em; margin-top: 0.1em; color: var(--green, #119a64); }

/* строки появляются по очереди, задержки ставит js/pos.js */
html.pos-motion .pos-flow__row { transition: opacity 0.6s var(--ease, ease), transform 0.7s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)); }
html.pos-motion .pos-flow__row::before { transition: transform 0.5s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)); transition-delay: inherit; }
html.pos-motion .pos-flow__list::before { transition: transform 1.3s var(--ease-in-out, cubic-bezier(0.65, 0, 0.35, 1)) 0.1s; }
html.pos-motion .pos-flow__list:not(.is-in) .pos-flow__row { opacity: 0; transform: translateY(14px); }
html.pos-motion .pos-flow__list:not(.is-in) .pos-flow__row::before { transform: scale(0); }
html.pos-motion .pos-flow__list:not(.is-in)::before { transform: scaleY(0); }

/* ============================================================
   6. Из чего состоит чек
   ============================================================ */
.pos-rcs__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.pos-rc {
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 24px 48px;
  border: 1px solid var(--hairline); border-radius: var(--r-m, 14px);
  background-color: #fbfaf7;
  background-image: linear-gradient(rgba(24, 25, 28, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 25, 28, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}
.pos-rc__slot {
  position: relative; z-index: 2;
  display: block; width: 380px; max-width: 100%; height: 12px; border-radius: 6px;
  background: linear-gradient(180deg, #1b1c20, #3a3b40);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.8);
}
.pos-rc__feed { position: relative; width: 100%; max-width: 440px; margin-top: -6px; padding-bottom: 14px; overflow: hidden; display: flex; justify-content: center; }
.pos-rc__sheet { position: relative; width: 320px; }
.pos-rc__paper {
  --paperc: #fdfcf8;
  position: relative; z-index: 0;
  padding: 26px 22px 34px;
  color: #2a2b2f;
  font: 400 12.5px/1.6 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* бумага и её «тень» нарисованы псевдоэлементами, чтобы маска с зубцами не срезала номера сбоку */
.pos-rc__paper::before, .pos-rc__paper::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 51% repeat-x, linear-gradient(#000 0 0) top / 100% 50% no-repeat;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 51% repeat-x, linear-gradient(#000 0 0) top / 100% 50% no-repeat;
}
.pos-rc__paper::before { background: var(--paperc); box-shadow: inset 1px 0 0 rgba(24, 25, 28, 0.05), inset -1px 0 0 rgba(24, 25, 28, 0.05); }
.pos-rc__paper::after { z-index: -2; top: 5px; bottom: -4px; background: rgba(24, 25, 28, 0.07); }
.pos-rc__ln {
  position: relative;
  display: flex; justify-content: space-between; gap: 12px;
  margin: 0 -8px; padding: 0 8px; border-radius: 4px;
  transition: background-color 0.25s;
}
.pos-rc__ln.is-hot { background: rgba(61, 93, 245, 0.1); }
.pos-rc__ln--c { justify-content: center; text-align: center; }
.pos-rc__ln--k { margin-top: 4px; margin-bottom: 2px; font-weight: 500; letter-spacing: 0.04em; }
.pos-rc__ln--qty { justify-content: flex-end; }
.pos-rc__ln--qty > span:last-child { min-width: 7.5em; text-align: right; }
.pos-rc__ln--tot { margin-top: 2px; font-size: 1.12em; font-weight: 500; }
.pos-rc__ln--qr { justify-content: center; padding-top: 10px; padding-bottom: 6px; }
.pos-rc__ln--qr svg { width: 96px; height: 96px; color: #2a2b2f; }
.pos-rc__mk { font-weight: 500; }
.pos-rc__rule { display: block; margin: 9px 0; border-top: 1px dashed rgba(42, 43, 47, 0.32); }
.pos-rc__n {
  position: absolute; left: -44px; top: 50%;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font: 600 12px/1 var(--font-body);
}
.pos-rc__n::after { content: ''; position: absolute; left: 22px; top: 50%; width: 10px; height: 1px; background: var(--blue); opacity: 0.5; }

.pos-rcs__side .section__lead { margin-bottom: 26px; }
.pos-rc__legend li { cursor: default; border-radius: 6px; transition: color 0.2s; }
.pos-rc__legend li.is-hot { color: var(--ink); }
.pos-rc__legend li:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* лента выходит из щели рывками, как из настоящего принтера; номера появляются после */
html.pos-motion .pos-rc__sheet {
  transition: transform 2.5s cubic-bezier(0.3, 0.6, 0.4, 1);
  transition-timing-function: linear(0, 0.07 6%, 0.07 9%, 0.18 15%, 0.18 18%, 0.3 24%, 0.3 27%, 0.42 33%, 0.42 36%, 0.54 42%, 0.54 45%, 0.66 51%, 0.66 54%, 0.77 61%, 0.77 64%, 0.87 71%, 0.87 74%, 0.95 82%, 0.99 91%, 1);
}
html.pos-motion .pos-rc__n { transition: opacity 0.4s var(--ease, ease), transform 0.55s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
html.pos-motion .pos-rc:not(.is-in) .pos-rc__sheet { transform: translateY(-102%); }
html.pos-motion .pos-rc:not(.is-in) .pos-rc__n { opacity: 0; transform: scale(0.6); }

/* ============================================================
   7. Что понадобится
   ============================================================ */
.pos-kit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); margin-top: 56px; }
.pos-kit__title { margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--ink); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.pos-kit__list { margin: 0; padding: 0; list-style: none; counter-reset: kit; }
.pos-kit__list li {
  counter-increment: kit;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; row-gap: 3px;
  padding: 15px 0 16px;
  border-bottom: 1px solid var(--hairline);
}
.pos-kit__list li::before { content: counter(kit, decimal-leading-zero); grid-row: 1 / span 2; padding-top: 2px; font: 500 0.8rem/1.6 var(--font-mono); color: var(--blue); }
.pos-kit__list b { font-size: 1rem; line-height: 1.4; font-weight: 600; text-wrap: pretty; }
.pos-kit__list span { font-size: 0.9rem; line-height: 1.5; color: var(--gray); text-wrap: pretty; }
.pos-kit__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); margin-top: 28px; }
.pos-kit__notes p { margin: 0; padding-left: 14px; border-left: 2px solid var(--hairline); font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.pos-note p { margin: 0; }

/* ============================================================
   8. Адаптив
   ============================================================ */
/* на узких экранах устройство над подписями, как у остальных сцен */
@media (max-width: 999px) {
  .scene--pos { --band-h: 34%; }
}
/* ноутбуки: колонка подписей уже, а кадр 1120 на 700 шире. На 1280 точках
   масштаб сцены около 0.73 вместо 0.66, на 1440 около 0.87 вместо 0.79,
   и мелкие надписи на кассе, чеке и ноде остаются читаемыми */
@media (min-width: 1000px) and (max-width: 1480px) {
  .scene--pos.is-live .scene__inner {
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    column-gap: clamp(28px, 3vw, 48px);
  }
}
@media (max-width: 1080px) {
  .pos-rcs__grid { grid-template-columns: minmax(0, 1fr); }
  .pos-rcs__side { order: -1; }
}
@media (max-width: 960px) {
  .pos-flow__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pos-flow__side { position: static; }
}
@media (max-width: 880px) {
  .pos-kit, .pos-kit__notes { grid-template-columns: minmax(0, 1fr); }
  .pos-kit { gap: 40px; }
}

/* телефоны: своя раскладка сцены и кадра в шапке (тот же порог, что у движка сцен) */
@media (max-width: 699.98px) {
  .scene--pos {
    --band-h: 36%;
    --rx0: 9px; --ry0: 16px; --rs: 0.66; --p0y: 157px;
    --p1x: 0px; --p1y: 0px; --p1s: 0;
    --p4x: 0px; --p4y: 0px; --p4s: 0;
  }
  .scene--pos .scene__fit { --dw: 560; --dh: 760; }
  /* регистратор стоит перед моноблоком и чуть ниже, чтобы не закрывать кнопки заказа */
  .pos-prn { left: 604px; bottom: -26px; }
  .pos-rig__sh--prn { left: 588px; top: 612px; }
  .pos-kds { left: 10px; top: 150px; width: 540px; font-size: 15px; }
  /* 250 точек (20em при 12.5px), по центру кадра под кассой */
  .pos-node { left: 155px; top: 452px; font-size: 12.5px; }
  .pos-node-sh { left: 166px; top: 711px; width: 228px; }
  .pos-ph {
    left: 286px; top: 200px;
    transform-origin: 50% 100%;
    transform: translateY(calc((1 - var(--ph)) * 30%));
  }
  .pos-task { left: 14px; top: 440px; width: 258px; }

  .pos-hero { aspect-ratio: 880 / 650; margin-top: 48px; }
  .pos-hero::before { top: 89.8%; }
  .pos-hero__dev { width: 880px; height: 650px; --hs: 0.38; }
  .pos-hero__rig { left: 30px; }
  .pos-hero .pos-prn__win--stub { display: none; }

  .pos-flow__list { padding-left: 26px; }
  .pos-flow__list::before { left: 4px; }
  .pos-flow__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0 19px; }
  .pos-flow__row::before { left: -26.5px; top: 22px; }
  .pos-flow__row dt { padding-top: 0; }
  .pos-stub { max-width: none; }

  .pos-rc { padding: 30px 10px 36px; }
  .pos-rc__sheet { width: min(320px, calc(100% - 68px)); }
  .pos-rc__paper { padding: 22px 14px 30px; font-size: 11px; }
  .pos-rc__ln { margin: 0 -6px; padding: 0 6px; gap: 8px; }
  .pos-rc__n { left: -36px; width: 20px; height: 20px; margin-top: -10px; font-size: 11px; }
  .pos-rc__n::after { left: 20px; width: 8px; }
  .pos-rc__ln--qr svg { width: 84px; height: 84px; }
}
@media (max-width: 699.98px) {
  @supports (width: calc(1px * tan(atan2(1cqw, 1px)))) {
    .pos-hero__dev { --hs: tan(atan2(100cqw, 880px)); }
  }
}
/* без js сцена не живая: подрезаем пустой низ и даём разумный масштаб */
@media (max-width: 699.98px) {
  .scene--pos:not(.is-live) .scene__fit { height: calc(440px * var(--fit)); }
}
@media (max-width: 600px) {
  .scene--pos:not(.is-live) .scene__fit { --fit: 0.48; }
}
/* самые узкие телефоны: чек чуть мельче, чтобы строки не переносились */
@media (max-width: 359px) {
  .pos-rc__sheet { width: calc(100% - 56px); }
  .pos-rc__paper { padding: 20px 12px 28px; font-size: 10px; }
  .pos-rc__n { left: -30px; }
  .pos-rc__n::after { width: 4px; }
}

/* ============================================================
   9. Печать. Строки «Куда попадает один счёт» и чек появляются
   только когда до них долистали. На бумаге они нужны сразу и
   без переходов, иначе печатается их начальное, пустое состояние.
   ============================================================ */
@media print {
  html.pos-motion .pos-flow__row,
  html.pos-motion .pos-flow__row::before,
  html.pos-motion .pos-flow__list::before,
  html.pos-motion .pos-rc__sheet,
  html.pos-motion .pos-rc__n {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}