/* ---- Inline location search ------------------------------------------------------------------
   LocationAutocomplete's `Inline` variant, which renders BbCommand as a form field rather than inside
   a popover. Blueprint styles BbCommand for the place it normally lives — the inside of a combobox —
   so on its own in a form three of its assumptions are wrong, and all three showed:

   1. The root paints itself as the popover surface (rounded, bg-popover, overflow-hidden). Standing in
      a form it is not a surface at all; the control below it is.
   2. The input row is a header with a bottom rule, because a popover already has the border. Alone, the
      input carried the focus ring on its own bare 44px box, which drew a rounded rectangle up over the
      field's "Address" label — the overlap this file exists to fix.
   3. The list is a plain block, because in a popover the popover floats. Inline it sat in the page
      flow, pushing the map down and reading as body text rather than as a menu.

   The Next.js app puts the suggestions in a floating Card (`absolute z-10 w-full mt-1 shadow-lg
   max-h-60 overflow-y-auto`); this is that, in the app's own tokens.

   Global rather than scoped, and not because anything moves the DOM: the component gallery's scoped
   bundle carries only the *Stories* project's styles, so a LocationAutocomplete.razor.css would style
   the app and silently nothing in the gallery — where this control is actually reviewed. Same trade
   map.css records for the legend. */

.floc {
    /* The anchor the suggestion panel positions against, and an undoing of the popover surface. */
    position: relative;
    height: auto;
    overflow: visible;
    background: transparent;
    border-radius: 0;
}

/* The input row, which has no Class parameter of its own — hence :has rather than a hook. This is the
   element that has to read as the form control, so it takes the border the other fields have. */
.floc > :has(> input) {
    height: 2.5rem;
    border: 1px solid var(--input);
    /* Blueprint's own .rounded-md, so this field's corners match every other input on the step. */
    border-radius: calc(var(--radius) * 0.8);
    background: var(--background);
}

/* The ring moves to the control. On the input it framed a box with no border under it and overlapped
   the label above; on the row it traces the field, like every other focused input in the wizard. */
.floc > :has(> input):focus-within {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.floc input:focus,
.floc input:focus-visible {
    outline: none;
}

/* h-11 is the popover header's height; the wizard's fields are 40px, and the row above is now the box. */
.floc input {
    height: 2.25rem;
}

/* ---- The suggestions ----
   Floating, so choosing an address does not shove the rest of the step down the page while the list is
   open — and so the panel reads as a menu belonging to the box above it. */
.floc__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin-top: 0.25rem;
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 0.8);
    background: var(--popover);
    box-shadow: 0 10px 30px rgb(26 26 26 / 18%);
}

/* Addresses are long and get read rather than scanned, so they get the Next.js app's roomier row
   (p-3) instead of the command palette's tighter py-1.5. */
.floc__list [role="option"] {
    padding: 0.625rem 0.75rem;
}