/* vrtmv search widget — the ONLY copy of these styles.
 *
 * Linked by every page that mounts assets/search.js, including index.html and the customer
 * portal, both of which are self-contained and do NOT link assets/vrtmv.css.
 *
 * This file exists because the styles were previously duplicated in three places and
 * index.html received only the media-query width overrides — no panel background, no item or
 * title rules — so search results rendered as raw text spilling over the hero on the one page
 * most visitors see first. The subpages looked correct, which is exactly why it went unnoticed.
 *
 * Variables use fallback chains: the marketing site and the portal name the same roles
 * differently (--bg-soft vs --faint, --slate vs --muted). Do not "simplify" them to one name.
 */
.vs-wrap{position:relative;display:flex;align-items:center;gap:8px}
.vs-field{position:relative;display:flex;align-items:center;min-width:0;flex:1 1 auto}
.vs-input{width:210px;max-width:100%;padding:7px 30px 7px 11px;font:inherit;font-size:13.5px;
  color:var(--ink,#0B1E3D);background:var(--bg,var(--card,#fff));
  border:1px solid var(--line,#E5E7EB);border-radius:8px;
  transition:border-color .12s,box-shadow .12s,width .16s}
.vs-input:focus{outline:none;width:290px;border-color:var(--blue,var(--navy,#1266E3));
  box-shadow:0 0 0 3px rgba(18,102,227,.14)}
.vs-input::-webkit-search-cancel-button{cursor:pointer}
.vs-hint{position:absolute;right:9px;pointer-events:none;font:600 11px/1 var(--mono,ui-monospace,monospace);
  color:var(--slate-2,var(--muted,#6B7280));border:1px solid var(--line,#E5E7EB);
  border-radius:4px;padding:2px 5px;background:var(--bg-soft,var(--faint,#f5f8fd))}
.vs-panel{position:absolute;top:calc(100% + 9px);right:0;width:min(460px,86vw);
  max-height:min(70vh,540px);overflow-y:auto;background:var(--bg,var(--card,#fff));
  border:1px solid var(--line,#E5E7EB);border-radius:11px;
  box-shadow:0 12px 34px rgba(11,30,61,.13);z-index:60;padding:6px}
.vs-group{padding:2px 0 6px}
.vs-glabel{font:600 10.5px/1 var(--mono,ui-monospace,monospace);text-transform:uppercase;
  letter-spacing:.12em;color:var(--slate-2,var(--muted,#6B7280));padding:8px 10px 6px}
.vs-more{font-weight:400;letter-spacing:0;text-transform:none;opacity:.75}
.vs-item{display:block;padding:8px 10px;border-radius:7px;text-decoration:none;color:inherit}
.vs-item:hover,.vs-item.on{background:var(--bg-soft,var(--faint,#f5f8fd))}
.vs-item.on{box-shadow:inset 0 0 0 1px var(--line,#E5E7EB)}
.vs-t{display:block;font-weight:600;font-size:13.5px;color:var(--navy,#0A3D91);line-height:1.35}
.vs-meta{display:block;font:11.5px/1.5 var(--mono,ui-monospace,monospace);
  color:var(--slate-2,var(--muted,#6B7280));margin-top:1px}
.vs-s{display:block;font-size:12.5px;color:var(--slate,var(--muted,#6B7280));line-height:1.45;margin-top:2px}
.vs-panel mark{background:rgba(63,161,255,.3);color:inherit;border-radius:2px;padding:0 1px}
.vs-msg{padding:12px 11px;font-size:12.8px;color:var(--slate,var(--muted,#6B7280));line-height:1.5}
.vs-msg.vs-err{color:#8a3b12;background:#fdf6f1;border-radius:7px;margin:4px}

/* Placement in the marketing nav. Visible at EVERY width — an earlier version hid it below
   900px, which is most laptop windows and every phone. 760px is where .nav-links collapses
   behind the burger and space frees up again. */
.nav-search{margin:0 26px 0 30px;min-width:0}
@media (max-width:1080px){ .vs-input{width:172px} .vs-input:focus{width:232px} }
@media (max-width:900px){ .vs-input{width:134px} .vs-input:focus{width:200px} .vs-hint{display:none} }
@media (max-width:760px){
  .nav-search{flex:1 1 auto;margin:0 14px 0 16px}
  .vs-input,.vs-input:focus{width:100%;max-width:none}
  .vs-panel{width:min(94vw,440px);right:-38px}
}
/* Portal header placement. */
.portal-search{margin-left:auto;margin-right:22px;padding-left:20px;min-width:0}
@media (max-width:820px){ .portal-search{flex:1 1 auto;margin:0 10px 0 12px;padding-left:0}
  .vs-input,.vs-input:focus{width:100%;max-width:none} .vs-hint{display:none} }