/* Avenue Proof admin: the design's motion (stamp, pin drop, town lighting up). */
body { margin: 0; }
@keyframes ap-stamp { 0% { opacity: 0; transform: rotate(-7deg) scale(1.8) } 60% { opacity: 1; transform: rotate(-7deg) scale(.94) } 100% { opacity: 1; transform: rotate(-7deg) scale(1) } }
@keyframes ap-drop { 0% { opacity: 0; transform: translate(-50%, -320%) } 55% { opacity: 1; transform: translate(-50%, -50%) } 72% { transform: translate(-50%, -95%) } 100% { opacity: 1; transform: translate(-50%, -50%) } }
@keyframes ap-land { 0% { opacity: 0; transform: translate(-50%, -420%) } 50% { opacity: 1; transform: translate(-50%, -50%) } 65% { transform: translate(-50%, -110%) } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1) } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.5) } }
@keyframes ap-ripple { 0% { opacity: .7; transform: translate(-50%, -50%) scale(.4) } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.8) } }
@keyframes ap-pop { 0% { transform: scale(1) } 40% { transform: scale(1.4) } 100% { transform: scale(1) } }
@keyframes ap-rise { 0% { opacity: 0; transform: translateY(8px) } 100% { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .ap-anim { animation: none !important; opacity: 1 !important } }

/* Map screen: pan and zoom box, and its controls. Shorter on phones so the page can still
   be scrolled past it (the box itself takes drag and pinch). */
.ap-mapbox { height: 640px; outline: none; overflow: clip !important; }
.ap-mapbox:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring, #2438a8); }
@media (max-width: 640px) { .ap-mapbox { height: 62vh; min-height: 360px; } }
.ap-mapbtn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: var(--bg-surface); color: var(--text-primary); cursor: pointer; }
.ap-mapbtn:hover:not(:disabled) { background: var(--gray-100); }
.ap-mapbtn:disabled { color: var(--text-tertiary); cursor: default; }
.ap-mapbtn:focus-visible { outline: 3px solid var(--focus-ring, #2438a8); outline-offset: -3px; }

/* ---------- Phones and small tablets ----------
   The screens are laid out with inline styles from the design, so the phone layout
   overrides them here. The sidebar becomes a slide-out menu. */
.ap-menu { display: none; width: 44px; height: 44px; margin-left: -10px; flex-shrink: 0; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 10px; background: transparent; color: var(--text-primary); cursor: pointer; }
.ap-menu:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.ap-scrim { display: none; }
@media (max-width: 860px) {
  .ap-shell { height: 100dvh !important; }
  .ap-menu { display: inline-flex; }
  .ap-side { position: fixed !important; z-index: 60; top: 0; left: 0; bottom: 0; width: min(288px, 86vw) !important; transform: translateX(-100%); visibility: hidden; transition: transform 200ms ease, visibility 0s linear 200ms; box-shadow: var(--shadow-lg); overflow-y: auto; }
  .ap-side.is-open { transform: none; visibility: visible; transition: transform 200ms ease; }
  .ap-side nav button { height: 44px !important; font-size: 15px !important; }
  .ap-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(13, 15, 31, 0.4); }
  .ap-head { padding: 0 12px 0 14px !important; gap: 8px !important; }
  .ap-head-sub { display: none !important; }
  .ap-main { padding: 16px 14px 48px !important; }
}
@media (prefers-reduced-motion: reduce) { .ap-side { transition: none !important; } }
/* Towns panel on the map: always open on wide screens; a one-line toggle on phones. */
.ap-towns-toggle { display: none; }
@media (max-width: 860px) {
  .ap-stack { grid-template-columns: minmax(0, 1fr) !important; }
  .ap-golive { padding: 20px 16px !important; gap: 16px !important; }
  .ap-step { flex-wrap: wrap; }
  .ap-step > div { flex: 1 1 190px !important; }
  .ap-step > .lx-btn { margin-left: 36px; }
  .ap-wins { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; padding: 16px !important; }
  .ap-recent { grid-template-columns: 56px minmax(0, 1fr) auto !important; gap: 12px !important; padding: 10px 14px !important; }
  .ap-recent > :nth-child(3) { display: none; }
  .ap-pv-grid { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) 200px; }
  /* Post work and Add job: the design draws a phone frame; on a phone, the screen is the phone. */
  .ap-phone { width: auto !important; height: auto !important; min-height: calc(100dvh - 52px); margin: -16px -14px 0; flex: 1 1 100% !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }
  .ap-main:has(.ap-phone) { padding-bottom: 0 !important; }
  .ap-main:has(.ap-phone) > div { padding-bottom: 32px; }
  .ap-phone-body { overflow: visible !important; }
  .ap-phone-foot { position: sticky; bottom: 0; z-index: 3; padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
  .ap-maprow { flex-wrap: wrap; row-gap: 0 !important; }
  .ap-mapnote { order: 3; flex-basis: 100%; }
  .ap-towns { top: 10px !important; left: 10px !important; width: auto !important; max-width: calc(100% - 20px); }
  .ap-towns-toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; width: 100%; padding: 0 14px; border: none; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary); text-align: left; cursor: pointer; }
  .ap-towns-toggle svg { flex-shrink: 0; transition: transform 150ms ease; }
  .ap-towns.is-open .ap-towns-toggle svg { transform: rotate(180deg); }
  .ap-towns:not(.is-open) .ap-towns-body { display: none; }
  .ap-towns.is-open .ap-towns-body { max-height: calc(62vh - 90px); overflow-y: auto; border-top: 1px solid var(--border-subtle); }
  .ap-towns-body > :first-child { display: none; }
  .ap-mapcard { top: auto !important; bottom: 34px !important; left: 10px !important; right: 66px !important; width: auto !important; }
  .ap-mapcard > :first-child { aspect-ratio: auto !important; height: 110px; }
}