/* App-like navigation (see app-nav.js): smooth page changes, a steady header / bottom bar, instant tap feedback. */

/* A page change cross-fades instead of flashing white. Header, sidebar and bottom bar keep their place. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 140ms cubic-bezier(.4, 0, 1, 1) both app-out; }
::view-transition-new(root) { animation: 240ms cubic-bezier(0, 0, .2, 1) both app-in; }
@keyframes app-out { to { opacity: 0; } }
@keyframes app-in { from { opacity: 0; transform: translateY(8px); } }
[data-vt="header"] { view-transition-name: app-header; }
[data-vt="sidebar"] { view-transition-name: app-sidebar; }
[data-vt="bottomnav"] { view-transition-name: app-bottomnav; }
::view-transition-group(app-header), ::view-transition-group(app-sidebar), ::view-transition-group(app-bottomnav) { animation-duration: 0s; }
::view-transition-old(app-header), ::view-transition-old(app-sidebar) { animation: none; display: none; }
::view-transition-new(app-header), ::view-transition-new(app-sidebar) { animation: none; }
::view-transition-old(app-bottomnav) { animation: 120ms both app-out; }
::view-transition-new(app-bottomnav) { animation: 160ms both app-fade; }
@keyframes app-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Taps answer at once: no 300 ms wait, and a soft press on anything tappable. */
a, button, input, select, textarea, label, summary, [role="button"], [onclick] { touch-action: manipulation; }
html { -webkit-tap-highlight-color: transparent; }
a[href]:active, button:active, [role="button"]:active, summary:active { opacity: .78; }

/* The thin bar at the top while the next page is on its way. */
#appNavBar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 2147483000; pointer-events: none; opacity: 0; transition: opacity .25s; }
#appNavBar.on { opacity: 1; }
#appNavBar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #6366f1, #ec4899, #f59e0b); border-radius: 0 3px 3px 0; box-shadow: 0 0 10px rgba(99, 102, 241, .55); }

/* A form button that has been pressed shows a small spinner and cannot be pressed twice. (No full-screen curtain.) */
.app-busy { opacity: .72 !important; cursor: progress; }
.app-busy::after { content: ''; display: inline-block; width: .95em; height: .95em; margin-left: .5em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.14em; animation: app-spin .7s linear infinite; }
html.app-posting form button[type="submit"], html.app-posting form input[type="submit"], html.app-posting form button:not([type]) { pointer-events: none; }
@keyframes app-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .app-busy::after { animation: none; } }