/* search.briggen.dev — briggen.dev skin for SearXNG's "simple" theme.
   Injected by searxng-skin (nginx sub_filter) after SearXNG's own stylesheet,
   so it only needs to win on order. Palette = briggen.dev / BigLearn tokens:
   paper + ink + amber in light, BigLearn's dark surfaces in dark.
   Mostly remaps SearXNG's --color-* variables; the rest is type and shape. */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 400 600; font-display: swap; src: url('fonts/plex-sans-var.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('fonts/plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap; src: url('fonts/plex-mono-600.woff2') format('woff2'); }
@font-face { font-family: 'Silkscreen'; font-weight: 400; font-display: swap; src: url('fonts/silkscreen-400.woff2') format('woff2'); }
@font-face { font-family: 'Silkscreen'; font-weight: 700; font-display: swap; src: url('fonts/silkscreen-700.woff2') format('woff2'); }

/* ---------- tokens ---------- */

:root {
  --bd-accent: #C77A33;
  --bd-accent-text: #8F5825;      /* amber dark enough for text on paper */
  --bd-bg: #F4F1EA;
  --bd-raised: #FBF9F3;
  --bd-line: #E6E0D2;
  --bd-line-soft: #EFEADD;
  --bd-text: #1B1C19;
  --bd-strong: #16181A;
  --bd-slate: #56564E;
  --bd-mute: #8A857A;
  --bd-grid: rgba(27, 28, 25, 0.045);
  --bd-shadow: 3px 3px 0 rgba(27, 28, 25, 0.12);
  --bd-shadow-lg: 4px 4px 0 rgba(27, 28, 25, 0.10);
  --bd-link: #1B1C19;
  --bd-visited: #6E5A80;
  --bd-tile: #16181A;
  --bd-tile-text: #F4F1EA;
  --bd-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --bd-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --bd-pixel: 'Silkscreen', 'Courier New', monospace;
}

/* dark: same block twice, like BigLearn (system preference + explicit choice) */
@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --bd-accent-text: #DAA778;
    --bd-bg: #16181A;
    --bd-raised: #1C1F22;
    --bd-line: #26292C;
    --bd-line-soft: #202326;
    --bd-text: #C9CCC8;
    --bd-strong: #E8EAE6;
    --bd-slate: #9A9EA2;
    --bd-mute: #7C8085;
    --bd-grid: rgba(201, 204, 200, 0.05);
    --bd-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
    --bd-shadow-lg: 4px 4px 0 rgba(0, 0, 0, 0.5);
    --bd-link: #E8EAE6;
    --bd-visited: #B9A3CC;
    --bd-tile: #0F1012;
    --bd-tile-text: #E8EAE6;
  }
}
:root.theme-dark, :root.theme-black {
  --bd-accent-text: #DAA778;
  --bd-bg: #16181A;
  --bd-raised: #1C1F22;
  --bd-line: #26292C;
  --bd-line-soft: #202326;
  --bd-text: #C9CCC8;
  --bd-strong: #E8EAE6;
  --bd-slate: #9A9EA2;
  --bd-mute: #7C8085;
  --bd-grid: rgba(201, 204, 200, 0.05);
  --bd-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  --bd-shadow-lg: 4px 4px 0 rgba(0, 0, 0, 0.5);
  --bd-link: #E8EAE6;
  --bd-visited: #B9A3CC;
  --bd-tile: #0F1012;
  --bd-tile-text: #E8EAE6;
}
:root.theme-black { --bd-bg: #000; --bd-raised: #0E0F10; --bd-grid: transparent; }

/* SearXNG variables -> ours. Selectors match theirs so order decides. */
:root, :root.theme-dark, :root.theme-black { color-scheme: light; }
:root.theme-dark, :root.theme-black { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root.theme-auto { color-scheme: dark; } }

:root, :root.theme-auto, :root.theme-dark, :root.theme-black {
  --color-base-font: var(--bd-text);
  --color-base-background: var(--bd-bg);
  --color-base-background-mobile: var(--bd-bg);
  --color-url-font: var(--bd-accent-text);
  --color-url-visited-font: var(--bd-visited);
  --color-header-background: var(--bd-raised);
  --color-header-border: var(--bd-line);
  --color-footer-background: transparent;
  --color-footer-border: var(--bd-line);
  --color-sidebar-border: var(--bd-line);
  --color-sidebar-font: var(--bd-text);
  --color-sidebar-background: var(--bd-raised);
  --color-backtotop-font: var(--bd-text);
  --color-backtotop-border: var(--bd-line);
  --color-backtotop-background: var(--bd-raised);
  --color-btn-background: var(--bd-accent);
  --color-btn-font: #16181A;
  --color-show-btn-background: var(--bd-line);
  --color-show-btn-font: var(--bd-text);
  --color-search-border: var(--bd-line);
  --color-search-shadow: var(--bd-shadow);
  --color-search-background: var(--bd-raised);
  --color-search-font: var(--bd-strong);
  --color-search-background-hover: var(--bd-accent);
  --color-categories-item-selected-font: var(--bd-accent-text);
  --color-categories-item-border-selected: var(--bd-accent);
  --color-autocomplete-font: var(--bd-text);
  --color-autocomplete-border: var(--bd-line);
  --color-autocomplete-shadow: var(--bd-shadow);
  --color-autocomplete-background: var(--bd-raised);
  --color-autocomplete-background-hover: var(--bd-line-soft);
  --color-answer-font: var(--bd-text);
  --color-answer-background: var(--bd-raised);
  --color-result-keyvalue-col-table: var(--bd-raised);
  --color-result-keyvalue-odd: var(--bd-raised);
  --color-result-keyvalue-even: var(--bd-bg);
  --color-result-background: var(--bd-raised);
  --color-result-border: var(--bd-line);
  --color-result-url-font: var(--bd-slate);
  --color-result-vim-selected: var(--bd-line-soft);
  --color-result-vim-arrow: var(--bd-accent);
  --color-result-description-highlight-font: var(--bd-strong);
  --color-result-link-font: var(--bd-link);
  --color-result-link-font-highlight: var(--bd-accent-text);
  --color-result-link-visited-font: var(--bd-visited);
  --color-result-publishdate-font: var(--bd-mute);
  --color-result-engines-font: var(--bd-mute);
  --color-result-search-url-border: var(--bd-line);
  --color-result-search-url-font: var(--bd-text);
  --color-result-image-span-font: var(--bd-text);
  --color-result-image-background: var(--bd-raised);
  --color-settings-tr-hover: var(--bd-line-soft);
  --color-settings-engine-description-font: var(--bd-slate);
  --color-toolkit-badge-background: var(--bd-slate);
  --color-toolkit-dialog-border: var(--bd-line);
  --color-toolkit-dialog-background: var(--bd-raised);
  --color-toolkit-tabs-label-border: var(--bd-bg);
  --color-toolkit-tabs-section-border: var(--bd-line);
  --color-toolkit-select-background: var(--bd-raised);
  --color-toolkit-select-border: var(--bd-line);
  --color-toolkit-select-background-hover: var(--bd-line-soft);
  --color-toolkit-input-text-font: var(--bd-strong);
  --color-toolkit-checkbox-onoff-off-background: var(--bd-line);
  --color-toolkit-checkbox-onoff-on-background: var(--bd-line);
  --color-toolkit-checkbox-onoff-on-mark-background: var(--bd-accent);
  --color-toolkit-checkbox-onoff-off-mark-background: var(--bd-mute);
  --color-toolkit-checkbox-label-background: var(--bd-line);
  --color-toolkit-checkbox-label-border: var(--bd-line);
  --color-toolkit-checkbox-input-border: var(--bd-accent);
  --color-toolkit-engine-tooltip-border: var(--bd-line);
  --color-toolkit-engine-tooltip-background: var(--bd-raised);
  --color-doc-code: var(--bd-strong);
  --color-doc-code-background: var(--bd-line-soft);
  --color-bar-chart-primary: var(--bd-accent);
  --color-favicon-background-color: var(--bd-line);
  --color-favicon-border-color: var(--bd-line);
}

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

html { background: var(--bd-bg); }
body {
  background-color: var(--bd-bg);
  background-image:
    linear-gradient(var(--bd-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bd-grid) 1px, transparent 1px);
  background-size: 18px 18px;
  font-family: var(--bd-sans);
  color: var(--bd-text);
}
::selection { background: var(--bd-accent); color: #16181A; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--bd-accent); outline-offset: 2px; }

/* top-right links + our home link */
#links_on_top { font-family: var(--bd-mono); font-size: 13px; align-items: center; }
#links_on_top a { color: var(--bd-slate); }
#links_on_top a:hover { color: var(--bd-accent-text); }
#links_on_top a.bd-home { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--bd-text); }
#links_on_top a.bd-home:hover { color: var(--bd-accent-text); }
.bd-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 5px;
  background: var(--bd-tile); color: var(--bd-tile-text);
  font-family: var(--bd-pixel); font-size: 9px; line-height: 1; letter-spacing: 0;
  box-shadow: 2px 2px 0 rgba(27, 28, 25, 0.15);
}
.bd-tile .bk, .bd-word .bk { color: var(--bd-accent); }
/* SearXNG colours every descendant of the top links and hides their spans on
   narrow screens; the tile must survive both */
#links_on_top a.bd-home .bd-tile, #links_on_top a.bd-home:link .bd-tile { display: inline-flex !important; color: var(--bd-tile-text) !important; }
#links_on_top a.bd-home .bd-tile .bk { display: inline !important; color: var(--bd-accent) !important; }

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

.index .title.bd-title { background: none; min-height: 0; margin: 4.5rem auto 2.2rem; }
.index .bd-title .bd-kicker {
  font-family: var(--bd-mono); font-size: 13px; letter-spacing: 0.06em;
  color: var(--bd-accent-text); margin-bottom: 18px;
}
.index .bd-title h1.bd-word {
  visibility: visible; margin: 0; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--bd-pixel); font-weight: 400; font-size: 48px; line-height: 1;
  color: var(--bd-strong);
}
.index .bd-title h1.bd-word .bk { font-size: 1.5em; }
.bd-cursor {
  display: inline-block; width: 14px; height: 38px; margin-left: 8px;
  background: var(--bd-accent); animation: bd-blink 1.1s steps(1) infinite;
}
@keyframes bd-blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bd-cursor { animation: none; } }
.index .bd-hint {
  font-family: var(--bd-mono); font-size: 12.5px; color: var(--bd-mute);
  margin: 1.4rem auto 0; max-width: 44rem; line-height: 1.9;
}
.index .bd-hint code { display: inline-block; white-space: nowrap; margin: 2px 1px;
  font-family: var(--bd-mono); color: var(--bd-text);
  background: var(--bd-raised); border: 1px solid var(--bd-line); border-radius: 3px; padding: 1px 5px;
}

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

.search_box {
  border: 1px solid var(--bd-line); border-radius: 6px;
  box-shadow: var(--bd-shadow);
  background: var(--bd-raised);
}
.search_box:focus-within { border-color: var(--bd-accent); }
#q, .search_box input { font-family: var(--bd-sans); font-size: 1.05rem; background: transparent; color: var(--bd-strong); }
#q::placeholder { color: var(--bd-mute); font-family: var(--bd-mono); font-size: 0.95rem; }
#send_search, #clear_search { background: transparent; color: var(--bd-slate); border-radius: 0 6px 6px 0; }
#send_search:hover { color: var(--bd-accent-text); }
.autocomplete { border-radius: 0 0 6px 6px; font-family: var(--bd-sans); }
.autocomplete li.active, .autocomplete li:hover { color: var(--bd-accent-text); }

/* results-page logo: our tile instead of the SearXNG wordmark */
#search_logo:has(.bd-logo) svg { display: none; }
#search_logo .bd-logo { width: 32px; height: 32px; font-size: 10px; border-radius: 6px; }

/* ---------- header, tabs, filters ---------- */

#search_header { background: var(--bd-raised); }
#categories, .category_checkbox label, .category_button {
  font-family: var(--bd-mono); font-size: 13px; text-transform: lowercase; letter-spacing: 0.02em;
}
.category_checkbox label, .category_button { color: var(--bd-slate); }
.category_checkbox label:hover, .category_button:hover { color: var(--bd-text); }
.category_checkbox input[type=checkbox]:checked + label,
.category_button.selected { color: var(--bd-accent-text); font-weight: 600; }

.search_filters select, select {
  font-family: var(--bd-mono); font-size: 12.5px; color: var(--bd-slate);
  background-color: var(--bd-raised); border: 1px solid var(--bd-line); border-radius: 4px;
}

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

.result h3 { font-family: var(--bd-sans); font-weight: 500; }
.result h3 a { font-weight: 500; text-decoration: none; }
.result h3 a:hover, .result h3 a:focus {
  color: var(--bd-accent-text); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.result .url_wrapper, .result .url_header { font-family: var(--bd-mono); font-size: 12.5px; }
.result .content, .result p.content { color: var(--bd-slate); line-height: 1.55; }
.result .content .highlight, .result .highlight { color: var(--bd-strong); font-weight: 600; }
.result .engines, .result .engines span, .result .engines a, .result .published_date, .result .result_header small {
  font-family: var(--bd-mono); font-size: 11.5px;
}
.result .engines a { color: var(--bd-accent-text); }
.result .engines span { color: var(--bd-mute); }
article.result[data-vim-selected] { background: var(--bd-line-soft); }

/* answers + infobox + sidebar: cards with the hard briggen.dev shadow */
#answers {
  background: var(--bd-raised); border: 1px solid var(--bd-line); border-radius: 6px;
  box-shadow: var(--bd-shadow-lg);
}
#answers h4 { font-family: var(--bd-mono); color: var(--bd-accent-text); }
#answers a { color: var(--bd-accent-text); }
#infoboxes .infobox {
  background: var(--bd-raised); border: 1px solid var(--bd-line); border-radius: 6px;
  box-shadow: var(--bd-shadow-lg);
}
#infoboxes .infobox h2 { font-family: var(--bd-sans); font-weight: 600; color: var(--bd-strong); }
#infoboxes .infobox a { color: var(--bd-accent-text); }
#infoboxes .infobox .urls a, #infoboxes .infobox .attributes dt { font-family: var(--bd-mono); font-size: 12.5px; }
#sidebar details summary, #sidebar .title, #sidebar h4 { font-family: var(--bd-mono); font-size: 13px; color: var(--bd-slate); }
#suggestions .wrapper input[type=submit], #corrections a, #search_url input, #search_url button {
  font-family: var(--bd-mono); font-size: 12.5px;
}
#suggestions .suggestion, #suggestions input[type=submit] { color: var(--bd-accent-text); }

/* pagination / buttons */
#pagination button, #pagination input[type=submit], .button, input[type=submit], button.button {
  font-family: var(--bd-mono); font-size: 13px; border-radius: 5px;
}
#pagination button, #pagination input[type=submit] {
  background: var(--bd-raised); color: var(--bd-text); border: 1px solid var(--bd-line); box-shadow: var(--bd-shadow);
}
#pagination button:hover, #pagination input[type=submit]:hover { border-color: var(--bd-accent); color: var(--bd-accent-text); }
#pagination .page_number_current { background: var(--bd-accent) !important; color: #16181A !important; border-color: var(--bd-accent) !important; }
#backToTop { border-radius: 5px; box-shadow: var(--bd-shadow); }

/* preferences / about */
.tabs > label, .tabs > li > a { font-family: var(--bd-mono); font-size: 13px; text-transform: lowercase; letter-spacing: 0.02em; }
#main_preferences h1, #main_about h1, #main_stats h1, #main_info h1 { font-family: var(--bd-pixel); font-weight: 400; color: var(--bd-strong); }
#main_preferences h2, #main_about h2, #main_info h2 { font-family: var(--bd-mono); font-weight: 600; font-size: 1.05rem; color: var(--bd-accent-text); }
#main_preferences fieldset legend, #main_preferences th { font-family: var(--bd-mono); }
#main_preferences input[type=submit], #main_preferences .button { background: var(--bd-accent); color: #16181A; border: 0; box-shadow: var(--bd-shadow); }

/* footer */
footer { font-family: var(--bd-mono); font-size: 12px; color: var(--bd-mute); border-top: 1px solid var(--bd-line); }
footer a { color: var(--bd-slate); }
footer a:hover { color: var(--bd-accent-text); }

/* front page order: wordmark, search box, cheat-sheet */
.index { padding: 0 12px; box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; }
.index > * { order: 1; }
.index > .bd-hint { order: 2; text-align: center; }
.index #search { width: 100%; max-width: 44rem; margin: 0 auto; }
.index .search_box { width: 100%; }

/* small screens: the results header has no room for our home link */
@media screen and (max-width: 50em) {
  body.results_endpoint #links_on_top a.bd-home { display: none !important; }
}

/* preferences / about / stats: small wordmark in place of the logo image */
.bd-pagelogo {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--bd-pixel); font-size: 26px; line-height: 1; color: var(--bd-strong);
  margin: 0.4rem 0 0.2rem;
}
.bd-pagelogo .bk { font-size: 1.45em; }