/* Беофф: наши правки оформления поверх main.css 2013 и museum.css (только живой сайт, музей их не видит). */

/* Левый сайдбар (Кирилл, 27.09, отсебятина): в оригинале всегда 25% окна — на «квадратных» 4:3 / 5:4 это нормально, на широких
   16:10 / 16:9 громоздко (469px на 1920×1080). Широкое окно (пропорции от 7:4) — 20%, остальные — 25% как было. Порог 7:4, а не 3:2: развёрнутое окно на 4:3 из-за шапки
   браузера и панели задач выходит ~1.6–1.7, а на 16:10 / 16:9 — от ~1.85.
   По пропорциям окна браузера, а не монитора: окно на пол-экрана — обычные 25%. Уже 900px — мобильная вёрстка, не трогаем. */
/* Рычажок «Сайдбар: 25%» в шапке (рядом со шрифтом) — всегда 25%, как в оригинале: класс bx-side25 на <html> (beoff.js). */
@media screen and (min-width: 900px) and (min-aspect-ratio: 7/4) {
  html:not(.bx-side25) .leftbanner { width: 20%; }
}

/* Меню в шапке — до правого края окна, туда же, где рычажки шрифта и сайдбара (Кирилл, 28.09). В оригинале плашка .lb
   сжималась по содержимому и заканчивалась раньше края. */
.lb { width: 100%; }

/* «Обратите внимание на:» под записью — прячется рычажком в шапке (класс bx-nonotice на <html>, beoff.js; Кирилл, 28.09). */
html.bx-nonotice .bx-notice { display: none; }
/* Подпись под авой (p.sign из main.css; avatars.mjs avaHtml) — везде не шире самой авы и переносится, где бы ава ни стояла: в записи,
   комменте, личке, дуэли, на портале. Своей ширины в раскладку не вносит (width:0), растягивается по ячейке с авой (min-width:100%).
   Раньше ширину держала только ячейка width=1% у записей, а в шапке дуэли подпись шла в одну строку (Кирилл, 04.10). */
p.sign { width: 0; min-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
p.sign.bxsign-free { width: auto; min-width: 0; max-width: 100px; } /* размер авы неизвестен (avatars.mjs avaSize) — не по ширине авы */
/* Размер всего, что грузится, — сразу (Кирилл, 04.10): у картинок и роликов width/height из файла (lib/dims.mjs), уже вписанные в
   рамки места; height:auto — если ужмёт max-width (узкий экран), пропорция та же, и место держится, пока файла нет или он не пришёл */
img.avatar[width], img.user_img[width], img.bx-ava[width] { height: auto; }
/* «Обратите внимание на:» — строка «название дата ник» всегда в одну строку: не влезает — название с троеточием (Кирилл, 04.10).
   Сетка minmax(0, max-content): название ничего не требует от ширины блока, поэтому блок не раздувается длинным названием,
   а при свободном месте название целиком; дата и ник — своей колонкой, не сжимаются. */
.bx-notice div.bxnt { font-size: 100%; display: grid; grid-template-columns: minmax(0, max-content) max-content; column-gap: .3em; white-space: nowrap; overflow-wrap: normal; } /* пробел в начале колонки съедается — отступ колонкой */
.bx-notice div.bxnt > a { overflow: hidden; text-overflow: ellipsis; }

/* ---- Компактные комменты в лентах и «кратко / подробно» (Кирилл, 28.09) — стили из позднего main.css beon/carguru
   (раскопки/ref images/Настройка аватар_files/main.css): .tinycomms, .tc_shift, .tinycom_avatar, .artc_tr, .tinycommspage и т.д.
   Режим — класс bx-tc-short на <html> (beoff.js): «кратко» — вид 2013 (счётчик под записью), «подробно» — комменты под записью. */
html.bx-tc-short .tc-full { display: none; }
html:not(.bx-tc-short) .tc-short { display: none; }
.right_links { text-align: right; float: right; font-size: 80%; }
.modes { text-align: right; width: 100%; }
.tinycommspage div { font-size: 100%; }
/* отступы в «подробно» — только снизу и в пикселях, чтобы первая запись стояла там же, где в «кратко», а зазор между записями
   был тот же (Кирилл, 28.09): в «кратко» под записью 32px (2em от 16px); в «подробно» запись → 11px → комменты → 21px → следующая */
html:not(.bx-tc-short) .tinycommspage .postbg { margin-bottom: 11px; }
html:not(.bx-tc-short) .tinycommspage .tc-full { padding-bottom: 21px; } /* padding, не margin: у пустого блока margin склеился бы с соседями */
html:not(.bx-tc-short) .tinycommspage .tc-full .tinycomms:last-child { margin-bottom: 0; }
.tinycomms { width: 100%; margin-bottom: 0.7em; border-spacing: 0; }
.tinycomms .commentbg { margin: 0; padding: 0; }
.tinycommsform, .tinycommscont { width: 100%; border-spacing: 0; }
.tc_shift { width: 30px; }
.tinycom_avatar { display: inline-block; max-width: 32px; height: auto; margin: 2px; vertical-align: middle; }
.tinycommsform_avatar_tr { display: inline-block; max-width: 32px; opacity: .7; }
textarea.artc_tr { overflow: hidden; resize: none; width: 100%; max-width: 50em; opacity: .7; }
textarea.artc_tr:focus { opacity: 1; }
@media screen and (max-width: 639px) {
  .tinycom_avatar, .tinycommsform_avatar_tr { display: none; }
}
.tinycommserr { display: none; color: red; margin: 0 0 3px 30px; }
/* картинки и гифки в кратких комментах под записью — миниатюрой, чуть больше мини-авы (Кирилл, 15.10: «краткий вид всё же»; на carguru
   2014 тут вообще были ссылки текстом, раскопки/archive/pages/sections/home-late/carguru.ru_20140701.html); щелчок — к комменту (beoff.js);
   видео — маленьким окошком */
.tinycomms img.bximg, .tinycomms video.bxgifv { width: auto !important; height: auto !important; max-width: 96px !important; max-height: 48px !important;
  margin: 2px 4px 2px 0 !important; float: none !important; vertical-align: bottom; cursor: pointer; }
.tinycomms iframe.bxvframe, .tinycomms video.bxvfile { width: 128px !important; height: 72px !important; }

/* меню у ника (beoff.js; плашка — .menu_div из main.css 2013): строки поплотнее, иконки по центру своей колонки */
#bx-umenu table{border-collapse:collapse}
#bx-umenu td{padding:2px 3px;white-space:nowrap;vertical-align:middle}
#bx-umenu td.mdp{text-align:center;width:18px;padding-right:4px}

/* «Мои подписки» — таблицы как «Личные сообщения > Полученные» (beon 2013): заголовки жирные по центру, ✕ по центру своей колонки */
table.bx-subs th{font-weight:bold;font-size:13px;text-align:center;padding:2px 8px 4px}
table.bx-subs td{padding:1px 8px;white-space:nowrap;vertical-align:middle}
table.bx-subs td:first-child{white-space:normal;padding-left:0}
table.bx-subs td:has(> a > img[alt="отписаться"]){text-align:center}

/* ---------- личка: окно /private/ (site/pages/pm.mjs, site/static/pm.js; классы табов и списков — из main.css 2013) ---------- */
body.bxpmwin{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden} /* dvh — видимая часть: на телефоне 100vh выше экрана (адресная строка), форма с «Отправить» уезжала вниз (Кирилл, 02.10) */
body.bxpmwin.bxkbd{position:fixed;left:0;right:0} /* открыта клавиатура телефона — top и height по видимой части экрана (static/pm.js, beoff.js bxKbd; Кирилл, 04.10) */
#pm{flex:1;min-height:0;display:flex}
#pmleft{flex:1;min-width:0;display:flex;flex-direction:column;padding:4px 0 4px 5px}
#divtabs{flex:none}
#divtabs table.tabs{border-collapse:separate}
#divtabs td,#right table.tabs td{cursor:pointer}
#pmbox{flex:1;min-height:60px;position:relative;border-top:1px solid gray}
#pmmessages{position:absolute;top:0;bottom:0;left:0;right:0;overflow-y:auto;padding:8px 8px 0 2px;box-sizing:border-box}
#pmerr{flex:none;padding:2px 0}
#pm_form{flex:none;margin:0}
#pm_form textarea#message{height:120px}
/* Высота полей (Кирилл, 04.10): запись и коммент — за уголок снизу; личка — за верхнюю границу (поле стоит внизу окна: тянешь край
   вверх — переписка над ним ужимается), полоска .bxta-grip поверх края, курсор ↕. Только на квадратных и широких экранах (не уже 700 —
   граница узкого вида), на телефоне — как было. Потянул — поле больше само не растёт, текст листается (static/beoff.js). */
.bxta-grip { display: none; }
@media (min-aspect-ratio: 1/1) and (min-width: 700px) {
  textarea.message.ar:not(#taresizer) { resize: vertical; }
  #pm_form textarea.message.ar { resize: none; }
  .bxta-grip { display: block; position: relative; z-index: 2; height: 8px; margin: -4px 0 -4px; cursor: ns-resize; }
  .bxta-grip:hover, .bxta-grip.bxta-on { background: linear-gradient(#0000 3px, #7f9db9 3px, #7f9db9 5px, #0000 5px); }
  textarea.message.ar.bxta-user { overflow: auto; }
}
body.bxta-drag { user-select: none; cursor: ns-resize; }
#pm .chooseavatar div{height:120px}
.pmlinks{text-align:right;padding:2px 4px}
#arr{flex:none;width:16px;cursor:pointer;background-position:center top} /* толще — по ней легче попасть, на всех экранах (Кирилл, 04.10; было 10); стрелка 5 точек — по центру */
#arr.pm_arr_l{background-image:url('/i/a_left.png')}
#right{flex:none;width:176px;display:flex;flex-direction:column;padding:4px 4px 4px 2px}
#right .outer_cl{flex:1;min-height:0;overflow:auto}
#pmbottom{flex:none;padding:6px 2px 2px}
.pmnone{color:gray;padding:8px 4px}
li.contact{cursor:pointer;padding:2px 3px;margin:1px 0}
img.bxmini{width:24px;height:auto;vertical-align:middle} /* мини-ава (avatars.mjs miniAva): по ширине, как на главной beon 2015 */
table.bxfriends{font-size:100%;border-collapse:collapse} table.bxfriends td{vertical-align:middle;padding:1px 0;font-size:100%} /* main.css: TD 75% — вложенная ячейка мельчила ники (Кирилл, 04.10) */ table.bxfriends td.bxfr-ava{width:24px;padding-right:3px} table.bxfriends img.bxmini{display:block}
.cava{display:none;margin-right:3px}
#right.bxpm-cava .cava{display:inline}
body.bxpm-noava .pmava .avatar,body.bxpm-noava .pmava .sign{display:none}
.pmava{padding-right:6px}
/* баннер «Личное сообщение:» в колонке (lib/pmview.mjs) */
.bxpmtext{margin:4px 0 8px;word-wrap:break-word}
/* в окне лички: без музейной плавающей кнопки шрифта (режим шрифта общий, меняется в шапке сайта); список и подписи — обычным кеглем */
body.bxpmwin .bx-museum{display:none}
#right .contactlist,#right .rdiv,#pmbottom,#right table.tabs td{font-size:12px}
/* подсказки в окне лички — обычным кеглем (Кирилл, 29.09: «Сообщений пока нет» было очень мелким) */
.pmnone{font-size:12px}
/* баннер — тем же кеглем, что пункты колонки: div внутри ячейки у нас ужимается до 75% (Кирилл, 29.09) */
.bxpmbanner,.bxpmbanner div,.bxpmbanner center{font-size:100%}

/* правый список в личке — ширина тянется полосой #arr (Кирилл, 29.09); пункты растягиваются по ширине списка */
#arr{cursor:col-resize}
#right{width:176px;box-sizing:border-box}
#right li.contact{width:auto;max-width:none}
body.bxpm-drag{user-select:none;cursor:col-resize}

/* чаты в окне лички (lib/chats.mjs): полоса над лентой — какой чат и кто в нём; окошки «Создание нового чата» (#newchatwin из main.css 2013) и «Пригласить» */
#pmbox{display:flex;flex-direction:column}
#pmmessages{position:relative;flex:1;min-height:0;height:auto}
#chatbar{flex:none;font-size:12px;padding:5px 6px;background:#f4f4f4;border-bottom:1px solid #ddd;line-height:1.5}
#chatbar a img{vertical-align:middle}
body.bxpm-chat .send_to_mutual{display:none}
body.bxpm-anonchat #pm_form .chooseavatar{display:none}
.bxchatsys{color:gray;text-align:center;margin:0 0 10px;font-size:12px}
#newchatwin,#invitewin{font-size:12px;z-index:50;min-width:260px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
#newchatwin div,#invitewin div{font-size:100%}
#invitewin{display:none;background:white;text-align:center;position:absolute;top:30%;left:34%;border:1px solid #dddddd;border-radius:6px;padding:10px}
#inviteerr{display:none}
#createchatformerror,#inviteerr{margin-bottom:6px}
.bxinvlist{text-align:left;max-height:200px;overflow:auto;padding:2px 4px;border:1px solid #eee}
#pmnewchat{margin-bottom:4px}
.bxchatacts{float:right;margin-left:14px;white-space:nowrap}

/* ящик /messages/ (site/pages/messages.mjs; кадры видео 2013 раскопки/ref images/video-2/23, 24): таблица «Тема | Отправитель | Дата», письмо под ней */
.bxmsgtop{margin:2px 0 10px}
table.bxmsglist th{font-weight:bold;text-align:center;padding:4px 4px 6px;font-size:13px}
table.bxmsglist td{padding:2px 4px;white-space:nowrap;vertical-align:middle}
table.bxmsglist tr.rcurrent td{background-color:#dddddd}
.bxmsgflag{width:20px;text-align:center}
.bxmsgwho img.flag{vertical-align:middle}
.bxmsgempty{color:gray;padding:8px 4px}
#usermessage{margin:8px 0 0;color:green;font-size:14px} /* «Сообщение успешно удалено.» — крупнее (Кирилл, 29.09) */
#usermessage:empty{display:none}
#messagetext hr{margin-top:10px}
table.bxmsgopen td{padding:3px 0;vertical-align:top}
td.bxmsghead{width:115px}
.bxmsgbtns{margin:6px 0 14px}
/* текст письма — обычным кеглем (div в div ужимался до 75% и выходил мельче «Сообщений пока нет»; Кирилл, 29.09) */
#messagetext,#messagetext div{font-size:100%}
.bxmsgbody{word-wrap:break-word;max-width:760px;font-size:12px!important}
/* «Недавние контакты» и «Чаты» в колонке — те же списки, что в окне лички; div в ячейке колонки иначе ужимается до 75% */
.bxmsgcol,.bxmsgcol div{font-size:100%}
.bxmsgcol ul.contactlist{padding-left:2px}
.bxmsgcol li.contact{width:auto;max-width:none}
.bxmsgcol .rdiv{margin-top:2px}

/* чаты: плашка вместо поля ввода, когда писать нельзя (вышел, исключили, закрыт; Кирилл, 29.09); бывшие чаты в списке — серым */
#pmplate{display:none;flex:none;margin:6px 0 2px;padding:14px 10px;background:#f4f4f4;border:1px solid #ddd;border-radius:4px;text-align:center;font-size:13px}
#pmplate span{margin-right:10px}
body.bxpm-plate #pmplate{display:block}
body.bxpm-plate #pm_form,body.bxpm-plate #pmerr{display:none}
li.contact.bxformer{color:gray}
a.bxchatclose{color:#c00000}
#leavewin,#chatsetwin{display:none;background:white;text-align:center;position:absolute;top:28%;left:34%;border:1px solid #dddddd;border-radius:6px;padding:10px;font-size:12px;z-index:50;min-width:280px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
#leavewin div,#chatsetwin div{font-size:100%}
#leaveerr{display:none;margin-bottom:6px}
/* участник закрытого чата, давно не заходивший, — серым (Кирилл, 29.09) */
.bxstale a.user,.bxstale a.user:visited{color:gray}
/* «заглушить чат» — динамик справа в пункте списка и на табе (Кирилл, 29.09); заглушён — светло-серый */
img.bxmute{cursor:pointer;vertical-align:middle}
li.contact img.bxmute,li.contact img.bxdrop{float:right;margin:0 2px 0 4px;cursor:pointer}
li.contact img.bxdrop{margin:2px 4px 0 6px}
img.bxmute.bxmuted{opacity:.3;filter:grayscale(1)}
.bxmsgcol img.bxmute,.bxmsgcol img.bxdrop{display:none}
/* ответы в окне лички («Взаимных друзей пока нет…», «Сообщение помечено непрочтённым.») — крупнее, как в ящике (Кирилл, 29.09) */
#pmerr,#pmerr *{font-size:14px}

/* «Настройка дизайна» (site/pages/design.mjs; кадры видео 2013 раскопки/ref images/video-2/15–18): подписи справа, поля слева, «Сохранить» справа внизу */
.bxdesign{max-width:720px}
table.bxdz{width:100%;max-width:560px}
table.bxdz td{padding:2px 3px;vertical-align:middle}
td.bxdl{text-align:right;white-space:nowrap;width:190px}
td.bxdhead{padding:6px 0 4px!important}
td.bxdsub{padding:6px 0 2px 12px!important}
.bxswatch{display:inline-block!important;vertical-align:middle;margin:0 0 0 4px!important;cursor:pointer;position:relative;overflow:hidden}
.bxchess{display:inline-block;vertical-align:middle;width:14px;height:14px;margin-left:4px;border:1px solid #bbb;cursor:pointer;background:repeating-conic-gradient(#cccccc 0 25%,#ffffff 0 50%) 0 0/7px 7px}
input.bxcolor{text-transform:uppercase} /* шрифт — как у всех полей режима (XP — пиксельный; Кирилл, 29.09) */
img.bxdimg{max-width:360px;max-height:360px;height:auto;border:1px solid #ddd;margin:2px 0 4px}
table.bxdz tr.bxdvip{display:none}
table.bxdz.bxdopen tr.bxdvip{display:table-row}
hr.bxdline{margin:10px 0}

/* «тулбар и смайлики…» — только там, где main.css 2013 прячет тулбар (формы — уже 520px, личка — уже 660px); открыл — тулбар виден */
.bx-tblink{display:none;font-size:12px;padding:2px 0 4px}
@media screen and (max-width:519px){ .bx-tblink-post{display:block} table.toolbar.bx-tb-open{display:table!important;visibility:visible!important} }
@media screen and (max-width:659px){ .bx-tblink-pm{display:block} table.pmtoolbar.bx-tb-open{display:table!important;visibility:visible!important} }
/* «осталось N знаков» под полем у лимита (beoff.js) */
.bx-left{font-size:12px;color:gray;padding:2px 0}
.bx-over{position:absolute;z-index:1000;font-size:12px;color:#c00;background:#fff;border:1px solid #c00;padding:1px 4px;white-space:nowrap} /* «Не помещается…» под полем (beoff.js, bxOverflow) */

/* длинное слово без пробелов («аааа…», ссылка) — переносится где угодно, а не растягивает таблицу за край экрана (Кирилл, 29.09).
   anywhere (не break-word) — учитывается и при подсчёте ширины таблицы, поэтому ячейка не распирает страницу */
.postbg,.commentbg,.tinycomms,table.messagebg,.bxpmtext,.bxmsgbody,.bx-notice,.datebg,.crumbsbg,td.menubg,.blog_title,.blog_signature,li.contact,#chatbar,.bxchatsys{overflow-wrap:anywhere;word-break:normal}

/* окно лички: левая часть узкая (правый список растянули) — выбор авы прячется, тулбар — под ссылкой, кнопки переносятся;
   правый список — с белым фоном поверх, что не влезло слева — обрезается по его краю (Кирилл, 29.09) */
#pmleft{overflow:hidden}
#right{background:#ffffff;position:relative;z-index:1}
body.bxpm-narrowleft #pm_form .chooseavatar{display:none}
body.bxpm-narrowleft table.pmtoolbar:not(.bx-tb-open){display:none}
body.bxpm-narrowleft table.pmtoolbar.bx-tb-open{display:table}
body.bxpm-narrowleft .bx-tblink-pm{display:block}
body.bxpm-narrowleft table.bxpmbtns td{display:inline-block;width:auto!important;padding:0 4px 4px 0}


/* палитра цвета в духе eyecon ColorPicker (2008), светлая (site/static/colorpicker.js; Кирилл, 29.09) — выпадает под квадратиком */
.bxcp{position:absolute;z-index:1000;display:flex;gap:8px;background:#f7f7f7;border:1px solid #b5b5b5;padding:7px;font:11px "bx-tahoma-11",Tahoma,Verdana,sans-serif;color:#000;text-align:left}
.bxcp[hidden]{display:none}
.bxcp div,.bxcp span{font-size:11px}
.bxcp-sb,.bxcp-h{position:relative;cursor:crosshair;align-self:flex-start}
.bxcp canvas{display:block;border:1px solid #8a8a8a}
.bxcp-dot{position:absolute;width:9px;height:9px;margin:-4px 0 0 -4px;border:1px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000;pointer-events:none}
.bxcp-bar{position:absolute;left:-3px;right:-3px;height:3px;margin-top:-1px;border:1px solid #000;background:#fff;pointer-events:none}
.bxcp-side{display:flex;flex-direction:column;gap:3px}
.bxcp-cmp{display:flex;border:1px solid #8a8a8a;width:62px;margin-bottom:2px}
.bxcp-cmp span{width:31px;height:24px}
.bxcp-old{cursor:pointer}
.bxcp-row{display:flex;align-items:center;gap:3px;height:19px}
.bxcp-row span{width:9px;color:#444}
.bxcp-row span+input+span{margin-left:4px}
html .bxcp input{width:26px;height:15px;padding:1px 3px;border:1px solid #7f9db9;background:#fff;color:#000;font:11px "bx-tahoma-11",Tahoma,sans-serif;box-sizing:content-box;border-radius:0}
html .bxcp input.bxcp-hex{width:48px;text-transform:uppercase}
/* «Отключить дизайн» выключен — значок бледный, щелчок включает обратно */
a.bx-designsw img{vertical-align:-3px;margin-right:4px}
/* подписи у полей дизайна («непрозрачность», «px», «вправо», «вниз»…) — размером с остальные подписи, серым (Кирилл, 29.09: мелко) */
.bxdesign table.bxdz td:not(.bxdl) font.gr{font-size:100%}
td.bxdbtns{white-space:nowrap}
form.bxdzform.bxdbusy{opacity:.6}
/* «Справка» (site/pages/help.mjs) */
.bxhelp code{font:12px "Courier New",monospace;background:#f4f4f4;padding:0 2px}
table.bxhelp-smiles td{padding:3px 14px 3px 0;white-space:nowrap}
table.bxhelp-tr > tbody > tr > td{padding-right:14px}
/* дизайн: слои картинок 2–4 и блоки колонки по отдельности (Кирилл, 29.09) */
table.bxdz tr.bxdlay{display:none}
table.bxdz tr.bxdlay.bxdshow{display:table-row}
div.bxdblk{display:none}
div.bxdblk.bxdshow{display:block}
/* заголовок «Блоки колонки по отдельности» и «Блок:» — как заголовки разделов («О себе — плашка»): 12px (Кирилл, 02.10: «очень выделяется») */
table.bxdblkhead td{font-size:12px}
table.bxdblkhead font.gr{font-size:100%}

/* ---------- вставки в текст (lib/markup.mjs, site/static/media.js; Кирилл, 29.09) ---------- */
/* окошко кнопки тулбара — как «Создание нового чата» (#newchatwin main.css 2013): белое, серая рамка, скругление 6px */
.bxins{position:fixed;z-index:100;top:22%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid #ddd;border-radius:6px;padding:10px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);font-size:12px;max-width:calc(100vw - 24px);box-sizing:border-box;text-align:left}
.bxins div,.bxins table,.bxins td{font-size:100%}
.bxins-body{margin-top:8px}
table.bxins-t td{padding:2px 3px;vertical-align:middle}
table.bxins-t td:first-child{white-space:nowrap}
table.bxins-t font.gr{display:inline-block;max-width:330px}
.bxins input[type=text]{max-width:60vw}
.bxins-err{color:red;font-weight:bold;margin-top:6px}
.bxins-err:empty{display:none}
.bxins-btns{margin-top:8px;text-align:center}
.bxins-list{max-height:180px;overflow:auto;margin:2px 0 0 4px}
.bxins-list a{display:block;padding:2px 0;white-space:nowrap}
/* анкета: «Мои изображения в альбоме:» — две картинки до 230px (r230 у carguru), «Мои ссылки:» — даты и строчки */
img.bxprofpic { max-width: 100%; max-height: 230px; height: auto; margin: 2px; }
table.bxprofdated td { padding: 1px 0; }
table.bxprofdated td.m2 { padding-top: 6px; }
/* тесты по роликам 2016–2019 (pages/polls.mjs): вопрос — текст с отступом, варианты ещё правее; результат — «Результат:» / «Подробнее:»
   в две колонки, коды для сайтов тремя полями */
td.bxtq-text { padding-left: 15px; }
td.bxtq-opts { padding-left: 30px; }
table.bxtres td.bxtres-h { padding-right: 20px; white-space: nowrap; }
/* дуэли (pages/duels.mjs, static/duels.js): портал — «Лучшие за сегодня» узкой колонкой слева, черта #DDDDDD, справа списки;
   страница дуэли — баллы 48px, счётчик коммента — жёлтая плашка (.duelcc из main.css 2013) над пальцами 30×30 */
table.bxduels td.bxduels-best { width: 1%; padding-right: 10px; white-space: nowrap; }
table.bxduels td.bxduels-list { border-left: 1px solid #DDDDDD; padding-left: 10px; }
table.bxdbest td { padding: 1px 4px; }
table.bxdbest img.avatar { max-width: 100px; }
td.menubg table.bxdbest { width: 100%; }
/* «Контакты:» колонки главной (lib/sidebar.mjs contactsBlock): подпись строкой, кнопки-баннеры под ней, между группами — воздух */
span.bxct { display: inline-block; margin: 2px 0 6px; line-height: 11px; }
/* новость под шапкой (lib/html.mjs newsLine): по центру, как плашка beon; длинное слово переносится, страницу не распирает */
div.bxnews { text-align: center; margin: 2px 8px 6px; overflow-wrap: anywhere; }
span.bxct img.rss { vertical-align: top; }
table.bxduel { margin-bottom: 4px; }
/* дуэль — с левой колонкой и не шире 1000 точек по центру: на широком экране соперники рядом, а не по краям; форма коммента —
   во всю ширину дуэли, а не узкая (Кирилл, 04.10) */
.bxduelview { max-width: 1000px; margin: 0 auto; font-size: 100%; }
.bxduelview table.textareabg { width: 100%; }
/* форма коммента под записью — во всю ширину, как комменты над ней (Кирилл, 04.10: «опять не до правого края»): без явной ширины таблица
   тянулась по содержимому, и с блоком «Как:» и столбиком ав вставала уже */
form[name=comment_form] > table.textareabg { width: 100%; }
/* форма ответа в интервью (pages/interview.mjs) — тоже во всю ширину (Кирилл, 10.10: у carguru там td width=500 — «забыл растянуть») */
#answer_form > table.textareabg { width: 100%; }
p.bxdpoints { font-size: 48px; font-weight: bold; text-align: center; margin: 4px 0; }
.duelcc { text-align: center; font-size: 150%; font-weight: bold; background-color: #ffffc0; min-width: 34px; padding: 1px 2px; }
table.bxdcom td.bxdvote a img { display: block; margin: 2px auto 0; }
table.bxdcom td.bxdvote br { display: none; }
table.bxdcom td.bxdtext { word-wrap: break-word; overflow-wrap: anywhere; }
table.bxduelpage tr.bxdrow > td { padding-top: 6px; }
/* заголовок соперника — вплотную к его аве и тексту (~5 точек, как между заголовком и телом записи), а не через поля h2 (Кирилл, 04.10) */
table.bxduelpage h2.topic_title { margin-bottom: 0; }
table.bxduelpage tr.bxdtitle > td { padding-bottom: 0; }
table.bxduelpage tr.bxdhead > td { padding-top: 2px; }
@media (max-width: 600px) {
  table.bxduels td.bxduels-best, table.bxduels td.bxduels-list { display: block; width: auto; border: 0; padding: 0; }
  table.bxduelpage tr.bxdrow > td:empty { display: none; }
  table.bxduelpage tr.bxdrow > td { display: block; width: auto; }
  p.bxdpoints { font-size: 32px; }
}
/* цвет текста / маркер (кнопки тулбара, media.js bxTextColor) и маркер в тексте (lib/markup.mjs [MARK=]) */
.bxclr{position:absolute;z-index:999;background:#f7f7f7;border:1px solid #b5b5b5;padding:5px 6px 6px;font:11px "bx-tahoma-11",Tahoma,Verdana,sans-serif;color:#000;text-align:left;box-shadow:1px 1px 3px rgba(0,0,0,.15)}
.bxclr div,.bxclr span,.bxclr a{font-size:11px}
.bxclr-t{margin:0 0 3px}
.bxclr-g{display:grid;grid-template-columns:repeat(8,15px);gap:3px;margin-bottom:6px}
.bxclr-g a,.bxclr-sw{display:inline-block;width:13px;height:13px;border:1px solid #808080;cursor:pointer}
.bxclr-g a:hover{border-color:#000;outline:1px solid #fff;outline-offset:-2px}
.bxclr-own{white-space:nowrap}
.bxclr-pick{margin-left:6px}
.bxclr-sw{vertical-align:middle}
span.bxmark{padding:0 1px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* картинки: не шире колонки (resize_images у beon); ужатая — щелчок показывает настоящий размер поверх страницы (si() у beon) */
img.bximg{max-width:100%;height:auto;vertical-align:bottom}
/* «оригинальная (но не более 400 точек)» (lib/markup.mjs IMG_SIZES): свой размер, не шире 400; маленькая / средняя / большая — width= */
img.bximg.bxw400{max-width:min(400px,100%)}
/* MP4 / WEBM «как гифка» (lib/markup.mjs; Кирилл, 04.10) — как картинка: не шире колонки, «оригинальная» — не шире 400, слева / справа — обтекание */
video.bxgifv{max-width:100%;height:auto;vertical-align:bottom;background:transparent}
video.bxgifv.bxw400{max-width:min(400px,100%)}
video.bxgifv-left{float:left;margin:2px 10px 4px 0}
video.bxgifv-right{float:right;margin:2px 0 4px 10px}
.bxpm video.bxgifv{width:auto;height:auto;max-width:min(400px,100%);max-height:300px}
.bxpm-o video.bxgifv{max-width:min(200px,100%);max-height:150px}
img.bximg[align=left]{margin:2px 10px 4px 0}
img.bximg[align=right]{margin:2px 0 4px 10px}
img.bxzoom{cursor:zoom-in}
/* опросы и тесты: картинки в вопросах и результатах — не больше 400×300, в вариантах — 200×150; двойной щелчок — оригинал (Кирилл, 01.10) */
.bxpm img.bximg{width:auto;height:auto;max-width:min(400px,100%);max-height:300px}
.bxpm-o img.bximg{max-width:min(200px,100%);max-height:150px}
.bxpm img.bxzoom{cursor:pointer}
.bxlight{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.85);overflow:auto;cursor:zoom-out;display:flex}
.bxlight img{margin:auto;flex:none;max-width:none;box-shadow:0 0 12px #000}
/* исходник картинки с лёгкой копией (static/media.js showFull, lib/previews.mjs): «загружается исходник, 4,2 МБ… / открыть отдельно» */
/* окошки вставки: гостю «с компьютера» серым (static/media.js sourceRows) */
.bxins-t label.bxins-off{color:#999}
.bxlight-bar{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);background:#fff;border:1px solid #7f9db9;padding:3px 8px;font:11px Tahoma,Verdana,sans-serif;color:#333;white-space:nowrap;cursor:default;z-index:1}
/* видео YouTube: плеер сразу, шириной до 640, 16:9 */
iframe.bxvframe{width:640px;max-width:100%;aspect-ratio:16/9;height:auto;border:0;vertical-align:top}
video.bxvfile{max-width:100%;height:auto;background:#000;vertical-align:top}
.bxsc{height:28px;width:411px;cursor:pointer}
iframe.bxscframe{width:480px;max-width:100%;height:166px;border:0;vertical-align:top}
/* полоска-плеер в духе xspf_player_slim (фоновая музыка дневников beon, museum/diaries/julianne): серая, 15px */
.bxslim{display:inline-flex;align-items:center;box-sizing:border-box;width:300px;max-width:100%;height:15px;background:#c9c9c9;vertical-align:middle;user-select:none;line-height:1}
.bxslim.bxbgm{width:100%}
.bxslim>span{flex:none}
.bxs-play,.bxs-stop{width:13px;height:15px;position:relative;cursor:pointer}
.bxs-play::after{content:"";position:absolute;left:3px;top:3px;border-style:solid;border-width:4.5px 0 4.5px 8px;border-color:transparent transparent transparent #8a8a8a}
.bxs-on .bxs-play::after{left:3px;top:3px;width:2px;height:9px;border:0;border-left:3px solid #8a8a8a;border-right:3px solid #8a8a8a}
.bxs-stop::after{content:"";position:absolute;left:3px;top:3px;width:8px;height:9px;background:#8a8a8a}
.bxs-play:hover::after,.bxs-stop:hover::after{border-left-color:#555}
.bxs-stop:hover::after{background:#555}
.bxs-bar{flex:1 1 auto!important;position:relative;height:11px;margin:0 4px 0 3px;background:#e6e6e6;border:1px solid #b4b4b4;border-width:1px 0 0 1px;overflow:hidden;cursor:pointer;min-width:30px}
.bxs-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#d2d2d2}
.bxs-t{position:relative;display:block;padding:0 3px;font:11px "bx-tahoma-11",Tahoma,sans-serif;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:11px}
html.bx-smooth .bxs-t{font-family:Tahoma,sans-serif}
.bxslim:not(.bxs-ready) .bxs-t{flex:1;margin:0 4px 0 29px;background:#e6e6e6;height:11px}
.bxs-err .bxs-t{color:#999}
.bxs-vol{display:flex;align-items:flex-end;gap:1px;height:11px;padding:0 4px 0 1px;cursor:pointer}
.bxs-vol i{display:block;width:2px;background:#9d9d9d}
.bxs-vol i.on{background:#333}
/* «скачать» рядом с полоской в записях, комментах и личке (не у фоновой музыки) — серый квадратик того же вида, стрелка вниз */
a.bxs-dl{display:inline-block;position:relative;width:15px;height:15px;margin-left:2px;background:#c9c9c9;vertical-align:middle;text-decoration:none}
a.bxs-dl::before{content:"";position:absolute;left:6px;top:2px;width:3px;height:5px;background:#8a8a8a}
a.bxs-dl::after{content:"";position:absolute;left:3px;top:7px;border-style:solid;border-width:5px 4.5px 0 4.5px;border-color:#8a8a8a transparent transparent transparent;box-shadow:0 0 0 0 #8a8a8a}
a.bxs-dl:hover::before{background:#555}
a.bxs-dl:hover::after{border-top-color:#555}
/* ---------- альбом (lib/album.mjs, pages/album.mjs; Кирилл, 29.09) ---------- */
/* карточки по две в ряд — table.photo из main.css (50%, на узком 100%); картинка в карточке — не шире карточки и не выше 460 */
table.photo{border-collapse:collapse}
table.photo>tbody>tr>td{padding:0 6px 0 0;vertical-align:top}
table.photo img.bxphoto{max-width:100%;max-height:460px;height:auto;vertical-align:bottom} /* ширина — из width= (lib/dims.mjs, уже вписана в 460 по высоте); width:auto её перебивал — место до загрузки было нулевым */
img.bxphotothumb{max-width:160px;max-height:120px;height:auto;border:1px solid #ddd;margin-bottom:3px}
table.bxphototags{margin:6px 0 10px;padding:4px 10px;border:1px solid #ddd}
table.bxphototags td{padding:2px 4px}
table.bxphotoform td{vertical-align:middle}
/* формы альбома, ссылок, музыки, сообществ — на узком окне поля сжимаются по ячейке, а не уезжают за край (прогон 29.09) */
table.bxphotoform input[type=text], table.bxlinkform input[type=text], table.bxlinkform textarea, table.bxmusicform input[type=text]{width:100%;max-width:420px;box-sizing:border-box}
table.bxphotoform, table.bxlinkform, table.bxmusicform{max-width:100%}
table.bxlinkform input[name=tags]{width:calc(100% - 22px)}
table.bxphotoform input[type=file], table.bxmusicform input[type=file]{max-width:100%}
/* узкое окно (мобильная вёрстка main.css, до 900px) — формы во всю ширину, поля без потолка 420px (Кирилл, 02.10: «обрезанное выглядит плохо») */
@media (max-width: 899px) {
  table.bxphotoform, table.bxlinkform, table.bxmusicform, table.bxphotoform table { width: 100%; }
  table.bxphotoform input[type=text], table.bxlinkform input[type=text], table.bxlinkform textarea, table.bxmusicform input[type=text] { max-width: none; }
  table.bxphotoform input:not([type]), table.bxlinkform input:not([type]), table.bxmusicform input:not([type]) { width: 100%; box-sizing: border-box; } /* поля без type=text */
  table.bxphotoform input[name=tags] { width: calc(100% - 22px); }
  /* блоки уведомлений (личка, чаты, новые комменты и записи) — видны и при свёрнутой колонке, над плашкой (Кирилл, 02.10: «иначе не
     увидишь, что тебе что-то прилетело»); свёрнутый щелчком по заголовку — остаётся свёрнутым (там display:none прямо на строке) */
  table.leftbanner tr.bxalways { display: table-row; visibility: visible; }
  table.leftbanner tr.bx-menutop { display: table-row; }
}
tr.bx-menutop { display: none; } /* «… — свернуть ▲» (beoff.js) — только в узком окне (правило выше точнее и в узком побеждает) */
/* совсем узко (телефон) — подпись над полем, а не слева */
@media (max-width: 480px) {
  table.bxphotoform table td, table.bxmusicform td, table.bxlinkform td{display:block;text-align:left!important;width:auto!important}
  table.bxphotoform td.chooseavatar{display:none}
}

/* Фото вверху «О себе:» / символ сообщества (Кирилл, 01.10): по ширине колонки (в узком окне сжимается вместе с ней), не выше 450px */
img.bx-sidephoto { max-width: 100%; height: auto; max-height: 450px; }

/* Личка «окошком» (beoff.js): рамка поверх страницы, синяя плашка как у блоков колонки; свёрнутая — полоской в правом нижнем углу */
.bxpmw { position: fixed; z-index: 950; background: #fff; border: 1px solid #195e9c; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); display: flex; flex-direction: column; }
.bxpmw-bar { flex: none; }
.bxpmw-bar td.menuh { white-space: nowrap; user-select: none; }
.bxpmw-title { cursor: move; overflow: hidden; text-overflow: ellipsis; max-width: 1px; width: 100%; }
.bxpmw-btns a { color: #fff; font-weight: normal; margin-left: 10px; cursor: pointer; }
.bxpmw-btns img { vertical-align: middle; border: 0; }
.bxpmw-frame { flex: 1; min-height: 0; border: 0; width: 100%; display: block; background: #fff; }
.bxpmw-grip { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 55%, #8aa 55%, #8aa 62%, transparent 62%, transparent 72%, #8aa 72%, #8aa 79%, transparent 79%); }
.bxpmw-drag .bxpmw-frame { pointer-events: none; }
.bxpmw-drag, .bxpmw-drag * { user-select: none; }
.bxpmw.bxpmw-min { width: 380px; height: auto; right: 12px; bottom: 0; box-shadow: 0 0 6px rgba(0, 0, 0, .3); }
.bxpmw.bxpmw-min .bxpmw-frame { position: absolute; width: 0; height: 0; visibility: hidden; } /* личка внутри продолжает ждать новые */
.bxpmw.bxpmw-min .bxpmw-grip { display: none; }
/* второй уголок — слева сверху, на синей плашке: светлые полоски (Кирилл, 04.10) */
.bxpmw-grip.bxpmw-grip-tl { right: auto; bottom: auto; left: 0; top: 0; z-index: 2;
  background: linear-gradient(315deg, transparent 55%, rgba(255,255,255,.85) 55%, rgba(255,255,255,.85) 62%, transparent 62%, transparent 72%, rgba(255,255,255,.85) 72%, rgba(255,255,255,.85) 79%, transparent 79%); }
.bxpmw.bxpmw-min .bxpmw-title { cursor: pointer; }
.bxpmw.bxpmw-blink .bxpmw-bar td.menuh { background-color: #d24a3c; }
.bxpmw-new, .bxpmw.bxpmw-blink .bxpmw-label { display: none; }
.bxpmw.bxpmw-blink .bxpmw-new { display: inline; } /* мигает звёздочками, а не ником (Кирилл, 01.10) */
@media (max-width: 700px) {
  .bxpmw:not(.bxpmw-min) { left: 0; top: 0; width: 100%; height: 100%; border: 0; }
  .bxpmw-grip { display: none; }
  .bxpmw.bxpmw-min { width: auto; left: 0; right: 0; }
}

/* Опросы (pages/polls.mjs): форма «Создать свой опрос» — блоки вопросов, варианты в строку, цвет полосок квадратиками */
.bxpq { margin: 10px 0 14px; padding: 8px 10px; border: 1px solid #dddddd; background: #fafafa; font-size: 100%; } /* div в ячейке у нас ужимается до 75% */
#bxpqs, .bxpq-opts, .bxpo { font-size: 100%; }
.bxpq .longinput { margin-top: 3px; }
/* поля опроса / теста — во всю ширину блока (Кирилл, 01.10: «очень узкие, шире не сделать»): вопрос, текст, результат — 100%,
   вариант и «подробнее» делят строку (3 : 2), у теста рядом очки; на узком экране — друг под другом */
#bxpollform, .bxpollview { max-width: 860px; }
/* страница опроса / теста — блок по центру правой части; main.css даёт DIV и P по 75% — «статистика» и «редактировать» мельчали (Кирилл, 02.10) */
.bxpollview { margin: 0 auto; font-size: 100%; }
.bxpollview > p { font-size: 100%; } /* форма и страницы опроса / теста (прохождение, результат, статистика) */ /* на широком экране не раздувается (Кирилл, 01.10) */
#bxpollform table.regtable { width: 100%; }
.bxpq textarea.bxpq-text, .bxpq textarea.bxpq-note, .bxpr textarea.bxpr-title, .bxpr textarea.bxpr-body, #bxpollform input[name=title], #bxpollform input[name=tags] { width: 100%; max-width: none; box-sizing: border-box; }
.bxpo { margin-top: 4px; display: flex; align-items: flex-start; gap: 6px; }
.bxpo textarea.bxpo-text { flex: 3 1 0; min-width: 0; max-width: none; }
.bxpo textarea.bxpo-note { flex: 2 1 0; min-width: 0; max-width: none; }
.bxpo .bxpo-ptsw, .bxpo a.bxpo-del { flex: none; align-self: center; }
/* поля опроса / теста — многострочные, растут по тексту (static/polls.js); тулбар один на форму, переезжает к полю с курсором */
textarea.bxpf { vertical-align: top; resize: vertical; overflow: hidden; }
textarea.bxpf.message { overflow: auto; }
#bxpftb { margin: 4px 0 2px; white-space: normal; }
.bxpo img { vertical-align: middle; }
.bxpq-opts { margin: 4px 0 6px 12px; }
label.bxpoll-color { display: inline-block; margin-right: 6px; cursor: pointer; }
label.bxpoll-color span { display: inline-block; width: 18px; height: 12px; border: 1px solid grey; vertical-align: middle; margin-left: 2px; }
@media (max-width: 600px) { .bxpo { flex-wrap: wrap; } .bxpo textarea.bxpo-text { flex-basis: 100%; } .bxpo .bxpo-ptsw { margin-left: auto; } } /* вариант — строкой целиком, ниже «подробнее» (или очки) и крестик */

/* Тесты (pages/polls.mjs): результаты в форме, выбор результата у варианта, «Ваш результат:» над статистикой */
.bxpr { margin: 8px 0 12px; padding: 8px 10px; border: 1px solid #dddddd; background: #fafafa; font-size: 100%; }
#bxprs { font-size: 100%; }
.bxpr .longinput { margin-top: 3px; }
.bxpo-ptsw { white-space: nowrap; }
input.bxpo-pts, input.bxpr-from, input.bxpr-to { width: 4em; text-align: right; }
.bxpr-range { display: inline-block; margin: 3px 0; }
#bxpscore { margin: 6px 0 8px; }
#bxpscore b.bxpscore-n { font-size: 16px; } /* мин. и макс. сумма очков — крупно (Кирилл, 01.10) */
table.bxtestres { border: 1px solid #dddddd; background: #fafafa; padding: 8px 14px; max-width: 600px; }

/* Кнопка-крестик (Кирилл, 02.10: иконка сама — кнопка, без отдельной кнопки «удалить» рядом): группы пользователей и т. п. */
html button.bxicobtn { border: 0 !important; background: none !important; padding: 0 !important; margin: 0 1px !important; box-shadow: none !important;
  min-width: 0 !important; height: auto !important; line-height: 0; cursor: pointer; vertical-align: middle; }
html button.bxicobtn img { display: inline-block; vertical-align: middle; }

/* Подсказки под полями «ник или логин» (media.js, input[data-userpick]) и список «кого вы имели в виду» (lib/userpick.mjs) */
.bxpick-drop { position: absolute; z-index: 1000; background: #fff; border: 1px solid #7f9db9; max-height: 220px; overflow: auto; padding: 1px 0; }
.bxpick-drop a { display: block; padding: 2px 6px 2px 2px; white-space: nowrap; text-decoration: none; }
.bxpick-drop a:hover, .bxpick-drop a.on { background: #dfe8f6; }
table.bxpick-choices td { padding: 2px 8px 2px 0; }

/* Правая часть страниц настроек (pages/settings.mjs settingsPage / frame) — не шире 860px (Кирилл, 02.10); дизайн — во всю ширину */
.bxset { max-width: 860px; }
.bxset:has(.bxdesign) { max-width: none; }
/* предисловие — форма записи, как в дневнике: во всю ширину, заголовок формы того же размера, что «Добавить новую запись:» в дневнике
   и «Добавить новую тему:» на главной (9px; в настройках он ужимался ещё раз — DIV 75% в DIV, выходило 6.75px; Кирилл, 04.10, чек-лист
   vd-commdiary: «Добавить предисловие: очень мелкий», «форма не по ширине экрана») */
.bxset:has(form[name=topic_form]) { max-width: none; }
.bxset form[name=topic_form] > h2 { font-size: 9px; }

/* выпадашки «Прав» сообщества — одной ширины (Кирилл, 02.10: «как у участников» и «запрещено» были разного размера) */
select.bxmode { width: 150px; }

/* Справка окошком поверх страницы (beoff.js bxHelp; Кирилл, 02.10) */
.bxhelpwin { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; }
.bxhelpbox { background: #fff; width: min(860px, 96vw); max-height: 90vh; display: flex; flex-direction: column; border: 1px solid #7f9db9; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.bxhelpbox .bxhelphead td { white-space: nowrap; }
.bxhelpbox .bxhelphead a { color: #fff; }
.bxhelpbody { overflow: auto; flex: 1; }
/* справка влезает и в окошко, и в узкое окно: текст в таблицах переносится (код — только на телефоне), плеер ужимается; на телефоне
   таблицы translit — друг под другом, смайлы — потоком, отступы в таблицах меньше (Кирилл, 02.10: в окошке текст уезжал вправо) */
.bxhelp td code { overflow-wrap: anywhere; }
.bxhelp table.bx-subs td { white-space: normal; }
.bxhelp .bxslim { width: calc(100% - 17px); max-width: 300px; } /* 17px — стрелка «скачать» в ту же строку */
.bxhelp table.bx-subs td code { white-space: nowrap; }
@media (max-width: 600px) {
  .bxhelp table.bx-subs td code { white-space: normal; }
  table.bxhelp-tr > tbody > tr > td { display: block; }
  table.bxhelp-smiles td { white-space: normal; }
  table.bxhelp-smiles, table.bxhelp-smiles > tbody, table.bxhelp-smiles > tbody > tr { display: block; }
  table.bxhelp-smiles td { display: inline-block; }
  .bxhelp table.bx-subs td { padding: 1px 4px; }
  .bxhelp table.bx-subs td:first-child { padding-left: 0; }
}

/* Группы пользователей по видео 2010 (pages/groups.mjs, раскопки/ref images/video-settings): люди с отступом под названием; «изменить...» и
   «добавить пользователя...» раскрываются на месте (beoff.js bxGrp; без скрипта — ссылки на ?edit= / ?add=) */
.bxgrp { margin: 0 0 12px; font-size: 100%; } /* main.css: DIV{font-size:75%} — вложенные div мельчали бы */
.bxgrp-in { margin: 3px 0 0 14px; line-height: 1.7; font-size: 100%; }
.bxgrp .bxgrp-edit, .bxgrp form.bxgrp-add { display: none; }
.bxgrp.bxgrp-ed .bxgrp-edit { display: inline; }
.bxgrp.bxgrp-ed .bxgrp-view { display: none; }
.bxgrp.bxgrp-ad form.bxgrp-add { display: block; margin: 2px 0 4px !important; }
.bxgrp.bxgrp-ad .bxgrp-addlink { display: none; }
form.bxgrp-rights { margin-top: 6px !important; }
/* игнор-лист по видео 2011: «Удалить написанное» — ровной колонкой справа от ников */
table.bxignore td:first-child { padding-right: 60px; }

/* Окно «Вставка изображения» — как у beon 2012 (static/media.js addImage, раскопки/ref images/video-design/d07z): две колонки «с компьютера / или /
   ссылка», строки файлов «[имя][Добавить файлы]» и «+», значки выравнивания (оранжевый квадрат среди серых строк) и ширины (квадраты растут) */
.bxins.bximg { width: 720px; }
.bximg-h { font-size: 12px; font-weight: bold; color: #555; margin: 0 0 4px; } /* жирный пиксельный есть только у 11–12px */
td.bximg-l > font.gr { display: block; }
table.bximg-top { width: 100%; border-collapse: collapse; }
table.bximg-top td { vertical-align: top; padding: 0; }
td.bximg-l { width: 52%; white-space: nowrap; }
td.bximg-or { width: 1%; font-size: 12px; font-weight: bold; color: #555; padding: 30px 12px 0 !important; white-space: nowrap; }
td.bximg-r input[name=url] { width: calc(100% - 40px); box-sizing: border-box; }
.bximg-rows { margin-top: 3px; display: inline-block; vertical-align: top; }
.bximg-row { white-space: nowrap; margin: 0 0 2px; }
.bximg-row input.bximg-name { width: 165px; }
input.bximg-more { vertical-align: top; margin: 3px 0 0 8px; min-width: 32px; }
.bximg-hr { border-top: 1px solid #ddd; margin: 10px 0; }
table.bximg-opts { width: 100%; border-collapse: collapse; }
table.bximg-opts td { vertical-align: top; padding: 0 10px 0 0; }
.bximg-ch { display: flex; gap: 6px 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 6px; }
.bximg-ch label { text-align: center; cursor: pointer; line-height: 1.3; }
.bximg-ch input[type=radio] { margin: 4px 0 1px; }
/* выравнивание: серые строки текста, квадрат слева / справа / посередине */
.bximg-al { display: block; position: relative; width: 46px; height: 40px; margin: 0 auto;
  background: repeating-linear-gradient(to bottom, #c8c8c8 0, #c8c8c8 1px, transparent 1px, transparent 5px); }
.bximg-al i { position: absolute; top: 12px; width: 16px; height: 16px; background: #f7931e; border: 1px solid #8a4a00; box-shadow: 0 0 0 4px #fff; }
.bximg-al-left i { left: 0; } .bximg-al-right i { right: 0; } .bximg-al-none i { left: 14px; }
.bximg-al-none { background: repeating-linear-gradient(to bottom, #c8c8c8 0, #c8c8c8 1px, transparent 1px, transparent 5px) 0 0 / 100% 10px no-repeat,
  repeating-linear-gradient(to bottom, #c8c8c8 0, #c8c8c8 1px, transparent 1px, transparent 5px) 0 32px / 100% 8px no-repeat; }
.bximg-ch label:hover .bximg-al i, .bximg-ch label:hover .bximg-sz i { background: #e98fc9; }
/* ширина: квадраты растут */
.bximg-sz { display: flex; align-items: flex-end; justify-content: center; height: 34px; }
.bximg-sz i { display: block; background: #f7931e; border: 1px solid #8a4a00; }
.bxins.bximg .bxins-btns { text-align: left; display: flex; gap: 6px; align-items: center; }
.bxins.bximg .bxins-btns font.gr { margin-left: 16px; max-width: 360px; }
@media (max-width: 760px) {
  .bxins.bximg { width: auto; }
  table.bximg-top, table.bximg-top tbody, table.bximg-top tr, table.bximg-top td { display: block; width: auto !important; }
  td.bximg-or { padding: 8px 0 !important; }
  table.bximg-opts td { display: block; padding: 0 0 8px; }
  .bxins.bximg .bxins-btns { flex-wrap: wrap; }
  .bxins.bximg .bxins-btns font.gr { margin-left: 0; }
}

/* «Вставить ссылку на пользователя» — как add_user.cgi beon 2013 (static/media.js userDialog): «логин / или / его имя», друзья и
   участники дискуссии ссылками в строку */
.bxins.bxusr { width: 720px; }
td.bxusr-l, td.bxusr-r { width: 49%; white-space: nowrap; }
td.bxusr-l input, td.bxusr-r input { width: calc(100% - 50px); box-sizing: border-box; }
.bxusr-list { line-height: 1.8; max-height: 180px; overflow: auto; margin-top: 4px; }
.bxusr-list a { margin-right: 8px; white-space: nowrap; }
@media (max-width: 760px) {
  .bxins.bxusr { width: auto; }
  .bxusr table.bximg-top, .bxusr table.bximg-top tbody, .bxusr table.bximg-top tr, .bxusr table.bximg-top td { display: block; width: auto !important; }
}
.bxins.bxusr .bxins-btns { text-align: left; }

/* «Опросы» / «Тесты»: «Последние» слева, «Популярные» (10, по числу прошедших) — справа; на узком — друг под другом (Кирилл, 02.10) */
table.bxpoll-cols { table-layout: fixed; } /* две равные колонки, ширину не тянет длинное название (Кирилл, 02.10) */
td.bxpoll-latest, td.bxpoll-popular { width: 50%; overflow-wrap: anywhere; }
td.bxpoll-popular { padding-left: 20px; }
td.bxpoll-latest > table, td.bxpoll-popular > table { width: 100%; }
@media (max-width: 700px) { table.bxpoll-cols > tbody > tr > td { display: block; width: auto; padding-left: 0; } }
/* страница опроса / теста: заголовок и описание одной ширины, длинные слова рвутся где угодно — край ровный (Кирилл, 02.10) */
table.bxpoll-head { max-width: 100%; }
table.bxpoll-head td { overflow-wrap: anywhere; word-break: break-word; }

/* «Создать свой опрос / тест» — крупнее (Кирилл, 02.10: была ссылка в <p>, main.css давал 75%) */
.bxpoll-create { font-size: 100%; margin: 6px 0 12px; }
/* «Тесты и опросы» в настройках: «редактировать» и крестик — справа, в одну строку */
/* колонки поровну и длинное название переносится, а не распирает таблицу (как bxpoll-cols) */
table.bxmy-cols, table.bxmy-list { table-layout: fixed; }
table.bxmy-list, div.bxmy-none { margin-top: 8px; } /* под «Создать свой …» (Кирилл, 04.10) */
td.bxmy-col { width: 50%; }
table.bxmy-list td { border-bottom: 1px dotted #ddd; overflow-wrap: anywhere; }
td.bxmy-acts { white-space: nowrap; text-align: right; width: 120px; overflow-wrap: normal !important; }
td.bxmy-acts img.flag { margin-right: 2px; }

/* «Тесты | Опросы» — вкладки над списком (как у лички beon 2013: .tabs из main.css), линия под ними во всю ширину */
table.bxkind { width: 100%; border-bottom: 1px solid gray; margin: 0 0 10px; }
table.bxkind td { font-size: 12px; padding: 4px 16px; }
table.bxkind td.lasttab { width: 100%; padding: 0; }

/* «ещё ▸» в «Настройке дизайна» — под ней «Блоки колонки по отдельности» (Кирилл, 02.10) */
div.bxdblkmore { font-size: 12px; margin: 0 0 14px; } /* явно: div в div — 75% от 75%, выходило 6.75px (Кирилл: «милипиздрическая») */
div.bxdblks { display: none; font-size: 100%; }
div.bxdblks.bxdshow { display: block; }

/* карточка пользователя (vcard1, main.css: float и высота 240px с обрезкой) — высота по содержимому, в ряд — inline-block, ряды ровные по верху (Кирилл, 02.10) */
.vcard1 { float: none; display: inline-block; vertical-align: top; height: auto; }
/* «Поиск» и страница интереса: люди слева, сообщества справа (Кирилл, 02.10); на узком экране — одна под другой */
td.bxfound-users { padding-right: 16px; }
td.bxfound-comms { width: 30%; padding-left: 16px; border-left: 1px dotted #cccccc; }
@media screen and (max-width: 640px) {
  table.bxfound, table.bxfound > tbody, table.bxfound > tbody > tr, table.bxfound > tbody > tr > td { display: block; width: auto; }
  td.bxfound-users { padding-right: 0; }
  td.bxfound-comms { padding-left: 0; border-left: 0; margin-top: 12px; }
}

/* страница интереса: «Записи категории …» (выбранные) — отступ до облака остальных (Кирилл, 02.10) */
div.bxint-sel { font-size: 100%; margin: 0 0 12px; }

/* «ещё N ▸» — спрятанное продолжение списка (прежние имена; Кирилл, 02.10) */
span.bxmore-rest { display: none; }
span.bxmore-rest.bxshow { display: inline; }
div.bxmore-rest { display: none; } div.bxmore-rest.bxshow { display: block; } /* целым блоком — «Все приглашения» (pages/invites.mjs) */
/* прежние имена под ником в «Настройке профиля» — переносятся по ширине поля ника (Кирилл, 04.10): блок не раздвигает рамку, а берёт её ширину */
span.bxnickbox { display: inline-block; vertical-align: top; max-width: 100%; }
div.bxoldnames { width: 0; min-width: 100%; margin-top: 3px; font-size: 100%; overflow-wrap: anywhere; }

/* варианты ответа в опросе и тесте: кружок отдельной колонкой, текст переносится справа от него (Кирилл, 02.10) */
table.bxopts td.bxopt-r { vertical-align: top; width: 1%; padding: 0 5px 4px 0; }
table.bxopts td.bxopt-r input { margin: 1px 0 0; }
table.bxopts td.bxopt-t { vertical-align: top; padding: 1px 0 4px; overflow-wrap: anywhere; }
table.bxopts label { cursor: pointer; }

/* узкий экран: варианты теста — меньше отступ слева, тексту больше места (Кирилл, 02.10) */
@media screen and (max-width: 519px) { td.bxtq-opts { padding-left: 8px; } }

/* личка на узком экране (телефон): нижняя часть полосы справа (#arrava, на уровне формы) выдвигает выбор авы поверх поля (Кирилл, 02.10) */
#pm{position:relative}
#arrava{position:absolute;bottom:0;z-index:2;cursor:pointer;border-top:2px solid #ffffff;box-sizing:border-box;background-position:center top}
#arrava:not(.pm_arr_l){background-image:url('/i/a_right.png')}
body.bxpm-narrowleft.bxpm-avopen #pm_form{position:relative}
body.bxpm-narrowleft.bxpm-avopen #pm_form .chooseavatar{display:block!important;visibility:visible!important;position:absolute;top:0;right:0;bottom:0;width:134px;background:#ffffff;border-left:1px solid #b5b5b5;box-shadow:-2px 0 4px rgba(0,0,0,.15);z-index:3}
body.bxpm-narrowleft.bxpm-avopen #pm_form .chooseavatar div{display:block!important;visibility:visible!important;height:100%!important;width:auto;overflow:auto}

/* под записью справа «Прокомментировать» / «N комментариев | Прокомментировать» — одной строкой: у записи перенос разрешён где угодно
   (overflow-wrap:anywhere от сплошных строк), и на телефоне слово рвалось посередине «Прокомменти-ровать» (Кирилл, 02.10); переносятся «Опции» слева */
td.bxpost-cc{white-space:nowrap;overflow-wrap:normal;padding-left:8px}

/* аватары: обрезка при загрузке (static/avacrop.js; Кирилл, 03.10) — кнопки «Загрузить аватар» в слотах спрятаны, загружает окно */
input.bxava-up{display:none}
.bxins.bxcrop{top:50%;transform:translate(-50%,-50%);max-height:calc(100dvh - 16px);overflow:auto}
.bxcrop-wrap{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;align-items:flex-start}
.bxcrop-left{display:flex;flex-direction:column;gap:6px;align-items:center}
.bxcrop-left font.gr{max-width:300px;text-align:center}
canvas.bxcrop-cv{display:block;touch-action:none;cursor:grab;border:1px solid #999999;background:#3a3a3a}
canvas.bxcrop-cv:active{cursor:grabbing}
.bxcrop-zoom{display:flex;align-items:center;gap:4px}
.bxcrop-zoom input[type=range]{width:180px}
.bxcrop-zoom input[type=button]{min-width:26px}
.bxcrop-right{display:flex;flex-direction:column;gap:10px;min-width:150px}
.bxcrop-opts{display:flex;flex-direction:column;gap:6px}
label.bxcrop-opt{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 6px;border:1px solid #dddddd;border-radius:4px}
label.bxcrop-opt:has(input:checked){border-color:#7f9db9;background:#eef4fb}
.bxcrop-ico{display:inline-block;border:2px solid #555555;flex:none}
.bxcrop-ico.sq{width:16px;height:16px}
.bxcrop-ico.tall{width:12px;height:20px}
.bxcrop-pv{text-align:center}
canvas.bxcrop-pvc{border:1px dotted #bbbbbb;background:repeating-conic-gradient(#e6e6e6 0 25%,#ffffff 0 50%) 0 0/10px 10px}
.bxcrop-note{margin-top:6px}

/* записи, комменты, альбом, дуэли на телефоне (≤479px — main.css прячет столбик ав): полоска у правого края поля выдвигает выбор авы
   поверх поля, как в личке (Кирилл, 03.10; lib/avatars.mjs, beoff.js bxAvaStrip) */
td.bxava-strip{display:none}
@media screen and (max-width:479px){
  td.bxava-strip{display:table-cell;width:10px;min-width:10px;padding:0;background:#f0f0f0 url('/i/a_left.png') repeat-y;cursor:pointer}
  table.bxava-open{position:relative}
  table.bxava-open td.bxava-strip{background-image:url('/i/a_right.png')}
  table.bxava-open td.chooseavatar{display:block!important;visibility:visible!important;position:absolute;top:0;right:10px;bottom:0;width:134px;background:#ffffff;border-left:1px solid #b5b5b5;box-shadow:-2px 0 4px rgba(0,0,0,.15);z-index:3}
  table.bxava-open td.chooseavatar div{display:block!important;visibility:visible!important;height:100%!important;width:auto;overflow:auto}
}

/* форма записи в дневнике на телефоне: «Настроение / Музыка / Хочется» и «Читать / Комментировать могут / Премодерация» — одна под другой,
   иначе две колонки распирали форму шире экрана и её правый край (поле, полоска выбора авы, «Читать могут») срезало (03.10) */
@media screen and (max-width:600px){
  table.bxpost-opts,table.bxpost-opts>tbody,table.bxpost-opts>tbody>tr,table.bxpost-opts>tbody>tr>td{display:block}
  table.bxpost-opts>tbody>tr>td{padding-right:0!important}
}

/* телефон: ничего из форм не уходит за правый край (проверка check_site_forms_phone.cjs, 03.10) */
@media screen and (max-width:600px){
  /* предисловие: «Категории:» в столбике с «Читать могут» — поле ужимается, а не распирает форму */
  table.bxpost-opts input[name=tags]{width:calc(100vw - 230px);min-width:110px;box-sizing:border-box}
  /* «Настройка аватар»: слоты — в одну колонку */
  table.bxava-slots>tbody>tr>td{display:block;width:auto!important}
  table.bxava-slots input[type=file]{max-width:100%}
  /* расширенный поиск: «в период с … по …» переносится */
  #excontrols td{white-space:normal}
}

/* «Вставка изображения»: квадратик для картинки из буфера обмена (static/media.js; Кирилл, 03.10) */
.bximg-paste{white-space:normal;word-break:normal;margin-top:8px;min-height:34px;padding:4px 6px;border:1px dashed #9aa9bb;border-radius:3px;background:#fafbfd;color:#666666;font-size:100%;cursor:text;overflow:hidden;max-height:60px}
.bximg-paste:empty::before{content:attr(data-ph);color:#888888;white-space:normal}
.bximg-paste:focus{outline:none;border-color:#7f9db9;background:#ffffff}

/* YouTube недоступен с подключения (в России — без VPN): плашка на месте плеера (static/media.js; Кирилл, 03.10) */
.bxyt-off{display:flex;align-items:center;justify-content:center;text-align:center;width:640px;max-width:100%;aspect-ratio:16/9;background:#f0f0f0;border:1px solid #cccccc;box-sizing:border-box;padding:10px;font-size:100%;vertical-align:top}
.bxyt-off div{font-size:100%}

/* шестерёнка в шапке и её плашка с кружками вместо пяти выпадашек (static/beoff.js bxGear; Кирилл, 04.10) */
/* белая кнопка с рамкой, как блок верхнего меню (.lb в main.css: рамка #EBEBEB, скругление) — на тёмных дизайнах тоже видна (Кирилл, 04.10) */
a.bx-gear{display:inline-block;padding:3px 5px;background:#ffffff;border:1px solid #d9d9d9;border-radius:6px;line-height:0;vertical-align:middle;box-shadow:0 1px 2px rgba(0,0,0,.12)}
a.bx-gear:hover{border-color:#7f9db9;background:#eef4fb}
#bx-gearmenu{position:absolute;z-index:200;padding:6px 8px;font-size:12px;max-width:calc(100vw - 8px);box-sizing:border-box}
#bx-gearmenu table{border-collapse:collapse}
#bx-gearmenu td{padding:3px 4px;font-size:12px;vertical-align:middle}
#bx-gearmenu td.bxg-l{text-align:right;white-space:nowrap;color:#444444}
#bx-gearmenu td.bxg-o label{white-space:nowrap;margin-right:6px;cursor:pointer}
/* «Масштаб» — ползунок (Кирилл, 16.10). Вид — по режиму шрифта, как все контролы: XP — трекбар Luna (желобок и бегунок с синей
   рамкой), сглаженный — обычный ползунок Chrome */
#bx-gearmenu .bxg-zoom{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#bx-gearmenu .bxg-zoom input{width:150px;margin:0;vertical-align:middle;accent-color:#2b6cb0}
#bx-gearmenu .bxg-val{display:inline-block;min-width:36px;font-variant-numeric:tabular-nums}
html.bx-xp #bx-gearmenu .bxg-zoom input{-webkit-appearance:none;appearance:none;height:20px;background:transparent}
html.bx-xp #bx-gearmenu .bxg-zoom input::-webkit-slider-runnable-track{height:4px;background:#f2f1ea;border:1px solid;border-color:#9d9d9d #ffffff #ffffff #9d9d9d;box-shadow:inset 1px 1px 0 #6f6f6f}
html.bx-xp #bx-gearmenu .bxg-zoom input::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:19px;margin-top:-8px;border:1px solid #7f9db9;border-radius:2px;background:linear-gradient(#ffffff,#e3e3db);box-shadow:0 1px 0 #c3c3c3}
html.bx-xp #bx-gearmenu .bxg-zoom input:hover::-webkit-slider-thumb{border-color:#e5a03c}
@media screen and (max-width:480px){ #bx-gearmenu td{display:block;text-align:left!important;padding:1px 4px} #bx-gearmenu td.bxg-o{padding-bottom:5px} }

/* ава у записи и коммента — чуть отступа от текста (Кирилл, 04.10: «буквально капельку больше, хотя бы на пару пикселей»); нет авы — без отступа */
td.bxpost-ava:not(:empty){padding-right:2px} /* + 2px поля самой авы (main.css .avatar) = 4 точки до текста; было 6 — «не то» (Кирилл, 04.10) */
/* и от строки с заголовком / ником до тела записи и коммента (Кирилл, 04.10: «отступ нулевой») */
tr.bxpost-body>td{padding-top:2px} /* от строки заголовка до авы и текста: было 0 («нулевой»), 4 — много (Кирилл, 04.10) */
/* ава и тело записи / коммента начинаются с одной высоты: у авы из main.css margin 2px — сверху его убираем, иначе ава ниже картинки
   или текста на 2 точки (Кирилл, 04.10: «пост и аватарка с одинакового отступа») */
tr.bxpost-body>td.bxpost-ava img.avatar{margin-top:0}

/* кружок статуса у людей в списках лички (lib/pmview.mjs pmState; Кирилл, 04.10) — на месте человечка */
img.bxpmst { margin: 0 3px 0 2px; vertical-align: middle; }

/* «Записи и комментарии на премодерации» (pages/pending.mjs): «к записи …» над ждущим комментом — не ужимать второй раз (DIV 75% в ячейке) */
div.bxpending { font-size: 100%; }

/* анкета, «Мои изображения в альбоме:» — как div.lastphoto у carguru (main.css: плитки слева, отступы 15), до трёх строк (beoff.js bxRows).
   Не обтеканием, а ровными строками (Кирилл, 10.10: «сетка поехала»): у плавающих плиток разной высоты следующая цеплялась за выступ
   соседней — выходила лесенка, и три «строки» съедали три-шесть картинок; теперь строка — по самой высокой, следующая — под ней */
div.bxrows { display: flex; flex-wrap: wrap; align-items: flex-start; }
div.bxrows div.lastphoto { float: none; }
div.bxrows div.lastphoto[hidden] { display: none; }


/* архив выгрузки (lib/html.mjs archiveBar): «Вы находитесь в режиме просмотра» — как пункт меню (.lb td a в main.css), только не ссылка */
.lb td span.bxlb-ro{font-size:85%;color:#666666}

/* широкая админская таблица («Зарегистрированные пользователи», 10.10) — своя прокрутка вбок, а не за край экрана; ширину до края окна
   выставляет beoff.js bxWide (левая колонка бывает разной ширины — «Сайдбар» в шестерёнке) */
div.bxwide { overflow-x: auto; }

/* «Личные сообщения new!» в верхнем меню (lib/html.mjs NEW_MARK) — красным жирным, как «Моя переписка new!» у beon 2010 */
table.lb b.bxnew { color: #cc0000; font-size: 85%; } /* размером как ссылки меню (.lb td a — 85%), не крупнее (Кирилл, 16.10) */
/* «Ссылка скопирована» у «постоянной ссылки» (static/beoff.js bxToast): окошко как меню сайта, пропадает само через 2 с или от щелчка */
div.bxtoast { visibility: visible; z-index: 300; font-size: 12px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); pointer-events: none; }
/* страница «Уведомления» (/notifications/, pages/notifications.mjs; макет 14.10): строка = значок | текст | время, по дням */
.bxnt-wrap { font-size: 13px; white-space: normal; }
.bxnt-top { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; margin: 2px 0 8px; font-size: 12px; }
.bxnt-day { font-weight: bold; font-size: 12px; margin: 14px 0 4px; padding-bottom: 2px; border-bottom: 1px solid #dddddd; }
table.bxnt { border-collapse: collapse; width: 100%; }
table.bxnt td { padding: 4px 6px 4px 0; vertical-align: top; font-size: 13px; }
table.bxnt td.i { width: 18px; text-align: center; padding-right: 8px; }
table.bxnt td.i img { vertical-align: top; margin-top: 1px; }
table.bxnt td.t { width: 1%; white-space: nowrap; text-align: right; color: #888888; font-size: 11px; padding-top: 6px; }
table.bxnt td.x { overflow-wrap: anywhere; }
table.bxnt tr.bxnt-new td.x { font-weight: bold; }
table.bxnt td.x .q { font-weight: normal; font-size: 11px; color: #666666; }
table.bxnt b.bxnew { color: #cc0000; font-size: 85%; }
.bxnt-more { font-size: 12px; }

/* Сглаженный режим на телефоне (с 10.10 там всегда сглаженный — _museum/px.js): поля и кнопки в нём 13 px (как в Chrome) против 11 px
   в XP, и формы, свёрстанные под XP, вылезали за экран (поле записи на 50 знаков, «Выберите файл» в «Смене дизайна», «Найти» в поиске) —
   на узком экране полям и кнопкам тот же кегль, что в XP: вид прежний, раскладка как в XP (проверка — check_site_forms_phone.cjs) */
@media screen and (max-width: 899px) {
  html.bx-smooth input[type=text], html.bx-smooth input[type=password], html.bx-smooth input[type=search], html.bx-smooth input[type=email],
  html.bx-smooth input[type=url], html.bx-smooth input:not([type]), html.bx-smooth select, html.bx-smooth textarea,
  html.bx-smooth input[type=submit], html.bx-smooth input[type=button], html.bx-smooth input[type=reset], html.bx-smooth button,
  html.bx-smooth input[type=file] { font-size: 11px; }
  html.bx-smooth input[type=file]::file-selector-button { font-size: 11px; }
}
/* многострочные поля на телефоне (личка, комменты, записи): «как в Chrome» — моноширинный шрифт (museum.css: Consolas на компьютере),
   а на Android вместо него вылезает Droid Sans Mono (Кирилл, 17.10: «шрифт в поле ввода лички в мобилке ну прям другой какой-то») —
   на телефоне тот же шрифт, что у однострочных полей и текста сайта; на компьютере — как было */
html.bx-smooth.bx-mobile textarea { font-family: Arial, "bx-emoji", sans-serif; }

/* лого портала на узком экране: в beon 2013 (main.css: @media max-width 400px — .logo display:none) оно пропадало; у нас уменьшается
   (Кирилл, 16.10: «начиная с масштаба 110 пропадает лого на главной — надо его уменьшать, но не скрывать совсем»): до 600 точек — 96
   (вариант 6 холста «Шестерёнка и полоска»: меню справа не ужимается), ещё уже — с экраном, не меньше 80. Ячейка лого — по картинке */
@media screen and (max-width: 600px) {
  .headbg .logo { display: inline-block; visibility: visible; }
  .headbg .logo img { width: min(96px, 34vw); height: auto; min-width: 80px; }
  .headbg td:has(> a.logo) { width: calc(min(96px, 34vw) + 16px); }
}

/* шестерёнка — язычок во всю высоту плашки меню справа (Кирилл, 16.10: ПК — вариант 5, телефон — вариант 6): чуть темнее плашки,
   тонкая черта слева, шестерёнка по центру, жмётся вся высота; на телефоне шире — под палец. Темнее — полупрозрачным, чтобы и на
   плашке своего дизайна читался. В приложениях не нужен — там своя шестерёнка (класс bx-inapp — beoff.js по «BeoffApp» в строке браузера) */
.lb td.bx-geartab { width: 22px; padding: 0; position: relative; background: rgba(0, 0, 0, .032); border-left: 1px solid rgba(0, 0, 0, .08); }
.lb td.bx-geartab::before { content: ""; display: inline-block; width: 22px; vertical-align: top; } /* распорка: иначе таблица с колонками в процентах отдаёт ячейке 1 точку */
.lb td.bx-geartab a.bx-gear { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  padding: 0; background: none; border: 0; border-radius: inherit; box-shadow: none; }
.lb td.bx-geartab a.bx-gear:hover { background: rgba(0, 0, 0, .05); }
@media screen and (max-width: 600px) { .lb td.bx-geartab { width: 30px; } .lb td.bx-geartab::before { width: 30px; } }
html.bx-inapp .lb td.bx-geartab { display: none; }
/* строка над шапкой (problem-teaser … jump2site, beon) — пустая, но с прежней высотой: до 16.10 её держала кнопка-шестерёнка
   (16 + поля + рамка = 24), шапка не прилипает к красной полосе стенда и к верху окна (Кирилл, 17.10: «пропал отступ»). Android
   прячет jump2site — там строки нет, как было */
td.jump2site { height: 24px; }

/* плашка дня: куски даты неразрывны (lib/posts.mjs dayBar; Кирилл, 17.10) — не рвать их посреди слова: не влезает рядом с фильтрами
   ленты — кусок опускается ниже, целиком */
.datebg, .datebg font { overflow-wrap: normal; word-break: normal; }

/* эмодзи — набором OpenMoji (Кирилл, 19.10: сначала пиксельный Mona12, потом «про смайлы — берём openmoji тогда»: Mona в 12 точек
   мельче текста и беоновских смайлов, а растянутый мылится; site/static/emoji, CC BY-SA 4.0). px.js оборачивает каждый настоящий смайл
   в bx-e.e с картинкой OpenMoji (svg/; шрифт OpenMoji теряет надписи в значках — 🆕 без NEW, 1️⃣ без цифры): 15 точек (как
   беоновские; в крупном тексте — в высоту букв, .eb ниже), стоит, как беоновский смайл (main.css .smiles — на 2 точки ниже строки). Картинки
   нет — смайл текстом. Шрифт bx-emoji (тот же OpenMoji) — для такого текста и для полей ввода (museum.css); грузится, только когда в
   поле есть смайл (unicode-range). Браузер без цветных шрифтов COLR файл пропустит (tech) — тогда смайлы системные */
@font-face { font-family: "bx-emoji"; src: url(/_site/emoji/OpenMoji-color-glyf_colr_0.woff2) format("woff2") tech(color-COLRv0); font-display: swap;
  unicode-range: U+23, U+2A, U+30-39, U+A9, U+AE, U+200D, U+203C, U+2049, U+20E3, U+2122, U+2139, U+2194-21AA, U+231A-23FF, U+24C2, U+25AA-25FE,
    U+2600-27BF, U+2934-2935, U+2B05-2B55, U+3030, U+303D, U+3297, U+3299, U+FE0F, U+1F000-1FAFF, U+E0020-E007F; }
bx-e.e { font-family: "bx-emoji", sans-serif; font-size: max(15px, 1em); line-height: 1; font-weight: normal; font-style: normal; font-synthesis: none; position: relative; }
/* у OpenMoji рисунок занимает 2/3 квадрата (лицо — 48 из 72, поля по 12): картинка в 1,5 раза больше, лишние поля уходят в отрицательные
   отступы — видимый смайл ровно 15 точек, как беоновский, строку не раздвигает, низ рисунка — на 2 точки ниже строки, как у беоновских */
bx-e.e img.bxem { width: 1.5em; height: 1.5em; margin: -0.25em -0.1em -0.383em; vertical-align: baseline; border: 0; }
/* в крупном тексте (заголовок записи, [H], крупный шрифт — px.js ставит .eb, когда текст крупнее 15 точек) смайл растёт вместе с буквами,
   ровно в высоту шрифта (Кирилл, 19.10: в 15 точек в заголовке «мелкие и улетают под подчёркивание», в 1,25 раза — «раздувается»), и стоит
   низом на строке — над подчёркиванием ссылки */
bx-e.e.eb img.bxem { margin-bottom: -0.25em; }
/* подчёркнутый текст (заголовок-ссылка): браузер под картинкой подчёркивание не рисует (Кирилл, 19.10: «у них нет подчёркивания, когда они
   в заголовке») — рисуем фоном картинки в её прозрачном нижнем поле цветом ссылки, на высоте и толщине подчёркивания букв рядом
   (--bxu — от низа картинки до линии; px.js ставит .eu, если текст вокруг подчёркнут) */
bx-e.e.eu img.bxem { --bxu: 0.293em; --bxt: 1px; background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - var(--bxu)) / 100% var(--bxt); }
/* в крупном тексте смайл — 0,8 кегля, примерно с заглавную букву (Кирилл, 19.10: в высоту кегля — «улетели наверх и всё ещё оч крупные»);
   линия — как у Tahoma: низ на 1/6 кегля ниже строки, толщина 1/12 кегля (замер: заголовок 24px — 2 точки на 3–4-й под строкой) */
bx-e.e.eb { font-size: max(15px, 0.8em); }
bx-e.e.eu.eb img.bxem { --bxu: 0.042em; --bxt: round(0.104em, 1px); }
html.bx-smooth bx-e.e.eu.eb img.bxem { --bxu: calc(0.042em - 1px); } /* сглаженный: картинка стоит на полпикселе — линия выходила на точку выше букв */

/* окошко «Ещё смайлы» (Кирилл, 19.10; static/emoji/picker.js): светлое, как выбор цвета (.bxcp); смайлы OpenMoji по 24 точки,
   значки вкладок — 15×15, как беоновские смайлы; кнопка — в конце ряда смайлов тулбара (emoji-more.png) */
.bxemo { position: absolute; z-index: 1000; width: 352px; max-width: calc(100vw - 8px); box-sizing: border-box; background: #fff; border: 1px solid #b5b5b5;
  box-shadow: 1px 2px 6px rgba(0, 0, 0, .25); font: 11px "bx-tahoma-11", Tahoma, Verdana, sans-serif; color: #000; text-align: left; }
.bxemo-tabs { display: flex; border-bottom: 1px solid #d5d5d5; background: #f3f3f3; }
.bxemo-tab { flex: 1 1 0; display: flex; align-items: center; justify-content: center; height: 24px; text-decoration: none; border-bottom: 2px solid transparent; }
.bxemo-tab img { image-rendering: pixelated; opacity: .55; }
.bxemo-tab.on img, .bxemo-tab:hover img { opacity: 1; }
.bxemo-tab.on { border-bottom-color: #5a8fd0; background: #fff; }
.bxemo-tab:hover { background: #e3ecf8; }
.bxemo bx-e { font-family: "bx-emoji", sans-serif; font-weight: normal; font-style: normal; font-synthesis: none; line-height: 1; }
.bxemo-grid { height: 240px; overflow-y: auto; padding: 0 4px 6px; overscroll-behavior: contain; }
.bxemo-h { padding: 8px 2px 4px; font: bold 12px Tahoma, Verdana, sans-serif; color: #333; }
.bxemo-cells { display: flex; flex-wrap: wrap; }
.bxemo-i { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.bxemo-i:hover { background: #e3ecf8; }
.bxemo-c { font-size: 24px; }
.bxemo-im { width: 32px; height: 32px; margin: -4px; } /* рисунок ~21 точка, как и шрифтом в 24 */
.bxemo-err { padding: 4px 6px; color: #c00; border-top: 1px solid #d5d5d5; }
a.bxemo-btn img { vertical-align: top; }