/* ===========================================
   Floating dirty-state save bar
   Hidden until the bound form is modified (bindDirtyForm in js/save_bar.js
   toggles .show on the bar and .dirty on the host), then fixed to the bottom
   of the viewport so it follows scrolling. position:fixed, not sticky — an
   ancestor with overflow:auto/hidden (.main-content) breaks sticky.
   =========================================== */
.save-bar {
    display: none;
    position: fixed;
    bottom: 1.25rem;
    right: 2rem;
    z-index: 1000;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1rem 0.7rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
}
.save-bar.show { display: flex; }
.save-bar-hint {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-warning);
}
/* Room so the floating bar never hides the last content when scrolled down. */
.dirty:has(.save-bar) { padding-bottom: 5rem; }

/* Phones: the hint on its own line, the buttons below sharing the width. */
@media (max-width: 600px) {
    .save-bar.show { display: grid; grid-template-columns: 1fr 1fr; }
    .save-bar { left: 1rem; right: 1rem; bottom: 1rem; gap: 0.5rem; padding: 0.6rem 0.75rem 0.75rem; }
    .save-bar-hint { grid-column: 1 / -1; }
    .save-bar .btn { margin: 0; width: 100%; }
}