/* Корінь вікна — .wr-root, а не просто .wr: «Зв'язки» в «Аналітиці»
   малюють вінрейт рядка як <span class="wr">, і кожен такий рядок
   ставав повноекранним вікном зі світінням поверх розділу. */
/* Итоги месяца слайдами (wrap.js), вигляд «Скло» (власник, 16.10.2026):
   на весь екран, журнал позаду розмитий і просвічує, посередині світіння,
   цифра світиться, картки — скляні. Шар завжди темний, тож кольори
   тексту тут свої, незалежно від світлої чи темної теми; колір світіння
   бере акцент теми, а на мінусовому слайді — червоний. */
html.wr-open{overflow:hidden}
.wr-root{--text:#f2f3f2; --dim:#a6b3ad; --faint:#6f7a75; --up:#40e094; --down:#ff6e60; --be:#efc258;
  --glass:rgba(255,255,255,.06); --glass-line:rgba(255,255,255,.12);
  --glow:#40e094;  /* світіння завжди зелене (власник, 16.10.2026), мінус видно по червоній цифрі */
  position:fixed; inset:0; z-index:400; color:var(--text);
  background:linear-gradient(180deg, rgba(2,10,6,.55), rgba(2,6,4,.86));
  -webkit-backdrop-filter:blur(26px) saturate(1.3); backdrop-filter:blur(26px) saturate(1.3);
  animation:wrFade .3s ease both; touch-action:none; user-select:none; -webkit-user-select:none}
@keyframes wrFade{from{opacity:0}}

/* світіння посередині — пливе, коли міняється слайд */
.wr-root::before{content:""; position:absolute; width:min(760px, 120vw); aspect-ratio:1; left:50%; top:46%;
  transform:translate(-50%, -50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--glow) 34%, transparent), transparent 65%);
  filter:blur(40px); transition:background .6s ease; animation:wrBreath 7s ease-in-out infinite}
@keyframes wrBreath{50%{transform:translate(-50%, -52%) scale(1.06)}}

.wr-box{position:absolute; inset:28px 56px 28px; display:flex; flex-direction:column}
@media (max-width:640px){ .wr-box{inset:max(12px, env(safe-area-inset-top)) 16px 16px} }

/* смужки прогресу згори */
/* верхній ряд: смужки й хрестик на одній лінії */
.wr-top{display:flex; align-items:center; gap:14px; position:relative; z-index:4; height:44px}
.wr-bars{flex:1; display:flex; gap:6px}
.wr-bar{flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.18); overflow:hidden}
.wr-bar i{display:block; height:100%; width:0; background:#fff; border-radius:2px}
.wr-bar.done i{width:100%}
.wr-bar.now i{animation:wrBar var(--dur,6000ms) linear forwards}
.wr-root.last .wr-bar.now i{animation:none; width:100%}
.wr-root.hold .wr-bar.now i{animation-play-state:paused}
@keyframes wrBar{to{width:100%}}
.wr-x{flex:none; width:44px; height:44px; margin-right:-10px; padding:0; border:0; background:none; color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:.75}
.wr-x:hover{opacity:1}

/* стрілки з боків — на компʼютері, щоб було видно, що слайди гортаються */
.wr-nav{position:absolute; top:50%; z-index:4; width:52px; height:52px; margin-top:-26px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--glass-line); background:var(--glass); color:#fff;
  cursor:pointer; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); opacity:.75; transition:opacity .2s, transform .2s}
.wr-nav:hover{opacity:1; transform:scale(1.06)}
.wr-nav.p{left:-20px} .wr-nav.n{right:-20px}
.wr-root.first .wr-nav.p, .wr-root.last .wr-nav.n{visibility:hidden}
/* на сенсорних екранах (телефон, планшет) гортають тапом і свайпом — стрілки не потрібні */
@media (max-width:640px), (hover:none) and (pointer:coarse){ .wr-nav{display:none} }

.wr-tap{position:absolute; top:40px; bottom:0; z-index:1}
.wr-tap.l{left:0; width:30%} .wr-tap.r{right:0; width:70%}
.wr-hint{position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:11px;
  color:var(--faint); letter-spacing:.12em; text-transform:uppercase; z-index:2; pointer-events:none}
.wr-root.last .wr-hint{display:none}

/* слайд: усе по центру, вузька колонка */
.wr-stage{position:relative; flex:1; z-index:2; pointer-events:none}
.wr-s{position:absolute; inset:0; margin:0 auto; max-width:760px; padding:24px 0 36px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center}
.wr-s > *{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.9,.25,1)}
.wr-s.in > *{opacity:1; transform:none}
.wr-s.in > *:nth-child(2){transition-delay:.08s} .wr-s.in > *:nth-child(3){transition-delay:.16s}
.wr-s.in > *:nth-child(4){transition-delay:.24s} .wr-s.in > *:nth-child(5){transition-delay:.32s}
.wr-s.in > *:nth-child(6){transition-delay:.4s}  .wr-s.in > *:nth-child(7){transition-delay:.48s}
.wr-end, .wr-end *{pointer-events:auto}

.wr-k{font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:color-mix(in srgb, var(--glow) 45%, #fff); font-weight:500}
.wr-k2{margin-top:18px; color:#ffb0a8}
.wr-h{margin:0; font-size:clamp(34px, 7vw, 64px); line-height:1.05; font-weight:600; letter-spacing:-.025em}
.wr-intro .wr-h{font-size:clamp(46px, 11vw, 104px); letter-spacing:-.04em;
  text-shadow:0 0 70px color-mix(in srgb, var(--glow) 50%, transparent)}
.wr-sub{margin:0; color:var(--dim); font-size:clamp(14px, 1.6vw, 17px); line-height:1.5}
.wr-big .wr-num{font-family:var(--mono, "Geist Mono", ui-monospace, monospace); font-size:clamp(64px, 16vw, 170px);
  font-weight:600; letter-spacing:-.04em; line-height:1; color:#fff;
  text-shadow:0 0 60px color-mix(in srgb, var(--glow) 55%, transparent)}
.wr-root .pos{color:var(--up)} .wr-root .neg{color:var(--down)}
.wr-root em{font-style:normal}

.wr-row{display:flex; gap:clamp(28px, 6vw, 72px); justify-content:center}
.wr-row > div{display:flex; flex-direction:column; gap:4px; align-items:center}
.wr-row .wr-num{font-family:var(--mono, "Geist Mono", ui-monospace, monospace); font-size:clamp(40px, 7vw, 64px); font-weight:600; line-height:1}
.wr-row span{font-size:13px; color:var(--dim)}

/* скляні картки */
.wr-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 210px)); gap:14px; margin-top:10px; text-align:left}
.wr-grid > div, .wr-card{border:1px solid var(--glass-line); border-radius:22px; background:var(--glass);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px)}
.wr-grid > div{padding:18px 20px; display:flex; flex-direction:column; justify-content:space-between; gap:8px}
.wr-grid span, .wr-card span{display:block; font-size:11.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em}
.wr-grid b{display:block; font-family:var(--mono, "Geist Mono", ui-monospace, monospace); font-size:clamp(22px, 2.4vw, 30px); font-weight:600}
.wr-card{width:min(100%, 520px); display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 14px;
  padding:14px 18px; text-align:left}
.wr-card span{grid-column:1 / -1}
.wr-card b{font-size:17px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wr-card i{font-style:normal; font-family:var(--mono, "Geist Mono", ui-monospace, monospace); font-size:17px; font-weight:600}
@media (max-width:640px){
  .wr-grid{grid-template-columns:repeat(3, 1fr); gap:8px; width:100%}
  .wr-grid > div{padding:12px; border-radius:16px}
}

/* крива місяця з заливкою, лінія промальовується зліва направо */
.wr-curve{width:min(100%, 620px); height:clamp(80px, 14vh, 130px); overflow:visible}
.wr-curve polyline{fill:none; stroke:var(--up); stroke-width:3; stroke-linejoin:round; stroke-linecap:round;
  vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1;
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--up) 60%, transparent))}
.wr-curve.neg polyline{stroke:var(--down); filter:drop-shadow(0 0 8px color-mix(in srgb, var(--down) 60%, transparent))}
.wr-curve polygon{fill:url(#wrFill); opacity:0; transition:opacity .8s 1s ease}
.wr-curve.neg polygon{fill:url(#wrFillN)}
.wr-s.in .wr-curve polygon{opacity:1}
.wr-curve .z{stroke:rgba(255,255,255,.14); stroke-dasharray:4 6; vector-effect:non-scaling-stroke}
.wr-s.in .wr-curve polyline{animation:wrDraw 1.2s .3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes wrDraw{to{stroke-dashoffset:0}}

/* календар місяця: клітинки вмикаються хвилею по днях */
.wr-cal{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; width:min(100%, 600px); margin:6px 0 4px}
.wr-cal b{font-size:11px; font-weight:500; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; padding-bottom:2px}
.wr-cal i{position:relative; aspect-ratio:1.25; border-radius:10px; background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.06); font-style:normal; text-align:left}
.wr-cal i.e{background:none; border-color:transparent}
.wr-cal i span{position:absolute; left:8px; top:6px; font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums}
.wr-cal i em{position:absolute; right:8px; bottom:6px; font-family:var(--mono, "Geist Mono", ui-monospace, monospace);
  font-size:13px; font-weight:600; font-style:normal}
.wr-cal i.p{background:color-mix(in srgb, var(--up) 16%, transparent); border-color:color-mix(in srgb, var(--up) 35%, transparent)}
.wr-cal i.n{background:color-mix(in srgb, var(--down) 15%, transparent); border-color:color-mix(in srgb, var(--down) 35%, transparent)}
.wr-cal i.z{background:color-mix(in srgb, var(--be) 15%, transparent); border-color:color-mix(in srgb, var(--be) 35%, transparent)}
.wr-cal i.p em{color:var(--up)} .wr-cal i.n em{color:var(--down)} .wr-cal i.z em{color:var(--be)}
.wr-cal i.p span, .wr-cal i.n span, .wr-cal i.z span{color:var(--dim)}
@media (max-width:640px){
  .wr-cal{gap:4px} .wr-cal i{aspect-ratio:.95; border-radius:8px}
  .wr-cal i span{left:5px; top:4px; font-size:9.5px}
  .wr-cal i em{left:0; right:0; bottom:5px; text-align:center; font-size:10px; letter-spacing:-.03em}
}
.wr-cal i.p, .wr-cal i.n, .wr-cal i.z{transform:scale(.6); opacity:0}
.wr-s.in .wr-cal i.p, .wr-s.in .wr-cal i.n, .wr-s.in .wr-cal i.z{animation:wrCell .35s cubic-bezier(.2,.9,.25,1) forwards;
  animation-delay:calc(.25s + var(--d) * 22ms)}
@keyframes wrCell{to{transform:none; opacity:1}}

.wr-btns{display:flex; gap:12px; margin-top:12px; width:min(100%, 440px)}
.wr-btns .btn{flex:1; display:flex; align-items:center; justify-content:center; height:54px; padding:0 12px;
  font-size:15.5px; font-weight:600; border-radius:14px}
.wr-btns .btn:not(.primary){background:var(--glass); border-color:var(--glass-line); color:#fff;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px)}
.wr-again{margin-top:4px; border:0; background:none; color:var(--dim); font:inherit; font-size:13.5px;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer}

/* кнопка «Итоги» біля місяця в «Журналі» */
.wr-open-btn{display:inline-flex; align-items:center; gap:6px}

/* Великі екрани: на моніторі 1920+ і планшеті вертикально вміст слайда
   виглядав дрібним — збільшуємо весь слайд цілком (zoom), пропорції ті самі. */
@media (min-width:1600px) and (min-height:900px){ .wr-s{zoom:1.3} }
@media (min-width:2200px) and (min-height:1200px){ .wr-s{zoom:1.6} }
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){ .wr-s{zoom:1.2} }

@media (prefers-reduced-motion: reduce){
  .wr-root, .wr-root::before{animation:none}
  .wr-s > *{transition:none; transform:none}
  .wr-cal i.p, .wr-cal i.n, .wr-cal i.z{transform:none; opacity:1; animation:none!important}
  .wr-curve polyline{stroke-dashoffset:0; animation:none!important}
}