/*
 * The search site's own styles, after SearXNG's and the blog's (server.mjs). In no cascade layer, so
 * they win over both.
 *
 * 1. Each stylesheet keeps to its part of the page. server.mjs loads SearXNG's into the layer "sxng"
 *    and the blog's into "blog" (above it). SearXNG's page is <main> and <footer> right in <body>;
 *    everything else in <body> is the blog's (header, footer, loading screen, its pop-ups). Here, in
 *    each layer, the other site's part is reset: SearXNG's rules don't reach the blog's header, and the
 *    blog's rules for plain elements (h1, a, input, button…) don't reach the search page.
 *    (#ux-never matches nothing: it only gives these selectors the weight of an id, so they outweigh
 *    the rules they reset.)
 * 2. Dracula (Alucard in light mode) for SearXNG's colors; light or dark follows the blog header's button.
 * 3. The page: the blog's column, the logo, SearXNG's top links and footer line.
 */

/* ---------- 1. Each stylesheet to its part ---------- */
@layer sxng {
  html, body,
  body > :not(main, footer, #ux-never), body > :not(main, footer, #ux-never) *,
  body > :not(main, footer, #ux-never)::before, body > :not(main, footer, #ux-never)::after,
  body > :not(main, footer, #ux-never) *::before, body > :not(main, footer, #ux-never) *::after {
    all: revert-layer;
  }
}
@layer blog {
  body > :is(main, footer, #ux-never), body > :is(main, footer, #ux-never) *,
  body > :is(main, footer, #ux-never) *::before, body > :is(main, footer, #ux-never) *::after {
    all: revert-layer;
  }
}

/* ---------- 2. Dracula ---------- */
html:not(#ux-never) {
  --ux-fg: #1f1f1f; --ux-fg-rgb: 31, 31, 31; --ux-soft: #6c664b; --ux-comment: #635d97;
  --ux-bg: #f7f3df; --ux-surface: #fffbeb; --ux-surface-2: #efebd6; --ux-tonal: #e4dfc6; --ux-line: #ddd8c0; --ux-on-accent: #fffbeb;
  --ux-purple: #644ac9; --ux-pink: #a3144d; --ux-cyan: #036a96; --ux-green: #14710a; --ux-orange: #a34d14; --ux-yellow: #846e15; --ux-red: #cb3a2a;
  --ux-shadow: 0 2px 10px rgba(60, 50, 20, .14);
}
html[data-theme='dark']:not(#ux-never) {
  --ux-fg: #f8f8f2; --ux-fg-rgb: 248, 248, 242; --ux-soft: #a7aed3; --ux-comment: #6272a4;
  --ux-bg: #14151c; --ux-surface: #1c1d26; --ux-surface-2: #262833; --ux-tonal: #343746; --ux-line: #2c2e3b; --ux-on-accent: #14151c;
  --ux-purple: #bd93f9; --ux-pink: #ff79c6; --ux-cyan: #8be9fd; --ux-green: #50fa7b; --ux-orange: #ffb86c; --ux-yellow: #f1fa8c; --ux-red: #ff5555;
  --ux-shadow: 0 4px 18px rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']):not(#ux-never) {
    --ux-fg: #f8f8f2; --ux-fg-rgb: 248, 248, 242; --ux-soft: #a7aed3; --ux-comment: #6272a4;
    --ux-bg: #14151c; --ux-surface: #1c1d26; --ux-surface-2: #262833; --ux-tonal: #343746; --ux-line: #2c2e3b; --ux-on-accent: #14151c;
    --ux-purple: #bd93f9; --ux-pink: #ff79c6; --ux-cyan: #8be9fd; --ux-green: #50fa7b; --ux-orange: #ffb86c; --ux-yellow: #f1fa8c; --ux-red: #ff5555;
    --ux-shadow: 0 4px 18px rgba(0, 0, 0, .45);
  }
}
/* SearXNG's color names, from the ones above (the same in light and dark: the --ux-* values change) */
html:not(#ux-never) {
  --color-base-font: var(--ux-fg); --color-base-font-rgb: var(--ux-fg-rgb);
  --color-base-background: var(--ux-surface); --color-base-background-mobile: var(--ux-surface);
  --color-url-font: var(--ux-purple); --color-url-visited-font: var(--ux-pink);
  --color-header-background: transparent; --color-header-border: var(--ux-line);
  --color-footer-background: transparent; --color-footer-border: var(--ux-line);
  --color-sidebar-border: var(--ux-line); --color-sidebar-font: var(--ux-fg); --color-sidebar-background: var(--ux-surface);
  --color-backtotop-font: var(--ux-fg); --color-backtotop-border: var(--ux-line); --color-backtotop-background: var(--ux-surface);
  --color-btn-background: var(--ux-purple); --color-btn-font: var(--ux-on-accent);
  --color-show-btn-background: var(--ux-tonal); --color-show-btn-font: var(--ux-fg);
  --color-search-border: var(--ux-line); --color-search-shadow: var(--ux-shadow); --color-search-background: var(--ux-surface);
  --color-search-font: var(--ux-fg); --color-search-background-hover: var(--ux-purple);
  --color-error: var(--ux-red); --color-error-background: color-mix(in srgb, var(--ux-red) 14%, var(--ux-surface));
  --color-warning: var(--ux-orange); --color-warning-background: color-mix(in srgb, var(--ux-orange) 14%, var(--ux-surface));
  --color-success: var(--ux-green); --color-success-background: color-mix(in srgb, var(--ux-green) 14%, var(--ux-surface));
  --color-categories-item-selected-font: var(--ux-purple); --color-categories-item-border-selected: var(--ux-purple);
  --color-autocomplete-font: var(--ux-fg); --color-autocomplete-border: var(--ux-line); --color-autocomplete-shadow: var(--ux-shadow);
  --color-autocomplete-background: var(--ux-surface); --color-autocomplete-background-hover: var(--ux-tonal);
  --color-answer-font: var(--ux-fg); --color-answer-background: var(--ux-surface);
  --color-result-keyvalue-col-table: var(--ux-surface-2); --color-result-keyvalue-odd: var(--ux-surface-2); --color-result-keyvalue-even: var(--ux-surface);
  --color-result-background: var(--ux-surface); --color-result-border: var(--ux-line);
  --color-result-url-font: var(--ux-green); --color-result-vim-selected: var(--ux-surface-2); --color-result-vim-arrow: var(--ux-purple);
  --color-result-description-highlight-font: var(--ux-pink);
  --color-result-link-font: var(--ux-purple); --color-result-link-font-highlight: var(--ux-purple); --color-result-link-visited-font: var(--ux-pink);
  --color-result-publishdate-font: var(--ux-comment); --color-result-engines-font: var(--ux-soft);
  --color-result-search-url-border: var(--ux-line); --color-result-search-url-font: var(--ux-fg);
  --color-result-image-span-font: var(--ux-fg); --color-result-image-span-font-selected: var(--ux-on-accent); --color-result-image-background: var(--ux-surface-2);
  --color-result-detail-font: #f8f8f2; --color-result-detail-label-font: #a7aed3; --color-result-detail-background: #14151c;
  --color-result-detail-hr: #2c2e3b; --color-result-detail-link: #8be9fd;
  --color-settings-tr-hover: var(--ux-surface-2); --color-settings-engine-description-font: var(--ux-soft); --color-settings-table-group-background: var(--ux-surface-2);
  --color-toolkit-badge-font: var(--ux-on-accent); --color-toolkit-badge-background: var(--ux-comment);
  --color-toolkit-kbd-font: var(--ux-fg); --color-toolkit-kbd-background: var(--ux-tonal);
  --color-toolkit-dialog-border: var(--ux-line); --color-toolkit-dialog-background: var(--ux-surface);
  --color-toolkit-tabs-label-border: var(--ux-surface); --color-toolkit-tabs-section-border: var(--ux-line);
  --color-toolkit-select-background: var(--ux-surface-2); --color-toolkit-select-border: var(--ux-line); --color-toolkit-select-background-hover: var(--ux-tonal);
  --color-toolkit-input-text-font: var(--ux-fg);
  --color-toolkit-checkbox-onoff-off-background: var(--ux-tonal); --color-toolkit-checkbox-onoff-on-background: var(--ux-tonal);
  --color-toolkit-checkbox-onoff-on-mark-background: var(--ux-purple); --color-toolkit-checkbox-onoff-on-mark-color: var(--ux-on-accent);
  --color-toolkit-checkbox-onoff-off-mark-background: var(--ux-comment); --color-toolkit-checkbox-onoff-off-mark-color: var(--ux-surface);
  --color-toolkit-checkbox-label-background: var(--ux-surface-2); --color-toolkit-checkbox-label-border: var(--ux-line); --color-toolkit-checkbox-input-border: var(--ux-purple);
  --color-toolkit-engine-tooltip-border: var(--ux-line); --color-toolkit-engine-tooltip-background: var(--ux-surface);
  --color-toolkit-loader-border: color-mix(in srgb, var(--ux-purple) 25%, transparent); --color-toolkit-loader-borderleft: var(--ux-purple);
  --color-doc-code: var(--ux-fg); --color-doc-code-background: var(--ux-surface-2);
  --color-bar-chart-primary: var(--ux-cyan); --color-bar-chart-secondary: var(--ux-orange);
  --color-loading-indicator: color-mix(in srgb, var(--ux-purple) 25%, transparent); --color-loading-indicator-gap: var(--ux-purple);
  --color-line-number: var(--ux-comment);
  --color-favicon-background-color: var(--ux-surface-2); --color-favicon-border-color: var(--ux-line);
}

/* ---------- 3. The page ---------- */
/* The blog's header and footer sit right in the page, as on the blog: the header sticks to the top */
unix3r-header, unix3r-footer { display: contents; }
unix3r-header, unix3r-footer, #blog-embed { font: 400 1.0625rem/1.65 var(--font-body, Georgia, serif); color: var(--ink); }

/* The search page: laid out by SearXNG (it centers itself on the page), in the blog's interface font */
body > main, body > footer {
  box-sizing: border-box; color: var(--color-base-font); font-family: var(--font-ui, system-ui), system-ui, sans-serif; font-size: .9rem; line-height: 1.4;
}
body > main { min-height: 62vh; margin-bottom: 2rem; }
#main_index { margin-top: 10vh; }

/* About and Preferences: a row at the top right of the search page (SearXNG puts them over the page's corner) */
#links_on_top { position: static !important; justify-content: flex-end; gap: 16px; margin: 14px 0 0; padding: 0 24px !important; box-sizing: border-box; }
#links_on_top a { display: inline-flex; align-items: center; gap: 4px; color: var(--ux-soft); text-decoration: none; }
#links_on_top a:hover { color: var(--ux-purple); }

/* The logo: the blog's mark and the site's name, in Dracula purple and pink */
.ux-mark { display: inline-block; flex: none; width: 56px; height: 56px; background: url(/logo-mark.png) center / contain no-repeat; }
.ux-logo { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 1rem auto 2.25rem; }
.ux-logo h1 { visibility: visible; margin: 0; font: 800 clamp(2.4rem, 7vw, 3.6rem) / 1 var(--font-head, system-ui); letter-spacing: -.03em;
  background: linear-gradient(90deg, var(--ux-purple), var(--ux-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#search_logo .ux-mark { width: 34px; height: 34px; margin: .4rem 0 auto; }

/* The search box: Dracula purple when it's in use */
#search_view .search_box { border-radius: 14px; }
#search_view .search_box:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ux-purple) 35%, transparent), var(--ux-shadow); }
#send_search { color: var(--ux-purple); }
#q { caret-color: var(--ux-pink); }

/* Results: a little room, the title in the blog's display font */
#urls .result h3 { font-family: var(--font-head, system-ui); font-weight: 700; letter-spacing: -.01em; }

/* SearXNG's line (Powered by SearXNG · its source code), small, above the blog's footer */
body > footer { min-height: 0; padding-top: 14px; padding-bottom: 14px; font-size: .8rem; color: var(--ux-soft); border-top: 1px solid var(--ux-line); background: transparent; }
body > footer a { color: var(--ux-purple); }
::selection { background: color-mix(in srgb, var(--ux-purple) 28%, transparent); }