/* ============================================================
   liforra.css - SearXNG "liforra" theme: the stock simple theme
   restyled to match liforra.de (palette, Space Mono, flat square
   boxes). Loaded after sxng-ltr/rtl.min.css; dark only, so every
   simple_style (auto/light/dark/black) gets the same palette.
   ============================================================ */

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-mono-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-mono-bold.woff2') format('woff2');
}

/* same tokens as liforra.de theme.css */
:root {
  --bg: oklch(0.09 0.015 300);
  --panel: oklch(0.13 0.024 300);
  --panel-alt: oklch(0.08 0.02 300);
  --border: oklch(0.4 0.06 300 / 0.5);
  --border-soft: oklch(0.4 0.06 300 / 0.35);
  --accent: oklch(0.68 0.19 300);
  --accent-strong: oklch(0.76 0.17 300);
  --accent-bright: oklch(0.85 0.15 300);
  --accent-wash: oklch(0.68 0.19 300 / 0.15);
  --text: oklch(0.94 0.015 300);
  --text-body: oklch(0.8 0.015 300);
  --text-dim: oklch(0.65 0.02 300);
  --text-dimmer: oklch(0.58 0.02 300);
  --text-faint: oklch(0.5 0.02 300);
  --danger: oklch(0.55 0.22 25);
  --online: oklch(0.72 0.19 145);
  --afk: oklch(0.78 0.16 90);
  --visited: oklch(0.7 0.13 330);
  --font: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* (0,2,0) like the stock :root.theme-* blocks, and later in the cascade */
:root:is(.theme-auto, .theme-light, .theme-dark, .theme-black) {
  color-scheme: dark;
  --color-base-font: var(--text-body);
  --color-base-font-rgb: 196, 192, 204;
  --color-base-background: var(--panel);
  --color-base-background-mobile: var(--panel);
  --color-url-font: var(--accent-strong);
  --color-url-visited-font: var(--visited);
  --color-header-background: var(--panel);
  --color-header-border: var(--border);
  --color-footer-background: var(--panel);
  --color-footer-border: var(--border);
  --color-sidebar-border: var(--border-soft);
  --color-sidebar-font: var(--text-body);
  --color-sidebar-background: var(--panel-alt);
  --color-backtotop-font: var(--text-dim);
  --color-backtotop-border: var(--border);
  --color-backtotop-background: var(--panel);
  --color-btn-background: var(--accent);
  --color-btn-font: var(--bg);
  --color-show-btn-background: var(--panel-alt);
  --color-show-btn-font: var(--text-body);
  --color-search-border: var(--border);
  --color-search-shadow: none;
  --color-search-background: var(--panel-alt);
  --color-search-font: var(--text);
  --color-search-background-hover: var(--accent);
  --color-error: oklch(0.68 0.19 25);
  --color-error-background: oklch(0.55 0.22 25 / 0.14);
  --color-warning: var(--afk);
  --color-warning-background: oklch(0.78 0.16 90 / 0.1);
  --color-success: var(--online);
  --color-success-background: oklch(0.72 0.19 145 / 0.1);
  --color-categories-item-selected: var(--accent-wash);
  --color-categories-item-selected-font: var(--accent);
  --color-categories-item-border-selected: var(--accent);
  --color-autocomplete-font: var(--text-body);
  --color-autocomplete-border: var(--border);
  --color-autocomplete-shadow: none;
  --color-autocomplete-background: var(--panel-alt);
  --color-autocomplete-background-hover: var(--accent-wash);
  --color-answer-font: var(--text-body);
  --color-answer-background: var(--panel-alt);
  --color-result-keyvalue-col-table: var(--panel-alt);
  --color-result-keyvalue-odd: var(--panel-alt);
  --color-result-keyvalue-even: var(--panel);
  --color-result-background: transparent;
  --color-result-border: var(--border-soft);
  --color-result-url-font: var(--text-dim);
  --color-result-vim-selected: var(--accent-wash);
  --color-result-vim-arrow: var(--accent);
  --color-result-description-highlight-font: var(--text);
  --color-result-link-font: var(--accent-strong);
  --color-result-link-font-highlight: var(--accent-bright);
  --color-result-link-visited-font: var(--visited);
  --color-result-publishdate-font: var(--text-faint);
  --color-result-engines-font: var(--text-faint);
  --color-result-search-url-border: var(--border);
  --color-result-search-url-font: var(--text-body);
  --color-result-detail-font: var(--text);
  --color-result-detail-label-font: var(--text-dim);
  --color-result-detail-background: var(--bg);
  --color-result-detail-hr: var(--border);
  --color-result-detail-link: var(--accent-strong);
  --color-result-detail-loader-border: oklch(0.94 0.015 300 / 0.2);
  --color-result-detail-loader-borderleft: transparent;
  --color-result-image-span-font: var(--text-body);
  --color-result-image-span-font-selected: var(--bg);
  --color-result-image-background: var(--panel-alt);
  --color-settings-tr-hover: var(--accent-wash);
  --color-settings-engine-description-font: var(--text-dim);
  --color-settings-table-group-background: var(--panel-alt);
  --color-toolkit-badge-font: var(--text);
  --color-toolkit-badge-background: oklch(0.35 0.05 300);
  --color-toolkit-kbd-font: var(--bg);
  --color-toolkit-kbd-background: var(--text-body);
  --color-toolkit-dialog-border: var(--border);
  --color-toolkit-dialog-background: var(--panel);
  --color-toolkit-tabs-label-border: var(--panel);
  --color-toolkit-tabs-section-border: var(--border);
  --color-toolkit-select-background: var(--panel-alt);
  --color-toolkit-select-border: var(--border);
  --color-toolkit-select-background-hover: var(--accent-wash);
  --color-toolkit-input-text-font: var(--text);
  --color-toolkit-checkbox-onoff-off-background: oklch(0.2 0.02 300);
  --color-toolkit-checkbox-onoff-on-background: oklch(0.2 0.02 300);
  --color-toolkit-checkbox-onoff-on-mark-background: var(--accent);
  --color-toolkit-checkbox-onoff-on-mark-color: var(--bg);
  --color-toolkit-checkbox-onoff-off-mark-background: var(--text-dimmer);
  --color-toolkit-checkbox-onoff-off-mark-color: var(--bg);
  --color-toolkit-checkbox-label-background: var(--panel-alt);
  --color-toolkit-checkbox-label-border: var(--border);
  --color-toolkit-checkbox-input-border: var(--accent);
  --color-toolkit-engine-tooltip-border: var(--border);
  --color-toolkit-engine-tooltip-background: var(--panel-alt);
  --color-toolkit-loader-border: oklch(0.94 0.015 300 / 0.2);
  --color-toolkit-loader-borderleft: transparent;
  --color-doc-code: var(--text);
  --color-doc-code-background: var(--panel-alt);
  --color-favicon-background-color: var(--panel-alt);
  --color-favicon-border-color: var(--border);
}

/* ---- base ---- */

html {
  font-family: var(--font);
  font-size: 14px;
}
html, body, button, input, select, textarea {
  font-family: var(--font);
}

::selection { background: oklch(0.7 0.2 300 / 0.35); }

a { color: var(--accent-strong); }
a:hover { color: var(--accent-bright); }

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: oklch(0.35 0.05 300); }
html { scrollbar-color: oklch(0.35 0.05 300) transparent; }

/* square corners everywhere, except the spinners */
*, *::before, *::after { border-radius: 0 !important; }
.loader, .loader::after { border-radius: 50% !important; }

/* dropdown arrow in the accent colour, for every simple_style */
html select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23b07cf0'/%3E%3C/svg%3E") !important;
  background-size: 9px 6px !important;
  background-position: right 8px center !important;
}

/* ---- header / search box ---- */

#search_header { border-bottom-width: 2px; }

#search_logo svg [stroke] { stroke: var(--accent); }
#search_logo svg [fill="#3050ff"] { fill: var(--accent); }

.search_box,
#search_view:focus-within .search_box {
  border: 1px solid var(--border);
  background: var(--panel-alt);
  box-shadow: none;
}
#search_view:focus-within .search_box { border-color: var(--accent); }

#q, #send_search, #clear_search {
  background: var(--panel-alt);
  font-size: 1rem;
}
#q::placeholder { color: var(--text-faint); }
#send_search:hover, #clear_search:hover { color: var(--accent-bright); }

#links_on_top a,
#links_on_top a:link *, #links_on_top a:visited * { color: var(--text-dimmer); }
#links_on_top a:hover, #links_on_top a:hover * { color: var(--accent); text-decoration: none; }
#links_on_top a { font-size: 12.5px; }

/* only while open; closed it is an empty 0-height box that drew a 2px line */
.autocomplete.open { border: 1px solid var(--border); }
.autocomplete li:hover, .autocomplete li.active { background: var(--accent-wash); }

/* categories look like the site's title-bar tabs */
.category_checkbox label,
button.category_button {
  padding: 4px 8px;
  border: none !important;
  font-size: 12.5px;
  color: var(--text-dimmer);
  background: transparent;
}
.category_checkbox label:hover,
button.category_button:hover { color: var(--text-body); }
.category_checkbox input:checked + label,
button.category_button.selected,
#categories_container:has(button.category_button:focus-within) button.category_button:focus-within {
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 700;
}
.category_checkbox label svg,
button.category_button svg { width: 12px; height: 12px; }
#categories_container { display: flex; flex-wrap: wrap; gap: 2px; }
.category_checkbox, .category_button { margin-right: 0; }
#search_header { padding-bottom: 0.4rem; }

.search_filters select,
#main_preferences select,
.search_filters select:hover {
  background-color: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  font-size: 12px;
}
.search_filters select:hover,
.search_filters select:focus { border-color: var(--accent); color: var(--text-body); }

/* ---- headers ---- */

.page_with_header .liforra-logo {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
}
.page_with_header a:hover .liforra-logo { color: var(--accent-bright); }

/* swipeable rows; their scrollbars only get in the way */
#categories, .search_filters { scrollbar-width: none; }
#categories::-webkit-scrollbar, .search_filters::-webkit-scrollbar { display: none; }
.search_filters select { max-width: 16rem; }

/* ---- front page ---- */

.index .title {
  background: none;
  min-height: 0;
  margin: 0 auto 2rem;
}
.index h1 {
  visibility: visible;
  font-size: 34px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* ---- results ---- */

.result {
  border-left: 2px solid transparent;
  padding: 0.9rem 1rem;
}
.result[data-vim-selected] {
  background: var(--accent-wash);
  border-left-color: var(--accent);
}
.result h3 { font-size: 1.05rem; }
.result h3 a { font-weight: 700; font-size: 1em; }
.result h3 a:hover { color: var(--accent-bright); }
.result .content, .result .stat, .result .attributes {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-body);
}
.result .content .highlight { color: var(--text); font-weight: 700; }
.result h3 .highlight { color: inherit; }
.result .url_header, .result .url_wrapper, .result .url_i1, .result .url_i2 { font-size: 11.5px; color: var(--text-dim); }
.result .engines, .result .published_date, .result .cache_link, .result .proxyfied_link {
  font-size: 10.5px;
  color: var(--text-faint);
}
.result .engines span { color: var(--text-faint); }
.result .cache_link a, .result .proxyfied_link a { color: var(--text-dimmer); }
.result .cache_link a:hover, .result .proxyfied_link a:hover { color: var(--accent); }
.result img.favicon, .result .favicon img {
  border: 1px solid var(--border);
  background: var(--panel-alt);
}
.result .thumbnail, .result img.image, .result-images img { border: 1px solid var(--border-soft); }

#answers, #infoboxes .infobox, #sidebar .infobox, .result-paper .attributes, #suggestions, #search_url {
  border: 1px solid var(--border);
}
#answers { background: var(--panel-alt); }
#sidebar .infobox { background: var(--panel-alt); }
#infoboxes .title, #suggestions .title, #search_url .title, #engines_msg .title, #apis .title {
  color: var(--text-dim);
  font-size: 12.5px;
}
#suggestions, #search_url { padding: 0.6rem 0.8rem; }
#sidebar-end-collapsible { border-bottom-color: var(--border-soft); }
#engines_msg .engine-name a, #sidebar a { color: var(--accent-strong); }
#engines_msg table { font-size: 12px; }
.bar-chart-bar { background: var(--accent) !important; }

/* buttons: outlined like the site's quick links */
input[type=submit], button[type=submit]:not(#send_search):not(.category_button),
#suggestions form input[type=submit], .button, a.button, #search_url button,
#apis .button, #main_preferences .value input[type=submit], #main_preferences .preferences_back {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-body);
  font-family: var(--font);
  padding: 6px 12px;
}
input[type=submit]:hover, button[type=submit]:not(#send_search):not(.category_button):hover,
.button:hover, a.button:hover, #search_url button:hover, #main_preferences .preferences_back:hover {
  background: var(--accent-wash);
  border-color: oklch(0.68 0.19 300 / 0.6);
  color: var(--accent-bright);
  text-decoration: none;
}
#suggestions .wrapper input[type=submit] {
  border: none;
  padding: 2px 0;
  color: var(--accent-strong);
}
#suggestions .wrapper input[type=submit]:hover { background: none; color: var(--accent-bright); text-decoration: underline; }

/* pagination */
.page_number { text-decoration: none; color: var(--text-dim) !important; padding: 2px 6px; }
.page_number:hover { color: var(--accent-bright) !important; background: var(--accent-wash) !important; }
.page_number_current { color: var(--accent); background: var(--accent-wash); font-weight: 700; padding: 2px 6px; }

/* ---- preferences ---- */

.tabs > label, .tabs > li > a {
  letter-spacing: 0;
  text-transform: lowercase;
  font-size: 12.5px;
  color: var(--text-dimmer);
}
.tabs > label.active, .tabs > li > a.active, .tabs > label:last-of-type {
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
}
#main_preferences table th { color: var(--text-dim); font-weight: 700; }
#main_preferences fieldset legend, #main_preferences h2 { color: var(--text); }
#main_preferences .description { color: var(--text-dim); }
#main_preferences .value select, #main_preferences .value input[type=text] {
  border: 1px solid var(--border);
  background-color: var(--panel-alt);
  color: var(--text-body);
}

/* ---- footer ---- */

footer {
  border-top-width: 2px;
  font-size: 11px;
  color: var(--text-faint);
  min-height: 0;
  padding: 0.8rem 0;
}
footer p { font-size: 11px; margin: 0.2rem 0; }
footer a { color: var(--text-dimmer); }
footer a:hover { color: var(--accent); text-decoration: none; }

/* ---- phones: nothing may be wider than the screen ---- */

/* The stock autocomplete box is sized against the page (44rem, at most
   100% - 1rem) but starts at the search box's left edge, so on phones it
   reached ~2rem past the screen even while closed and the page scrolled
   sideways. Size it to the search box instead. */
.search_box { position: relative; }
.autocomplete { left: 0; right: 0; width: auto; max-width: none; }

#main_preferences #pref-hash-input { box-sizing: border-box; }

/* image results are a fixed 12rem tall at their natural aspect ratio, so a
   panorama came out wider than a phone; crop it to the row instead */
.result-images { box-sizing: border-box; max-width: calc(100% - 0.5rem); }
.result-images > a, .result-images img { max-width: 100%; }

@media screen and (max-width: 50em) {
  /* While typing, the search box covers the header (stock: absolute, width
     100%), but its padding came on top of that 100%, so the page got ~40px
     wider as soon as the keyboard came up. */
  #search_view:focus-within, .search_box { box-sizing: border-box; }
  body.results_endpoint #search_view:focus-within { padding-right: 0; }

  /* stock floats a 15em value column next to a 50% description; on narrow
     phones that is wider than the screen, so stack them */
  #main_preferences fieldset { min-width: 0; }
  #main_preferences .value, #main_preferences .description { float: none; width: auto; }
  #main_preferences .value select { max-width: 100%; }

  /* engine tooltips (shown when an engine name is tapped) start 10em in and
     are up to 40rem wide; span the screen instead */
  #main_preferences table.table_engines th.name .engine-tooltip,
  #main_preferences table.table_engines td .engine-tooltip {
    left: 0.5rem !important;
    right: 0.5rem;
    max-width: none;
    margin-left: 0;
  }

  /* The engine tables swipe inside .scrollx, but the response-time numbers
     next to the bar charts are absolutely positioned against the page, so
     they escaped it and widened the page to ~560px. Anchor them to their
     cell; that cell's tooltip then opens right below it. */
  #main_preferences table.table_engines td:has(> .stacked-bar-chart-value) { position: relative; }
  #main_preferences table.table_engines td:has(> .stacked-bar-chart-value) .engine-tooltip {
    left: 0 !important;
    right: auto;
    top: 100%;
    width: max-content;
  }

  /* /stats: the engine table is wider than a phone and, unlike the ones in
     preferences, has no swipeable wrapper; let it swipe on its own */
  #main_stats table.engine-stats { display: block; max-width: 100%; overflow-x: auto; }
}