/* docs/DESIGN_SYSTEM.md Section 10.2. flex layout so a collapsed
   (base.css's .icon:empty) leading icon closes its own gap cleanly
   instead of leaving a fixed indent with nothing in it -- the input
   sits flush against the box's own padding when no icon is rendered,
   a legitimate plain-input look, not a broken one. Same reasoning
   applies to the trailing clear button, already conditionally hidden
   via the `hidden` attribute by search-box.js itself. */

.search-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

/* --color-accent-text, not the bare fill value: Phase F verified
   (docs/DESIGN_SYSTEM.md Section 13) the bare value fails 3:1 non-text
   contrast on light theme; see base.css's :focus-visible comment for
   the full reasoning, which applies identically here. */
.search-box:focus-within {
  border-color: var(--color-accent-text);
}

.search-box__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.search-box__input::placeholder {
  color: var(--color-text-secondary);
}

.search-box__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0;
}

.search-box__clear:hover {
  color: var(--color-text-primary);
}

.search-box__clear[hidden] {
  display: none;
}