/**
 * root Design System - documentation styles: sidebar search
 *
 * Linked by `scripts/_docs-shell.mjs` on every page. Same constraints as the rest of the
 * shell: zero CSS classes - element, `[data-part]` and attribute selectors only - zero
 * inline styles, and every value a root foundation token.
 */

search[data-part="search"] {
  /* The field's ink, remapped here and not on the `<input>`: the composition paints the
     `color` on the `<label>` that wraps the control, and a custom property set on the
     control cannot reach an ancestor - measured, the field stayed at 1.08:1 until this
     moved up one element.

     Remapped at all for the same reason the width floor below is: the component spends a
     bare `--root-c--neutral-900`, and that step stopped mirroring across schemes when the
     neutral ramp changed - both ends descend now. So the text, its label and the magnifying
     glass in the icon slot all came out #2c2626 on the sidebar's #212121 ground, which is a
     field you cannot see you have typed into.

     Both names, not just the first: the component aliases
     `--root-input--label--color: var(--root-input--color)` at `:root`, and a custom
     property is substituted where it is *declared* - so that alias had already resolved
     against the `:root` value and kept painting the visible label #2c2626 (1.08:1) while
     the input and the icon had turned. The same reason `_theme.css` gives for handing the
     preview columns their poles by hand. */
  --root-input--color: light-dark(var(--root-c--alternate-900--light), var(--root-c--neutral-100--dark));
  --root-input--label--color: var(--root-input--color);

  position: sticky;
  top: var(--docs-sidebar-brand-h);
  z-index: calc(var(--root-z--sticky) + 1);
  display: block;
  /* No ring allowance any more: the field is a `root-input` and a field's focus is its
     wrapper's border, drawn inside the border box, so nothing is painted outside the row
     for the opaque brand row above to cover. What the block-start padding holds now is
     the gap between the wordmark and the label under it. */
  padding-block: 0 var(--root-s--md);
  background: var(--docs-surface);

  /* The field is a `root-input` now, so its box, border, radius, type scale and focus
     state are the component's. What is left here is the one thing the component cannot
     know: how wide the column it sits in is. */
  /* The label the composition builds is an `inline-flex` column at `place-items: start`,
     which is right for a field in a form - it is as wide as it needs to be - and wrong for
     the only field in a 30rem column, which should be as wide as the column. Both
     declarations are layout and neither is paint: the label spans the row, and its items
     stretch to it instead of shrink-wrapping. */
  label:has(input[is="root-input"]) {
    align-items: stretch;
    inline-size: 100%;
  }

  /* The floor is the component's, and it is in `ch`: 20 of them so a Select in the same
     form cannot come out narrower than the field beside it. In a sidebar that floor is
     wider than the column at the first long word, so it is remapped - the token the
     component publishes - rather than fought with an `inline-size` rule. */
  input[is="root-input"] {
    --root-input--min-inline-size: 0;
  }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  search[data-part="search"] {
    position: static;
    padding-block: 0;
  }
}