/* Блок «Связаться с Диспетчером»: посадочный талон D (10 из 10); ссылка только на полосе «Связаться», все эффекты от наведения на неё без отрыва корешка; «ДИСПЕТЧЕР» мигает при наведении на «Связаться». Подключать после site.css и ticket-g.css */
#vn .cb .ct{--ctN:10px;display:grid;gap:0;grid-template-columns:minmax(0,1fr) clamp(180px,14.6vw,210px);margin-top:44px;color:#050B1C;cursor:default}
#vn .cb .ct-m{position:relative;display:flex;flex-direction:column;min-width:0;background:#FFFFFF;border-bottom:12px solid #16264F;border-right:2px dashed #34508F;
 -webkit-mask:radial-gradient(circle var(--ctN) at 100% 0,transparent 9.5px,#000 10px) top/100% 51% no-repeat,radial-gradient(circle var(--ctN) at 100% 100%,transparent 9.5px,#000 10px) bottom/100% 51% no-repeat;
 mask:radial-gradient(circle var(--ctN) at 100% 0,transparent 9.5px,#000 10px) top/100% 51% no-repeat,radial-gradient(circle var(--ctN) at 100% 100%,transparent 9.5px,#000 10px) bottom/100% 51% no-repeat}
#vn .cb .ct-h{display:flex;justify-content:space-between;gap:16px;padding:15px 28px;background:#16264F;color:#FFFFFF;font:500 10.5px/1.2 var(--fm);letter-spacing:.14em;text-transform:uppercase}
#vn .cb .ct-h b{font-weight:500;color:#FFB23F}
#vn .cb .ct-r{display:flex;align-items:center;gap:18px;padding:0 28px;margin:26px 0 24px}
#vn .cb .ct-r b{font:800 clamp(28px,2.9vw,42px)/1 var(--fd);letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
#vn .cb .ct-r small{display:block;margin-bottom:8px;font:500 10px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:#34508F}
#vn .cb .ct-ln{flex:1;min-width:40px;height:1px;position:relative;align-self:flex-end;margin-bottom:.6em;background:repeating-linear-gradient(90deg,#34508F 0 6px,transparent 6px 12px)}
#vn .cb .ct-pl{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;padding:2px;background:#FFFFFF;color:#34508F}
#vn .cb .ct-pl svg{display:block;width:100%;height:100%}
#vn .cb .ct-g{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;column-gap:18px;row-gap:14px;padding:0 28px 24px;margin-top:auto;font:500 10px/1.3 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:#34508F}
#vn .cb .ct-g b{display:block;margin-top:6px;font:500 14px/1.2 var(--fm);letter-spacing:.04em;color:#050B1C;text-transform:none;white-space:nowrap}
#vn .cb .ct-s{position:relative;display:flex;flex-direction:column;gap:14px;padding:20px 18px 18px;background:#FFB23F;color:#050B1C;
 -webkit-mask:radial-gradient(circle var(--ctN) at 0 0,transparent 9.5px,#000 10px) top/100% 51% no-repeat,radial-gradient(circle var(--ctN) at 0 100%,transparent 9.5px,#000 10px) bottom/100% 51% no-repeat;
 mask:radial-gradient(circle var(--ctN) at 0 0,transparent 9.5px,#000 10px) top/100% 51% no-repeat,radial-gradient(circle var(--ctN) at 0 100%,transparent 9.5px,#000 10px) bottom/100% 51% no-repeat}
#vn .cb .ct-sl{font:500 10px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase}
#vn .cb .ct-st{display:block;margin-top:6px;font:800 18px/1.05 var(--fd);text-transform:uppercase}
#vn .cb .ct-bc{position:relative;display:block;height:46px;margin-top:auto;overflow:hidden;background:repeating-linear-gradient(90deg,#050B1C 0 2px,transparent 2px 4px,#050B1C 4px 5px,transparent 5px 9px,#050B1C 9px 12px,transparent 12px 14px)}
#vn .cb .ct-go{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;background:#050B1C;color:#FFB23F;font:800 13px/1 var(--fd);letter-spacing:.02em;text-transform:uppercase}
#vn .cb .ct-go svg{width:18px;height:18px;flex:none}
#vn .cb .ct-go{text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#vn .cb .ct-go:focus{outline:0}
#vn .cb .ct-go:focus-visible{outline:2px solid #050B1C;outline-offset:3px}
@media(max-width:960px){
 #vn .cb .ct{grid-template-columns:1fr}
 #vn .cb .ct-m{border-right:0;border-bottom:2px dashed #34508F;
  -webkit-mask:radial-gradient(circle var(--ctN) at 0 100%,transparent 9.5px,#000 10px) left/51% 100% no-repeat,radial-gradient(circle var(--ctN) at 100% 100%,transparent 9.5px,#000 10px) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--ctN) at 0 100%,transparent 9.5px,#000 10px) left/51% 100% no-repeat,radial-gradient(circle var(--ctN) at 100% 100%,transparent 9.5px,#000 10px) right/51% 100% no-repeat}
 #vn .cb .ct-s{display:grid;grid-template-columns:1fr auto;align-items:end;
  -webkit-mask:radial-gradient(circle var(--ctN) at 0 0,transparent 9.5px,#000 10px) left/51% 100% no-repeat,radial-gradient(circle var(--ctN) at 100% 0,transparent 9.5px,#000 10px) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--ctN) at 0 0,transparent 9.5px,#000 10px) left/51% 100% no-repeat,radial-gradient(circle var(--ctN) at 100% 0,transparent 9.5px,#000 10px) right/51% 100% no-repeat}
 #vn .cb .ct-bc{width:96px;height:40px;margin:0;grid-row:1}
 #vn .cb .ct-go{grid-column:1/-1}
}
@media(max-width:600px){
 #vn .cb .ct{margin-top:32px}
 #vn .cb .ct-h{padding:12px 18px;font-size:9.5px;letter-spacing:.1em}
 #vn .cb .ct-r{padding:0 18px;gap:12px;margin:20px 0 18px}
 #vn .cb .ct-r b{font-size:clamp(20px,6.4vw,26px)}
 #vn .cb .ct-pl{width:24px;height:24px;margin:-12px 0 0 -12px}
 #vn .cb .ct-g{grid-template-columns:repeat(2,auto);justify-content:start;column-gap:28px;padding:0 18px 20px}
 #vn .cb .ct-s{padding:18px}
}
#vn .cb .ct-pl{transition:left .9s cubic-bezier(.3,.7,.2,1)}
#vn .cb .ct.in .ct-pl{animation:ctFly 1.6s cubic-bezier(.3,.7,.2,1) .35s both}
#vn .cb .ct:has(.ct-go:hover) .ct-pl,#vn .cb .ct:has(.ct-go:focus-visible) .ct-pl{left:calc(100% - 14px)}
#vn .cb .ct:has(.ct-go:hover) .ct-ln,#vn .cb .ct:has(.ct-go:focus-visible) .ct-ln{animation:ctDash .5s linear infinite}
#vn .cb .ct-go{transition:background-color .3s,color .3s}
#vn .cb .ct-go svg{transition:transform .3s}
#vn .cb .ct:has(.ct-go:hover) .ct-go,#vn .cb .ct:has(.ct-go:focus-visible) .ct-go{background:#16264F;color:#FFFFFF}
#vn .cb .ct:has(.ct-go:hover) .ct-go svg,#vn .cb .ct:has(.ct-go:focus-visible) .ct-go svg{transform:translateX(5px)}
#vn .cb .ct-now:before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;vertical-align:1px;background:#FFB23F;animation:ctBlink 1.4s steps(2,jump-none) infinite}
@keyframes ctFly{from{translate:-120px 0;opacity:0}to{translate:0 0;opacity:1}}
@keyframes ctDash{to{background-position:12px 0}}
@keyframes ctBlink{0%{opacity:1}100%{opacity:0}}
@media(max-width:960px){
}
@media(prefers-reduced-motion:reduce){
 #vn .cb .ct *,#vn .cb .ct *:before,#vn .cb .ct *:after{animation:none!important;transition:none!important}
 #vn .cb .ct:has(.ct-go:hover) .ct-pl,#vn .cb .ct:has(.ct-go:focus-visible) .ct-pl{left:50%}
}
/* flight trail: solid part of the route already flown, grows with the plane */
#vn .cb .ct-ln:before{content:"";position:absolute;left:0;top:-.5px;width:50%;height:2px;background:#16264F;transition:width .9s cubic-bezier(.3,.7,.2,1)}
#vn .cb .ct.in .ct-ln:before{animation:ctTrail 1.6s cubic-bezier(.3,.7,.2,1) .35s both}
#vn .cb .ct:has(.ct-go:hover) .ct-ln:before,#vn .cb .ct:has(.ct-go:focus-visible) .ct-ln:before{width:calc(100% - 14px)}
@keyframes ctTrail{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#vn .cb .ct:has(.ct-go:hover) .ct-ln:before,#vn .cb .ct:has(.ct-go:focus-visible) .ct-ln:before{width:50%}}
/* destination «ДИСПЕТЧЕР» blinks like a departures board, phase-synced with the header Telegram beacon by hdr.js, while the pointer is on the «Связаться» bar (or it has keyboard focus); the ticket itself is not a link, only the bar is */
@keyframes ctBoard{0%{color:#FFB23F}50%{color:#050B1C}100%{color:#FFB23F}}
@media(hover:hover) and (pointer:fine){#vn .cb .ct:has(.ct-go:hover) .ct-r>span:last-of-type b{animation:ctBoard .9s steps(1,end) infinite}}
#vn .cb .ct:has(.ct-go:focus-visible) .ct-r>span:last-of-type b{animation:ctBoard .9s steps(1,end) infinite}
@media(prefers-reduced-motion:reduce){#vn .cb .ct .ct-r>span:last-of-type b{animation:none!important}}