/* v3 unsaved-changes footer (reference §9, plan §11 #96; board TicketSetup):
   sticky at the bottom of the content, only while the form has changes.
   "N unsaved changes" with an amber dot · Discard (ghost) · Save changes
   (primary). Phones: above the tab bar, buttons full height. While it shows,
   the page keeps focused fields clear of it (WCAG 2.4.11, core §5).
   Macro: core/components/_lg_savebar.html; behaviour js/v3/dirty.js. */

.lg-savebar {
  position: sticky;
  bottom: 0;
  z-index: var(--layer-bar);
  /* Full content width, down to the bottom edge (cancels the content padding). */
  margin: 0 calc(var(--space-8) * -1) calc(var(--space-8) * -1);
  padding: var(--space-3) var(--space-8);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
/* Motion 319 (2): slides up 200ms when something changes, leaves 140ms on
   Discard or after a save (display transitions with allow-discrete, so the
   [hidden] state can animate out; no JS timers). Reduced motion: a short fade. */
.lg-savebar {
  transition: transform var(--dur-enter) var(--ease), opacity var(--dur-enter) var(--ease),
              display var(--dur-enter) allow-discrete;
}
@starting-style { .lg-savebar:not([hidden]) { transform: translateY(100%); opacity: 0; } }
.lg-savebar[hidden] {
  display: none;
  transform: translateY(100%);
  opacity: 0;
  transition-duration: var(--dur-exit);
}
@media (prefers-reduced-motion: reduce) {
  .lg-savebar, .lg-savebar[hidden] { transform: none; transition-duration: 100ms; }
  @starting-style { .lg-savebar:not([hidden]) { transform: none; } }
}
.lg-savebar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.lg-savebar__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--warning);
  font-size: var(--size-label);
  font-weight: 500;
}
.lg-savebar__dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: currentColor; }
.lg-savebar__actions { display: flex; gap: var(--space-2); margin-inline-start: auto; }
html[data-lg-savebar] { scroll-padding-bottom: calc(var(--control-height) + var(--space-6) + var(--space-2)); }

@media (max-width: 39.99em) {
  .lg-savebar {
    bottom: calc(var(--bar-height) + 1px + env(safe-area-inset-bottom));   /* the tab bar + its top border */
    margin: 0 calc(var(--space-4) * -1) calc(var(--space-6) * -1);
    padding: var(--space-3) var(--space-4);
  }
  .lg-savebar__actions { flex: 1 0 100%; }
  .lg-savebar__actions > .lg-btn { flex: 1; min-height: var(--control-height-touch); }
  html[data-lg-savebar] {
    scroll-padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom) + var(--control-height-touch) * 2 + var(--space-6));
  }
}