@charset "UTF-8";
/* ───────── 25.09.2026 (#46, «Столбцы»): меню «Столбцы», окно «Показать все», подсказка выключенной кнопки «Столбцы», общий тост ─────────
   Макет дизайнера Columns.dc.html (стили перенесены почти как есть), README макета «Меню „Столбцы“», «Появление выпадающих меню»,
   «Закрытие окон подтверждения», «Кнопки: наведение и нажатие». Все правила ограничены #colmenu / #colalldlg / #coltip / .ui-toast —
   имена макета (.bk, .gb, .tg, .cb, .x …) на странице уже заняты сеткой и меню «Каналы».
   Правило дизайнера .btn:not(.ib){padding-bottom:2px} НЕ применяется: на сайте текст кнопок выровнен высотой строки 1.35, а это правило
   сдвигает содержимое кнопок вверх на 1 px (замер 25.09, DESIGN_46.md §14.2).
   Синие кнопки — класс сайта .btn.primary (наведение и нажатие — style.css). Сброс button{color:inherit} — через :where(), с нулевой
   специфичностью: иначе он перебил бы белый текст .btn.primary (темный текст на синей кнопке). */

/* ── меню ── */
#colmenu{position:fixed;top:106px;right:16px;width:440px;max-width:calc(100vw - 16px);max-height:calc(100vh - 130px);background:#ffffff;
  border:1px solid #d9d9d3;border-radius:8px;box-shadow:0 10px 30px rgba(20,20,19,.16);display:flex;flex-direction:column;z-index:45;
  overflow:hidden;color:#1c1e22;font-size:13px;line-height:1.35;transform:translateY(0);animation:cmIn .16s cubic-bezier(.2,.8,.3,1) both}
#colmenu[hidden]{display:none}
/* запас справа у таблицы, пока меню открыто (ширину перекрытия ставит columns.js — cmPlace) */
#content.cm-room{padding-right:var(--cm-room,464px)}
#colmenu.closing{animation:cmOut .12s cubic-bezier(.4,0,1,1) both;pointer-events:none}
@keyframes cmIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes cmOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}
#colmenu [hidden],#colalldlg [hidden]{display:none !important}
:where(#colmenu, #colalldlg) button{font:inherit;color:inherit}
:where(#colmenu, #colalldlg) button:focus-visible{outline:2px solid #1f4fb8;outline-offset:1px}
#colmenu .btn.sm{height:28px;padding:0 10px;font-size:12.5px}
#colmenu .btn.primary,#colalldlg .btn.primary{align-self:auto;font-weight:500}
#colmenu .btn.primary{padding:0 12px}
#colmenu .btn.primary[disabled]{background:#c9d3ea;border-color:#c9d3ea;color:#ffffff;cursor:default}
#colmenu .x-close:not([disabled]):hover,#colalldlg .x-close:not([disabled]):hover{background:#fdecea;color:#8c1d15}

/* шапка меню: «Столбцы» + метка листа, крестик; «Видно N из M · K блоков · …»; «Последнее изменение: …» */
#colmenu .cm-h{display:flex;align-items:center;gap:8px;padding:10px 8px 0 16px}
#colmenu .cm-h b{font-size:15px;font-weight:600}
#colmenu .sheet{font-size:11.5px;font-weight:600;background:#ecece8;color:#4a4e55;border-radius:4px;padding:1px 7px;white-space:nowrap;max-width:220px;
  overflow:hidden;text-overflow:ellipsis}
#colmenu .cm-h .btn{margin-left:auto;color:#6f737a}
#colmenu .cm-sub{padding:2px 16px 10px;display:flex;flex-direction:column;gap:3px;font-size:12px;color:#6f737a}
#colmenu .cm-sub .cnt{font-size:12.5px;color:#33373d}
#colmenu .cm-sub .cnt b{font-weight:600;color:#1c1e22;font-variant-numeric:tabular-nums}
#colmenu .cm-sub .who{display:flex;align-items:center;gap:5px;color:#8a8e95;font-size:11.5px}
#colmenu .note{margin:0 16px 10px;display:flex;gap:8px;align-items:flex-start;background:#fff1d6;color:#6f4300;border-radius:6px;padding:8px 10px;
  font-size:12px;line-height:16px}
#colmenu .note svg{margin-top:1px;flex-shrink:0}
#colmenu .note.ro{background:#fafaf8;color:#33373d;border:1px solid #ebebe6}

/* поиск, вид списка, «Скрытые», подсказка списка */
#colmenu .tools{padding:0 16px 8px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid #ebebe6}
#colmenu .srch{position:relative;display:flex;align-items:center}
#colmenu .srch > svg{position:absolute;left:9px;color:#8a8e95;pointer-events:none}
#colmenu .srch input{width:100%;height:32px;border:1px solid #d6d6d0;border-radius:6px;padding:0 30px 0 32px;font:inherit;font-size:13px;color:#1c1e22;
  background:#ffffff;outline:none;transition:border-color .14s,box-shadow .14s}
#colmenu .srch input::placeholder{color:#9a9ea5}
#colmenu .srch input:focus{border-color:#1f4fb8;box-shadow:0 0 0 2px rgba(31,79,184,.15)}
#colmenu .srch .clr{position:absolute;right:4px;width:24px;height:24px;border:0;background:transparent;border-radius:4px;display:flex;align-items:center;
  justify-content:center;color:#8a8e95;cursor:pointer;padding:0}
#colmenu .srch .clr:hover{background:#f0f0ec;color:#1c1e22}
#colmenu .row2{display:flex;align-items:center;gap:8px}
#colmenu .sg{display:flex;padding:2px;background:#efefeb;border-radius:6px;flex-grow:1;min-width:0}
#colmenu .sg button{flex:1 1 0;border:0;background:transparent;height:26px;border-radius:4px;font-size:12.5px;font-weight:500;color:#5a5e65;cursor:pointer;
  white-space:nowrap;padding:0 6px;transition:background-color .14s,color .14s}
#colmenu .sg button:hover{color:#1c1e22}
#colmenu .sg button.on{background:#ffffff;color:#1c1e22;box-shadow:0 1px 2px rgba(0,0,0,.12)}
#colmenu .fchip{height:30px;padding:0 10px;border-radius:15px;border:1px solid #d6d6d0;background:#ffffff;font-size:12px;cursor:pointer;display:flex;
  align-items:center;gap:5px;white-space:nowrap;flex-shrink:0;transition:background-color .14s,border-color .14s,color .14s}
#colmenu .fchip:hover{background:#f3f3ef}
#colmenu .fchip.on{background:#eaf0fb;border-color:#1f4fb8;color:#173c8c;font-weight:500}
#colmenu .fchip i{font-style:normal;color:#8a8e95;font-variant-numeric:tabular-nums}
#colmenu .fchip.on i{color:#1f4fb8}
#colmenu .lh{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11.5px;color:#8a8e95;min-height:18px}
#colmenu .lh .xa{display:flex;gap:12px}
#colmenu .lnk{border:0;background:transparent;padding:0;color:#1f4fb8;cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap;transition:color .14s}
#colmenu .lnk:hover{color:#163a88;text-decoration:underline;text-underline-offset:2px}

/* список: блоки (дерево) и названия столбцов */
#colmenu .list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 8px 8px;overscroll-behavior:contain}
#colmenu.busy .list{pointer-events:none}
#colmenu .bk{margin-top:4px;outline:none}
#colmenu .gb{display:grid;grid-template-rows:1fr;transition:grid-template-rows .24s ease}
#colmenu .gb.closed{grid-template-rows:0fr}
#colmenu .gbi{overflow:clip;min-height:0}
#colmenu .gb.closed .gbi{visibility:hidden;transition:visibility 0s .24s}
#colmenu .bkh{display:flex;align-items:flex-start;gap:6px;padding:5px 8px 5px 4px;border-radius:6px;cursor:pointer;user-select:none;transition:filter .14s}
#colmenu .bkh:hover{filter:brightness(.98)}
#colmenu .bkh .tg{width:20px;height:20px;border:0;background:transparent;border-radius:4px;display:flex;align-items:center;justify-content:center;
  color:#6f737a;cursor:pointer;flex-shrink:0;padding:0}
#colmenu .bkh .tg:hover{background:rgba(20,20,19,.07)}
#colmenu .bkh .tg svg{transition:transform .16s cubic-bezier(.2,.8,.3,1)}
#colmenu .bkh.open .tg svg{transform:rotate(90deg)}
#colmenu .bkh .nm{flex-grow:1;min-width:0;font-size:13px;font-weight:600;line-height:18px;padding-top:1px;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
#colmenu .bkh .nm.noname{color:#8a8e95;font-weight:500}
#colmenu .bkh .n{flex-shrink:0;font-size:11.5px;color:#6f737a;font-variant-numeric:tabular-nums;padding-top:2px;white-space:nowrap}
#colmenu .bkh .n.part{color:#173c8c;font-weight:500}
#colmenu .cr{display:flex;align-items:center;gap:8px;min-height:28px;padding:4px 8px 4px 52px;border-radius:5px;cursor:pointer;user-select:none;
  font-size:13px;line-height:17px;transition:background-color .14s;outline:none}
#colmenu .cr:hover{background:#f2f2ee}
#colmenu .cr.nr{padding-left:12px}
#colmenu .cr .t{flex-grow:1;min-width:0;word-break:break-word}
#colmenu .cr.off .t,#colmenu .cr .t.noname{color:#8a8e95}
#colmenu .cr .x{flex-shrink:0;font-size:11.5px;color:#8a8e95;font-variant-numeric:tabular-nums;white-space:nowrap}
#colmenu .bk:focus-visible > .bkh,#colmenu .cr:focus-visible{box-shadow:inset 0 0 0 2px #1f4fb8}
#colmenu mark{background:#ffe38a;color:inherit;border-radius:2px;padding:0 1px}
/* флажок — как в меню «Каналы» (разметка CHAN_CB из channels.js): синий квадрат 16 px, белая галка или черточка */
#colmenu .cb{position:relative;width:16px;height:16px;border-radius:4px;border:1.5px solid #b3b6bc;background:#ffffff;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;color:#ffffff;transition:background-color .1s,border-color .1s}
#colmenu .bkh .cb{margin-top:2px}
#colmenu .cb svg{position:absolute;opacity:0}
#colmenu .cb.on,#colmenu .cb.mix{background:#1f4fb8;border-color:#1f4fb8}
#colmenu .cb.on svg.ck,#colmenu .cb.mix svg.mx{opacity:1}
/* роль «просмотр»: флажки бледные и не нажимаются; сворачивание, поиск и виды работают */
#colmenu.ro .cb{background:#f3f3ef;border-color:#d6d6d0}
#colmenu.ro .cb.on,#colmenu.ro .cb.mix{background:#9aa9cf;border-color:#9aa9cf}
#colmenu.ro .cr,#colmenu.ro .bkh{cursor:default}
#colmenu .empty{padding:32px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#5a5e65;font-size:12.5px;line-height:1.45}
#colmenu .empty > svg{color:#b3b6bc}
#colmenu .empty b{color:#1c1e22;font-size:13px;font-weight:600;word-break:break-word}
/* загрузка списка: полосы-скелет, переливаются (без мигания) */
#colmenu .skel{padding:10px 20px;display:flex;flex-direction:column;gap:10px}
#colmenu .skel i{display:block;height:12px;border-radius:4px;background:linear-gradient(90deg,#efefeb 0%,#f7f7f4 50%,#efefeb 100%);background-size:200% 100%;
  animation:cmSk 1.2s linear infinite}
#colmenu .skel i.in{margin-left:40px}
@keyframes cmSk{from{background-position:200% 0}to{background-position:0 0}}

/* низ: несохраненные изменения, ошибка, кнопки */
#colmenu .cm-f{border-top:1px solid #ebebe6;background:#fafaf8;padding:10px 12px 12px 16px;display:flex;flex-direction:column;gap:10px;flex-shrink:0}
#colmenu .dirty{display:flex;align-items:center;gap:8px;font-size:12px;color:#173c8c;border-radius:4px;margin:-3px -6px;padding:3px 6px}
#colmenu .dirty > i{width:7px;height:7px;border-radius:50%;background:#1f4fb8;display:block;flex-shrink:0}
#colmenu .dirty .lnk{margin-left:auto}
#colmenu .dirty.nudge{animation:cmNudge .6s ease-out}
@keyframes cmNudge{0%,100%{background-color:transparent}25%{background-color:#dfe8fa}}
#colmenu .err{display:flex;gap:8px;align-items:flex-start;background:#fdecea;color:#8c1d15;border-radius:6px;padding:8px 10px;font-size:12px;line-height:16px}
#colmenu .err svg{margin-top:1px;flex-shrink:0}
#colmenu .err b{font-weight:600}
#colmenu .acts{display:flex;align-items:center;gap:8px}
#colmenu .acts .sp{flex-grow:1}
#colmenu .spin{animation:cmSpin 1s linear infinite}
@keyframes cmSpin{to{transform:rotate(360deg)}}

/* ── подсказка выключенной кнопки «Столбцы» в разделах «Еще» (README «Состояния»: «Разделы из „Еще“») ──
   Кнопка выключена атрибутом disabled; подсказка — соседний элемент в .bar2, видна при наведении на кнопку (CSS :hover работает и у
   выключенной кнопки, события мыши — не у всех браузеров). */
#coltip{position:absolute;top:100%;right:16px;width:260px;background:#1c1e22;color:#ffffff;font-size:12px;line-height:1.4;padding:7px 10px;border-radius:6px;
  white-space:normal;z-index:41;box-shadow:0 8px 24px rgba(20,20,19,.2);visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .12s,visibility 0s .12s}
#coltip::before{content:"";position:absolute;top:-5px;right:40px;border:5px solid transparent;border-top:0;border-bottom-color:#1c1e22}
#colsbtn[disabled]:hover + #coltip{visibility:visible;opacity:1;transition:opacity .12s .25s,visibility 0s .25s}
#colsbtn[disabled] .muted{color:inherit}

/* ── окно «Показать все столбцы листа …?» — как «Обновить данные» (#refreshdlg), с плавным закрытием (README «Закрытие окон
   подтверждения»: затемнение 0,16 / 0,12 с, карточка 0,18 / 0,14 с). По центру по высоте — как окно «Обновить» на сайте (решение
   владельца 24.09 для #refreshdlg; у дизайнера — 168 px сверху). ── */
#colalldlg{position:fixed;inset:0;z-index:60;background:rgba(28,30,34,.32);display:flex;align-items:center;justify-content:center;padding:16px;
  animation:cmOvlIn .16s ease-out both}
#colalldlg[hidden]{display:none}
#colalldlg.closing{animation:cmOvlOut .12s ease-in both}
@keyframes cmOvlIn{from{opacity:0}to{opacity:1}}
@keyframes cmOvlOut{from{opacity:1}to{opacity:0}}
#colalldlg .cm-dlg{width:440px;max-width:100%;background:#ffffff;border-radius:10px;box-shadow:0 24px 60px rgba(20,20,19,.24),0 0 0 1px rgba(20,20,19,.06);
  transform:translateY(0);animation:cmDlgIn .18s cubic-bezier(.2,.8,.3,1) both;color:#1c1e22;outline:none;font-size:13px;line-height:1.35}
#colalldlg.closing .cm-dlg{animation:cmDlgOut .14s cubic-bezier(.4,0,1,1) both}
@keyframes cmDlgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes cmDlgOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}
#colalldlg .cm-dlg-h{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 0 24px}
#colalldlg .cm-dlg-h h2{margin:0;font-size:16px;font-weight:600;line-height:24px;flex-grow:1}
#colalldlg .cm-dlg-h .btn{margin:-4px -4px 0 0;color:#6f737a;flex-shrink:0}
#colalldlg .cm-dlg-b{padding:8px 24px 20px;font-size:13px;line-height:20px;color:#3c4046}
#colalldlg .cm-dlg-b p{margin:0 0 12px}
#colalldlg .cm-dlg-b p b{font-weight:600;color:#1c1e22}
#colalldlg .cm-facts{margin:0;padding:12px 14px;list-style:none;background:#f7f7f4;border-radius:8px;display:flex;flex-direction:column;gap:8px}
#colalldlg .cm-facts li{display:flex;gap:10px;align-items:center}
#colalldlg .cm-facts svg{color:#6f737a;flex-shrink:0}
#colalldlg .cm-dlg-f{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid #ebebe6}
#colalldlg .btn.primary{padding:0 14px}

/* ── общий тост внизу по центру (window.uiToast, columns.js): «✓ Столбцы листа WB сохранены для всех · видно N из M», 4 с, «Скрыть» ── */
.ui-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1c1e22;color:#ffffff;border-radius:8px;padding:10px 14px;display:flex;
  align-items:center;gap:10px;font-size:12.5px;line-height:1.35;box-shadow:0 10px 30px rgba(20,20,19,.25);z-index:70;white-space:nowrap;
  max-width:calc(100vw - 32px);animation:uiToastIn .2s cubic-bezier(.2,.8,.3,1) both}
.ui-toast.closing{animation:uiToastOut .12s cubic-bezier(.4,0,1,1) both;pointer-events:none}
.ui-toast > span{overflow:hidden;text-overflow:ellipsis}
.ui-toast svg{color:#7fd4a0;flex-shrink:0}
.ui-toast .lnk{border:0;background:transparent;padding:0;font:inherit;font-weight:500;color:#a9c1ef;cursor:pointer;flex-shrink:0}
.ui-toast .lnk:hover{color:#c8d8f7;text-decoration:underline;text-underline-offset:2px}
.ui-toast .lnk:focus-visible{outline:2px solid #a9c1ef;outline-offset:2px}
@keyframes uiToastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes uiToastOut{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,8px)}}

@media (prefers-reduced-motion: reduce){
  #colmenu,#colmenu.closing,#colmenu .dirty.nudge,#colmenu .skel i,#colmenu .spin,#colalldlg,#colalldlg.closing,#colalldlg .cm-dlg,
  #colalldlg.closing .cm-dlg,.ui-toast,.ui-toast.closing{animation:none}
  #colmenu .sg button,#colmenu .fchip,#colmenu .lnk,#colmenu .cr,#colmenu .bkh,#colmenu .bkh .tg svg,#colmenu .gb,#colmenu .gb.closed .gbi,#colmenu .cb,
  #colmenu .srch input,#coltip,#colsbtn[disabled]:hover + #coltip{transition:none}
}