/* Select and component picker. Shares .field / .field__control markup with
   ui/input/field.css so a select in a form looks identical to a text input.
   DESIGN.md section 4 (Inputs).

   Restyled 2026-10-05 for the 2026-10-05 shape lock (CLAUDE.md rule 11, set
   on the User Home page): `.picker__results` and `.picker__option` went
   square and the option rows became seamed, hairline-separated rows instead
   of individually-rounded floating highlights. `.picker__chip` and its
   circular `.picker__chip-remove` stay pills - see the judgement recorded
   beside `.picker__chip` below - and `.picker__chip-label` went square since
   it is a text field, not a badge. No markup, class name or JS behaviour
   changed; `select.js` was not touched. */

@layer components {
  /* `.field__control.nv-select`, not `.nv-select`.

     This is a variant of that control and the compound selector says so, but
     the reason it is written this way is stricter than tidiness: at equal
     specificity, in the same layer, the winner is whichever stylesheet
     `ensureCss` appended last, and that depends on which component a route
     mounted first. The caret was present on some routes and absent on others,
     from the same markup. Measured on the shipped rules:

       field.css then select.css   caret present   padding-inline-end 48px
       select.css then field.css   caret MISSING   padding-inline-end 12px

     `field.css` no longer uses a `background` shorthand, which fixes the caret
     half for every future variant. `padding-inline-end` cannot be fixed that
     way: a longhand against the same longhand is a real tie, and only
     specificity breaks it in an order-independent way.

     A rule whose outcome depends on load order is a bug even on the routes
     where it currently looks right, because nothing about those routes is
     holding it right.

     `.nv-select` on its own is kept for anything that carries the class
     without `.field__control`; the two rules together are what makes the
     control correct in either order. */
  .nv-select {
    appearance: none;
  }

  .field__control.nv-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                       linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 15px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-inline-end: var(--space-9);
  }

  .picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .picker:empty { display: none; }

  /* KEPT AS A PILL, judged rather than swept (2026-10-05 shape-lock pass).
     The lock reserves a pill for a badge, a counter or a drag handle; a
     selected-reference chip reads as a badge of the thing it names, the same
     family as `.component-view__chip`, `.outline-scene__chip` and `.badge`
     itself - every other "you picked this" token in the product is a pill.
     Squaring only this one control's chip would make it the one inconsistent
     chip in the app rather than a more consistent one, so it stays round;
     `.picker__chip-label` and `.picker__results`/`.picker__option` below,
     which are not standing in for a badge, do not. */
  .picker__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    font-size: var(--text-sm);
    max-width: 100%;
  }
  .picker__chip[data-missing] {
    border-color: var(--danger);
    color: var(--danger);
  }
  .picker__chip-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22ch;
  }
  .picker__chip-type {
    color: var(--text-muted);
    font-size: var(--text-xs);
    padding-inline-start: var(--space-2);
    border-inline-start: 1px solid var(--border);
  }
  .picker__chip-label {
    width: 12ch;
    min-height: calc(28px * var(--ui-scale));
    padding: 0 var(--space-2);
    background: var(--surface-1);
    border: 1px solid var(--border);
    /* Square, not `--radius-sm`: this is a text input segment riding inside
       the chip, not a badge - see `.picker__chip` below for which parts of
       this control stay pills and why. */
    border-radius: 0;
    color: var(--text);
    font-size: var(--text-xs);
  }
  .picker__chip-remove {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    line-height: 1;
    cursor: pointer;
  }
  .picker__chip-remove:hover { background: var(--surface-3); color: var(--text); }
  .picker__chip-remove:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

  /* Filter and search sit on one line, the filter sized to its content so the
     search box - the control someone actually types into - keeps the room. */
  .picker__search {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: var(--space-2);
    align-items: center;
  }

  .picker__search:not(:has(.picker__type)) { grid-template-columns: minmax(0, 1fr); }

  .picker__type { inline-size: auto; max-inline-size: 11rem; }

  @media (max-width: 30rem) {
    .picker__search { grid-template-columns: minmax(0, 1fr); }
    .picker__type { max-inline-size: none; }
  }

  .picker__combo { position: relative; }

  .picker__results {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + var(--space-1));
    z-index: var(--z-popover);
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    background: var(--surface-3);
    /* The picker is a menu in everything but name and opens over the form it
       belongs to, so it takes the same glass `ui/popover` does. */
    backdrop-filter: var(--glass-filter-strong);
    border: 1px solid var(--border);
    /* Square (2026-10-05 shape lock, CLAUDE.md rule 11) - the same change
       `ui/popover` and `features/component-popover`'s own floating list already
       carry, so every anchored result list in the product reads as one
       family rather than three slightly different radii. */
    border-radius: 0;
    box-shadow: var(--shadow-2);
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* A ROW, not a floating island: full-bleed and square, separated from its
     neighbour by a hairline, lit on its leading edge when hovered or
     selected - `.index-row`'s grammar, and the same treatment
     `features/component-popover/component-popover.css`'s own result list uses, so
     the two "search and pick a component" lists in this app behave alike. */
  .picker__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: 0;
    border-block-end: 1px solid var(--divider);
    box-shadow: inset 2px 0 0 transparent;
    cursor: pointer;
    font-size: var(--text-sm);
    transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }
  .picker__option:last-child { border-block-end: 0; }
  .picker__option:hover,
  .picker__option[aria-selected="true"] {
    background: color-mix(in oklab, var(--text) 6%, transparent);
    box-shadow: inset 2px 0 0 var(--accent);
  }
  .picker__option-type { color: var(--text-muted); font-size: var(--text-xs); }

  @media (prefers-reduced-motion: reduce) {
    .picker__option { transition: none; }
  }
}

@layer components {
  /* An openable chip name. A button that has to sit inside a chip without
     looking like a second control: no ground, no border, and it inherits the
     chip's own type so the only thing that marks it as followable is the
     pointer and the underline on hover. */
  .picker__chip-open {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: start;
  }

  .picker__chip-open:hover { text-decoration: underline; }
  .picker__chip-open:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
}

@layer components {
  /* ── the results list, once it became a popover (bl-11, 2026-10-08) ─────

     `componentPicker` no longer draws its results inside `.picker__combo`; it
     hands the same `<ul>` to `ui/popover`, which appends it to `document.body`
     so no ancestor's `overflow` can clip it. That was the whole of bl-11: as
     the last field of a long form in a dialog or a drawer, the list was cut
     off by the footer.

     So the absolute positioning below has to be undone INSIDE the panel - the
     popover owns the placement now, and a list still trying to sit at
     `top: 100%` of its new parent would hang one panel-height too low.

     The width comes from the anchor through `--picker-pop-w`, set by
     `select.js`. `.popover` caps itself at 20rem, which is a sensible menu
     width and a cramped one for a list of component names; `className` is the
     hook its own header offers for exactly this, so the cap is raised here
     rather than fought with `!important` from a feature stylesheet. */
  /* Doubled class on purpose. `popover.css` is loaded before OR after this
     file depending on which control opened first, and a single class ties it
     on specificity, so whichever loaded last won: the panel kept its 20rem cap
     and a 555px field got a 240px list hanging under it. Two classes beat it
     whatever the load order. */
  .popover.popover--picker {
    padding: 0;
    max-inline-size: none;
    inline-size: max-content;
  }

  .popover--picker .picker__results {
    position: static;
    inset: auto;
    inline-size: calc(var(--picker-pop-w, 20rem) - 2px); /* the panel draws a 1px border each side */
    min-inline-size: 12rem;
    /* The anchor's own width is the target, so the cap must never sit below it:
       a flat 32rem made a list narrower than the field it belongs to. */
    max-inline-size: min(calc(100vw - var(--space-4)), max(32rem, var(--picker-pop-w, 32rem)));
    /* Tall lists scroll inside the panel rather than growing past the screen.
       `computePosition` flips the panel above the anchor when there is no room
       below, but nothing can flip a list taller than the viewport. */
    max-block-size: min(18rem, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}