/* Artikul · цвета продукта и оформление результата: список клиента → линии → КП, итог и счёт в 1С. */
:root {
  --brand: #b0461f; --brand-2: #b8491f; --brand-ink: #7f3214; --brand-soft: #fbefe9; --brand-line: #f2d3c4;
  --accent: #4ea8de; --accent-soft: #e5f2fb; --accent-ink: #1b5a86;
  --ak-y: #f0aa00; --ak-y-soft: #fff4d4; --ak-y-ink: #7a5000;
  --ak-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.ak { display: flex; flex-direction: column; gap: 10px; }
.ak-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 31px; }
.ak-head-l { font-size: 13.5px; color: var(--muted); margin-right: 4px; }
.ak-chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-ink);
  border: 1px solid var(--brand-line); font-size: 14px; font-weight: 600; white-space: nowrap; }

/* слева как написал клиент, справа КП, между ними линии */
.ak-map { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 74px; align-items: start; }
.ak-in { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ak-wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 3; }
.ak-wl { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ak-wl.y { stroke: var(--ak-y); stroke-width: 2.6; }
.ak-wire circle { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.ak-no { display: none; }
.ak-src, .ak-kp { counter-reset: ak-n; }
.ak-no::before { counter-increment: ak-n; content: counter(ak-n); }

.ak-src { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 10px 14px 12px; min-width: 0; }
.ak-src-h { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); padding-bottom: 8px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line-2); white-space: nowrap; min-width: 0; }
.ak-src-h b { flex: none; color: var(--ink); font-weight: 650; }
.ak-src-h .f, .ak-src-h .r { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ak-src-h .t { margin-left: auto; font-variant-numeric: tabular-nums; }
.ak-ic { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ak-ava { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink);
  font-size: 11px; font-weight: 750; }
.ak-fi { flex: none; display: inline-grid; place-items: center; width: 30px; height: 20px; border-radius: 4px; background: var(--fc); color: #fff; font-size: 10.5px;
  font-weight: 800; letter-spacing: .02em; }
.ak-ln { font-size: 14.5px; line-height: 24px; color: var(--ink); }
/* маркер: проводится по строкам фразы; в миниатюрах и итоге сразу целиком */
.ak-ph, .ak-yl { padding: 2px 4px; margin: 0 -4px; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--ak-mk), var(--ak-mk)) no-repeat 0 0 / 0% 100%; transition: background-size .5s var(--ease); }
.ak-ph { --ak-mk: color-mix(in srgb, var(--accent) 24%, #fff); }
.ak-yl { --ak-mk: color-mix(in srgb, var(--ak-y) 42%, #fff); }
.ak-ph.in, .ak-yl.in, .w-th-in .ak-ph, .w-th-in .ak-yl { background-size: 100% 100%; }
.w-final .ak-ph, .w-final .ak-yl, .w-th-in .ak-ph, .w-th-in .ak-yl { transition: none; }
.ak-msg { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--ink); }
.ak-msg .ak-ph { white-space: nowrap; }
.ak-subj { font-size: 13.5px; font-weight: 650; color: var(--ink-2); margin-bottom: 2px; }

/* таблица из Excel и заявка в PDF */
.ak-grid { border: 1px solid #cfd8d3; border-radius: 4px; overflow: hidden; font-size: 13px; background: #fff; }
.ak-gr { display: grid; grid-template-columns: 22px minmax(0, 1fr) 50px; border-top: 1px solid #e3e9e5; line-height: 18px; }
.ak-gr > span { padding: 3.5px 5px; border-left: 1px solid #e3e9e5; min-width: 0; }
.ak-gr > span:last-of-type { text-align: right; white-space: nowrap; }
.ak-gr > .c0 { padding: 3.5px 0; border-left: 0; background: #f2f5f3; color: var(--muted); text-align: center; font-size: 12px; }
.ak-gr.h { border-top: 0; background: #f2f5f3; color: var(--muted); line-height: 20px; font-size: 12px; }
.ak-gr.h > span { padding: 0 5px; text-align: center; }
.ak-gr.t > span:not(.c0) { font-weight: 650; color: var(--ink-2); }
.ak-gr.ak-ph { position: relative; z-index: 0; padding: 0; margin: 0; border-radius: 0; }
.ak-gr > .ak-yl { position: absolute; inset: 0; z-index: -1; padding: 0; margin: 0; border-radius: 0; }
.ak-doc { border: 1px solid #e4e4e4; border-radius: 4px; padding: 8px 10px 4px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); font-size: 13px; }
.ak-doc-t { font-size: 13px; font-weight: 750; margin-bottom: 3px; }
.ak-doc .ak-gr { grid-template-columns: minmax(0, 1fr) 46px; border-top: 1px solid #ececec; }
.ak-doc .ak-gr > span { border-left: 0; padding: 3.5px 2px; }
.ak-doc .ak-gr.ak-ph { margin: 0 -4px; padding: 0 4px; border-radius: 4px; }

/* фото списка от руки */
.ak-paper { padding: 5px 10px 5px 32px; border: 1px solid #ebe5d3; border-radius: 3px; box-shadow: 0 2px 6px rgba(60, 50, 20, .1);
  background-color: #fffef6;
  background-image: linear-gradient(90deg, transparent 23px, #eca8a8 23px, #eca8a8 24.5px, transparent 24.5px),
                    repeating-linear-gradient(180deg, transparent 0 23px, #d3dfee 23px 24px); }
.t-photo .ak-ln { color: #27408b; font-style: italic; font-size: 15px; letter-spacing: .01em; }

/* голосовое */
.ak-play { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; }
.ak-play svg { width: 10px; height: 10px; fill: #fff; margin-left: 2px; }
.ak-wave { flex: 1; min-width: 0; height: 24px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.ak-wave i { flex: none; width: 3px; border-radius: 2px; background: var(--brand); opacity: .55; }
.ak-tr-l { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 2px; }
.t-voice .ak-ln { font-style: italic; color: var(--ink-2); line-height: 23px; }

/* КП */
.ak-kp { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); min-width: 0; overflow: hidden; }
.ak-kp-h { display: flex; align-items: baseline; gap: 10px; padding: 7px 14px 6px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted);
  white-space: nowrap; min-width: 0; }
.ak-kp-h b { font-size: 14.5px; font-weight: 750; color: var(--brand-ink); }
.ak-kp-h em { margin-left: auto; font-style: normal; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ak-row { position: relative; z-index: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; column-gap: 14px; align-items: baseline;
  padding: 4px 14px 3px; border-bottom: 1px solid var(--line-2); }
.ak-nm { font-size: 14.5px; font-weight: 650; line-height: 19px; min-width: 0; }
.ak-q { font-size: 14px; color: var(--ink-2); white-space: nowrap; text-align: right; }
.ak-st { display: inline-block; margin-left: 5px; color: var(--good); }
.ak-s { font-size: 15px; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ak-sub { grid-column: 1 / -1; display: flex; flex-wrap: wrap; column-gap: 8px; font-size: 13px; line-height: 16px; color: var(--muted); min-width: 0; }
.ak-sub > span + span::before { content: "·"; margin-right: 8px; color: #b6bfba; font-weight: 400; }
.ak-ar { font-family: var(--ak-mono); font-size: 13px; letter-spacing: -.01em; }
.ak-how { color: var(--accent-ink); }
.ak-warn { color: var(--ak-y-ink); font-weight: 650; border-radius: 4px; }
.ak-ok { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -1px; }
.ak-ybg { position: absolute; inset: 0; z-index: -1; background: var(--ak-y-soft); box-shadow: inset 4px 0 0 var(--ak-y); }
.ak-foot { margin-top: -1px; padding: 5px 14px 8px; border-top: 2px solid var(--ink); }
.ak-tl { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; line-height: 21px; color: var(--ink-2); }
.ak-tl b { font-weight: 650; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ak-total { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 2px; }
.ak-total > span { display: flex; flex-direction: column; font-size: 15px; font-weight: 700; line-height: 1.3; }
.ak-total small { font-size: 13px; font-weight: 500; color: var(--muted); }
.ak-total > b { font-size: 30px; line-height: 1; letter-spacing: -.025em; color: var(--brand); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* печать: счёт в 1С */
.ak-stamp { align-self: center; --rot: -5deg; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 16px 9px; max-width: 100%;
  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, .2); }
.ak-stamp b { font-size: 15.5px; font-weight: 850; letter-spacing: .06em; white-space: nowrap; }
.ak-stamp span { font-size: 12px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }

/* КП и счёт в переписке, фото списка */
.ak-cc { min-width: 220px; }
.ak-cc-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ak-cc-fi { display: inline-grid; place-items: center; height: 18px; padding: 0 5px; border-radius: 4px; background: #c2412d; color: #fff; font-size: 10px; letter-spacing: .02em; }
.ak-cc-sum { font-size: 25px; font-weight: 800; color: var(--brand); letter-spacing: -.02em; margin: 4px 0 2px; }
.ak-cc-s { font-size: 13px; color: var(--ink-2); }
.ak-cf { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.ak-cf > .ak-cc-fi { flex: none; height: 22px; padding: 0 6px; font-size: 10.5px; font-weight: 800; }
.ak-cf b { display: block; font-size: 15px; font-weight: 700; }
.ak-cf small { display: block; font-size: 13px; color: var(--ink-2); }
.ak-ps text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; font-style: italic; fill: #27408b; }
.ak-ps .r path { stroke: #d3dfee; stroke-width: 1; }
.ak-ps .m { stroke: #eca8a8; stroke-width: 1.2; }

/* миниатюра в сетке: результат ниже значка «Счёт №»; превью ссылки без плашки «готово» (её режет нижний край);
   в итоговом виде шаги сразу зелёные, без перехода */
.w-th-in .ak { padding-top: 84px; }
.w-og .w-result { display: none; }
.w-final .w-st, .w-final .w-st i { transition: none !important; animation: none !important; }

@container (max-width: 860px) {
  .ak-map { grid-template-columns: 238px minmax(0, 1fr); column-gap: 44px; }
}
@container (max-width: 700px) {
  .ak-map { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .ak-in { display: contents; }
  .ak-src { order: 1; }
  .ak-kp { order: 2; }
  .ak-stamp { order: 3; justify-self: center; }
  .ak-wires { display: none; }
  .ak-no { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 750; font-style: normal; margin-right: 6px; vertical-align: 1px; line-height: 1; }
  .ak-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm nm" "q s" "sub sub"; row-gap: 1px; }
  .ak-nm { grid-area: nm; }
  .ak-q { grid-area: q; text-align: left; }
  .ak-s { grid-area: s; }
  .ak-sub { grid-area: sub; column-gap: 10px; }
  .ak-sub > span + span::before { content: none; }
  .ak-total > b { font-size: 26px; }
}