/* Page names remain available to assistive technology; the browsing UI starts with its tabs. */
[data-study="quiet-cards"] #page-bar.page-bar.quiet-list-heading {
  position:absolute;
  width:1px;
  height:1px;
  min-height:0;
  padding:0;
  margin:-1px;
  border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
[data-study="quiet-cards"] .quiet-toolbar--search {
  --seek-shut:36px;
  --seek-span:256px;
  --seek-lens:18px;
}
[data-study="quiet-cards"] .quiet-toolbar--search .quiet-pills {
  flex:1;
  width:100%;
  max-width:calc(100% - var(--seek-shut) - 12px);
}
[data-study="quiet-cards"] .quiet-search-dock {
  --seek-width:var(--seek-shut);
  --seek-say:0;
  position:absolute;
  z-index:3;
  right:0;
  top:50%;
  translate:0 -50%;
  width:var(--seek-width);
  height:var(--seek-shut);
  isolation:isolate;
}
/* A canvas-coloured veil blends into the tabs as the field grows over them.
   It follows the same spring width, so neither a blank gap nor a hard seam appears. */
[data-study="quiet-cards"] .quiet-search-dock::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-12px -1px -12px -56px;
  background:linear-gradient(to right,transparent,var(--bg) 48px,var(--bg));
  pointer-events:none;
}
/* Bencho: width is the state. Height stays fixed and the corner stays fully
   round; a circle and a pill follow one shape rule, not two radius keyframes. */
[data-study="quiet-cards"] .quiet-search.t-clear.seek-search,
[data-study="quiet-cards"] .quiet-search.t-clear.seek-search:focus-within {
  --search-start:calc((var(--seek-shut) + var(--seek-lens)) / 2 + 9px);
  --clear-surface:var(--surface);
  width:100%;
  height:var(--seek-shut);
  min-height:var(--seek-shut);
  border:0;
  background:var(--clear-surface);
  box-shadow:none;
  transform:translate(var(--seek-lean-x,0px),var(--seek-lean-y,0px)) scale(var(--seek-scale,1));
  transform-origin:right center;
  transition:transform 260ms cubic-bezier(.22,.9,.28,1),background-color 220ms ease,box-shadow 150ms ease;
}
[data-study="quiet-cards"] .quiet-search-dock[data-open="false"] .seek-search:hover { --seek-scale:1.045; }
[data-study="quiet-cards"] .quiet-search-dock[data-press="true"] .seek-search {
  --seek-scale:.93;
  transition:transform 90ms cubic-bezier(.4,0,.6,1);
}
/* The lens never moves relative to the box. The same inset centres it in
   the closed circle and aligns it in the expanded field. */
[data-study="quiet-cards"] .seek-search > .t-clear-search-icon {
  width:var(--seek-lens);
  height:var(--seek-lens);
  left:calc((var(--seek-shut) - var(--seek-lens)) / 2);
  stroke-width:1.5;
  stroke:currentColor;
  fill:none;
  color:var(--muted);
  transition:color 200ms ease,stroke-width 200ms ease;
}
[data-study="quiet-cards"] .quiet-search-dock[data-busy="true"] .t-clear-search-icon { color:var(--ink); stroke-width:1.8; }
[data-study="quiet-cards"] .seek-content {
  position:absolute;
  inset:0;
  opacity:var(--seek-say);
  transform:translateX(calc((1 - var(--seek-say)) * -6px));
}
[data-study="quiet-cards"] .seek-hit {
  position:absolute;
  inset:0;
  z-index:5;
  padding:0;
  border:0;
  border-radius:inherit;
  background:transparent;
  cursor:pointer;
}
[data-study="quiet-cards"] .seek-hit[hidden] { display:none; }
[data-study="quiet-cards"] .seek-hit:focus-visible { outline:1px solid var(--muted); outline-offset:-2px; }
@media(max-width:759px) {
  [data-study="quiet-cards"] .quiet-toolbar--search { --seek-shut:44px; --seek-lens:20px; }
  [data-study="quiet-cards"] .quiet-search.t-clear.seek-search { font-size:16px; }
  [data-study="quiet-cards"] .quiet-search-dock::before { top:-8px; bottom:-8px; }
}
@media(prefers-reduced-motion:reduce) {
  [data-study="quiet-cards"] .quiet-search.t-clear.seek-search { transform:none; transition:none; }
  [data-study="quiet-cards"] .seek-search > .t-clear-search-icon { transition:none; }
}