/* =========================================================
   Waykeeper · модуль «Тогда и сейчас»
   Токены берутся из :root сайта (--ink, --glass, --accent, --s1…--s5,
   --f-head, --f-text). Свои переменные — только с префиксом --tn-.
   Устройство: заголовок и строка над рамкой; рамка-стекло 760 × 560
   (на телефоне — по ширине экрана, высота по содержимому).
   ========================================================= */
.tn{
  --tn-w:760px;
  --tn-h:640px;
  --tn-pad:32px;
  --tn-radius:20px;
  --tn-ease:cubic-bezier(.16,1,.3,1);
  --tn-tile-h:40px;
  position:relative; max-width:var(--tn-w); margin:0 auto;
  color:var(--ink); font:400 var(--s4)/1.6 var(--f-text);
  text-align:left;
}
.tn *{box-sizing:border-box}
.tn p{margin:0}
.tn ul{list-style:none; margin:0; padding:0}
.tn li{margin:0; padding:0}
.tn li::before{content:none}
.tn button{font:inherit; color:inherit}
.tn :focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.tn .tn-sub:focus{outline:none}

/* ---------- над рамкой ---------- */
.tn-title{margin:0; font:300 var(--s2)/1.15 var(--f-head); letter-spacing:-.01em}
.tn-intro{margin-top:12px !important; color:var(--ink-2); max-width:36em}

/* ---------- рамка ---------- */
.tn-frame{
  position:relative; display:flex; flex-direction:column;
  min-height:var(--tn-h); margin-top:28px;
  padding:var(--tn-pad) calc(var(--tn-pad) + 4px) 26px; border-radius:var(--tn-radius);
  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 1px 2px rgba(15,23,34,.03), 0 22px 44px -28px rgba(15,23,34,.22);
}
.tn-dots{display:flex; gap:10px; align-items:center; flex:none; height:6px; margin:0 0 18px 1px}
.tn-dots i{display:block; width:5px; height:5px; border-radius:50%; background:rgba(15,23,34,.18); transition:background .3s, transform .3s}
.tn-dots i.tn-done{background:rgba(15,23,34,.55)}
.tn-dots i.tn-cur{background:var(--accent); transform:scale(1.6)}
.tn-frame[data-step="4"] .tn-dots{visibility:hidden}
.tn-body{position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column}

/* ---------- экран ---------- */
.tn-screen{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.tn-sub{margin:0; font:300 italic var(--s3)/1.3 var(--f-head); outline:none}
.tn-q{margin-top:8px !important; color:var(--ink-2); max-width:38em}
.tn-screen > .tn-q + *{margin-top:24px}

/* ---------- плитки-глаголы: 3 в ряд, четыре группы по шесть разделены воздухом (без подписей) ---------- */
.tn-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:auto; grid-auto-flow:row; gap:6px 14px}
.tn-grid li{display:block; min-width:0}
.tn-grid li:nth-child(6n+7), .tn-grid li:nth-child(6n+8), .tn-grid li:nth-child(6n+9){margin-top:10px}
.tn-tile{
  position:relative; display:flex; align-items:center; width:100%; height:var(--tn-tile-h); min-height:var(--tn-tile-h);
  padding:3px 10px 3px 26px; margin:0; border-radius:12px; cursor:pointer; text-align:left;
  font:300 italic var(--s4)/1.15 var(--f-head) !important; white-space:nowrap;
  background:transparent; border:1px solid rgba(15,23,34,.08);
  transition:opacity .45s, filter .6s, transform .5s var(--tn-ease), background .3s, border-color .3s, box-shadow .35s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
/* точка слева: пустое колечко → огонёк, когда отмечено */
.tn-tile::before{content:""; position:absolute; left:11px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
  border:1px solid rgba(15,23,34,.28); box-sizing:border-box; transition:background .3s, border-color .3s}
.tn-tile:hover{border-color:rgba(15,23,34,.2)}
.tn-tile[aria-pressed="true"]{
  background:rgba(255,255,255,.86); border-color:rgba(15,23,34,.5);
  box-shadow:inset 0 1px 0 #fff, 0 12px 24px -20px rgba(15,23,34,.38);
}
.tn-tile[aria-pressed="true"]::before{background:var(--accent); border-color:var(--accent)}
.tn-tile:disabled{cursor:default; opacity:.4}
.tn-tile:disabled:hover{border-color:rgba(15,23,34,.08)}

/* первый экран: плитки следующего шага не показываются (размытая сетка выглядела как сломанная отрисовка);
   место под ними держит высоту рамки, чтобы на втором шаге ничего не прыгало */
.tn-pool{flex:1 1 0; min-height:0; position:relative; overflow:hidden; margin-top:24px; visibility:hidden}
.tn-pool .tn-grid{pointer-events:none}
.tn-pool .tn-tile{opacity:0; border-color:transparent; animation:none}
/* второй экран: глаголы проступают по очереди */
.tn-surface .tn-tile{animation:tn-rise .7s var(--tn-ease) both; animation-delay:var(--tn-sd,0s)}
@keyframes tn-rise{from{opacity:.2; filter:blur(4px)}}

/* ---------- третий экран: столбик «тогда», линия «сейчас» ---------- */
.tn-move{position:relative; flex:1 1 auto; min-height:0}
.tn-stack{position:relative; z-index:1; display:flex; flex-direction:column; gap:8px; width:236px}
.tn-stack li{display:block}
.tn-stack .tn-tile{height:auto; min-height:40px}
.tn-lines{position:absolute; left:0; top:0; overflow:visible; pointer-events:none}
.tn-lines path{fill:none; stroke-linecap:round; vector-effect:non-scaling-stroke}
.tn-nowline{stroke:var(--line-2); stroke-width:1; transition:opacity .6s}
/* ненажатое: пунктир доходит до середины и обрывается */
.tn-stub{stroke:rgba(15,23,34,.24); stroke-width:1; stroke-dasharray:2 5; transition:opacity .25s}
/* нажатое: тонкая линия прорисовывается к «сейчас» (300 мс), на линии — тёплая точка */
.tn-ray{stroke:rgba(15,23,34,.55); stroke-width:1; stroke-dasharray:1 1; stroke-dashoffset:1; transition:stroke-dashoffset .3s cubic-bezier(.4,0,.2,1), stroke .6s}
.tn-hit{fill:var(--accent); opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.4); transition:opacity .2s, transform .3s var(--tn-ease)}
.tn-row.tn-on .tn-stub{opacity:0}
.tn-row.tn-on .tn-ray{stroke-dashoffset:0}
.tn-row.tn-on .tn-hit{opacity:1; transform:none; transition-delay:.24s}
.tn-instant *{transition:none !important}

/* ---------- 3 → 4: мир замирает сам ----------
   Всё, что не линия человека, выцветает за 0,6 с; целые линии теплеют,
   оборванные остаются пунктиром. Затем линии уходят и проступает вывод. */
.tn-veil{position:absolute; inset:0; border-radius:inherit; background:rgba(252,253,255,.62); opacity:0; pointer-events:none; transition:opacity .6s ease}
.tn-frame > .tn-dots, .tn-frame > .tn-foot, .tn-sub, .tn-q, .tn-stack{transition:opacity .6s ease}
.tn-still .tn-veil{opacity:1}
.tn-still > .tn-dots, .tn-still > .tn-foot, .tn-still .tn-sub, .tn-still .tn-q, .tn-still .tn-stack{opacity:0}
.tn-still .tn-lines{z-index:2}
.tn-still .tn-nowline{opacity:0}
.tn-still .tn-row.tn-on .tn-ray{stroke:var(--accent)}
.tn-still .tn-stub{opacity:.95}
.tn-still-c .tn-lines{opacity:0; transition:opacity .4s}
.tn-still-out .tn-lines{opacity:0; transition:opacity .38s ease}
.tn-still-out .tn-veil{opacity:.6}
/* вывод проступает спокойно */
.tn-wake{animation:tn-wake .9s ease both}
.tn-wake .tn-out, .tn-wake .tn-fine{animation:tn-wake 1s ease .18s both}
.tn-foot.tn-wake{animation-delay:.3s}
@keyframes tn-wake{from{opacity:0}}

/* ---------- четвёртый экран: итог ---------- */
.tn-cols{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:14px}
.tn-col{padding:2px 28px 2px 0; min-width:0}
.tn-col + .tn-col{padding:2px 0 2px 28px; border-left:1px solid var(--line-2)}
.tn-col h4{margin:0 0 8px; font:400 var(--s5)/1.3 var(--f-text); color:var(--ink-3)}
.tn-col ul{display:flex; flex-direction:column; gap:0}
.tn-chip{position:relative; display:block; padding:2px 0 2px 18px; font:300 italic var(--s4)/1.35 var(--f-head)}
.tn-chip::before{content:""; position:absolute; left:2px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; box-sizing:border-box}
.tn-keep .tn-chip::before{background:var(--accent)}
.tn-gone .tn-chip{color:var(--ink-3)}
.tn-gone .tn-chip::before{border:1px solid rgba(15,23,34,.3)}
.tn-empty{height:28px; border-bottom:1px dashed rgba(15,23,34,.14); width:60%}

.tn-out{margin-top:18px; max-width:42em}
.tn-weeks{margin-top:10px !important; display:flex; flex-wrap:wrap; gap:2px 24px}
.tn-link{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:var(--line-2); text-underline-offset:5px; transition:text-decoration-color .2s}
.tn-link:hover{text-decoration-color:var(--ink)}
.tn-fine{margin-top:auto; padding-top:10px; font-size:var(--s5); line-height:1.45; color:var(--ink-3)}

/* ---------- низ рамки: «Назад» слева, главное действие справа ---------- */
.tn-foot{position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex:none; margin-top:18px; min-height:48px}
.tn-foot:empty{display:none}
.tn-left{display:flex; align-items:center; gap:22px}
.tn-acts{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px 22px; margin-left:auto}
.tn-btn{display:inline-flex; align-items:center; gap:8px; font:500 var(--s4)/1 var(--f-text) !important; text-decoration:none;
  padding:15px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:background .25s, color .25s, border-color .25s, opacity .25s}
.tn-btn.tn-primary{background:var(--ink); color:#fff !important; margin-left:auto}
.tn-btn.tn-primary:hover{background:#243040}
.tn-btn.tn-primary[aria-disabled="true"]{background:rgba(15,23,34,.08); color:var(--ink-3) !important; cursor:default}
.tn-btn.tn-quiet{background:rgba(255,255,255,.72); border-color:rgba(15,23,34,.1); box-shadow:inset 0 1px 0 #fff; color:var(--ink)}
.tn-btn.tn-quiet:hover{background:#fff; border-color:rgba(15,23,34,.2)}
.tn .tn-text{border:0; background:none; padding:10px 0; cursor:pointer; color:var(--ink-3); font-size:var(--s4)}
.tn .tn-text:hover{color:var(--ink)}
.tn-sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- телефон ---------- */
@media (max-width:760px){
  .tn{--tn-pad:20px; --tn-radius:20px; --tn-tile-h:44px}
  .tn-frame{height:auto; min-height:0; margin-top:22px; padding:20px 20px 0}
  .tn-dots{margin-bottom:18px}
  .tn-grid{grid-template-columns:1fr 1fr; grid-auto-rows:minmax(var(--tn-tile-h),auto); gap:8px}
  .tn-grid li:nth-child(6n+9){margin-top:0}
  .tn-tile{height:auto; padding:5px 8px 5px 24px; line-height:1.2 !important; white-space:normal}
  .tn-tile::before{left:10px}
  .tn-pool{flex:none; height:24px}
  .tn-pool .tn-grid li:nth-child(n+13){display:none}
  .tn-stack{width:min(186px, calc(100% - 80px))}
  .tn-stack .tn-tile{min-height:44px}
  .tn-move{min-height:0}
  .tn-cols{grid-template-columns:1fr; gap:18px}
  .tn-col, .tn-col + .tn-col{padding:0; border:0}
  .tn-fine{margin-top:0; padding-top:20px}
  /* низ рамки прилипает к низу экрана, пока рамка видна */
  .tn-foot{position:sticky; bottom:0; margin:16px -20px 0; padding:12px 20px 16px; border-radius:0 0 var(--tn-radius) var(--tn-radius);
    background:rgba(252,253,255,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); flex-wrap:wrap}
  .tn-frame[data-step="4"] .tn-foot{position:relative}
  .tn-acts{justify-content:flex-start; margin-left:0; width:100%; order:-1}
  .tn-btn{padding:14px 20px}
}

@media (prefers-reduced-motion: reduce){
  .tn *, .tn *::before{animation:none !important; transition:none !important}
}