/* ═══════════════════════════════════════════════════════════
   УЧЁТ — плита месяца и реестр документов
   ═══════════════════════════════════════════════════════════
   Та же плита, что у броней и наряда: имя, месяц с шагом и показания,
   которые и есть кнопки отбора. По нижнему краю ярлыки вкладок, как у
   аналитики: выбранный того же цвета, что бумага, неготовые обведены
   пунктиром (§8.5). Ниже реестр — ведомость, а не карточки: постоянные
   колонки, волосяные черты между строками, суммы табличными цифрами
   вправо. Цвет — только тоны состояний (§8.3); расхождение с бронью
   говорит знаком, а не кромкой. */
.accounting{
  display:none;flex:1;min-width:0;flex-direction:column;
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;
}
body.on-accounting .top,body.on-accounting .cal{display:none}
body.on-accounting .accounting{display:flex}

/* ── плита ── */
.ac-plate{
  position:relative;isolation:isolate;flex-shrink:0;
  background:var(--band);color:var(--band-ink);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .07);
  --band-ink-2:var(--plate-ink-2); --band-ink-3:var(--plate-ink-3);
  --o1x:10%; --o1y:-60%; --o2x:70%; --o2y:-70%; --o3x:-6%; --o3y:-30%;
}
.ac-plate > :not(.plate-lite){position:relative;z-index:1}
.ac-face{display:flex;align-items:flex-end;gap:18px 28px;flex-wrap:wrap;padding:18px 22px 10px}
.ac-of{margin-right:auto;min-width:0}
.ac-of h2{font-size:26px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--band-ink)}
.ac-month{display:flex;align-items:center;gap:4px;margin-top:9px}
.ac-month b{min-width:108px;text-align:center;font-size:12.5px;font-weight:550;color:var(--band-ink);font-variant-numeric:tabular-nums}
.ac-step{
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);
  background:rgb(237 234 227 / .08);color:var(--band-ink-2);
  transition:background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease),transform var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .ac-step:hover{background:rgb(237 234 227 / .16);color:var(--band-ink)}
}
.ac-step:active{transform:scale(.94)}
.ac-step:focus-visible{outline:2px solid var(--band-ink);outline-offset:1px}

/* Показания — кнопки отбора: нажатое светлее, повторное нажатие отпускает. */
.ac-reads{display:flex;gap:4px;flex-wrap:wrap;align-items:flex-end}
.ac-read{
  min-width:118px;padding:7px 12px 7px;border-radius:var(--r);text-align:left;
  transition:background-color var(--t-tap) var(--ease),transform var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .ac-read:hover{background:rgb(237 234 227 / .08)}
}
.ac-read.on{background:rgb(237 234 227 / .14)}
.ac-read:active{transform:scale(.97)}
.ac-read:focus-visible{outline:2px solid var(--band-ink);outline-offset:1px}
.ac-read i{display:flex;align-items:center;gap:6px;font-size:11px;font-style:normal;font-weight:500;color:var(--band-ink-3);white-space:nowrap}
.ac-read.waiting i::before,.ac-read.overdue i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--plate-wait)}
.ac-read.overdue i::before{background:var(--plate-late)}
.ac-read.zero i::before{background:var(--band-ink-3)}
.ac-read b{display:block;margin-top:4px;font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1.05;color:var(--band-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-read span{display:block;margin-top:2px;font-size:11px;color:var(--band-ink-3);white-space:nowrap}
.ac-read.zero b{color:var(--band-ink-3)}

/* Ярлыки на нижнем крае плиты: выбранный сливается с бумагой. */
.ac-tabs{display:flex;gap:4px;padding:6px 22px 0;overflow-x:auto;scrollbar-width:none}
.ac-tabs::-webkit-scrollbar{display:none}
.ac-tab{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:112px;
  padding:9px 14px 8px;border-radius:var(--r) var(--r) 0 0;color:var(--band-ink-2);text-align:left;white-space:nowrap;
  transition:background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease);
}
.ac-tab b{font-size:12.5px;font-weight:600;letter-spacing:-.02em}
.ac-tab span{font-size:10.5px;color:var(--band-ink-3)}
@media (hover:hover) and (pointer:fine){
  .ac-tab:not(.on):hover{color:var(--band-ink);background:rgb(237 234 227 / .06)}
}
/* Вкладки, которой ещё нет, тише — пунктиром рамки, а не бледностью букв. */
.ac-tab.soon:not(.on){outline:1px dashed rgb(237 234 227 / .3);outline-offset:-1px}
.ac-tab.on{background:var(--card);color:var(--ink)}
.ac-tab.on span{color:var(--ink-3)}
.ac-tab:focus-visible{outline:2px solid var(--band-ink);outline-offset:-2px}

/* ── обойма, юрлицо, поиск, выгрузка ── */
.ac-bar{display:flex;align-items:center;gap:10px;flex-shrink:0;padding:10px 22px;border-bottom:1px solid var(--rule-2)}
.ac-seg{display:flex;gap:2px;padding:2px;border-radius:var(--r);background:var(--sunk);min-width:0;overflow-x:auto;scrollbar-width:none}
.ac-seg::-webkit-scrollbar{display:none}
.ac-seg-b{
  display:inline-flex;align-items:baseline;gap:5px;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);
  line-height:28px;
}
.ac-seg-b em{font-style:normal;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .ac-seg-b:hover{color:var(--ink)}
}
.ac-seg-b.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
.ac-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ac-pick{flex-shrink:0}
.ac-pick select{
  max-width:170px;height:32px;padding:0 28px 0 10px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--card);font:inherit;font-size:12px;color:var(--ink-2);
  transition:border-color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .ac-pick select:hover{border-color:var(--ink-3)}
}
.ac-find{
  display:flex;align-items:center;gap:8px;height:32px;padding:0 11px;margin-left:auto;min-width:0;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--card);color:var(--ink-3);
  transition:border-color var(--t-tap) var(--ease);
}
.ac-find:focus-within{border-color:var(--ink-3);color:var(--ink-2)}
.ac-find svg{flex-shrink:0}
.ac-find input{width:220px;min-width:0;border:none;outline:none;background:none;font-size:12px;color:var(--ink)}
.ac-find input::placeholder{color:var(--ink-3)}
.ac-find input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.ac-csv{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 4px;white-space:nowrap;
  font-size:12px;font-weight:500;color:var(--ink-2);border-bottom:1px dotted transparent;
  transition:color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .ac-csv:hover{color:var(--ink)}
}
.ac-csv:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-radius:var(--r-sm)}

/* ── реестр ── */
.ac-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.ac-scroll:focus{outline:none}
.ac-body{padding:4px 16px 28px}
.ac-group{padding-top:12px}
.ac-group h3{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;
  margin:0;padding:6px 6px 5px;background:var(--card);font-size:12px;font-weight:500;color:var(--ink-3);
}
.ac-group h3::after{content:"";flex:1;height:1px;background:var(--rule-2)}

/* Строка — ведомость: номер с датой, род со знаком, кому и за что, сумма,
   состояние. Кнопка лежит под всей строкой и открывает лист; код брони
   поднят над ней и открывает карточку. */
.ac-row{
  position:relative;display:grid;align-items:center;gap:0 14px;
  grid-template-columns:78px 128px minmax(0,1fr) 112px minmax(170px,230px);
  padding:8px 6px;border-bottom:1px solid var(--rule-2);border-radius:var(--r-sm);
  transition:background-color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .ac-row:hover{background:var(--paper)}
}
.ac-open{position:absolute;inset:0;z-index:0;border-radius:inherit}
.ac-open:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.ac-row>span{position:relative;z-index:1;min-width:0;pointer-events:none}
.ac-no{text-align:right}
.ac-no b{display:block;font-size:13px;font-weight:550;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-no small{display:block;font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-kind{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.ac-kind i{display:flex;color:var(--ink-3)}
.ac-who b{display:block;font-size:13px;font-weight:550;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-who>span{display:flex;align-items:baseline;gap:8px;font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-code{
  flex-shrink:0;pointer-events:auto;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;
  color:var(--ink);border-bottom:1px dotted var(--ink-3);
  transition:color var(--t-tap) var(--ease),border-color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .ac-code:hover{border-bottom-style:solid;border-color:var(--ink)}
}
.ac-code:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}
.ac-drift{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:11.5px;font-style:normal;color:var(--wait);white-space:normal}
.ac-drift::before{
  content:"";width:12px;height:12px;flex-shrink:0;background:currentColor;
  -webkit-mask:var(--glyph-alert) center / contain no-repeat;mask:var(--glyph-alert) center / contain no-repeat;
}
.ac-sum{text-align:right;font-size:13.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-sum.minus{color:var(--ink-2)}
.ac-state{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--ink-2)}
.ac-state i{width:7px;height:7px;margin-top:5px;flex-shrink:0;border-radius:50%;background:var(--ink-3)}
.ac-state b{display:block;font-weight:500}
.ac-state small{display:block;font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-state.ok{color:var(--ok)} .ac-state.ok i{background:var(--ok)}
.ac-state.wait{color:var(--wait)} .ac-state.wait i{background:var(--wait)}
.ac-state.late{color:var(--late)} .ac-state.late i{background:var(--late)}
.ac-state.void{color:var(--ink-3)} .ac-state.void i{background:none;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
/* Аннулированный остаётся в реестре зачёркнутым: номер не вернётся. */
.ac-row.void .ac-no b,.ac-row.void .ac-who b,.ac-row.void .ac-sum{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-3)}

/* Строки каскадом при входе и смене отбора: 30 мс на строку, не дольше 300 мс. */
.ac-body.fresh .ac-row{
  animation:acIn var(--t-move) var(--ease) both;
  animation-delay:min(calc(var(--i,0) * 30ms), 300ms);
}
@keyframes acIn{from{opacity:0;transform:translateY(4px)}}

/* ── пусто и «скоро» ──
   Не серая фраза посреди пустоты, а состояние: знак, одна строка и дверь. */
.ac-empty,.ac-soon{display:flex;flex-direction:column;align-items:center;gap:10px;padding:56px 22px 60px;text-align:center}
.ac-empty i,.ac-soon i{display:flex;color:var(--ink-3)}
.ac-empty b,.ac-soon b{font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.ac-soon p{max-width:460px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.ac-soon small{font-size:11.5px;color:var(--ink-3)}
.ac-empty .btn,.ac-soon .btn{margin-top:4px}

/* ── узкий стол ──
   Пять колонок не помещаются: род уходит под номер, состояние — под сумму,
   а «кому и за что» получает всю середину. */
@media (max-width:1240px){
  .ac-row{
    grid-template-columns:86px minmax(0,1fr) minmax(120px,auto);
    grid-template-areas:"no who sum" "kind who state";
    row-gap:3px;
  }
  .ac-no{grid-area:no}
  .ac-kind{grid-area:kind;justify-content:flex-end;font-size:11.5px;gap:6px}
  .ac-who{grid-area:who;align-self:center}
  .ac-sum{grid-area:sum}
  .ac-state{grid-area:state;justify-content:flex-end;text-align:right}
  .ac-state i{order:1}
  .ac-find input{width:150px}
}

/* ── телефон ── */
@media (max-width:720px){
  .work>.accounting{border-radius:0;box-shadow:none}
  .ac-face{gap:12px;padding:14px 16px 8px}
  .ac-of{flex-basis:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .ac-of h2{font-size:22px}
  .ac-month{margin-top:0}
  .ac-month b{min-width:0}
  .ac-reads{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
  .ac-read{min-width:0;padding:6px 8px}
  .ac-read b{font-size:18px}
  .ac-tabs{padding:4px 12px 0}
  .ac-tab{min-width:96px;padding:8px 12px 7px}
  /* Поиск — во всю ширину первым: им пользуются чаще остального. */
  .ac-bar{flex-wrap:wrap;padding:8px 12px;gap:8px}
  .ac-find{order:1;flex:1 1 100%;margin:0;height:38px}
  .ac-find input{width:100%}
  .ac-pick{order:2;flex:1;min-width:0}
  .ac-pick select{width:100%;max-width:none;height:38px}
  .ac-csv{order:2;height:38px}
  .ac-seg{order:3;width:100%}
  .ac-body{padding:0 8px 88px}
  /* Узко строка складывается в три строчки: род и номер, кто и за что, сумма и состояние. */
  .ac-row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"kind no" "who who" "state sum";
    row-gap:4px;padding:10px 6px;
  }
  .ac-kind{grid-area:kind}
  .ac-no{grid-area:no;display:flex;align-items:baseline;gap:6px}
  .ac-no small{order:-1}
  .ac-who{grid-area:who}
  .ac-who>span{flex-wrap:wrap;white-space:normal}
  .ac-sum{grid-area:sum;align-self:start}
  .ac-state{grid-area:state;justify-content:flex-start;text-align:left}
  .ac-state i{order:0}
  .ac-kind{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .ac-body.fresh .ac-row{animation:none}
}