.osnova-chart-host {
    position: relative;
    min-width: 0;
    min-height: clamp(260px, 30vw, 320px);
}
.osnova-chart-host canvas {
    touch-action: pan-y;
}
.osnova-chart-host--zoomed canvas {
    cursor: grab;
}
.osnova-chart-host--zoomed canvas:active {
    cursor: grabbing;
}
.osnova-chart-toolbar {
    position: absolute;
    top: 4px;
    inset-inline: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
.osnova-chart-hint {
    margin-inline-end: auto;
    max-width: 150px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-sec);
}
.osnova-chart-toolbar .osnova-chart-button {
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    border-radius: 10px;
    transition: transform var(--motion-duration-press, 100ms) var(--motion-ease-move, ease);
}
.osnova-chart-button:active:not(:disabled) {
    transform: scale(0.96);
}
@media (prefers-reduced-motion: reduce) {
    .osnova-chart-toolbar .osnova-chart-button { transition: none; }
    .osnova-chart-button:active:not(:disabled) { transform: none; }
}