/* ============================================================
   «Огляд»: оформлення картки підсумку й дрібний рух.

   Структуру розділу не чіпає жодне правило — працюють тільки тло,
   підсвітка під курсором і повільна смужка по обводу. Числа
   відраховує Ticker (ui.js), появу блоків веде appear.js; тут
   лише те, чого в них немає.

   Ставилось пробниками static/_ovfx*.html (22.10.2026, вибір
   власника): сітка на тлі картки, неонова смужка по її обводу,
   нерухомі клітинки тижня, роздягнена шапка кривої.
   ============================================================ */

/* ---------- 1. тло картки підсумку ---------- */
/* Квадратики в тон тексту: майже не видно, але площина має фактуру.
   Повільно пливе вліво — рух, який помічаєш, лише коли задивишся.
   Маска гасить сітку до правого нижнього кута, щоб вона не сперечалась
   із числами показників. */
.ovw .flow > .shell:nth-child(2) > .core{position:relative;overflow:hidden}
.ovw .flow > .shell:nth-child(2) > .core::before{content:"";position:absolute;inset:0;
  pointer-events:none;opacity:.32;
  background-image:linear-gradient(to right,color-mix(in srgb,var(--text) 8%,transparent) 1px,transparent 1px),
                   linear-gradient(to bottom,color-mix(in srgb,var(--text) 8%,transparent) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(120% 90% at 10% 0%,#000,transparent 72%);
          mask-image:radial-gradient(120% 90% at 10% 0%,#000,transparent 72%);
  animation:ovGrid 26s linear infinite}
@keyframes ovGrid{from{background-position:0 0,0 0}to{background-position:-38px 0,0 -38px}}
.ovw .flow > .shell:nth-child(2) > .core > *{position:relative;z-index:1}

/* ---------- 2. смужка по обводу картки ---------- */
/* Коло — 20 секунд: єдиний рух, який живе на екрані, коли нічого не
   робиш. Шар по краю залитий конічним градієнтом (вузький сектор
   акценту на прозорому полі), і маскою з нього вирізано все, крім
   півторапіксельної смужки по обводу. Кут веде --ovang, тож смужка
   обходить картку рівно, а не клином від центра. Другий такий самий
   шар, розмитий, дає свічення.

   Кут анімується через @property: де його немає, смужка просто стоїть
   на місці — картка від цього не ламається. */
@property --ovang{syntax:"<angle>";initial-value:0deg;inherits:false}

.ovw .flow > .shell:nth-child(2){position:relative}
.ovw .flow > .shell:nth-child(2)::before,
.ovw .flow > .shell:nth-child(2)::after{content:"";position:absolute;inset:-1px;
  border-radius:23px;padding:1.6px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--ovang),
    transparent 0 80%,
    color-mix(in srgb,var(--accent) 30%,transparent) 85%,
    var(--accent) 88%,
    color-mix(in srgb,var(--accent) 30%,transparent) 91%,
    transparent 96% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:ovOrbit 20s linear infinite}
.ovw .flow > .shell:nth-child(2)::after{padding:3px;filter:blur(6px);opacity:.7}
@keyframes ovOrbit{to{--ovang:360deg}}

/* ---------- 3. клітинки тижня ---------- */
/* Квадрат стоїть на місці: ні появи знизу, ні підйому під курсором —
   ряд від цього смикало (прохання власника 22.10.2026). Лишається
   світло: рамка свого кольору яскравішає, літера підсумку проступає.
   Появу чергою вішає appear.js, тому гасимо саме її клас. */
.ovw .week .day.ap{animation:none;opacity:1;transform:none}
.ovw .day.pos:hover{border-color:color-mix(in srgb,var(--up) 58%,transparent)}
.ovw .day.neg:hover{border-color:color-mix(in srgb,var(--down) 55%,transparent)}
.ovw .day.be:hover{border-color:color-mix(in srgb,var(--be) 50%,transparent)}
.ovw .glow{transition:opacity .3s var(--ease)}
.ovw .day:hover .glow{opacity:.30}

/* ---------- 4. показники ---------- */
/* Підпису періоду над числом немає — відступ під нього теж зайвий. */
.ovw .sum .big{margin-top:0}
/* Рядок показників світлішає під курсором і підкреслюється акцентом. */
.ovw .stats .st{position:relative;transition:background .22s var(--ease)}
.ovw .stats .st::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.ovw .stats .st:hover{background:color-mix(in srgb,var(--text) 3%,transparent)}
.ovw .stats .st:hover::after{transform:scaleX(1)}
.ovw .stats .val{transition:transform .22s var(--ease)}
.ovw .stats .st:hover .val{transform:translateY(-1px)}

/* ---------- 5. шапка кривої ---------- */
/* Підпис «прибуток / збиток · місяць», сам відсоток і просадка
   повторювали те, що стоїть вище великим числом (прохання власника
   22.10.2026). Сітка з числами по осях лишається. Тільки в «Огляді»:
   у журналі та сама картка підписана по-своєму й підпис там потрібен. */
.ovw .plline .chart-lab .t,
.ovw .plline .chart-lab .v,
.ovw .plline .chart-lab .dd{display:none}

/* ---------- 6. рік у правій колонці ---------- */
/* Сьогоднішній день дихає кільцем, крапка під курсором підростає, а
   зрідка один день спалахує ореолом — його вибирає ov-fx.js. */
.ovq .od{transition:transform .14s var(--ease)}
.ovq .od:hover{transform:scale(1.5);z-index:1}
.ovq .od.today::after{animation:ovToday 2.4s ease-in-out infinite}
@keyframes ovToday{
  0%,100%{box-shadow:0 0 0 1.5px var(--accent)}
  50%{box-shadow:0 0 0 3.5px color-mix(in srgb,var(--accent) 22%,transparent)}
}
.ovq .od.ov-spark::after{animation:ovSpark 1.1s ease-out}
@keyframes ovSpark{
  0%  {box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  45% {box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
  100%{box-shadow:0 0 0 7px transparent}
}
/* Поточний квартал: підпис тихо світиться й раз за коло смужки
   яскравішає — той самий такт, що й обвід картки. */
.ovq .q.now .qh b{animation:ovNow 20s ease-in-out infinite}
@keyframes ovNow{
  0%,70%,100%{text-shadow:0 0 14px color-mix(in srgb,var(--accent) 45%,transparent)}
  80%        {text-shadow:0 0 22px color-mix(in srgb,var(--accent) 85%,transparent)}
}

@media (prefers-reduced-motion:reduce){
  .ovw .flow > .shell:nth-child(2)::before,
  .ovw .flow > .shell:nth-child(2)::after{animation:none!important;display:none}
  .ovw .flow > .shell:nth-child(2) > .core::before{animation:none!important}
  .ovq .od.today::after,.ovq .od.ov-spark::after,.ovq .q.now .qh b{animation:none!important}
}

/* ---------- 7. смужка по обводу картки журналу й аналізу дня ---------- */
/* Те саме коло, що на картці підсумку в «Огляді» (прохання власника
   23.10.2026): той самий кут --ovang, той самий такт 20 секунд, той
   самий конічний сектор акценту з розмитим двійником під ним.

   Носять смужку чотири оболонки:
     .jpane-cal              сітка днів у журналі
     .jpane-list             місячна таблиця
     .card[data-pagi="all"]  картка «Всі угоди»
     .dv-strip               вікно показників в «Аналізі дня»
   Перемикач режимів журналу міняє вміст картки, а не її обвід, тож
   смужка не зникає ні на «Таблиці», ні на «Всіх угодах».

   Радіус спільний: усі чотири круглиться на var(--r), тож обвід на
   піксель більший. Жодне правило не чіпає вміст карток і шапки —
   смужка лежить окремим шаром поверх краю й не ловить курсор. */
.jpane-cal,
.jpane-list,
.card[data-pagi="all"],
.dv-strip{position:relative}

/* Вікно показників різало собі все, що виходить за край (day.css).
   Смужка стоїть на самому обводі, на піксель назовні, тож її зрізало
   повністю. Клітинки .s власного тла не мають — тільки волосяні лінії
   між собою, — отже зрізати нема чого, і край можна відпустити. */
.dv-strip{overflow:visible}

.jpane-cal::before,.jpane-cal::after,
.jpane-list::before,.jpane-list::after,
.card[data-pagi="all"]::before,
.card[data-pagi="all"]::after,
.dv-strip::before,.dv-strip::after{content:"";position:absolute;inset:-1px;
  border-radius:calc(var(--r) + 1px);padding:1.6px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--ovang),
    transparent 0 80%,
    color-mix(in srgb,var(--accent) 30%,transparent) 85%,
    var(--accent) 88%,
    color-mix(in srgb,var(--accent) 30%,transparent) 91%,
    transparent 96% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:ovOrbit 20s linear infinite}
.jpane-cal::after,
.jpane-list::after,
.card[data-pagi="all"]::after,
.dv-strip::after{padding:3px;filter:blur(6px);opacity:.7}

@media (prefers-reduced-motion:reduce){
  .jpane-cal::before,.jpane-cal::after,
  .jpane-list::before,.jpane-list::after,
  .card[data-pagi="all"]::before,
  .card[data-pagi="all"]::after,
  .dv-strip::before,.dv-strip::after{animation:none!important;display:none}
}