/* Stage 32 — keep map action pills clear of the coordinate/status strip and
   move the rotation compass out of the right-hand data drawer. */
:root { --saj-drawer-reserve: 326px; }

/* Parcel recall + export archive: one compact group above the map status bar. */
#saj-pr-open,
#saj-archive-open {
  position: fixed !important;
  top: auto !important;
  bottom: 54px !important;
  z-index: 1200 !important;
  transform: none !important;
  max-width: min(220px, calc(50vw - 24px)) !important;
  min-height: 34px !important;
  box-sizing: border-box !important;
  padding: 7px 11px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
#saj-pr-open { left: calc(50% - 226px) !important; right: auto !important; }
#saj-archive-open { left: calc(50% + 6px) !important; right: auto !important; }

/* The actual React compass has a stable id. Do not target its inline style. */
#rotation-knob {
  position: fixed !important;
  top: 86px !important;
  right: calc(var(--saj-drawer-reserve) + 16px) !important;
  left: auto !important;
  bottom: auto !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  z-index: 1100 !important;
}

@media (max-width: 1100px) {
  :root { --saj-drawer-reserve: 310px; }
}

@media (max-width: 700px) {
  /* Stack the action pills above the coordinate strip, not on top of it. */
  #saj-pr-open,
  #saj-archive-open {
    left: 50% !important;
    right: auto !important;
    max-width: calc(100vw - 28px) !important;
    transform: translateX(-50%) !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
  }
  #saj-pr-open { bottom: 76px !important; }
  #saj-archive-open { bottom: 40px !important; }

  /* Place compass on the map's left edge, outside the drawer and its buttons. */
  #rotation-knob {
    top: 148px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

@media (max-width: 390px) {
  #saj-pr-open,
  #saj-archive-open { max-width: calc(100vw - 20px) !important; }
}