/* Transitions.dev — Input clear with dissolve. Parameters supplied by the user. */
:root[data-study="quiet-cards"] {
  --clear-dur:1000ms;
  --clear-out-dur:400ms;
  --clear-in-dur:400ms;
  --clear-out-fly:12px;
  --clear-in-fly:12px;
  --clear-out-ease:cubic-bezier(0.22,1,0.36,1);
  --clear-in-ease:cubic-bezier(0.22,1,0.36,1);
  --clear-blur:2px;
  --glow-delay:50ms;
  --glow-peak-at:.15;
  --glow-opacity:.42;
  --glow-spread:1.5;
}
[data-study="quiet-cards"] .quiet-search.t-clear {
  --search-start:32px;
  --search-end:40px;
  --clear-surface:#eeeeee;
  --clear-line:rgb(0 0 0 / 3%);
  --clear-button:rgb(15 15 15 / 35%);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  flex:none;
  display:block;
  width:256px;
  height:36px;
  padding:0;
  border:0;
  border-radius:999px;
  background:var(--clear-surface);
  box-shadow:inset 0 0 0 1px var(--clear-line);
  color:var(--ink);
  font:500 13px/18px var(--mono);
  transition:box-shadow 150ms ease;
}
[data-study="quiet-cards"] .quiet-search.t-clear:focus-within {
  width:256px;
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / 14%);
}
[data-study="quiet-cards"][data-theme="dark"] .quiet-search.t-clear {
  --clear-surface:#292929;
  --clear-line:rgb(255 255 255 / 5%);
  --clear-button:rgb(255 255 255 / 40%);
}
[data-study="quiet-cards"][data-theme="dark"] .quiet-search.t-clear:focus-within {
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / 18%);
}
.t-clear > .t-clear-search-icon {
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
}
[data-study="quiet-cards"] .quiet-search.t-clear input {
  display:block;
  height:100%;
  padding:0 var(--search-end) 0 var(--search-start);
  border-radius:inherit;
  appearance:none;
  -webkit-appearance:none;
  caret-color:var(--ink);
  font:inherit;
}
.t-clear input::-webkit-search-cancel-button,
.t-clear input::-webkit-search-decoration { -webkit-appearance:none; }
.t-clear input::placeholder { color:transparent; }
.t-clear-mirror,
.t-clear-placeholder {
  position:absolute;
  inset:0 var(--search-end) 0 var(--search-start);
  display:flex;
  align-items:center;
  pointer-events:none;
  white-space:pre;
  overflow:hidden;
  z-index:2;
}
.t-clear-mirror { opacity:0; }
.t-clear-text { flex:none; }
.t-clear-placeholder { color:var(--muted); }
.t-clear.has-value .t-clear-placeholder { opacity:0; }
/* Keep native selection, caret scrolling and IME text while editing. The mirror
   owns resting text and the dissolve; it never sits over native input glyphs. */
.t-clear.has-value:not(:focus-within) .t-clear-mirror,
.t-clear.is-clearing .t-clear-mirror { opacity:1; }
.t-clear.has-value:not(:focus-within) input,
.t-clear.is-clearing input { -webkit-text-fill-color:transparent; }
.t-clear-glow {
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  z-index:3;
  color:#000;
  mix-blend-mode:multiply;
}
[data-theme="dark"] .t-clear-glow { color:#fff; mix-blend-mode:screen; }
.t-clear-btn {
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:var(--search-end);
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--clear-button);
  cursor:pointer;
  z-index:4;
  transition:color 120ms ease;
}
.t-clear-btn[hidden] { display:none; }
[data-study="quiet-cards"] .t-clear-btn svg { width:20px; height:20px; color:inherit; }
.t-clear-btn circle { fill:currentColor; stroke:none; }
.t-clear-btn path { stroke:var(--clear-surface); stroke-width:1.8; stroke-linecap:round; }
.t-clear-btn:hover { color:var(--ink); }
.t-clear-btn:focus-visible { outline:1px solid var(--muted); outline-offset:-5px; }
@media(max-width:759px) {
  [data-study="quiet-cards"] .quiet-search.t-clear,
  [data-study="quiet-cards"] .quiet-search.t-clear:focus-within {
    --search-end:44px;
    width:180px;
    height:44px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .t-clear-glow { opacity:0 !important; }
}