@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@import '/assets/b156259ecf951ea64c145aa0f54c7115e89156d2e5434dff5584e0328b19afe7/components/input/input.css';
@layer cinder.components {
  .cinder-autocomplete {
    display: grid;
    gap: var(--cinder-space-2);
  }

  .cinder-autocomplete__panel {
    padding: var(--cinder-space-1);
  }

  /* Geometry, padding, active fill, keyboard cursor ring, and disabled state
   come from the shared `cinder-_option-row` primitive on the markup (the
   option has exactly one child, so the primitive's flex replaces the old
   local grid; two-line stacking lives in `__option-text` below). */
  .cinder-autocomplete__option {
    color: var(--cinder-text-default);
  }

  /*
   * The active/keyboard-highlighted row treatment is owned by the shared
   * `.cinder-_option-row[data-cinder-active]` rules in
   * `styles/components/_row-item.css`: a `--cinder-surface-raised-hover`
   * background plus an inset `--cinder-ring-color` ring (and a forced-colors
   * `outline: Highlight` fallback). A component-local override here previously
   * pinned the background to `--cinder-surface-raised` — identical to the
   * panel — so the highlighted option was invisible in light mode. Do not
   * reintroduce it; inherit the shared row treatment instead.
   */

  .cinder-autocomplete__option-text {
    display: grid;
    gap: 0.125rem;
  }

  .cinder-autocomplete__option-label {
    font-weight: var(--cinder-font-medium);
  }

  .cinder-autocomplete__option-description {
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-sm);
  }

  .cinder-autocomplete__match {
    /*
     * Emphasize the matched substring with the theme-aware warning surface
     * pair. The previous value hard-coded `oklch(from var(--cinder-status-warning-solid)
     * 96.5% …)` — a near-white background in BOTH themes — and kept `color:
     * inherit`, so in dark mode the (light) inherited text sat on a near-white
     * background and the matched glyph disappeared into a solid white box.
     * `--cinder-status-warning-background` / `--cinder-status-warning-text` are a designed
     * `light-dark()` pair (dark-on-light in light mode, light-on-dark in dark
     * mode), so the highlight stays legible against either theme and against
     * the active row's raised surface.
     */
    padding: 0 0.0625rem;
    border-radius: var(--cinder-radius-sm);
    background: var(--cinder-status-warning-background);
    color: var(--cinder-status-warning-text);
    font-weight: var(--cinder-font-semibold);
  }

  .cinder-autocomplete__status {
    /* Padding comes from the shared `cinder-_option-row` class on the row. */
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-sm);
  }
}