/* Site-wide search (assets/v3/search-ui.mjs, search-page.mjs). Owner pick 2026-11-08: the inline
   header field. sx- shared result rows, sb- the header field and its panel, sp- the search page.
   Colours come from theme tokens only, so every theme works.

   Header layout: the field is a flex item with a compact resting width that shrinks before the tab
   capsule does (the capsule never shrinks while the field is there), so the header keeps one row at
   laptop widths. When focused, the field grows only into the free space to its left (search-ui.mjs
   measures it into --sb-open), so it never covers the tabs; the panel opens below, right-aligned. */

.search-slot { flex: 0 1 236px; min-width: 120px; display: flex; align-items: center; }
.search-slot[hidden] { display: none; }
.search-locked, .search-locked body { overflow: hidden; }
@media (min-width: 1201px) {
  .site-header:has(.search-slot:not([hidden])) .site-nav { flex-shrink: 0; }
}
@media (min-width: 1600px) { .search-slot { flex-basis: 280px; } }
@media (min-width: 1481px), (max-width: 1200px) { .site-header:has(.search-slot:not([hidden])) .brand { flex: none; white-space: nowrap; } }
/* 1201-1480 px: a slightly tighter header so the tabs, the field, Sign in and the theme share one row */
@media (min-width: 1201px) and (max-width: 1480px) {
  .site-header:has(.search-slot:not([hidden])) { gap: 14px; }
  .site-header:has(.search-slot:not([hidden])) .site-nav { gap: 0; }
  .site-header:has(.search-slot:not([hidden])) .site-nav .nav-trigger > a { padding-left: 12px; padding-right: 4px; }
  .site-header:has(.search-slot:not([hidden])) .nav-toggle { width: 28px; }
}
@media (max-width: 1200px) {
  .site-header .search-slot { flex: 0 1 300px; min-width: 160px; margin-left: auto; }
  .site-header .search-slot:not([hidden]) ~ .theme-picker { margin-left: 0; }
}

/* keycaps */
.sb-kbd, .sp-kbd, .sb-foot kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 7px;
  font: 600 11px/1 var(--mono); color: var(--muted); background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 12%, transparent);
}
.sb-foot kbd { height: 19px; min-width: 19px; padding: 0 4px; font-size: 10.5px; margin-right: 2px; }

/* ---------- shared result rows ---------- */
.sx-group { padding: 4px 0; }
.sx-group + .sx-group { border-top: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); margin-top: 4px; padding-top: 8px; }
.sx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 6px; color: var(--muted); font: 600 12px/1.2 var(--sans); letter-spacing: .02em; }
.sx-head small { font: 600 11px/1 var(--mono); padding: 3px 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); }
.sx-clear { border: 0; padding: 2px 4px; background: none; color: var(--link); font: 600 12px/1 var(--sans); cursor: pointer; }
.sx-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 14px; color: var(--ink); text-decoration: none; scroll-margin: 10px; outline: 0; }
.sx-row[aria-selected="true"], .sx-all[aria-selected="true"] { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--card)), color-mix(in srgb, var(--accent) 9%, var(--card)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent), 0 10px 24px -16px color-mix(in srgb, var(--accent) 75%, transparent); }
.sx-tile { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--dc, var(--accent));
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--dc, var(--accent)) 24%, transparent), color-mix(in srgb, var(--dc, var(--accent)) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc, var(--accent)) 32%, transparent), 0 6px 16px -10px color-mix(in srgb, var(--dc, var(--accent)) 80%, transparent); }
.sx-glyph { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sx-mini { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sx-row-title { font: 580 15px/1.35 var(--sans); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-id { margin-right: 8px; font: 600 11.5px/1 var(--mono); color: var(--muted); letter-spacing: 0; }
.sx-meta { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--muted); font: 450 12.5px/1.4 var(--sans); }
.sx-meta > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-section { color: var(--ink-2); font: 500 12.5px/1.4 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-snippet { color: var(--ink-2); font: 400 13px/1.5 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx-row mark, .sp-card mark { color: inherit; background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 4px; padding: 0 1px; }
.sx-kind, .sx-tag, .sx-diff { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); white-space: nowrap;
  font: 600 11px/1 var(--sans); letter-spacing: .01em; color: var(--ink-2); border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.sx-kind[data-k="l"], .sx-kind[data-k="m"] { color: var(--ink); border-color: color-mix(in srgb, var(--dc, var(--accent)) 45%, transparent); background: color-mix(in srgb, var(--dc, var(--accent)) 12%, transparent); }
.sx-kind[data-k="p"] { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sx-diff::before, .sp-dot[data-df] { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.sx-diff[data-df="medium"]::before, .sp-dot[data-df="medium"] { background: var(--warn); }
.sx-diff[data-df="hard"]::before, .sp-dot[data-df="hard"] { background: var(--bad); }
.sx-diff[data-df="expert"]::before, .sp-dot[data-df="expert"] { background: var(--ch-sva); box-shadow: 0 0 6px var(--ch-sva); }
.sx-domain { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font: 600 11.5px/1 var(--sans); }
.sx-domain i, .sp-dot:not([data-df]), .sp-domain-card i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dc); box-shadow: 0 0 8px color-mix(in srgb, var(--dc) 70%, transparent); }
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 12px 8px; }
.sx-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink-2); font: 540 13.5px/1.2 var(--sans); text-decoration: none; cursor: pointer; outline: 0; }
.sx-chip .sx-mini { color: var(--accent); width: 14px; height: 14px; }
.sx-chip[aria-selected="true"], .sx-chip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.sx-row-plain .sx-mini { color: var(--muted); }
.sx-all { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding: 12px; border-radius: 14px; color: var(--link); font: 580 13.5px/1.2 var(--sans); text-decoration: none; outline: 0;
  border-top: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); }
.sx-all .sx-go { margin-left: auto; }
.sx-empty { padding: 30px 18px; text-align: center; color: var(--ink-2); font: 450 14px/1.55 var(--sans); }
.sx-empty p { margin: 0 0 6px; }
.sx-empty strong { color: var(--ink); font-weight: 620; }
.sx-empty a { color: var(--link); }
.sx-partial { margin: 6px 12px 2px; color: var(--muted); font: 500 12.5px/1.4 var(--sans); }
.sx-loading { display: flex; justify-content: center; gap: 8px; padding: 34px 0; }
.sx-loading span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: sx-pulse 1s ease-in-out infinite; }
.sx-loading span:nth-child(2) { animation-delay: .15s; } .sx-loading span:nth-child(3) { animation-delay: .3s; }

/* result cards (B and the search page) */
.sx-card { align-items: flex-start; padding: 12px; gap: 13px; }
.sx-card .sx-row-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sx-badges { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }


/* ---------- the header field and its panel ---------- */
.sb { position: relative; width: 100%; height: 44px; }
.sb-icon { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: var(--lit-panel, var(--card)); box-shadow: var(--lit-shadow, none); color: var(--ink-2); cursor: pointer; transition: border-color .2s var(--ease), color .2s; }
.sb-icon > svg { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sb-icon:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.sb-field { position: absolute; top: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; padding: 0 8px 0 14px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); background: var(--lit-panel, var(--card)); box-shadow: var(--lit-shadow, none); cursor: text;
  transition: width .3s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease); }
.sb-field > svg { flex: none; color: var(--muted); stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: color .2s; }
.sb-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 520 14.5px/1 var(--sans); letter-spacing: -.01em; }
.sb-input::placeholder, .sp-form input::placeholder { color: var(--muted); opacity: 1; }
.sb-close { display: none; }
.sb:hover .sb-field { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.sb[data-state="open"] .sb-field { width: var(--sb-open, 100%); background: var(--card); border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent), 0 14px 34px -14px color-mix(in srgb, var(--accent) 55%, transparent), var(--lit-shadow, none); }
.sb[data-state="open"] .sb-field > svg { color: var(--accent); }
/* the shortcut chip: a flex item after the input, so it takes its own room and never covers the text;
   hidden while the field is open, focused or holds text, when it would not fit (.sb-tight) and on phones */
.sb-hint { flex: none; height: 22px; padding: 0 5px; letter-spacing: .02em; white-space: nowrap; }
.sb[data-state="open"] .sb-hint, .sb-field:focus-within .sb-hint, .sb-input:not(:placeholder-shown) ~ .sb-hint, .sb.sb-tight .sb-hint { display: none; }
.sb-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 2; display: flex; flex-direction: column; width: var(--sb-panel, min(640px, calc(100vw - 2 * var(--gutter)))); max-height: min(72vh, 680px);
  border-radius: 22px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: var(--card); color: var(--ink); overflow: hidden;
  box-shadow: 0 1px 0 rgb(255 255 255 / .07) inset, 0 40px 90px -30px rgb(0 0 0 / .62), 0 0 70px -26px color-mix(in srgb, var(--accent) 40%, transparent); animation: sx-drop .2s var(--ease); }
.sb-panel[hidden] { display: none; }
.sb-panel::before { content: ''; position: absolute; inset: 0 28px auto; height: 2px; background: var(--spectrum, var(--accent)); pointer-events: none; z-index: 1; }
.sb-list { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 8px 10px 12px; }
.sb-foot { display: flex; align-items: center; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--rule); color: var(--muted); font: 500 12px/1 var(--sans); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.sb-foot-end { margin-left: auto; }
.sx-all .sb-kbd { margin-left: auto; height: 20px; font-size: 10.5px; }

/* ---------- the search page ---------- */
.sp { max-width: 1240px; margin: 0 auto; padding: clamp(28px, 6vw, 72px) var(--gutter) 88px; }
.sp-hero { position: relative; max-width: 840px; margin: 0 auto 40px; text-align: center; }
.sp-hero::before { content: ''; position: absolute; inset: 30% -10% -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); filter: blur(10px); }
.sp-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: var(--r-pill); color: var(--ink-2); font: 600 12.5px/1 var(--sans);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: color-mix(in srgb, var(--card) 70%, transparent); }
.sp-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.sp-title { margin: 18px 0 28px; font: 720 clamp(32px, 5.2vw, 56px)/1.04 var(--display); letter-spacing: -.04em; color: var(--ink); }
.sp-form { display: flex; align-items: center; gap: 14px; height: 70px; padding: 0 16px 0 26px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); background: var(--lit-panel, var(--card));
  box-shadow: var(--lit-shadow, none), 0 30px 80px -42px color-mix(in srgb, var(--accent) 70%, transparent); transition: border-color .2s, box-shadow .25s var(--ease); }
.sp-form:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent), 0 30px 80px -36px color-mix(in srgb, var(--accent) 80%, transparent), var(--lit-shadow, none); }
.sp-glass { flex: none; color: var(--accent); stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sp-form input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 520 21px/1 var(--sans); letter-spacing: -.015em; }
.sp-form input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .6; }
.sp-status { min-height: 1.4em; margin: 16px 0 0; color: var(--muted); font: 500 13.5px/1.4 var(--sans); }
.sp-body { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 36px; align-items: start; }
.sp-facets { position: sticky; top: 20px; padding: 18px 18px 22px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); background: var(--lit-panel, var(--card)); box-shadow: var(--lit-shadow, none); }
.sp-facets-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-facets-head h2 { margin: 0; font: 650 15px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.sp-reset { border: 0; padding: 4px 2px; background: none; color: var(--link); font: 600 12.5px/1 var(--sans); cursor: pointer; }
.sp-facet h3 { margin: 18px 0 9px; color: var(--muted); font: 600 12px/1.2 var(--sans); letter-spacing: .02em; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 11px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: color-mix(in srgb, var(--ink) 3%, transparent); color: var(--ink-2); font: 540 13px/1.2 var(--sans); cursor: pointer; transition: background .15s, border-color .15s, box-shadow .2s; }
.sp-chip small { font: 600 11px/1 var(--mono); color: var(--muted); }
.sp-chip:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); color: var(--ink); }
.sp-chip[aria-pressed="true"] { color: var(--ink); background: color-mix(in srgb, var(--accent) 15%, var(--card)); border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 75%, transparent); }
.sp-chip[aria-pressed="true"] small { color: var(--ink-2); }
.sp-chip[data-zero] { opacity: .5; }
.sp-results { min-width: 0; }
.sp-group + .sp-group { margin-top: 34px; }
.sp-group h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 660 19px/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.sp-group h2 small { font: 600 12px/1 var(--mono); padding: 4px 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); }
.sp-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sp-card { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: var(--lit-panel, var(--card)); box-shadow: var(--lit-shadow, none); color: var(--ink); text-decoration: none;
  transition: transform .22s var(--ease), border-color .2s, box-shadow .25s var(--ease); }
.sp-card:hover, .sp-card:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--dc) 55%, transparent);
  box-shadow: var(--lit-shadow-hover, none), 0 0 0 1px color-mix(in srgb, var(--dc) 28%, transparent), 0 20px 44px -26px color-mix(in srgb, var(--dc) 70%, transparent); }
.sp-card .sx-tile { width: 42px; height: 42px; }
.sp-card .sx-row-title { font-size: 16.5px; white-space: normal; }
.sp-card .sx-snippet { font-size: 13.5px; }
.sp-more { margin-top: 12px; min-height: 38px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: var(--lit-panel, var(--card)); box-shadow: var(--lit-shadow, none); color: var(--ink); font: 580 13.5px/1 var(--sans); cursor: pointer; }
.sp-more:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.sp-start section + section { margin-top: 30px; }
.sp-start h2 { margin: 0 0 12px; font: 650 17px/1.2 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.sp-start .sx-chips { padding: 0; }
.sp-domain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sp-domain-card { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: var(--lit-panel, var(--card)); box-shadow: var(--lit-shadow, none); color: var(--ink); text-decoration: none; font: 600 15px/1.25 var(--sans);
  transition: transform .22s var(--ease), border-color .2s, box-shadow .25s; }
.sp-domain-card i { width: 10px; height: 10px; }
.sp-domain-card .sx-go { margin-left: auto; color: var(--muted); }
.sp-domain-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--dc) 55%, transparent); box-shadow: var(--lit-shadow-hover, none), 0 18px 40px -24px color-mix(in srgb, var(--dc) 70%, transparent); }
.sp-skeleton { display: grid; gap: 10px; }
.sp-skeleton span { height: 86px; border-radius: 18px; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent), color-mix(in srgb, var(--ink) 9%, transparent), color-mix(in srgb, var(--ink) 5%, transparent)); background-size: 200% 100%; animation: sx-shimmer 1.2s linear infinite; }

/* visible focus */
:is(.sb-icon, .sb-close, .sx-clear, .sp-chip, .sp-reset, .sp-more, .sp-card, .sx-chip, .sp-domain-card):focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 3px; }
/* the field's frame shows focus (the accent ring, and the focus colour for keyboard focus), so the input needs no second outline */
.sb .sb-input:focus-visible, .sp-form input:focus-visible { outline: 0; }
.sb[data-state="open"] .sb-field:has(.sb-input:focus-visible) { border-color: var(--focus); box-shadow: 0 0 0 var(--focus-w) color-mix(in srgb, var(--focus) 55%, transparent), 0 14px 34px -14px color-mix(in srgb, var(--accent) 55%, transparent); }

@keyframes sx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sx-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sx-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sx-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes sx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- narrower screens ---------- */
@media (max-width: 900px) {
  .sp-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sp-facets { position: static; padding: 14px 16px 16px; }
  .sp-facet h3 { margin: 14px 0 8px; }
  .sp-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
  .sp-chips::-webkit-scrollbar { display: none; }
  .sp-chip { flex: none; }
  .sp-domain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* phones: an icon opens the same field across the top of the header, with the panel below it */
  .site-header .search-slot { flex: none; min-width: 0; position: static; }
  .sb { position: static; width: auto; height: auto; }
  .sb-icon { display: grid; }
  .sb-field { display: none; }
  .sb-hint { display: none; }
  .sb[data-state="open"] .sb-field { display: flex; position: absolute; top: 8px; left: 8px; right: 8px; width: auto; height: 52px; padding: 0 6px 0 16px; z-index: 40; }
  .sb[data-state="open"] .sb-close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); cursor: pointer; }
  .sb-close svg { stroke: currentColor; stroke-width: 1.6; }
  .sb-input { font-size: 16px; }
  .sb-panel { position: absolute; top: 68px; left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 80px); border-radius: 20px; z-index: 39; }
  .sb-foot { display: none; }
  .sx-row { gap: 12px; padding: 10px; }
  .sx-tile { width: 34px; height: 34px; border-radius: 10px; }
  .sb-panel .sx-card { flex-wrap: wrap; }
  .sb-panel .sx-kind:not([data-k="p"]) { display: none; }
  .sb-panel .sx-badges { flex-direction: row; flex-wrap: wrap; width: 100%; padding-left: 47px; align-items: center; }
  .sb-panel .sx-badges:empty { display: none; }
  .sx-all .sb-kbd { display: none; }
  /* the search page */
  .sp-hero { margin-bottom: 26px; }
  .sp-title { margin: 14px 0 20px; }
  .sp-form { height: 58px; padding: 0 12px 0 18px; gap: 10px; }
  .sp-form input { font-size: 17px; }
  .sp-kbd { display: none; }
  .sp-card { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .sp-card .sx-tile { width: 36px; height: 36px; }
  .sp-card .sx-main { flex-basis: calc(100% - 48px); }
  .sp-card .sx-badges { flex-direction: row; flex-wrap: wrap; width: 100%; padding-left: 48px; align-items: center; }
  .sp-domain-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sb-panel { animation: none; }
  .sb-field, .sp-card, .sp-domain-card { transition: none; }
  .sp-card:hover, .sp-domain-card:hover { transform: none; }
  .sx-loading span, .sp-skeleton span { animation: none; }
}

/* Explore button beside the header search (owner, 2026-11-09). */
.header-explore { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink); background: var(--card); font: 600 var(--fs-sm)/1 var(--sans, inherit); text-decoration: none; white-space: nowrap; }
.header-explore svg { stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.header-explore:hover, .header-explore[aria-current="page"] { border-color: var(--accent); color: var(--accent); }
.header-explore:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 900px) { .header-explore span { display: none; } .header-explore { padding: 8px; } }