/* GR receiver preview workbench — scoped adoption for the inline receiver
   panel on GR-wholesale.html (both trees serve identical bytes).

   Scope: only the receiver-preview surface — the panel subtree the owning
   renderer marks with .gr-receiver-preview, and the .gr-receiver-preview-action
   control that opens/closes it. Nothing else on the page is re-styled, no
   writer, calculation or policy changes, and no per-page palette is invented:
   text sizes use the canonical --font-size-md alias (le-foundation maps it to
   the operator profile's 1rem, and to the cloud profile's larger body size
   where that profile is active), the guidance colour uses the page's existing
   --text-secondary token, and the focus ring uses the canonical --border-focus
   token exactly as the shared operator components do. */
.gr-receiver-preview {
  font-size: var(--font-size-md, 16px);
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Owned text floor: every receiver note, label and status line reads at the
   canonical body size (16px operator profile; 18px cloud profile). The owning
   renderer no longer ships these at 13.1–13.6px inline. */
.gr-receiver-preview p,
.gr-receiver-preview label,
.gr-receiver-preview span,
.gr-receiver-preview li,
.gr-receiver-preview-note {
  font-size: var(--font-size-md, 16px);
}

.gr-receiver-preview-note {
  color: var(--text-secondary);
}

/* Native controls: canonical body size plus the 44px target size, and never
   wider than their card at 375. */
.gr-receiver-preview button,
.gr-receiver-preview select,
.gr-receiver-preview input,
.gr-receiver-preview-action {
  font-size: var(--font-size-md, 16px);
  min-height: 44px;
}

.gr-receiver-preview select,
.gr-receiver-preview-action {
  max-width: 100%;
}

/* Canonical focus ring, same token as the shared operator components. No
   local --border-focus alias is declared here: the page's own canonical
   foundation stylesheet owns that token and loads before this sheet, so the
   ring resolves exactly as it does for the shared operator components, and
   the ring itself wins over the UA's auto ring exactly as
   styles/gr-page-header.css does for header actions. */

/* The page's .btn/.order-action-btn transition `all` over 0.2s, which would
   animate the ring in from its initial outline-width (medium, 3px) — a
   keyboard-focused control would read 3px for a fifth of a second and a
   focus measured at focus time reads the transition's start, not its end.
   Keep the page's own hover transitions but let the ring land instantly. */
.gr-receiver-preview :is(button, select, input, a),
.gr-receiver-preview-action {
  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
}

.gr-receiver-preview :is(button, select, input, a):focus-visible,
.gr-receiver-preview-action:focus-visible {
  outline: 2px solid var(--border-focus) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gr-receiver-preview,
  .gr-receiver-preview *,
  .gr-receiver-preview-action {
    animation: none !important;
    transition: none !important;
  }
}

/* Keep the owned bridge action on a complete row at narrow widths. */
.order-actions:has(.gr-receiver-preview-action) { flex-wrap: wrap; min-width: 0; }
.gr-receiver-preview-action { flex: 1 1 100%; min-width: 0; white-space: normal; }
.gr-receiver-preview input { min-width: 0; max-width: 100%; }

/* The inline owner remains reachable on small screens as a native scroll region. */
.gr-receiver-preview { max-height: 60dvh; overflow: auto; box-sizing: border-box; }

.gr-receiver-preview-target-status { flex: 1 1 100%; min-width: 0; }

.order-actions:has(.gr-receiver-preview-target-status) { flex-wrap: wrap; min-width: 0; }