/* onboarding.css — приветственные карточки при первом заходе.
   Самодостаточный компонент: на index.html base.css НЕ подключён (там timer.css),
   поэтому backdrop/кнопки/типографику описываем здесь, опираясь только на токены
   из tokens.css (он есть на всех страницах). */

.ob-backdrop{
  position:fixed; inset:0; z-index:1000;
  background:rgba(2,6,14,.72);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));
  animation:ob-fade .18s ease;
}
.ob-card{
  position:relative;
  width:min(460px,100%);
  max-height:calc(100dvh - 40px);
  display:flex; flex-direction:column;
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:22px 22px 18px;
  animation:ob-rise .22s ease;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"PT Sans",sans-serif;
  color:var(--fg);
}
.ob-skip{
  position:absolute; top:10px; right:12px;
  background:transparent; border:0; color:var(--muted);
  font-size:13px; cursor:pointer; padding:6px 8px;
  border-radius:var(--radius-sm); line-height:1;
}
.ob-skip:hover{ color:var(--fg); }

.ob-title{
  margin:2px 84px 12px 0;
  font-size:clamp(19px,4.6vw,23px); font-weight:700; letter-spacing:.01em;
}
.ob-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
.ob-body p{ margin:0 0 12px; color:var(--muted); line-height:1.6; font-size:14.5px; }
.ob-body p:last-child{ margin-bottom:0; }
.ob-body strong{ color:var(--fg); font-weight:600; }
.ob-body a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-border); }
.ob-body a:hover{ border-bottom-color:var(--accent); }

.ob-warn{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--accent-soft);
  border:1px solid var(--accent-border);
  border-radius:var(--radius);
  padding:12px 14px; margin:0 0 14px;
  color:var(--fg); font-size:13px; line-height:1.5;
}
.ob-warn-ico{ flex:0 0 auto; font-size:16px; line-height:1.3; }
.ob-fine{ font-size:12.5px !important; line-height:1.5 !important; }

.ob-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--border-soft);
}
.ob-dots{ display:flex; gap:7px; }
.ob-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--border);
  transition:background .2s ease, transform .2s ease;
}
.ob-dot.is-active{ background:var(--accent); transform:scale(1.25); }

.ob-actions{ display:flex; gap:8px; }
.ob-btn{
  font-family:inherit; min-height:40px; padding:0 16px;
  background:var(--bg-elev); color:var(--fg);
  border:1px solid var(--border); border-radius:var(--radius);
  font-size:14px; font-weight:500; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, filter .15s ease;
}
.ob-btn:hover{ background:var(--bg-elev-2); border-color:var(--accent-border); }
.ob-btn.primary{ background:var(--accent); color:var(--accent-fg); border-color:transparent; font-weight:600; }
.ob-btn.primary:hover{ filter:brightness(1.08); }
.ob-btn:focus-visible, .ob-skip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@keyframes ob-fade{ from{opacity:0} to{opacity:1} }
@keyframes ob-rise{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){
  .ob-backdrop, .ob-card{ animation:none; }
  .ob-dot{ transition:none; }
}

@media (max-width:420px){
  .ob-foot{ flex-direction:column-reverse; align-items:stretch; gap:12px; }
  .ob-actions{ justify-content:space-between; }
  .ob-actions .ob-btn{ flex:1; }
  .ob-dots{ justify-content:center; }
}

/* ============================================================================
   Интерактивный тур (spotlight + tooltip) — Phase «onboarding-tour» 2026-05-28.
   Один полупрозрачный overlay с «дыркой» в форме box-shadow вокруг target'а
   и тултипом-карточкой рядом. Selector'ы целей: #audioBtn, #patternBtn,
   #app-nav a[href="/programs.html"], #startBtn — позиционируем JS-ом.
   ========================================================================= */

.tour-overlay{
  position:fixed; inset:0; z-index:1100;
  pointer-events:auto;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"PT Sans",sans-serif;
  color:var(--fg);
  animation:ob-fade .2s ease;
}
.tour-spot{
  position:fixed;
  top:0; left:0; width:0; height:0;
  border-radius:14px;
  /* «Дыра» сделана большим box-shadow вокруг прозрачного div. */
  box-shadow:0 0 0 9999px rgba(2,6,14,.72);
  pointer-events:none;
  transition:top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}
.tour-tip{
  position:fixed;
  width:min(360px, calc(100vw - 24px));
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:18px 18px 14px;
  z-index:1;
  animation:ob-rise .22s ease;
}
.tour-arrow{
  position:absolute;
  width:14px; height:14px;
  background:var(--bg-1);
  border-left:1px solid var(--border);
  border-top:1px solid var(--border);
  transform:translateX(-50%) rotate(45deg);
}
.tour-tip--below .tour-arrow{ top:-8px; }
.tour-tip--above .tour-arrow{
  bottom:-8px;
  border-left:0; border-top:0;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.tour-title{
  margin:0 0 8px;
  font-size:16px; font-weight:700; letter-spacing:.01em;
  color:var(--fg);
}
.tour-body{
  margin:0 0 14px;
  font-size:14px; line-height:1.55;
  color:var(--muted);
}

.tour-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding-top:12px;
  border-top:1px solid var(--border-soft);
}
.tour-counter{
  font-size:12px; color:var(--muted); letter-spacing:.04em;
}
.tour-actions{ display:flex; gap:8px; }
.tour-btn{
  font-family:inherit; min-height:36px; padding:0 14px;
  background:var(--bg-elev); color:var(--fg);
  border:1px solid var(--border); border-radius:var(--radius);
  font-size:13.5px; font-weight:500; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, filter .15s ease;
}
.tour-btn:hover{ background:var(--bg-elev-2); border-color:var(--accent-border); }
.tour-btn.primary{
  background:var(--accent); color:var(--accent-fg);
  border-color:transparent; font-weight:600;
}
.tour-btn.primary:hover{ filter:brightness(1.08); }
.tour-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .tour-overlay, .tour-tip{ animation:none; }
  .tour-spot{ transition:none; }
}
@media (max-width:420px){
  .tour-tip{ padding:16px 16px 12px; }
  .tour-foot{ flex-direction:column-reverse; align-items:stretch; gap:10px; }
  .tour-actions{ justify-content:space-between; }
  .tour-actions .tour-btn{ flex:1; }
  .tour-counter{ text-align:center; }
}