/* Naryad · цвета продукта (графит и оранжевый из v1) и оформление результата: схема с метками + заказ-наряд по строкам. */
:root {
  --brand: #3f3d3a; --brand-2: #5f5a54; --brand-ink: #2a2826; --brand-soft: #f2f0ed; --brand-line: #dfdbd5;
  --accent: #f26a1b; --accent-soft: #fdeee4; --accent-ink: #9c3f08;
  --nr-grey: #b3ada6; --nr-grey-ink: #6c665f;
}
/* бренд графитовый, поэтому главный результат в заголовке выделен оранжевым цветом знака */
.w-hero h1 em { color: var(--accent); }

.nr { position: relative; display: flex; flex-direction: column; gap: 14px; }
.nr-head { display: flex; flex-direction: column; gap: 8px; }
.nr-no { font-size: 13px; color: var(--muted); font-weight: 500; }
.nr-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 31px; }
.nr-chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-ink);
  font-size: 14px; font-weight: 600; border: 1px solid var(--brand-line); white-space: nowrap; }
.nr-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* лист схемы */
.nr-sheet { border: 1px solid var(--brand-line); border-radius: 14px; padding: 10px 12px 8px; }
.nr-sheet-h { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-ink); }
.nr-sheet-h span:last-child { color: var(--muted); }
.nr-svg { display: block; width: 100%; height: auto; margin-top: 4px; }
.nr-svg text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.nr-svg .w-h { transform-box: fill-box; transform-origin: center; }
.nr-bf { fill: #fdfcfa; }
.nr-bo { fill: none; stroke: #3f3d3a; stroke-width: 2.4; stroke-linejoin: round; }
.nr-gl { fill: #e2e9ed; stroke: #3f3d3a; stroke-width: 1.3; }
.nr-rf { fill: none; stroke: #3f3d3a; stroke-width: 1.2; stroke-opacity: .5; }
.nr-mi { fill: #fdfcfa; stroke: #3f3d3a; stroke-width: 1.3; }
.nr-lp rect { fill: #fff1cc; stroke: #3f3d3a; stroke-width: 1.1; }
.nr-tl rect { fill: #f3cbc2; stroke: #3f3d3a; stroke-width: 1.1; }
.nr-ax { fill: none; stroke: #a19b94; stroke-width: 2.2; stroke-linecap: round; }
.nr-ty rect { fill: #3f3d3a; }
.nr-ty path { stroke: #7a746d; stroke-width: 1.4; }
.nr-pt rect, .nr-pt circle, .nr-pt ellipse { fill: #fff; stroke: #3f3d3a; stroke-width: 1.6; }
.nr-pt path { fill: none; stroke: #3f3d3a; stroke-width: 1.1; }
.nr-pt .k { fill: #3f3d3a; }
.nr-bar { fill: none; stroke: #3f3d3a; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.nr-arm { fill: none; stroke: #3f3d3a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nr-pipe { fill: none; stroke: #5f8fb0; stroke-width: 2.6; stroke-linecap: round; }
.nr-toe0 { fill: none; stroke: #a19b94; stroke-width: 1.2; stroke-dasharray: 4 3; }
.nr-toe { fill: none; stroke: #3f3d3a; stroke-width: 1.8; stroke-linecap: round; }
.nr-lift { fill: none; stroke: #cdc7bf; stroke-width: 4.5; stroke-linecap: round; }
.nr-post rect { fill: #6c665f; }
.nr-glare { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-opacity: .09; }
.nr-sl { font-size: 13px; font-weight: 600; fill: var(--muted); paint-order: stroke; stroke: #fbfdfe; stroke-width: 4px; stroke-linejoin: round; }
.nr-hg { fill: #cdc7bf; }
.nr-key rect { fill: #fff; stroke: #8b857e; stroke-width: 1; }
.nr-pad { fill: #f3f1ee; stroke: #8b857e; stroke-width: 1.2; }
.nr-board { fill: none; stroke: var(--brand-2); stroke-width: 1.6; stroke-dasharray: 6 4; }
.nr-scr { fill: #4b4845; }
.nr-crack { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-opacity: .9; }
.nr-cam0 { fill: #23211f; }
.nr-tb rect { fill: #fff; stroke: #3f3d3a; stroke-width: 1; }
.nr-tb text { font-size: 12px; font-weight: 700; fill: #2a2826; }
.nr-tb text.m { font-size: 11px; font-weight: 500; fill: #7a746d; }

/* зона жалобы: пульсирует оранжевым, после ответа клиента спокойная зелёная */
.nr-halo .h > * { fill: color-mix(in srgb, var(--good) 12%, transparent); stroke: color-mix(in srgb, var(--good) 55%, transparent); stroke-width: 1.6;
  stroke-dasharray: 5 4; transition: fill .5s, stroke .5s; }
.nr.pre .nr-halo .h > * { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: color-mix(in srgb, var(--accent) 75%, transparent); stroke-dasharray: none; }
.nr-halo .rg > * { fill: none; stroke: var(--accent); stroke-width: 2.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.nr.pre .nr-halo.in .rg > * { animation: nr-ring 1.8s cubic-bezier(.2, .6, .35, 1) infinite; }
.nr-halo.body .h > * { fill: none; stroke-width: 10; stroke-dasharray: none; stroke: color-mix(in srgb, var(--good) 30%, transparent); }
.nr.pre .nr-halo.body .h > * { fill: none; stroke: color-mix(in srgb, var(--accent) 40%, transparent); }
.nr.pre .nr-halo.body.in .rg > * { animation-name: nr-ring-b; }
@keyframes nr-ring { 0% { opacity: .9; transform: scale(.88); } 100% { opacity: 0; transform: scale(1.32); } }
@keyframes nr-ring-b { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.07); } }
.nr-hl { font-size: 14px; font-weight: 750; fill: var(--ink-2); paint-order: stroke; stroke: #fbfdfe; stroke-width: 5px; stroke-linejoin: round; transition: fill .5s; }
.nr.pre .nr-hl { fill: var(--accent-ink); }

/* метки на схеме: номер строки наряда; цвет как у строки после ответа клиента */
.nr-lead { fill: none; stroke: var(--brand); stroke-width: 1.5; transition: stroke .45s; }
.nr-dot { fill: var(--brand); stroke: #fff; stroke-width: 1.5; transition: fill .45s; }
.nr-mc { fill: var(--brand); stroke: #fff; stroke-width: 2.5; transition: fill .45s; }
.nr-mk text { font-size: 13.5px; font-weight: 800; fill: #fff; }
.nr-mk.do .nr-mc, .nr-mk.do .nr-dot { fill: var(--good); }
.nr-mk.do .nr-lead { stroke: var(--good); }
.nr-mk.later .nr-mc, .nr-mk.later .nr-dot { fill: var(--nr-grey); }
.nr-mk.later .nr-lead { stroke: var(--nr-grey); stroke-dasharray: 3 3; }
.nr-mk.q .nr-mc, .nr-mk.q .nr-dot { fill: var(--brand); }
.nr-mk.q .nr-lead { stroke: var(--brand); stroke-dasharray: none; }

/* заказ-наряд */
.nr-doc { display: flex; flex-direction: column; gap: 5px; }
.nr-doc-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; padding: 0 2px 2px; }
.nr-doc-h b { font-size: 13.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 800; color: var(--brand-ink); }
.nr-doc-h span { font-size: 13px; color: var(--muted); }
.nr-ln, .nr-dg { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 10px 5px 7px; border-radius: 11px; background: var(--page); }
.nr-ln { transition: opacity .45s var(--ease), transform .45s var(--ease), background-color .45s, box-shadow .45s; }
.nr-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 800; font-size: 14px;
  transition: background-color .45s; }
.nr-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.22; }
.nr-t b { font-size: 15px; font-weight: 650; color: var(--ink); transition: color .45s; }
.nr-t small { font-size: 13px; color: var(--muted); margin-top: 1px; }
.nr-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.22; }
.nr-r b { font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .45s; }
.nr-r em { display: inline-block; font-style: normal; font-size: 13px; font-weight: 700; padding: 0 9px 1px; border-radius: 999px; white-space: nowrap; }
.nr-ln.do { background: var(--good-soft); box-shadow: inset 3px 0 0 var(--good); }
.nr-ln.do .nr-n { background: var(--good); }
.nr-ln.do .nr-st { background: var(--good); color: #fff; }
.nr-ln.later { background: #f3f2f0; box-shadow: inset 0 0 0 1px #e4e1dd; }
.nr-ln.later .nr-n { background: var(--nr-grey); }
.nr-ln.later .nr-t b, .nr-ln.later .nr-r b { color: #8b857e; }
.nr-ln.later .nr-st { background: #e6e3df; color: var(--nr-grey-ink); }
.nr-ln.q { background: var(--page); box-shadow: none; }
.nr-ln.q .nr-n { background: var(--brand); }
.nr-ln.q .nr-t b, .nr-ln.q .nr-r b { color: var(--ink); }

/* диагностика: вечером «запись», утром «сделано» */
.nr-dg { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.nr-dg .nr-n { background: var(--good); }
.nr-dg .nr-n i { display: grid; place-items: center; }
.nr-dg .nr-n svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nr-dg em.a { background: var(--accent-soft); color: var(--accent-ink); }
.nr-dg em.b { background: var(--good-soft); color: var(--good-ink); }
.nr-dg .a { display: none !important; }
.nr-dg.wait .a { display: grid !important; }
.nr-dg.wait em.a { display: inline-block !important; }
.nr-dg.wait .b { display: none !important; }
.nr-dg.wait .nr-n { background: var(--accent); }

/* ответ клиента и итог */
.nr-ans { margin-top: 1px; padding: 6px 11px; border-radius: 11px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 14px; line-height: 1.35; color: var(--accent-ink); text-wrap: pretty; }
.nr-ans svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; vertical-align: -3px; margin-right: 6px; }
.nr-ans > span { font-weight: 600; margin-right: 5px; }
.nr-ans b { font-size: 15px; font-weight: 700; color: var(--ink); }
.nr-out { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 1px; }
.nr-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 8px; padding: 5px 2px 0; border-top: 2px solid var(--ink); }
.nr-sum > span { font-weight: 650; font-size: 14.5px; }
.nr-sum b { font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: var(--good-ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.05; }
.nr-sum small { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.nr-rem { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 11px; border: 1.5px dashed #c9c3bc; background: #f6f5f3; line-height: 1.25; }
.nr-rem svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; flex: none; }
.nr-rem b { display: block; font-size: 14.5px; }
.nr-rem small { display: block; font-size: 13px; color: var(--muted); }
/* печать «согласовано»: справа вверху, рядом с фактами из звонка (на узком экране в конце) */
.nr-stamp { position: absolute; top: -8px; right: 6px; --rot: -6deg; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 14px;
  border: 3px solid #15803d; border-radius: 10px; color: #15803d; background: rgba(255, 255, 255, .92); text-transform: uppercase;
  box-shadow: inset 0 0 0 2px rgba(21, 128, 61, .22); pointer-events: none; }
.nr-stamp b { font-size: 15.5px; letter-spacing: .08em; font-weight: 850; }
.nr-stamp span { font-size: 12.5px; font-weight: 700; letter-spacing: .03em; }

/* строка «потом» летит в напоминание */
.nr-fly { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 5px; border-radius: 999px; background: #fff;
  border: 1.5px dashed var(--nr-grey); color: var(--nr-grey-ink); font-size: 14px; font-weight: 650; white-space: nowrap; pointer-events: none;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); }
.nr-fly i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--nr-grey); color: #fff; font-style: normal; font-size: 12.5px; font-weight: 800; }

/* наряд в переписке */
.nr-cc { min-width: 255px; }
.nr-cc-h { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.nr-cc-l { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 14px; padding: 3px 0; }
.nr-cc-l i { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-style: normal; font-weight: 800; font-size: 12px; display: grid; place-items: center; }
.nr-cc-l b { font-weight: 700; white-space: nowrap; }
.nr-cc-s { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.35; }

/* итог для снимков и миниатюр: без переходов; в миниатюре печать закрыта бейджем «Согласовано за …», он её и заменяет */
.w-final .nr *, .w-th-in .nr * { transition: none !important; }
.w-th-in .nr-stamp { display: none; }

@container (max-width: 700px) {
  .nr-body { grid-template-columns: minmax(0, 1fr); }
  .nr-out { grid-template-columns: minmax(0, 1fr); }
  .nr-stamp { position: static; align-self: flex-end; margin: 8px 8px 2px 0; }
}