/* Прототип ЦПП — дополнения к дизайн-системе «Глубокая вода» */

/* прогресс захода по фазам */
.phases{display:flex;gap:0;align-items:stretch;flex-wrap:wrap;margin-bottom:14px;}
.phases .ph{flex:1;min-width:120px;position:relative;padding:0 6px 0 0;}
.phases .ph .dot{width:12px;height:12px;border-radius:50%;display:block;background:var(--line);margin-bottom:8px;position:relative;z-index:1;}
.phases .ph::before{content:"";position:absolute;left:6px;right:0;top:5px;height:2px;background:var(--line);}
.phases .ph:last-child::before{display:none;}
.phases .ph.done .dot{background:var(--pos);}
.phases .ph.done::before{background:var(--pos);}
.phases .ph.now .dot{background:var(--azure);box-shadow:0 0 0 4px rgba(22,104,176,.18);}
.phases .ph .tx b{display:block;font-size:12.5px;font-weight:640;color:var(--ink);}
.phases .ph .tx small{display:block;font-size:10.5px;color:var(--muted);margin-top:1px;}
.phases .ph.next .tx b{color:var(--muted);font-weight:560;}

/* кто держит эстафету */
.handoff{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:13px;color:var(--ink);}
.handoff .btn{margin-left:auto;}

/* флеш-сообщения */
.flashes{margin-bottom:14px;display:flex;flex-direction:column;gap:8px;}
.flash{display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:10px;font-size:13px;font-weight:560;}
.flash.pos{background:var(--pos-weak);color:var(--pos);}
.flash.neg{background:var(--neg-weak);color:var(--neg);}
.flash.warn{background:var(--warn-weak);color:var(--warn);}

/* модалка через :target */
.overlay{display:none;}
.overlay:target{display:flex;}

/* переключатель роли на стенде */
.rolebar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.rolebar a{font-size:11.5px;font-weight:600;color:var(--slate);background:var(--card);
  border:1px solid var(--line);border-radius:20px;padding:4px 11px;text-decoration:none;}
.rolebar a:hover{border-color:var(--azure);color:var(--azure);}
.rolebar a.on{background:var(--azure);color:#fff;border-color:var(--azure);}

/* демо-бейдж */
.demo-badge{position:fixed;right:14px;bottom:14px;z-index:60;background:var(--warn-weak);color:var(--warn);
  border:1px solid #E8D9A8;border-radius:20px;padding:6px 13px;font-size:11.5px;font-weight:640;}

/* карточки выбора роли */
.rolecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;}
.rolecard{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent,var(--azure));
  border-radius:13px;padding:16px 17px;text-decoration:none;display:block;transition:.12s;}
.rolecard:hover{box-shadow:0 6px 18px rgba(14,44,74,.10);transform:translateY(-1px);}
.rolecard .rn{font-size:15px;font-weight:660;color:var(--ink);margin-bottom:3px;}
.rolecard .ro{font-size:12px;color:var(--muted);}
.rolecard .rl{font-size:11px;color:var(--azure);margin-top:9px;font-weight:600;}
.rolecard.on{background:var(--azure-weak);border-color:var(--azure);}

/* вход */
.login-split{min-height:100vh;display:flex;background:var(--navy);}
.login-pane{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;background:var(--page);}
.login-pane .box{width:400px;max-width:100%;}
.login-hero{flex:1;max-width:520px;background:linear-gradient(160deg,var(--navy) 0%,#0A2138 100%);
  color:#fff;padding:52px 46px;display:flex;flex-direction:column;justify-content:center;}
.login-hero h2{font-size:25px;font-weight:660;line-height:1.25;margin-bottom:12px;}
.login-hero p{font-size:13.5px;color:var(--side-txt);line-height:1.6;margin-bottom:26px;}
.login-hero .acc{display:flex;flex-direction:column;gap:9px;font-size:12.5px;color:var(--side-ink);}
.login-hero .acc code{background:rgba(255,255,255,.10);padding:2px 7px;border-radius:6px;font-size:12px;}
@media(max-width:880px){.login-hero{display:none;}}