/* Loaded on article pages only. All controls and motion are scoped to this feature. */
.article-search {
  --as-blue: #2165ed;
  --as-ink: #33465f;
  margin-top: 22px;
  padding: 12px 14px;
  border: 1px solid #e7ecf3;
  border-radius: 18px;
  background: #f8fafc;
  color: var(--as-ink);
}
.article-search__row { display: flex; align-items: center; gap: 18px; }
.article-search__form { position: relative; flex: 0 1 460px; min-width: 240px; margin: 0; }
.article-search__field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 1px 1px 1px 15px;
  border: 1px solid #dce4ef;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 2px 6px rgb(35 58 94 / 4%);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.article-search__field:focus-within {
  border-color: #6695ec;
  box-shadow: 0 0 0 3px rgb(33 101 237 / 8%), 0 4px 14px rgb(33 101 237 / 7%);
}
.article-search svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.article-search__field > svg { color: #7789ab; transition: color 180ms ease; }
.article-search__field:focus-within > svg { color: var(--as-blue); }
.article-search .article-search__field input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 16px;
  color: #263a55;
}
.article-search__field input::placeholder { color: #6d7c90; font-size: 14px; opacity: 1; }
.article-search__submit {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.article-search__submit::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: var(--as-blue);
  box-shadow: 0 2px 5px rgb(33 101 237 / 16%);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.article-search__submit svg { position: relative; width: 19px; height: 19px; stroke-width: 2; transition: transform 160ms ease; }
.article-search__submit:hover::before { background: #1554d0; box-shadow: 0 3px 8px rgb(33 101 237 / 24%); }
.article-search__submit:hover svg { transform: translateY(-1px); }
.article-search__submit:active::before { transform: scale(.92); }
.article-search__submit:active svg { transform: scale(.92); }
.article-search__submit:disabled { opacity: .55; cursor: default; }
.article-search__shortcuts { display: flex; align-items: center; gap: 4px; min-width: 0; }
.article-search__shortcut {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  max-width: 210px;
  padding: 7px 9px;
  border-radius: 8px;
  color: #52657e;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}
.article-search__shortcut span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-search__shortcut svg { width: 16px; height: 16px; color: #72839b; transition: transform 150ms ease; }
.article-search__shortcut:hover { color: var(--as-blue); background: #edf4ff; }
.article-search__shortcut:hover svg { color: inherit; transform: translateY(-1px); }
.article-search :is(button, a):focus-visible,
.article-search-arrival button:focus-visible { outline: 2px solid #2165ed; outline-offset: 3px; }
.article-search__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: 100%;
  max-height: min(380px, 55vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border: 1px solid #dae4f2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 40px rgb(32 55 89 / 15%);
  animation: article-search-panel-in 160ms ease-out;
}
.article-search__panel[hidden] { display: none; }
.article-search .article-search__hint { margin: 0; padding: 7px 10px; color: #63748a; font-size: 13px; line-height: 1.6; }
.article-search__option {
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.article-search__option:hover, .article-search__option[aria-selected="true"] { background: #eef4ff; }
.article-search__option strong { display: block; color: #263a55; font-size: 14px; line-height: 1.5; }
.article-search__option small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}
.article-search__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.article-search__noscript { margin: 8px 0 0; font-size: 13px; color: #64748b; }
/* Highlight existing content without rebuilding links, images, lists or tables. */
.article-lc-page .article-search-match {
  outline: 1px solid #e6d39f;
  outline-offset: 5px;
  border-radius: 4px;
  background-color: #fffaf0;
  box-shadow: -4px 0 0 #3172e8;
}
.article-lc-page .article-search-match.is-arriving { animation: article-search-arrive 2s ease-out; }
.article-lc-page tr.article-search-match > :is(td, th) { background-color: #fffaf0; }
.article-search-arrival {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 12px 0;
  padding-bottom: 4px;
  color: #6c644e;
  font: 12px/1.5 var(--font-family-base, Arial, sans-serif);
}
.article-search-arrival button {
  min-height: 44px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #195ccb;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.article-search-arrival button:hover { background: #eef4ff; }
.article-search-arrival [data-search-dismiss] { margin-left: auto; min-width: 44px; color: #62748c; }
.article-search-arrival .article-search-feedback { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0 2px; border-top: 1px solid #e5ecf5; color: #526580; font-size: 12px; }
.article-search-feedback button { border: 1px solid #d5e2f5; background: #fff; border-radius: 20px; min-height: 44px; padding: 6px 14px; }
@keyframes article-search-panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes article-search-arrive { from { background-color: #ffedb2; } to { background-color: #fffaf0; } }
@media (max-width: 991.98px) {
  .article-search__row { flex-wrap: wrap; gap: 3px; }
  .article-search__form { flex-basis: 100%; max-width: 520px; }
  .article-search__shortcuts { flex-wrap: wrap; width: 100%; gap: 2px 8px; }
  .article-search__shortcut { max-width: 240px; }
}
@media (max-width: 575.98px) {
  .article-search { margin-top: 18px; padding: 8px; border-radius: 16px; }
  .article-search__form { min-width: 0; max-width: none; }
  .article-search__field { gap: 7px; padding-left: 13px; }
  .article-search__field > svg { width: 16px; height: 16px; }
  .article-search__shortcuts { gap: 0 6px; justify-content: space-between; }
  .article-search__shortcut { gap: 4px; padding: 6px 0; max-width: 100%; font-size: 12px; }
  .article-search__shortcut svg { width: 14px; height: 14px; }
}
@media (max-width: 359.98px) {
  .article-search__field > svg { display: none; }
  .article-search__field { padding-left: 10px; }
  .article-search__field input::placeholder { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .article-search *, .article-search *::before, .article-search-arrival *, .article-lc-page .article-search-match {
    animation: none !important;
    transition: none !important;
  }
}