/* The search panel.
   Same shape as the other four: a <dialog> in the top layer, its own scroll,
   nothing behind it reachable. */
.tu-sr,
.tu-sr *,
.tu-sr *::before,
.tu-sr *::after { box-sizing: border-box; }

.tu-sr {
  width: min(680px, calc(100vw - 24px));
  max-height: min(78vh, 760px);
  margin: 0 auto;
  margin-block-start: clamp(48px, 9vh, 110px);
  padding: 0;
  border: 0;
  border-radius: var(--r-surface, 12px);
  background: var(--paper, #fff);
  color: var(--ink, #14121a);
  box-shadow: 0 30px 70px -24px rgba(15, 23, 42, .45);
  overflow: hidden;
}
.tu-sr::backdrop { background: rgba(12, 8, 12, .55); }
.tu-sr:not([open]) { display: none; }

.tu-sr__box { display: flex; flex-direction: column; max-height: inherit; }

.tu-sr__field {
  display: flex; align-items: center; gap: 12px;
  padding: clamp(14px, 2.2vw, 20px) clamp(16px, 2.6vw, 24px);
  border-bottom: 1px solid var(--line);
}
.tu-sr__glass { flex: none; color: var(--muted, #6b7280); }
.tu-sr__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; padding: 4px 0;
  font: inherit; font-size: clamp(16px, 2vw, 19px);
  color: inherit; background: none;
}
.tu-sr__input:focus { outline: none; }
/* The browser's own clear button, which lands on the wrong side in RTL and
   does not match anything else here. */
.tu-sr__input::-webkit-search-cancel-button { display: none; }
.tu-sr__x {
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 50%;
  background: none; color: var(--muted, #6b7280);
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.tu-sr__x:hover { color: var(--red); border-color: var(--red); }

.tu-sr__status:empty { display: none; }
.tu-sr__status {
  margin: 0; padding: clamp(18px, 3vw, 26px);
  color: var(--muted, #6b7280); text-align: center;
}

/* What the panel shows before a letter is typed. Same scroll and the same
   group headings as the results, so opening the panel and typing into it look
   like one surface rather than two. */
.tu-sr__seed { overflow-y: auto; overscroll-behavior: contain; }
.tu-sr__seed[hidden] { display: none; }

.tu-sr__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: clamp(10px, 1.6vw, 14px);
}
.tu-sr__chip {
  appearance: none;
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 999px);
  background: none;
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.tu-sr__chip:hover,
.tu-sr__chip:focus-visible {
  background: var(--red-tint);
  border-color: var(--red);
  color: var(--red);
}

.tu-sr__out { overflow-y: auto; overscroll-behavior: contain; }
.tu-sr__group { padding: clamp(12px, 2vw, 16px) clamp(16px, 2.6vw, 24px) 4px; }
.tu-sr__gtitle {
  margin: 0 0 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--muted, #6b7280);
}
.tu-sr__list { list-style: none; margin: 0; padding: 0; }
.tu-sr__hit {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-control, 3px);
  color: inherit; text-decoration: none;
}
.tu-sr__hit:hover,
.tu-sr__hit:focus-visible { background: var(--wash, #f6f7f9); outline: none; }
.tu-sr__t { display: block; font-weight: 700; line-height: 1.5; }
.tu-sr__e {
  display: block; margin-top: 3px;
  color: var(--muted, #6b7280); font-size: 13.5px; line-height: 1.6;
}
.tu-sr__more { margin: 4px 12px 0; color: var(--muted, #6b7280); font-size: 12.5px; }

.tu-sr__all {
  display: block; margin: 10px 0 0;
  padding: 14px; border-top: 1px solid var(--line);
  color: var(--red); font-weight: 800; text-align: center; text-decoration: none;
}
.tu-sr__all:hover { background: var(--wash, #f6f7f9); }

.tu-sr__hint {
  margin: 0; padding: 10px clamp(16px, 2.6vw, 24px);
  border-top: 1px solid var(--line);
  color: var(--muted, #6b7280); font-size: 12.5px;
}

/* The button in the header, matching the language control beside it.

   Its colour is stated, not inherited. `color: inherit` took it from .tu-hd,
   which is black — so over the dark hero, where every other control in the row
   is white, the magnifier was a black mark on a dark photograph. The language
   button beside it never had the problem because it names its own colour; this
   now names the same one. */
.tu-hd__search {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer;
  color: rgba(255, 255, 255, .8);
  transition: color .18s ease, background-color .18s ease;
}
/* No light variant: the capsule is dark on every page — the menu links beside
   it are #fff unconditionally, and this matches them. */
.tu-hd__search:hover,
.tu-hd__search:focus-visible { color: #fff; background: rgba(255, 255, 255, .14); }

@media (prefers-reduced-motion: reduce) {
  .tu-sr__x, .tu-hd__search { transition: none; }
}