/* Ahaboo site search (2026-10-10). Self-contained colours so it works in both page shells (base.html + v2 explainer pages). */
.sx{position:relative;flex:1 1 auto;max-width:380px;margin-inline:auto 0;display:flex;align-items:center;font-family:"Atkinson Hyperlegible",system-ui,sans-serif}
.sx-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sx-ic{position:absolute;left:.8rem;width:1.05rem;height:1.05rem;color:#4a5170;pointer-events:none}
.sx-in{width:100%;height:2.5rem;border:0;border-radius:999px;background:#fff;box-shadow:0 0 0 1.5px rgba(35,40,80,.18);padding:0 1rem 0 2.35rem;
  font:400 1rem/1 "Atkinson Hyperlegible",system-ui,sans-serif;color:#1f2650;-webkit-appearance:none;appearance:none}
.sx-in::placeholder{color:#7a7f96}
.sx-in:focus{outline:none;box-shadow:0 0 0 2.5px #4f8fd8}
.sx-in::-webkit-search-cancel-button{-webkit-appearance:none}
.sx-open,.sx-x{display:none;border:0;background:none;color:#1f2650;cursor:pointer}
.sx-list{position:absolute;top:calc(100% + .45rem);left:0;right:0;min-width:300px;max-height:min(70vh,520px);overflow:auto;margin:0;padding:.35rem;list-style:none;
  background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(20,25,60,.18),0 0 0 1px rgba(20,25,60,.08);z-index:80}
.sx-list li a{display:flex;gap:.75rem;align-items:center;padding:.45rem .5rem;border-radius:12px;text-decoration:none;color:#1f2650}
.sx-list li a:hover,.sx-list li[aria-selected="true"] a{background:#fff5d6}
.sx-list img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none;background:#f3efe6}
.sx-list b{display:block;font:600 1rem/1.2 "Fredoka",ui-rounded,system-ui,sans-serif}
.sx-list small{display:block;color:#5d6380;font-size:.85rem;line-height:1.3;margin-top:.15rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sx-list mark{background:#ffe58a;color:inherit;border-radius:3px;padding:0 1px}
.sx-list .sx-none{padding:.8rem .7rem;color:#5d6380;font-size:.95rem}
.sx-list .sx-all a{justify-content:center;font:600 .95rem/1 "Fredoka",ui-rounded,system-ui,sans-serif;color:#d0573a;padding:.7rem}
/* phones: a search icon in the header; tapping it opens the box over the whole header */
@media (max-width:640px){
  .sx{flex:0 0 auto;max-width:none;margin-left:auto;position:static}
  .sx-in,.sx-ic{display:none}
  .sx-open{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;box-shadow:0 0 0 1.5px rgba(35,40,80,.18);background:#fff}
  .sx-open svg{width:1.15rem;height:1.15rem}
  .sx.open{position:absolute;inset:0;z-index:90;display:flex;align-items:center;gap:.4rem;padding:0 .7rem;background:#fdfdfc}
  .sx.open .sx-in{display:block;flex:1}
  .sx.open .sx-ic{display:block;left:1.5rem}
  .sx.open .sx-open{display:none}
  .sx.open .sx-x{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;font-size:1.7rem;line-height:1}
  .sx-list{left:.5rem;right:.5rem;top:calc(100% + .3rem);min-width:0}
}
header.site .wrap,header.v2-top{position:relative}