.scale {
    user-select: none;
}

.scale-label {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 500;
    fill: var(--primary-color);
    text-anchor: middle;
}

.scale-sublabel {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    fill: var(--text-secondary);
    text-anchor: middle;
}

.scale line {
    shape-rendering: crispEdges;
}

.tick {
    stroke: var(--scale-marks);
    stroke-width: 1;
}

.tick.major {
    stroke-width: 2;
}

.tick.minor {
    stroke-width: 0.5;
    opacity: 0.7;
}

.tick-label {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    fill: var(--scale-marks);
    text-anchor: middle;
    user-select: none;
    letter-spacing: 0.5px;
}

.slide {
    cursor: ew-resize;
    transition: transform 0.05s linear;
}

.slide:hover rect {
    stroke: var(--accent-color);
    stroke-width: 2;
}

.cursor {
    cursor: ew-resize;
    z-index: 10;
}

.cursor-hit-area {
    cursor: ew-resize;
    width: 40px;
    x: -20px;
}

.cursor line {
    pointer-events: none;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
}

.cursor rect {
    cursor: grab;
}

.cursor rect:active {
    cursor: grabbing;
}

.stator {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

#scaleA .tick-label {
    font-size: 12px;
}

#scaleC .tick-label, #scaleD .tick-label {
    font-size: 14px;
    font-weight: 500;
}

.scale-marking {
    stroke: var(--scale-marks);
    fill: none;
}

.dragging {
    cursor: grabbing !important;
}

.dragging .slide {
    transition: none;
}

.animated-example .slide {
    transition: transform 1s ease-in-out;
}

.animated-example .cursor {
    transition: transform 1s ease-in-out;
}

.highlight-scale {
    animation: highlight 1s ease-in-out;
}

@keyframes highlight {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
        filter: brightness(1.2);
    }
}

.slide-rule-focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
}

@media (hover: none) and (pointer: coarse) {
    .cursor-hit-area {
        width: 100px;
        x: -50px;
    }
    
    .cursor rect {
        width: 60px;
        x: -30px;
        height: 30px;
    }
    
    .slide {
        touch-action: pan-y;
    }
    
    .cursor {
        touch-action: pan-y;
    }
}

/* Specific optimizations for smaller screens (phones) */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) {
    .cursor-hit-area {
        width: 120px;
        x: -60px;
    }
    
    /* Add a subtle visual indicator on touch */
    .cursor.dragging .cursor-hit-area {
        fill: var(--cursor-color);
        opacity: 0.1;
    }
}

@media (max-width: 768px) {
    .scale-label {
        font-size: 20px;
    }
    
    .tick-label {
        font-size: 12px;
    }
    
    #scaleA .tick-label {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .scale-label {
        font-size: 16px;
    }
    
    .tick-label {
        font-size: 10px;
    }
    
    #scaleA .tick-label {
        font-size: 8px;
    }
}