/* azul-search.css — quick-search panel.
 *
 * Two layout modes share one DOM:
 *  - Inline (`data-mode="inline"`): the input lives in the document flow
 *    where the page mounted it (e.g. inside `#latestrelease`). The results
 *    panel is absolutely positioned beneath the input so it can overflow
 *    the surrounding container without affecting layout.
 *  - Floating (`data-mode="floating"`, fallback): a pill toggle pinned to
 *    the corner of the viewport that opens a popover. Mobile (<1100px)
 *    expands the popover to a full-screen overlay. Used on pages with no
 *    designated mount point.
 *
 * The colour palette echoes the rest of the site: deep blue background
 * (#004e92), aliceblue accents, serif body, monospace for type signatures.
 */

.azul-search {
  --azs-bg: #ffffff;
  --azs-fg: #1a1a1a;
  --azs-muted: #555;
  --azs-accent: #004e92;
  --azs-accent-soft: #e8f0fa;
  --azs-border: #c8d4e3;
  --azs-shadow: 0 8px 30px rgba(0, 4, 40, 0.25);
  --azs-mark: #fff5a8;

  font-family: "Source Serif Pro", Georgia, "Times New Roman", serif;
  color: var(--azs-fg);
  font-size: 14px;
  line-height: 1.4;
}

.azul-search * { box-sizing: border-box; }

/* ---- inline mode ---------------------------------------------------- */

/* Inline host: the wrapper sits in the document flow at the mount point.
 * It defines a positioning context so the results panel can be pinned to
 * the input edge regardless of where the wrapper lives in the page. */
.azul-search.azs-inline {
  position: relative;
  display: block;
  width: 100%;
}

/* When the inline mount sits at the top of a content page (api/guide/blog),
 * cap the search width and align right so it doesn't dominate the article. */
.page-search {
  max-width: 320px;
  margin-left: auto;
  margin-bottom: 16px;
}

.azs-inline-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--azs-border);
  border-radius: 6px;
}

.azul-search.azs-inline .azs-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: normal;
  color: var(--azs-fg);
  outline: none;
  padding: 2px 0;
}

.azs-inline-icon {
  color: var(--azs-accent);
  font-size: 14px;
  line-height: 1;
}

.azul-search.azs-inline .azs-toggle-key {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
  padding: 1px 5px;
  background: var(--azs-accent-soft);
  border: 1px solid var(--azs-border);
  border-radius: 3px;
  color: var(--azs-accent);
  flex-shrink: 0;
}

/* Results panel for inline mode — absolutely positioned, only visible
 * when the input is focused/has results. No box-shadow on the bar
 * itself; the dropdown gets a subtle elevation so it reads as overlay. */
.azs-panel-inline {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9001;
  background: var(--azs-bg);
  border: 1px solid var(--azs-border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 4, 40, 0.15);
  display: none;
  max-height: min(60vh, 480px);
  flex-direction: column;
  overflow: hidden;
}

.azul-search.azs-inline[data-state="open"] .azs-panel-inline { display: flex; }

/* ---- toggle pill (floating mode) ----------------------------------- */

.azul-search[data-mode="floating"] .azs-toggle {
  position: fixed;
  z-index: 9000;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--azs-bg);
  color: var(--azs-accent);
  border: 1px solid var(--azs-border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--azs-shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.azs-toggle:hover { transform: translateY(-1px); }
.azs-toggle:focus { outline: 2px solid var(--azs-accent); outline-offset: 2px; }

.azs-toggle-icon { font-size: 18px; line-height: 1; }
.azs-toggle-label { font-family: inherit; }
.azs-toggle-key {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  padding: 2px 6px;
  background: var(--azs-accent-soft);
  border: 1px solid var(--azs-border);
  border-radius: 4px;
  color: var(--azs-accent);
}

.azul-search[data-state="open"] .azs-toggle { display: none; }

/* ---- panel (floating desktop) -------------------------------------- */

.azul-search[data-mode="floating"] .azs-panel {
  position: fixed;
  z-index: 9001;
  top: 16px;
  right: 16px;
  width: 380px;
  max-height: calc(100vh - 32px);
  background: var(--azs-bg);
  border: 1px solid var(--azs-border);
  border-radius: 12px;
  box-shadow: var(--azs-shadow);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.azul-search[data-mode="floating"][data-state="open"] .azs-panel { display: flex; }

.azs-input-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--azs-border);
  background: var(--azs-accent-soft);
}

.azs-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--azs-fg);
  outline: none;
}

.azs-close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--azs-muted);
  cursor: pointer;
  padding: 0 4px;
}
.azs-close:hover { color: var(--azs-accent); }

.azs-meta {
  padding: 6px 14px;
  font-size: 12px;
  color: var(--azs-muted);
  border-bottom: 1px solid var(--azs-border);
  background: #fafbfd;
}

.azs-results {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.azs-result a {
  display: block;
  padding: 8px 14px;
  border-bottom: 1px solid #eef1f6;
  color: inherit;
  text-decoration: none;
  /* Native focus ring — visible during keyboard navigation. */
  outline: none;
}
.azs-result a:hover,
.azs-result a:focus {
  background: var(--azs-accent-soft);
}
.azs-result a:focus {
  box-shadow: inset 3px 0 0 var(--azs-accent);
}

/* Compact-by-default. The expanded block (signature + snippet) only
 * shows on hover or when the anchor has keyboard focus. Keeps the
 * default state scannable when defaults populate the panel. */
.azs-result .azs-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.azs-compact {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--azs-fg);
}
.azs-result .azs-expanded {
  display: none;
  margin-top: 6px;
}
.azs-result a:hover .azs-expanded,
.azs-result a:focus .azs-expanded {
  display: block;
}

/* Tree indent for default suggestions: a child whose parent is also in
 * the configured key list nests one level. */
.azs-result[data-depth="1"] a {
  padding-left: 30px;
  border-left: 2px solid var(--azs-accent-soft);
}
.azs-result[data-depth="2"] a {
  padding-left: 46px;
  border-left: 2px solid var(--azs-accent-soft);
}

.azs-kind {
  display: inline-block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: middle;
  background: #e9eef5;
  color: #2a3a55;
}
.azs-kind.k-m  { background: #d3e3f5; color: #0446bf; }
.azs-kind.k-s  { background: #ddeedd; color: #2b6a2d; }
.azs-kind.k-e  { background: #f5e3d3; color: #905900; }
.azs-kind.k-fp { background: #efe1f5; color: #5a1c8a; }
.azs-kind.k-fn { background: #d3def5; color: #004e92; }
.azs-kind.k-cn { background: #d8e7d8; color: #1d5e1d; }
.azs-kind.k-ev { background: #f5e8d3; color: #6a4a14; }
.azs-kind.k-f  { background: #f0f0f0; color: #555; }


.azs-sig {
  display: inline-block;
  margin-top: 4px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  color: #4c1c1a;
  background: #fafafa;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: pre-wrap;
  word-break: break-word;
}

.azs-snippet {
  margin-top: 4px;
  font-size: 12px;
  color: var(--azs-muted);
  line-height: 1.45;
}

.azs-snippet mark,
.azs-compact mark {
  background: var(--azs-mark);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* ---- mobile toast (floating only) ---------------------------------- */

@media (max-width: 1099px) {
  .azul-search[data-mode="floating"] .azs-toggle {
    top: auto;
    bottom: 16px;
    right: 16px;
    left: 16px;
    justify-content: center;
    border-radius: 999px;
  }
  .azul-search[data-mode="floating"] .azs-toggle-key { display: none; }

  .azul-search[data-mode="floating"] .azs-panel {
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
    border: 0;
  }
}

/* Print: hide search entirely. */
@media print {
  .azul-search { display: none !important; }
}

/* Dark mode — flips the colour tokens; layout/specifics inherit. */
@media (prefers-color-scheme: dark) {
  .azul-search {
    --azs-bg: #1d2028;
    --azs-fg: #e8e8e8;
    --azs-muted: #9aa0a8;
    --azs-accent: #79b8ff;
    --azs-accent-soft: #1f2a3d;
    --azs-border: #3d4250;
    --azs-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    --azs-mark: #6e5c1c;
  }

  .azs-meta { background: #1a1d24; }
  .azs-result a { border-bottom-color: #2a2e38; }

  /* Recolour the kind badges so they stay legible on a dark row. */
  .azs-kind        { background: #2a2f3a; color: #c8c8c8; }
  .azs-kind.k-m    { background: #1a3158; color: #79b8ff; }
  .azs-kind.k-s    { background: #1c3a1c; color: #98d398; }
  .azs-kind.k-e    { background: #3a2a16; color: #e5c07b; }
  .azs-kind.k-fp   { background: #321b3a; color: #c089d6; }
  .azs-kind.k-fn   { background: #1f2a4a; color: #79b8ff; }
  .azs-kind.k-cn   { background: #1c3a1c; color: #98d398; }
  .azs-kind.k-ev   { background: #3a311a; color: #d6b770; }
  .azs-kind.k-f    { background: #2a2e38; color: #b0b0b0; }
  .azs-kind.k-g    { background: #2a3548; color: #a3c4ff; }

  .azs-sig {
    color: #f0a8a4;
    background: #1b1e25;
  }
}