/* Quick feedback and a stable shell, without a full-screen loading veil. */
:root {
  --motion-fast: 180ms;
  --motion-normal: 280ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --app-footer-height: 0px;
  --app-sidebar-sticky-height: 0px;
  --app-topbar-height: 72px;
  --app-sidebar-width: 252px;
}
.app-main { display: flex; flex-direction: column; min-height: calc(100vh - var(--app-sidebar-sticky-height)); min-height: calc(100svh - var(--app-sidebar-sticky-height)); padding-bottom: 0; }
.app-main > .app-content { flex: 1 0 auto; }
.app-topbar { position: sticky; top: var(--app-sidebar-sticky-height); z-index: 20; }
.app-main > .legal-footer {
  position: static; flex-shrink: 0;
  margin: auto 0 0; min-height: 60px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: #090a0df5; backdrop-filter: blur(16px);
}
@media (max-width: 880px) { :root { --app-sidebar-width: 210px; } }
@media (max-width: 760px) {
  :root { --app-sidebar-width: 0px; --app-topbar-height: 46px; }
  body { min-width: 0; }
  .app-main > .legal-footer {
    margin: auto 0 0; min-height: 90px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    flex-direction: column; gap: 4px; font-size: 11px; line-height: 1.6;
  }
  .app-main > .legal-footer nav { gap: 4px 12px; }
  body:has(.app-shell:not([hidden])) #pilot-test-bug-launcher {
    bottom: calc(var(--app-footer-height) + 10px);
  }
}
@view-transition { navigation: auto; }
.app-sidebar { view-transition-name: app-sidebar; }
.app-topbar { view-transition-name: app-topbar; }
.app-content { view-transition-name: app-content; }
.app-main > .legal-footer { view-transition-name: app-footer; }
::view-transition-group(*) { animation-duration: 280ms; animation-timing-function: var(--motion-ease); }
::view-transition-group(app-footer) { animation: none; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: motion-fade-in 160ms ease both; }
::view-transition-old(app-sidebar), ::view-transition-old(app-topbar), ::view-transition-old(app-footer) { animation: none; }
::view-transition-new(app-sidebar), ::view-transition-new(app-topbar), ::view-transition-new(app-footer) { animation: motion-fade-in 140ms ease both; }
/* Crossfade in place. The page never flies up/down or drags the shell with it. */
::view-transition-old(app-content) { animation: motion-page-out 220ms ease both; }
::view-transition-new(app-content) { animation: motion-fade-in 280ms ease both; }
::view-transition-image-pair(*) { isolation: auto; }
::view-transition-old(*), ::view-transition-new(*) { mix-blend-mode: normal; }
@keyframes motion-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes motion-page-out { to { opacity: 0; } }

html .app-bootstrap-loader {
  position: fixed; z-index: 10000; inset: 0 0 auto; height: 2px;
  display: block; background: transparent; pointer-events: none;
}
html .app-bootstrap-loader::after {
  content: ''; display: block; width: 35%; height: 100%;
  background: #65b2ff; box-shadow: 0 0 10px #0a84ff66;
  animation: motion-progress 1.2s ease-in-out infinite;
}
html .app-bootstrap-loader > * { display: none; }
@keyframes motion-progress { from { transform: translateX(-110%); } to { transform: translateX(290%); } }

.app-shell :is(button, a, input, select, textarea, summary),
.auth-page :is(button, a, input) {
  -webkit-tap-highlight-color: transparent;
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease, box-shadow var(--motion-normal) ease,
    opacity var(--motion-fast) ease, transform var(--motion-normal) var(--motion-ease);
}
.app-shell :is(.work-panel, .workflow-step, .hero-route, .address-row, .route-counter),
.app-shell :is(.note-field, .address-option, .data-tag, .status-pill, .state-badge) {
  transition: border-color var(--motion-normal) ease, background-color var(--motion-normal) ease,
    box-shadow var(--motion-normal) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.app-shell .switch span { transition: background-color var(--motion-fast) ease; }
.app-shell .switch span::after { transition: transform var(--motion-normal) var(--motion-ease); }
.app-shell :is(.nav-mark, .mobile-nav-icon, .format-choice > i) {
  transition: transform var(--motion-normal) var(--motion-ease), color var(--motion-fast) ease,
    background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.app-shell :is(button, a, summary):focus-visible,
.auth-page :is(button, a):focus-visible { outline: 2px solid #79bdff; outline-offset: 3px; }
.app-shell :is(button, .action-primary, .action-secondary):active:not(:disabled),
.auth-page button:active:not(:disabled) { transform: translateY(0) scale(.98); }
.app-shell :is(.app-nav a, .app-nav button):active .nav-mark { transform: scale(.92); }
.app-shell .format-choice:active:not(:disabled) { transform: scale(.985); }
.app-shell .format-choice.active > i { transform: scale(1.05); }
.app-shell .format-choice { position: relative; isolation: isolate; }
.app-shell .format-choice.active { background: #0000002e; }
.app-shell .format-choice::before {
  content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, #0a84ff40, #0a84ff14); opacity: 0;
  transition: opacity var(--motion-normal) ease; pointer-events: none;
}
.app-shell .format-choice.active::before { opacity: 1; }
.app-shell .note-field:has(input:checked) { border-color: #0a84ff66; background-color: #0a84ff0d; }
.app-shell .note-settings { transition: opacity var(--motion-normal) ease; }
.app-shell :is(button, input, select):disabled { cursor: not-allowed; }
.app-shell .workflow-options > summary::after { transition: transform var(--motion-normal) var(--motion-ease); }
.app-shell .account-menu:not([hidden]), dialog[open], .correction-create:not([hidden]) {
  animation: motion-panel-in 200ms var(--motion-ease) both;
}
dialog[open]::backdrop { animation: motion-fade-in 160ms ease both; }
.detail-drawer:not([hidden]) { animation: motion-drawer-in 260ms var(--motion-ease) both; }
@keyframes motion-drawer-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
/* Native disclosures also animate in the tutorial, including keyboard toggles. */
@supports (interpolate-size: allow-keywords) {
  .tutorial-step { interpolate-size: allow-keywords; }
  .tutorial-step::details-content {
    block-size: 0; overflow: clip;
    transition: block-size var(--motion-normal) var(--motion-ease), content-visibility var(--motion-normal) allow-discrete;
  }
  .tutorial-step[open]::details-content { block-size: auto; }
}
@keyframes motion-panel-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) {
  .app-shell :is(.action-primary, .action-secondary, .format-choice):hover:not(:disabled),
  .auth-page .action-primary:hover:not(:disabled) { transform: translateY(-1px); }
  .app-shell .action-secondary:hover:not(:disabled) { box-shadow: 0 5px 15px #0002; }
  .app-shell .app-nav :is(a, button):hover .nav-mark { transform: translateY(-1px); }
  .app-shell :is(.recent-item, .history-item, .mobile-sheet-link):hover { background-color: #ffffff0b; }
  .app-shell .format-choice:hover:not(.active) { border-color: #ffffff35; }
}
@media (max-width: 760px) {
  .topbar-context { min-width: 0; }
  .app-topbar .status-pill { flex-shrink: 0; }
  /* Avoid resizing the tall page snapshots during mobile navigation. */
  ::view-transition-group(app-content), ::view-transition-group(app-sidebar),
  ::view-transition-group(app-topbar), ::view-transition-group(app-footer) { animation: none; }
  .mobile-more-overlay { transition: opacity 260ms ease !important; }
  .mobile-more-sheet { transition: transform 320ms cubic-bezier(.22, 1, .36, 1) !important; }
  .mobile-sheet-link, .mobile-nav-item { touch-action: manipulation; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html .app-bootstrap-loader::after { width: 100%; animation: none !important; opacity: .5; }
  .app-shell :is(a, button):hover, .app-shell :is(a, button):active,
  .auth-page button:hover, .auth-page button:active { transform: none !important; }
}