/* ═══════════════════════════════════════════════════════════════════════════
   /planirovanie-proizvodstva — страница функции «Планирование производства»

   Строение блоков — feature-page.css. Токены — candidate.css. Внутренности
   приложения, которых нет в product-ui.css (загрузка участков, маршрут
   изделия), рисуются здесь. Своего :root у страницы нет и быть не должно.

   Лестница только 1180 / 900 / 640 / 480 — та же, что у candidate.css и
   feature-page.css. Собственных брейкпойнтов страница не заводит.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Загрузка участков (в герое) ─────────────────────────────────────────── */
.p-plan .plan-panel{ padding:20px }
.p-plan .plan-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px }
.p-plan .plan-head small{ color:var(--c-muted-2); font-size:13px }
.p-plan .plan-head h3{ font-size:22px; line-height:1.15; font-weight:var(--c-fw-head); margin:2px 0 0 }
.p-plan .load-list{ display:grid; gap:12px; margin-top:18px }
.p-plan .load-row{ display:grid; grid-template-columns:88px minmax(0,1fr) 48px; gap:12px; align-items:center; font-size:13px }
.p-plan .load-row b{ font-weight:600; min-width:0 }
.p-plan .load-row span{ text-align:right; font-variant-numeric:tabular-nums }
.p-plan .load-row span.is-over{ color:var(--c-red-ink); font-weight:600 }
.p-plan .plan-alert{
  margin-top:18px; padding:14px 16px; border:1px solid var(--c-accent-border);
  background:var(--c-accent-tint); border-radius:var(--c-r-tile);
}
.p-plan .plan-alert b{ color:var(--c-red-ink); font-size:14px }
.p-plan .plan-alert p{ margin:5px 0 0; font-size:13px; line-height:1.5; color:var(--c-muted) }

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

/* ── Демонстрация: маршрут изделия ────────────────────────────────────────── */
.p-plan .route-list{ list-style:none; margin:0; padding:18px 18px 0; display:grid; gap:2px }
.p-plan .route-list li{
  display:grid; grid-template-columns:14px minmax(0,auto) minmax(0,1fr); gap:12px;
  align-items:center; padding:13px 0; border-bottom:1px solid var(--c-line);
}
.p-plan .route-list li:last-child{ border-bottom:0 }
.p-plan .route-list i{ width:10px; height:10px; border-radius:50%; background:#ded7cf }
.p-plan .route-list b{ font-size:15px; color:var(--c-muted) }
.p-plan .route-list span{ font-size:13px; color:var(--c-muted-2) }
.p-plan .route-list .is-done b{ color:var(--c-ink) }
.p-plan .route-list .is-done i{ background:var(--c-green) }
.p-plan .route-list .is-now b{ color:var(--c-ink); font-weight:600 }
.p-plan .route-list .is-now i{ background:var(--c-accent) }
.p-plan .plan-foot{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:14px 18px; border-top:1px solid var(--c-line); margin-top:2px;
}
.p-plan .plan-foot span{ font-size:13px; color:var(--c-muted) }
.p-plan .plan-foot b{ font-size:15px }

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

@media (max-width:1180px){
  .p-plan .load-row{ grid-template-columns:74px minmax(0,1fr) 44px }
}
@media (max-width:900px){
  .p-plan .scn-grid{ grid-template-columns:1fr }
}
@media (max-width:640px){
  .p-plan .plan-panel{ padding:14px }
  .p-plan .plan-dv, .p-plan .route-list, .p-plan .plan-foot{ padding-left:14px; padding-right:14px }
}