/* ==========================================================================
   plumb.css — the plumb bob on a string.
   ========================================================================== */

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

.plumb-stage {
    display: grid;
    place-items: center;
    padding: 4px 0 2px;
    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);
}

.plumb-svg {
    width: min(300px, 74vw);
    height: auto;
    display: block;
}

/* The frame — this is what the phone (and the wall) is doing. */
.frame-edge {
    stroke: var(--outline);
    stroke-width: 2;
    stroke-dasharray: 6 6;
    opacity: .8;
}

.frame-guide {
    stroke: var(--outline-variant);
    stroke-width: 1.5;
}

/* The bob — this is what gravity is doing. */
.bob-group {
    transform-origin: 120px 16px;
    transition: transform .4s var(--ease-spring);
}

.bob-line {
    stroke: var(--on-surface);
    stroke-width: 2.2;
    stroke-linecap: round;
}

.bob-body {
    stroke: var(--bubble-edge);
    stroke-width: 1.5;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28));
}

.bob-tip {
    fill: var(--on-surface);
}

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

.tool.level .bob-line {
    stroke: var(--primary);
}

.tool.level .bob-body {
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--bubble-fill) 80%, transparent));
}

@media (prefers-reduced-motion: reduce) {
    .bob-group {
        transition: none;
    }
}