/* Interactive version of the "Search across all your Data" graphic (was /images/global-search_lighter2.svg).
   A try: to revert, put the <img> back in the four pages and delete this file and /js/search-demo.js. */
.search-demo { width: 100%; max-width: 36.875rem; margin: 0 auto; padding: 1.5rem; box-sizing: border-box;
  border: 1px solid var(--dark--stroke--80); border-radius: .75rem; background: transparent; text-align: left;
  min-height: 17.5rem; } /* at least as tall as the graphic it replaced (590 × 280) */
.search-demo-input { display: block; width: 100%; box-sizing: border-box; height: 2.5rem; padding: 0 .875rem; margin: 0;
  background: rgba(31, 31, 31, .8); border: 1px solid var(--brand-blue); border-radius: .25rem;
  color: var(--white); font: inherit; font-size: .875rem; outline: none; }
.search-demo-input::placeholder { color: var(--dark--content--10); }
.search-demo-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 1.5rem 0 1.25rem; }
.search-demo-chip { display: inline-flex; align-items: center; gap: .375rem; height: 1.75rem; padding: 0 .75rem; border: 0;
  border-radius: 999px; background: transparent; color: var(--dark--content--80); font: inherit; font-size: .8125rem; cursor: pointer; }
.search-demo-chip:hover { color: var(--white); }
.search-demo-chip.search-demo-type { cursor: default; background: #292929; color: var(--white); }
.search-demo-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.search-demo-chip[data-type="Study"] .search-demo-dot { color: #734dde; }
.search-demo-chip[data-type="Glance"] .search-demo-dot { color: #4a7bff; }
.search-demo-chip[data-type="Collection"] .search-demo-dot { color: #3fae7a; }
.search-demo-chip[data-type="Figure"] .search-demo-dot { color: #d7a23a; }
.search-demo-list { list-style: none; margin: 0; padding: 0; }
.search-demo-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; row-gap: .125rem;
  padding: .625rem 0; border-top: 1px solid var(--dark--stroke--100); }
.search-demo-item:first-child { border-top: 0; }
.search-demo-type { grid-row: 1 / span 2; align-self: start; margin-top: .3rem; }
.search-demo-name { color: var(--white); font-size: .875rem; line-height: 1.4; }
.search-demo-name mark { background: rgba(22, 82, 240, .35); color: inherit; border-radius: 2px; }
.search-demo-meta { color: var(--dark--content--80); font-size: .75rem; line-height: 1.4; }
.search-demo-empty { color: var(--dark--content--80); font-size: .875rem; padding: .625rem 0; }
.search-demo-note { margin-top: .75rem; color: var(--dark--content--10); font-size: .6875rem; }
/* Filter row, as in the graphic: plain dropdowns (Type, Last updated, Owner), a set filter shows as a #292929 pill,
   "Reset filters" on the right */
.search-demo-filter { position: relative; display: inline-flex; align-items: center; margin: 0; height: 1.75rem; border-radius: 999px; font-weight: 500; }
.search-demo-filter select { appearance: none; -webkit-appearance: none; height: 100%; padding: 0 1.75rem 0 .75rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--dark--content--80); font: inherit; font-size: .8125rem; font-weight: 500; cursor: pointer; outline: none;
  field-sizing: content; } /* hug the chosen option, not the longest one */
.search-demo-filter::after { content: ""; position: absolute; right: .7rem; top: 50%; width: 0; height: 0; margin-top: -2px; pointer-events: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid var(--dark--content--80); }
.search-demo-filter:hover select, .search-demo-filter.is-on select { color: var(--white); }
.search-demo-filter.is-on select { background: #292929; }
.search-demo-filter select option { background: var(--dark--background--70); color: var(--white); }
.search-demo-reset { margin-left: auto; height: 2rem; padding: 0 .875rem; border: 0; border-radius: 0; background: #292929;
  color: var(--white); font: inherit; font-size: .8125rem; cursor: pointer; }
.search-demo-reset:disabled { color: var(--dark--content--10); cursor: default; }
/* Placeholder rows before a search, as in the graphic: a short and a long bar per row, fading out at the bottom */
.search-demo-skel { display: flex; gap: .75rem; padding: .4375rem 0; }
.search-demo-skel span { display: block; height: .5625rem; border-radius: .25rem; background: var(--dark--background--80); }
.search-demo-skel span:first-child { width: 1.1875rem; flex: none; }
.search-demo:not(.has-query) .search-demo-list { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.search-demo:not(.has-query) .search-demo-note { display: none; }
/* Blinking caret at the start of the empty, unfocused field (as in the graphic) */
.search-demo-field { position: relative; }
.search-demo-caret { position: absolute; left: calc(.875rem + 1px); /* the 1px border + 14px padding: exactly where the browser draws its caret, so nothing jumps on click */ top: 50%; width: 1px; height: 1.0625rem; margin-top: -.53125rem; background: var(--white);
  pointer-events: none; display: none; animation: search-demo-blink 1.1s steps(1, end) infinite; }
.search-demo-input:placeholder-shown:not(:focus) + .search-demo-caret { display: block; }
@keyframes search-demo-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .search-demo-caret { animation: none; } }