/* КАРАДЕСК — верхняя строка шапки: город посетителя и два ИИ-менеджера с номерами.
   Разметку вставляет deploy/apply_header_phones.py, город — assets/topbar.js. Цвета и шрифты — из light.css (Onest, JB Mono). */

/* Строка над основной панелью шапки. Страница сдвигается вниз на её высоту, чтобы шапка ничего не закрывала. */
.tb{max-width:1300px;margin:0 auto 6px;height:36px;padding:0 6px 0 14px;display:flex;align-items:center;gap:16px;border-radius:14px;
  background:rgba(11,11,12,.9);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
  color:#d9d9de;font-size:13px;line-height:1;box-shadow:0 12px 30px -20px rgba(0,0,0,.55);overflow:hidden;
  transition:height .25s ease,margin .25s ease,opacity .2s ease}
body:has(.header > .tb){padding-top:42px}
html:has(.header > .tb){scroll-padding-top:130px}

.tb-geo{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.tb-cw{display:inline-flex;align-items:center;gap:6px;flex:none}
.tb-l{color:#8b8b92}
.tb-city{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px 0 9px;border-radius:9px;background:rgba(255,255,255,.08);color:#fff;font-weight:600;font-size:13px;transition:background .2s}
.tb-city:hover,.tb-city[aria-expanded="true"]{background:rgba(255,255,255,.17)}
.tb-city svg{width:10px;height:10px;opacity:.75;flex:none}
.tb-city:focus-visible,.tb-p:focus-visible{outline:2px solid #fff;outline-offset:1px}
.tb-all{color:#8b8b92;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tb-all-s{display:none}

.tb-ph{margin-left:auto;display:flex;align-items:center;gap:2px;flex:none}
.tb-p{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:9px;white-space:nowrap;transition:background .2s}
.tb-p:hover{background:rgba(255,255,255,.1)}
.tb-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.2);flex:none}
.tb-who{color:#a6a6ac}
.tb-who b{color:#fff;font-weight:600}
.tb-sep{color:#55555c}
.tb-num{font-family:"JB Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#fff;font-size:13px;letter-spacing:-.01em}

/* Выбор города — окно под кнопкой (создаёт topbar.js) */
.tb-pop{position:fixed;z-index:70;width:min(320px,calc(100vw - 24px));background:#fff;color:#0b0b0c;border-radius:20px;padding:14px;
  box-shadow:0 0 0 1px rgba(0,0,0,.05),0 30px 80px -30px rgba(0,0,0,.45);font-size:15px;line-height:1.3}
.tb-pop-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 2px 10px}
.tb-pop-h b{font-size:16px;font-weight:650}
.tb-pop-h small{font-size:12.5px;color:#6c6c72}
.tb-pop input{width:100%;height:42px;padding:0 14px;border-radius:12px;border:1px solid rgba(11,11,12,.14);background:#f4f4f2;font-size:15px;outline:none}
.tb-pop input:focus{border-color:#0b0b0c;background:#fff}
.tb-pop ul{margin:8px -4px 0;padding:0 4px;max-height:min(46vh,320px);overflow:auto;overscroll-behavior:contain}
.tb-pop li button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 10px;border-radius:10px;text-align:left;font-size:15px}
.tb-pop li button:hover,.tb-pop li button:focus-visible{background:#f4f4f2;outline:none}
.tb-pop li button[aria-current="true"]{font-weight:650}
.tb-pop li button[aria-current="true"]::after{content:"";width:8px;height:8px;border-radius:50%;background:#12a150}
.tb-pop-f{margin:10px 2px 0;font-size:12.5px;color:#6c6c72}

/* Кнопка «Позвонить» в шапке — только на телефоне, где номера не помещаются в строку */
.tc{display:none;position:relative}
.tc>summary{list-style:none;display:inline-flex;align-items:center;gap:7px;height:46px;padding:0 13px 0 11px;border-radius:15px;background:#12a150;color:#fff;font-weight:600;font-size:14.5px;cursor:pointer;white-space:nowrap;user-select:none}
.tc>summary::-webkit-details-marker{display:none}
.tc>summary svg{width:18px;height:18px;flex:none}
.tc>summary:focus-visible{outline:2px solid #0b0b0c;outline-offset:2px}
.tc-menu{position:absolute;right:0;top:calc(100% + 10px);width:min(300px,calc(100vw - 24px));background:#fff;border-radius:20px;padding:8px;z-index:60;
  box-shadow:0 0 0 1px rgba(0,0,0,.05),0 30px 80px -30px rgba(0,0,0,.45)}
.tc-menu a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px}
.tc-menu a:hover,.tc-menu a:focus-visible{background:#f4f4f2;outline:none}
.tc-menu small{display:block;font-size:13px;color:#6c6c72;line-height:1.3}
.tc-menu b{display:block;font-family:"JB Mono",ui-monospace,monospace;font-weight:400;font-size:17px;color:#0b0b0c;letter-spacing:-.01em;margin-top:2px}
.tc-menu p{margin:4px 12px 8px;font-size:12.5px;color:#6c6c72;line-height:1.4}

/* Ужимаем строку по ширине экрана */
@media (max-width:1180px){.tb-all{display:none}}
@media (max-width:1100px){.header:has(> .tb) ~ .mobile-menu{top:130px}}
@media (max-width:900px){.tb-role{display:none}}
@media (max-width:760px){.tb-l{display:none}}
@media (max-width:680px){
  .tb{height:30px;border-radius:12px;font-size:12.5px;padding:0 12px 0 6px;margin-bottom:6px}
  .tb-city{height:22px;font-size:12.5px}
  .tb-ph{display:none}
  .tb-all{display:block}
  .tb-all-l{display:none}.tb-all-s{display:inline}
  body:has(.header > .tb){padding-top:36px}
  html:has(.header > .tb){scroll-padding-top:124px}
  .header:has(> .tb) ~ .mobile-menu{top:124px}
  /* после начала прокрутки строка с городом уходит, остаётся основная панель с кнопкой «Позвонить» */
  .header.is-scrolled > .tb{height:0;margin-bottom:0;opacity:0;pointer-events:none}
  .header.is-scrolled ~ .mobile-menu{top:88px}
  .tc{display:block}
  .header .bar:has(.tc){gap:12px}
}
@media (max-width:360px){.tc>summary span{display:none}.tc>summary{width:46px;padding:0;justify-content:center}}

/* Прилипающие панели страниц — ниже выросшей шапки */
html:has(.header > .tb) .au-cp-side{top:150px}
html:has(.header > .tb) .af-pnav{top:130px}
html:has(.header > .tb) .af-ptext{top:212px}

@media (prefers-reduced-motion:reduce){.tb{transition:none}}