/*
 * The afterburner readout, bottom left of the flight view.
 *
 * It takes the corner the left rail empties: css/space3d.css hides
 * .pp-rail-left while body carries fly-mode, and this shows only then, on the
 * same bottom offset and the same left margin, so the two share one seat.
 *
 * The key cap is faded rather than hidden, so revealing it never moves the
 * row it sits in. js/three/burner-lamp.js writes the two classes.
 *
 * docs/notes/css/burner-lamp.css.md
 */

.pp-burner {
    position: fixed;
    left: 24px;
    bottom: calc(var(--pp-band) + var(--pp-edge));
    z-index: 95;
    display: none;
    align-items: center;
    gap: 9px;
    overflow: hidden;
    padding: 11px 18px;
    background: rgba(23, 30, 43, 0.82);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: default;
    transition: border-color 0.2s ease;
}

body.fly-mode .pp-burner {
    display: inline-flex;
}

/*
 * The wind-up, as a fill behind the label. It follows the ramp and not the
 * key, so pressing Shift walks it across over the burner's own spin up and
 * letting go walks it back.
 */
.pp-burner-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: rgb(102 163 209 / 32%);
    pointer-events: none;
    transition: width 0.12s linear;
}

/* Everything readable sits over that fill. */
.pp-burner > i,
.pp-burner > span {
    position: relative;
}

.pp-burner i {
    color: rgba(255, 255, 255, 0.75);
}

.pp-burner.lit {
    border-color: rgba(255, 255, 255, 0.32);
}

.pp-burner.lit i {
    color: #ffffff;
}

.pp-burner-state {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 400;
}

/* The key, on hover. Faded rather than hidden, so showing it never moves the
   row it sits in. */
.pp-burner-hint {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.pp-burner:hover .pp-burner-hint {
    opacity: 1;
}

/* The rail drops to a tighter margin on a narrow screen and this follows it. */
@media (max-width: 640px) {
    .pp-burner {
        left: 12px;
        gap: 7px;
        padding: 9px 13px;
        font-size: 12px;
    }
}