/* Shared subtle motion + a thin top-of-page loading bar, used across the
   briefing list, grid workspace, and login screens. Kept intentionally
   small: nothing here should be noticeable on its own, only felt as
   responsiveness. */

#top-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #a8e8c4, #4fb87d 65%, #2f6f63);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: width 0.28s ease-out, opacity 0.2s ease;
}
#top-loading-bar.is-active { opacity: 1; }
#top-loading-bar.is-done {
  width: 100% !important;
  transition: width 0.15s ease-out, opacity 0.35s ease 0.12s;
  opacity: 0;
}

@keyframes rt-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.rt-fade-in { animation: rt-fade-in 0.28s ease both; }

@keyframes rt-flash-saved {
  0% { box-shadow: 0 0 0 2px rgba(79, 184, 125, 0.9); }
  100% { box-shadow: 0 0 0 2px rgba(79, 184, 125, 0); }
}
.rt-flash-saved { animation: rt-flash-saved 0.9s ease-out; }

@media (prefers-reduced-motion: reduce) {
  #top-loading-bar { transition: opacity 0.2s ease; }
  .rt-fade-in, .rt-flash-saved { animation: none; }
}

/* The native [hidden] attribute is only a `display: none` default in the
   user-agent stylesheet — any author rule that sets `display` on the same
   element (e.g. `.date-display { display: flex }`) silently wins over it in
   every browser, since author styles always beat UA styles regardless of
   selector specificity. This is not a browser quirk to special-case; it
   reasserts `hidden` as authoritative everywhere it's used to toggle
   visibility (reveal/revert date fields, overlays, panels). */
[hidden] { display: none !important; }