/* Machine setup behind the header cog: the cog itself, its state dot, and the
   state summary at the top of the dialog. The setup panels inside the dialog are
   the page's own markup, moved there by commissioning_dialog.js, so they keep the
   styles they already had. */

.app-cog-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.app-cog-btn:hover {
    color: var(--text-primary);
    border-color: rgba(167, 78, 158, 0.45);
    background: rgba(167, 78, 158, 0.08);
}

/* Amber until the camera, the calibration and the bed are all in place. Hiding
   setup behind a cog costs the glance that used to say the machine was ready, so
   the cog gives it back without being opened. */
.app-cog-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-warning);
    border: 2px solid var(--bg-app);
}

.app-cog-btn.is-ready .app-cog-dot {
    background: var(--color-success);
}

/* The dialog holds three or four setup blocks, so it is wider than the wizards
   this shell was built for. */
.gp-panel-wide {
    width: min(720px, 95vw);
}

.cm-state {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-app);
}

.cm-state-row {
    display: grid;
    grid-template-columns: 10px 110px 1fr;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
}

.cm-state-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-warning);
    transform: translateY(-1px);
}

.cm-state-dot.is-ok {
    background: var(--color-success);
}

.cm-state-label {
    color: var(--text-secondary);
}

.cm-state-text {
    color: var(--text-primary);
}