/* ═══════════════════════════════════════════════════════════
   Модальные окна — одно окно, одна задача
   ═══════════════════════════════════════════════════════════ */
.scrim{
  position:fixed;inset:0;background:rgba(25,24,21,.34);
  z-index:40;opacity:0;pointer-events:none;transition:var(--t-move) var(--ease);transition-property:opacity;
}
.scrim.open{opacity:1;pointer-events:auto}

.sheet{
  position:fixed;top:0;right:0;bottom:0;width:424px;z-index:50;
  background:var(--card);display:flex;flex-direction:column;
  box-shadow:var(--sh-modal);
  transform:translateX(100%);transition:transform var(--t-page) var(--ease),var(--theme-fade);
}
.sheet.open{transform:none}
.sh-close{
  width:28px;height:28px;border-radius:var(--r-sm);color:var(--ink-3);
  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){
  .sh-close:hover{background:var(--sunk);color:var(--ink)}
}
.sh-close svg{width:15px;height:15px}
.sh-foot{padding:13px 20px;border-top:1px solid var(--rule);display:flex;gap:8px;background:var(--paper)}
.sh-foot .btn{flex:1}

/* один структурный приём на весь продукт: тихая строчная метка
   с волосяной линией — в меню, в шапке календаря и в окнах */
.sec+.sec{margin-top:19px;padding-top:19px;border-top:1px solid var(--rule-2)}
.sec{margin-top:20px}
.sec:first-child{margin-top:0}
.sec-l{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:500;
  color:var(--ink-3);margin-bottom:10px;
}
.sec-l::after{content:"";flex:1;height:1px;background:var(--rule)}

.dlg{
  position:fixed;top:50%;left:50%;z-index:50;width:452px;max-width:calc(100vw - 40px);
  background:var(--card);border-radius:var(--r-xl);box-shadow:var(--sh-modal);
  transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;
  transition:opacity var(--t-move) var(--ease),transform var(--t-move) var(--ease),var(--theme-fade);
  display:flex;flex-direction:column;overflow:hidden;
}
.dlg.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}

/* Второй слой. Высота слоя — свойство слоя, а не одного его окна: пока
   она стояла в стилях окна оплаты, любое следующее окно поверх карточки
   рождалось под затемнением и оказывалось под серой пеленой.
   Затемнение чуть ниже — оно гасит нижнее окно, а не верхнее. */
.scrim-over{z-index:78}
.dlg-over{z-index:80}
.dlg-head{padding:19px 21px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dlg-head h2{font-size:16px;font-weight:600;letter-spacing:-.03em;margin-bottom:4px}
.dlg-head p{font-size:12.5px;color:var(--ink-3)}
.dlg-body{padding:17px 21px 19px}
.dlg-foot{padding:13px 21px;border-top:1px solid var(--rule);display:flex;gap:8px;justify-content:flex-end;background:var(--paper)}

.field{margin-bottom:13px}
.field label{display:block;font-size:11.5px;font-weight:550;color:var(--ink-2);margin-bottom:6px}
.inp{
  width:100%;padding:10px 12px;border-radius:var(--r-sm);
  border:1px solid var(--rule);background:var(--card);
  font-size:13.5px;color:var(--ink);transition:var(--t-tap) var(--ease);transition-property:border-color,box-shadow;
}
.inp:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--focus-ring)}
.inp::placeholder{color:var(--ink-3)}
.inp.mono{font-family:var(--mono);letter-spacing:-.02em}
.row2{display:flex;gap:10px;margin-bottom:13px}
.row2 .field{flex:1;margin-bottom:0}
.row2 .field.sum{flex:0 0 134px}
.inp-money{position:relative}
.inp-money .cur{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:12.5px;color:var(--ink-3);pointer-events:none;
}
.inp-money .inp{
  padding-right:28px;text-align:right;font-weight:600;font-size:15px;
  letter-spacing:-.01em;
}

.quick-row{display:flex;flex-wrap:wrap;gap:6px}
.quick{
  display:inline-flex;align-items:center;gap:7px;padding:6px 10px;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){
  .quick:hover{border-color:var(--ink);color:var(--ink);background:var(--sunk)}
}
.quick b{font-weight:500;color:var(--ink);letter-spacing:-.01em}
.hint{font-size:11.5px;color:var(--ink-3);margin-top:11px;display:flex;align-items:flex-start;gap:6px;line-height:1.45}
.hint svg{width:13px;height:13px;flex-shrink:0;margin-top:1.5px;opacity:.5}

.attach{
  display:flex;align-items:center;gap:11px;padding:11px 12px;
  border-radius:var(--r);background:var(--ok-bg);border:1px solid var(--ok-line);
}
.attach .av{
  width:30px;height:30px;border-radius:var(--r-mark);flex-shrink:0;background:var(--ok);
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;color:var(--on-status);
}
.attach-t{flex:1;min-width:0}
.attach-t b{display:block;font-size:12.5px;font-weight:600;line-height:1.3}
.attach-t span{display:block;font-size:11px;color:var(--ink-2)}
.attach button{font-size:11.5px;font-weight:550;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}

.conflict{
  display:flex;gap:10px;padding:12px;border-radius:var(--r);
  background:var(--wait-bg);border:1px solid var(--wait-line);
}
.conflict svg{width:16px;height:16px;flex-shrink:0;color:var(--wait);margin-top:1px}
.conflict-t b{display:block;font-size:12.5px;font-weight:600;color:var(--wait-ink);margin-bottom:3px}
.conflict-t p{font-size:11.5px;color:var(--wait-ink);opacity:.9;line-height:1.5}

.money{background:var(--paper);border-radius:var(--r);padding:12px 13px;border:1px solid var(--rule)}
.money .row{display:flex;justify-content:space-between;font-size:12.5px;padding:3.5px 0;color:var(--ink-2)}
.money .row span:last-child{letter-spacing:-.01em}
.money .row.total{
  margin-top:7px;padding-top:9px;border-top:1px solid var(--rule);
  font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.02em;
}
.money .row.paid{color:var(--ok);font-weight:550}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}


/* ── Карточка объекта: фотографии ──
   Сценарий телефонный: гость спрашивает, как выглядит дом, и надо быстро
   посмотреть и отправить. Поэтому снимки занимают всё окно, а сведения
   о том, как сдаётся, ужаты в подпись под названием. */
.dlg-photos{width:600px}
.dlg-photos .dlg-head{align-items:center}
.res-title{display:flex;align-items:center;gap:12px;min-width:0}
.res-icon{
  width:38px;height:38px;flex-shrink:0;border-radius:var(--r-mark);
  border:1px solid var(--rule);background:var(--paper);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);
}
.res-icon svg{width:21px;height:21px}

.photos{display:flex;flex-direction:column;gap:8px}
.ph{
  position:relative;border-radius:var(--r);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);background:var(--sunk);
  /* Место под снимок, а не имитация снимка: подделывать фотографию
     в макете нечестно — видно будет только на реальных данных. */
  background-image:linear-gradient(150deg,
    color-mix(in srgb, var(--ink) 6%, var(--sunk)),
    color-mix(in srgb, var(--ink) 2%, var(--sunk)));
}
.ph svg{width:22px;height:22px;opacity:.5}
.ph figcaption{
  position:absolute;left:7px;bottom:6px;
  font-size:9.5px;color:var(--ink-3);
}
.ph-main{aspect-ratio:16/9}
.ph-main svg{width:30px;height:30px}
.ph-rest{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.ph-rest .ph{aspect-ratio:1}
.ph-add{
  background:none;border:1px dashed var(--rule);color:var(--ink-3);
  cursor:pointer;transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color;
}
@media (hover:hover) and (pointer:fine){
  .ph-add:hover{border-color:var(--ink-3);color:var(--ink);background:var(--paper)}
}
.ph-empty{
  padding:34px 0;text-align:center;font-size:12.5px;color:var(--ink-3);line-height:1.6;
}
/* Описание — то же, что уходит гостю, поэтому набрано читаемо,
   а не мелкой служебной строкой. */
.res-about{margin-top:15px}
.res-about p{
  font-size:13px;line-height:1.55;color:var(--ink-2);margin-top:8px;
}
.dlg-note{flex:1;font-size:11px;color:var(--ink-3)}