/* Docs search widget styling, shared by all FOUR docs pages.
   /docs (the hub), /docs/tenant, /docs/owner, /docs/first-property.

   ID 791. These rules used to live in guide.css, which only the three content
   guides load -- the hub has its own standalone stylesheet and deliberately
   does not link the guide layout. Giving the hub a search box meant either
   copy-pasting the widget's CSS into docs.html (the duplication ID 786 spent a
   ticket removing) or pulling the whole guide layout onto a page that is not
   laid out like a guide. So the widget's rules moved here instead: one source
   of truth, loaded by the pages that have a search box and nothing else.

   Colour variables come from the host page's own :root -- guide.css defines
   them for the guides, docs.html's inline <style> defines the same names. */

.doc-search { position: relative; }
.doc-search-input { appearance: none; width: 230px; max-width: 46vw; font: inherit; font-size: .85rem; color: var(--ink); background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23556171' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .65rem center; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem .5rem 2.1rem; min-height: 40px; }
.doc-search-input::placeholder { color: var(--muted); }
.doc-search-input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.doc-search-kbd { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); font-size: .68rem; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: .1rem .3rem; pointer-events: none; background: var(--soft); }
.doc-search-input:focus + .doc-search-kbd, .doc-search-input:not(:placeholder-shown) + .doc-search-kbd { display: none; }
.doc-search-results { position: absolute; z-index: 40; top: calc(100% + .4rem); right: 0; width: 420px; max-width: 88vw; max-height: 60vh; overflow-y: auto; background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(21, 37, 54, .16); padding: .35rem; }
.doc-search-results[hidden] { display: none; }
.doc-search-hit { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; color: var(--ink); padding: .55rem .65rem; border-radius: 7px; cursor: pointer; text-decoration: none; }
.doc-search-hit:hover, .doc-search-hit.is-active { background: var(--soft); }
.doc-search-hit-title { font-weight: 600; font-size: .88rem; color: var(--navy); display: block; }
.doc-search-hit-crumb { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: block; margin-bottom: .12rem; }
.doc-search-hit-snip { font-size: .8rem; color: var(--muted); display: block; margin-top: .15rem; line-height: 1.45; }
.doc-search-hit mark { background: #fdf0c8; color: inherit; padding: 0 .1em; border-radius: 2px; }
.doc-search-empty { padding: .8rem .65rem; font-size: .85rem; color: var(--muted); }
.doc-search-count { padding: .35rem .65rem .15rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* A hit in a DIFFERENT guide than the one you are reading. Reads as a badge
   because "which guide am I about to be sent to" is the thing a cross-guide
   result has to answer before you click it. */
.doc-search-hit-guide { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: .05rem .35rem; margin-bottom: .18rem; }

@media (max-width: 640px) { .doc-search-input { width: 100%; max-width: none; } .doc-search { flex: 1 1 100%; } .doc-search-results { right: auto; left: 0; width: 100%; } }
/* Mobile Safari force-zooms the viewport whenever a focused input is under
   16px and never zooms back out. Desktop keeps the smaller type. */
@media (max-width: 900px) { .doc-search-input { font-size: 1rem; } }
/* The keyboard hint costs width and means nothing without a keyboard. */
@media (max-width: 380px) { .doc-search-kbd { display: none; } }
@media print { .doc-search { display: none !important; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
