/* ── отмена брони ──
   Второй слой поверх карточки (SPEC §5.6): то, что отменяют, должно
   остаться видно, пока решают, что делать с деньгами. Окно узкое и
   короткое — здесь три вопроса, а не форма. */
.dlg-cancel{
  width:min(440px,calc(100vw - 32px));max-height:min(760px,calc(100dvh - 48px));
  display:flex;flex-direction:column;
}
.cn-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 18px 13px;border-bottom:1px solid var(--rule-2);
}
.cn-head b{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.cn-head span{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-2)}
.cn-body{padding:0 18px 6px;overflow-y:auto}
/* Имя действия и его смысл — тем же приёмом, что в заселении: два окна
   одного продукта не должны объясняться по-разному. */
.cn-cap{padding-top:16px}
.cn-cap b{display:block;font-size:17px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.cn-cap span{display:block;margin-top:3px;font-size:12px;color:var(--ink-2)}
.cn-cap+.cn-sec{padding-top:15px}
.cn-sec{padding-top:16px}
.cn-sec h3{
  margin-bottom:9px;font-size:11px;font-weight:500;
  color:var(--ink-2);
}

/* Что освободится — поимённо: гость на телефоне спрашивает «а баню вы
   тоже сняли?», и ответ должен быть на экране. */
.cn-frees{border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden}
.cn-free{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 12px;background:var(--card);
}
.cn-free+.cn-free{border-top:1px solid var(--rule-2)}
.cn-free b{font-size:12.5px;font-weight:550;color:var(--ink)}
.cn-free span{
  font-size:11px;letter-spacing:0;color:var(--ink-2);
  white-space:nowrap;
}

.cn-check{display:flex;align-items:center;gap:8px;margin-top:10px;cursor:pointer}
.cn-check input{position:absolute;opacity:0;pointer-events:none}
.cn-check i{
  display:flex;align-items:center;justify-content:center;width:17px;height:17px;flex:none;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--card);color:transparent;
}
.cn-check.on i{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cn-check span{font-size:12px;color:var(--ink)}
.cn-hint{margin-top:7px;font-size:11px;line-height:1.45;color:var(--ink-2)}

/* Деньги. Программа не решает за арендатора, но и забыть про уже
   полученные деньги не даёт. */
.cn-paid{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 12px;border-radius:var(--r);background:var(--sunk);
}
.cn-paid span{font-size:12px;color:var(--ink-2)}
.cn-paid b{
  font-size:14px;font-weight:500;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cn-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}
.cn-ways button{
  padding:9px 6px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--card);font-size:11.5px;color:var(--ink-2);transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color;
}
@media (hover:hover) and (pointer:fine){
  .cn-ways button:hover{border-color:var(--ink-3);color:var(--ink)}
}
.cn-ways button.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.cn-hand{
  display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 11px;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--card);
}
.cn-hand input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-size:14px;letter-spacing:-.01em;color:var(--ink);
}
.cn-hand em{font-style:normal;font-size:11px;color:var(--ink-3);white-space:nowrap}
.cn-split{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.cn-split div{padding:9px 11px;border-radius:var(--r-sm);background:var(--paper)}
.cn-split em{display:block;font-style:normal;font-size:10.5px;color:var(--ink-2)}
.cn-split b{
  display:block;margin-top:3px;font-size:15px;font-weight:600;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;
}
/* Возврат — единственное зелёное в окне: это деньги, которые уходят
   гостю, и найти их глазом надо сразу. */
.cn-split b.back{color:var(--ok)}

.cn-reasons{display:flex;flex-wrap:wrap;gap:6px}
.cn-reasons button{
  padding:7px 11px;border:1px solid var(--rule);border-radius:var(--r-pill);
  background:var(--card);font-size:11.5px;color:var(--ink-2);transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color;
}
@media (hover:hover) and (pointer:fine){
  .cn-reasons button:hover{border-color:var(--ink-3);color:var(--ink)}
}
.cn-reasons button.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
/* Строка своих слов стоит рядом с подсказками, а не вместо них: причина,
   которой нет в списке, встречается чаще любой из списка. */
.cn-why{
  width:100%;margin-top:8px;padding:9px 11px;border:1px solid var(--rule);
  border-radius:var(--r-sm);background:var(--card);font-size:12.5px;color:var(--ink);
}
.cn-why:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--sunk)}

.cn-warn{
  margin-top:14px;padding:10px 12px;border-radius:var(--r);
  background:var(--wait-bg);border:1px solid var(--wait-line);
}
.cn-warn p{font-size:11.5px;line-height:1.45;color:var(--wait-ink)}
.cn-warn p+p{margin-top:4px}

.cn-foot{
  display:flex;gap:8px;padding:13px 18px 16px;margin-top:auto;
  border-top:1px solid var(--rule-2);
}
.cn-foot .btn:first-child{margin-right:auto}
/* Кнопка конца записи тяжелее «не отменять»: из подвала выходят решением. */
.cn-foot .btn-stop{flex:1.4}
/* Кнопка конца записи. Красная, но не самая заметная в окне: её нажимают
   осознанно, а не потому, что она бросилась в глаза. */
.btn-stop{background:var(--late);color:var(--on-status);border:1px solid var(--late)}
@media (hover:hover) and (pointer:fine){
  .btn-stop:hover:not([disabled]){background:var(--late-hover);border-color:var(--late-hover)}
}
.btn-stop[disabled]{opacity:.45}

/* Та же кнопка в окне правки — тихой строкой слева: пришли менять,
   может выясниться, что менять нечего. */
.be-drop{
  margin-right:auto;padding:9px 4px;font-size:12px;color:var(--late);
  border-bottom:1px solid transparent;transition:border-color .12s;
}
@media (hover:hover) and (pointer:fine){
  .be-drop:hover{border-bottom-color:var(--late)}
}