/* F14 — the offer that follows a selection in the output pane.

   position: fixed with coordinates written from JavaScript. The selection
   rectangle is a viewport measurement and the output pane scrolls inside
   itself, so anchoring within the pane would mean reconciling two coordinate
   systems on every scroll; fixed positioning is already in the one the
   rectangle is given in. The coordinates go through the CSSOM rather than a
   style attribute — F13's style-src carries no 'unsafe-inline'. */

.selection-add {
  position: fixed;
  /* Only over the page's own content: the notices region and any focus ring
     stay reachable. */
  z-index: 10;
  max-width: min(24rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem;
  border: 1px solid var(--colour-border);
  border-radius: 9px;
  background: var(--colour-surface);
  box-shadow: var(--shadow-pop);
}

/* display: flex would otherwise beat the user-agent rule for [hidden]. */
.selection-add[hidden] {
  display: none;
}

.selection-add__hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--colour-text-muted);
}