/* ═══════════════════════════════════════════════════════════
   КАССА — кассовая книга и окна расхода, выемки, пересчёта
   ═══════════════════════════════════════════════════════════
   Плита и ярлыки — общие с документами (accounting.css). Здесь книга:
   ведомость по дням с постоянными колонками (час, знак, что и о ком,
   место, сумма), волосяные черты между строками и итог дня под двойной
   чертой — так подводят страницу в бумажной книге. Тон сумм — как в
   журнале: приход зелёным, уход чернилами с минусом, недостача красным,
   излишек янтарным, перевод серым (§8.3, cash.md «Тон»).

   Окна — тот же прибор, что приём оплаты (payment.css): табло, лампа,
   способы. Добавлено только своё: места вместо способов, статьи, режимы
   выемки и перевода, итог пересчёта. */

/* ── обойма мест и действия ── */
/* Не помещаются в ряд — действия уходят строкой ниже, а обойма не сжимается в многоточия. */
.cs-bar{gap:8px 12px;flex-wrap:wrap}
.cs-places{display:flex;gap:2px;padding:2px;border-radius:var(--r);background:var(--sunk);min-width:min(100%,300px);max-width:100%;overflow-x:auto;scrollbar-width:none}
.cs-places::-webkit-scrollbar{display:none}
.cs-place{
  flex-shrink:0;height:28px;padding:0 10px;border-radius:calc(var(--r) - 2px);white-space:nowrap;
  font-size:12px;font-weight:500;color:var(--ink-2);
  transition:background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .cs-place:hover{color:var(--ink)}
}
.cs-place.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
.cs-place:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.cs-acts{display:flex;gap:6px;margin-left:auto;flex-shrink:0}
.cs-act{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;white-space:nowrap;font-size:12px}
.cs-act:active{transform:scale(.98)}
.cs-act svg{flex-shrink:0}

/* ── страница дня ── */
.cs-day{padding-top:14px}
.cs-day-h{
  position:sticky;top:0;z-index:2;display:flex;align-items:baseline;gap:8px;
  margin:0;padding:8px 6px 7px;background:var(--card);border-bottom:1px solid var(--rule);
}
.cs-day-h b{font-size:13px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.cs-day-h span{font-size:11.5px;color:var(--ink-3)}

/* Строка ведомости. Колонки постоянны на всю книгу — по ним глаз бежит
   к сумме, не читая строк. */
.cs-row{
  position:relative;display:grid;align-items:center;gap:0 12px;
  grid-template-columns:44px 20px minmax(0,1fr) minmax(110px,200px) 124px;
  grid-template-areas:"at gl what place sum";
  width:100%;padding:8px 6px;text-align:left;border-bottom:1px solid var(--rule-2);
  transition:background-color var(--t-tap) var(--ease);
}
.cs-rows .cs-row:last-child{border-bottom:0}
.cs-at{grid-area:at;justify-self:end;font-size:12px;font-weight:500;letter-spacing:-.02em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cs-glyph{grid-area:gl;display:flex;align-items:center;justify-content:center;font-style:normal;color:var(--ink-3)}
.cs-row.k-payment .cs-glyph,.cs-row.k-sale .cs-glyph{color:var(--ok)}
.cs-what{grid-area:what;min-width:0}
.cs-what b{display:block;font-size:13px;font-weight:550;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-what>span{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;margin-top:1px;font-size:11.5px;line-height:1.4;color:var(--ink-2)}
.cs-where{grid-area:place;font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-sum{grid-area:sum;justify-self:end;font-size:13.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-sum.in{color:var(--ok)}
.cs-sum.out{color:var(--ink)}
.cs-sum.aside{color:var(--ink-2);font-weight:500}
.cs-sum.move,.cs-sum.even{color:var(--ink-3);font-weight:500}
.cs-sum.short{color:var(--late)}
.cs-sum.over{color:var(--wait)}
/* Отменённая запись остаётся зачёркнутой: задним числом книга не переписывается. */
.cs-row.void .cs-what b,.cs-row.void .cs-sum{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-3)}
.cs-row.void .cs-glyph{opacity:.55}
.cs-row .ac-code{position:relative;z-index:1}

/* «Отменить» — тихая подпись в строке, а не кнопка у суммы: отменяют редко,
   а рядом с деньгами она стоила бы промаха. */
.cs-void{
  font-size:11.5px;color:var(--ink-3);border-bottom:1px dotted var(--rule);
  transition:color var(--t-tap) var(--ease),border-color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .cs-void:hover{color:var(--late);border-color:currentColor}
}
.cs-void:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}

/* Свёртка прихода по броням — строка-кнопка того же вида, что строка книги. */
.cs-fold{cursor:pointer}
@media (hover:hover) and (pointer:fine){
  .cs-fold:hover{background:var(--paper)}
}
.cs-fold:active{background:var(--sunk)}
.cs-fold:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.cs-fold em{display:inline-flex;align-items:center;gap:3px;font-style:normal;color:var(--ink-3)}
.cs-fold em svg{transition:transform var(--t-move) var(--ease)}
.cs-fold.open em svg{transform:rotate(90deg)}
.cs-row.in-fold{background:var(--paper)}
.cs-row.in-fold .cs-what{padding-left:12px}

/* Итог страницы — под двойной чертой: пришло, ушло, остаток на конец дня. */
.cs-foot{
  display:flex;justify-content:flex-end;flex-wrap:wrap;gap:4px 22px;
  margin:0;padding:9px 6px 4px;border-top:3px double var(--rule);
}
.cs-foot-i{display:flex;align-items:baseline;gap:7px}
.cs-foot-i dt{font-size:11px;font-weight:500;color:var(--ink-3)}
.cs-foot-i dd{margin:0;font-size:13px;font-weight:550;letter-spacing:-.01em;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-foot-i.in dd{color:var(--ok)}
.cs-foot-i.end dd{font-size:14px;font-weight:650;color:var(--ink)}

.cs-note{max-width:560px;margin:26px auto 0;padding:0 6px;text-align:center;font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.cs-empty + .cs-note{margin-top:0}

/* Строки каскадом при входе и смене отбора — тем же ходом, что реестр документов. */
.ac-body.fresh .cs-row{
  animation:acIn var(--t-move) var(--ease) both;
  animation-delay:min(calc(var(--i,0) * 30ms), 300ms);
}

/* ── узкий стол: место уходит под сумму ── */
@media (max-width:980px){
  .cs-row{
    grid-template-columns:44px 20px minmax(0,1fr) auto;
    grid-template-areas:"at gl what sum" "at gl what place";
    row-gap:2px;
  }
  .cs-where{justify-self:end;font-size:11px;max-width:180px}
}

/* ── телефон ── */
@media (max-width:720px){
  .cs-places{order:0;width:100%}
  .cs-acts{order:1;width:100%;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .cs-acts .btn-primary{grid-column:1 / -1}
  .cs-act{justify-content:center;height:38px;padding:0 8px}
  .cs-day{padding-top:10px}
  .cs-row{
    grid-template-columns:38px minmax(0,1fr) auto;
    grid-template-areas:"at what sum" "gl what place";
    gap:1px 10px;padding:9px 4px;
  }
  .cs-glyph{justify-self:end;align-self:start}
  .cs-at{align-self:end}
  .cs-where{max-width:120px}
  .cs-row.in-fold .cs-what{padding-left:6px}
  .cs-foot{justify-content:flex-start;gap:4px 16px}
}

/* ═══ окна ═══ */

/* Прибор включается один раз, при открытии: смена места или статьи
   перерисовывает окно, но не проигрывает вход табло заново. */
.dlg-cash.settled .pay-glass,.dlg-cash.settled .pay-entry input,.dlg-cash.settled .pay-sec,
.dlg-cash.settled .pay-more,.dlg-cash.settled .pay-foot{animation:none}
.dlg-cash .pay-body .pay-sec{margin-top:16px}
.dlg-cash .pay-body>.pay-sec:first-child,.dlg-cash .cx-seg + .pay-sec,.dlg-cash .cx-warn + .pay-sec{margin-top:0}

/* Табло кассы: уход помечен минусом того же кегля, что число; поле
   меряется по набранному, и знак стоит вплотную к сумме. */
.cx-screen .pay-digits{flex:0 1 auto;gap:2px}
.cx-screen .pay-entry input{width:auto;max-width:230px}
.cx-screen.cx-out .pay-minus{color:var(--accent-ink)}
.cx-screen .pay-owe b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-screen .pay-owe+.pay-owe{margin-top:6px}
.cx-shown output{
  font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pay-status.calm i{background:var(--band-ink-2)}
.pay-status.calm b{color:var(--accent-ink)}
/* Итог пересчёта проявляется, когда его записали: это и есть ответ окна. */
.dlg-cash .cx-shown{animation:payShow var(--t-page) var(--ease) both}

/* Места — как способы оплаты, только в две колонки: имена длиннее. */
.cx-places{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.cx-place{flex-direction:row;justify-content:flex-start;gap:9px;min-height:48px;padding:9px 11px;text-align:left}
.cx-place i{flex-shrink:0}
.cx-place span{white-space:normal;text-align:left;font-size:12px;line-height:1.25}

/* Выемка или перевод — два режима одного окна. */
.cx-seg{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:2px;margin-bottom:16px;border-radius:var(--r);background:var(--sunk)}
.cx-seg-b{
  height:34px;border-radius:calc(var(--r) - 2px);font-size:12.5px;font-weight:500;color:var(--ink-2);
  transition:background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .cx-seg-b:not(.on):hover{color:var(--ink)}
}
.cx-seg-b.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
.cx-seg-b:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

/* Статья: поиск по списку и новая здесь же. */
.cx-find{position:relative;display:block}
.cx-find svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.cx-find input{width:100%;padding-left:30px}
.cx-cats{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.cx-chip{
  height:30px;padding:0 11px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card);
  font-size:12px;color:var(--ink-2);white-space:nowrap;
  transition:background-color var(--t-tap) var(--ease),border-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease),transform var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .cx-chip:not(.on):hover{border-color:var(--ink-3);color:var(--ink)}
}
.cx-chip:active{transform:scale(.97)}
.cx-chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cx-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cx-new{border-style:dashed;color:var(--ink)}
.cx-none{font-size:12px;color:var(--ink-3)}

.cx-field{display:block;margin-top:16px}
.cx-field>span{display:block;margin-bottom:6px;font-size:11px;font-weight:500;color:var(--ink-3)}
.cx-field select{width:100%}

/* Предупреждение — словами на тоне, без кромки: это не ошибка, а сведение. */
.cx-warn{margin:0 0 14px;padding:9px 11px;border-radius:var(--r-sm);background:var(--wait-bg);color:var(--wait);font-size:12px;line-height:1.45}
.cx-error{margin-top:12px;font-size:12px;color:var(--late)}
.cx-hint{margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.cx-counted{margin:0 0 14px;font-size:12px;font-weight:500;color:var(--ok)}
.cx-counted.short{color:var(--late)}
.cx-counted.over{color:var(--wait)}

@media (max-width:520px){
  .cx-places{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .ac-body.fresh .cs-row{animation:none}
  .cs-fold em svg{transition:none}
  .cs-act:active,.cx-chip:active{transform:none}
  .dlg-cash .cx-shown{animation:none}
}

/* Расход, найденный в ⌘K, коротко подсвечен в книге — и затихает. */
.ac-body .cs-row.hit{animation:csHit 1.6s var(--ease) both}
@keyframes csHit{from{background-color:var(--wait-bg)}to{background-color:transparent}}
@media (prefers-reduced-motion:reduce){
  .ac-body .cs-row.hit{animation:none;background:var(--wait-bg)}
}

/* Добавить место в настройках: одна строка, три двери — касса, карта, счёт. */
.st-add.cs-adds{gap:12px;cursor:default}
.st-add.cs-adds>span{margin-right:-4px}