/* A5 CRM — css/catdoc.css   the shared parts of «Каталог и документы» (js/catdoc.js): the «Вариант» switch and the white КП page.
   The looks style their own screens in css/cd-a.css, cd-b.css, cd-c.css. */

/* ── «Вариант» switch: a small monochrome segment (DESIGN-CALM §3.3) ── */
.cd-look{display:inline-flex;align-items:center;gap:2px;height:28px;padding:2px;border-radius:var(--radius-sm, 6px);background:var(--surface-offset);font:var(--t-caption-strong);white-space:nowrap}
.cd-look-l{padding:0 8px 0 6px;color:var(--text-3);font-weight:500}
.cd-look button{height:24px;padding:0 10px;border:0;border-radius:calc(var(--radius-sm, 6px) - 2px);background:transparent;color:var(--text-2);font:inherit;cursor:pointer}
.cd-look button:hover{color:var(--text-strong)}
.cd-look button.on{background:var(--surface-raised);color:var(--text-strong);box-shadow:0 0 0 1px var(--border), 0 1px 2px rgba(0,0,0,.04)}

/* ── the white КП page (a document: fixed light colours in both themes; A5 client-docs style) ── */
.kpdoc{--k-text:#191c1f;--k-mute:#8d969e;--k-mute-2:#6b7177;--k-line:#e6e8eb;--k-rule:#d0d4d9;--k-tile:#f4f4f4;--k-red:#d62213;
  box-sizing:border-box;width:794px;min-height:1123px;padding:60px 60px 64px;background:#fff;color:var(--k-text);
  font:400 10px/1.5 Manrope, Inter, Arial, sans-serif;font-variant-numeric:tabular-nums;color-scheme:light}
.kpdoc *{box-sizing:border-box}
.kpdoc .mute{color:var(--k-mute)}
.kp-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--k-rule)}
.kp-logo{height:30px;display:block}
.kp-req{text-align:right;font-size:8.5px;color:var(--k-mute-2);line-height:1.6}
.kp-eyebrow{font-size:8px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--k-mute-2);margin-top:24px}
.kp-h1{font-size:26px;font-weight:700;margin:6px 0 0;letter-spacing:-.02em;line-height:1.15;color:var(--k-text)}
.kp-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px;padding:12px 0;border-top:1px solid var(--k-rule);border-bottom:1px solid var(--k-rule)}
.kp-meta b{display:block;font-size:10.5px;font-weight:600}
.kp-meta small{display:block;font-size:7.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--k-mute);margin-top:2px}
.kp-intro{margin:14px 0 0;color:var(--k-mute-2);max-width:620px}
.kp-t{width:100%;border-collapse:collapse;margin-top:18px}
.kp-t th{font-size:7.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--k-mute);padding:0 6px 7px;text-align:left;border-bottom:1.5px solid var(--k-text)}
.kp-t td{padding:5px 6px;border-bottom:1px solid var(--k-line);vertical-align:middle}
.kp-t td b{font-weight:600;font-size:10px}
.kp-t td small{display:block;color:var(--k-mute);font-size:8.5px}
.kpdoc .c{text-align:center}.kpdoc .r{text-align:right;white-space:nowrap}.kpdoc .b{font-weight:700}
.kpdoc .sku{font-size:8.5px;white-space:nowrap}
.kpdoc .th{width:44px;height:44px;border-radius:6px;background:#fff center/contain no-repeat;box-shadow:0 0 0 4px var(--k-tile);margin:4px}
.kpdoc .th.sv{display:flex;align-items:center;justify-content:center;background:var(--k-tile);box-shadow:none;color:var(--k-mute);font-size:8px;font-weight:600}
.kp-t .grp td{font-size:13px;font-weight:600;letter-spacing:-.01em;padding:16px 6px 6px;border-bottom:1px solid var(--k-rule)}
.kp-t .grp td.r{font-size:11px;font-weight:700}
.kp-tot{width:330px;margin:14px 0 0 auto}
.kp-tot div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--k-line)}
.kp-tot .grand{border-bottom:0;border-top:2px solid var(--k-text);margin-top:2px;padding-top:9px;font-size:15px;font-weight:700}
.kp-empty{margin-top:18px;padding:28px 0;border-top:1.5px solid var(--k-text);border-bottom:1px solid var(--k-line);color:var(--k-mute);text-align:center;font-size:11px}
.kp-terms h2{font-size:15px;font-weight:700;margin:24px 0 8px;letter-spacing:-.01em;color:var(--k-text)}
.kp-terms ol{margin:0;padding-left:16px;color:var(--k-mute-2)}
.kp-terms li{margin-bottom:4px}.kp-terms li b{color:var(--k-text);font-weight:600}
.kp-cta{margin-top:22px;background:var(--k-red);color:#fff;border-radius:8px;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.kp-cta b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
.kp-cta p{font-size:9px;color:rgba(255,255,255,.8);margin:4px 0 0}
.kp-cta .c2{text-align:right;font-size:10px;font-weight:600;line-height:1.8}
.kp-disc{margin:18px 0 0;font-size:8px;color:var(--k-mute)}

/* a page shown smaller (a preview pane): wrap it in .kp-fit and set --kp-scale */
.kp-fit{--kp-scale:.62;width:calc(794px * var(--kp-scale));height:calc(1123px * var(--kp-scale));overflow:hidden;flex:none}
.kp-fit > .kpdoc{transform:scale(var(--kp-scale));transform-origin:0 0;box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06)}
.kp-fit.grow{height:auto}
.kp-fit.grow > .kpdoc{margin-bottom:calc(-1 * (1 - var(--kp-scale)) * var(--kp-h, 1123px))}
.cd-nav{display:contents}

/* ── «/кп <слова>» rows in the reply box's «/» list (screens/deal.js attachPicker → CD.slashRows) ── */
.tpl-it.tpl-kp{grid-template-columns:36px minmax(0,1fr) auto;column-gap:10px;align-items:center;min-height:48px;padding:6px 12px}
.tpl-kp .kpt{width:36px;height:36px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px var(--border-soft);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tpl-kp .kpt img{width:100%;height:100%;object-fit:contain}
.tpl-kp .kpt i{font:var(--t-caption-strong);font-style:normal;color:var(--text-3)}
:root[data-theme="dark"] .tpl-kp .kpt{background:#F4F4F5}
.tpl-kp .tc{display:flex;flex-direction:column;gap:0;min-width:0}
.tpl-kp .tc b{font:var(--t-body-medium);color:var(--text-strong);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tpl-kp .tc span{font:var(--t-caption);color:var(--text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tpl-kp .kpp{font:var(--t-body-medium);color:var(--text);white-space:nowrap}

/* ── the editable white page (CD.kpHtml(doc, {edit:true}), look C): quiet until hover / focus ── */
.kp-t.kp-edit .kp-ed{border-radius:3px;outline:0;cursor:text;transition:background .12s}
.kp-t.kp-edit .kp-ed:hover{background:#f1f2f4}
.kp-t.kp-edit .kp-ed:focus-visible,.kp-t.kp-edit .kp-ed[contenteditable="true"]{background:#fff;box-shadow:0 0 0 1px #3B6BE9}
.kp-t .kp-x{width:44px;white-space:nowrap;text-align:right;padding-left:0;padding-right:0}
.kp-t .kp-x button{width:20px;height:20px;border:0;border-radius:3px;background:transparent;color:#8d969e;font:600 12px/20px Inter, Arial, sans-serif;cursor:pointer;opacity:0;transition:opacity .12s}
.kp-t tr:hover .kp-x button,.kp-t .kp-x button:focus-visible{opacity:1}
.kp-t .kp-x button:hover{background:#f1f2f4;color:#191c1f}
.kp-t .kp-x [data-kp="drag"]{cursor:grab}
.kp-t .kp-add td{padding:4px 6px 10px;border-bottom:0}
.kpdoc.print .kp-ui,.kpdoc:not(.editing) .kp-ui{display:none}
.kpdoc.editing .kp-ui{display:table-cell}
.kpdoc.editing tr.kp-ui{display:table-row}
.kp-tot .due{border-bottom:0;padding-top:4px;font-weight:600}

/* ── the reply box's file chips (screens/deal.js drawFiles): the name opens the file (previewFile) ── */
.aiatt-c button.fn{min-width:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.aiatt-c button.fn:hover{text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}
.aiatt-dw .drawer-b{padding:0;overflow:hidden}
.aiatt-pv{display:block;width:100%;height:calc(100vh - 128px);border:0;background:var(--surface-offset)}
.aiatt-pv-none{margin:24px;color:var(--text-3)}