/* Wspólny wykres cen (static/js/wykres_svg.js): okno historii, karta produktu, LEGO, magazyn.
   Kolory z tokenów „Metki” (style.css :root), z zapasem dla stron, które ich nie mają. */
.wsvg { position: relative; color: var(--m-ink, #171A21); }
.wsvg-plot { position: relative; margin-right: 76px; height: var(--wsvg-wys, 250px); }
.wsvg--mini { height: 100%; display: flex; flex-direction: column; }
.wsvg--mini .wsvg-plot { margin: 0; height: auto; flex: 1; min-height: 0; }
.wsvg--mini .wsvg-os { margin: 6px 0 0; height: 16px; font-size: 11px; }
.wsvg-svg {
    display: block; width: 100%; height: 100%; overflow: visible; touch-action: pan-y;
    animation: wsvgOdslon .9s cubic-bezier(.3, .7, .2, 1) both;
}
/* Linia „rysuje się” od lewej - odsłanianie zamiast animacji kreski, bo kreska
   nie skaluje się z viewBoxem (non-scaling-stroke). */
@keyframes wsvgOdslon { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.wsvg-siatka { stroke: var(--m-lin, #E3E6EB); stroke-width: 1; }
.wsvg-srednia { stroke-width: 1.5; stroke-dasharray: 6 6; }
.wsvg-linia { stroke-width: 3; }
.wsvg-linia.is-druga { stroke-width: 2; }
/* Najtańszy sklep na chwilę zniknął i wrócił z tą samą ceną (wykres_svg.js, odcinki). */
.wsvg-linia.is-przerwa { stroke-dasharray: 4 5; opacity: .45; }
.wsvg--mini .wsvg-linia { stroke-width: 2; }
.wsvg-wypelnienie { opacity: .09; }
:root[data-theme="dark"] .wsvg-wypelnienie { opacity: .06; }
.product-mini-chart .wsvg-wypelnienie { opacity: .09; }
.wsvg-kursor { stroke: var(--m-mut, #5C6372); stroke-width: 1; stroke-dasharray: 3 3; }
.wsvg-ylab {
    position: absolute; right: -76px; width: 64px; transform: translateY(-50%);
    font-size: 12px; font-weight: 600; color: var(--m-mut, #5C6372); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wsvg-min {
    position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    background: var(--m-rek, #0B7A4B); box-shadow: 0 0 0 2px var(--m-pow, #fff);
    animation: wsvgPojaw .3s .8s both;
}
.wsvg-min::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit;
    animation: wsvgPing 1.8s 1.1s ease-out infinite;
}
.wsvg--mini .wsvg-min { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.wsvg--mini .wsvg-min::after { animation: none; }
/* Każdy zapis ceny w oknie historii (opcja kropkiZmian) - widać, ile zmian było naprawdę. */
.wsvg-zmiana {
    position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; box-sizing: border-box;
    background: var(--m-pow, #fff); border: 2px solid var(--m-zar, #E8590C); pointer-events: none;
    animation: wsvgPojaw .3s .8s both;
}
/* Okres przed pierwszym zapisem: kreskowany pas zamiast pustki, w której linia „stała”. */
.wsvg-bez-danych {
    position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    border-right: 1px dashed var(--m-lin2, #D3D7DE);
    background: repeating-linear-gradient(135deg, transparent 0 7px, var(--m-pow2, #F4F5F7) 7px 9px);
}
.wsvg-bez-danych span:not(:empty) {
    padding: 3px 9px; border-radius: 8px; background: var(--m-pow, #fff); border: 1px solid var(--m-lin, #E3E6EB);
    font-size: 12px; font-weight: 600; color: var(--m-mut, #5C6372); text-align: center;
}
@keyframes wsvgPing { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
@keyframes wsvgPojaw { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.wsvg-tip {
    position: absolute; top: -6px; transform: translate(-50%, -100%); z-index: 2;
    padding: 7px 10px; border-radius: 10px; background: var(--m-ink, #171A21); color: var(--m-pow, #fff);
    font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums;
}
.wsvg-tip strong { font-weight: 800; }
.wsvg-tip small { opacity: .75; }
.wsvg-tip > strong:first-child:not(:last-child) { display: block; margin-bottom: 2px; }
.wsvg-tip span { display: flex; align-items: center; gap: 6px; }
.wsvg-tip i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.wsvg-os { position: relative; height: 22px; margin: 8px 76px 0 0; font-size: 12px; font-weight: 600; color: var(--m-mut, #5C6372); }
.wsvg-os span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.wsvg-os span::before {
    content: ''; position: absolute; left: 50%; top: -8px; width: 1px; height: 5px; background: var(--m-lin2, #D3D7DE);
}
.wsvg-os span.is-lewy { transform: none; }
.wsvg-os span.is-lewy::before { left: 0; }
.wsvg-os span.is-prawy { transform: translateX(-100%); }
.wsvg-os span.is-prawy::before { left: auto; right: 0; }
.wsvg-pusto {
    display: flex; align-items: center; justify-content: center; min-height: 160px; padding: 16px;
    color: var(--m-mut, #5C6372); font-size: 14px; text-align: center;
    border: 1px dashed var(--m-lin2, #D3D7DE); border-radius: 12px;
}
.wsvg-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--m-mut, #5C6372); }
.wsvg-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.wsvg-legenda i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.wsvg-legenda i.is-kropka { width: 9px; height: 9px; border-radius: 50%; }
.wsvg-legenda i.is-pusta { box-sizing: border-box; border: 2px solid currentColor; background: none; }
.wsvg-legenda i.is-przerywana { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) !important; }
@media (max-width: 600px) {
    .wsvg-plot { margin-right: 64px; }
    /* 14 px odstępu od krawędzi wykresu - kropka „najniżej” przy dzisiejszej cenie nie wchodzi na podpis. */
    .wsvg-ylab { right: -64px; width: 50px; font-size: 11px; }
    .wsvg-os { margin-right: 64px; }
}
/* Przerysowanie w trakcie przybliżania (WykresSvg.przyblizany) - bez odsłaniania od lewej
   przy każdej klatce; pulsowanie kropki zostaje. */
.wsvg--statyczny .wsvg-svg, .wsvg--statyczny .wsvg-min, .wsvg--statyczny .wsvg-zmiana { animation: none; }
.wsvg-przesuwalny .wsvg-svg { cursor: grab; }
.wsvg-przesuwalny.is-ciagniety .wsvg-svg { cursor: grabbing; }
.is-ciagniety { user-select: none; }
@media (prefers-reduced-motion: reduce) {
    .wsvg-svg, .wsvg-min, .wsvg-min::after { animation: none; }
}