/* Waykeeper · «Что ближе к тебе сейчас?» · префикс ch-
   Токены берутся со страницы (скетч v3); в скобках — запасные значения. */

.ch{
  position:relative; scroll-margin-top:24px;
  color:var(--ink,#0F1722);
  font:400 var(--s4,16px)/1.6 var(--f-text,'Onest',system-ui,sans-serif);
}
.ch--panel{
  padding:44px 44px 48px; border-radius:22px;
  background:var(--glass,rgba(255,255,255,.56));
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(15,23,34,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 22px 44px -28px rgba(15,23,34,.22);
}
.ch-h{margin:0; font:300 var(--s2,34px)/1.15 var(--f-head,'Spectral',Georgia,serif); letter-spacing:-.01em}
.ch-lead{margin:14px 0 0; max-width:34em; color:var(--ink-2,rgba(15,23,34,.78))}

/* ---------- поле ---------- */
.ch-field{
  position:relative; margin-top:48px;
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:72px; align-items:start;
}
.ch-list{position:relative; z-index:1; display:flex; flex-direction:column; align-items:stretch; gap:18px; margin:0; padding:0; list-style:none}
/* ровный столбик, как на телефоне: один левый край и одна ширина у всех строк, без сдвигов */
.ch-item{position:relative}

.ch-frag{
  position:relative; display:block; box-sizing:border-box; width:100%; margin:0; max-width:26em; text-align:left; text-decoration:none; cursor:pointer;
  padding:12px 22px 13px 42px; border-radius:16px;
  font:300 italic var(--s3,21px)/1.35 var(--f-head,'Spectral',Georgia,serif); color:var(--ink,#0F1722);
  background:var(--glass,rgba(255,255,255,.56));
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(15,23,34,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 14px 30px -24px rgba(15,23,34,.20);
  transition:opacity .5s, filter .5s, background .3s, border-color .3s, box-shadow .3s;
}
.ch-frag:hover{background:rgba(255,255,255,.82)}
.ch-frag:focus-visible{outline:2px solid var(--ink,#0F1722); outline-offset:3px}

/* точка: пустое кольцо → «ты здесь» */
.ch-dot{
  position:absolute; left:18px; top:calc(12px + .675em - 4.5px);
  width:9px; height:9px; border-radius:50%; box-sizing:border-box;
  border:1px solid rgba(15,23,34,.34); background:transparent;
  transition:background .3s, border-color .3s, box-shadow .45s;
}
.ch-frag:hover .ch-dot,.ch-frag:focus-visible .ch-dot{border-color:var(--ink,#0F1722)}
.ch-frag.is-here .ch-dot{background:var(--accent,#EA5F22); border-color:var(--accent,#EA5F22); box-shadow:0 0 0 6px rgba(234,95,34,.12)}

/* остальные отступают в глубину поля, но читаются (их можно выбрать, чтобы передумать) */
.ch-frag.is-away{
  opacity:.72; background:transparent; border-color:transparent; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.ch-frag.is-away:hover,.ch-frag.is-away:focus-visible{opacity:1}

.ch-nw{white-space:nowrap}
.ch-arr{display:inline-block; margin-left:.45em; font:400 var(--s4,16px)/1 var(--f-text,'Onest',sans-serif); font-style:normal; color:var(--ink-3,rgba(15,23,34,.62)); transition:transform .25s, color .25s}
.ch-frag:hover .ch-arr,.ch-frag:focus-visible .ch-arr{transform:translateX(3px); color:var(--ink,#0F1722)}

/* ---------- будущее: двенадцать недель ---------- */
.ch-future{position:relative; min-height:420px}
.ch-track{position:absolute; left:0; top:0; bottom:0; width:14px; pointer-events:none; transition:opacity .4s}
.ch--home:not(:hover):not(:focus-within) .ch-track{opacity:.55}
.ch-track::before{content:""; position:absolute; left:7px; top:8px; bottom:8px; width:1px; background:var(--line,rgba(15,23,34,.10))}
.ch-wk{position:absolute; left:7px; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:rgba(15,23,34,.26); transition:opacity .3s}
.ch-wk--rest{width:9px; height:9px; margin:-4.5px 0 0 -4.5px; box-sizing:border-box; background:var(--page,#FCFDFF); border:1px solid rgba(15,23,34,.38)}
.ch-wk--start{width:7px; height:7px; margin:-3.5px 0 0 -3.5px; box-sizing:border-box; background:var(--page,#FCFDFF); border:1px solid rgba(15,23,34,.30)}
.ch-wk.is-target{opacity:0}

.ch-ans{position:absolute; inset:0; pointer-events:none}
.ch-say{position:absolute; left:34px; right:0; margin:0; color:var(--ink-2,rgba(15,23,34,.78)); pointer-events:auto}
.ch-to{
  position:absolute; left:0; display:flex; align-items:flex-start;
  line-height:24px; color:var(--ink,#0F1722); text-decoration:none; pointer-events:auto;
}
.ch-ring{
  flex:none; position:relative; width:14px; height:14px; margin-top:5px; box-sizing:border-box;
  border-radius:50%; border:1px solid rgba(15,23,34,.6); background:var(--page,#FCFDFF);
}
.ch-ring::before,.ch-ring::after{content:""; position:absolute; background:rgba(15,23,34,.55)}
.ch-ring::before{left:6px; top:-6px; width:1px; height:24px}
.ch-ring::after{top:6px; left:-6px; height:1px; width:24px}
.ch-lb{margin-left:20px}
a.ch-to .ch-lb{text-decoration:underline; text-decoration-color:var(--line-2,rgba(15,23,34,.20)); text-decoration-thickness:1px; text-underline-offset:5px; transition:text-decoration-color .2s}
a.ch-to:hover .ch-lb{text-decoration-color:var(--ink,#0F1722)}
a.ch-to:focus-visible{outline:none}
a.ch-to:focus-visible .ch-lb{outline:2px solid var(--ink,#0F1722); outline-offset:3px; border-radius:4px}
.ch-wn{color:var(--ink-3,rgba(15,23,34,.62))}

/* подсказка при наведении на главной: только координата, бледно */
.ch-ans--ghost .ch-to{color:var(--ink-3,rgba(15,23,34,.62))}
.ch-ans--ghost .ch-ring{border-color:rgba(15,23,34,.32)}
.ch-ans--ghost .ch-ring::before,.ch-ans--ghost .ch-ring::after{background:rgba(15,23,34,.28)}

/* проявление ответа */
.ch-ans > *{opacity:0; filter:blur(3px); transition:opacity .55s, filter .55s, top .45s cubic-bezier(.16,1,.3,1)}
.ch-ans.is-in > *{opacity:1; filter:none}
.ch-ans.is-in > .ch-to{transition-delay:.25s}
.ch-ans.is-in > .ch-to + .ch-to{transition-delay:.4s}
.ch-ans--ghost.is-in > *{transition-delay:0s !important; transition-duration:.25s}

/* ---------- линия-координата ---------- */
.ch-lines{position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0}
.ch-lines path{fill:none; stroke:var(--accent,#EA5F22); stroke-width:1; vector-effect:non-scaling-stroke}
.ch-lines path + path{stroke-dasharray:2 4}
.ch-lines--ghost path{stroke:rgba(15,23,34,.28); stroke-dasharray:2 5}

/* ---------- фрагменты всплывают при первом появлении: только прозрачность и сдвиг, без размытия ---------- */
.ch--pre .ch-item{opacity:0; transform:translateY(6px)}
.ch--pre.ch--up .ch-item{opacity:1; transform:none;
  transition:opacity .8s, transform .8s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * 80ms)}

/* ---------- телефон ---------- */
@media (max-width:760px){
  .ch--panel{padding:28px 20px 32px; border-radius:18px}
  .ch-field{display:block; margin-top:28px}
  .ch-list{gap:10px}
  /* телефон: тот же столбик на всю ширину */
  .ch-frag{max-width:none}
  .ch-frag{padding:11px 18px 12px 40px; font-size:var(--s3,19px); line-height:1.35}
  .ch-dot{left:17px; top:calc(11px + .675em - 4.5px)}
  .ch-future{display:none}
  .ch-item > .ch-ans{position:static; padding:14px 0 6px}
  .ch-item > .ch-ans .ch-say{position:static; padding-left:40px}
  .ch-item > .ch-ans .ch-to{position:static; margin:12px 0 0 14.5px}
  .ch-item > .ch-ans .ch-lb{margin-left:11.5px}
  .ch--program .ch-lines{z-index:2}
}

@media (prefers-reduced-motion: reduce){
  .ch *,.ch *::before,.ch *::after{transition:none !important; animation:none !important}
  .ch--pre .ch-item{opacity:1; transform:none}
}