/* ═══════════════════════════════════════════════════════════════════════════
   /pozakaznoe-proizvodstvo — «Позаказное производство»

   Строение общих блоков — feature-page.css (.fh, .sec-head, .benefits, .demo,
   .rel-grid, .launch, .faq, .final-cta) и candidate.css (токены, контейнер).
   Нарисованные фрагменты интерфейса используют словарь product-ui.css там,
   где он подходит (.ui-pill), а собственные узлы (карточка заказа, мини-
   маршрут, финансовый блок, витрина «разрозненный учёт vs Цех360», сценарии,
   рабочее место цеха) — здесь: их нет ни в общей библиотеке, ни на других
   страницах в таком виде.

   Источник — присланный макет ceh360-pozakaznoe-proizvodstvo-final.html.
   Точки перелома приведены к лестнице проекта: 1180 / 900 / 640 / 480
   (в макете были 520 / 820 / 1180 — это не тот же файл, что у остальных
   кандидатов, и его собственная лестница сюда не переносится).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: четыре плашки преимуществ вместо трёх ──────────────────────────── */
@media (min-width:901px){
  .p-poz .fh-points{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}

/* ── Карточка заказа в hero и в демо «Путь заказа» ────────────────────────── */
.p-poz .oc{ padding:4px }
.p-poz .oc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px }
.p-poz .oc-head > div{ min-width:0 }
.p-poz .oc-code{ font-size:12px; color:var(--c-muted-2) }
.p-poz .oc-name{ font-size:22px; line-height:1.15; letter-spacing:-.02em; font-weight:var(--c-fw-head); margin-top:5px }
.p-poz .oc-kv{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px }
.p-poz .oc-kv > div{ min-width:0; padding:12px; border:1px solid var(--c-line); border-radius:var(--c-r-tile); background:var(--c-bg) }
.p-poz .oc-kv span{ display:block; font-size:11px; color:var(--c-muted-2) }
.p-poz .oc-kv b{ display:block; margin-top:3px; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.p-poz .oc-set{ margin-top:10px; padding:12px; border:1px solid var(--c-line); border-radius:var(--c-r-tile); background:var(--c-bg) }
.p-poz .oc-set span{ display:block; font-size:11px; color:var(--c-muted-2) }
.p-poz .oc-set b{ display:block; margin-top:6px; font-size:14px; font-weight:500 }
.p-poz .oc-product{ margin-top:14px; border:1px solid var(--c-line); border-radius:var(--c-r-tile); overflow:hidden }
.p-poz .oc-product-head{ padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--c-soft-2); border-bottom:1px solid var(--c-line) }
.p-poz .oc-product-head b{ font-size:14px }
.p-poz .oc-product-head span{ font-size:11px; color:var(--c-muted-2) }
.p-poz .oc-route{ list-style:none; margin:0; padding:12px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px }
.p-poz .oc-route li{ min-width:0; border:1px solid var(--c-line); border-radius:var(--c-r-tile); padding:9px 8px; background:var(--c-bg) }
.p-poz .oc-route .n{ font-size:10px; color:var(--c-muted-2) }
.p-poz .oc-route b{ display:block; margin-top:5px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.p-poz .oc-route span{ display:block; margin-top:7px; font-size:10px }
.p-poz .oc-route li.is-done span{ color:var(--c-green-ink) }
.p-poz .oc-route li.is-now span{ color:var(--c-accent-ink) }
.p-poz .oc-route li.is-wait span{ color:var(--c-muted-2) }

/* ── Финансовый блок заказа ────────────────────────────────────────────── */
.p-poz .oc-finance{ display:grid; grid-template-columns:1.2fr .8fr; gap:10px; margin-top:14px }
.p-poz .oc-fin-card{ border:1px solid var(--c-line); border-radius:var(--c-r-tile); padding:14px; min-width:0 }
.p-poz .oc-fin-card .label{ font-size:11px; color:var(--c-muted-2) }
.p-poz .oc-fin-card .big{ font-size:22px; line-height:1; font-weight:var(--c-fw-head); margin-top:7px; letter-spacing:-.02em; white-space:nowrap }
.p-poz .oc-fin-card .big.green{ color:var(--c-green-ink) }
.p-poz .oc-fin-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:11px }
.p-poz .oc-fin-list div{ background:var(--c-soft); border-radius:10px; padding:9px; min-width:0 }
.p-poz .oc-fin-list span{ font-size:9px; color:var(--c-muted-2) }
.p-poz .oc-fin-list b{ display:block; font-size:12px; margin-top:2px; white-space:nowrap }
.p-poz .oc-fin-note{ margin-top:8px; font-size:12px; color:var(--c-muted-2) }
.p-poz .oc-pay-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px }

/* ── Контраст «разрозненный учёт vs Цех360» ───────────────────────────────── */
.p-poz .contrast-wrap{ background:#181818; color:#fff; border-radius:var(--c-r-panel); padding:48px; display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; margin-top:56px }
.p-poz .contrast-wrap .label{ color:#ff9f79 }
.p-poz .contrast-wrap .label:before{ background:#ff9f79 }
.p-poz .contrast-wrap h2{ color:#fff; font-size:var(--c-fs-h3); line-height:var(--c-lh-h3); letter-spacing:var(--c-ls-h3); font-weight:var(--c-fw-head); margin:14px 0 0 }
.p-poz .contrast-wrap > div:first-child > p{ color:#bcb7b3; margin-top:18px; font-size:16px; line-height:1.6 }
.p-poz .contrast-table{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid #353535; border-radius:18px; overflow:hidden }
.p-poz .contrast-col{ padding:22px; min-width:0 }
.p-poz .contrast-col + .contrast-col{ border-left:1px solid #353535; background:#201d1b }
.p-poz .contrast-col h4{ font-size:18px; margin:0 0 16px; font-weight:var(--c-fw-head) }
.p-poz .contrast-item{ display:flex; gap:10px; padding:12px 0; border-top:1px solid #353535; color:#d4cfcb; font-size:14px }
.p-poz .contrast-item:first-of-type{ border-top:0 }
.p-poz .contrast-item svg{ width:17px; height:17px; flex:none; margin-top:1px }
.p-poz .contrast-col.bad svg{ color:#8f8984 }
.p-poz .contrast-col.good svg{ color:var(--c-green) }

/* ── Сценарий: список уровней + три карточки-иллюстрации ──────────────────── */
.p-poz .scenario-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:64px; align-items:start }
.p-poz .scenario-list{ display:grid; margin-top:28px; border-top:1px solid var(--c-line) }
.p-poz .scenario-row{ display:grid; grid-template-columns:56px minmax(0,1fr); gap:16px; padding:20px 0; border-bottom:1px solid var(--c-line) }
.p-poz .scenario-row .num{ font-size:12px; color:var(--c-accent); font-weight:600; letter-spacing:.12em; padding-top:3px }
.p-poz .scenario-row b{ font-size:18px; line-height:1.2 }
.p-poz .scenario-row p{ margin:6px 0 0; color:var(--c-muted); font-size:15px }
.p-poz .story-stack{ display:grid; gap:20px }
.p-poz .story-card{ border-radius:var(--c-r-card); background:var(--c-soft); padding:22px; min-width:0 }
.p-poz .story-card.orange{ background:linear-gradient(135deg,var(--c-accent-soft),#ffd3bd) }
.p-poz .story-tag{ font-size:12px; font-weight:600; color:var(--c-accent); letter-spacing:.1em; text-transform:uppercase }
.p-poz .story-card h3{ font-size:22px; line-height:1.15; margin:10px 0 0; font-weight:var(--c-fw-head) }
.p-poz .story-card p{ margin:9px 0 0; color:var(--c-muted); font-size:15px }
.p-poz .story-ui{ margin-top:18px; background:var(--c-bg); border-radius:16px; padding:16px; border:1px solid var(--c-line) }
.p-poz .story-row{ display:grid; grid-template-columns:1.2fr .8fr .6fr; gap:10px; padding:10px 0; border-bottom:1px solid var(--c-line); font-size:13px; align-items:center }
.p-poz .story-row:last-child{ border-bottom:0 }
.p-poz .story-row span:last-child{ text-align:right }
.p-poz .mini-route{ display:grid; gap:8px; margin-top:0 }
.p-poz .mini-route-row{ display:grid; grid-template-columns:28px minmax(0,1fr) 96px 76px; gap:8px; align-items:center; border:1px solid var(--c-line); border-radius:12px; padding:9px 11px; background:var(--c-bg) }
.p-poz .mini-route-row .num{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--c-soft); font-size:11px; flex:none }
.p-poz .mini-route-row b{ font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.p-poz .mini-route-row span{ font-size:11px; color:var(--c-muted-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.p-poz .mini-route-row em{ font-style:normal; font-size:11px; text-align:right; white-space:nowrap }
.p-poz .mini-route-row .ok{ color:var(--c-green-ink) }
.p-poz .mini-route-row .run{ color:var(--c-accent-ink) }
.p-poz .mini-route-row .bad{ color:var(--c-red-ink) }
.p-poz .alert-box{ margin-top:14px; padding:15px; border:1px solid #ffc7bc; border-radius:14px; background:#fff5f1 }
.p-poz .alert-box strong{ display:block; color:#b83b29; font-size:14px }
.p-poz .alert-box p{ margin:6px 0 0; font-size:13px; color:#7f5a50 }
.p-poz .preview-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:12px }
.p-poz .pbox{ padding:13px; border:1px solid var(--c-line); border-radius:12px; background:var(--c-soft-2); min-width:0 }
.p-poz .pbox span{ font-size:11px; color:var(--c-muted-2) }
.p-poz .pbox b{ display:block; margin-top:4px; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* Состав заказа — три изделия через точку, длиннее, чем одно значение.
   Обрезка многоточием реально теряет «1 шт» у Ограждения — перенос строкой
   вместо неё, содержимое не режется. */
.p-poz .pbox b.wrap{ white-space:normal; overflow:visible; text-overflow:clip }
.p-poz .pbox.profit{ background:var(--c-green-soft); border-color:#cfeadf }
.p-poz .pbox.profit b{ color:var(--c-green-ink) }
.p-poz .money-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px }
.p-poz .money-grid .pbox b{ font-size:13px }

/* ── Связанные функции: своя сетка с иконкой (не rel-grid — своя карточка) ── */
.p-poz .feature-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.p-poz .feature-card{ border:1px solid var(--c-line); border-radius:var(--c-r-card); padding:22px; min-height:220px; display:flex; flex-direction:column; background:var(--c-bg); min-width:0 }
.p-poz .feature-icon{ width:46px; height:46px; border-radius:13px; background:var(--c-soft); display:grid; place-items:center; color:#4e4945 }
.p-poz .feature-icon svg{ width:21px; height:21px }
.p-poz .feature-card h3{ font-size:18px; line-height:1.2; margin:18px 0 0; font-weight:var(--c-fw-head) }
.p-poz .feature-card p{ margin:9px 0 0; color:var(--c-muted); font-size:14px; line-height:1.5 }
.p-poz .feature-card .cap-link{ margin-top:auto; padding-top:18px; color:var(--c-accent); font-weight:600; font-size:14px }
.p-poz .features-more{ display:flex; justify-content:flex-end; margin-top:22px }

/* ── Рабочее место цеха: список ролей + мобильный интерфейс ───────────────── */
.p-poz .roles-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center }
.p-poz .role-list{ display:grid; gap:12px; margin-top:26px }
.p-poz .role-line{ display:grid; grid-template-columns:50px minmax(0,1fr); gap:14px; align-items:center }
.p-poz .role-line .icon{ width:50px; height:50px; border-radius:13px; background:var(--c-green-soft); border:1px solid #d5eee5; color:var(--c-green-ink); display:grid; place-items:center }
.p-poz .role-line .icon svg{ width:21px; height:21px }
.p-poz .role-line b{ font-size:15px }
.p-poz .role-line span{ display:block; color:var(--c-muted); font-size:13px; margin-top:2px }
/* Цвет плашки рабочего интерфейса — тот же градиент, что уже утверждён для
   карточки заказа в hero (.order-hero в макете), а не новый оттенок. */
/* Раньше — свой яркий фирменный градиент, единственный на семье страниц с
   этим компонентом. Приведено к общей мягкой подложке (--c-worker-panel-bg
   в candidate.css): она спокойнее и не спорит с оранжевым акцентом кнопок
   рядом, как уже сделано на /dlya-metalloobrabotki и трёх отраслевых. */
.p-poz .worker-panel{ background:var(--c-worker-panel-bg); border-radius:var(--c-r-panel); padding:30px; display:flex; align-items:center; justify-content:center; min-height:600px }
.p-poz .mobile-ui{ width:min(100%,360px); margin:0; padding:16px; border:1px solid var(--c-line); border-radius:32px; background:#171717; box-shadow:var(--c-shadow-lg) }
.p-poz .mobile-screen{ background:var(--c-bg); border-radius:22px; overflow:hidden; min-height:520px }
.p-poz .mobile-top{ padding:12px; text-align:center; border-bottom:1px solid var(--c-line); font-size:12px; font-weight:600 }
.p-poz .mobile-body{ padding:20px }
.p-poz .mobile-body .muted{ color:var(--c-muted-2); font-size:12px }
.p-poz .mobile-body h3{ font-size:24px; margin:5px 0 0; font-weight:var(--c-fw-head) }
.p-poz .mobile-task{ margin-top:16px; border:1px solid var(--c-line); border-radius:16px; padding:16px }
.p-poz .mobile-task .orderlink{ color:var(--c-accent); font-size:12px; font-weight:600 }
.p-poz .mobile-task h4{ font-size:18px; margin:10px 0 0; font-weight:var(--c-fw-head) }
.p-poz .mobile-task p{ color:var(--c-muted); font-size:13px; margin:7px 0 0 }
.p-poz .mobile-pair{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px }
.p-poz .mobile-pair div{ background:var(--c-soft); border-radius:11px; padding:11px; min-width:0 }
.p-poz .mobile-pair span{ display:block; font-size:10px; color:var(--c-muted-2) }
.p-poz .mobile-pair b{ display:block; margin-top:4px; font-size:13px }
.p-poz .mobile-btn{ display:flex; justify-content:center; background:var(--c-accent); color:#fff; border-radius:var(--c-r-control); padding:12px; margin-top:13px; font-weight:600; font-size:14px }
.p-poz .mobile-nav{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:13px; border-top:1px solid var(--c-line); margin-top:36px; text-align:center; font-size:11px; color:var(--c-muted-2) }

/* ═══ ЛЕСТНИЦА 1180 / 900 / 640 / 480 ══════════════════════════════════════ */
@media (max-width:1180px){
  .p-poz .contrast-wrap{ grid-template-columns:1fr; gap:32px }
  .p-poz .scenario-grid{ grid-template-columns:1fr; gap:36px }
  .p-poz .feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .p-poz .roles-grid{ grid-template-columns:1fr; gap:32px }
  .p-poz .worker-panel{ max-width:640px; width:100%; margin:0 auto }
}
@media (max-width:900px){
  .p-poz .oc-kv{ grid-template-columns:1fr 1fr }
  .p-poz .oc-kv > div:nth-child(3){ grid-column:1/-1 }
  .p-poz .oc-route{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .p-poz .oc-finance{ grid-template-columns:1fr }
  .p-poz .money-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:640px){
  .p-poz .contrast-wrap{ padding:26px; border-radius:22px }
  .p-poz .contrast-table{ grid-template-columns:1fr }
  .p-poz .contrast-col + .contrast-col{ border-left:0; border-top:1px solid #353535 }
  .p-poz .feature-grid{ grid-template-columns:1fr }
  .p-poz .oc-route{ grid-template-columns:1fr 1fr }
  .p-poz .oc-route li:last-child{ grid-column:1/-1 }
  .p-poz .mini-route-row{ grid-template-columns:24px minmax(0,1fr) 72px }
  .p-poz .mini-route-row span{ display:none }
  /* «готово к работе» (3 слова) не помещалось в 72px и вылезало за правый
     край строки — статусу разрешён перенос вместо этого. */
  .p-poz .mini-route-row em{ white-space:normal; line-height:1.2 }
  .p-poz .preview-grid{ grid-template-columns:1fr }
  .p-poz .money-grid{ grid-template-columns:1fr }
  .p-poz .story-row{ grid-template-columns:1fr auto }
  .p-poz .story-row span:first-of-type{ grid-column:1/-1; color:var(--c-muted); font-size:12px }
  .p-poz .story-row span:last-child{ grid-column:2; grid-row:1 }
  .p-poz .worker-panel{ padding:18px; border-radius:20px; min-height:auto }
}
@media (max-width:480px){
  /* Четыре плашки преимуществ вместо трёх — вторая строка карточек, которой
     нет у остальных страниц шаблона (там ровно три, в одну строку на этой
     же ширине). Это добавляет ~70px высоты сверх бюджета, на который
     рассчитан общий .fh-points (640.8px на других пяти страницах).
     Компенсация: H1 — «Позаказное производство: путь заказа через цех»,
     3 строки на 375 и на 1440 одинаково. Вариант «...от заказа до
     отгрузки» тоже давал 3 строки без  , но с ним же — вешал «от»
     одно в конце строки на 1440 (нужен   между «от» и «заказа»), а
     ЭТОТ   на 375 возвращал H1 к 4 строкам (142.9px вместо 107.2px)
     и снова ломал бюджет: две ширины требовали противоположного решения
     по одной и той же паре слов. У «путь заказа через цех» таких пар
     нет — ни на одной из проверенных ширин перенос не оставляет предлог
     в одиночестве, поэтому   здесь не нужен вовсе. Подзаголовок
     сокращён без потери смысла, отступ у .label уменьшен. Итог, измерено
     после сборки: 666.95px на 375×812 и на 390×844 — под порогами 672 и
     704 с запасом 5.05px и 37.05px. */
  .p-poz .fh-copy .label{ margin-bottom:10px }
  .p-poz .oc-kv{ grid-template-columns:1fr }
  .p-poz .oc-kv > div:nth-child(3){ grid-column:auto }
  .p-poz .oc-route{ grid-template-columns:1fr }
  .p-poz .oc-route li:last-child{ grid-column:auto }
  .p-poz .oc-fin-list{ grid-template-columns:1fr }
  .p-poz .money-grid{ grid-template-columns:1fr }
  .p-poz .mobile-ui{ width:100% }
}