/* Студия материалов: шаблон — это решение «какой документ и кому», а не кнопка «PDF».

   Префикс классов — pst- (present studio), а не tpl-: пространство `.tpl-*` в cabinet.css
   уже занято карточками шаблонов сообщений (`.tpl-body{max-height:172px;overflow:auto}`).
   Совпадение ломало обе стороны — лист выбора схлопывался в одну строку, а карточки
   сообщений получали чужую сетку. Короткие классы ловят чужие правила. */
.pst-modal{position:fixed;inset:0;z-index:9600;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
/* Видимость НЕ анимируется: opacity переключается классом мгновенно. Транзишн opacity
   в неактивной/троттлящейся вкладке замирает на промежуточном значении, и лист остаётся
   полупрозрачным или невидимым навсегда. Анимируем только сдвиг — если он замрёт,
   документ всё равно читаем. */
.pst-bg{position:absolute;inset:0;background:rgba(16,14,10,.5);backdrop-filter:blur(2px)}
.pst-modal:not(.on) .pst-bg{opacity:0}
.pst-modal.on{pointer-events:auto}
.pst-sheet{position:relative;width:min(560px,100%);max-height:86vh;display:flex;flex-direction:column;
  background:var(--pa,#fff);border:1px solid var(--line,#e6e0d2);border-radius:20px 20px 0 0;
  box-shadow:0 -24px 60px -30px rgba(20,17,12,.5);overflow:hidden;
  transition:transform .26s cubic-bezier(.22,1,.36,1)}
.pst-modal:not(.on) .pst-sheet{transform:translateY(14px);opacity:0}
@media(min-width:640px){
  .pst-modal{align-items:center}
  .pst-sheet{border-radius:20px;max-height:80vh}
}
.pst-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 12px;border-bottom:1px solid var(--line,#e6e0d2)}
.pst-h1{font-family:var(--fd,serif);font-size:19px;color:var(--ink,#16140f)}
.pst-h2{font-size:12.5px;color:var(--mut,#6c655a);margin-top:3px}
.pst-x{margin-left:auto;width:34px;height:34px;flex:none;border-radius:10px;border:1px solid transparent;background:none;
  color:var(--mut,#6c655a);cursor:pointer;font-size:15px;line-height:1;transition:background .16s,color .16s}
.pst-x:hover{background:var(--bg,#f7f4ec);color:var(--ink,#16140f)}
.pst-x:focus-visible{outline:2px solid var(--acc,#a8884e);outline-offset:2px}
/* Колонка — flex, а не grid: строка грида считала свою высоту по min-height элемента и
   игнорировала перенос текста внутри вложенного флекса — карточки налезали друг на друга,
   как только у шаблона появлялось описание в две строки. */
.pst-body{overflow-y:auto;padding:12px 14px 20px;display:flex;flex-direction:column;gap:8px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.pst-body>*{flex:none}
.pst-fade{position:absolute;left:0;right:0;bottom:0;height:36px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--pa,#fff))}
.pst-grp{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut,#6c655a);margin:10px 6px 2px}
.pst-col .pst-grp{display:flex;align-items:center;gap:10px}
.pst-reset{margin-left:auto;font:inherit;font-size:11px;letter-spacing:.04em;text-transform:none;
  background:none;border:0;padding:2px 0;color:var(--acc,#a8884e);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}
.pst-reset:focus-visible{outline:2px solid var(--acc,#a8884e);outline-offset:2px}
.pst-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:var(--bg,#f7f4ec);border:1px solid var(--line,#e6e0d2);border-radius:14px;padding:13px 15px;min-height:56px;
  transition:border-color .16s,transform .12s ease,box-shadow .2s}
.pst-row:hover{border-color:color-mix(in srgb,var(--acc,#a8884e) 50%,transparent);box-shadow:0 12px 28px -22px rgba(20,17,12,.45)}
.pst-row:active{transform:scale(.995)}
.pst-row:focus-visible{outline:2px solid var(--acc,#a8884e);outline-offset:2px}
.pst-row.busy{opacity:.6;pointer-events:none}
.pst-row.off{cursor:default;background:transparent;border-style:dashed}
.pst-row.off:hover{border-color:var(--line,#e6e0d2);box-shadow:none}
.pst-b{flex:1;min-width:0;display:grid;gap:3px}
.pst-t{font-size:15px;font-weight:600;color:var(--ink,#16140f)}
.pst-row.off .pst-t{color:var(--mut,#6c655a);font-weight:500}
.pst-m{font-size:12px;color:var(--mut,#6c655a);overflow:hidden;text-overflow:ellipsis}
.pst-short{font-size:11.5px;color:var(--warn,#9a6b14)}
.pst-need{font-size:11.5px;color:var(--mut,#6c655a);line-height:1.45}
.pst-r{flex:none;display:grid;justify-items:end;gap:4px}
.pst-pages{font-size:12px;color:var(--mut,#6c655a);white-space:nowrap;font-variant-numeric:tabular-nums}
.pst-fill{font:inherit;font-size:12px;padding:7px 11px;min-height:34px;border-radius:9px;cursor:pointer;
  background:none;border:1px solid var(--line,#e6e0d2);color:var(--acc,#a8884e);transition:background .16s,border-color .16s}
.pst-fill:hover{background:color-mix(in srgb,var(--acc,#a8884e) 9%,transparent);border-color:var(--acc,#a8884e)}
.pst-fill:focus-visible{outline:2px solid var(--acc,#a8884e);outline-offset:2px}
.pst-err{font-size:13px;color:var(--mut,#6c655a);padding:14px 6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.dark .pst-sheet{background:var(--pa)}
body.dark .pst-row{background:color-mix(in srgb,var(--ink) 5%,transparent)}
body.dark .pst-bg{background:rgba(0,0,0,.62)}

@media(prefers-reduced-motion:reduce){
  .pst-bg,.pst-sheet{transition:none}
  .pst-modal:not(.on) .pst-sheet{transform:none}
}

/* ─────────── студия материалов: шапка, состав, предпросмотр ─────────── */
.pst-head{align-items:center}
.pst-ht{flex:1;min-width:0}
.pst-back{width:34px;height:34px;flex:none;border-radius:10px;border:1px solid var(--line,#e6e0d2);background:none;
  color:var(--ink,#16140f);cursor:pointer;font-size:16px;line-height:1;transition:background .16s,border-color .16s}
.pst-back:hover{background:var(--bg,#f7f4ec)}
.pst-back:focus-visible{outline:2px solid var(--acc,#a8884e);outline-offset:2px}
.pst-h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pst-row.best{border-color:color-mix(in srgb,var(--acc,#a8884e) 55%,transparent);
  background:color-mix(in srgb,var(--acc,#a8884e) 7%,var(--bg,#f7f4ec))}
.pst-badge{margin-left:8px;font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  color:var(--acc,#a8884e);border:1px solid color-mix(in srgb,var(--acc,#a8884e) 45%,transparent);
  border-radius:999px;padding:2px 7px;vertical-align:2px;white-space:nowrap}
.pst-note{font-size:11.5px;color:var(--mut,#6c655a);line-height:1.45}
.pst-go{font-size:12px;font-weight:600;color:var(--acc,#a8884e);white-space:nowrap}
.pst-row.plain{background:transparent}
.pst-t{display:flex;align-items:center;flex-wrap:wrap;gap:2px}

/* Две колонки: слева состав, справа живой предпросмотр собранного PDF. */
.pst-sheet.compose{width:min(560px,100%);max-height:88vh}
.pst-two{display:flex;min-height:0;flex:1}
.pst-col{flex:1;min-width:0;overflow-y:auto;padding:10px 14px 16px;-webkit-overflow-scrolling:touch}
/* Две колонки — решение ШИРИНЫ ЭКРАНА, а не момента открытия. Пока разметка решала это
   на JS один раз, окно, суженное после открытия, оставляло колонку разделов в 46 %
   ширины телефона: строки рвались по одному слову. */
.pst-prev{display:none}
@media(min-width:980px){
  .pst-sheet.compose{width:min(1100px,96vw)}
  .pst-col{max-width:46%;border-right:1px solid var(--line,#e6e0d2)}
  .pst-prev{flex:1;min-width:0;background:var(--bg,#f7f4ec);display:flex}
  .pst-foot [data-pstpreview]{display:none}
}
.pst-prev iframe{flex:1;width:100%;border:0;background:var(--bg,#f7f4ec)}

.pst-narr{display:grid;gap:2px;font-size:12px;color:var(--ink2,#3a352c);line-height:1.5;
  background:var(--bg,#f7f4ec);border:1px solid var(--line,#e6e0d2);border-radius:12px;padding:10px 12px;margin:4px 2px 2px}
.pst-narr span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut,#6c655a)}

.pst-secs{display:flex;flex-direction:column;gap:6px}
.pst-secs>*{flex:none}
.pst-sec{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:12px;padding:9px 11px;min-height:46px;
  transition:background .16s,border-color .16s}
.pst-sec:hover{background:var(--bg,#f7f4ec)}
.pst-sec:focus-visible{outline:2px solid var(--acc,#a8884e);outline-offset:2px}
.pst-sec.out .pst-st{color:var(--mut,#6c655a);text-decoration:line-through;text-decoration-thickness:1px}
.pst-sec.out .pst-sp{opacity:.4}
.pst-sec.off,.pst-sec.lock{cursor:default;background:none}
.pst-sec.off{border-style:dashed;border-color:var(--line,#e6e0d2)}
.pst-sec.off:hover,.pst-sec.lock:hover{background:none}
/* Переключатель: состояние читается формой и цветом, а не только цветом. */
.pst-sw{flex:none;width:34px;height:20px;border-radius:999px;background:var(--line,#e6e0d2);position:relative;
  transition:background .18s}
.pst-sw::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--pa,#fff);box-shadow:0 1px 3px rgba(20,17,12,.28);transition:transform .18s cubic-bezier(.22,1,.36,1)}
.pst-sw.on{background:var(--acc,#a8884e)}
.pst-sw.on::after{transform:translateX(14px)}
.pst-sec.off .pst-sw{background:transparent;border:1px dashed var(--line,#e6e0d2)}
.pst-sec.off .pst-sw::after{display:none}
.pst-lk{flex:none;width:34px;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--acc,#a8884e)}
.pst-sb{flex:1;min-width:0;display:grid;gap:2px}
.pst-st{font-size:14px;color:var(--ink,#16140f)}
.pst-sn{font-size:11.5px;color:var(--mut,#6c655a);line-height:1.45}
.pst-sp{flex:none;font-size:12px;color:var(--mut,#6c655a);font-variant-numeric:tabular-nums;min-width:14px;text-align:right}
.pst-dot{color:var(--mut,#6c655a);opacity:.5}
.pst-swap{font:inherit;font-size:12px;font-weight:600;padding:7px 11px;min-height:34px;border-radius:9px;
  cursor:pointer;background:none;border:1px solid var(--line,#e6e0d2);color:var(--acc,#a8884e);
  white-space:nowrap;transition:background .16s,border-color .16s}
.pst-swap:hover{background:color-mix(in srgb,var(--acc,#a8884e) 9%,transparent);border-color:var(--acc,#a8884e)}
.pst-swap:focus-visible{outline:2px solid var(--acc,#a8884e);outline-offset:2px}
@media(max-width:560px){ .pst-swap{display:none} }
.pst-sec.off .pst-fill{flex:none}

.pst-foot{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--line,#e6e0d2);
  background:var(--pa,#fff)}
.pst-cnt{flex:1;min-width:0;display:grid;line-height:1.25}
.pst-cnt b{font-size:14px;color:var(--ink,#16140f);font-variant-numeric:tabular-nums;white-space:nowrap}
.pst-cnt span{font-size:11.5px;color:var(--mut,#6c655a)}
.pst-act{font:inherit;font-size:13px;font-weight:600;padding:0 15px;min-height:42px;border-radius:11px;cursor:pointer;
  white-space:nowrap;transition:transform .12s ease,box-shadow .2s,background .16s,border-color .16s}
.pst-act.s{background:none;border:1px solid var(--line,#e6e0d2);color:var(--ink,#16140f)}
.pst-act.s:hover{border-color:var(--acc,#a8884e);color:var(--acc,#a8884e)}
.pst-act.p{background:var(--ink,#16140f);border:1px solid var(--ink,#16140f);color:var(--pa,#fff)}
.pst-act.p:hover{box-shadow:0 14px 28px -18px rgba(20,17,12,.6)}
.pst-act:active{transform:scale(.985)}
.pst-act:focus-visible{outline:2px solid var(--acc,#a8884e);outline-offset:2px}
.pst-act.busy{opacity:.55;pointer-events:none}

body.dark .pst-prev,body.dark .pst-prev iframe{background:#0f0e0b}
body.dark .pst-act.p{background:var(--ink);color:#141310}
body.dark .pst-narr{background:color-mix(in srgb,var(--ink) 6%,transparent)}

@media(max-width:979px){
  .pst-col{padding-bottom:8px}
}
/* На телефоне счётчик и три действия в одну строку не помещаются — счётчик уходит
   на свою строку, кнопки делят ширину поровну. Иначе «14 страниц» наезжало на
   «Предпросмотр». */
@media(max-width:560px){
  .pst-foot{flex-wrap:wrap;gap:8px 6px}
  .pst-cnt{flex:1 0 100%;display:flex;align-items:baseline;gap:7px}
  .pst-cnt b,.pst-cnt span{white-space:nowrap}
  .pst-foot .pst-act,.pst-foot .pst-fill{flex:1;min-height:44px;padding:0 10px}
}
@media(prefers-reduced-motion:reduce){ .pst-sw::after{transition:none} }

/* «Другие форматы» — раскрывашка под основным документом */
.pst-more{display:block;width:100%;margin:18px 0 6px;padding:12px 14px;border:1px dashed var(--line,#d8d3ca);border-radius:12px;background:transparent;color:var(--mut,#6b6560);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.pst-more::after{content:'▾';float:right;opacity:.7;transition:transform .2s}
.pst-more.open::after{transform:rotate(180deg)}
.pst-more:hover{color:var(--ink,#0e0e0c);border-color:var(--acc,#a15b00)}
.pst-more-body{animation:pstFade .22s ease}
@keyframes pstFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}