/* ═══════════════════════════════════════════════════════════
   БРОНИ — лист заездов у стойки
   ═══════════════════════════════════════════════════════════
   Календарь — прибор, журнал — книга смены, наряд — лист с галками, а
   брони — лист заездов, который лежит у стойки и по которому встречают
   гостей. Наверху та же плита, что у наряда и журнала: дата, показания
   и линейка суток с рисками событий и чертой «сейчас». Ниже бумага:
   дни один за другим, у каждого отрывной листок с числом, строки —
   гость за гостем.

   Цвет только там, где он отвечает на вопрос (§8.3): ребро строки —
   род события (заезд, выезд, сеанс — тот же язык, что в «Дальше
   сегодня»), деньги — тоном ожидания и просрочки, знак гостя — его
   собственным тоном из картотеки. Всё остальное — чернила на бумаге. */
.bookings{
  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-bookings .top,body.on-bookings .cal{display:none}
body.on-bookings .bookings{display:flex}

/* ── плита ── */
.bl-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:14%; --o1y:-60%; --o2x:74%; --o2y:-70%; --o3x:-6%; --o3y:-30%;
  /* Риски на тёмной плите: те же роды, что у ребра строки, но светлее —
     на лаке чернильные тона гаснут. */
  --bl-in:var(--plate-ok); --bl-out:var(--plate-wait); --bl-hour:var(--plate-ink-2); --bl-late:var(--plate-late);
}
.bl-plate > :not(.plate-lite){position:relative;z-index:1}
.bl-face{display:flex;align-items:flex-end;gap:20px 28px;flex-wrap:wrap;padding:18px 22px 14px}
.bl-of{margin-right:auto;min-width:0}
.bl-of h2{font-size:26px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--band-ink)}
.bl-of span{display:block;margin-top:7px;font-size:12.5px;color:var(--band-ink-2)}

/* Показания — те же кнопки отбора, что обойма ниже: число, на которое
   смотрят, и есть вопрос «покажи мне их». Нажатое — светлее, повторное
   нажатие отпускает. */
.bl-reads{display:flex;gap:4px;flex-wrap:wrap;align-items:flex-end}
.bl-read{
  min-width:0;padding:7px 11px 8px;border-radius:var(--r);text-align:left;
  transition:background-color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .bl-read:hover{background:rgb(237 234 227 / .08)}
}
.bl-read.on{background:rgb(237 234 227 / .14)}
.bl-read:active{transform:scale(.97)}
.bl-read:focus-visible{outline:2px solid var(--band-ink);outline-offset:1px}
.bl-read i{
  display:block;font-size:11px;font-style:normal;font-weight:500;
  color:var(--band-ink-3);white-space:nowrap;
}
.bl-read b{
  display:block;margin-top:5px;font-size:22px;font-weight:600;
  letter-spacing:-.02em;line-height:1;color:var(--band-ink);font-variant-numeric:tabular-nums;
}
.bl-read.zero b{color:var(--band-ink-3)}
.bl-read.live:not(.zero) b{color:var(--bl-in)}
.bl-read.wait:not(.zero) b{color:var(--bl-out)}
.bl-plate .bl-new{height:32px;padding:0 13px;align-self:flex-end}
.bl-new svg{width:13px;height:13px}
/* На тёмной плите чёрная кнопка тонула бы в лаке: здесь она светлая. */
.bl-plate .bl-new{background:var(--band-ink);color:var(--band);box-shadow:none}
@media (hover:hover) and (pointer:fine){
  .bl-plate .bl-new:hover{background:var(--plate-hi)}
}

/* Линейка суток — та же, что несёт наряд и шахматку. */
.bl-ruler{position:relative;height:46px;margin:0 22px;border-top:1px solid rgb(237 234 227 / .12)}
.bl-hours{position:absolute;inset:0}
.bl-h{position:absolute;left:calc(var(--x) * 100%);top:0;width:1px;height:6px;background:rgb(237 234 227 / .18)}
.bl-h.big{height:10px;background:rgb(237 234 227 / .36)}
.bl-h b{
  position:absolute;top:13px;left:0;transform:translateX(-50%);
  font-size:9.5px;font-weight:500;color:var(--band-ink-3);
}
.bl-h:first-child b{transform:none}
.bl-h:last-child b{transform:translateX(-100%)}
.bl-pins{position:absolute;left:0;right:0;bottom:5px;height:14px}
.bl-pin{
  position:absolute;left:calc(var(--x) * 100%);bottom:0;width:7px;height:14px;
  transform:translateX(-50%);border-radius:2px;background:var(--bl-hour);
  transition:transform var(--t-tap) var(--ease);
}
.bl-pin.k-in{background:var(--bl-in)}
.bl-pin.k-out{background:var(--bl-out);height:11px}
@media (hover:hover) and (pointer:fine){
  .bl-pin:hover{transform:translateX(-50%) scaleY(1.3)}
}
.bl-pin:focus-visible{outline:2px solid var(--band-ink);outline-offset:2px}
.bl-nowline{
  position:absolute;left:calc(var(--x) * 100%);top:0;bottom:0;width:1.5px;
  background:var(--now);
}

/* ── обойма и поиск ── */
.bl-bar{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  padding:10px 22px;border-bottom:1px solid var(--rule-2);
}
.bl-seg{display:flex;gap:2px;padding:2px;border-radius:var(--r);background:var(--sunk);flex-shrink:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
.bl-seg::-webkit-scrollbar{display:none}
.bl-seg-b{
  height:28px;padding:0 11px;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){
  .bl-seg-b:hover{color:var(--ink)}
}
.bl-seg-b.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
.bl-seg-b:active{transform:scale(.97)}
.bl-find{
  display:flex;align-items:center;gap:8px;height:32px;padding:0 11px;margin-left:auto;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--card);color:var(--ink-3);
  transition:border-color var(--t-tap) var(--ease);
}
.bl-find:focus-within{border-color:var(--ink-3);color:var(--ink-2)}
.bl-find svg{flex-shrink:0}
.bl-find input{
  width:200px;min-width:0;border:none;outline:none;background:none;
  font-size:12px;color:var(--ink);
}
.bl-find input::placeholder{color:var(--ink-3)}
.bl-find input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* ── бумага ── */
.bl-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.bl-scroll:focus{outline:none}
.bl-body{padding-bottom:24px}

/* Страница дня. Листок с числом — тот же отрывной квадратик, что в
   журнале: тёмный, из материала плиты. Заголовок липкий: пока листают
   день, число стоит наверху и говорит, где ты. */
.bl-dayhead{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;
  padding:14px 22px 9px;background:var(--card);
  box-shadow:inset 0 -1px 0 var(--rule-2);
}
.bl-num{
  flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-mark);background:var(--band);color:var(--band-ink);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .09);
  font-size:18px;font-weight:600;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.bl-day.today .bl-num{box-shadow:inset 0 1px 0 rgb(255 255 255 / .09),0 0 0 2px var(--card),0 0 0 3.5px var(--now)}
.bl-daytitle{min-width:0}
.bl-daytitle b{display:block;font-size:14px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.bl-daytitle em{display:block;margin-top:2px;font-size:11px;font-style:normal;color:var(--ink-2)}

.bl-rows{display:flex;flex-direction:column;padding:4px 14px 10px}

/* Строка — гость. Кнопка строки открывает бронь; звонок и письмо стоят
   рядом с ней, а не внутри: нажал трубку — звонишь, а не открываешь
   карточку. Ребро слева — род события, тем же языком, что «Дальше
   сегодня» в шапке: заезд зелёный, выезд охра, сеанс — чернила. */
.bl-row{
  position:relative;display:flex;align-items:stretch;gap:4px;
  border-radius:var(--r);transition:background-color .12s;
}
.bl-row::before{
  content:"";position:absolute;left:0;top:11px;bottom:11px;width:2.5px;border-radius:2px;
  background:var(--ink-3);
}
.bl-row.k-in::before{background:var(--ok)}
.bl-row.k-out::before{background:var(--wait)}
@media (hover:hover) and (pointer:fine){
  .bl-row:hover{background:var(--paper)}
}
.bl-row.past{opacity:.55}
@media (hover:hover) and (pointer:fine){
  .bl-row.past:hover{opacity:.8}
}
.bl-open{
  flex:1;min-width:0;display:grid;align-items:center;column-gap:12px;row-gap:2px;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  grid-template-areas:"at av who purse" "at av what purse";
  padding:9px 8px 9px 14px;text-align:left;border-radius:var(--r);min-height:56px;
}
.bl-open:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.bl-at{
  grid-area:at;font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:44px;
}
.bl-at i{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3);margin-top:1px}
/* Знак гостя — тем же тоном, что в картотеке: по нему находят человека
   быстрее, чем читают фамилию. У живущего сейчас — зелёная точка с
   дыханием, единственное движение в списке, и оно про смысл. */
.bl-av{
  grid-area:av;position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-mark);font-size:11px;font-style:normal;font-weight:600;
  letter-spacing:.03em;color:var(--av-ink);background:var(--av,var(--stop));
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .06);
}
.bl-row.live .bl-av::after{
  content:"";position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 2px var(--card);
}
.bl-row.live .bl-av::before{
  content:"";position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--ok);animation:blPulse 2.4s cubic-bezier(.2,.8,.3,1) infinite;
}
@keyframes blPulse{0%{transform:scale(.7);opacity:.9}70%,100%{transform:scale(2.1);opacity:0}}
.bl-who{grid-area:who;display:flex;align-items:center;gap:7px;min-width:0}
.bl-who>span{flex:0 1 auto;min-width:0;font-size:13.5px;font-weight:600;letter-spacing:-.025em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Метка гостя — та же наклейка, что в картотеке, только меньше. В узкой
   строке она уступает имени: сжимается втрое охотнее, а фамилия остаётся
   целой — по ней гостя и узнают. */
.bl-who .gtags{display:inline-flex;gap:4px;flex:0 3 auto;min-width:0;max-width:50%;overflow:hidden}
.bl-who .gs-tag{
  height:17px;padding:0 6px;max-width:100%;line-height:17px;font-size:10.5px;
  display:block;overflow:hidden;text-overflow:ellipsis;animation:none;
}
.bl-what{grid-area:what;font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-purse{
  grid-area:purse;font-size:12px;font-weight:500;letter-spacing:0;
  white-space:nowrap;text-align:right;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.bl-purse.wait{color:var(--wait)}
.bl-purse.late{color:var(--late)}
.bl-acts{display:flex;align-items:center;gap:2px;padding-right:6px;flex-shrink:0}
.bl-act{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--ink-2);
  transition:background-color var(--t-tap) var(--ease), color var(--t-tap) var(--ease), transform var(--t-tap) var(--ease);
}
.bl-act svg{width:15px;height:15px}
@media (hover:hover) and (pointer:fine){
  .bl-act:hover{background:var(--sunk);color:var(--ink)}
}
.bl-act:active{transform:scale(.94)}
.bl-act:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* Черта «сейчас» внутри дня — та же, что на линейке и в шахматке. */
.bl-now{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 14px;color:var(--now)}
.bl-now b{font-size:11px;font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums}
.bl-now i{flex:1;height:1.5px;background:var(--now)}

/* Пустой день говорит, что он пуст, и зовёт: пустота — приглашение. */
.bl-empty{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px 14px}
.bl-empty.wide{padding:28px 22px}
.bl-empty b{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.bl-add{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--card);
  font-size:11.5px;font-weight:550;color:var(--ink);box-shadow:var(--sh-1);
  transition:background-color var(--t-tap) var(--ease), border-color var(--t-tap) var(--ease);
}
.bl-add svg{width:12px;height:12px}
@media (hover:hover) and (pointer:fine){
  .bl-add:hover{background:var(--sunk);border-color:var(--ink-3)}
}
.bl-add:active{transform:scale(.97)}

/* Раньше и дальше — тихие строки на бумаге, не кнопки. */
.bl-more{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  padding:11px 22px;font-size:11.5px;color:var(--ink-3);
  transition:color var(--t-tap) var(--ease), background-color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .bl-more:hover{color:var(--ink);background:var(--paper)}
}
.bl-more svg{width:13px;height:13px}

/* Строка, к которой пришли по риске, вспыхивает бумагой и гаснет. */
.bl-row.hit{animation:blHit 1.4s var(--ease) both}
@keyframes blHit{0%,30%{background:var(--sunk)}100%{background:transparent}}

/* Появление строк дня каскадом: 30 мс на строку, не дольше 300 мс на
   день — иначе список открывается позже, чем нажали. Только при входе и
   смене отбора: тик часов строки не переигрывает. */
.bl-body.fresh .bl-row{
  animation:blIn .26s cubic-bezier(.2,0,0,1) both;
  animation-delay:min(calc(var(--i,0) * 30ms), 300ms);
}
@keyframes blIn{from{opacity:0;transform:translateY(4px)}}

/* Липкая кнопка внизу — только на телефоне; на широком она на плите. */
.bl-foot{display:none}

/* ── телефон ── */
@media (max-width:720px){
  /* Экраны занимают весь лист: у телефона нет полей, в которые ставят
     карточку. Правило здесь, а не в sidebar.css: там оно стояло бы
     раньше карточки шахматки и проигрывало ей. */
  .main>.work{padding:0}
  .work>:is(.cal,.st,.journal,.guests,.tasks,.bookings,.analytics,.reports){border-radius:0;box-shadow:none}
  .bl-face{gap:14px 16px;padding:14px 16px 12px}
  .bl-of{flex-basis:100%}
  .bl-of h2{font-size:22px}
  .bl-reads{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
  .bl-read{padding:6px 8px 7px}
  .bl-read b{font-size:20px}
  .bl-read i{font-size:8.5px;letter-spacing:.1em}
  .bl-plate .bl-new{display:none}
  .bl-ruler{margin:0 16px}
  .bl-bar{flex-wrap:wrap;padding:8px 12px;gap:8px}
  .bl-seg{order:2;width:100%}
  .bl-seg-b{flex:1;padding:0 6px;height:32px;font-size:11.5px}
  .bl-find{order:1;width:100%;margin:0;height:38px}
  .bl-find input{width:100%}
  .bl-dayhead{padding:12px 16px 8px}
  .bl-rows{padding:4px 8px 10px}
  .bl-open{
    grid-template-columns:auto auto minmax(0,1fr);column-gap:10px;
    grid-template-areas:"at av who" "at av what" "at av purse";
    padding:10px 4px 10px 12px;min-height:64px;
  }
  /* Узко — вторая строка переносится, а не обрывается: «Баня дро…» не
     говорит, какая баня. */
  .bl-what{white-space:normal;line-height:1.3}
  .bl-purse{text-align:left;margin-top:2px}
  .bl-at{min-width:40px;font-size:12px}
  .bl-act{width:44px;height:44px}
  .bl-acts{gap:0;padding-right:2px}
  .bl-body{padding-bottom:88px}
  .bl-foot{
    display:flex;justify-content:center;flex-shrink:0;
    position:sticky;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(to top, var(--card) 70%, transparent);pointer-events:none;
  }
  .bl-foot .bl-new{pointer-events:auto;height:44px;padding:0 18px;font-size:13px;border-radius:var(--r-lg);box-shadow:var(--sh-2)}
}

@media (prefers-reduced-motion:reduce){
  .bl-body.fresh .bl-row{animation:none}
  .bl-row.live .bl-av::before{animation:none;opacity:.35}
  .bl-row.hit{animation:none;background:var(--sunk)}
  .bl-read:active,.bl-seg-b:active,.bl-act:active,.bl-add:active{transform:none}
}