/* Connected Community — главная: баннер с девизом; новости: «нравится», комментарии, опрос.
   Часть оформления портала. Файлы подключаются в templates/index.html по порядку номеров: поздние правила перебивают ранние. */
/* ===== главная: баннер с девизом и цифрами, подразделения сеткой (вид выбран пользователем 09.10.2026) ===== */
.home-hero{border-radius:20px;margin-bottom:16px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);color:var(--ink);}
.home-hero-in{padding:38px 40px 34px;}
.home-date{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);}
.home-motto{margin:18px 0 30px;font:700 32px/1.28 'Golos Text',sans-serif;letter-spacing:-.01em;max-width:30ch;text-wrap:balance;}
.home-motto-stack{display:grid;margin:18px 0 30px;}   /* девизы по очереди (02.11.2026): все в одной клетке, виден один */
.home-motto-stack>.home-motto{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s;}
.home-motto-stack>.home-motto.on{opacity:1;visibility:visible;transition:opacity .7s ease .15s,visibility 0s;}
.home-motto em{font-style:normal;color:var(--orange);text-decoration:underline transparent;text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color .15s ease;}
.home-motto em[role]:hover,.home-motto em[role]:focus-visible{text-decoration-color:var(--orange);outline:none;cursor:pointer;}   /* только когда слово — ссылка */
.home-kpis{display:flex;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--border);}
.home-kpi{flex:1 1 110px;padding:0 22px;border-left:1px solid var(--border);cursor:pointer;}
.home-kpi:first-child{padding-left:0;border-left:0;}
.home-kpi b{display:block;font:800 38px/1 'Golos Text',sans-serif;font-variant-numeric:tabular-nums;transition:color .15s ease;}
.home-kpi:hover b{color:var(--orange-dark);}
.home-kpi span{display:block;margin-top:6px;font-size:13px;font-weight:600;color:var(--ink-soft);}
html[data-theme="dark"] .home-hero{background:var(--surface);border-color:rgba(255,102,0,.4);}
html[data-theme="dark"] .home-date,html[data-theme="dark"] .home-motto em,html[data-theme="dark"] .home-kpi:hover b{color:var(--orange);}
html[data-theme="dark"] .home-kpi,html[data-theme="dark"] .home-kpis{border-color:rgba(255,255,255,.2);}
/* фирменный знак справа от девиза */
.home-top{display:flex;align-items:center;gap:28px;}
.home-top-text{flex:1;min-width:0;}
.home-logo{width:150px;height:156px;flex:none;margin-right:14px;}
.home-logo path{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;}
.home-logo circle{fill:currentColor;}
.home-logo{color:var(--orange);}                                  /* светлая тема: знак целиком оранжевый */
html[data-theme="dark"] .home-logo{color:#B9BEC4;}                /* тёмная: дом серый, сигнал и точка оранжевые */
html[data-theme="dark"] .home-logo path:nth-of-type(2){stroke:var(--orange);}
html[data-theme="dark"] .home-logo circle{fill:var(--orange);}
@media (max-width:700px){.home-logo{display:none;}}
/* два блока под баннером (20.10.2026): погода в Астане и Алматы, Meeting Room сегодня */
.home-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px;}
.home-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;
  display:flex;flex-direction:column;gap:10px;min-width:0;}
.home-card.clickable{cursor:pointer;transition:border-color .15s ease;}
.home-card.clickable:hover{border-color:var(--orange);}
.home-card-head{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:2px;}
.home-card-head .ico-wrap{color:var(--orange);display:inline-flex;}
.home-card-head .ico-wrap svg{width:18px;height:18px;}
.home-card-empty{font-size:13px;color:var(--ink-soft);padding:6px 0;}
.home-card-src{margin-top:auto;font-size:11px;color:var(--ink-soft);text-align:right;}
.home-card-foot{margin-top:auto;display:flex;justify-content:flex-end;}
.hw-city{display:flex;align-items:center;gap:14px;padding:8px 0;border-top:1px solid var(--border);}
.home-card-head + .hw-city{border-top:0;}
.hw-ico{color:var(--orange);display:inline-flex;flex:none;}
.hw-ico svg{width:34px;height:34px;}
.hw-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.hw-text b{font-size:15px;color:var(--ink);}
.hw-text span{font-size:12.5px;color:var(--ink-soft);}
.hw-temp{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;}
.hw-temp b{font:800 28px/1 'Golos Text',sans-serif;color:var(--orange);font-variant-numeric:tabular-nums;}
.hw-temp span{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.hm-state{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--bg-soft);color:var(--ink);}
.hm-state.busy{background:var(--orange-tint);color:var(--orange);}
.hm-meet{display:flex;gap:12px;align-items:baseline;font-size:13.5px;color:var(--ink);padding:6px 0;border-top:1px solid var(--border);min-width:0;}
.hm-meet b{flex:none;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-weight:600;}
.hm-meet span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hm-meet.now b{color:var(--orange);}
@media (max-width:1100px){.home-duo{grid-template-columns:1fr;}}
@media (max-width:700px){
  .home-hero-in{padding:24px 20px 10px;}
  .home-motto{font-size:23px;margin:14px 0 20px;}
  .home-motto-stack{margin:14px 0 20px;}
  .home-kpis{padding-top:18px;}
  .home-kpi{flex:1 1 40%;padding:0 0 0 14px;margin-bottom:14px;}
  .home-kpi:nth-child(odd){padding-left:0;border-left:0;}
  .home-kpi b{font-size:30px;}
}

/* книга месяца: смена свайпом — прежняя уезжает влево, новая въезжает справа (09.10.2026) */
.widget-book{overflow:hidden;}
.widget-book.book-out .book-by,.widget-book.book-out .book-body{animation:bookOut .26s ease-in forwards;}
.widget-book.book-out-back .book-by,.widget-book.book-out-back .book-body{animation:bookOutBack .26s ease-in forwards;}
.widget-book.book-in .book-by,.widget-book.book-in .book-body{animation:bookIn .42s cubic-bezier(.22,.8,.3,1) backwards;}
.widget-book.book-in-back .book-by,.widget-book.book-in-back .book-body{animation:bookInBack .42s cubic-bezier(.22,.8,.3,1) backwards;}
@keyframes bookOut{to{transform:translateX(-110%);opacity:0;}}
@keyframes bookOutBack{to{transform:translateX(110%);opacity:0;}}
@keyframes bookIn{from{transform:translateX(110%);opacity:0;}}
@keyframes bookInBack{from{transform:translateX(-110%);opacity:0;}}
@media (prefers-reduced-motion:reduce){.widget-book .book-by,.widget-book .book-body{animation:none!important;}}

/* Двойное нажатие по кнопке без текста (смена темы, стрелки, свернуть меню) выделяло ближайшее слово на странице,
   например «Агенты» в сайдбаре (09.10.2026, нашёл пользователь). Шапка, меню и все кнопки-переключатели текст не выделяют;
   поля ввода остаются обычными. Новую кнопку-значок — в этот список. */
.masthead,.nav-tabs,.sidenav,.sidenav-handle,.view-as-bar,button,.btn,.icon-btn,summary,.card-actions,.req-type,.att-table td[onclick],
.subtabs,.subtab,.seg-group,.seg,.radio-pill,[class*="-chip"],[class*="-tabs"],[class$="-tab"],[class*="-tab "],[class*="-arrow"],[class*="-toggle"],[class*="-nav"],
.modal-close,.cal-cell,.plan-area,.switch,.widget-more,img,svg,.lang-switch,.home-kpi,.home-motto em,.widget-title,.book-dots,.toast{user-select:none;-webkit-user-select:none;}
input,textarea,select,[contenteditable="true"]{user-select:text;-webkit-user-select:text;}
body.no-select,body.no-select *{user-select:none!important;-webkit-user-select:none!important;}

/* «Предложения сотрудников» у сотрудника с допуском (12.10.2026): счётчик рядом с заголовком */
.sug-count{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--orange-soft);color:var(--orange-dark);font:800 12px/1.4 'Golos Text',sans-serif;vertical-align:middle;}
html[data-theme="dark"] .sug-count{color:#FFB27A;}

/* ===== новости: «нравится» и комментарии (12.10.2026) ===== */
.news-social{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.news-like,.news-cbtn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface);
  color:var(--ink-soft);font:600 13px/1 'Roboto',sans-serif;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease;}
.news-like svg,.news-cbtn svg{width:17px;height:17px;flex:none;}
.news-like b,.news-cbtn b{font:800 13px/1 'Golos Text',sans-serif;font-variant-numeric:tabular-nums;}
.news-like:hover,.news-cbtn:hover{border-color:var(--orange);color:var(--orange);}
.news-like.on{border-color:var(--orange);background:var(--orange-tint);color:var(--orange);}
.news-like.on svg{fill:var(--orange);}
.news-like:active svg{transform:scale(1.25);}
.news-like svg{transition:transform .15s ease;}
.news-cbtn.on{border-color:var(--orange);color:var(--orange);}
.news-comments{margin-top:12px;}
.news-c{display:flex;gap:10px;padding:9px 0;}
.news-c-ava{width:32px;height:32px;border-radius:50%;flex:none;background:hsl(var(--h) 60% 90%);color:hsl(var(--h) 45% 32%);font:700 11.5px/32px 'Golos Text',sans-serif;text-align:center;}
html[data-theme="dark"] .news-c-ava{background:hsl(var(--h) 30% 26%);color:hsl(var(--h) 60% 82%);}
.news-c-main{min-width:0;flex:1;}
.news-c-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px;}
.news-c-head b{font-weight:700;color:var(--ink);}
.news-c-head span{font-size:12px;color:var(--ink-soft);}
.news-c-del{margin-left:auto;border:0;background:none;padding:0;font-size:12px;color:var(--ink-soft);cursor:pointer;}
.news-c-del:hover{color:var(--orange);}
.news-c-text{margin-top:2px;font-size:14px;line-height:1.45;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;}
.news-c-form{display:flex;align-items:flex-end;gap:8px;margin-top:8px;}
.news-c-form textarea{flex:1;min-width:0;min-height:38px;max-height:160px;resize:none;padding:9px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);
  color:var(--ink);font:400 14px/1.4 'Roboto',sans-serif;}
.news-c-form textarea:focus{outline:none;border-color:var(--orange);}
.news-c-wait{font-size:13px;color:var(--ink-soft);padding:6px 0;}
.news-card .news-social + .news-comments + .card-actions,.news-card .news-comments[hidden] + .card-actions{margin-top:12px;}
@media (max-width:700px){
  .news-c-form{flex-direction:column;align-items:stretch;}
  .news-c-form .btn{align-self:flex-end;}
}

/* ссылки из профиля (12.10.2026): длинное имя в Telegram или Instagram переносится, а не вылезает за карточку */
.person-card .tg-link{max-width:100%;overflow-wrap:anywhere;}
.emp-profile a{overflow-wrap:anywhere;}
.ig-link{display:inline-flex;align-items:center;gap:6px;}
.ig-link svg{width:15px;height:15px;flex:none;color:#C13584;}

/* ===== опрос в новости (12.10.2026) ===== */
.news-poll{margin-top:14px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--bg-soft);}
.poll-q{font:700 15.5px/1.35 'Golos Text',sans-serif;color:var(--ink);overflow-wrap:anywhere;}
.poll-note{margin-top:3px;font-size:12.5px;color:var(--ink-soft);}
.poll-opts-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.poll-o-btn{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:9px 14px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--ink);font:600 14px/1.3 'Roboto',sans-serif;text-align:left;cursor:pointer;overflow:hidden;transition:border-color .15s ease;}
.poll-o-btn:hover:not(:disabled){border-color:var(--orange);}
.poll-o-btn:disabled{cursor:default;}
.poll-o.on .poll-o-btn{border-color:var(--orange);}
.poll-o-fill{position:absolute;left:0;top:0;bottom:0;background:var(--orange-tint);transition:width .35s ease;pointer-events:none;}
.poll-o.on .poll-o-fill{background:var(--orange-soft);}
.poll-o-mark,.poll-o-text,.poll-o-num{position:relative;}
.poll-o-mark{width:18px;height:18px;flex:none;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;background:var(--surface);}
.poll-o-mark.sq{border-radius:5px;}
.poll-o.on .poll-o-mark{border-color:var(--orange);background:var(--orange);color:#fff;}
.poll-o-mark svg{width:12px;height:12px;}
.poll-o-text{flex:1;min-width:0;overflow-wrap:anywhere;}
.poll-o-num{flex:none;font-size:12.5px;color:var(--ink-soft);white-space:nowrap;}
.poll-o-num b{font:800 14px/1 'Golos Text',sans-serif;color:var(--ink);}
.poll-o-who{border:0;background:none;padding:4px 2px 0;font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.poll-o-who:hover{color:var(--orange);}
.poll-o-names{padding:2px 2px 0;font-size:12.5px;line-height:1.45;color:var(--ink-soft);}
.poll-foot{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--ink-soft);}
.poll-admin{display:inline-flex;gap:14px;flex-wrap:wrap;}
.poll-admin .btn.text{padding:0;font-size:12.5px;}
.news-poll.closed .poll-o-btn{opacity:.85;}
/* опрос в форме новости */
.poll-form{margin-top:4px;padding-top:14px;border-top:1px solid var(--border);}
.poll-form > .hf-remote{margin-bottom:12px;}
.poll-opt-rows{display:flex;flex-direction:column;gap:8px;}
.poll-opt-row{display:flex;align-items:center;gap:8px;}
.poll-opt-row input{flex:1;min-width:0;}
.poll-opt-row .icon-btn{flex:none;width:34px;height:34px;padding:0;font-size:18px;line-height:1;}
.poll-multi{align-self:flex-end;padding-bottom:10px;}
@media (max-width:700px){
  .news-poll{padding:14px;}
  .poll-o-btn{padding:9px 11px;gap:8px;}
  .poll-multi{padding-bottom:0;}
}

/* Road Map: «второй человек» подразделения, которому подчиняются отделы (12.10.2026) — отдельной строкой над колонками отделов */
.og-deputy{padding:14px 18px 0;}
.og-deputy .og-row{max-width:340px;}

/* Road Map: длинная должность в две строки делится ровно, а не «…Engineer, System / Administrator» (12.10.2026) */
.og-row .org-pos{text-wrap:balance;}
.og-group-title{text-wrap:balance;}   /* длинное название отдела в две строки делится ровно, без одинокого слова (12.10.2026) */

/* ответ на обращение сотрудника и имя-ссылка в «Ближайших событиях» (12.10.2026) */
.suggestion-reply{margin-top:10px;padding:10px 14px;border-left:3px solid var(--orange);background:var(--orange-tint);border-radius:0 10px 10px 0;}
.suggestion-reply-head{font-size:12px;font-weight:700;color:var(--orange-dark);margin-bottom:3px;}
html[data-theme="dark"] .suggestion-reply-head{color:#FFB27A;}
.suggestion-reply-text{font-size:14px;line-height:1.45;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;}
.suggestion-quote{margin-bottom:14px;padding:10px 14px;border-radius:10px;background:var(--bg-soft);font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto;}
.suggestion-quote .suggestion-meta{margin-bottom:4px;}
.widget-person{color:inherit;text-decoration:none;font-weight:inherit;}
.widget-person:hover{color:var(--orange);text-decoration:underline;text-underline-offset:3px;}

/* тёмная тема (12.10.2026, нашёл пользователь: «задачи смотрятся в белом квадрате»): аватарка в кабинете руководителя */
html[data-theme="dark"] .mgr-hero-ava{background:hsl(var(--h,25) 30% 26%);color:hsl(var(--h,25) 60% 82%);}
/* лента на Vue (14.10.2026): значок из ICONS приходит готовым SVG в обёртке — обёртка не участвует в раскладке */
.ico-wrap{display:contents;}
.vue-view{display:contents;}   /* обёртка раздела на Vue не участвует в раскладке #main */

/* ---- несколько фото в новости, листать (19.10.2026, вопрос HR) — NewsPhotos.vue ---- */
.news-photos{position:relative;overflow:hidden;padding:0;}
.news-photos img{display:block;width:100%;height:auto;}
.news-photos.many img{aspect-ratio:4/3;object-fit:cover;}   /* одно фото — как раньше, по своей высоте; несколько — одной высоты, чтобы не прыгало */
.news-content.has-photo .news-photos img{max-height:320px;object-fit:cover;}   /* одно фото обрезается по центру, как было до карусели */
@media (max-width:760px){.news-content.has-photo .news-photos img{max-height:260px;}}
.news-photos-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;opacity:.9;display:flex;align-items:center;justify-content:center;padding:0 0 3px;}
.news-photos-nav:hover{opacity:1;border-color:var(--orange);color:var(--orange-dark);}
.news-photos-nav.prev{left:8px;}
.news-photos-nav.next{right:8px;}
.news-photos-count{position:absolute;top:8px;right:8px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px;opacity:.9;}
.news-photos-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;}
.news-photos-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--surface);box-shadow:0 0 0 1px var(--border);opacity:.85;cursor:pointer;}
.news-photos-dots button.on{background:var(--orange);opacity:1;}
.news-photo-list{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;}
.news-photo-item{width:120px;display:flex;flex-direction:column;gap:4px;}
.news-photo-item img{width:120px;height:80px;object-fit:cover;border-radius:9px;border:1px solid var(--border);}
.news-photo-tools{display:flex;gap:2px;justify-content:space-between;}
.news-photo-tools .btn.text{padding:2px 6px;font-size:12.5px;}

/* обложка новости без фото (30.10.2026, НОВ-18; вид выбрал Темирлан — вариант 2 «Тихая»): мягкий фон, маленький значок по теме заголовка */
.news-content.has-photo .news-cover{overflow:hidden;aspect-ratio:16/9;border:1px solid #FFD9BD;background:#FFF2E8;color:#3A2312;padding:18px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;}
.news-cover-icon{flex:none;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--orange);display:flex;align-items:center;justify-content:center;}
.news-cover-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.news-cover-title{font-size:23px;font-weight:700;line-height:1.14;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.news-cover-title.small{font-size:19px;}
.news-cover-title.tiny{font-size:15px;-webkit-line-clamp:4;}
html[data-theme="dark"] .news-content.has-photo .news-cover{background:#2A231E;border-color:#43362C;color:#FFE5D1;}
html[data-theme="dark"] .news-cover-icon{background:#3A2E25;}

/* видео в новости (20.10.2026): обложка с кнопкой во всю ширину карточки, по нажатию — плеер */
.news-video{margin:4px 0 14px;border-radius:14px;overflow:hidden;background:var(--bg-soft);aspect-ratio:16/9;}
.news-video video{width:100%;height:100%;display:block;background:#000;}
.news-video-cover{position:relative;display:block;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:var(--bg-soft);}
.news-video-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.news-video-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(29,29,31,.82);
  display:flex;align-items:center;justify-content:center;padding-left:6px;box-shadow:0 8px 30px rgba(0,0,0,.35);transition:transform .15s ease;}
.news-video-play svg{width:38px;height:38px;fill:#fff;}
.news-video-cover:hover .news-video-play{transform:scale(1.06);}
.news-video-cover:focus-visible{outline:3px solid var(--orange);outline-offset:-3px;}
.news-video-dur{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.7);color:#fff;font-size:13px;font-weight:600;padding:4px 8px;border-radius:6px;}
.news-video-pick{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);}
@media (max-width:700px){.news-video-play{width:64px;height:64px;margin:-32px 0 0 -32px;}.news-video-play svg{width:30px;height:30px;}}