/* Przeksztalcenia wykresow — karty z malymi, klikalnymi wykresami. */
.prz-demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 168px;
    gap: 18px;
    align-items: center;
    margin: 24px 0;
    padding: 16px;
    border: 1px solid var(--line, #dbe3ef);
    border-radius: 14px;
    background: var(--soft, #f7f9fd);
}

.prz-plot { min-width: 0; }
.prz-plot svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }

.prz-sterowanie { display: flex; flex-direction: column; gap: 9px; }
.prz-akcje { display: flex; flex-wrap: wrap; gap: 6px; }

.prz-demo button {
    min-width: 38px;
    min-height: 34px;
    padding: 5px 9px;
    border: 1px solid #c7b6f2;
    border-radius: 8px;
    background: #fff;
    color: #4c2f8f;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.prz-demo button:hover { background: #efe9ff; border-color: #7c3aed; }
.prz-demo button:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }

.prz-demo label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted, #5b6478);
}

.prz-demo input[type="range"] { width: 100%; accent-color: #7c3aed; }

.prz-wzor {
    grid-column: 1 / -1;
    margin: 0;
    padding: 10px 12px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #e2d9f7;
    color: #3b1f78;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
}

.prz-podpowiedz {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted, #5b6478);
    font-size: 12.5px;
    text-align: center;
}

:root[data-motyw="ciemny"] .prz-demo { background: #1f1b30; border-color: #3a3354; }
:root[data-motyw="ciemny"] .prz-demo button { background: #2a2440; border-color: #5b4b86; color: #d8ccff; }
:root[data-motyw="ciemny"] .prz-demo button:hover { background: #3a3158; }
:root[data-motyw="ciemny"] .prz-wzor { background: #171326; border-color: #463a68; color: #d8ccff; }

@media (max-width: 760px) {
    .prz-demo { grid-template-columns: 1fr; }
    .prz-sterowanie { flex-direction: row; flex-wrap: wrap; align-items: end; }
    .prz-akcje { width: 100%; }
    .prz-demo label { flex: 1 1 120px; }
}

/* Maly wykres przy przykladzie: bez panelu sterowania, tylko obraz i wzor. */
.prz-demo.prz-mini {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 14px auto 18px;
    padding: 10px;
}
.prz-demo.prz-mini .prz-wzor,
.prz-demo.prz-mini .prz-podpowiedz { grid-column: 1; }
.prz-demo.prz-mini .prz-wzor { font-size: 15px; padding: 7px 9px; }