/* Report search: the box, its suggestions, and the search button in the top bar.
   Loaded by every public page after the page's own styles. It uses the same colour variables
   each page defines (--cream, --ink, ...), with fallbacks so a page missing one still renders. */

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

/* ---- the box ---- */
.sx-form{
  position:relative;display:flex;align-items:center;gap:10px;
  background:var(--white,#f2efe3);border:1px solid var(--line-2,rgba(28,26,21,.26));
  border-radius:100px;padding:6px 6px 6px 18px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.sx-form:focus-within{border-color:var(--ink,#1c1a15);box-shadow:0 0 0 3px rgba(166,201,60,.4);}
.sx-icon{flex-shrink:0;color:var(--ink-soft,#514c40);}
.sx-form input[type="search"]{
  flex:1;min-width:0;border:0;background:transparent;outline:none;box-shadow:none;
  font-family:var(--sans,Arial,sans-serif);font-size:16px;color:var(--ink,#1c1a15);
  padding:10px 0;-webkit-appearance:none;appearance:none;text-overflow:ellipsis;
}
.sx-form input[type="search"]::placeholder{color:var(--ink-faint,#5f5747);opacity:.85;}
.sx-form input[type="search"]::-webkit-search-cancel-button,
.sx-form input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;display:none;}
.sx-submit{
  flex-shrink:0;border:0;cursor:pointer;
  background:var(--ink,#1c1a15);color:var(--white,#f2efe3);
  padding:12px 24px;border-radius:100px;
  font-family:var(--sans,Arial,sans-serif);font-size:14.5px;font-weight:600;
  transition:background .25s ease, transform .25s ease;
}
.sx-submit:hover{background:#000;transform:translateY(-1px);}

.sx-form--hero{box-shadow:var(--card-shadow,0 18px 40px rgba(28,26,21,.12));padding:7px 7px 7px 22px;}
.sx-form--big{max-width:720px;padding:8px 8px 8px 24px;}
.sx-form--big input[type="search"]{font-size:18px;}
.sx-form--panel{max-width:760px;}

/* ---- suggestions ---- */
.sx-list{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:70;
  list-style:none;margin:0;padding:8px;text-align:left;
  background:var(--white,#f2efe3);border:1px solid var(--line-2,rgba(28,26,21,.26));
  border-radius:20px;box-shadow:var(--card-shadow,0 18px 40px rgba(28,26,21,.12));
  max-height:min(62vh,440px);overflow-y:auto;overscroll-behavior:contain;
}
.sx-list[hidden]{display:none;}
.sx-opt a{
  display:block;padding:10px 14px;border-radius:12px;color:var(--ink,#1c1a15);
  text-decoration:none;
}
.sx-opt a:hover,
.sx-opt[aria-selected="true"] a{background:var(--cream-2,#cbc7b2);}
.sx-opt-name{display:block;font-size:15px;font-weight:600;line-height:1.35;}
.sx-opt-name mark{background:rgba(166,201,60,.5);color:inherit;border-radius:3px;padding:0 1px;}
.sx-opt-meta{display:block;margin-top:3px;font-family:var(--mono,monospace);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint,#5f5747);}
.sx-label{padding:8px 14px 4px;font-family:var(--mono,monospace);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint,#5f5747);}
.sx-opt--all{margin-top:4px;border-top:1px solid var(--line,rgba(28,26,21,.14));padding-top:4px;}
.sx-opt--all a{font-size:14px;font-weight:600;color:var(--ink-soft,#514c40);}
.sx-opt--all .sx-opt-name{font-size:14px;}
.sx-empty{padding:14px 14px 10px;font-size:14.5px;line-height:1.5;color:var(--ink-soft,#514c40);}
.sx-empty a{display:inline-block;margin-top:6px;font-weight:600;color:var(--ink,#1c1a15);border-bottom:1px solid var(--accent-2,#6f7d34);}

/* ---- chips (browse by industry) ---- */
.sx-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;}
.sx-chips .sx-chips-label{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint,#5f5747);margin-right:2px;}
.sx-chip{
  display:inline-block;padding:6px 13px;border:1px solid var(--line-2,rgba(28,26,21,.26));border-radius:100px;
  font-size:13px;line-height:1.3;color:var(--ink-soft,#514c40);background:transparent;text-decoration:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.sx-chip:hover{background:var(--ink,#1c1a15);color:var(--white,#f2efe3);border-color:var(--ink,#1c1a15);}
.sx-chip.is-active{background:var(--ink,#1c1a15);color:var(--white,#f2efe3);border-color:var(--ink,#1c1a15);}
.sx-chip small{opacity:.65;margin-left:4px;font-size:11.5px;}

/* ---- the top bar: magnifier button and the panel it opens ---- */
.nav-right{display:flex;align-items:center;gap:10px;}
.nav-search-btn{
  width:40px;height:40px;flex-shrink:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2,rgba(28,26,21,.26));border-radius:100px;background:transparent;color:var(--ink,#1c1a15);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-search-btn:hover{background:var(--white,#f2efe3);}
.nav-search-btn[aria-expanded="true"]{background:var(--ink,#1c1a15);border-color:var(--ink,#1c1a15);color:var(--white,#f2efe3);}
.nav-search-panel{
  position:absolute;left:0;right:0;top:100%;z-index:60;
  background:var(--cream,#d6d3c2);border-bottom:1px solid var(--line,rgba(28,26,21,.14));
  padding:16px 0 20px;box-shadow:0 18px 30px rgba(28,26,21,.10);
}
.nav-search-panel[hidden]{display:none;}

/* ---- the homepage box ---- */
.hero-search{position:relative;z-index:3;max-width:580px;margin:0 0 34px;}
.hero-search .sx-chips{max-width:860px;}
.hero-sub + .hero-search{margin-top:-14px;}

@media(max-width:520px){
  .nav-right{gap:6px;}
  .nav-search-btn{width:36px;height:36px;}
  .sx-form{padding-left:14px;}
  .sx-form--hero,.sx-form--big{padding:6px 6px 6px 16px;}
  .sx-submit{padding:11px 18px;}
  .sx-form--panel .sx-submit{display:none;}
  .sx-form--panel{padding:4px 14px;}
  .hero-search{margin-bottom:28px;}
  /* Phones: three industries plus the link to all of them is plenty under the box. */
  .hero-search .sx-chip:not(.sx-chip--all):nth-of-type(n+4){display:none;}
}