/* ==========================================================================
   angle.css — the protractor.
   ========================================================================== */

.instrument {
    padding: 4px 0 8px;
}

.protractor-stage {
    display: grid;
    place-items: center;
    border-radius: 26px;
    background: linear-gradient(180deg, var(--sc-highest), color-mix(in srgb, var(--sc-highest) 88%, var(--outline)));
    border: 1px solid var(--outline-variant);
    padding: 8px 0 4px;
    overflow: hidden;
}

/* Capped, or the drawing grows as tall as it is wide on a desktop and pushes
   the controls off the screen. */
.protractor {
    width: 100%;
    max-width: 440px;
    height: auto;
    display: block;
}

.proto-face {
    fill: color-mix(in srgb, var(--sc-lowest) 55%, transparent);
    stroke: var(--outline-variant);
    stroke-width: 1.5;
}

.proto-ticks line {
    stroke: var(--outline);
    stroke-width: 1;
}

.proto-ticks line.major {
    stroke-width: 1.8;
}

.proto-ticks text {
    fill: var(--on-surface-variant);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    text-anchor: middle;
}

.proto-wedge {
    fill: var(--primary);
    opacity: .2;
}

.proto-arm {
    stroke-linecap: round;
    transform-origin: 150px 160px;
}

.proto-arm.ref {
    stroke: var(--outline);
    stroke-width: 2.4;
    stroke-dasharray: 6 5;
}

.proto-arm.live {
    stroke: var(--primary);
    stroke-width: 3.6;
    transition: transform .35s var(--ease-spring);
}

.proto-pivot {
    fill: var(--on-surface);
}

.tool.holding .proto-arm.live {
    stroke: var(--tertiary);
}

.controls--secondary {
    margin-top: 14px;
}

.controls--secondary .btn {
    flex: 1 1 150px;
}

#holdBtn[aria-pressed="true"] {
    background: var(--tertiary-container);
    color: var(--on-tertiary-container);
}

@media (prefers-reduced-motion: reduce) {
    .proto-arm.live {
        transition: none;
    }
}