/* Sozvon · цвета продукта и результат: лента расшифровки + лист КП (у справки: источники + лист справки). */
:root {
  --brand: #7a6514; --brand-2: #86701a; --brand-ink: #5a4a0c; --brand-soft: #f6f1df; --brand-line: #e7dcb5;
  --accent: #3d5a80; --accent-soft: #e8eef6; --accent-ink: #2c4462; --accent-line: #cfdae8;
  --sz-hl: #ffe27a; --sz-hl-soft: #fff6d1; --sz-hl-edge: #e3a900;
  --sz-ink: #284c8a;
  --sz-paper: #fffefb; --sz-rule: #ece7da; --sz-rib: #f7f6f1;
  --sz-serif: Georgia, "Times New Roman", "DejaVu Serif", serif;
}
.w-mark svg .o { stroke: #bcd0ea; }
.w-mark svg .sz-fold { fill: #fff; }
/* итоговый снимок (?final=1, ?og=1): шаги сразу в конечном цвете, без перехода */
.w-final .w-st, .w-final .w-st i { transition: none !important; }

.sz { display: flex; flex-direction: column; gap: 12px; }

/* что агент понял из созвона */
.sz-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 30px; }
.sz-chips-l { font-size: 14px; color: var(--muted); margin-right: 2px; }
.sz-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; white-space: nowrap;
  background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--brand-line); }
.sz-chip.b { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }

.sz-body { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 14px; align-items: stretch; }

/* ---------- лента расшифровки ---------- */
.sz-rib { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 11px 9px 10px; border-radius: 12px; background: var(--sz-rib); border: 1px solid #e7e3d7; }
.sz-rib-h { display: flex; align-items: center; gap: 7px; padding: 0 3px; font-size: 13px; color: var(--muted); }
.sz-rib-h b { font-size: 14px; color: var(--ink); font-weight: 700; }
.sz-rib-h .r { margin-left: auto; font-variant-numeric: tabular-nums; }
.sz-rib-h .rec { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .18); }
.sz-wave { position: relative; height: 30px; margin: 0 3px 2px; }
.sz-wave svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sz-wv rect { fill: #d9d4c4; }
.sz-wv-on rect { fill: var(--brand); }
.sz-wv-on.w-h { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.8s linear; }
.sz-wv-on.w-h.in { clip-path: inset(0 0 0 0); }
.sz-pin { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 1.5px var(--sz-rib); }
.sz-pin.q { background: var(--sz-hl-edge); }
.sz-pin.b { background: var(--brand-ink); }
.sz-lns { display: flex; flex-direction: column; gap: 2px; }
.sz-ln { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 3px; padding: 4px 6px; border-radius: 7px; font-size: 13px; line-height: 1.36; color: var(--ink); }
.sz-ln > b { position: relative; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.sz-ln > span { position: relative; }
.sz-ln.m > span { color: var(--muted); font-style: italic; }
.sz-hl { position: absolute; inset: 0; border-radius: 7px; background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.sz-ln.q .sz-hl { background: var(--sz-hl-soft); box-shadow: inset 3px 0 0 var(--sz-hl-edge); }
.sz-ln.b .sz-hl { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.sz-tag { display: inline-block; padding: 0 6px; border-radius: 5px; font-size: 12px; line-height: 17px; font-weight: 700; font-style: normal; white-space: nowrap;
  vertical-align: 1px; background: var(--accent); color: #fff; }
.sz-tag.q { background: var(--sz-hl); color: #4d3b00; box-shadow: inset 0 0 0 1px rgba(227, 169, 0, .55); }
.sz-tag.b { background: var(--brand); }
.sz-rib-f { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 8px 4px 0; border-top: 1px dashed #dcd7c8; font-size: 13px; color: var(--muted); }
.sz-rib-f span { display: inline-flex; align-items: center; gap: 6px; }
.sz-rib-f .c::before, .sz-rib-f .m::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.sz-rib-f .m::before { background: #b9b3a3; }
.sz-ping { animation: sz-ping 1.3s var(--ease); }
@keyframes sz-ping { 0%, 35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } }
.sz-pin.sz-ping { animation: sz-pinp 1.3s var(--ease); }
@keyframes sz-pinp { 0%, 40% { transform: scaleY(1.5); } 100% { transform: none; } }

/* ---------- лист КП ---------- */
.sz-sheet { position: relative; min-width: 0; padding: 14px 22px 15px; background: var(--sz-paper); border: 1px solid #e3ddcd; border-radius: 3px;
  box-shadow: 5px 5px 0 -1px #f4f0e5, 5px 5px 0 0 #e0d9c6, 0 18px 34px -20px rgba(70, 56, 8, .45); }
.sz-lh { display: flex; align-items: center; gap: 8px; padding-bottom: 7px; border-bottom: 2px solid var(--brand); font-size: 12px; font-weight: 750;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); }
.sz-lh .ic { flex: none; width: 20px; height: 20px; border-radius: 5px; background: var(--brand); display: grid; place-items: center; }
.sz-lh .ic svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sz-lh .sz-dn { margin-left: auto; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); white-space: nowrap; }
.sz-hd { padding-right: 215px; }
.sz-title { margin: 8px 0 1px; font-size: 19px; line-height: 1.22; font-weight: 750; letter-spacing: -.012em; color: #17140a; }
.sz-to { font-size: 13.5px; color: var(--ink-2); }
.sz-sl { margin-bottom: 4px; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); }
.sz-now { margin-top: 10px; }
.sz-q { margin: 0; font: italic 15.5px/1.5 var(--sz-serif); color: #241e08; }
.sz-q .sz-tc { margin: 0 8px 0 0; vertical-align: 2px; }
.sz-qt { padding: 0 1px; background: linear-gradient(transparent 16%, var(--sz-hl) 16%, var(--sz-hl) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sz-tc { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; padding: 0 7px 0 6px; border-radius: 6px; border: 1px solid var(--accent-line);
  background: var(--accent-soft); color: var(--accent-ink); font: 700 13px/19px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: 1px; cursor: pointer; }
.sz-tc svg { width: 8px; height: 8px; fill: currentColor; }
.sz-tc:hover { background: #dce6f2; }

/* этапы: срок, график по дням, цена по прайсу */
.sz-plan { margin-top: 11px; }
.sz-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 62px 128px 90px; align-items: center; column-gap: 10px; padding: 5px 0;
  border-bottom: 1px solid var(--sz-rule); font-size: 14.5px; }
.sz-th { padding: 0 0 4px; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); border-bottom: 1.5px solid #d8cfb8; }
.sz-th > span:last-child { text-align: right; }
.sz-gh { display: flex; justify-content: space-between; color: var(--muted); }
.sz-no { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 750;
  background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--brand-line); }
.sz-nm { font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sz-dd { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.sz-gt { position: relative; height: 14px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #efeadb 0, #efeadb calc(100% / var(--n) - 2px), transparent calc(100% / var(--n) - 2px), transparent calc(100% / var(--n))); }
.sz-gb { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--brand); }
.sz-gb.w-h { opacity: 1; transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.3, .7, .3, 1); }
.sz-gb.w-h.in { transform: none; }
.sz-sm { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sz-totr { display: flex; align-items: center; gap: 14px; padding-top: 7px; }
.sz-tl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sz-tl > b { font-size: 15px; font-weight: 750; }
.sz-bud, .sz-after { font-size: 13px; color: var(--ink-2); }
.sz-bud .sz-tc { margin-left: 6px; }
.sz-tot { flex: none; font-size: 17px; font-weight: 750; color: var(--brand); white-space: nowrap; }
.sz-tot b { font-size: 28px; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }

/* вы спрашивали */
.sz-asked { margin-top: 10px; }
.sz-asks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sz-ask { min-width: 0; padding: 5px 10px 6px; border-radius: 8px; background: #f8f6ef; border: 1px solid var(--sz-rule); }
.sz-ask-q { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.sz-ask-q b { font-weight: 700; color: var(--ink); min-width: 0; }
.sz-ask-q .sz-tc { margin-left: auto; }
.sz-ask-a { margin-top: 1px; font-size: 13px; color: var(--ink-2); }

/* печать: КП ждёт кнопки менеджера */
.sz-stamp { position: absolute; top: 47px; right: 24px; z-index: 3; --rot: -6deg; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 12px 4px; border: 2.5px solid var(--sz-ink); border-radius: 8px; color: var(--sz-ink); background: rgba(255, 255, 255, .86);
  text-transform: uppercase; box-shadow: inset 0 0 0 2px rgba(40, 76, 138, .16); pointer-events: none; }
.sz-stamp b { font-size: 14px; letter-spacing: .06em; font-weight: 850; white-space: nowrap; }
.sz-stamp span { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }

/* цитата в полёте из ленты в КП */
.sz-ghost { position: absolute; z-index: 6; pointer-events: none; padding: 3px 6px; border-radius: 6px; background: var(--sz-hl); color: #241e08;
  font: italic 15px/1.4 var(--sz-serif); box-shadow: 0 12px 26px -8px rgba(90, 70, 0, .45), 0 0 0 1px rgba(227, 169, 0, .5); }

/* ---------- справка к встрече ---------- */
.sz-mg { width: 16px; height: 16px; fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linecap: round; flex: none; }
.sz-srcs { display: flex; flex-direction: column; gap: 5px; }
.sz-src { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; background: #fff; border: 1px solid #e9e5da; }
.sz-si { flex: none; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--c); }
.sz-sn { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sz-sn b { font-size: 13.5px; font-weight: 700; }
.sz-sn small { font-size: 13px; color: var(--muted); }
.sz-ok { flex: none; margin-left: auto; width: 19px; height: 19px; border-radius: 50%; background: var(--good); display: grid; place-items: center; }
.sz-ok svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.sz-rib-f .n { display: block; line-height: 1.4; }
.sz-facts { margin-top: 10px; }
.sz-fact { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--sz-rule); font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.sz-fact > span { flex: 1; min-width: 0; }
.sz-st { flex: none; padding: 0 7px; border-radius: 6px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink);
  font-size: 13px; font-weight: 650; font-style: normal; white-space: nowrap; }
.sz-qs { margin-top: 11px; }
.sz-qs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sz-qi { display: flex; align-items: center; gap: 9px; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.sz-qi i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 750;
  background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--brand-line); }

/* ---------- карточки в переписке ---------- */
.sz-cc { width: 272px; max-width: 100%; }
.sz-cc-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.sz-cc-h i { font-style: normal; padding: 1px 7px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-ink); letter-spacing: .02em; white-space: nowrap; }
.sz-cc-t { display: block; margin: 6px 0 3px; font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.sz-cc-m { font-size: 13.5px; color: var(--ink-2); }
.sz-cc-m b { color: var(--brand); font-weight: 750; }
.sz-cc-b { display: flex; gap: 6px; margin-top: 10px; }
.sz-cc-b span { flex: 1; text-align: center; padding: 7px 6px; border-radius: 9px; font-size: 13.5px; font-weight: 650; border: 1px solid var(--line); color: var(--ink-2); background: #fff; }
.sz-cc-b .ok { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- узко: телефон и планшет ---------- */
@container (max-width: 700px) {
  .sz-body { grid-template-columns: minmax(0, 1fr); }
  .sz-sheet { display: flex; flex-direction: column; padding: 14px 14px 16px; }
  .sz-lh { flex-wrap: wrap; row-gap: 3px; }
  .sz-lh > span:nth-child(2) { flex: 1; min-width: 0; }
  .sz-lh .sz-dn { flex-basis: 100%; margin-left: 28px; }
  .sz-hd { padding-right: 0; }
  .sz-title { font-size: 18px; }
  .sz-row { grid-template-columns: 22px minmax(0, 1fr) 58px 84px; column-gap: 8px; }
  .sz-gt, .sz-gh { display: none; }
  .sz-nm { white-space: normal; }
  .sz-totr { flex-wrap: wrap; row-gap: 4px; }
  .sz-tot b { font-size: 25px; }
  .sz-asks { grid-template-columns: minmax(0, 1fr); }
  .sz-stamp { position: static; align-self: center; margin: 16px auto 2px; }
  .sz-fact { flex-direction: column; gap: 3px; }
}