/* frontend/search.css -- the search box + results listbox shared by
   /docs, /rules and /account (frontend/page-search.js). Extracted out
   of docs.css, which is where this started -- see page-search.js's own
   header comment for why the SEARCH code moved to a shared module
   while each page's scroll-spy stays copied. This file is the CSS half
   of that same move: the class names below (.docs-search-*) are kept
   as-is rather than renamed, the same way docs.html itself already
   borrows rules.css's .rules-toc/.rules-body names for its own
   contents rail instead of inventing page-specific ones. */

/* ---- search -----------------------------------------------------------
   Sits above the two-column layout, full width at every viewport --
   unlike the contents rail, search has to work before a reader has
   scrolled or even knows the section names exist. */
.docs-search-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 0 32px;
}

.docs-search-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mw-text-6);
  margin: 0 0 8px;
}

.docs-search-box {
  position: relative;
}

.docs-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--mw-raised);
  border: 1px solid var(--mw-line-strong);
  border-radius: 6px;
  color: var(--mw-text-1);
  font-size: 0.9375rem;
  padding: 10px 40px 10px 14px;
}

.docs-search-input::placeholder { color: var(--mw-text-6); }

.docs-search-input:focus {
  outline: none;
  border-color: var(--mw-gold);
}

/* Decorative "/" hint, the same idea as a keyboard-shortcut badge --
   purely visual, aria-hidden in the markup, never read as content.
   (There is no actual "/" keybinding wired to this input on any page
   -- see page-search.js's own header comment.) */
.docs-search-hint {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mw-text-6);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8125rem;
  border: 1px solid var(--mw-line-strong);
  border-radius: 3px;
  padding: 1px 6px;
  pointer-events: none;
}

.docs-search-input:focus ~ .docs-search-hint { display: none; }

.docs-search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--mw-panel);
  border: 1px solid var(--mw-line-strong);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  max-height: 60vh;
  overflow-y: auto;
}

.docs-search-result {
  border-radius: 5px;
  margin: 0 0 2px;
}
.docs-search-result:last-child { margin-bottom: 0; }

.docs-search-result a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
  color: inherit;
  border-radius: 5px;
}

.docs-search-result-title {
  display: block;
  color: var(--mw-gold-light);
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 2px;
}

.docs-search-result-snippet {
  display: block;
  color: var(--mw-text-4);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.docs-search-result mark {
  background: var(--mw-accent-active);
  color: var(--mw-gold-light);
  border-radius: 2px;
  padding: 0 1px;
}

/* Hover and the keyboard-selected row read identically -- a mouse and
   arrow keys are two ways to reach the same state, not two states. */
.docs-search-result:hover,
.docs-search-result.docs-search-active {
  background: var(--mw-accent-wash);
}

.docs-search-empty {
  padding: 10px;
  color: var(--mw-text-5);
  font-size: 0.8125rem;
}

/* ---- section/sub-section anchors --------------------------------------
   Generic on purpose (not scoped to .docs-body/.rules-body/etc.): any
   id'd h2/h3 loading this file is a search result or a deep-link
   target, and both need to clear the fixed nav bar on arrival, on
   every page that loads this file. */
h2[id],
h3[id] {
  scroll-margin-top: calc(var(--mw-nav-h) + 20px);
}

/* Brief highlight on whatever heading a search result (or a direct
   #anchor link) just landed on, so a reader who jumped straight to the
   middle of a long page has one visual cue confirming they arrived
   somewhere real. Toggled by page-search.js; fades on its own via the
   transition rather than being removed on a timer racing the eye. */
.docs-search-landed {
  transition: background-color 1.6s ease;
  background-color: var(--mw-accent-active);
  border-radius: 4px;
}