/* Municipal OS — motion & finish layer. Loaded after the mock's own styles; everything here is
   additive and every animation respects prefers-reduced-motion. */

:root { --ease: cubic-bezier(.16, 1, .3, 1); }

/* Interactive elements answer the pointer */
.btn, .iconbtn, .nav button, .search-open, .chat-launch, .textlink, .chat-suggestions button,
.intel-tabs button, input, select, textarea, .task, .metric {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .22s ease, transform .18s var(--ease), opacity .18s ease;
}
.btn:not(:disabled):not(.ghost):hover { transform: translateY(-1px); box-shadow: 0 6px 16px #0b4f5222; }
.btn.secondary:not(:disabled):hover { box-shadow: 0 4px 12px #173f4514; }
.btn:not(:disabled):active, .iconbtn:active, .chat-launch:active, .search-open:active,
.chat-suggestions button:active { transform: scale(.97); }
.chat-launch:hover { transform: translateY(-2px); box-shadow: 0 12px 30px #123c4944; }
.search-open:hover { border-color: #b9d3c9; background: #fff; color: #4f6d70; }
.task:hover { box-shadow: 0 6px 18px #173f4514; border-color: #c9dccf; }
.metric:hover { box-shadow: 0 8px 22px #173f4516; }
input:focus, select:focus, textarea:focus { border-color: #8cc7b5; box-shadow: 0 0 0 3px #8cc7b533; outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* A view arriving: content rises in, lightly staggered */
@keyframes mos-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mos-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mos-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
main.view-enter > * { animation: mos-rise .5s var(--ease) both; }
main.view-enter > *:nth-child(2) { animation-delay: .04s; }
main.view-enter > *:nth-child(3) { animation-delay: .08s; }
main.view-enter > *:nth-child(4) { animation-delay: .12s; }
main.view-enter > *:nth-child(5) { animation-delay: .16s; }
main.view-enter > *:nth-child(n+6) { animation-delay: .2s; }
main.view-enter .progress > span { transform-origin: left; animation: mos-grow .9s var(--ease) .15s both; }

/* Dialog: rises in over a softly fading backdrop; clicking the backdrop closes it */
dialog[open] { animation: mos-pop .26s var(--ease); }
dialog[open]::backdrop { animation: mos-fade .26s ease; }
@keyframes mos-pop { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

/* Toast: slides up and fades instead of popping */
.toast { display: block; opacity: 0; visibility: hidden; transform: translate(-50%, 14px);
  transition: opacity .25s ease, transform .35s var(--ease), visibility 0s linear .35s; pointer-events: none; }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .25s ease, transform .35s var(--ease), visibility 0s; }

/* Assistant panel: grows from its launcher */
.chat { display: flex; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.97); transform-origin: bottom right;
  transition: opacity .22s ease, transform .32s var(--ease), visibility 0s linear .32s; }
.chat.open { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .32s var(--ease), visibility 0s; }
.message.mos-new { animation: mos-rise .35s var(--ease) both; }
.message.mos-typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; }
.message.mos-typing i { width: 6px; height: 6px; border-radius: 50%; background: #7fa59b; display: block;
  animation: mos-dot 1.1s ease-in-out infinite; }
.message.mos-typing i:nth-child(2) { animation-delay: .15s; }
.message.mos-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mos-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Mobile navigation: the overlay fades with the drawer */
.nav-overlay { transition: opacity .25s ease; }

/* Work in progress reads as work in progress */
.mos-running .progress > span {
  background-image: linear-gradient(90deg, transparent 0, #ffffff55 50%, transparent 100%);
  background-size: 200% 100%; animation: mos-shimmer 1.2s linear infinite; transition: width .5s var(--ease);
}
@keyframes mos-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Phones: the assistant launcher becomes a round button so it stops covering cards and buttons */
@media (max-width: 700px) {
  .chat-launch { width: 54px; height: 54px; padding: 0; border-radius: 50%; justify-content: center; gap: 0; font-size: 0; }
  .chat-launch .icon, .chat-launch svg { width: 22px; height: 22px; margin: 0; }
  .chat { height: min(540px, calc(100dvh - 110px)); }
}

/* Single-column layouts may shrink below their widest child (a plain 1fr can't), so nothing
   pushes the page sideways on phones; wide tables scroll inside their card instead. */
@media (max-width: 950px) {
  .grid-main, .detail-grid, .grid-two { grid-template-columns: minmax(0, 1fr); }
}

/* While the phone menu is open, the assistant launcher steps aside */
.menu-open .chat-launch { opacity: 0; pointer-events: none; transform: scale(.9); }