/* GuidexLab — кнопки и движение, общие для сайта, кабинета и админки (2026).
   Подключается последним. Все анимации отключаются при prefers-reduced-motion. */

:root{--gx-ease:cubic-bezier(.2,.7,.2,1);--gx-spring:cubic-bezier(.34,1.4,.64,1);--gx-blue:#215def;--gx-blue-hi:#3a74ff}

/* ═══════════ кнопки ═══════════ */
.btn,.icon-button{position:relative;transition:background-color .18s,border-color .18s,box-shadow .22s,transform .2s var(--gx-spring),color .18s}
.btn:not(.plain):not(:disabled):active,.icon-button:not(:disabled):active{transform:scale(.965)}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* вторичные: тонкая рамка, при наведении — акцентная рамка и лёгкий тон */
.btn:not(.primary):not(.plain):not(.brand):not(:disabled):hover,
body[data-site-theme] .public .btn:not(.brand):not(.plain):not(.primary):not(:disabled):hover{
  border-color:color-mix(in srgb,var(--gx-blue) 55%,var(--line));background:color-mix(in srgb,var(--gx-blue) 7%,var(--paper));box-shadow:0 4px 14px -8px rgba(33,93,239,.5)}

/* главные: объём, блик при наведении, мягкая тень цвета бренда */
.btn.primary{overflow:hidden;isolation:isolate;border-color:transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 60%),var(--blue,var(--gx-blue));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px -10px rgba(33,93,239,.85)}
.btn.primary:after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-60%;width:50%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg) translateX(0);opacity:0}
.btn.primary:not(:disabled):hover,
body[data-site-theme] .public .btn.primary:not(:disabled):hover{
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 60%),var(--gx-blue-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 26px -10px rgba(58,116,255,.9);transform:translateY(-1px)}
.btn.primary:not(:disabled):hover:after{animation:gx-sheen .8s var(--gx-ease)}
.btn.primary:not(:disabled):active{transform:translateY(0) scale(.97)}
@keyframes gx-sheen{0%{opacity:0;transform:skewX(-18deg) translateX(0)}20%{opacity:1}100%{opacity:0;transform:skewX(-18deg) translateX(420%)}}

/* стрелка в конце кнопки или ссылки уезжает вперёд */
.btn svg,.text-link svg{transition:transform .25s var(--gx-spring)}
.btn:not(:disabled):hover>svg:last-child:not(:first-child),.text-link:hover>svg:last-child:not(:first-child){transform:translateX(3px)}
.btn:not(:disabled):hover>svg:first-child:not(:last-child){transform:scale(1.08)}

/* иконки-кнопки */
.icon-button:not(:disabled):hover{border-color:color-mix(in srgb,var(--gx-blue) 45%,var(--line))}
body[data-site-theme] .public .icon-button:not(:disabled):hover{box-shadow:none;background:color-mix(in srgb,var(--gx-blue) 8%,transparent)}
#themeBtn svg{animation:gx-turn .45s var(--gx-spring)}
@keyframes gx-turn{from{transform:rotate(-90deg) scale(.6);opacity:0}to{transform:none;opacity:1}}

/* ссылки-стрелки на сайте: вместо свечения — подчёркивание */
body[data-site-theme] .public :is(.text-link,.btn.plain):not(.brand):hover{text-shadow:none}
body[data-site-theme] .public :is(.text-link,.btn.plain):not(.brand):hover svg{filter:none}
.public .text-link>span,.public .btn.plain:not(.brand)>span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--gx-ease)}
.public .text-link:hover>span,.public .btn.plain:not(.brand):hover>span{background-size:100% 1px}

/* единое кольцо фокуса с клавиатуры */
:is(.btn,.icon-button,.text-link,a,button,summary):focus-visible{outline:2px solid var(--gx-blue-hi);outline-offset:3px}

/* ═══════════ статусы ═══════════ */
/* «ждём вас» — точка пульсирует, чтобы взгляд сразу находил кейс */
.status.amber:before{animation:gx-dot 1.8s ease-out infinite}
@keyframes gx-dot{0%{box-shadow:0 0 0 0 currentColor}70%,100%{box-shadow:0 0 0 5px transparent}}
.segmented button{transition:color .18s,border-color .25s var(--gx-ease)}
.segmented button:not(.active):hover{color:var(--ink,inherit)}

/* ═══════════ кабинет и админка: смена экрана ═══════════ */
@keyframes gx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.gx-enter>*{animation:gx-rise .38s var(--gx-ease) both}
.gx-enter>*:nth-child(2){animation-delay:.04s}.gx-enter>*:nth-child(3){animation-delay:.08s}
.gx-enter>*:nth-child(4){animation-delay:.12s}.gx-enter>*:nth-child(n+5){animation-delay:.16s}
.gx-badge,.notif-count,[class*=badge]{transition:transform .2s var(--gx-spring)}

/* ═══════════ сайт ═══════════ */
/* первый экран собирается по очереди */
.public .hero-copy{animation:none}
.public .hero-copy>*{animation:gx-rise .7s var(--gx-ease) both}
.public .hero-copy>*:nth-child(2){animation-delay:.08s}.public .hero-copy>*:nth-child(3){animation-delay:.16s}
.public .hero-copy>*:nth-child(4){animation-delay:.24s}.public .hero-copy>*:nth-child(5){animation-delay:.32s}

/* карточки появляются по одной, когда секция доходит до экрана */
.reveal :is(.service-grid,.pathways,.preparation-list,.question-list,.ad-points)>*{opacity:0;transform:translateY(16px)}
.reveal.revealed :is(.service-grid,.pathways,.preparation-list,.question-list,.ad-points)>*{opacity:1;transform:none;
  transition:opacity .6s var(--gx-ease),transform .6s var(--gx-ease);transition-delay:calc(var(--i,0) * 70ms + .1s)}

/* карточки услуг */
.service-card{transition:border-color .25s,transform .35s var(--gx-ease),box-shadow .35s}
.service-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gx-blue) 45%,var(--line));box-shadow:0 22px 40px -28px rgba(33,93,239,.55)}
.service-visual img{transition:transform .8s var(--gx-ease)}
.service-card:hover .service-visual img{transform:scale(1.05)}

/* пункты меню: подчёркивание выезжает слева */
.public-header nav a{text-decoration:none!important;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .3s var(--gx-ease),color .18s}
.public-header nav a:hover,.public-header nav a:focus-visible{background-size:100% 1px}

/* шапка прилипает и сжимается при прокрутке (на широком экране) */
@media(min-width:761px){
  .public-header{position:sticky;top:0;z-index:60;transition:height .25s var(--gx-ease),background-color .25s,box-shadow .25s}
  /* фон на всю ширину — отдельным слоем, без clip-path: иначе обрезалось меню языков */
  .public{overflow-x:clip}
  .public-header:before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .25s;
    background:rgba(20,24,29,.9);box-shadow:0 10px 30px -20px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
  .public-header.is-stuck:before{opacity:1}
  body[data-site-theme=light] .public-header:before{background:rgba(248,250,252,.9);box-shadow:0 10px 30px -22px rgba(23,35,46,.35)}
  .public-section{scroll-margin-top:84px}
}
@media(min-width:1191px){.public-header.is-stuck{height:68px}}

/* FAQ: ответ раскрывается мягко */
.question-list summary svg{transition:transform .3s var(--gx-spring)}

@media(prefers-reduced-motion:reduce){
  .btn,.icon-button,.service-card,.service-visual img,.public-header,.public-header nav a{transition:none}
  .btn.primary:after,#themeBtn svg,.status.amber:before,.gx-enter>*,.public .hero-copy>*{animation:none}
  .reveal :is(.service-grid,.pathways,.preparation-list,.question-list,.ad-points)>*{opacity:1;transform:none}
  .service-card:hover,.btn.primary:not(:disabled):hover{transform:none}
}

/* ── тёмная тема: текстовые ссылки светлее (вход, регистрация, кабинет, сайт) ── */
body[data-site-theme=dark] :is(.text-link,.auth-footer a),.workspace[data-theme=dark] .text-link,
body[data-site-theme=dark] .public :is(.pathway,.estimate-result,.preparation-bottom) .text-link{color:#a9c4ff}
body[data-site-theme=dark] :is(.text-link,.auth-footer a):hover,.workspace[data-theme=dark] .text-link:hover{color:#cddcff}

/* ═══════════ типографика 2026: заголовки Manrope, текст Inter, без мелкого серого ═══════════ */
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,.brand-name,.page-heading h1,.case-top h1,.focus-main h2,.queue-detail h2,.dialog-head h2,.auth-card h1,.gx-plan h2,.final-card h2{
  font-family:Manrope,Inter,sans-serif;letter-spacing:-.02em}
.hero h1{letter-spacing:-.035em}
.section-heading h2{letter-spacing:-.03em;font-weight:750}

/* сайт: основной текст крупнее */
.public .section-heading p{font-size:16px;line-height:1.6}
.public .hero-copy>p{font-size:18px;line-height:1.6}
.public .process-step p,.public .pathway p,.public .preparation-item p{font-size:15px;line-height:1.6}
.public .service-body>p{font-size:16px}
.public .svc-incl li{font-size:15px}
.public .question-list details>p{font-size:16px}
.public .estimate-result .estimate-note,.public #estimate-breakdown>span{font-size:14px}
.public .estimate-hint,.public .hero-proof{font-size:13px}
.public .public-header nav{font-size:15px}
.public .footer-note,.public .public-footer p{font-size:14px}

/* кабинет и админка: подписи от 12 до 15 px */
.workspace .page-heading p,.workspace .action-band p,.workspace .queue-detail>p,.workspace .detail-task p,.workspace .appointment p,.workspace .event p{font-size:15px;line-height:1.55}
.workspace .focus-intro,.workspace .step,.workspace .segmented button,.workspace .queue-metric span{font-size:14px}
.workspace .focus-footer,.workspace .breadcrumb,.workspace .case-row .mono,.workspace .deadline,.workspace .detail-label,.workspace .plan-data span{font-size:13px}
.workspace .queue-table td{font-size:14px}
.workspace .queue-table td small,.workspace .queue-table .mono,.workspace .event time,.workspace .queue-table th,.workspace .plan-caption{font-size:12.5px}
.workspace .case-row small{font-size:13px}
.workspace .sidebar .eyebrow{font-size:10.5px;letter-spacing:.02em;white-space:nowrap}
.workspace .status{font-size:12.5px}
.form-field{font-size:14px}
.form-note,.form-steps{font-size:13px}

/* вспомогательный серый чуть светлее — лучше читается */
.workspace[data-theme=dark]{--muted:#aeb8c1}
body[data-site-theme=dark] .public{--muted:#b7c0c9}

/* ═══════════ кнопка языка: «🌐 RU ▾» и список ═══════════ */
.lang-menu{position:relative;flex-shrink:0}
.lang-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:650;letter-spacing:.04em;cursor:pointer}
.lang-btn svg{width:17px;height:17px;opacity:.85}
.lang-btn .lang-chev{width:14px;height:14px;transition:transform .2s var(--gx-ease)}
.lang-menu.open .lang-chev{transform:rotate(180deg)}
.lang-btn:hover{border-color:color-mix(in srgb,var(--gx-blue) 45%,var(--line))}
.lang-menu .lang-list{position:absolute;right:0;top:calc(100% + 8px);z-index:90;display:none!important;flex-direction:column;gap:2px;min-width:176px;height:auto;padding:6px;overflow:visible;
  border:1px solid var(--line);border-radius:12px;background:var(--paper,#1c2229);box-shadow:0 20px 50px -16px rgba(0,0,0,.55)}
.lang-menu.open .lang-list{display:flex!important;animation:gx-rise .18s var(--gx-ease)}
.lang-menu .lang-list button{display:flex;align-items:center;justify-content:flex-start;width:100%;height:40px;padding:0 12px;border:0!important;border-radius:8px;background:none;color:inherit;opacity:1;text-align:left;font-size:14px;font-weight:550;letter-spacing:0}
.lang-menu .lang-list button:hover{background:color-mix(in srgb,var(--gx-blue) 9%,transparent)}
.lang-menu .lang-list button.on{background:color-mix(in srgb,var(--gx-blue) 18%,transparent);color:inherit}
@media(max-width:760px){.public-header .lang-menu{display:none}}

/* светлая тема: пункт меню при наведении и нажатии синий, а не белый */
body[data-site-theme=light] .public-header nav a:hover,
body[data-site-theme=light] .public-header nav a:focus-visible,
body[data-site-theme=light] .public-header nav a:active{color:#215def}

/* Service cards as compact technical specifications, without illustrative renders. */
.public .service-card{position:relative;border-radius:12px;background:var(--paper);box-shadow:none}
.public .service-card:first-child{border-color:color-mix(in srgb,var(--blue) 43%,var(--line))}
.public .service-card:first-child::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--blue)}
.public .service-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 55%,var(--line));box-shadow:0 16px 30px -28px rgba(33,93,239,.7)}
.public .service-body{padding:24px 24px 22px}
.service-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:26px}
.service-index{font:650 11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;color:#82a6ff;white-space:nowrap}
.service-flow{display:inline-block;max-width:100%;padding:6px 9px;border:1px solid transparent;border-radius:5px;font-size:11px;font-weight:720;line-height:1.3;letter-spacing:.025em;text-align:right}
.service-flow--full{color:#b9ccff;background:rgba(73,119,239,.13);border-color:rgba(115,151,243,.25)}
.service-flow--print{color:#9cdec7;background:rgba(42,153,117,.12);border-color:rgba(91,189,157,.22)}
.public .service-body .svc-name{font-size:23px;font-weight:720;line-height:1.24;margin-bottom:12px}
.public .service-body>p{font-size:15px;line-height:1.55;opacity:1;margin-bottom:0;max-width:37ch}
.public .svc-incl{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.public .svc-incl li{font-size:13px;font-weight:550}
.public .service-footer{padding:16px 24px 20px}
.public .service-price strong{font-size:24px;font-weight:680;font-variant-numeric:tabular-nums}
.public .service-footer .btn{min-height:44px;padding:10px 14px;font-size:13px}
.public .service-card:first-child .service-footer .btn{background:var(--blue);border-color:var(--blue);color:#fff}
.public .service-card:first-child .service-footer .btn:hover{background:#2d69f6}
body[data-site-theme=light] .service-index{color:#215def}
body[data-site-theme=light] .service-flow--full{color:#1d4bb9;background:#edf2ff;border-color:#c9d8fa}
body[data-site-theme=light] .service-flow--print{color:#136c51;background:#eaf6f1;border-color:#b9dfd0}
@media(max-width:620px){
  .public .service-body{padding:20px 18px 18px}
  .service-topline{margin-bottom:18px}
  .public .service-body .svc-name{font-size:21px;margin-bottom:9px}
  .public .service-body>p{font-size:14px}
  .public .svc-incl{margin-top:18px;padding-top:13px}
  .public .service-footer{padding:14px 18px 17px}
  .public .service-footer .btn{padding:9px 11px;font-size:12px}
}
@media(max-width:360px){
  .service-topline{align-items:flex-start;flex-direction:column;gap:10px}
  .service-flow{text-align:left}
  .public .service-footer{align-items:stretch;flex-direction:column;gap:12px}
  .public .service-footer .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.public .service-card:hover{transform:none}}