/* «Вместе» — coach (fix42): интерактивное обучение поверх настоящего интерфейса (static/js/coach.js) */
.coach{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:2147482000;pointer-events:none;font-family:Onest,system-ui,sans-serif;-webkit-tap-highlight-color:transparent;contain:layout style}
.coach.rot{width:100vh;height:100vw;transform-origin:top left;transform:rotate(90deg) translateY(-100%)}
.coach *{box-sizing:border-box}
.coach.paused{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
/* dim with real holes: an SVG mask cuts them out; taps inside a hole reach the app underneath */
.co-dim{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;transition:opacity .35s;opacity:0;overflow:visible}
.co-shade{fill:rgba(22,16,26,.52);transition:fill .35s}
.coach.on .co-dim{opacity:1}
.coach.free .co-shade{fill:rgba(22,16,26,.16)}
.co-ring{position:absolute;left:0;top:0;border-radius:18px;pointer-events:none;box-shadow:0 0 0 2px rgba(255,170,80,.95),0 0 22px 4px rgba(255,120,60,.45);transition:opacity .25s;opacity:0}
.co-ring::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid rgba(255,190,110,.9);animation:coPulse 1.7s ease-out infinite}
.co-ring.on{opacity:1}
.co-ring.ok{box-shadow:0 0 0 2.5px #2fcf7d,0 0 24px 6px rgba(47,207,125,.5)}
.co-ring.ok::after{border-color:rgba(47,207,125,.9)}
@keyframes coPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.12);opacity:0}}

/* mascot: the same hand on every device, origin = fingertip */
.co-m{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;will-change:transform;transition:opacity .25s}
.co-m.away{opacity:.28}
.co-m.hide{opacity:0}
.co-press{position:absolute;left:0;top:0;transform-origin:0 0}
.co-hand{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 8px 10px rgba(40,20,10,.38))}
.co-face{position:absolute;pointer-events:none}
.co-face svg{display:block;width:100%;height:100%;overflow:visible}
/* «×2» by the finger while it shows a double tap / double click */
.co-x2{position:absolute;left:24px;top:-30px;transform-origin:0 100%;font:800 17px/1 Onest,sans-serif;color:#ff5a3a;text-shadow:0 1px 0 #fff,0 0 5px #fff,0 0 2px #fff;opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap}
.co-x2.on{opacity:1}

.co-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.co-rip{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2.5px solid rgba(255,200,120,.95);box-shadow:0 0 14px rgba(255,150,70,.55);animation:coRip .6s ease-out forwards}
.co-rip.alt{border-color:rgba(255,120,70,.95);width:30px;height:30px;margin:-15px 0 0 -15px}
@keyframes coRip{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.45);opacity:0}}
.co-dot{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 0 3px rgba(255,150,70,.7),0 4px 12px rgba(0,0,0,.25)}
.co-holdring{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px}
.co-holdring circle{fill:none;stroke:#ff8a3d;stroke-width:4;stroke-linecap:round;stroke-dasharray:176;stroke-dashoffset:176;transform:rotate(-90deg);transform-origin:50% 50%}
.co-ghost{position:absolute;left:0;top:0;width:48px;height:48px;margin:-24px 0 0 -24px;opacity:.92;filter:drop-shadow(0 8px 10px rgba(0,0,0,.3));pointer-events:none}
.co-ok{position:absolute;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:linear-gradient(135deg,#5fe0a0,#1fae6a);box-shadow:0 0 0 4px rgba(255,255,255,.9),0 8px 24px rgba(31,174,106,.55);display:grid;place-items:center;animation:coPop .5s cubic-bezier(.2,1.6,.4,1) both}
.co-ok svg{width:30px;height:30px}
.co-ok path{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:coDraw .35s .18s ease-out forwards}
.co-ok.small{width:36px;height:36px;margin:-18px 0 0 -18px}
.co-ok.small svg{width:20px;height:20px}
.co-spark{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:#ffcf4a}
@keyframes coPop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes coDraw{to{stroke-dashoffset:0}}

/* card */
.co-card{position:absolute;left:0;top:0;width:340px;max-width:calc(100% - 24px);padding:14px 14px 12px 16px;border-radius:22px;background:#fffdfb;color:#1f1a22;box-shadow:0 18px 50px rgba(30,12,20,.32),0 0 0 1px rgba(0,0,0,.04);pointer-events:auto;transition:transform .42s cubic-bezier(.2,.9,.3,1.1),opacity .3s;opacity:0}
.coach.on .co-card{opacity:1}
.co-card.shake{animation:coShake .42s}
@keyframes coShake{20%{translate:-7px 0}45%{translate:6px 0}70%{translate:-3px 0}100%{translate:0 0}}
.co-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.co-dots{display:flex;gap:4px;flex:1}
.co-dots i{width:16px;height:4px;border-radius:3px;background:#eadfd8}
.co-dots i.done{background:#2fcf7d}
.co-dots i.cur{background:linear-gradient(90deg,#ff8a3d,#ff3d6e)}
.co-x{width:28px;height:28px;margin:-4px -4px 0 0;border:0;border-radius:50%;background:#f3ece7;color:#8a7f86;display:grid;place-items:center;cursor:pointer}
.co-x svg{width:14px;height:14px}
.co-title{display:flex;align-items:center;gap:8px;margin:0;font-size:18px;line-height:1.25;font-weight:800;letter-spacing:-.3px}
.co-title img{width:30px;height:30px;vertical-align:middle;margin:-6px 0 -6px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.co-title .co-k{margin:0 1px}
.co-sub{margin:4px 0 0;font-size:14px;line-height:1.35;color:#857a82;min-height:19px}
.co-sub.hint{color:#e0532f;font-weight:600}
.co-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.co-row button{height:36px;padding:0 13px;border:0;border-radius:12px;font:600 14px Onest,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.co-again{background:#f3ece7;color:#3a3138}
.co-again svg{width:16px;height:16px}
.co-skip{margin-left:auto;background:none;color:#9b8f97}
.co-go{background:linear-gradient(100deg,#ff8a3d,#ff3d6e);color:#fff;box-shadow:0 8px 20px rgba(255,64,64,.28)}
.co-go.wide{flex:1;justify-content:center;height:42px;font-size:15px}
.co-card.okay .co-title{color:#16a35f}
.co-card.okay .co-title::before{content:"";width:26px;height:26px;border-radius:50%;flex:0 0 auto;background:#2fcf7d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.co-card.okay .co-row,.co-card.okay .co-sub{display:none}
.co-k{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:9px;background:#fff;box-shadow:inset 0 -3px 0 #e2d8d2,0 0 0 1.5px #d9cdc6;font:800 14px/1 Onest,sans-serif;color:#3a3138;vertical-align:middle;transition:transform .08s,box-shadow .08s}
.co-k.down{transform:translateY(2px);box-shadow:inset 0 -1px 0 #e2d8d2,0 0 0 1.5px #ff8a3d;color:#ff5a3a}
.co-keys{display:grid;grid-template-columns:auto 1fr;gap:7px 10px;align-items:center;margin:10px 0 2px;font-size:13.5px;color:#5d535a}
.co-keys .co-k{min-width:26px;height:26px;font-size:12.5px;padding:0 6px;margin-right:3px}
.co-sum{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.co-sum span{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:10px;background:#eefaf3;color:#1d7f4e;font-size:12.5px;font-weight:700}
.co-sum span.no{background:#f5f0ed;color:#9b8f97}
/* phone: the card is a sheet at the bottom/top edge */
.coach.dev-phone .co-card{width:auto;max-width:none}
@media (prefers-reduced-motion:reduce){.co-ring::after,.co-rip{animation:none}}
/* fullscreen video: a compact card, the swipe needs the room */
.co-card.compact{width:300px;padding:10px 12px 10px 14px}
.co-card.compact .co-title{font-size:16.5px}
.co-card.compact .co-row{margin-top:8px}
.co-card.compact .co-again{font-size:0;gap:0;padding:0 10px;height:32px}
.co-card.compact .co-skip{height:32px}

.co-brand { margin-bottom:8px; font-size:12px; font-weight:800; color:#9b4229; }
.co-brand span { color:#766770; font-weight:500; }
.co-card { max-height:calc(100dvh - 32px); overflow-y:auto; }
.co-row button { min-height:44px; height:auto; }
.co-x { width:36px; height:36px; flex-shrink:0; }
.co-dots { flex-wrap:wrap; }
.co-sub { color:#71646d; }
.co-skip { color:#766770; }
.co-card button:focus-visible, .ob-help:focus-visible { outline:3px solid #e95638; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .co-card,.co-dim { transition:none; } }

.co-hide { display:block; width:100%; min-height:36px; margin-top:8px; border:0; border-top:1px solid #eee5e0; background:transparent; color:#766770; font:500 12px Onest,sans-serif; cursor:pointer; }
.co-topic { display:block; width:100%; margin-top:12px; padding:10px 12px; text-align:left; border:1px solid #e7dcd5; border-radius:12px; background:#faf5f1; color:#3a3138; font:700 14px Onest,sans-serif; cursor:pointer; }
.co-topic small { display:block; margin-top:3px; font-weight:400; font-size:12px; color:#71646d; }