/* ═══════════════════════════════════════════════════════════════════════════
   /sebestoimost — страница функции «Себестоимость»

   Строение блоков — feature-page.css. Токены — candidate.css. Заказ и его
   финансы рисуются через .finance-box/.finance-row из product-ui.css;
   здесь — только то, чего там нет: заголовок финансового блока и таблицы
   материалов/труда. Своего :root у страницы нет.

   Лестница только 1180 / 900 / 640 / 480 — та же, что у candidate.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Заголовок финансового блока в герое ─────────────────────────────────── */
.p-cost .fb-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px }
.p-cost .fb-head small{ color:var(--c-muted-2); font-size:13px }

/* ── Плоские пары ключ-значение (выручка, маржа) ──────────────────────────── */
.p-cost .cost-dv{ padding:18px; display:grid; gap:14px }
.p-cost .cost-kv{ display:flex; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--c-line-2) }
.p-cost .cost-kv:last-child{ border-bottom:0; padding-bottom:0 }
.p-cost .cost-kv span{ font-size:13px; color:var(--c-muted) }
.p-cost .cost-kv b{ font-size:14px; text-align:right }
.p-cost .cost-kv b.is-green{ color:var(--c-green) }

/* ── Таблицы материалов и труда ───────────────────────────────────────────── */
.p-cost .cost-table{ padding:16px 18px }
.p-cost .cost-row{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr) auto; gap:12px;
  align-items:center; padding:11px 0; border-bottom:1px solid var(--c-line-2); font-size:13px;
}
.p-cost .cost-row:last-child{ border-bottom:0 }
.p-cost .cost-row span{ color:var(--c-muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.p-cost .cost-row b{ font-size:14px; text-align:right; white-space:nowrap }
.p-cost .cost-row.total{ border-top:1px solid var(--c-line); border-bottom:0; margin-top:2px; padding-top:13px }
.p-cost .cost-row.total span, .p-cost .cost-row.total b{ color:var(--c-ink); font-weight:600 }
.p-cost .cost-table--labor .cost-row{ grid-template-columns:minmax(0,1fr) auto }

/* ── Сценарии применения ──────────────────────────────────────────────────── */
.p-cost .scn-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
.p-cost .scn-card{ padding:24px; border:1px solid var(--c-line); border-radius:var(--c-r-card); background:var(--c-bg); min-width:0 }
.p-cost .scn-card h3{ font-size:var(--c-fs-card); line-height:var(--c-lh-card); letter-spacing:var(--c-ls-card); font-weight:var(--c-fw-head); margin:12px 0 8px }
.p-cost .scn-card p{ margin:0; font-size:16px; line-height:1.58; color:var(--c-muted) }
.p-cost .scn-card ul{ padding:0; margin:16px 0 0; list-style:none; display:grid; gap:8px }
.p-cost .scn-card li{ position:relative; padding-left:20px; font-size:14px; color:var(--c-muted) }
.p-cost .scn-card li:before{ content:"✓"; position:absolute; left:0; top:0; color:var(--c-green); font-weight:700 }

@media (max-width:900px){
  .p-cost .scn-grid{ grid-template-columns:1fr }
}
@media (max-width:640px){
  /* Средняя колонка (количество) уходит первой: на 375 три колонки одной
     строки не помещаются без переноса суммы. Название и сумма остаются —
     это единственная пара, без которой строка не читается вообще. */
  .p-cost .cost-row{ grid-template-columns:minmax(0,1fr) auto; }
  .p-cost .cost-row > span:nth-child(2){ display:none }
}