/* App Specific Styles */

.scanline {
    width: 100%;
    height: 100px;
    z-index: 50;
    position: fixed;
    pointer-events: none;
    top: 50%;
    left: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.1;
    animation: scan 8s linear infinite;
}

@keyframes scan {
    0% { transform: translateY(-100vh); }
    100% { transform: translateY(100vh); }
}

/* Tick rendering optimizations */
.tick {
    position: absolute;
    background-color: #52525b; /* gray-600 */
}

/* Horizontal ticks */
.orient-h .tick {
    top: 0;
    width: 1px;
}
.orient-h .tick.major {
    height: 20px;
    background-color: #d4d4d8; /* gray-300 */
}
.orient-h .tick.minor {
    height: 10px;
}

/* Vertical ticks */
.orient-v .tick {
    left: 0;
    height: 1px;
}
.orient-v .tick.major {
    width: 20px;
    background-color: #d4d4d8;
}
.orient-v .tick.minor {
    width: 10px;
}

/* Numbers */
.tick-label {
    position: absolute;
    font-size: 10px;
    color: #a1a1aa; /* gray-400 */
    user-select: none;
}
.orient-h .tick-label {
    top: 24px;
    transform: translateX(-50%);
}
.orient-v .tick-label {
    left: 24px;
    transform: translateY(-50%);
}

/* Orientations */
.orient-v #calliper {
    border-left: none;
    border-right: none;
    border-top: 1px solid #22c55e;
    border-bottom: 1px solid #22c55e;
}
.orient-v .calliper-handle {
    cursor: ns-resize;
    width: 100%;
    height: 32px;
}
.orient-v .calliper-handle.left-handle {
    top: -16px;
    left: 0;
    bottom: auto;
}
.orient-v .calliper-handle.right-handle {
    bottom: -16px;
    left: 0;
    top: auto;
    right: auto;
}
.orient-v .calliper-handle > div {
    width: 48px;
    height: 6px;
}

/* Calliper Readout Rotation */
.orient-v #readout-box {
    transform: translateY(-50%) rotate(90deg);
    top: 50%;
    left: -40px;
}