/* 00-fonts.css */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(fonts/space-grotesk-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* 10-tokens.css */
:root { color-scheme: light; }
:root.theme-dark, :root.theme-black { color-scheme: dark; }
:root.theme-auto { color-scheme: light dark; }

:root {
  --az-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --az-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --az-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --az-ground: light-dark(#f6f7fb, #07080d);
  --az-surface: light-dark(rgb(255 255 255 / .72), rgb(20 22 34 / .62));
  --az-surface-2: light-dark(rgb(255 255 255 / .9), rgb(30 33 48 / .78));
  --az-surface-solid: light-dark(#ffffff, #11131c);
  --az-tint: light-dark(rgb(124 58 237 / .08), rgb(139 92 246 / .16));
  --az-border: light-dark(rgb(15 23 42 / .09), rgb(255 255 255 / .08));
  --az-border-strong: light-dark(rgb(15 23 42 / .16), rgb(255 255 255 / .16));

  --az-text: light-dark(#12141c, #e7e9f3);
  --az-text-muted: light-dark(#4b5168, #a3a9c2);
  --az-link: light-dark(#5b21b6, #c4b5fd);
  --az-url: light-dark(#0e7490, #67e8f9);
  --az-visited: light-dark(#86198f, #f0abfc);
  --az-highlight: light-dark(#6d28d9, #ddd6fe);

  --az-accent-1: light-dark(#7c3aed, #8b5cf6);
  --az-accent-2: light-dark(#0891b2, #22d3ee);
  --az-accent-3: light-dark(#0d9488, #2dd4bf);
  /* Focus ring: light needs a deeper cyan for 3:1 against the violet glow and selected-pill shadow (WCAG 1.4.11). */
  --az-ring: light-dark(#155e75, #22d3ee);
  --az-on-accent: #ffffff;
  --az-btn: light-dark(#6d28d9, #7c3aed);
  --az-gradient: linear-gradient(120deg, var(--az-accent-1), var(--az-accent-2) 55%, var(--az-accent-3));
  /* Fill for controls with white text: every stop (violet #7c3aed/#6d28d9, cyan-700 #0e7490) keeps white at 4.5:1 or more. */
  --az-btn-2: #0e7490;
  --az-btn-gradient: linear-gradient(120deg, var(--az-btn), var(--az-btn-2));
  /* Tap sizes in px floors: upstream shrinks the root font on phones, so 2.5rem alone renders at 36px. */
  --az-tap-min: max(2.5rem, 40px);
  --az-tap: max(2.75rem, 44px);
  --az-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234b5168' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* The iz weave mark (from boot-sequence/example/iz-weave.svg), used as a mask so the gradient fills it. */
  --az-logo-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cpath id='i' d='M100 4 L110 24 C113 70 112 130 106 168 L100 198 L94 168 C88 130 87 70 90 24 Z'/%3E%3Cpath id='diag' d='M136 52 L174 56 C152 98 114 130 72 160 L30 166 C78 130 114 96 136 52 Z'/%3E%3Cmask id='under-i'%3E%3Crect width='200' height='200' fill='%23fff'/%3E%3Cuse href='%23i' fill='%23000' stroke='%23000' stroke-width='8'/%3E%3C/mask%3E%3Cmask id='under-diag'%3E%3Crect width='200' height='200' fill='%23fff'/%3E%3Cuse href='%23diag' fill='%23000' stroke='%23000' stroke-width='8'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23under-i)'%3E%3Cpath d='M14 22 C42 42 92 48 150 40 C166 38 178 30 190 14 C190 40 180 56 162 64 C122 74 76 72 44 62 L20 64 L32 52 Z'/%3E%3Cpath d='M10 186 C22 180 30 172 38 162 C76 156 124 154 162 158 L186 152 L174 166 L188 180 C150 172 100 172 56 178 C40 180 24 184 10 186 Z'/%3E%3C/g%3E%3Cuse href='%23i' mask='url(%23under-diag)'/%3E%3Cuse href='%23diag'/%3E%3C/svg%3E");

  --az-radius: 14px;
  --az-radius-sm: 10px;
  --az-pill: 999px;
  --az-shadow: 0 1px 2px light-dark(rgb(15 23 42 / .06), rgb(0 0 0 / .4)), 0 8px 24px light-dark(rgb(15 23 42 / .06), rgb(0 0 0 / .35));
  --az-shadow-lift: 0 2px 4px light-dark(rgb(15 23 42 / .08), rgb(0 0 0 / .5)), 0 18px 40px light-dark(rgb(76 29 149 / .14), rgb(0 0 0 / .5));
  --az-blur: 14px;
  --az-ease: cubic-bezier(.2, .7, .2, 1);
  --az-glow: .38;
  --color-base-font-rgb: 18, 20, 28;
}
:root.theme-dark, :root.theme-black { --az-glow: .6; --color-base-font-rgb: 231, 233, 243; --az-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3a9c2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root.theme-auto { --az-glow: .6; --color-base-font-rgb: 231, 233, 243; --az-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3a9c2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } }
:root.theme-black { --az-ground: #000; --az-surface: #0b0c12; --az-surface-2: #14161f; --az-surface-solid: #0b0c12; --az-glow: 0; --az-blur: 0px; } /* true OLED black: no glow */
@media (max-width: 600px) { :root:not(.theme-black) { --az-blur: 6px; } }

/* Upstream simple theme variables, remapped. Same specificity as upstream's :root.theme-x and later in the cascade, so these win. */
:root:is(.theme-light, .theme-dark, .theme-auto, .theme-black) {
  --color-answer-background: var(--az-surface);
  --color-answer-font: var(--az-text);
  --color-autocomplete-background: var(--az-surface-solid);
  --color-autocomplete-background-hover: var(--az-tint);
  --color-autocomplete-border: var(--az-border);
  --color-autocomplete-font: var(--az-text);
  --color-autocomplete-shadow: light-dark(rgb(15 23 42 / .12), rgb(0 0 0 / .5));
  --color-backtotop-background: var(--az-surface-solid);
  --color-backtotop-border: var(--az-border-strong);
  --color-backtotop-font: var(--az-text);
  --color-bar-chart-primary: var(--az-accent-1);
  --color-bar-chart-secondary: var(--az-accent-2);
  --color-base-background: var(--az-ground);
  --color-base-background-mobile: var(--az-ground);
  --color-base-font: var(--az-text);
  --color-btn-background: var(--az-btn);
  --color-btn-font: var(--az-on-accent);
  --color-categories-item-border-selected: var(--az-accent-2);
  --color-categories-item-selected: var(--az-tint);
  --color-categories-item-selected-font: var(--az-text);
  --color-doc-code: var(--az-text);
  --color-doc-code-background: var(--az-surface-2);
  --color-error: light-dark(#b91c1c, #fca5a5);
  --color-error-background: light-dark(#fef2f2, rgb(127 29 29 / .35));
  --color-favicon-background-color: light-dark(#ffffff, #1d2030);
  --color-favicon-border-color: var(--az-border);
  --color-footer-background: transparent;
  --color-footer-border: var(--az-border);
  --color-header-background: transparent;
  --color-header-border: transparent;
  --color-image-resolution-background: rgb(0 0 0 / .62);
  --color-image-resolution-font: #ffffff;
  --color-line-number: var(--az-text-muted);
  --color-loading-indicator: var(--az-accent-2);
  --color-loading-indicator-gap: var(--az-surface-2);
  --color-result-background: var(--az-surface);
  --color-result-border: var(--az-border);
  --color-result-description-highlight-font: var(--az-highlight);
  --color-result-detail-background: var(--az-surface-solid);
  --color-result-detail-font: var(--az-text);
  --color-result-detail-hr: var(--az-border);
  --color-result-detail-label-font: var(--az-text-muted);
  --color-result-detail-link: var(--az-link);
  --color-result-detail-loader-border: var(--az-border);
  --color-result-detail-loader-borderleft: var(--az-accent-2);
  --color-result-engines-font: var(--az-text-muted);
  --color-result-image-background: var(--az-surface-2);
  --color-result-image-span-font: var(--az-text-muted);
  --color-result-image-span-font-selected: var(--az-text);
  --color-result-keyvalue-col-table: var(--az-surface-2);
  --color-result-keyvalue-even: var(--az-surface);
  --color-result-keyvalue-odd: transparent;
  --color-result-keyvalue-table: var(--az-surface);
  --color-result-link-font: var(--az-link);
  --color-result-link-font-highlight: var(--az-link);
  --color-result-link-visited-font: var(--az-visited);
  --color-result-publishdate-font: var(--az-text-muted);
  --color-result-search-url-border: var(--az-border);
  --color-result-search-url-font: var(--az-url);
  --color-result-url-font: var(--az-url);
  --color-result-vim-arrow: var(--az-accent-2);
  --color-result-vim-selected: var(--az-tint);
  --color-search-background: var(--az-surface-2);
  --color-search-background-hover: var(--az-surface-solid);
  --color-search-border: var(--az-border-strong);
  --color-search-font: var(--az-text);
  --color-search-shadow: light-dark(rgb(15 23 42 / .08), rgb(0 0 0 / .45));
  --color-settings-engine-description-font: var(--az-text-muted);
  --color-settings-return-font: var(--az-text-muted);
  --color-settings-table-group-background: var(--az-surface-2);
  --color-settings-tr-hover: var(--az-tint);
  --color-show-btn-background: var(--az-surface-2);
  --color-show-btn-font: var(--az-text);
  --color-sidebar-background: var(--az-surface);
  --color-sidebar-border: var(--az-border);
  --color-sidebar-font: var(--az-text);
  --color-success: light-dark(#047857, #6ee7b7);
  --color-success-background: light-dark(#ecfdf5, rgb(6 78 59 / .4));
  --color-toolkit-badge-background: var(--az-surface-2);
  --color-toolkit-badge-font: var(--az-text-muted);
  --color-toolkit-checkbox-input-border: var(--az-border-strong);
  --color-toolkit-checkbox-label-background: var(--az-surface-2);
  --color-toolkit-checkbox-label-border: var(--az-border);
  --color-toolkit-checkbox-onoff-off-background: var(--az-surface-2);
  --color-toolkit-checkbox-onoff-off-mark-background: light-dark(#767c92, #8a91aa); /* off knob >= 3:1 against the panel (WCAG 1.4.11) */
  --color-toolkit-checkbox-onoff-off-mark-color: light-dark(#ffffff, #11131c);
  --color-toolkit-checkbox-onoff-on-background: var(--az-btn);
  --color-toolkit-checkbox-onoff-on-mark-background: #ffffff;
  --color-toolkit-checkbox-onoff-on-mark-color: var(--az-btn);
  --color-toolkit-dialog-background: var(--az-surface-solid);
  --color-toolkit-dialog-border: var(--az-border);
  --color-toolkit-engine-tooltip-background: var(--az-surface-solid);
  --color-toolkit-engine-tooltip-border: var(--az-border-strong);
  --color-toolkit-input-text-font: var(--az-text);
  --color-toolkit-kbd-background: var(--az-surface-2);
  --color-toolkit-kbd-font: var(--az-text);
  --color-toolkit-loader-border: var(--az-border);
  --color-toolkit-loader-borderleft: var(--az-accent-2);
  --color-toolkit-select-background: var(--az-surface-2);
  --color-toolkit-select-background-hover: var(--az-surface-solid);
  --color-toolkit-select-border: var(--az-border-strong);
  --color-toolkit-tabs-label-border: var(--az-border);
  --color-toolkit-tabs-section-border: var(--az-border);
  --color-url-font: var(--az-link);
  --color-url-visited-font: var(--az-visited);
  --color-warning: light-dark(#a16207, #fcd34d);
  --color-warning-background: light-dark(#fefce8, rgb(113 63 18 / .4));
}

/* 20-base.css */
html { background: var(--az-ground); }
body {
  position: relative; isolation: isolate; min-height: 100vh;
  background: transparent; color: var(--az-text);
  font-family: var(--az-font-body); font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* The aurora: three soft radial glows on one fixed layer, drifting via transform only. */
body::before {
  content: ""; position: fixed; inset: -25vmax; z-index: -1; pointer-events: none;
  opacity: var(--az-glow);
  background:
    radial-gradient(38vmax 30vmax at 22% 18%, color-mix(in srgb, var(--az-accent-1) 70%, transparent), transparent 70%),
    radial-gradient(34vmax 28vmax at 78% 26%, color-mix(in srgb, var(--az-accent-2) 55%, transparent), transparent 70%),
    radial-gradient(40vmax 32vmax at 60% 85%, color-mix(in srgb, var(--az-accent-3) 45%, transparent), transparent 70%);
  animation: az-drift 48s var(--az-ease) infinite alternate;
  will-change: transform;
}
@keyframes az-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(4vmax, -3vmax, 0) rotate(8deg); }
  100% { transform: translate3d(-3vmax, 2vmax, 0) rotate(-6deg); }
}
::selection { background: color-mix(in srgb, var(--az-accent-1) 35%, transparent); }
a { color: var(--az-link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { font-family: var(--az-font-display); letter-spacing: -.01em; }
code, kbd, pre, samp, tt { font-family: var(--az-font-mono); }
:focus-visible { outline: 2px solid var(--az-ring); outline-offset: 2px; border-radius: 6px; }
footer { color: var(--az-text-muted); font-size: .8rem; border: 0; background: transparent; }
footer a { color: var(--az-text-muted); }
footer a:hover { color: var(--az-text); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:is(.theme-light, .theme-dark, .theme-auto, .theme-black) { --az-surface: var(--az-surface-solid); --az-surface-2: var(--az-surface-solid); }
}

/* 30-header.css */
/* Front page */
.index_endpoint #main_index { min-height: 100vh; display: flex; flex-direction: column; }
/* Top-weighted, not centred: centred put #q at 480px on a 860px phone and the suggestion list under the fold and keyboard. */
.index { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: clamp(3.5rem, 15vh, 9rem) 1rem 4rem; }
.index .title { background: none; min-height: 0; margin: 0 0 2.25rem; }
/* .title in the selector: upstream's div.title h1 { font-size: 1em } below 79.75em otherwise outranks it. */
.index .title h1 {
  visibility: visible; margin: 0;
  /* The name stays in the accessibility tree at font-size 0; the weave mark is drawn in its place. */
  width: clamp(6rem, 22vw, 11rem); aspect-ratio: 1; font-size: 0; color: transparent;
  background: var(--az-gradient); background-size: 200% 100%;
  -webkit-mask: var(--az-logo-mark) center / contain no-repeat; mask: var(--az-logo-mark) center / contain no-repeat;
  animation: az-sheen 14s ease-in-out infinite alternate;
}
@keyframes az-sheen { to { background-position: 100% 0; } }
.index #search { width: min(44rem, 100%); }

/* Search pill (front page and results) */
.search_box {
  display: flex; align-items: center; gap: .25rem;
  border-radius: var(--az-pill); border: 1px solid var(--az-border-strong);
  background: var(--az-surface-2); box-shadow: var(--az-shadow);
  -webkit-backdrop-filter: blur(var(--az-blur)) saturate(140%); backdrop-filter: blur(var(--az-blur)) saturate(140%);
  transition: box-shadow .25s var(--az-ease), border-color .25s var(--az-ease);
}
/* backdrop-filter makes the pill a stacking context that traps the autocomplete's z-index, and the masked tab row
   later in the DOM painted over the list; lifting the pill keeps every suggestion on top. */
.search_box { position: relative; z-index: 3; }
.search_box:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--az-ring), 0 0 32px -6px color-mix(in srgb, var(--az-accent-1) 65%, transparent), var(--az-shadow);
}
#q {
  flex: 1; min-width: 0; height: 3.25rem; padding-inline: 1.35rem .5rem;
  background: transparent; border: 0; box-shadow: none; color: var(--az-text);
  font: 400 1.05rem/1.4 var(--az-font-body);
}
#q::placeholder { color: var(--az-text-muted); }
#q:focus-visible { outline: none; }
#clear_search { display: grid; place-items: center; width: var(--az-tap); height: var(--az-tap); padding: 0; background: transparent; color: var(--az-text-muted); border-radius: var(--az-pill); }
#clear_search:hover { color: var(--az-text); }
#send_search {
  display: grid; place-items: center; width: var(--az-tap); height: var(--az-tap); padding: 0; margin-inline-end: .3rem;
  border-radius: var(--az-pill); background-color: var(--az-btn); background-image: var(--az-btn-gradient); color: var(--az-on-accent);
  transition: transform .2s var(--az-ease), filter .2s;
}
#send_search:hover { background-color: var(--az-btn); background-image: var(--az-btn-gradient); color: var(--az-on-accent); filter: brightness(1.08); transform: scale(1.04); }
/* Without JS upstream swaps the icon for a "search" label and forces width: auto !important; pad it so the label sits inside the pill. */
.no-js #send_search { padding-inline: .95rem; font: 600 .85rem/1 var(--az-font-body); }
#send_search svg { width: 1.15rem; height: 1.15rem; }
/* Upstream's #q, #send_search and #clear_search { outline: none } are ID rules that outrank the global :focus-visible ring. */
#send_search:focus-visible, #clear_search:focus-visible { outline: 2px solid var(--az-text); outline-offset: 2px; }
/* .open only: the closed box is max-height 0 but still display:block, so a border would draw a line across the pill. */
.autocomplete.open { border-radius: var(--az-radius); border: 1px solid var(--az-border); box-shadow: var(--az-shadow-lift); }
/* Upstream leaves top unset; inside Aurora's align-items:center flex pill the static position centred the list over the
   text being typed. Pin it under the pill. */
.search_box > .autocomplete { top: calc(100% + .35rem); margin-top: 0; inset-inline: 0; width: auto; max-width: none; }
/* Suggestion list stacking: the filter selects are flex items with upstream z-index 100 (which applies to flex items even
   unpositioned), and on phones the glass #search form is an unpositioned stacking context that later glass sidebar
   panels paint over. Lift the pill above the selects and the form above the page while focused. */
.search_box:focus-within { z-index: 200; }
.results_endpoint #search:focus-within { position: relative; z-index: 60; }
@media screen and (min-width: 50em) { .results_endpoint #search:focus-within { position: sticky; } }
.autocomplete > ul > li:hover, .autocomplete > ul > li.active { background: var(--az-tint); }

/* Results header: a glass bar, sticky on wide screens only (see Global Constraints) */
.results_endpoint #search {
  background: color-mix(in srgb, var(--az-ground) 55%, transparent);
  -webkit-backdrop-filter: blur(var(--az-blur)) saturate(150%); backdrop-filter: blur(var(--az-blur)) saturate(150%);
  border-block-end: 1px solid var(--az-border);
  transition: box-shadow .25s var(--az-ease);
}
@media screen and (min-width: 50em) {
  .results_endpoint #search { position: sticky; top: 0; z-index: 50; }
  html.az-scrolled .results_endpoint #search { box-shadow: 0 10px 30px -12px light-dark(rgb(15 23 42 / .18), rgb(0 0 0 / .7)); }
}
#search_header { background: transparent; border: 0; padding-block: 1rem .25rem; }
#search_logo { text-decoration: none; }
#search_logo svg { display: none; }
#search_logo::before {
  content: ""; display: block; width: 2.6rem; height: 2.6rem;
  background: var(--az-gradient);
  -webkit-mask: var(--az-logo-mark) center / contain no-repeat; mask: var(--az-logo-mark) center / contain no-repeat;
}

/* Category tabs: horizontally scrollable pill row */
/* scroll-padding keeps a keyboard-focused pill clear of the 2rem edge fades (it was parked under the mask). */
#categories { position: relative; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; scroll-padding-inline: 2.75rem; padding-inline: 5px; box-sizing: border-box; }
#categories::-webkit-scrollbar { display: none; }
#categories.az-fade-start { -webkit-mask-image: linear-gradient(to var(--az-fade-dir, right), transparent, #000 2rem); mask-image: linear-gradient(to var(--az-fade-dir, right), transparent, #000 2rem); }
#categories.az-fade-end { -webkit-mask-image: linear-gradient(to var(--az-fade-dir-rev, left), transparent, #000 2rem); mask-image: linear-gradient(to var(--az-fade-dir-rev, left), transparent, #000 2rem); }
#categories.az-fade-start.az-fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); }
[dir="rtl"] #categories { --az-fade-dir: left; --az-fade-dir-rev: right; }
/* The scroll box clips everything outside its padding, so the room below and (desktop) beside the pills is sized in px
   to the selected pill's glow (which is px too: rem room shrank with small text and cut it). The glow is gone about
   15px below and 10px beside the pill. The -5px margin stays clear of the selects below, so none loses clicks. */
#search #categories { margin-bottom: -5px; }
#categories_container { display: flex; flex-wrap: nowrap; gap: .4rem; width: max-content; padding-block: .35rem .6rem; }
#search #categories_container { padding-bottom: 18px; }
@media screen and (min-width: 50em) { #search #categories { padding-inline: 14px; margin-inline-start: -9px; } }
/* Phones: the same .75rem gutter as the cards, so the first pill does not start at the screen edge. */
@media screen and (max-width: 50em) { #search #categories_container { padding-inline: .75rem; } }
button.category_button {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; margin: 0; min-width: var(--az-tap); min-height: var(--az-tap-min);
  padding: .45rem .9rem; border: 1px solid var(--az-border); border-radius: var(--az-pill);
  background: var(--az-surface); color: var(--az-text-muted);
  font: 500 .875rem/1 var(--az-font-body); text-transform: capitalize; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--az-ease);
}
button.category_button svg { width: 1rem; height: 1rem; padding: 0; }
button.category_button:hover { color: var(--az-text); border-color: var(--az-border-strong); }
button.category_button.selected, button.category_button:active {
  color: var(--az-on-accent); border: 1px solid transparent;
  background-color: var(--az-btn); background-image: var(--az-btn-gradient);
  box-shadow: 0 4px 12px -6px var(--az-accent-1);
}
#categories_container:not(:hover, :focus-within) button.category_button.selected { color: var(--az-on-accent); }

/* Filters row and links on top */
/* Inline padding leaves room for the focus ring: upstream gives .search_filters overflow:auto, which clipped it. */
.search_filters { display: flex; flex-wrap: wrap; gap: .4rem; padding-block: 5px .75rem; padding-inline: 5px; }
/* :root: upstream's html.theme-dark select and html.theme-auto select (dark scheme) set their own arrow at (0,1,2),
   which outranked a bare .search_filters select and left the triangle on every dark results page. */
:root .search_filters select {
  /* !important: upstream's global select { padding: .2rem !important } would put the label under the chevron. */
  appearance: none; height: auto; min-height: var(--az-tap-min); padding-block: .35rem !important; padding-inline: .9rem 2rem !important; border-radius: var(--az-pill);
  border: 1px solid var(--az-border); color: var(--az-text);
  background: var(--az-chevron) no-repeat right .85rem center / .7rem auto, var(--az-surface);
  font: 500 .8rem/1.2 var(--az-font-body); max-width: 100%;
}
[dir="rtl"] .search_filters select { background-position: left .85rem center, 0 0; }
.search_filters select:hover { border-color: var(--az-border-strong); }
/* The glass #search is a stacking context later in the DOM; without this it covers the phone preferences gear. */
#links_on_top { z-index: 51; }
/* Upstream keeps a 2.8rem gap for the gear with physical padding-right, which sxng-rtl does not mirror; logical here so RTL gets it too. */
/* In RTL the gear sits ~14px further in than its LTR mirror, hence the wider gap. */
@media screen and (max-width: 79.75em) {
  body.results_endpoint #search_view { padding-inline: 0 calc(var(--az-tap) + .25rem); }
  [dir="rtl"] body.results_endpoint #search_view { padding-inline-end: calc(var(--az-tap) + 1.25rem); }
}
/* Phones: with #q focused, upstream turns #search_view into a width: 100% overlay. The gear gap above then added sideways
   scroll, and the raised gear sat on the send button (a tap opened Preferences and lost the query); the overlay hides it. */
@media screen and (max-width: 50em) {
  body.results_endpoint #search_view:focus-within, [dir="rtl"] body.results_endpoint #search_view:focus-within { box-sizing: border-box; padding: .5rem; }
  /* Upstream's phone overlay is flush to the screen edges, so the outer focus ring has nowhere to show; draw it inset. */
  /* Drawn on ::after so the flush send button cannot paint over the ring's end side. */
  body #search_view:focus-within .search_box { box-sizing: border-box; }
  body #search_view:focus-within .search_box::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--az-ring); pointer-events: none; z-index: 2; }
  /* Drop the gear under the opaque overlay instead of hiding it: visibility:hidden took it out of the Tab order, and
     Tab from #q is the keyboard route to Preferences. Once focus moves to it the overlay closes and it shows again. */
  body:has(#search_view:focus-within) #links_on_top { z-index: auto; }
  /* Upstream fills the overlay with --color-search-background, which Aurora made translucent: the tabs and filters showed
     through it and looked tappable while every tap landed on the overlay. */
  body.results_endpoint #search_view:focus-within { background-color: var(--az-surface-solid); }
  /* The front page has no logo or gear to cover, and inside the centred .index column the 100%-wide overlay kept its
     14px offset and pushed the send button off-screen; keep the pill where it is. */
  .index_endpoint #search_view:focus-within { position: static; width: auto; background: transparent; }
}
/* The gear is the only route to Preferences on phone results pages: a full tap target, not upstream's 24x22 icon. */
#links_on_top a { justify-content: center; box-sizing: border-box; min-width: var(--az-tap); min-height: var(--az-tap); color: var(--az-text-muted); }
#links_on_top a:hover { color: var(--az-text); }
#links_on_top svg { color: inherit; }
/* Phones, focused: upstream's overlay rules square the pill and the send button and drop the glow; keep Aurora's shape. */
@media screen and (max-width: 50em) {
  body #search_view:focus-within .search_box { border-radius: var(--az-pill); box-shadow: 0 0 28px -8px color-mix(in srgb, var(--az-accent-1) 60%, transparent); }
  body #search_view:focus-within #send_search { border-radius: var(--az-pill); }
  body #search_view:focus-within .search_box > .autocomplete { border-radius: var(--az-radius); }
}
/* Black promises opaque panels, and its blur is 0: the translucent header showed scrolled results through it. */
:root.theme-black .results_endpoint #search { background: #000; }
/* Desktop: keep keyboard focus out from under the sticky header (aurora.js sets the exact height; this is the fallback). */
@media screen and (min-width: 50em) { html:has(body.results_endpoint) { scroll-padding-top: var(--az-header-h, calc(15rem + 12px)); } }
/* The IT tab is an acronym; capitalize made it "It". */
button.category_button[name="category_it"] .category_name, #main_preferences label[for="checkbox_it"] .category_name { text-transform: uppercase; }

/* 40-results.css */
#urls { display: flex; flex-direction: column; gap: .85rem; }
/* Mixed-template pages (science, files, IT, music) wrap runs of results in div.template_group_<name>. */
#urls > [class^="template_group_"]:not(.template_group_images) { display: flex; flex-direction: column; gap: .85rem; }
/* Phones: one gutter for cards, sidebar and answers. Upstream sizes .result at width: 96% with a 2% margin, which the
   card's margin: 0 turned into a flush-left card. */
@media screen and (max-width: 50em) {
  #results:not(.only_template_images) #urls { box-sizing: border-box; padding-inline: .75rem; }
  #urls article.result:not(.result-images) { width: auto; }
}
/* margin !important: upstream's .category-videos/news/map/music/social { margin: 0 .5rem 1rem !important } shifted those
   tabs' cards 7px right of General's, so the column jumped between tabs. The flex gap spaces the cards. */
#urls article.result:not(.result-images) {
  position: relative; margin: 0 !important; padding: 1rem 1.15rem 1.05rem;
  border: 1px solid var(--az-border); border-radius: var(--az-radius);
  background: var(--az-surface); box-shadow: var(--az-shadow);
  -webkit-backdrop-filter: blur(var(--az-blur)) saturate(140%); backdrop-filter: blur(var(--az-blur)) saturate(140%);
  overflow-wrap: anywhere; min-width: 0;
  transition: transform .25s var(--az-ease), box-shadow .25s var(--az-ease), border-color .25s;
}
/* Lit edge: a gradient hairline that fades in on hover/focus. */
#urls article.result:not(.result-images)::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--az-gradient); opacity: 0; transition: opacity .25s var(--az-ease);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
#urls article.result:not(.result-images):is(:hover, :focus-within)::after { opacity: 1; }
#urls article.result:not(.result-images):is(:hover, :focus-within) { box-shadow: var(--az-shadow-lift); border-color: transparent; }

.result .url_header { display: flex; align-items: center; gap: .55rem; min-width: 0; text-decoration: none; }
.result .favicon { flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 7px; background: var(--color-favicon-background-color); border: 1px solid var(--az-border); }
.result .favicon img { width: 1rem; height: 1rem; }
.result .url_wrapper { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 .78rem/1.3 var(--az-font-mono); color: var(--az-url); }
.result .url_o1, .result .url_o2 { white-space: nowrap; }
.result .url_i2 { color: var(--az-text-muted); }
/* Upstream floats the path end-aligned inside an overflow-hidden box, so a long path lost its start mid-word; an end ellipsis instead. */
.result .url_wrapper .url_o2 { min-width: 0; text-align: start; text-overflow: ellipsis; }
.result .url_wrapper .url_o2 .url_i2 { float: none; }
.result h3 { margin: .45rem 0 .3rem; font: 600 1.14rem/1.3 var(--az-font-display); letter-spacing: -.01em; }
.result h3 a { color: var(--az-text); text-decoration: none; }
.result h3 a:visited { color: var(--az-visited); }
.result h3 a:hover { color: var(--az-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--az-accent-2) 60%, transparent); }
/* Upstream's .result h3 a:focus { outline: none } outranks the global :focus-visible ring. */
#urls .result h3 a:focus-visible { outline: 2px solid var(--az-ring); outline-offset: 2px; }
.result .content { margin: 0; color: var(--az-text-muted); font-size: .94rem; line-height: 1.55; }
.result .highlight { color: var(--az-highlight); font-weight: 600; }
.result .engines { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-block-start: .65rem; float: none; }
.result .engines span, .result .engines a.cache_link, .result .engines a.proxyfied_link {
  display: inline-flex; align-items: center; min-height: 1.75rem; box-sizing: border-box; padding: .15rem .6rem; border-radius: var(--az-pill); border: 1px solid var(--az-border);
  font: 400 .7rem/1.4 var(--az-font-mono); color: var(--az-text-muted); background: transparent; text-decoration: none;
}
/* The link chips stay 25px to match the engine chips beside them; an invisible ::before makes each a 40px-tall tap target. */
.result .engines :is(a.cache_link, a.proxyfied_link) { position: relative; }
.result .engines :is(a.cache_link, a.proxyfied_link)::before { content: ""; position: absolute; top: -8px; bottom: -8px; left: -2px; right: -2px; }
.result .engines a:hover { color: var(--az-text); border-color: var(--az-border-strong); }
.result .break { display: none; }

/* Thumbnails (news, files, packages, music). The aspect ratio reserves the box, so a lazy or failed image keeps its
   place instead of collapsing to a hairline under the duration chip. */
.result .thumbnail_link { position: relative; float: inline-end; margin-inline-start: 1rem; margin-block: .25rem; }
.result img.thumbnail { display: block; width: 7.5rem; height: auto; aspect-ratio: 4 / 3; max-height: none; object-fit: cover; border-radius: var(--az-radius-sm); border: 1px solid var(--az-border); background: var(--az-surface-2); }
@media screen and (max-width: 50em) { .result img.thumbnail { width: 5.5rem; } }
/* Music: the spec's 16:9 media frame. Cover art is square (100px sources), so it is contained, not cropped, on the tint. */
.category-music img.thumbnail { width: 9rem; aspect-ratio: 16 / 9; object-fit: contain; }
@media screen and (max-width: 50em) { .category-music img.thumbnail { width: 7rem; } }

/* News date line, file dates */
.category-news > div.highlight, .result time.published_date {
  display: inline-block; margin-block-end: .35rem; padding: .1rem .55rem; border-radius: var(--az-pill);
  background: var(--az-tint); color: var(--az-text); font: 500 .72rem/1.5 var(--az-font-mono);
}

/* Key/value metadata (science, files, packages) */
.result .attributes { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem .9rem; margin: .5rem 0; font: 400 .78rem/1.45 var(--az-font-mono); }
.result .attributes > div { display: contents; }
.result .attributes > div > span:first-child { color: var(--az-text-muted); }
/* break-all makes every character a wrap point so balance can even out the lines: overflow-wrap: anywhere alone left a
   one-letter last line on long filenames ("origina" / "l"). Short values never reach the edge, so they do not break. */
.result .attributes > div > span:last-child { color: var(--az-text); word-break: break-all; text-wrap: balance; min-width: 0; }
.result .attributes code { padding: .05rem .4rem; border-radius: 6px; background: var(--az-tint); }
.result-packages .attributes .result_package_name code { font-weight: 600; }
/* IT: package metadata and code results as tinted mono blocks. */
.result-packages .attributes, .result .codelines .code-highlight pre {
  padding: .7rem .9rem; border-radius: var(--az-radius-sm); border: 1px solid var(--az-border); background: var(--az-tint);
}
.result .codelines { margin: .6rem 0 .2rem; padding: 0; }
.result .codelines .code-highlight pre { margin: 0; overflow: auto; font: 400 .78rem/1.6 var(--az-font-mono); color: var(--az-text); tab-size: 4; }
.result .codelines .linenos { color: var(--az-text-muted); padding-inline-end: 1rem; }
/* Files: torrent stats. Upstream puts value and label in one badge ("12 Seeder"), so each row is icon | badge. */
.result-torrent p.stat { display: grid; grid-template-columns: 1rem minmax(0, 1fr); align-items: center; gap: .25rem .7rem; margin: .15rem 0; font: 400 .78rem/1.45 var(--az-font-mono); }
.result-torrent p.stat:first-of-type { margin-block-start: .55rem; }
.result-torrent p.stat svg { width: 1rem; height: 1rem; color: var(--az-text-muted); }
.result-torrent p.stat .badge { padding: 0; border-radius: 0; background: transparent; color: var(--az-text); font: inherit; text-align: start; white-space: normal; }
.result p.altlink a { color: var(--az-link); }
.result .magnetlink svg { width: 1.1rem; height: 1.1rem; }

/* Map results: card chrome only, Leaflet keeps its own layout */
.result-map table { border-collapse: collapse; font-size: .85rem; margin: .4rem 0; }
.result-map th { color: var(--az-text-muted); font-weight: 500; text-align: start; padding-inline-end: .8rem; vertical-align: top; }
/* Phones: upstream's 17rem label column left the map table's values ~46px at 360, and IT package metadata beside the
   floated thumbnail got 8-37px; values wrapped a few characters per line. Labels take their own width, and the
   key/value grid drops below the float and stacks each label over its value, so values get the card's full width. */
@media screen and (max-width: 50em) {
  .result-map table th { width: auto; }
  .result-map table, .result .attributes { clear: both; }
  .result .attributes { grid-template-columns: minmax(0, 1fr); row-gap: .1rem; }
  .result .attributes > div:not(:first-child) > :first-child { margin-block-start: .45rem; }
  /* At full width break-all only split names mid-word ("Péter A" / "ntal"); long tokens still break where they must. */
  .result .attributes > div > span:last-child { word-break: normal; overflow-wrap: anywhere; }
}
.result-map .leaflet-container { border-radius: var(--az-radius-sm); }
.result .btn-collapse { color: var(--az-link); font-size: .82rem; cursor: pointer; }

/* Pagination. #results in the selectors: upstream's #results button[type=submit] { border-radius: 10px } outranks #pagination button. */
#pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-block: 1.5rem 3rem; }
#results #pagination :is(button, input[type="button"], input[type="submit"]) {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  min-width: var(--az-tap); height: var(--az-tap); padding: 0 1.1rem; border-radius: var(--az-pill); cursor: pointer;
  border: 1px solid var(--az-border); background: var(--az-surface); color: var(--az-text);
  font: 500 .875rem/1 var(--az-font-body);
}
#results #pagination :is(button, input):hover { border-color: var(--az-border-strong); background: var(--az-surface-2); }
#results #pagination input.page_number { text-decoration: none; }
#results #pagination :is(button, input).page_number_current { background: var(--az-btn-gradient); color: var(--az-on-accent); border-color: transparent; font-weight: 600; }
/* Infinite scroll swaps #pagination's content for div.loader (upstream: a spinning bordered circle): a pill with a sweeping light. */
#pagination .loader {
  box-sizing: border-box; width: 7.5rem; height: var(--az-tap); margin: 0 auto; overflow: hidden; text-indent: 0; font-size: inherit;
  border: 1px solid var(--az-border); border-radius: var(--az-pill); background: var(--az-surface); box-shadow: var(--az-shadow);
  animation: none; transform: none;
}
#pagination .loader::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 55%; height: auto; border: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--az-accent-2) 85%, transparent), color-mix(in srgb, var(--az-accent-1) 85%, transparent), transparent);
  animation: az-load 1.2s linear infinite;
}
@keyframes az-load { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(240%, 0, 0); } }
#backToTop { border-radius: var(--az-pill); box-shadow: var(--az-shadow); }
/* Download / PDF / HTML render as buttons (upstream's 5px badge): pills with a full tap target. */
#urls .result p.altlink a { display: inline-flex; align-items: center; box-sizing: border-box; min-height: var(--az-tap-min); padding: .3rem .95rem; border-radius: var(--az-pill); border: 1px solid var(--az-border); background: var(--az-surface-2); text-decoration: none; }
#urls .result .media-loader, #urls .result .btn-collapse { border-radius: var(--az-pill); }
/* Upstream's a.thumbnail_link float:left outranked the plan's inline-end float and sat 13px in from the text edge. */
#urls .result:not(.result-videos) a.thumbnail_link { float: inline-end; margin-block: .25rem .5rem; margin-inline: 1rem 0; }
/* The video channel line is upstream div.highlight; give it the same chip as result_author. */
.result-videos > div.highlight { display: inline-block; margin: .1rem .35rem .3rem 0; padding: .1rem .55rem; border-radius: var(--az-pill); background: var(--az-tint); color: var(--az-text); font: 500 .72rem/1.5 var(--az-font-mono); }
/* Back-to-top is invisible at the top of the page yet stays in the Tab order; show it while focused. */
#backToTop:focus-within { opacity: 1; pointer-events: auto; }

/* 45-code.css */
/* Generated from fixtures/static/sxng-ltr.min.css by copying each :root.theme-dark .code-highlight rule to theme-black:
   upstream ships no black syntax palette, so black got light colours on near-black (contrast 1.95-3.45). */
:root.theme-black .code-highlight pre { line-height:125% }
:root.theme-black .code-highlight td.linenos .normal,
:root.theme-black .code-highlight span.linenos { color:inherit;background-color:#0000;padding-left:5px;padding-right:5px }
:root.theme-black .code-highlight td.linenos .special,
:root.theme-black .code-highlight span.linenos.special { color:#000;background-color:#ffffc0;padding-left:5px;padding-right:5px }
:root.theme-black .code-highlight .hll { background-color:#49483e }
:root.theme-black .code-highlight .c { color:#959077 }
:root.theme-black .code-highlight .err { color:#ed007e;background-color:#1e0010 }
:root.theme-black .code-highlight .esc,
:root.theme-black .code-highlight .g { color:#f8f8f2 }
:root.theme-black .code-highlight .k { color:#66d9ef }
:root.theme-black .code-highlight .l { color:#ae81ff }
:root.theme-black .code-highlight .n { color:#f8f8f2 }
:root.theme-black .code-highlight .o { color:#ff4689 }
:root.theme-black .code-highlight .x,
:root.theme-black .code-highlight .p { color:#f8f8f2 }
:root.theme-black .code-highlight .ch,
:root.theme-black .code-highlight .cm,
:root.theme-black .code-highlight .cp,
:root.theme-black .code-highlight .cpf,
:root.theme-black .code-highlight .c1,
:root.theme-black .code-highlight .cs { color:#959077 }
:root.theme-black .code-highlight .gd { color:#ff4689 }
:root.theme-black .code-highlight .ge { color:#f8f8f2;font-style:italic }
:root.theme-black .code-highlight .ges { color:#f8f8f2;font-style:italic;font-weight:700 }
:root.theme-black .code-highlight .gr { color:#ff4689 }
:root.theme-black .code-highlight .gh { color:#f8f8f2 }
:root.theme-black .code-highlight .gi { color:#a6e22e }
:root.theme-black .code-highlight .go { color:#66d9ef }
:root.theme-black .code-highlight .gp { color:#ff4689;font-weight:700 }
:root.theme-black .code-highlight .gs { color:#f8f8f2;font-weight:700 }
:root.theme-black .code-highlight .gu { color:#959077 }
:root.theme-black .code-highlight .gt,
:root.theme-black .code-highlight .kc,
:root.theme-black .code-highlight .kd { color:#66d9ef }
:root.theme-black .code-highlight .kn { color:#ff4689 }
:root.theme-black .code-highlight .kp,
:root.theme-black .code-highlight .kr,
:root.theme-black .code-highlight .kt { color:#66d9ef }
:root.theme-black .code-highlight .ld { color:#e6db74 }
:root.theme-black .code-highlight .m { color:#ae81ff }
:root.theme-black .code-highlight .s { color:#e6db74 }
:root.theme-black .code-highlight .na,
:root.theme-black .code-highlight .nb,
:root.theme-black .code-highlight .nc { color:#a6e22e }
:root.theme-black .code-highlight .no { color:#66d9ef }
:root.theme-black .code-highlight .nd { color:#a6e22e }
:root.theme-black .code-highlight .ni { color:#f8f8f2 }
:root.theme-black .code-highlight .ne,
:root.theme-black .code-highlight .nf { color:#a6e22e }
:root.theme-black .code-highlight .nl,
:root.theme-black .code-highlight .nn { color:#f8f8f2 }
:root.theme-black .code-highlight .nx { color:#a6e22e }
:root.theme-black .code-highlight .py { color:#f8f8f2 }
:root.theme-black .code-highlight .nt { color:#ff4689 }
:root.theme-black .code-highlight .nv { color:#f8f8f2 }
:root.theme-black .code-highlight .ow { color:#ff4689 }
:root.theme-black .code-highlight .pm,
:root.theme-black .code-highlight .w { color:#f8f8f2 }
:root.theme-black .code-highlight .mb,
:root.theme-black .code-highlight .mf,
:root.theme-black .code-highlight .mh,
:root.theme-black .code-highlight .mi,
:root.theme-black .code-highlight .mo { color:#ae81ff }
:root.theme-black .code-highlight .sa,
:root.theme-black .code-highlight .sb,
:root.theme-black .code-highlight .sc,
:root.theme-black .code-highlight .dl,
:root.theme-black .code-highlight .sd,
:root.theme-black .code-highlight .s2 { color:#e6db74 }
:root.theme-black .code-highlight .se { color:#ae81ff }
:root.theme-black .code-highlight .sh,
:root.theme-black .code-highlight .si,
:root.theme-black .code-highlight .sx,
:root.theme-black .code-highlight .sr,
:root.theme-black .code-highlight .s1,
:root.theme-black .code-highlight .ss { color:#e6db74 }
:root.theme-black .code-highlight .bp,
:root.theme-black .code-highlight .fm { color:#a6e22e }
:root.theme-black .code-highlight .vc,
:root.theme-black .code-highlight .vg,
:root.theme-black .code-highlight .vi,
:root.theme-black .code-highlight .vm { color:#f8f8f2 }
:root.theme-black .code-highlight .il { color:#ae81ff }
:root.theme-black .code-highlight pre { margin:0;padding:0 0 .75rem;overflow:auto }
:root.theme-black .code-highlight .linenos { -webkit-user-select:none;user-select:none;cursor:default;text-align:right;margin-right:8px }
:root.theme-black .code-highlight .linenos::selection { background:0 0 }
:root.theme-black .code-highlight span.linenos { color:var(--color-line-number) }
:root.theme-black .code-highlight .err { color:inherit;border:none }
/* Light comments: upstream #3d7b7b measured 4.28:1 on the tinted code block. */
.code-highlight :is(.ch, .cm, .cp, .cpf, .c1, .cs) { color: #2f6060; }
/* Light keywords: upstream green #008000 measured 4.48:1 on the tinted block. */
.code-highlight :is(.k, .kc, .kd, .kn, .kp, .kr) { color: #006b00; }

/* 50-media.css */
/* Upstream sets no flex-direction here, so 40-results' column #urls would stack the tiles. */
#results.only_template_images #urls { flex-direction: row; gap: 0; }
/* Upstream fixes the tile at 12rem (10rem on phones); auto keeps title/source (absolute) under the image. */
#urls article.result-images {
  height: auto; flex-grow: 0; margin: .3rem; padding: 0 0 2.6rem; border: 0; border-radius: var(--az-radius);
  background: transparent; box-shadow: none; position: relative;
}
.result-images > a { display: block; text-decoration: none; }
.result-images img.image_thumbnail {
  /* min-width: a tall, narrow image made a ~50px tile whose title and source clipped to one letter; it is cropped instead. */
  max-width: 20rem; min-width: 7.5rem; height: 12rem; width: auto; object-fit: cover; display: block;
  border-radius: var(--az-radius); background: var(--az-surface-2); border: 1px solid var(--az-border);
  transition: transform .35s var(--az-ease), box-shadow .35s var(--az-ease);
}
/* hover only where hover exists: on touch the zoom stuck after a tap. */
@media (hover: hover) { .result-images > a:hover img.image_thumbnail { transform: scale(1.035); box-shadow: var(--az-shadow-lift); } }
.result-images > a:focus-visible img.image_thumbnail { transform: scale(1.035); box-shadow: var(--az-shadow-lift); }
/* Ring on the link, not the img: upstream fades the focused tile's img with filter: opacity(60%), which faded the ring to 2.65:1. */
.result-images > a:focus-visible { outline: 2px solid var(--az-ring); outline-offset: 3px; border-radius: var(--az-radius); }
.result-images .title { display: block; margin-block-start: .4rem; font-size: .8rem; color: var(--az-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 20rem; }
.result-images .source { display: block; font: .7rem/1.3 var(--az-font-mono); color: var(--az-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 20rem; }
@media screen and (max-width: 50em) {
  #urls article.result-images { margin: .2rem; }
  .result-images img.image_thumbnail { height: 8.5rem; max-width: calc(50vw - 1rem); }
  .result-images .title, .result-images .source { max-width: calc(50vw - 1rem); }
}

/* Detail panel: a glass sheet; full-screen below 50em */
#results.image-detail-open article.result-images[data-vim-selected] .detail {
  background: color-mix(in srgb, var(--az-surface-solid) 88%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--az-border); border-start-start-radius: var(--az-radius); box-shadow: var(--az-shadow-lift);
}
#results.image-detail-open article.result-images[data-vim-selected] .detail img { border-radius: var(--az-radius-sm); }
.result-images .detail .result-images-labels h4 { font: 600 1.15rem/1.3 var(--az-font-display); }
.result-images .detail .result-images-labels p { color: var(--az-text-muted); font-size: .85rem; }
.result-images .detail .result-images-labels p span { font-family: var(--az-font-mono); font-size: .75rem; color: var(--az-text-muted); }
.result-images .detail :is(.result-detail-close, .result-detail-previous, .result-detail-next) {
  display: grid; place-items: center; width: var(--az-tap); height: var(--az-tap); border-radius: var(--az-pill);
  background: var(--az-surface-2); border: 1px solid var(--az-border); color: var(--az-text);
}
/* Upstream sizes these at 1.5rem plus padding (35px) with a selector this long, and dims them to 40% opacity. */
#results.image-detail-open article.result-images[data-vim-selected] .detail :is(a.result-detail-close, a.result-detail-previous, a.result-detail-next) {
  box-sizing: border-box; display: grid; place-items: center; width: var(--az-tap); height: var(--az-tap); padding: 0; filter: none;
}
/* Upstream's label links are inline inside nowrap, overflow-hidden lines: a long source URL ran 555px wide on a 360px
   screen and clipped its own focus ring. As flex items they shrink to the line, ellipsized, with the ring drawn inside. */
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p:has(> a) { display: flex; align-items: baseline; }
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p > span { flex: none; }
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a {
  display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; outline-offset: -2px;
}
@media screen and (max-width: 50em) {
  #results.image-detail-open article.result-images[data-vim-selected] .detail { inset: 0; border-radius: 0; padding: 3.75rem 1rem 1.5rem; }
}

/* Videos: 16:9 media cards */
/* Selectors match upstream's `.result a.thumbnail_link ...` specificity (float:left, width:20rem, right:6px) so these win. */
.result-videos a.thumbnail_link { position: relative; float: none; display: block; margin: .6rem 0 .3rem; }
.result-videos a.thumbnail_link img.thumbnail { width: 100%; max-width: 26rem; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--az-radius-sm); }
.result a.thumbnail_link .thumbnail_length {
  position: absolute; inset: auto; inset-block-end: .5rem; inset-inline-start: .5rem; padding: .15rem .45rem; border-radius: 6px;
  background: rgb(0 0 0 / .72); color: #fff; font: 500 .72rem/1.3 var(--az-font-mono); white-space: nowrap;
}
@media screen and (min-width: 50em) {
  .result-videos { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: 1.1rem; }
  .result-videos > * { grid-column: 2; min-width: 0; justify-self: start; }
  .result-videos > .url_header, .result-videos > p, .result-videos > .engines { justify-self: stretch; }
  /* align-self:start keeps the link (and its absolute duration chip) the image's height, not six rows tall. */
  .result-videos > a.thumbnail_link { grid-column: 1; grid-row: 1 / span 6; align-self: start; justify-self: stretch; margin: 0; }
  .result-videos > .url_header { grid-column: 2; }
  .result-videos > [id^="result-video-"] { grid-column: 1 / -1; }
}
.result_author, .result_length {
  display: inline-block; margin: .1rem .35rem .3rem 0; padding: .1rem .55rem; border-radius: var(--az-pill);
  background: var(--az-tint); color: var(--az-text); font: 500 .72rem/1.5 var(--az-font-mono);
}
.result .media-loader, .result .btn-collapse { display: inline-flex; align-items: center; gap: .3rem; box-sizing: border-box; min-height: var(--az-tap-min); padding: .3rem .9rem; border-radius: var(--az-pill); border: 1px solid var(--az-border); background: var(--az-surface-2); }
.result iframe, .result .embedded-video iframe { border-radius: var(--az-radius-sm); max-width: 100%; }
/* Music: native audio control, card-width */
.result .audio-control audio { width: 100%; margin-block-start: .6rem; border-radius: var(--az-pill); }

/* Images tab: the grid and its panels share the header's centred column (upstream runs them edge to edge, 200px left of
   the search box), and the sidebar's collapsed panels sit side by side as one compact row instead of full-width bars. */
@media screen and (min-width: 50em) {
  .center-alignment-yes #main_results #results.only_template_images:not(.image-detail-open) {
    box-sizing: border-box; align-self: center; width: min(var(--center-page-width), 100% - 1rem); margin-inline: auto;
  }
}
#results.only_template_images #sidebar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 .6rem; }
#results.only_template_images #sidebar > div { flex: 0 1 auto; min-width: 0; }
#results.only_template_images #sidebar > div:has(> details[open]) { flex-basis: 100%; }
#results.only_template_images #sidebar details.sidebar-collapsible { margin-block-end: .6rem; }

/* 60-sidebar.css */
#sidebar { color: var(--az-text); }
/* Frame the details only: each #sidebar > div wraps exactly one, and #sidebar-end-collapsible is an empty div. */
#sidebar-end-collapsible { border: 0; }
#sidebar .az-kofi { margin: 0 0 .85rem; padding-inline: 1.1rem; font-size: .8rem; color: var(--az-text-muted); }
#sidebar .az-kofi a { color: var(--az-text); }
#sidebar details.sidebar-collapsible, #answers .answer, #corrections {
  border: 1px solid var(--az-border); border-radius: var(--az-radius); background: var(--az-surface);
  -webkit-backdrop-filter: blur(var(--az-blur)); backdrop-filter: blur(var(--az-blur));
  box-shadow: var(--az-shadow); padding: .9rem 1.1rem; margin-block-end: .85rem;
}
#sidebar details > summary.title, #sidebar .title, #sidebar h4 { font: 600 .78rem/1.4 var(--az-font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--az-text-muted); }
/* Upstream's summary.title { padding-top: 1em } made a 27px toggle; even padding gives a 40px row, and the card trims its own. */
#sidebar details.sidebar-collapsible { padding-block: .25rem; }
#sidebar details.sidebar-collapsible[open] { padding-block-end: .9rem; }
#sidebar details > summary.title { box-sizing: border-box; min-height: var(--az-tap-min); margin: 0; padding-block: calc((var(--az-tap-min) - 1.4em) / 2); }
#sidebar .infobox { border: 0; background: transparent; padding: 0; margin: .6rem 0 0; }
#sidebar .infobox h2.title { font: 700 1.5rem/1.15 var(--az-font-display); text-transform: none; letter-spacing: -.02em; color: var(--az-text); margin: .2rem 0 .7rem; }
#sidebar .infobox img { max-width: 100%; max-height: 12rem; border-radius: var(--az-radius-sm); background: light-dark(transparent, rgb(255 255 255 / .9)); padding: .25rem; }
#sidebar .infobox p { color: var(--az-text-muted); font-size: .9rem; line-height: 1.55; }
#sidebar .infobox .attributes dl { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: .2rem .8rem; margin: 0 0 .35rem; font-size: .82rem; }
#sidebar .infobox .attributes dt { color: var(--az-text-muted); font-family: var(--az-font-mono); font-size: .74rem; }
#sidebar .infobox .attributes dd { margin: 0; overflow-wrap: anywhere; }
#sidebar .infobox .urls ul { display: flex; flex-wrap: wrap; list-style: none; margin: .4rem 0 0; padding: 0; }
#sidebar .infobox .urls a, #sidebar #suggestions input[type="submit"], #sidebar #suggestions button {
  display: inline-flex; align-items: center; box-sizing: border-box; min-height: var(--az-tap-min); margin: .2rem .25rem .2rem 0; padding: .3rem .75rem; border-radius: var(--az-pill);
  border: 1px solid var(--az-border); background: var(--az-surface-2); color: var(--az-link); font-size: .82rem; text-decoration: none; cursor: pointer;
}
/* Upstream frames #answers itself (background, radius, padding); each .answer is the glass card here, so the wrapper is bare. */
#answers { background: transparent; border-radius: 0; padding: 0; margin: 0; }
#answers .answer { font-size: 1rem; gap: .35rem; }
#answers .answer span { font: 600 1.35rem/1.3 var(--az-font-display); }
#answers .answer-url { margin: 0; align-self: flex-start; font: 400 .74rem/1.4 var(--az-font-mono); color: var(--az-url); }
/* Desktop: answers head the sidebar column. Rows are upstream's four (corrections min, answers min, 1fr, pagination min).
   The answers take row 2 beside the start of the results, which span rows 2-3; a span over the 1fr row adds nothing to
   row 2, so the results do not wait for the answers, and the sidebar starts in row 3 below them. (Spanning the answers
   over rows 1-2 split their height between both rows and pushed the results down by half.) Only the two-column layouts:
   centred from 50em, left-aligned from 79.75em. */
@media screen and (min-width: 50em) {
  .center-alignment-yes #main_results #results:not(.only_template_images, .image-detail-open):has(> #answers) > #answers { grid-area: 2 / 2 / 3 / 3; }
  .center-alignment-yes #main_results #results:not(.only_template_images, .image-detail-open):has(> #answers) > #urls { grid-area: 2 / 1 / 4 / 2; }
  .center-alignment-yes #main_results #results:not(.only_template_images, .image-detail-open):has(> #answers) > #sidebar { grid-area: 3 / 2 / 5 / 3; }
}
@media screen and (min-width: 50em) and (max-width: 79.75em) { .center-alignment-yes #main_results #answers { margin-inline-end: 1rem; } }
@media screen and (min-width: 79.75em) {
  .center-alignment-no #main_results #results:not(.only_template_images, .image-detail-open):has(> #answers) > #answers { grid-area: 2 / 2 / 3 / 3; }
  .center-alignment-no #main_results #results:not(.only_template_images, .image-detail-open):has(> #answers) > #urls { grid-area: 2 / 1 / 4 / 2; }
  .center-alignment-no #main_results #results:not(.only_template_images, .image-detail-open):has(> #answers) > #sidebar { grid-area: 3 / 2 / 5 / 3; }
}
#sidebar #suggestions input[type="submit"], #sidebar #suggestions button, #sidebar #apis input { min-height: var(--az-tap-min); }
#sidebar #apis input { padding-inline: 1rem; border-radius: var(--az-pill); }
#corrections a, #corrections input { color: var(--az-link); }
#engines_msg table { width: 100%; font-size: .78rem; }
/* Upstream's .engine-stats .engine-name { width: 20rem } squeezed the error column to 59px ("Suspended: too many requests");
   names keep one line so the narrow images-tab panel does not split "google cse images" instead. */
#engines_msg td.engine-name { width: auto; white-space: nowrap; }
#engines_msg td { color: var(--az-text-muted); overflow-wrap: anywhere; }
#apis .title, #apis a { font-size: .8rem; }
.dialog-error, .dialog-warning, .dialog-modal { border-radius: var(--az-radius); border: 1px solid var(--az-border); box-shadow: var(--az-shadow); }
@media screen and (max-width: 50em) {
  #urls article.result:not(.result-images) { padding: .85rem .95rem .9rem; border-radius: 12px; }
  #sidebar { margin: 0 .75rem .85rem; }
  #answers, #corrections { margin-inline: .75rem; }
}

/* 70-pages.css */
/* body is a flex column and main is flex: 1 upstream. border-box keeps upstream's width: 100% plus padding on screen;
   flex: none with an auto bottom margin sizes the panel to its content while the footer stays at the bottom. */
:is(#main_preferences, #main_info, #main_stats, #main_404) {
  box-sizing: border-box; width: 100%; max-width: 64rem; flex: none; margin: 2rem auto auto; padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
  border: 1px solid var(--az-border); border-radius: calc(var(--az-radius) + 4px);
  background: var(--az-surface); box-shadow: var(--az-shadow);
  -webkit-backdrop-filter: blur(var(--az-blur)); backdrop-filter: blur(var(--az-blur));
}
:is(#main_preferences, #main_info, #main_stats, #main_404) h1 { font: 700 clamp(1.8rem, 5vw, 2.6rem)/1.1 var(--az-font-display); letter-spacing: -.03em; background: var(--az-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
:is(#main_preferences, #main_info, #main_stats, #main_404) h2 { font: 600 1.3rem/1.25 var(--az-font-display); }
#main_info p, #main_info li { line-height: 1.65; color: var(--az-text); }

/* Toolkit tabs as pills. #main_preferences: upstream's selectors here are html body .tabs > input:checked ~ label (0,2,4). */
#main_preferences .tabs { position: relative; display: flex; flex-wrap: wrap; gap: .4rem; border: 0; }
/* Upstream hides the tab radios with display: none, which takes the tabs out of keyboard reach; visually hidden instead. */
#main_preferences .tabs > input[type="radio"] { display: block; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
#main_preferences .tabs > input[type="radio"]:focus-visible + label { outline: 2px solid var(--az-ring); outline-offset: 2px; }
#main_preferences .tabs > label {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: var(--az-tap-min); min-width: var(--az-tap-min);
  width: auto; margin: 0; padding: .45rem .95rem; border: 1px solid var(--az-border); border-radius: var(--az-pill);
  background: var(--az-surface-2); color: var(--az-text-muted); font: 500 .85rem/1 var(--az-font-body);
  letter-spacing: normal; text-transform: none; cursor: pointer;
}
#main_preferences .tabs > label:hover { color: var(--az-text); border: 1px solid var(--az-border-strong); }
#main_preferences .tabs > input:checked + label { background: var(--az-btn); color: var(--az-on-accent); border: 1px solid transparent; font-weight: 600; }
#main_preferences .tabs > section { border: 0; padding-block-start: 1rem; flex-basis: 100%; }
/* About / Search syntax: the same pills on upstream's ul.tabs > li > a links. */
/* padding-inline: upstream zeroes only padding-left, so in RTL the default list indent lands on the right of a width:100% list. */
#main_info ul.tabs { gap: .4rem; margin-block: 1rem; border: 0; padding-inline: 0; }
#main_info ul.tabs > li > a {
  display: inline-flex; align-items: center; box-sizing: border-box; min-height: var(--az-tap-min);
  margin: 0; padding: .45rem .95rem; border: 1px solid var(--az-border); border-radius: var(--az-pill);
  background: var(--az-surface-2); color: var(--az-text-muted); font: 500 .85rem/1 var(--az-font-body);
  letter-spacing: normal; text-transform: none; text-decoration: none;
}
#main_info ul.tabs > li > a:hover { color: var(--az-text); border: 1px solid var(--az-border-strong); }
#main_info ul.tabs > li > a.active { background: var(--az-btn); color: var(--az-on-accent); border: 1px solid transparent; font-weight: 600; }

/* Upstream's blue SearXNG logo image becomes the gradient Irzaverse wordmark, matching the front page. */
:is(#main_preferences, #main_info, #main_stats, #main_404) a:has(> img.logo) { display: inline-flex; align-items: center; min-height: var(--az-tap-min); text-decoration: none; }
:is(#main_preferences, #main_info, #main_stats, #main_404) img.logo { display: none; }
:is(#main_preferences, #main_info, #main_stats, #main_404) a:has(> img.logo)::before {
  content: "Irzaverse"; font: 700 2rem/1.2 var(--az-font-display); letter-spacing: -.04em;
  background: var(--az-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Fields */
#main_preferences fieldset { border: 0; border-block-end: 1px solid var(--az-border); padding: 1rem 0; margin: 0; }
#main_preferences legend { font: 600 1rem/1.3 var(--az-font-display); color: var(--az-text); }
#main_preferences div.pref-group { box-sizing: border-box; border-radius: var(--az-radius-sm); color: var(--az-text); }
#main_preferences .description { color: var(--az-text-muted); font-size: .85rem; }
#main_preferences select, #main_preferences input[type="text"], #main_preferences input[type="search"] {
  box-sizing: border-box; height: auto; min-height: var(--az-tap-min); padding: .5rem .9rem; border-radius: var(--az-radius-sm); border: 1px solid var(--az-border-strong);
  background: var(--az-surface-2); color: var(--az-text); font: 400 .9rem/1.3 var(--az-font-body); max-width: 100%;
}
/* The shorthand above drops upstream's arrow image; !important because upstream pads every select with .2rem !important. */
#main_preferences select { appearance: none; padding-inline: .9rem 2.2rem !important; background: var(--az-chevron) no-repeat right .85rem center / .7rem auto, var(--az-surface-2); }
[dir="rtl"] #main_preferences select { background-position: left .85rem center, 0 0; }
/* Upstream's #main_preferences .value select:focus { outline: none } (a 1px violet glow, under 3:1 on the dark panel) and
   input.checkbox-onoff:focus { outline: none } outrank the global ring; :focus:focus-visible lifts this above both. */
html #main_preferences :is(select, input, button, textarea):focus:focus-visible { outline: 2px solid var(--az-ring); outline-offset: 2px; }
#main_preferences input[type="submit"], #main_preferences button, #main_preferences .button {
  min-height: var(--az-tap-min); padding: .6rem 1.2rem; border-radius: var(--az-pill); border: 1px solid transparent;
  background: var(--az-btn); color: var(--az-on-accent); font: 600 .9rem/1 var(--az-font-body); cursor: pointer;
}
#main_preferences input[type="reset"], #main_preferences a.link_on_top_return { background: transparent; color: var(--az-text-muted); border: 1px solid var(--az-border); border-radius: var(--az-pill); }
/* Reset defaults and Back are links in div.preferences_back, not inputs. */
#main_preferences .preferences_back { margin: 2px 4px; padding: 0; background: transparent; border: 1px solid var(--az-border-strong); border-radius: var(--az-pill); }
#main_preferences .preferences_back a { display: flex; align-items: center; box-sizing: border-box; min-height: var(--az-tap-min); padding: .6rem 1.2rem; color: var(--az-text); font: 500 .9rem/1 var(--az-font-body); text-decoration: none; }
#main_preferences .preferences_back:hover { background: var(--az-tint); }

/* Default categories: the header's one-row max-content pill strip would push the page sideways here, so it wraps. */
#main_preferences #categories { overflow: visible; }
#main_preferences #categories_container { width: auto; flex-wrap: wrap; }
#main_preferences .category_checkbox { margin: 0; }
/* Upstream hides these checkboxes with display: none, so the keyboard skipped every category; visually hidden instead. */
#main_preferences .category_checkbox input[type="checkbox"] { display: block; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
#main_preferences .category_checkbox input[type="checkbox"]:focus-visible + label { outline: 2px solid var(--az-ring); outline-offset: 2px; }
#main_preferences .category_checkbox label {
  justify-content: center; box-sizing: border-box; min-width: var(--az-tap-min); gap: .35rem; align-items: center; padding: .4rem .85rem; border: 1px solid var(--az-border); border-radius: var(--az-pill);
  background: var(--az-surface-2); color: var(--az-text-muted); font: 500 .85rem/1 var(--az-font-body);
}
#main_preferences .category_checkbox label svg { width: 1rem; height: 1rem; padding: 0; }
#main_preferences .category_checkbox input[type="checkbox"]:checked + label { background: var(--az-btn); color: var(--az-on-accent); border: 1px solid transparent; }

/* Engine tables scroll inside their panel instead of the page */
#main_preferences .tab-content-engines, #main_preferences section[id^="tab-content-category"] { overflow-x: auto; }
#main_preferences table { border-collapse: collapse; width: 100%; font-size: .82rem; }
#main_preferences th { font: 600 .72rem/1.4 var(--az-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--az-text-muted); text-align: start; }
#main_preferences td, #main_preferences th { padding: .45rem .6rem; border-block-end: 1px solid var(--az-border); }
#main_preferences tr:hover td { background: var(--az-tint); }
/* Engine names are th.name cells in every row: keep them readable body text, not header caps. */
#main_preferences th.name { font: 500 .85rem/1.3 var(--az-font-body); text-transform: none; letter-spacing: normal; color: var(--az-text); }
/* The white "on" knob vanished against white light-theme panels; the ring keeps it visible in every theme. */
#main_preferences input.checkbox-onoff[type="checkbox"]::before { box-shadow: 0 1px 3px rgb(15 23 42 / .3), 0 0 0 1px var(--az-border-strong); }
/* Upstream's switch is the input itself, 36x10px: too small to hit. The input becomes a 40px square, the 10px track moves to
   ::after (upstream only drew a focus glow there; the outline ring above replaces it), and the knob is centred on it. */
#main_preferences input.checkbox-onoff[type="checkbox"] { box-sizing: border-box; width: var(--az-tap-min); height: var(--az-tap-min); margin-block: 0; vertical-align: middle; border-radius: var(--az-radius-sm); background: transparent; }
#main_preferences input.checkbox-onoff[type="checkbox"]::after, #main_preferences input.checkbox-onoff[type="checkbox"]:focus::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; width: auto; height: .7em; margin-top: -.35em; z-index: 0;
  border: 0; border-radius: 10px; box-shadow: none; background: var(--color-toolkit-checkbox-onoff-off-background);
}
#main_preferences input.checkbox-onoff[type="checkbox"]:is(:checked, .reversed-checkbox)::after { background: var(--color-toolkit-checkbox-onoff-on-background); }
#main_preferences input.checkbox-onoff.reversed-checkbox[type="checkbox"]:checked::after { background: var(--color-toolkit-checkbox-onoff-off-background); }
#main_preferences input.checkbox-onoff[type="checkbox"]::before { top: 50%; margin-top: -.9375em; z-index: 1; }

/* Stats */
/* The engine table is wider than a phone once Android text scaling is on (125% gave 81px of sideways page scroll); it scrolls inside the card. */
#main_stats { overflow-x: auto; }
#main_stats table { width: 100%; border-collapse: collapse; font-size: .82rem; }
#main_stats :is(th, td) { padding: .4rem .5rem; border-block-end: 1px solid var(--az-border); }
#main_stats .bar-chart-graph { border-radius: 4px; }

/* No results / errors / not found */
.dialog-error, .dialog-error-block, .dialog-warning {
  padding: 1.1rem 1.25rem; border-radius: var(--az-radius); border: 1px solid var(--az-border);
  background: var(--az-surface); box-shadow: var(--az-shadow); color: var(--az-text);
}
.dialog-error, .dialog-error-block { border-inline-start: 3px solid var(--color-error); }
/* The no-results block: upstream's bare paragraphs and list, given a display heading and readable spacing. */
.dialog-error-block p { margin: 0 0 .5rem; line-height: 1.55; }
.dialog-error-block p:first-child strong { display: block; font: 700 1.6rem/1.2 var(--az-font-display); letter-spacing: -.02em; }
.dialog-error-block ul { margin: .25rem 0 0; padding-inline-start: 1.25rem; }
.dialog-error-block li { margin-block: .4rem; line-height: 1.55; color: var(--az-text-muted); }
.dialog-error-block li::marker { color: var(--az-accent-2); }
.dialog-error-block a { color: var(--az-link); overflow-wrap: anywhere; }
.dialog-warning { border-inline-start: 3px solid var(--color-warning); }
@media screen and (max-width: 50em) {
  :is(#main_preferences, #main_info, #main_stats, #main_404) { width: calc(100% - 1rem); margin: 1rem auto auto; border-radius: var(--az-radius); }
}
/* Phones: upstream's inline value-plus-bar shrank each bar to a dot in the narrow columns; the value sits over a full-width bar. */
@media screen and (max-width: 50em) {
  #main_stats .bar-chart-value { display: block; width: auto; padding: 0; text-align: end; }
  #main_stats .bar-chart-graph { display: block; width: 100%; min-width: 2.5rem; }
}
/* 404: the icon row sits absolutely inside the card and covered the heading; give it its own row. */
#main_404 #links_on_top { position: static; justify-content: flex-end; margin-block-end: .5rem; }

/* 80-motion.css */
@keyframes az-rise { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
/* Entrance runs on first paint without JS; only the first ten cards are staggered.
   Science, files, IT and music wrap results in div.template_group_*, where nth-of-type restarts per group and up to ten
   cards per group rose at once; only the first group animates there (CSS cannot count across groups), so never more than ten.
   Fill mode backwards, not both: a held end frame (transform: none) would override the hover lift below. */
#urls article.result:nth-of-type(-n + 10), #urls article.az-new, #sidebar > * { animation: az-rise .42s var(--az-ease) backwards; }
#urls > [class^="template_group_"] ~ [class^="template_group_"] article.result:not(.az-new) { animation: none; }
#urls article.result:nth-of-type(2) { animation-delay: 40ms; }
#urls article.result:nth-of-type(3) { animation-delay: 80ms; }
#urls article.result:nth-of-type(4) { animation-delay: 120ms; }
#urls article.result:nth-of-type(5) { animation-delay: 160ms; }
#urls article.result:nth-of-type(6) { animation-delay: 200ms; }
#urls article.result:nth-of-type(7) { animation-delay: 240ms; }
#urls article.result:nth-of-type(8) { animation-delay: 280ms; }
#urls article.result:nth-of-type(9) { animation-delay: 320ms; }
#urls article.result:nth-of-type(10) { animation-delay: 360ms; }
#sidebar > * { animation-delay: 120ms; }
.index .title, .index #search { animation: az-rise .6s var(--az-ease) backwards; }
.index #search { animation-delay: 90ms; }

@media (hover: hover) {
  #urls article.result:not(.result-images):hover { transform: translate3d(0, -2px, 0); }
  button.category_button:hover { transform: translate3d(0, -1px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body::before, .index h1, .index .title, .index #search, #urls article, #sidebar > *, #pagination .loader::after { animation: none !important; }
  #urls article.result:not(.result-images):hover, button.category_button:hover, #send_search:hover,
  .result-images > a:is(:hover, :focus-visible) img.image_thumbnail { transform: none !important; }
  * { scroll-behavior: auto !important; }
}