/* Обучение нового пользователя: затемнение с окном на нужном элементе, карточка с пояснением рядом
   и центральные окна приглашения и финала. Цвета берутся из токенов scene.css, поэтому карточка
   живет в светлой и темной теме. Все классы с приставкой tr-. */
.tr-layer{position:fixed;inset:0;z-index:9000;pointer-events:none;font-family:var(--font)}
.tr-pane{position:absolute;background:var(--scrim);pointer-events:auto}
.tr-hole{position:absolute;border-radius:14px;pointer-events:auto;
  box-shadow:0 0 0 2px var(--accent),0 0 0 7px rgba(var(--accent-rgb),.22);transition:all .25s ease}
.tr-wait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel);color:var(--text);
  border:1px solid var(--border);border-radius:12px;padding:12px 18px;font-size:14px;box-shadow:var(--shadow)}

.tr-pop{position:absolute;width:min(380px,calc(100vw - 24px));background:var(--panel);color:var(--text);
  border:1px solid var(--border);border-radius:16px;padding:18px 20px 16px;pointer-events:auto;
  box-shadow:var(--shadow);animation:tr-in .2s ease}
.tr-pop .tr-num{font-size:12px;color:var(--accent);letter-spacing:.02em;margin-bottom:6px;font-weight:600}
.tr-pop h4{font-size:17px;line-height:1.3;font-weight:600;margin:0 0 8px}
.tr-pop p{font-size:14.5px;line-height:1.5;margin:0;color:var(--muted)}
.tr-pop p+p{margin-top:8px}
.tr-btns{display:flex;align-items:center;gap:8px;margin-top:16px}
.tr-btns .tr-sp{flex:1}
.tr-btns .tr-back,.tr-btns .tr-next,.tr-row button{white-space:nowrap;overflow-wrap:normal;flex-shrink:0}
.tr-btns .tr-skip{white-space:normal;text-align:left;min-width:0}
.tr-pop button,.tr-card button{font:inherit;cursor:pointer;border-radius:10px;border:1px solid transparent;
  padding:8px 14px;font-size:14px;line-height:1.2}
.tr-next,.tr-prim{background:var(--accent);color:var(--on-accent);font-weight:600}
.tr-next:hover,.tr-prim:hover{filter:brightness(1.08)}
.tr-back,.tr-ghost{background:transparent;color:var(--text);border-color:var(--border)!important}
.tr-back:hover,.tr-ghost:hover{background:var(--panel-raised)}
.tr-skip{background:none;border:0;color:var(--faint);padding:6px 0!important;font-size:13px!important;
  text-decoration:underline;text-underline-offset:3px}
.tr-skip:hover{color:var(--text)}
.tr-pop button:disabled{opacity:.45;cursor:default}

/* Стрелка к элементу. Положение вдоль края задается переменной. */
.tr-pop::after{content:"";position:absolute;width:14px;height:14px;background:var(--panel);transform:rotate(45deg)}
.tr-pop.tr-c-right::after{left:-8px;top:calc(var(--tr-at,50%) - 7px);border-left:1px solid var(--border);border-bottom:1px solid var(--border)}
.tr-pop.tr-c-left::after{right:-8px;top:calc(var(--tr-at,50%) - 7px);border-right:1px solid var(--border);border-top:1px solid var(--border)}
.tr-pop.tr-c-bottom::after{top:-8px;left:calc(var(--tr-at,50%) - 7px);border-left:1px solid var(--border);border-top:1px solid var(--border)}
.tr-pop.tr-c-top::after{bottom:-8px;left:calc(var(--tr-at,50%) - 7px);border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.tr-pop.tr-c-inside::after{display:none}

.tr-modal{position:fixed;inset:0;z-index:9100;background:var(--scrim);display:grid;place-items:center;padding:20px;
  font-family:var(--font);animation:tr-in .2s ease}
.tr-card{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:18px;max-width:560px;width:100%;
  padding:26px 28px 22px;box-shadow:var(--shadow)}
.tr-card h3{font-size:21px;line-height:1.25;font-weight:600;margin:0 0 12px}
.tr-card p{font-size:15px;line-height:1.5;color:var(--muted);margin:0 0 8px}
.tr-card .tr-hint{background:var(--panel-soft);border-left:3px solid var(--accent);border-radius:8px;
  padding:9px 13px;font-size:14px;margin:14px 0 4px}
.tr-card .tr-row{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap}

@keyframes tr-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tr-pop,.tr-modal{animation:none}.tr-hole{transition:none}}
@media (max-width:640px){.tr-card{padding:20px}.tr-pop{padding:15px}.tr-skip{font-size:12px!important}}