/* ═══════════════════════════════════════════════════════════
   Новая бронь — бланк заявки
   ═══════════════════════════════════════════════════════════
   Панель у правого края, а не окно по центру: бронь заводят, глядя в
   шахматку, и закрывать её собой незачем.

   Предмет, который здесь нарисован, — бланк. У бумажного бланка слева
   идёт поле со сплошной чертой, на нём стоят номера граф, а значения
   пишут на линейках. Отсюда всё оформление: вертикальная черта на всю
   высоту сшивает шесть граф в один документ, который заполняют сверху
   вниз, номер на черте говорит, где ты в нём находишься, а поля ввода —
   линейки, а не коробки: коробка требует «заполнить форму», линейка
   позволяет «вписать».

   Цветного в бланке два места: тёмная лента занятости — та же приборная
   полоса, что несёт шахматку, и статусы. Остальное — чернила на бумаге.
   ═══════════════════════════════════════════════════════════ */

/* Шире обычной панели: здесь и лента времени, и расчёт в две колонки.
   Дальше расти нельзя — панель перестанет быть краем и станет окном. */
.sheet-new{width:min(474px,calc(100vw - 28px))}
/* Затемнение ослаблено ровно для этого окна: шахматка за панелью должна
   оставаться читаемой — из неё и называют свободное время вслух. */
html:has(#shNew.open) .scrim{background:rgba(25,24,21,.16)}

/* ── шапка ──
   Не полка над бланком, а слой поверх него: шапка липнет к верху той же
   прокрутки, и графы уходят под неё размытыми. Тон — бумажный, как у
   всей служебной оснастки продукта, но полупрозрачный: под ним видно,
   что документ продолжается. */
.nb-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain}
.nb-head{
  position:sticky;top:0;z-index:3;
  display:flex;align-items:center;gap:11px;padding:0 14px 0 22px;min-height:58px;
  background:var(--paper-glass);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
  backdrop-filter:blur(20px) saturate(135%);
}
/* Кромка вместо постоянной линии: она нужна ровно тогда, когда под
   шапку что-то заехало, и в остальное время только режет панель. */
.nb-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--rule);opacity:0;transition:opacity .18s;
}
.nb-under .nb-head::after{opacity:1}
.nb-head b{font-size:17px;font-weight:600;letter-spacing:-.042em;flex-shrink:0}
.nb-head .sh-close{margin-left:auto}

/* Штамп: та же печать, что «оплачено» на чеке, только служебная — мелкая,
   чернильная и чуть косая, потому что штампы ровно не ставят. */
.nb-stamp{
  padding:3px 7px 2px;border:1px solid var(--rule);border-radius:var(--r-xs);
  font-size:8.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-style:normal;color:var(--ink-3);
  transform:rotate(-2.5deg);flex-shrink:0;
}
/* Имя гостя сменяет штамп: бланк с этой минуты чей-то. */
.nb-whose{
  min-width:0;font-size:12.5px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nb-whose::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;
  background:var(--ink-3);vertical-align:middle;margin-right:8px}

.nb-body{padding-bottom:0}

/* ── графа бланка ──
   Поле с чертой набрано границей самой графы, а не отдельной линией:
   графы стоят вплотную, и черта получается непрерывной сама собой —
   разрывов между разделами на ней не бывает. */
.nb-box{
  position:relative;margin-left:27px;border-left:1px solid var(--rule);
  padding:19px 22px 20px 20px;
}
.nb-box:first-child{padding-top:17px}
.nb-box:last-child{padding-bottom:28px}

.nb-box h3{
  display:flex;align-items:center;gap:9px;margin-bottom:13px;
  font-size:11px;font-weight:500;
  color:var(--ink-3);
}
/* Номер сидит на черте и прерывает её собой — так номера граф и стоят
   на бумаге. Рамки у него нет: рамка сделала бы из бланка мастер
   с шагами, а здесь заполняют всё сразу и в любом порядке. */
.nb-box h3 i{
  position:absolute;left:-11px;width:21px;text-align:center;
  background:var(--card);padding:3px 0;
  font-size:11px;font-style:normal;font-weight:500;letter-spacing:0;color:var(--ink);
}

/* ── линейки вместо коробок ──
   Значение вписывают на линейку. Подчёркивание темнеет под курсором и
   становится чернильным в фокусе — это вся обратная связь, которая
   строке ввода нужна. */
.nb-field{
  display:flex;align-items:center;gap:9px;padding:8px 2px 7px;
  border-bottom:1px solid var(--rule);transition:border-color .13s;
}
.nb-field+.nb-field{margin-top:2px}
@media (hover:hover) and (pointer:fine){
  .nb-field:hover{border-color:var(--ink-3)}
}

/* Незаполненное обязательное. Не красным: гость ещё не дошёл до этой
   графы, и ругаться не за что — поле просто ждёт, и это видно янтарным
   подчёркиванием, а не тревогой. Красное здесь заняло бы тот же тон, что конфликт,
   а это разные беды. */
.nb-field:has(input[aria-invalid="true"]){border-color:var(--wait)}
.nb-field input[aria-invalid="true"]::placeholder{color:var(--wait)}
.nb-field:focus-within{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.nb-field svg{width:14px;height:14px;color:var(--ink-3);flex-shrink:0}
.nb-field input{
  flex:1;min-width:0;border:0;background:none;padding:0;
  font-family:var(--font);font-size:13.5px;color:var(--ink);
}
.nb-field input:focus{outline:none}
.nb-field input::placeholder{color:var(--ink-3)}
/* Не «money»: этот класс в продукте уже занят светлой плашкой из
   modal.css, и она однажды наделась на строку, где её не ждали. */
.nb-field.cash input{font-size:15px;letter-spacing:-.01em;text-align:right}
.nb-field.cash em{font-size:13px;color:var(--ink-3);font-style:normal}
.nb-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:2px}

/* ── 1. что сдаём ──
   Объект — первое решение и самая крупная строка бланка: с него
   начинается разговор, и в нём чаще всего ошибаются. */
.nb-select{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:5px 2px 9px;border-bottom:1px solid var(--rule);
  transition:border-color .13s;text-align:left;
}
@media (hover:hover) and (pointer:fine){
  .nb-select:hover{border-color:var(--ink-3)}
}
.nb-select.on{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.nb-select i{display:flex;color:var(--ink-2);flex-shrink:0}
.nb-select i svg{width:17px;height:17px}
.nb-select span{
  flex:1;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.03em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nb-select em{color:var(--ink-3);display:flex;flex-shrink:0}
.nb-select em svg{width:13px;height:13px}

/* ── список объектов ──
   Браузерное поле знает только имена, а объект выбирают по трём вещам
   сразу: свободен ли он в это время, сколько влезет и почём. Группы —
   те же, что строки шахматки: искать глазами приходится там и там. */
.nb-objs{
  margin:9px 0 4px;padding:6px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--rule);
  max-height:296px;overflow-y:auto;overscroll-behavior:contain;
  transform-origin:top center;animation:nbGrow .2s cubic-bezier(.2,.8,.3,1);
}
.nb-objs-g{
  padding:8px 7px 5px;font-size:11px;font-weight:500;
  color:var(--ink-3);
}
.nb-objs-g:first-child{padding-top:3px}
.nb-obj{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 7px;
  border-radius:var(--r-sm);text-align:left;transition:background-color .1s;
}
.nb-obj i{display:flex;color:var(--ink-3);flex-shrink:0}
.nb-obj i svg{width:15px;height:15px}
.nb-obj b{font-size:12.5px;font-weight:500;color:var(--ink);flex-shrink:0}
/* Занятость и цена — то, ради чего список и открывают. */
.nb-obj u{
  margin-left:auto;text-decoration:none;font-size:10.5px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (hover:hover) and (pointer:fine){
  .nb-obj:hover{background:var(--sunk)}
}
.nb-obj:active{transform:scale(.995)}
/* Занятый не запрещён — на него бывает переезд, — но видно, что занят,
   и кем: иначе выбор делается вслепую и разбивается о предупреждение. */
.nb-obj.busy b{color:var(--ink-3)}
.nb-obj.busy i{opacity:.45}
.nb-obj.busy u{color:var(--late)}
.nb-obj.on{background:var(--accent)}
.nb-obj.on b{color:var(--accent-ink)}
.nb-obj.on i{color:var(--band-ink-2);opacity:1}
.nb-obj.on u{color:var(--band-ink-3)}

.nb-modes{margin-top:13px}
.nb-single{font-size:12px;color:var(--ink-3)}

/* ── переключатель ──
   Выбранное залито чернилами: в бланке зачёркнутое и обведённое
   означает выбор, и здесь это тот же жест. */
.nb-seg{display:inline-flex;border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.nb-seg.wide{display:flex}
.nb-seg.wide button{flex:1}
.nb-seg button{
  padding:6px 13px;font-size:12px;font-weight:500;color:var(--ink-2);
  background:var(--card);transition:var(--t-tap) var(--ease);transition-property:color,background-color;white-space:nowrap;
}
.nb-seg button+button{border-left:1px solid var(--rule)}
@media (hover:hover) and (pointer:fine){
  .nb-seg button:hover{background:var(--sunk);color:var(--ink)}
}
.nb-seg button.on{background:var(--accent);color:var(--accent-ink)}
.nb-seg.tiny button{padding:4px 10px;font-size:11px}

/* ── варианты ──
   Единственное в цене, что выбирают руками: что входит в ставку. Надбавки
   за выходной, праздник и поздний час сюда не попадают — они считаются по
   дате сами и объясняются строкой в расчёте. Кнопок нет там, где вариант
   один: выбор из одного пункта — вопрос без ответа. */
.nb-plans{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
.nb-plan{
  flex:1;min-width:92px;padding:8px 10px 9px;text-align:left;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--card);transition:var(--t-tap) var(--ease);transition-property:background-color,border-color,box-shadow;
}
.nb-plan b{display:block;font-size:11.5px;font-weight:500;color:var(--ink-2);margin-bottom:3px}
.nb-plan u{
  display:block;text-decoration:none;font-size:12px;
  letter-spacing:-.02em;color:var(--ink);
}
@media (hover:hover) and (pointer:fine){
  .nb-plan:hover{border-color:var(--ink-3)}
}
.nb-plan.on{border-color:var(--ink);background:var(--sunk);box-shadow:inset 0 0 0 1px var(--ink)}
.nb-plan.on b{color:var(--ink)}
/* Единственный вариант — не кнопка, а подпись: нажимать не на что. */
.nb-one-plan{margin-top:11px;font-size:12px;color:var(--ink-3)}

/* ── 2. когда ──
   Значения — кнопки на линейках бланка, а не поля браузера. Браузерный
   календарь красив ровно до той минуты, когда у него спрашивают, свободен
   ли этот дом и какими долями его сдают: этого он не знает. Выбор
   раскрывается прямо под своей строкой — всплывающему окну здесь негде
   встать, не закрыв соседнюю графу. */
.nb-when{display:flex;flex-direction:column;gap:2px}
.nb-wrow{display:flex;align-items:center;gap:12px}
.nb-wrow>span{
  width:46px;flex-shrink:0;font-size:11px;font-weight:500;
  color:var(--ink-3);
}
.nb-pick{
  padding:8px 2px 7px;border-bottom:1px solid var(--rule);background:none;
  font-size:13px;letter-spacing:-.01em;color:var(--ink);
  text-align:left;transition:border-color .13s,background-color .13s,color .13s;
  display:flex;align-items:baseline;gap:7px;border-radius:var(--r-xs) var(--r-xs) 0 0;
}
.nb-pick[data-pick$="date"]{flex:1}
.nb-pick[data-pick$="time"]{flex:0 0 66px;justify-content:flex-end}
.nb-when.hour .nb-pick[data-pick$="time"]{flex:1;justify-content:flex-start}
.nb-pick u{text-decoration:none;font-size:11px;color:var(--ink-3)}
/* Отклик на нажатие, а не на отпускание: между ними целая вечность. */
@media (hover:hover) and (pointer:fine){
  .nb-pick:hover{border-color:var(--ink-3);background:var(--paper)}
}
.nb-pick:active{background:var(--sunk)}
.nb-pick.on{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.nb-pick.on u{color:var(--ink-2)}
.nb-dash{flex:0 0 auto;color:var(--ink-3);font-style:normal;font-size:12px}

/* Раскрытый выбор растёт из своей строки — оттуда же, куда потом и
   вернётся значение (§7 «откуда пришло, туда и уходит»). */
.nb-cal,.nb-times{
  margin:9px 0 4px;padding:11px 12px 10px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--rule);
  transform-origin:top center;animation:nbGrow .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes nbGrow{from{opacity:0;transform:scaleY(.965) translateY(-5px)}}

.nb-cal-head{display:flex;align-items:center;gap:6px;margin-bottom:9px}
.nb-cal-head b{font-size:12.5px;font-weight:600;letter-spacing:-.02em;min-width:112px}
.nb-cal-head>button{
  width:23px;height:23px;border-radius:var(--r-sm);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;transition:var(--t-tap) var(--ease);transition-property:color,background-color;flex-shrink:0;
}
@media (hover:hover) and (pointer:fine){
  .nb-cal-head>button:hover{background:var(--sunk);color:var(--ink)}
}
.nb-cal-today{
  width:auto !important;margin-left:auto;padding:0 8px;font-size:11px;font-weight:500;
  color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;
}
.nb-cal-wk,.nb-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.nb-cal-wk span{
  text-align:center;padding-bottom:4px;
  font-size:11px;
  color:var(--ink-3);
}
.nb-cal-d{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:5px 0 4px;border-radius:var(--r-sm);transition:background-color .1s,color .1s;
}
.nb-cal-d b{font-size:12px;font-weight:500;letter-spacing:-.02em;color:var(--ink-2)}
/* Полоска под числом — сколько дня уже занято именно этим объектом. */
.nb-cal-d s{display:block;width:15px;height:2px;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden}
.nb-cal-d s i{display:block;height:100%;background:var(--ink-3);opacity:.65}
/* Нерабочий день подложен тем же тоном, что и в шахматке. */
.nb-cal-d.off{background:var(--off-paper)}
@media (hover:hover) and (pointer:fine){
  .nb-cal-d:hover{background:var(--sunk)}
}
.nb-cal-d:active{transform:scale(.94)}
.nb-cal-d.out{opacity:.3}
.nb-cal-d.now b{color:var(--now);font-weight:600}
/* Ночи внутри брони: тон заметно плотнее, чем подложка выходного дня, —
   иначе диапазон и суббота выглядят одинаково. */
.nb-cal-d.mid{background:rgba(25,24,21,.13)}
.nb-cal-d.mid b{color:var(--ink);font-weight:600}
.nb-cal-d.mid s{background:rgba(255,255,255,.6)}
.nb-cal-d.on{background:var(--band)}
.nb-cal-d.on b{color:var(--band-ink)}
.nb-cal-d.on s{background:var(--band-3)}
.nb-cal-d.on s i{background:var(--band-ink-2);opacity:1}
.nb-cal-d:disabled{opacity:.22;pointer-events:none}
.nb-cal-note{margin-top:9px;font-size:10.5px;color:var(--ink-3)}

/* Часы — только сетка заведения: шаг ресурса, а не произвольные минуты. */
.nb-slots{
  display:grid;grid-template-columns:repeat(4,1fr);gap:3px;
  max-height:186px;overflow-y:auto;overscroll-behavior:contain;padding-right:2px;
}
.nb-slot{
  padding:7px 0;border-radius:var(--r-sm);background:var(--card);
  border:1px solid var(--rule-2);
  font-size:12px;letter-spacing:-.01em;color:var(--ink-2);
  transition:background-color .1s,color .1s,border-color .1s;
}
@media (hover:hover) and (pointer:fine){
  .nb-slot:hover{border-color:var(--ink-3);color:var(--ink)}
}
.nb-slot:active{transform:scale(.96)}
.nb-slot.on{background:var(--band);border-color:var(--band);color:var(--band-ink)}
/* Занятый час не запрещён — на него бывает переезд, — но видно, что он занят. */
.nb-slot.busy{
  color:var(--ink-3);
  background:repeating-linear-gradient(-45deg,
    var(--card) 0 4px,var(--rule-2) 4px 8px);
}
.nb-slot.busy.on{background:var(--band);color:var(--band-ink)}
.nb-slot:disabled{opacity:.25;pointer-events:none}

/* Что получилось словами: длительность крупно, полный перегон мелко.
   Гостю по телефону называют именно эту строку. */
.nb-span{display:flex;align-items:baseline;gap:9px;margin-top:13px;flex-wrap:wrap}
.nb-span b{font-size:13.5px;font-weight:500;letter-spacing:-.01em}
.nb-span span{font-size:11.5px;color:var(--ink-3)}

/* ── лента занятости ──
   Та же приборная полоса, что несёт шахматку: тёмное в этом продукте
   всегда значит «здесь считают время». Занятое — глухие блоки, наша
   бронь — единственное светлое, «сейчас» — красная волосяная линия. */
.nb-band{
  /* Не `overflow:hidden`: блоки и так обрезаны по краям окна расчётом,
     а ярлык при наведении должен выходить за ленту — иначе его нечем
     показать. */
  position:relative;height:38px;margin-top:11px;border-radius:var(--r-sm);
  background:var(--band);
}
.nb-tick{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.08)}
/* Занятое называет себя. Тёмный блок без имени заставлял закрывать окно
   и искать бронь в шахматке — а вопрос был ровно один: кто там стоит. */
.nb-busy{
  position:absolute;top:6px;bottom:6px;border-radius:var(--r-xs);overflow:visible;
  display:flex;align-items:center;padding:0 6px;
  background:var(--band-3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:box-shadow .12s var(--ease);
}
.nb-busy>b{
  font-size:10px;font-weight:500;letter-spacing:-.01em;color:var(--band-ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
}
.nb-busy:focus-visible{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);outline:none;
}
@media (hover:hover) and (pointer:fine){
  .nb-busy:hover{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);outline:none;
  }
}
.nb-busy:focus-visible>b{color:var(--band-ink)}
@media (hover:hover) and (pointer:fine){
  .nb-busy:hover>b{color:var(--band-ink)}
}

/* Виновник. Из десяти блоков на ленте спорит с нами один, и глаз должен
   идти к нему, а не пересчитывать все. Тон тот же, что у самой брони,
   когда она встала в занятое, — это одна и та же беда, названная дважды. */
.nb-busy.clash{
  background:rgba(154,45,30,.62);box-shadow:inset 0 0 0 1px var(--late);
}
.nb-busy.clash>b{color:color-mix(in srgb,var(--plate-late) 30%,var(--band-ink))}


/* Блокировка не бронь: её штрихуют, а не заливают. */
.nb-busy.stop{
  background:repeating-linear-gradient(-45deg,
    var(--band-2) 0 4px,rgba(255,255,255,.09) 4px 8px);
}
/* Уборка — время, которого нет ни у кого: та же штриховка, но реже
   и без корпуса, потому что это не занятость, а зазор. */
.nb-buf{
  position:absolute;top:6px;bottom:6px;
  background:repeating-linear-gradient(-45deg,
    transparent 0 3px,rgba(255,255,255,.14) 3px 6px);
}
.nb-me{
  position:absolute;top:4px;bottom:4px;border-radius:var(--r-xs);background:var(--band-ink);
  box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 1px var(--band);
}
/* Встали в занятое — полоса становится стеклом: под ней видно того, на
   кого мы наехали. Сплошной красной она закрывала виновника собой, и
   лента отвечала «плохо», не отвечая «кем». */
.nb-me.bad{
  background:rgba(154,45,30,.42);
  box-shadow:inset 0 0 0 1.5px var(--late),0 1px 4px rgba(0,0,0,.4);
}
.nb-now{position:absolute;top:0;bottom:0;width:1.5px;background:var(--now)}

/* Края окна: какой отрезок вообще показан. Стоят над лентой, потому что
   под ней деления, и подпись края села бы на ближайшее из них. */
.nb-edges{
  display:flex;justify-content:space-between;margin:0 1px 4px;
  font-size:9.5px;letter-spacing:0;color:var(--ink-3);
}
.nb-edges s{text-decoration:none}

.nb-scale{position:relative;height:14px;margin-top:4px}
.nb-scale span{
  position:absolute;transform:translateX(-50%);
  font-size:9.5px;color:var(--ink-3);
}


/* Подпись про уборку несёт образец штриховки: иначе полосы на ленте
   пришлось бы разгадывать. */
/* Строка под лентой. В покое — про уборку, при наведении на занятое —
   чья это бронь, когда и по какому коду её искать (SPEC §5.4). Одно
   место на оба сообщения: вторая строка прыгала бы высотой. */
.nb-note-line{
  display:flex;align-items:center;gap:7px;margin-top:9px;min-height:16px;
  font-size:11.5px;color:var(--ink-3);
}
.nb-note-line>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-note-line.busy{color:var(--ink)}
.nb-note-line.busy>s{opacity:0}
.nb-note-line.clash{color:var(--late)}
.nb-note-line s{
  width:14px;height:11px;border-radius:2px;flex-shrink:0;
  background:var(--band);
  background-image:repeating-linear-gradient(-45deg,
    transparent 0 3px,rgba(255,255,255,.3) 3px 6px);
}

/* ── предупреждение ──
   Конфликт и перебор по местам — одна форма, разный вес. Оба говорят
   делом: кто занял и что теперь делать. */
.nb-alert{
  display:flex;gap:10px;margin-top:13px;padding:11px 12px;border-radius:var(--r);
  background:var(--wait-bg);border:1px solid var(--wait-line);
  animation:nbRise .24s cubic-bezier(.2,.8,.3,1);
}
.nb-alert i{color:var(--wait);flex-shrink:0;display:flex;margin-top:1px}
.nb-alert b{display:block;font-size:12.5px;font-weight:600;color:var(--wait-ink);margin-bottom:2px}
.nb-alert span{display:block;font-size:11.5px;line-height:1.45;color:var(--wait-ink);opacity:.85}
.nb-alert.bad{background:var(--late-bg);border-color:var(--late-line)}
.nb-alert.bad i{color:var(--late)}
.nb-alert.bad b,.nb-alert.bad span{color:var(--late)}

@keyframes nbRise{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ── 3. гость ──
   Найденный по телефону гость появляется отдельной строкой: сколько раз
   приезжал и не должен ли — это меняет и разговор, и условия. */
.nb-found{
  display:flex;align-items:center;gap:11px;margin-top:11px;padding:9px 11px;
  border-radius:var(--r);background:var(--paper);border:1px solid var(--rule);
  animation:nbRise .24s cubic-bezier(.2,.8,.3,1);
}
.nb-found .av{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--accent-ink);
  font-size:11px;font-weight:500;letter-spacing:.02em;
}
.nb-found b{display:block;font-size:12.5px;font-weight:600;line-height:1.3}
.nb-found span{display:block;font-size:11px;color:var(--ink-3);margin-top:1px}
.nb-found em{font-style:normal;color:var(--ink-3)}
.nb-found.debt{background:var(--late-bg);border-color:var(--late-line)}
.nb-found.debt .av{background:var(--late)}
.nb-found.debt em{color:var(--late);font-weight:550}

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

/* Счётчик взрослых: шаг кнопкой, число — по-прежнему поле, потому что
   на банкет в сорок человек плюсом не накликаешь. */
.nb-step{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--rule);border-radius:var(--r-pill);overflow:hidden;transition:border-color .13s;
}
.nb-step:focus-within{border-color:var(--ink)}
.nb-step button{
  width:30px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);background:var(--card);transition:background-color .1s,color .1s;
}
@media (hover:hover) and (pointer:fine){
  .nb-step button:hover{background:var(--sunk);color:var(--ink)}
}
.nb-step button:active{background:var(--accent);color:var(--accent-ink)}
.nb-step button:disabled{opacity:.3;pointer-events:none}
.nb-step input{
  width:30px;padding:7px 0;border:0;background:none;text-align:center;
  font-size:13px;letter-spacing:-.01em;color:var(--ink);
}
.nb-step input:focus{outline:none}
.nb-step.bad{border-color:var(--late-line)}
/* Сколько мест у объекта — здесь, а не только в предупреждении ниже:
   считать людей вслепую и потом читать упрёк — лишний круг. */
.nb-cap{font-size:11.5px;color:var(--ink-2)}
/* С какого места начнётся доплата — про это спрашивают по телефону
   раньше, чем о цене, и узнать это из одного числа мест нельзя. */
.nb-cap u{display:block;text-decoration:none;font-size:10.5px;color:var(--ink-3);margin-top:1px}
.nb-cap.bad{color:var(--late)}

.nb-kids{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px}
.nb-kid{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card);
  overflow:hidden;transition:border-color .13s;
}
.nb-kid button{
  padding:5px 4px 5px 11px;font-size:11.5px;color:var(--ink-2);transition:var(--t-tap) var(--ease);transition-property:color;
}
@media (hover:hover) and (pointer:fine){
  .nb-kid button:hover{color:var(--ink)}
}
.nb-kid .off{
  display:flex;align-items:center;padding:0 8px 0 4px;color:var(--ink-3);
}
@media (hover:hover) and (pointer:fine){
  .nb-kid .off:hover{color:var(--ink)}
}
.nb-kid.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.nb-kid.on button{color:var(--ink)}
/* Пунктир: место, куда ещё можно вписать, — но пустое. */
.nb-add{
  display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--r-pill);
  border:1px dashed var(--rule);font-size:11.5px;color:var(--ink-2);transition:var(--t-tap) var(--ease);transition-property:color,border-color;
}
@media (hover:hover) and (pointer:fine){
  .nb-add:hover{border-color:var(--ink);border-style:solid;color:var(--ink)}
}

/* Возраст выбирают из той же сетки, что и час брони: одинаковые вещи
   в бланке должны и выглядеть, и вести себя одинаково. */
.nb-ages{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}

/* ── 4. расчёт ──
   Строка расчёта в бланке — с отточием: название слева, сумма справа,
   между ними точки, чтобы глаз не терял строку. Это единственный приём,
   которого нет больше нигде в продукте, и он на месте: так набирают
   ведомости и сметы. */
.nb-bill{margin-bottom:2px}
.nb-row{display:flex;align-items:baseline;gap:8px;padding:5px 0}
.nb-row span{font-size:12.5px;color:var(--ink-2)}
.nb-row u{
  display:block;text-decoration:none;font-size:10.5px;color:var(--ink-3);
  margin-top:1px;line-height:1.35;
}
.nb-row::before{
  content:"";flex:1;height:2px;align-self:baseline;position:relative;top:-3px;
  background-image:radial-gradient(circle,var(--rule) .9px,transparent 1px);
  background-size:4px 2px;background-repeat:repeat-x;
}
.nb-row b{
  order:2;font-size:12.5px;font-weight:500;
  letter-spacing:-.02em;color:var(--ink);white-space:nowrap;
}
.nb-row span{order:0}
.nb-row::before{order:1}
/* Скидка не статус, и цвета ей не положено: минус впереди говорит всё. */
.nb-row.off b{color:var(--ink-2)}
.nb-row.sum{margin-top:6px;padding-top:10px;border-top:1px solid var(--rule)}
.nb-row.sum span{font-size:13px;font-weight:600;color:var(--ink)}
.nb-row.sum::before{display:none}
.nb-row.sum b{margin-left:auto;font-size:17px;font-weight:500;letter-spacing:-.045em}

/* Из чего платят сейчас и из чего при заезде — два равных ответа на
   вопрос «сколько сегодня». */
.nb-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:13px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.nb-split div{background:var(--paper);padding:9px 11px}
.nb-split em{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3);margin-bottom:3px}
.nb-split b{font-size:14px;font-weight:500;letter-spacing:-.02em}

/* ── отметка ──
   Квадрат с галочкой: в бланке отмечают галочкой, а не тумблером. */
.nb-check{
  display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:10px 11px;
  border:1px solid var(--rule);border-radius:var(--r);cursor:pointer;transition:var(--t-tap) var(--ease);transition-property:background-color,border-color;
}
@media (hover:hover) and (pointer:fine){
  .nb-check:hover{border-color:var(--ink-3)}
}
.nb-check.on{background:var(--paper);border-color:var(--ink-3)}
.nb-check input{position:absolute;opacity:0;pointer-events:none}
.nb-check i{
  width:16px;height:16px;border-radius:var(--r-xs);flex-shrink:0;margin-top:1px;
  border:1px solid var(--rule);background:var(--card);
  display:flex;align-items:center;justify-content:center;transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color;
}
.nb-check.on i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.nb-check span{font-size:12.5px;color:var(--ink-2)}
.nb-check span b{font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.nb-check u{display:block;text-decoration:none;font-size:10.5px;color:var(--ink-3);margin-top:2px}

/* ── свёрнутая графа ──
   Свёрнуто только то, чего в обычной броне не бывает. Число справа
   говорит, что внутри набрано: закрытая графа не должна прятать
   введённое. */
.nb-fold{margin-top:12px;border-top:1px solid var(--rule-2);padding-top:10px}
.nb-fold summary{
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-size:12px;font-weight:550;color:var(--ink-2);transition:var(--t-tap) var(--ease);transition-property:color;
}
.nb-fold summary::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){
  .nb-fold summary:hover{color:var(--ink)}
}
.nb-fold summary svg{color:var(--ink-3);transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.nb-fold[open] summary svg{transform:rotate(90deg)}
.nb-fold summary s{
  margin-left:auto;text-decoration:none;font-size:11px;
  color:var(--ink-2);background:var(--sunk);border-radius:var(--r-pill);padding:2px 8px;
}
.nb-fold-in{padding-top:11px}

.nb-servs{display:flex;flex-direction:column;gap:1px}
.nb-serv{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  text-align:left;transition:var(--t-tap) var(--ease);transition-property:background-color;
}
@media (hover:hover) and (pointer:fine){
  .nb-serv:hover{background:var(--paper)}
}
.nb-serv i{
  width:15px;height:15px;border-radius:var(--r-xs);flex-shrink:0;
  border:1px solid var(--rule);background:var(--card);
  display:flex;align-items:center;justify-content:center;transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color;
}
.nb-serv span{flex:1;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
/* Звезда — при названии, а не в углу строки: строка узкая, и в углу
   знак читался бы как часть цены. */
.nb-serv span b{display:flex;color:var(--ink-3)}
.nb-serv u{text-decoration:none;font-size:11.5px;letter-spacing:-.01em;color:var(--ink-3)}
.nb-serv.on{background:var(--paper)}
.nb-serv.on i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.nb-serv.on span{color:var(--ink);font-weight:500}
.nb-serv.on u{color:var(--ink)}

.nb-disc{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.nb-disc .nb-field{flex:1;margin-top:0}
.nb-warn{
  display:flex;align-items:flex-start;gap:6px;
  margin-top:9px;font-size:11px;line-height:1.45;color:var(--wait);
}
.nb-warn::before{content:"";flex:none;width:12px;height:12px;margin-top:1.5px;background:currentColor;-webkit-mask:var(--glyph-alert) center/contain no-repeat;mask:var(--glyph-alert) center/contain no-repeat}

/* ── 5. состояние ── */
.nb-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.nb-chip{
  padding:6px 11px;border-radius:var(--r-pill);border:1px solid var(--rule);background:var(--card);
  font-size:11.5px;font-weight:500;color:var(--ink-2);transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color;
}
@media (hover:hover) and (pointer:fine){
  .nb-chip:hover{border-color:var(--ink-3);color:var(--ink)}
}
.nb-chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.nb-hold{display:flex;align-items:center;gap:11px;margin-top:12px}
.nb-hold span{font-size:12px;color:var(--ink-2)}
.nb-hint{margin-top:10px;font-size:11px;line-height:1.5;color:var(--ink-3)}
.nb-box .nb-field.cash{margin-top:11px}

/* ── 6. источник и комментарий ── */
.nb-area{display:block;margin-top:13px}
.nb-area span{
  display:flex;align-items:baseline;gap:7px;margin-bottom:5px;
  font-size:11px;font-weight:500;
  color:var(--ink-3);
}
.nb-area u{text-decoration:none;letter-spacing:0;text-transform:none;font-family:var(--font);font-size:10.5px}
.nb-area textarea{
  width:100%;resize:none;padding:9px 11px;border-radius:var(--r);
  border:1px solid var(--rule);background:var(--card);
  font-family:var(--font);font-size:12.5px;line-height:1.5;color:var(--ink);transition:var(--t-tap) var(--ease);transition-property:border-color,box-shadow;
}
.nb-area textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--focus-ring)}
.nb-area textarea::placeholder{color:var(--ink-3)}

/* ── подвал ──
   Сумма и состояние стоят над кнопкой: соглашаются на них, а не на
   слово «создать». Состояние помечено точкой своего цвета — цвет
   в этом продукте принадлежит статусам. */
.nb-foot{
  position:relative;flex-shrink:0;padding:12px 20px 15px;
  border-top:1px solid var(--rule);background:var(--paper);
}
/* Кромка прокрутки: у обрезанной снизу графы должно быть видно, что она
   обрезана, — иначе бланк кажется кончившимся раньше времени. */
.nb-foot::before{
  content:"";position:absolute;left:0;right:0;top:-16px;height:16px;pointer-events:none;
  background:linear-gradient(transparent,color-mix(in srgb,var(--card) 92%,transparent));
}
.nb-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.nb-total em{
  display:flex;align-items:center;gap:7px;font-style:normal;font-size:11.5px;color:var(--ink-2);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nb-total em::before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--ink-3)}
.nb-total em.wait::before{background:var(--wait)}
.nb-total em.ok::before{background:var(--ok)}
.nb-total b{font-size:21px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.nb-go{width:100%;transition:transform .12s,opacity .12s}
.nb-go:active{transform:scale(.985)}
.nb-go:disabled{opacity:.4;pointer-events:none}

/* Узкая панель: поле бланка сжимается, но остаётся — без него графы
   рассыпаются на несвязанные карточки. */
@media (max-width:520px){
  .nb-box{margin-left:22px;padding-left:16px;padding-right:16px}
  .nb-two,.nb-split{grid-template-columns:1fr}
  .nb-when.hour{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .nb-alert,.nb-found,.nb-cal,.nb-times{animation:none}
  .nb-cal-d:active,.nb-slot:active{transform:none}
  .nb-go:active{transform:none}
}
/* Просили меньше прозрачности — шапка становится плотной бумагой. */
@media (prefers-reduced-transparency:reduce){
  .nb-head{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
  .nb-head::after{opacity:1}
}

/* Час вне рабочих часов объекта: не запрещён — по договорённости бронь
   заводят, — но виден закрытым, иначе выглядит свободным, хотя топить
   в это время некому. */
.nb-slot.off{color:var(--ink-3);opacity:.5}
.nb-slot.off.on{opacity:1;color:var(--band-ink)}

/* ── лента как орган управления ──
   Выбранное на ленте не картинка: за него берут и двигают. Значит оно
   должно выглядеть взятым — курсором, тенью под пальцем и тем, что
   отзывается на нажатие раньше, чем на отпускание. */
.nb-me{cursor:grab;touch-action:none}
@media (hover:hover) and (pointer:fine){
  .nb-me:hover{box-shadow:0 1px 6px rgba(0,0,0,.45),0 0 0 1px var(--band)}
}
.nb-me:focus-visible{outline:2px solid var(--band-ink);outline-offset:2px}
.nb-me.held{
  cursor:grabbing;
  /* Взятое приподнимается: тень глубже, край светлее — так ведёт себя
     всё, что оторвали от поверхности. */
  box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.25);
  transition:none;
}
/* Пока тащат, кусок ползёт трансформацией — без пересчёта раскладки. */
.nb-me{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .nb-me{will-change:auto}
}

/* ── назначенная цена ──
   Итог, поставленный руками, не притворяется расчётным: строка «Расчёт»
   остаётся рядом, а разница названа отдельно. Иначе она исчезает из
   отчёта, и потом никто не вспомнит, о чём договорились. */
.nb-row.sum.hand b{border-bottom:2px solid var(--wait)}
.nb-hand-diff{
  margin-top:2px;text-align:right;font-size:10.5px;color:var(--wait);
}

/* ── бронь создана ──
   Окно не захлопывается: с этого экрана уносят публичный код (SPEC §4.0).
   Им бронь называют вслух, его вставляют в письмо гостю. Закрыв окно
   молча, мы заставили бы искать её в шахматке ради кода, который сами
   же и выдали. */
.nb-done{display:flex;flex-direction:column;height:100%}
.nb-done-in{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 26px;text-align:center;
}
.nb-done-in>i{
  display:flex;align-items:center;justify-content:center;
  width:66px;height:66px;border-radius:50%;margin-bottom:18px;
  background:var(--ok-bg);color:var(--ok);
  animation:nbSeal .44s cubic-bezier(.175,.885,.32,1.275) backwards;
}
.nb-done-in>b{
  font-size:21px;font-weight:600;letter-spacing:-.03em;color:var(--ink);
  animation:nbRise .3s var(--ease) .06s backwards;
}

/* Код — самое крупное после заголовка и единственное, что отсюда уносят:
   его диктуют по телефону. Рядом кнопка, потому что переписывать его
   глазами никто не должен. */
.nb-code{
  display:flex;align-items:center;gap:9px;margin-top:14px;padding:10px 15px;
  border-radius:var(--r);background:var(--sunk);
  font-family:var(--mono);font-size:17px;font-weight:500;letter-spacing:.02em;
  color:var(--ink);transition:var(--t-tap) var(--ease);transition-property:color,background-color,transform;
  animation:nbRise .3s var(--ease) .1s backwards;
}
.nb-code svg{color:var(--ink-3);transition:color .12s}
@media (hover:hover) and (pointer:fine){
  .nb-code:hover{background:var(--rule-2)}
  .nb-code:hover svg{color:var(--ink-2)}
}
.nb-code:active{transform:scale(.98)}
/* Скопировано — сказано делом: зелёная вспышка на том же месте, а не
   всплывашка, которую надо искать глазами. */
.nb-code.took{background:var(--ok-bg);color:var(--ok)}
.nb-code.took svg{color:var(--ok)}

.nb-done-rows{width:100%;max-width:300px;margin-top:22px;text-align:left}
.nb-done-rows>div{
  display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--rule-2);
  animation:nbRise .3s var(--ease) var(--d,0ms) backwards;
}
.nb-done-rows>div:last-child{border-bottom:none}
.nb-done-rows dt{font-size:11.5px;color:var(--ink-2)}
.nb-done-rows dd{font-size:12.5px;font-weight:500;color:var(--ink)}

/* Состояние названо делом, а не словом: «ждёт оплату» без срока — это
   не состояние, а тревога без адреса. */
.nb-done-state{
  margin-top:18px;padding:8px 14px;border-radius:var(--r-pill);font-size:11.5px;
  animation:nbRise .3s var(--ease) .34s backwards;
}
.nb-done-state.ok{background:var(--ok-bg);color:var(--ok)}
.nb-done-state.wait{background:var(--wait-bg);color:var(--wait-ink)}

.nb-done-do{
  display:flex;gap:8px;padding:14px 20px 18px;border-top:1px solid var(--rule);
  background:var(--paper);
}
.nb-done-do .btn{flex:1}
.nb-done-do .btn-primary{flex:1.5}

@keyframes nbSeal{from{opacity:0;transform:scale(.55)}}
@media (prefers-reduced-motion:reduce){
  .nb-done-in>i,.nb-done-in>b,.nb-code,.nb-done-rows>div,.nb-done-state{animation:none}
}