/* ============================================================
   Anchored-popover placement fallbacks — the shared positioning contract
   ============================================================
   Served from this RCL as `_content/finosOS.Wasm.Controls/css/popover.css`.
   Every app that references finosOS.Wasm.Controls must link it from its
   index.html.

   WHY IT LIVES HERE AND NOT IN AN APP SHEET ([exec/1201]).
   `[exec/1157]` put these two blocks in `wasm/finosOS.Wasm/wwwroot/css/app.css`
   — correct instinct (a `@position-try` name is document-global, so two isolated
   copies are two names for one contract), wrong sheet. `app.css` is loaded by
   the admin app and the TV host, NOT by the Family app, which references
   finosOS.Wasm.Controls and renders `UiSelect` on InboxAbsence/InboxPickup.
   An undefined `<dashed-ident>` in `position-try-fallbacks` is ignored, so the
   Family app silently lost flip-up behaviour entirely.

   The general rule this encodes: **a document-global CSS name belongs to the
   assembly that defines the components using it, shipped as a static web asset,
   so it cannot be present for some consumers and absent for others.** The three
   rejected shapes were: link `app.css` from the Family app (drags the whole
   admin sheet in), and duplicate the blocks into `family.css` (a copy, and
   copies diverge — that is what put UiDateRangePicker out of sync originally).

   WHAT THEY DO.
   Both axes are covered. `--finos-popover-flip-up` and `--finos-popover-fit-down`
   handle the BLOCK axis; `--finos-popover-flip-inline` handles the INLINE axis.
   Until [exec/1240] every block here was `span-inline-end`, i.e. the panel's left
   edge stayed pinned to the trigger and nothing moved it when it ran off the
   right edge of the viewport (LOI-209: a 28rem-wide UiSelect on a trigger within
   ~448px of the right edge clipped its longest option). This header used to
   describe the scope as vertical-only and that was accurate — it was a gap, not a
   design.

   `position-try-fallbacks: flip-block` alone chooses a *position* and never a
   *size*, so a panel taller than the space it flips into runs off the viewport
   — the legacy JS path clamps (`UiSelect.razor.js:116-117`), the anchored path
   did not. Each block uses `position-area`, which makes the region the
   containing block, so `max-height: calc(100% - …)` resolves against the space
   actually available on that side. The element's own preferred cap comes from
   `--finos-popover-max-h`, set by each component.

   Order matters: the component's own (downward) position is tried first and is
   deliberately NOT space-clamped, so the flip decision stays exactly what it is
   today; --finos-popover-flip-up is tried next and clamps upward;
   --finos-popover-flip-inline then --finos-popover-flip-both handle the inline
   axis alone and both axes at once ([exec/1240]);
   --finos-popover-fit-down is the last resort when neither side fits and the
   panel must scroll in place below.

   The `top/bottom/left/right: auto` reset is load-bearing: without it the
   component's `top`/`left` insets survive into the fallback and `position-area`
   never takes effect (measured — the fallbacks silently did nothing).

   DO NOT put `anchor()` in `max-height`: it is not valid there, the whole
   declaration is dropped, and the panel renders completely unclamped ([exec/1157]
   measured 1017px). DO NOT add `position-try-order: most-block-size`: it clamps
   correctly but changes the flip decision — a 3-option dropdown flipped up with
   477px free below. */
@position-try --finos-popover-flip-up {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  position-area: block-start span-inline-end;
  margin-block: 0.25rem;
  max-height: min(var(--finos-popover-max-h, 22rem), calc(100% - 0.5rem));
}

@position-try --finos-popover-fit-down {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  position-area: block-end span-inline-end;
  margin-block: 0.25rem;
  max-height: min(var(--finos-popover-max-h, 22rem), calc(100% - 0.5rem));
}

/* INLINE AXIS ([exec/1240], LOI-209).
   `span-inline-start` puts the panel's inline-END edge on the trigger instead of
   its inline-start edge, so a panel wider than the space to the right of the
   trigger grows leftwards and stays on screen. `width: max-content` is untouched
   — the panel is still sized to its longest option; only where it hangs changes.

   Two blocks, not one. `position-try-fallbacks` evaluates each entry
   INDEPENDENTLY and takes the first that fits; it does NOT compose two entries.
   A trigger in the bottom-right corner overflows on both axes at once, so
   neither the block-only nor the inline-only variant fits and an explicit
   both-axes block is required — hence --finos-popover-flip-both.

   Order in the consumers' lists is block, inline, both, fit-down: the block flip
   cannot mask an inline overflow (it is still span-inline-end, so it is rejected
   while the panel hangs off the right edge) and the inline flip cannot mask a
   block overflow, so each is only reached by the case it actually solves. A
   panel near the LEFT edge fits under the component's own position and never
   reaches any of these. */
@position-try --finos-popover-flip-inline {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  position-area: block-end span-inline-start;
  margin-block: 0.25rem;
  max-height: min(var(--finos-popover-max-h, 22rem), calc(100% - 0.5rem));
}

@position-try --finos-popover-flip-both {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  position-area: block-start span-inline-start;
  margin-block: 0.25rem;
  max-height: min(var(--finos-popover-max-h, 22rem), calc(100% - 0.5rem));
}