/* axi0 search: the family look on top of SearXNG's "black" style (true black, white Instrument Sans, the
   orange core). Served by nginx at /axi0/search.css and injected into every page by snippets/search-theme.conf.
   Selectors are SearXNG's simple theme (2026.10): #main_index, .index .title, #search, .result, #sidebar... */

/* optional + a preload in <head>: the font is used when it arrives in time and never swapped in later, so text
   never reflows after the first paint (the swap was the front page's only layout shift, 0.11 on phones) */
@font-face {
  font-family: "Instrument Sans";
  src: url(/axi0/fonts/instrument-sans-latin-var.woff2) format("woff2");
  font-weight: 400 700;
  font-display: optional;
}

:root {
  --ax-core: #f6a04d;
  --ax-ink: #f5f5f7;
  --ax-text: #d6d6dc;
  --ax-mute: #8e8e98;      /* 6.5:1 on black */
  --ax-faint: #868692;     /* footer text, 5.7:1 on black */
  --ax-line: #1c1c21;
  --ax-panel: #0a0a0c;
  --ax-hover: #141418;
  --ax-radius: 14px;
  --ax-me-w: 104px;        /* the header slot: the "Make it mine" pill, or the 36px avatar once a Key is unlocked */
}
html.axi0-unlocked { --ax-me-w: 36px; }

html, body, #main_index, #main_results { background: #000 !important; color: var(--ax-text) !important; }
/* the theme's accent is blue (#58f on the black style); every accent variable becomes the orange core */
:root, html, body {
  --color-btn-background: #f6a04d !important;
  --color-btn-font: #000 !important;
  --color-categories-item-border-selected: #f6a04d !important;
  --color-categories-item-selected-font: #f6a04d !important;
  --color-search-background-hover: #141418 !important;
  --color-toolkit-checkbox-input-border: #f6a04d !important;
  --color-toolkit-checkbox-onoff-on-mark-background: #f6a04d !important;
  --color-toolkit-checkbox-onoff-on-background: #3a2a1a !important;
  --color-toolkit-select-border: #26262c !important;
  --color-result-link-font: #ffffff !important;
  --color-result-link-visited-font: #d6d6dc !important;
  --color-url-font: #8e8e98 !important;
  --color-base-font: #d6d6dc !important;
}
body, input, button, select, textarea { font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important; }
a { color: var(--ax-ink); }
::selection { background: rgba(246, 160, 77, .35); }
.axi0-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- front page -------------------------------------------------------------------------------------- */
/* front page composition: the theme gives #main_index margin-top 26vh; we take over and place the wordmark's top at 30vh,
   the box 30px under it, the motto 26px under the box, the footer pinned to the bottom (body is the theme's flex column) */
body.index_endpoint { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; margin: 0; }
.index_endpoint #main_index { margin: 30vh 0 0 !important; padding: 0 !important; flex: 0 0 auto; }
.index_endpoint footer { margin-top: auto; }
/* the theme paints its own logo as a background on .index .title and sizes h1 at 1em (div.title h1) */
.index .title { background: none !important; min-height: 0 !important; margin: 0 auto 30px !important; }
.index div.title h1.axi0-wordmark {
  visibility: visible !important;   /* the theme hides .index h1 (its logo is a background image) */
  position: relative; display: flex; align-items: baseline; justify-content: center; gap: .18em; width: fit-content; margin: 0 auto;
  font-size: clamp(46px, 9vw, 92px) !important; font-weight: 600; letter-spacing: -.045em; line-height: 1; color: #fff;
}
.axi0-wordmark .axi0-a { color: #fff; }
.axi0-wordmark .axi0-s { color: var(--ax-mute); font-weight: 500; }

/* the dot: an orange core that becomes a small spinning globe (it links to axi0.world). Both layers are always present
   and cross-fade with one transition, so there is never a jump between the two states. search.js drives it with
   .is-globe (the pointer anywhere on the wordmark); without the script, hovering the dot still shows it. */
.axi0-wordmark .axi0-dot {
  position: relative; display: inline-block; width: .22em; height: .22em; margin-left: -.08em;
  transform: translateY(-.05em); text-decoration: none; outline-offset: .12em; border-radius: 50%;
}
.axi0-wordmark .axi0-dot-core, .axi0-wordmark .axi0-globe {
  position: absolute; inset: 0; border-radius: 50%;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .34s ease;
}
.axi0-wordmark .axi0-dot-core { background: var(--ax-core); box-shadow: 0 0 .7em var(--ax-core); }
.axi0-wordmark .axi0-globe {
  opacity: 0; transform: scale(.55); overflow: hidden; will-change: transform, opacity;
  /* the world map (orange land, dark sea) wrapped around the sphere: the 2:1 texture scrolls once per 4 s, the
     visible half is one hemisphere; a radial shade on top gives it the curve. Paused while hidden, so it never jumps. */
  background: url(/axi0/globe.webp) 0 0 / 200% 100% repeat-x #0e1016;
  box-shadow: 0 0 .7em rgba(246, 160, 77, .75), inset -.04em -.04em .1em rgba(0, 0, 0, .7);
  animation: axi0-spin 4s linear infinite paused;
}
.axi0-wordmark .axi0-globe::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%),
              radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .45) 100%);
}
.axi0-wordmark.is-globe .axi0-dot-core, .axi0-wordmark .axi0-dot:focus-visible .axi0-dot-core,
.axi0-wordmark:not(.axi0-live) .axi0-dot:hover .axi0-dot-core { opacity: 0; transform: scale(.4); }
.axi0-wordmark.is-globe .axi0-globe, .axi0-wordmark .axi0-dot:focus-visible .axi0-globe,
.axi0-wordmark:not(.axi0-live) .axi0-dot:hover .axi0-globe {
  opacity: 1; transform: translateX(.045em) scale(1.95); animation-play-state: running;   /* ~40px, centred in the gap */
}
@keyframes axi0-spin { from { background-position: 0 0; } to { background-position: -200% 0; } }

/* the glitch: three tinted copies of the wordmark (search.js adds them, aria-hidden) laid out exactly like it, sliced
   and nudged a few pixels for one second while the letters jitter by a pixel; screen blending turns the overlap white
   and leaves coloured fringes. Tints from our palette: ember, signal mint, glacier blue. */
.axi0-glitch { position: absolute; inset: 0; pointer-events: none; }
.axi0-gl {
  position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; gap: .18em;
  opacity: 0; clip-path: inset(50% 0 50% 0); mix-blend-mode: screen;
}
.axi0-gl .g-a { font-weight: 600; }
.axi0-gl .g-s { font-weight: 500; }
.axi0-gl i { display: inline-block; width: .22em; height: .22em; margin-left: -.08em; }
.axi0-gl-r { color: #ff5b3a; }
.axi0-gl-g { color: #4fe0b0; }
.axi0-gl-b { color: #4f9cff; }
.axi0-wordmark.is-glitch .axi0-gl { will-change: transform, clip-path, opacity; }
.axi0-wordmark.is-glitch .axi0-gl-r { animation: axi0-gl-env 1s linear both, axi0-gl-r 1s steps(1, end) both; }
.axi0-wordmark.is-glitch .axi0-gl-g { animation: axi0-gl-env 1s linear both, axi0-gl-g 1s steps(1, end) both; }
.axi0-wordmark.is-glitch .axi0-gl-b { animation: axi0-gl-env 1s linear both, axi0-gl-b 1s steps(1, end) both; }
.axi0-wordmark.is-glitch .axi0-a, .axi0-wordmark.is-glitch .axi0-s { animation: axi0-jit 1s steps(1, end) both; }
@keyframes axi0-gl-env { 0% { opacity: 0; } 6% { opacity: .95; } 66% { opacity: .9; } 100% { opacity: 0; } }
@keyframes axi0-gl-r {
  0% { clip-path: inset(10% 0 74% 0); transform: translate(-.035em, 0); }
  11% { clip-path: inset(44% 0 38% 0); transform: translate(.05em, -.01em); }
  23% { clip-path: inset(71% 0 11% 0); transform: translate(-.025em, .01em); }
  36% { clip-path: inset(24% 0 59% 0); transform: translate(.04em, 0); }
  49% { clip-path: inset(57% 0 27% 0); transform: translate(-.05em, 0); }
  61% { clip-path: inset(3% 0 83% 0); transform: translate(.025em, .01em); }
  74% { clip-path: inset(79% 0 6% 0); transform: translate(-.02em, -.01em); }
  87% { clip-path: inset(35% 0 48% 0); transform: translate(.012em, 0); }
  100% { clip-path: inset(50% 0 50% 0); transform: none; }
}
@keyframes axi0-gl-g {
  0% { clip-path: inset(62% 0 21% 0); transform: translate(.03em, 0); }
  13% { clip-path: inset(15% 0 70% 0); transform: translate(-.045em, .01em); }
  27% { clip-path: inset(48% 0 33% 0); transform: translate(.035em, -.01em); }
  40% { clip-path: inset(84% 0 3% 0); transform: translate(-.02em, 0); }
  54% { clip-path: inset(30% 0 52% 0); transform: translate(.045em, .01em); }
  68% { clip-path: inset(66% 0 18% 0); transform: translate(-.03em, 0); }
  81% { clip-path: inset(9% 0 79% 0); transform: translate(.015em, -.01em); }
  100% { clip-path: inset(50% 0 50% 0); transform: none; }
}
@keyframes axi0-gl-b {
  0% { clip-path: inset(38% 0 47% 0); transform: translate(.025em, .01em); }
  9% { clip-path: inset(76% 0 9% 0); transform: translate(-.04em, 0); }
  21% { clip-path: inset(5% 0 80% 0); transform: translate(.05em, 0); }
  33% { clip-path: inset(53% 0 31% 0); transform: translate(-.035em, -.01em); }
  46% { clip-path: inset(20% 0 64% 0); transform: translate(.02em, .01em); }
  58% { clip-path: inset(88% 0 2% 0); transform: translate(-.045em, 0); }
  71% { clip-path: inset(42% 0 41% 0); transform: translate(.03em, 0); }
  85% { clip-path: inset(68% 0 16% 0); transform: translate(-.015em, .01em); }
  100% { clip-path: inset(50% 0 50% 0); transform: none; }
}
@keyframes axi0-jit {
  0% { transform: none; } 12% { transform: translate(1px, 0); } 24% { transform: translate(-1px, 0); }
  37% { transform: translate(0, 1px); } 50% { transform: translate(1px, -1px); } 63% { transform: translate(-1px, 0); }
  76% { transform: none; } 88% { transform: translate(1px, 0); } 100% { transform: none; }
}

/* the zoom into axi0.world (search.js): the globe grows from the dot to cover the window and keeps turning, the page
   dims to black, a warm orange wash closes it. Fixed layer, transforms and opacity only. */
.axi0-zoom { position: fixed; inset: 0; z-index: 1000; overflow: hidden; cursor: progress; }
.axi0-zoom-tint { position: absolute; inset: 0; background: #000; opacity: 0; }
.axi0-zoom-ball {
  position: absolute; border-radius: 50%; overflow: hidden; background: #0e1016; transform-origin: 50% 50%;
  will-change: transform; box-shadow: 0 0 140px rgba(246, 160, 77, .35);
}
.axi0-zoom-map {
  position: absolute; top: 0; left: 0; width: 400%; height: 100%; will-change: transform;
  background: url(/axi0/globe-zoom.webp) 0 0 / 50% 100% repeat-x, url(/axi0/globe.webp) 0 0 / 50% 100% repeat-x;
}
.axi0-zoom-ball::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 37% 33%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 42%),
              radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .55) 100%);
}
.axi0-zoom-wash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(120% 90% at 50% 50%, rgba(255, 190, 128, .94), rgba(246, 160, 77, .97) 46%, #d06a2a 100%);
}
@media (prefers-reduced-motion: reduce) {
  .axi0-wordmark .axi0-globe { animation: none; }
  .axi0-gl { display: none; }
  .axi0-wordmark.is-glitch .axi0-a, .axi0-wordmark.is-glitch .axi0-s { animation: none; }
}

/* ideas (or your topics) + the Key card under the motto (front page only) */
.axi0-ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px auto 0; max-width: 680px; padding: 0 16px; }
.axi0-idea { font: inherit; font-size: 12.5px; color: var(--ax-mute); background: transparent; border: 1px solid #26262c; border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: border-color .15s, color .15s; }
.axi0-idea:hover { border-color: rgba(246, 160, 77, .55); color: #fff; }
.axi0-idea:focus-visible { outline: 2px solid var(--ax-core); outline-offset: 2px; }
.axi0-ideas-label { align-self: center; color: var(--ax-mute); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; padding: 0 4px 0 2px; }
.axi0-topic { color: #f1f1f4; border-color: rgba(246, 160, 77, .42); background: rgba(246, 160, 77, .07); }
.axi0-idea[hidden] { display: none; }
html.axi0-has-topics .axi0-ideas:not(.is-topics) { visibility: hidden; }   /* your topics are on their way: no flash of the ideas */
/* the Key card has both versions in the page; the <head> script marks an unlocked browser before the first paint */
html.axi0-unlocked .axi0-kc-off, html:not(.axi0-unlocked) .axi0-kc-on { display: none; }
.axi0-keycard { max-width: 560px; margin: 26px auto 0; padding: 16px 20px; border: 1px solid var(--ax-line); border-radius: 18px; background: var(--ax-panel); color: var(--ax-mute); font-size: 13.5px; line-height: 1.5; text-align: left; }
.axi0-keycard p { margin: 0 0 6px; }
.axi0-keycard p:last-child { margin: 0; }
.axi0-keycard .axi0-keycard-t { color: #fff; font-weight: 600; }
.axi0-keycard b { color: var(--ax-text); font-weight: 600; }
.axi0-keycard a { color: var(--ax-core); text-decoration: none; }
.axi0-keycard a:hover { text-decoration: underline; }
body:not(.index_endpoint) .axi0-ideas, body:not(.index_endpoint) .axi0-keycard { display: none; }
.axi0-motto { text-align: center; color: var(--ax-mute); font-size: 14px; margin: 26px auto 0; max-width: 40em; padding: 0 18px; letter-spacing: .01em; }
.axi0-motto b { color: var(--ax-text); font-weight: 500; }
body:not(.index_endpoint) .axi0-motto { display: none; }   /* the proxy injects it on every page; it belongs to the front page only */

/* your wallpaper (My search), behind everything on the front page at low intensity; the <head> script sets
   data-axi0-wall before the first paint. A picture of your own comes from this device only (IndexedDB). */
html[data-axi0-wall] body.index_endpoint, html[data-axi0-wall] body.index_endpoint #main_index { background: transparent !important; }
html[data-axi0-wall] body.index_endpoint::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
html[data-axi0-wall="ember"] body.index_endpoint::before {
  background: radial-gradient(58% 46% at 16% 6%, rgba(246, 160, 77, .2), rgba(246, 160, 77, 0) 72%),
              radial-gradient(48% 40% at 88% 92%, rgba(226, 98, 46, .15), rgba(226, 98, 46, 0) 70%);
}
html[data-axi0-wall="horizon"] body.index_endpoint::before {
  background: radial-gradient(130% 58% at 50% 112%, rgba(246, 160, 77, .3), rgba(246, 160, 77, .07) 48%, rgba(246, 160, 77, 0) 72%);
}
html[data-axi0-wall="glacier"] body.index_endpoint::before {
  background: radial-gradient(64% 48% at 84% 4%, rgba(92, 168, 255, .18), rgba(92, 168, 255, 0) 70%),
              radial-gradient(56% 44% at 8% 96%, rgba(118, 216, 236, .1), rgba(118, 216, 236, 0) 70%);
}
html[data-axi0-wall="signal"] body.index_endpoint::before {
  background: linear-gradient(rgba(255, 255, 255, .05) 1px, rgba(0, 0, 0, 0) 1px) 0 0 / 56px 56px,
              linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, rgba(0, 0, 0, 0) 1px) 0 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 30%, transparent 100%);
}
html[data-axi0-wall="own"] body.index_endpoint::before {
  background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1) 100%),
              var(--axi0-own-wall, none) center / cover no-repeat;
  opacity: 0; transition: opacity .6s ease;
}
html.axi0-own-ready[data-axi0-wall="own"] body.index_endpoint::before { opacity: .42; }

/* ---- the search box ----------------------------------------------------------------------------------- */
#search .search_box, .search_box {
  background: var(--ax-panel) !important; border: 1px solid #26262c !important; border-radius: 999px !important;
  box-shadow: none !important; transition: border-color .15s, box-shadow .15s;
}
.index_endpoint .search_box { max-width: 680px; margin: 0 auto; }
#search .search_box:focus-within { border-color: var(--ax-core) !important; box-shadow: 0 0 0 4px rgba(246, 160, 77, .14), 0 10px 40px rgba(0, 0, 0, .6) !important; }
#q { background: transparent !important; color: #fff !important; font-size: 17px !important; padding: 14px 18px !important; border: 0 !important; box-shadow: none !important; }
#q::placeholder { color: var(--ax-mute); }
#send_search, #clear_search { background: transparent !important; border: 0 !important; color: var(--ax-mute) !important; }
#clear_search { width: 30px !important; min-width: 30px; }   /* a 24px target at least (the theme's 1.8rem is 23px) */
#send_search:hover, #send_search:focus { color: var(--ax-core) !important; }
#search_header { border: 0 !important; background: transparent !important; }

/* pages with a header (preferences, stats): the SearXNG logo image becomes the wordmark */
.axi0-pagemark { display: inline-flex; align-items: baseline; gap: .14em; text-decoration: none; font-size: 30px; font-weight: 600; letter-spacing: -.045em; margin: 0 0 6px; }
.axi0-pagemark .axi0-a { color: #fff; }
.axi0-pagemark .axi0-s { color: var(--ax-mute); font-weight: 500; }
.axi0-pagemark .axi0-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ax-core); box-shadow: 0 0 10px var(--ax-core); transform: translateY(-3px); }
.page_with_header h1 { color: #fff !important; font-weight: 600; letter-spacing: -.02em; }
.page_with_header .tabs > label { color: var(--ax-mute) !important; }
.page_with_header .tabs > input:checked + label { color: var(--ax-core) !important; border-bottom-color: var(--ax-core) !important; }
#main_preferences .description, #main_preferences legend { color: var(--ax-mute) !important; }
#main_preferences legend { color: #fff !important; }

/* results page header: the SearXNG logo becomes the wordmark */
#search_logo svg { display: none !important; }
#search_logo { display: inline-flex !important; align-items: baseline; gap: .1em; text-decoration: none; margin-right: 12px; }
#search_logo::before, #search_logo::after { flex: none; }   /* the theme's logo cell is ~31px wide: never squeeze the dot to 0 */
#search_logo::before { content: "axi0"; font-size: 24px; font-weight: 600; letter-spacing: -.045em; color: #fff; }
#search_logo::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ax-core); box-shadow: 0 0 8px var(--ax-core); transform: translateY(-2px); }

/* categories and filters */
#categories .category_button, .search_categories .category_button {
  background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important;
  color: var(--ax-mute) !important; border-radius: 0 !important; padding: 8px 12px !important;
}
#categories .category_button:hover { color: var(--ax-ink) !important; }
#categories .category_button.selected { color: #fff !important; border-bottom-color: var(--ax-core) !important; }
.search_filters select { background: var(--ax-panel) !important; color: var(--ax-text) !important; border: 1px solid #26262c !important; border-radius: 8px !important; }

/* the Save star next to the box (results, with a Key unlocked) */
.axi0-save {
  display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; box-sizing: border-box; height: 42px; margin-left: 10px;
  padding: 0 15px 0 12px; border-radius: 999px; border: 1px solid #26262c; background: var(--ax-panel); color: #e8e8ee;
  font-size: 14px; cursor: pointer; transition: border-color .15s, color .15s;
}
.axi0-save svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: fill .15s; }
.axi0-save:hover { border-color: rgba(246, 160, 77, .7); }
.axi0-save[aria-pressed="true"] { border-color: rgba(246, 160, 77, .55); color: #fff; }
.axi0-save[aria-pressed="true"] svg { fill: var(--ax-core); stroke: var(--ax-core); }
.axi0-save:focus-visible { outline: 2px solid var(--ax-core); outline-offset: 2px; }

/* ---- results ----------------------------------------------------------------------------------------- */
#results { margin-top: 18px; }
.result { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--ax-line) !important; border-radius: 0 !important; padding: 16px 0 !important; margin: 0 !important; box-shadow: none !important; }
.result:hover { background: transparent !important; }
.result .url_wrapper, .result .url_header { color: var(--ax-mute) !important; font-size: 13px !important; }
/* the path starts where it starts and is clipped at its end: a narrower line (the trusted mark) then moves nothing */
.result .url_wrapper .url_o2 { text-overflow: ellipsis; }
.result .url_wrapper .url_o2 .url_i2 { float: none; }
.result .url_i1 { color: var(--ax-mute) !important; }
.result h3 { margin: 4px 0 6px !important; }
.result h3 a { color: #fff !important; font-weight: 600 !important; font-size: 18px !important; letter-spacing: -.012em; line-height: 1.3; text-decoration: none; }
.result h3 a:hover { text-decoration: underline; text-decoration-color: var(--ax-core); text-underline-offset: 3px; }
.result .content { color: var(--ax-text) !important; font-size: 14.5px !important; line-height: 1.5; }
.result .engines, .result .engines span { color: var(--ax-mute) !important; font-size: 12px !important; }
.highlight { color: var(--ax-core) !important; background: none !important; font-weight: 600; }
.result h3 .highlight { color: #fff !important; }                 /* titles stay white; the orange is for snippets */
.result .cache_link, .result .proxyfied { color: var(--ax-mute) !important; font-size: 12px !important; text-decoration: none; }
.result .thumbnail, .result .thumbnail_bg { border-radius: 10px; }
/* our map is where map results open (search.js, once the map is live): no inline mini-map from a third-party tile server */
body.axi0-maps .searxng_init_map, body.axi0-maps .osm-map-box, body.axi0-maps [id^="result-map-"] { display: none !important; }
/* a source you trust (My search): a small orange mark at the end of the address line */
.axi0-trusted { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; color: var(--ax-core); font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
.axi0-trusted-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ax-core); box-shadow: 0 0 6px rgba(246, 160, 77, .7); }

/* answers, infoboxes, suggestions */
#answers, .answer { background: var(--ax-panel) !important; border: 1px solid var(--ax-line) !important; border-radius: var(--ax-radius) !important; }
#sidebar .infobox, .infobox { background: var(--ax-panel) !important; border: 1px solid var(--ax-line) !important; border-radius: var(--ax-radius) !important; box-shadow: none !important; }
#sidebar .infobox h2.title, #sidebar h4.title, #suggestions .title { color: #fff !important; }
#suggestions .suggestion, .suggestion { background: var(--ax-panel) !important; border: 1px solid #26262c !important; color: var(--ax-text) !important; border-radius: 999px !important; }
#suggestions .suggestion:hover { border-color: var(--ax-core) !important; }
#engines_msg, #search_url, #apis { color: var(--ax-mute) !important; }
#engines_msg-table .bar-chart-bar { background: #2a2a31 !important; }
#copy_url, .selectable_url, #search_url .selectable_url { background: var(--ax-panel) !important; border-color: var(--ax-line) !important; color: var(--ax-mute) !important; }
#pagination button, #pagination .button { background: var(--ax-panel) !important; border: 1px solid #26262c !important; color: #fff !important; border-radius: 999px !important; padding: 8px 18px !important; }
#pagination button:hover { border-color: var(--ax-core) !important; }
#pagination .numbered_pagination input { min-width: 32px; min-height: 32px; border-radius: 999px; }   /* 24px targets at least */
#backToTop { background: var(--ax-panel) !important; border: 1px solid #26262c !important; color: #fff !important; border-radius: 50% !important; }

/* top-right row: About and Preferences (the engine's), then the My search slot, then the launcher, on one centre line
   (y=50 on desktops, y=28 on phones). The slot's width is known before the first paint (the <head> script marks an
   unlocked browser), so nothing moves when search.js fills it. */
#links_on_top { right: calc(64px + var(--ax-me-w) + 14px) !important; }
#links_on_top a { color: var(--ax-mute) !important; }
#links_on_top a:hover { color: #fff !important; }
#axi0-me { position: fixed; top: 30px; right: 64px; z-index: 61; height: 40px; display: flex; align-items: center; }
.axi0-me-pill {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--ax-me-w); height: 30px;
  padding: 0 8px; border-radius: 999px; border: 1px solid rgba(246, 160, 77, .6); background: rgba(246, 160, 77, .08);
  color: #fff !important; font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; overflow: hidden;
  transition: background .15s, border-color .15s;
}
.axi0-me-pill:hover { background: rgba(246, 160, 77, .16); border-color: var(--ax-core); }
.axi0-me-btn {
  width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; border: 1px solid #34343c; background: #16161b; color: #fff;
  display: grid; place-items: center; padding: 0; cursor: pointer; font-size: 15px; font-weight: 600; line-height: 1;
  transition: border-color .15s, box-shadow .15s;
}
.axi0-me-btn:hover, .axi0-me-btn[aria-expanded="true"] { border-color: var(--ax-core); box-shadow: 0 0 0 3px rgba(246, 160, 77, .18); }
.axi0-me-btn svg { width: 18px; height: 18px; color: var(--ax-core); }
.axi0-me-pill:focus-visible, .axi0-me-btn:focus-visible { outline: 2px solid var(--ax-core); outline-offset: 2px; }
.axi0-me-pop {
  position: absolute; top: 46px; right: 0; width: 244px; padding: 8px; box-sizing: border-box; background: var(--ax-panel);
  border: 1px solid #232329; border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .72);
}
.axi0-me-pop[hidden] { display: none; }
.axi0-me-key { margin: 6px 10px 8px; color: var(--ax-mute); font-size: 12px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.axi0-me-menu a, .axi0-me-menu button {
  display: block; width: 100%; box-sizing: border-box; padding: 10px 10px; border: 0; border-radius: 10px; background: none;
  color: #ececf1 !important; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.axi0-me-menu a:hover, .axi0-me-menu button:hover, .axi0-me-menu a:focus, .axi0-me-menu button:focus { background: var(--ax-hover); outline: none; }
.axi0-me-menu a:focus-visible, .axi0-me-menu button:focus-visible { box-shadow: inset 0 0 0 2px var(--ax-core); }
.axi0-me-menu .axi0-me-lock { margin-top: 6px; color: var(--ax-core) !important; }
.axi0-me-menu .axi0-me-lock::before { content: ""; display: block; height: 1px; margin: -10px -10px 9px; background: var(--ax-line); }

/* footer (contrast: 5.7:1 text, links underlined) */
footer { color: var(--ax-faint) !important; font-size: 12px !important; background: transparent !important; border: 0 !important; }
footer a { color: #c4c4cc !important; text-decoration: underline !important; text-decoration-color: rgba(196, 196, 204, .45) !important; text-underline-offset: 2px; }
footer a:hover { text-decoration-color: currentColor !important; }

/* preferences / info pages */
#main_preferences, #main_info, .preferences_container, #main_preferences fieldset, #main_preferences .pref-group { background: #000 !important; color: var(--ax-text) !important; border-color: var(--ax-line) !important; }
#main_preferences legend, #main_preferences h2, #main_info h1, #main_info h2 { color: #fff !important; }
#main_preferences .button, #main_preferences button { background: var(--ax-panel) !important; border: 1px solid #26262c !important; color: #fff !important; }

/* ---- the launcher (nine dots, top right) -------------------------------------------------------------- */
#axi0-apps { position: fixed; top: 30px; right: 14px; z-index: 60; }   /* centre line y=50 = the About/Preferences row (theme: top 2.4rem, 21.6px tall) */
#axi0-apps-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: #b9b9c2;
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
#axi0-apps-btn:hover, #axi0-apps-btn[aria-expanded="true"] { background: var(--ax-hover); color: #fff; }
#axi0-apps-btn svg { width: 20px; height: 20px; fill: currentColor; }
#axi0-apps-panel {
  position: absolute; top: 48px; right: 0; width: 312px; padding: 12px;
  background: var(--ax-panel); border: 1px solid #232329; border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .75); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
#axi0-apps-panel[hidden] { display: none; }
#axi0-apps-panel a {
  display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 6px 12px; border-radius: 14px;
  text-decoration: none; color: #e8e8ee; font-size: 12.5px; letter-spacing: .01em;
}
#axi0-apps-panel a:hover { background: var(--ax-hover); }
#axi0-apps-panel a[aria-current="page"] { color: var(--ax-core); }
#axi0-apps-panel img { width: 42px; height: 42px; border-radius: 11px; display: block; }
#axi0-apps-panel { max-height: calc(100vh - 70px); overflow-y: auto; overscroll-behavior: contain; }
#axi0-apps-panel .axi0-apps-group { grid-column: 1 / -1; color: var(--ax-mute); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 8px 2px; }
#axi0-apps-panel .axi0-apps-group + .axi0-apps-group { margin-top: 6px; }
#axi0-apps-panel a.axi0-soon { position: relative; color: var(--ax-mute); }
#axi0-apps-panel a.axi0-soon img { opacity: .55; }
#axi0-apps-panel a.axi0-soon::after { content: "soon"; position: absolute; top: 9px; right: 10px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ax-core); border: 1px solid rgba(246, 160, 77, .45); border-radius: 999px; padding: 1px 5px; }
#axi0-apps-panel a.axi0-soon:hover img { opacity: .85; }
#axi0-apps-panel .axi0-apps-foot { grid-column: 1 / -1; text-align: center; color: var(--ax-mute); font-size: 11px; padding: 8px 4px 2px; border-top: 1px solid var(--ax-line); margin-top: 6px; }

/* results header between phones and wide screens: keep the box clear of the top-right row */
@media (min-width: 601px) and (max-width: 1280px) {
  .results_endpoint .search_box { max-width: min(44rem, calc(100vw - 480px)) !important; }
}

@media (max-width: 600px) {
  .index_endpoint #main_index { margin-top: 18vh !important; }
  #links_on_top { top: 17px !important; right: calc(56px + var(--ax-me-w) + 10px) !important; }   /* theme: 7px on phones; centre on y=28 */
  #axi0-apps { top: 8px; right: 10px; }
  #axi0-me { top: 8px; right: 56px; }
  #axi0-apps-panel { width: min(312px, calc(100vw - 28px)); }
  .axi0-me-pop { right: -46px; }
  .axi0-keycard { margin: 26px 14px 0; }
  .result h3 a { font-size: 16.5px !important; }
  /* results: the logo and the top-right row get their own 56px bar; the box takes the full width under it */
  .results_endpoint #search_header { padding-top: 56px !important; grid-template-columns: 1fr !important; grid-template-areas: "search" "categories" !important; }
  .results_endpoint #search_logo { position: absolute !important; top: 13px; left: 14px; margin: 0; }
  .results_endpoint #search_view { padding: 0 10px !important; display: flex; align-items: center; }
  .results_endpoint #search_view .search_box { flex: 1 1 auto; min-width: 0; }
  .results_endpoint .axi0-save { flex: none; width: 44px; height: 44px; margin-left: 8px; padding: 0; justify-content: center; }
  .results_endpoint .axi0-save-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  html.axi0-unlocked .results_endpoint #search_view::after { content: ""; flex: none; width: 52px; }   /* the star's place, before it exists */
  html.axi0-unlocked .results_endpoint #search_view:has(.axi0-save)::after { display: none; }
}