/* Local token-derived steps; see README.md flow addendum and docs/motion-flow.md. */
:root {
  --sw-local-duration-20: calc(var(--sw-dur-fast) * 0.16666667);
}
/* Search field motion: framework-free template. The app's real values (frontend/src/components/ui/SearchField.css),
   plus the base field styles the app gets from its `.desk-input` class. Tokens only (tokens/tokens.css, which also
   carries the motion tokens), so light and dark follow `html.dark`. */
.sw-search { position: relative; display: block; width: 100%; min-width: 0; }
.sw-search-input {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 8px 40px;
  font: inherit; color: rgb(var(--color-ink)); background: rgb(var(--color-panel));
  border: 1px solid rgb(var(--color-outline)); border-radius: 12px;
  transition: none;
}
.sw-search-input::placeholder { color: rgb(var(--color-muted)); }
.sw-search-input::-webkit-search-cancel-button, .sw-search-input::-webkit-search-decoration { appearance: none; display: none; }
.sw-search-input:hover { border-color: rgb(var(--color-ink)); }
.sw-search-input:focus { border-color: rgb(var(--color-focus)); outline: 2px solid rgb(var(--color-focus)); outline-offset: 2px; }

/* Optional: grow inside a reserved slot so neighbours never move. */
.sw-search-slot { display: block; width: 100%; min-width: 0; }
.sw-search-slot > .sw-search[data-expand] { width: 100%; }
.sw-search-slot > .sw-search[data-expand]:focus-within { width: 100%; }

.sw-search-icon {
  position: absolute; inset-block: 0; inset-inline-start: 0.75rem; display: grid; width: 1.125rem; place-items: center;
  pointer-events: none; color: rgb(var(--color-muted));
  transition: none;
}
.sw-search-glyph {
  grid-area: 1 / 1; opacity: 1;
  transition: opacity var(--sw-dur-fast) var(--sw-ease-standard), transform var(--sw-dur-base) var(--sw-ease-enter);
}
.sw-search:focus-within .sw-search-icon:not([data-fixed]) { color: rgb(var(--color-accent-ink)); }
.sw-search:focus-within .sw-search-glyph { transform: translateX(2px); }
.sw-search-icon[data-loading] .sw-search-glyph { opacity: 0; }
.sw-search-spin { grid-area: 1 / 1; display: inline-flex; animation: sw-search-fade var(--sw-dur-fast) var(--sw-ease-standard) both; }
.sw-search-spin .sw-box { margin: 0; }

.sw-search-clear {
  position: absolute; inset-block: 0; inset-inline-end: 0.25rem; display: grid; width: 2.25rem; place-items: center;
  border: 0; background: none; cursor: pointer; border-radius: 0.5rem; color: rgb(var(--color-muted));
  transition: none;
  animation: sw-search-clear-in var(--sw-dur-fast) var(--sw-ease-enter) both;
}
.sw-search-clear:focus-visible { outline: 2px solid rgb(var(--color-focus)); outline-offset: -2px; }
@media (hover: hover) { .sw-search-clear:hover { color: rgb(var(--color-ink)); } }

.sw-search-kbd {
  position: absolute; inset-block: 0; inset-inline-end: 0.625rem; display: flex; align-items: center; pointer-events: none;
  font: 12px ui-monospace, monospace; color: rgb(var(--color-muted));
  opacity: 1; transition: opacity var(--sw-dur-fast) var(--sw-ease-standard);
}
.sw-search:focus-within .sw-search-kbd, .sw-search-kbd[data-text] { opacity: 0; }

/* Suggestion dropdown: 4px rise + fade, the first six rows stagger 20 ms; "No results" fades in. */
.sw-search-pop { animation: sw-search-rise var(--sw-dur-base) var(--sw-ease-enter) both; }
.sw-search-item { animation: sw-search-rise var(--sw-dur-base) var(--sw-ease-enter) both; animation-delay: calc(var(--sw-i, 0) * var(--sw-local-duration-20)); }
.sw-search-empty { animation: sw-search-fade var(--sw-dur-base) var(--sw-ease-standard) both; }

@keyframes sw-search-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sw-search-clear-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes sw-search-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sw-search:focus-within .sw-search-glyph { transform: none; }
  .sw-search-clear { animation-name: sw-search-fade; }
  .sw-search-pop, .sw-search-item { animation-name: sw-search-fade; animation-delay: calc(var(--sw-dur-fast) * 0); }
  .sw-search-slot > .sw-search[data-expand] { width: 100%; transition: none; }
}

/* Decision 399: reduced motion reaches the identical state immediately. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Results can change during typing: show them immediately, with no repeated entrance. */
.sw-search-pop, .sw-search-item, .sw-search-empty, .sw-search-clear, .sw-search-spin { animation: none; }