/* ==========================================================================
   incline.css — the tilting-horizon slope gauge.
   ========================================================================== */

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

.slope-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: 6px 0 2px;
    overflow: hidden;
}

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

/* True horizontal, for the slope to be read against. */
.slope-base {
    stroke: var(--outline-variant);
    stroke-width: 2;
    stroke-dasharray: 5 7;
}

.slope-group {
    transform-origin: 150px 84px;
    transition: transform .4s var(--ease-spring);
}

.slope-line {
    stroke: var(--primary);
    stroke-width: 3.5;
    stroke-linecap: round;
}

.slope-fill {
    fill: var(--primary);
    opacity: .22;
}

.slope-dot {
    fill: var(--bubble-fill);
    stroke: var(--bubble-edge);
    stroke-width: 1.5;
}

/* The wedge between horizontal and the slope. */
.slope-arc {
    fill: none;
    stroke: var(--tertiary);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.slope-tag {
    fill: var(--on-surface-variant);
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 700;
    text-anchor: middle;
}

.tool.level .slope-tag {
    fill: var(--primary);
}

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