/* estimate-view.css — общий компонент сметы (estimate-view.jsx). Токены — DESIGN.md §2 (свои значения по умолчанию,
   чтобы компонент одинаково выглядел в любом кабинете); всё под .pe */
.pe {
  --pe-bg: #FFFFFF; --pe-surface: #F4F4F4; --pe-line: #E2E2E2; --pe-hair: #ECECEE;
  --pe-text: #34302C; --pe-text-2: #3F3A35; --pe-muted: #6E6E73; --pe-accent: #4A4540; --pe-done: #2F5D3A; --pe-attention: #FFF8E6;
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--pe-text); font-size: 14px;
}
.pe *, .pe *::before, .pe *::after { box-sizing: border-box; }
.pe-empty { display: block; color: var(--pe-muted); padding: 24px 0; }
.pe-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pe-mut { color: var(--pe-muted); font-size: 12px; }
.pe-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pe-lnk { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--pe-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pe-ph { margin-top: 32px; }
.pe-phh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; font-size: 17px; font-weight: 500; line-height: 1.3; }
.pe-no { color: var(--pe-muted); font-weight: 400; margin-right: 6px; font-variant-numeric: tabular-nums; }
.pe-sr { display: inline-flex; align-items: center; gap: 10px; }
.pe-st { border-top: 1px solid var(--pe-hair); }
.pe-sh { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 15px; line-height: 1.35; color: var(--pe-text); }
.pe-sn { min-width: 0; }
.pe-sb { padding: 0 0 14px; }
.pe-t { display: flex; flex-direction: column; }
.pe-mt { margin-top: 10px; }
.pe-r { display: grid; grid-template-columns: minmax(0, 1fr) 76px 84px 96px 104px; gap: 10px; align-items: center; padding: 9px 0; font-size: 13px; line-height: 1.4; color: var(--pe-text-2); border-top: 1px solid var(--pe-hair); }
.pe-r.pe-hd { border-top: 0; padding: 4px 0; font-size: 12px; color: var(--pe-muted); }
.pe-q, .pe-p, .pe-s { text-align: right; }
.pe-x { display: flex; justify-content: flex-end; }
.pe-n { min-width: 0; }
.pe-mn { display: flex; align-items: center; gap: 10px; }
.pe-th { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--pe-surface); object-fit: cover; display: block; }
.pe-dates { margin-top: 8px; }
.pe-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; white-space: nowrap; background: var(--pe-surface); color: var(--pe-text-2); }
.pe-pill::first-letter { text-transform: uppercase; }
.pe-pill.is-done { color: var(--pe-done); }
.pe-pill.is-prog { background: var(--pe-accent); color: #fff; }
.pe-pill.is-wait { background: var(--pe-attention); color: var(--pe-text); }
.pe-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; border-top: 1px solid var(--pe-hair); }
.pe-tot { position: sticky; top: var(--pe-sticky, 0); background: var(--pe-surface); border-radius: 24px; padding: 22px; }
.pe-big { font-size: 34px; font-weight: 300; letter-spacing: -.02em; margin: 4px 0 14px; }
.pe-paid { font-weight: 500; }
.pe-bar-p { height: 4px; border-radius: 4px; background: var(--pe-line); margin-top: 10px; overflow: hidden; }
.pe-bar-p i { display: block; height: 100%; background: var(--pe-done); }
.pe-note { margin-top: 12px; line-height: 1.45; }
/* узкое место (телефон, ящик сделки) — итог сверху, строки в две линии */
.pe-c { container-type: inline-size; }
@container (max-width: 760px) {
  .pe { grid-template-columns: 1fr; gap: 24px; }
  .pe-tot { position: static; order: -1; }
  .pe-r { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .pe-r.pe-hd .pe-q, .pe-r.pe-hd .pe-p, .pe-r.pe-hd .pe-x { display: none; }
  .pe-r .pe-p { display: none; }
  .pe-r .pe-q { grid-column: 1; grid-row: 2; text-align: left; color: var(--pe-muted); font-size: 12px; }
  .pe-r .pe-s { grid-column: 2; grid-row: 1; }
  .pe-r .pe-x { grid-column: 2; grid-row: 2; }
  .pe-r.pe-hd .pe-s { grid-row: 1; }
  .pe-rm .pe-q { padding-left: 42px; } /* кол-во материала — под названием, не под фото */
}
/* прошедшее — серым и тише: закрытые этапы и фазы не спорят с текущим (KSH-469); при наведении и раскрытии — снова чётко */
.pe-ph.is-done .pe-phh, .pe-st.is-done:not(.open) .pe-sh { opacity: .5; transition: opacity .15s; }
.pe-ph.is-done .pe-phh:hover, .pe-st.is-done .pe-sh:hover { opacity: .85; }
.pe-st.is-done .pe-sh { font-size: 14px; padding: 11px 0; }
/* клиент: принятые работы — тише (KSH-469) */
.pe-r.is-acc { opacity: .55; }
.pe-acc { font-size: 12px; color: var(--pe-done); white-space: nowrap; }
/* этап раскрывается: круглый шеврон справа, повёрнут, когда открыт (референс Figma 803:2218) */
.pe-chev { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #6E6E73; color: #fff; display: inline-grid; place-items: center; transition: transform .15s; }
.pe-st.open .pe-chev { transform: rotate(180deg); }
.pe-st.is-done .pe-chev { background: #B5B5BA; }
@media (prefers-reduced-motion: reduce) { .pe-chev { transition: none; } }
/* KSH-469: шеврон — просто маленькая чёрная стрелка; подзаголовок «Материалы этапа» — того же веса, что и его строки */
.pe-chev { width: 18px; height: 18px; background: none; color: var(--pe-text); }
.pe-st.is-done .pe-chev { background: none; color: var(--pe-muted); }
.pe-r.pe-mh { margin-top: 6px; padding: 8px 0 4px; border-top: 1px solid var(--pe-hair); font-size: 13px; font-weight: 500; color: var(--pe-text); }
.pe-r.pe-mh .pe-q { font-weight: 400; color: var(--pe-muted); font-size: 12px; }
.pe-rm { color: var(--pe-text-2); }